@ai-table/grid 0.0.43 → 0.0.45

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, output, inject, ElementRef, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ChangeDetectorRef, ViewChild, HostListener, input, Renderer2, Pipe, model, booleanAttribute, Injectable, InjectionToken, effect, DestroyRef, NgZone, ViewContainerRef, viewChild, afterNextRender, untracked } from '@angular/core';
+import { signal, computed, output, inject, ElementRef, Component, ChangeDetectionStrategy, Input, input, EventEmitter, Output, ChangeDetectorRef, ViewChild, HostListener, Renderer2, Pipe, model, booleanAttribute, Injectable, InjectionToken, effect, DestroyRef, NgZone, ViewContainerRef, viewChild, afterNextRender, untracked } from '@angular/core';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import ObjectID from 'bson-objectid';
@@ -152,7 +152,6 @@ var AITableFieldType;
     AITableFieldType["number"] = "number";
     AITableFieldType["date"] = "date";
     AITableFieldType["member"] = "member";
-    // cascadeSelect = 'cascade_select', // 包含单选和多选，参数复杂后续再进行设计
     AITableFieldType["progress"] = "progress";
     AITableFieldType["rate"] = "rate";
     AITableFieldType["link"] = "link";
@@ -203,105 +202,189 @@ var DragType;
     DragType["none"] = "none";
 })(DragType || (DragType = {}));
 
+var AITableGridI18nKey;
+(function (AITableGridI18nKey) {
+    AITableGridI18nKey["dataPickerPlaceholder"] = "dataPickerPlaceholder";
+    AITableGridI18nKey["linkTooltip"] = "linkTooltip";
+    AITableGridI18nKey["invalidLinkFormat"] = "invalidLinkFormat";
+    AITableGridI18nKey["linkRequired"] = "linkRequired";
+    AITableGridI18nKey["linkText"] = "linkText";
+    AITableGridI18nKey["linkUrl"] = "linkUrl";
+    AITableGridI18nKey["inputText"] = "inputText";
+    AITableGridI18nKey["inputUrl"] = "inputUrl";
+    AITableGridI18nKey["fieldColumnName"] = "fieldColumnName";
+    AITableGridI18nKey["fieldColumnNamePlaceholder"] = "fieldColumnNamePlaceholder";
+    AITableGridI18nKey["fieldType"] = "fieldType";
+    AITableGridI18nKey["allowMultipleMembers"] = "allowMultipleMembers";
+    AITableGridI18nKey["cancel"] = "cancel";
+    AITableGridI18nKey["apply"] = "apply";
+    AITableGridI18nKey["fieldNameRequired"] = "fieldNameRequired";
+    AITableGridI18nKey["fieldNameDuplicate"] = "fieldNameDuplicate";
+    AITableGridI18nKey["confirm"] = "confirm";
+    AITableGridI18nKey["copiedCells"] = "copiedCells";
+    AITableGridI18nKey["invalidPasteContent"] = "invalidPasteContent";
+    AITableGridI18nKey["fieldTypeText"] = "fieldTypeText";
+    AITableGridI18nKey["fieldTypeSelect"] = "fieldTypeSelect";
+    AITableGridI18nKey["fieldTypeMultiSelect"] = "fieldTypeMultiSelect";
+    AITableGridI18nKey["fieldTypeNumber"] = "fieldTypeNumber";
+    AITableGridI18nKey["fieldTypeDate"] = "fieldTypeDate";
+    AITableGridI18nKey["fieldTypeMember"] = "fieldTypeMember";
+    AITableGridI18nKey["fieldTypeProgress"] = "fieldTypeProgress";
+    AITableGridI18nKey["fieldTypeRate"] = "fieldTypeRate";
+    AITableGridI18nKey["fieldTypeLink"] = "fieldTypeLink";
+    AITableGridI18nKey["fieldTypeAttachment"] = "fieldTypeAttachment";
+    AITableGridI18nKey["fieldTypeCreatedBy"] = "fieldTypeCreatedBy";
+    AITableGridI18nKey["fieldTypeCreatedAt"] = "fieldTypeCreatedAt";
+    AITableGridI18nKey["fieldTypeUpdatedBy"] = "fieldTypeUpdatedBy";
+    AITableGridI18nKey["fieldTypeUpdatedAt"] = "fieldTypeUpdatedAt";
+})(AITableGridI18nKey || (AITableGridI18nKey = {}));
+const AITableI18nText = {
+    [AITableGridI18nKey.dataPickerPlaceholder]: '选择日期',
+    [AITableGridI18nKey.linkTooltip]: '链接',
+    [AITableGridI18nKey.invalidLinkFormat]: '链接格式不正确',
+    [AITableGridI18nKey.linkRequired]: '链接不能为空',
+    [AITableGridI18nKey.linkText]: '文本',
+    [AITableGridI18nKey.linkUrl]: '链接',
+    [AITableGridI18nKey.inputText]: '输入文本',
+    [AITableGridI18nKey.inputUrl]: '输入链接',
+    [AITableGridI18nKey.fieldColumnName]: '表格列名',
+    [AITableGridI18nKey.fieldColumnNamePlaceholder]: '输入列名称',
+    [AITableGridI18nKey.fieldType]: '列类型',
+    [AITableGridI18nKey.allowMultipleMembers]: '允许选择多个成员',
+    [AITableGridI18nKey.cancel]: '取消',
+    [AITableGridI18nKey.apply]: '应用',
+    [AITableGridI18nKey.fieldNameRequired]: '列名不能为空',
+    [AITableGridI18nKey.fieldNameDuplicate]: '列名已存在',
+    [AITableGridI18nKey.confirm]: '确定',
+    [AITableGridI18nKey.copiedCells]: '已复制 {count} 个单元格',
+    [AITableGridI18nKey.invalidPasteContent]: '粘贴内容不符合当前类型', // 新增
+    [AITableGridI18nKey.fieldTypeText]: '单行文本',
+    [AITableGridI18nKey.fieldTypeSelect]: '单选',
+    [AITableGridI18nKey.fieldTypeMultiSelect]: '多选',
+    [AITableGridI18nKey.fieldTypeNumber]: '数字',
+    [AITableGridI18nKey.fieldTypeDate]: '日期',
+    [AITableGridI18nKey.fieldTypeMember]: '成员',
+    [AITableGridI18nKey.fieldTypeProgress]: '进度',
+    [AITableGridI18nKey.fieldTypeRate]: '评分',
+    [AITableGridI18nKey.fieldTypeLink]: '链接',
+    [AITableGridI18nKey.fieldTypeAttachment]: '附件',
+    [AITableGridI18nKey.fieldTypeCreatedBy]: '创建人',
+    [AITableGridI18nKey.fieldTypeCreatedAt]: '创建时间',
+    [AITableGridI18nKey.fieldTypeUpdatedBy]: '更新人',
+    [AITableGridI18nKey.fieldTypeUpdatedAt]: '更新时间'
+};
+const getDefaultI18nTextByKey = (key) => {
+    return AITableI18nText[key] || key;
+};
+const getI18nTextByKey = (aiTable, key) => {
+    if (aiTable.getI18nTextByKey) {
+        const customText = aiTable.getI18nTextByKey(key);
+        if (customText) {
+            return customText;
+        }
+    }
+    const defaultText = getDefaultI18nTextByKey(key);
+    return defaultText;
+};
+
 const AI_TABLE_FIELD_MINI_WIDTH = 140;
 const AI_TABLE_FIELD_MIN_WIDTH = 160;
 const AI_TABLE_FIELD_MIDDLE_WIDTH = 200;
 const AI_TABLE_FIELD_MAX_WIDTH = 300;
-const FieldOptions = [
-    {
-        type: AITableFieldType.text,
-        name: '单行文本',
-        icon: 'font',
-        width: AI_TABLE_FIELD_MAX_WIDTH
-    },
-    // 多行文本
-    {
-        type: AITableFieldType.select,
-        name: '单选',
-        icon: 'check-circle',
-        width: AI_TABLE_FIELD_MIN_WIDTH
-    },
-    {
-        type: AITableFieldType.select,
-        name: '多选',
-        icon: 'list-check',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH,
-        settings: {
-            is_multiple: true
-        }
-    },
-    {
-        type: AITableFieldType.number,
-        name: '数字',
-        icon: 'hashtag',
-        width: AI_TABLE_FIELD_MINI_WIDTH
-    },
-    {
-        type: AITableFieldType.date,
-        name: '日期',
-        icon: 'calendar',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    },
-    {
-        type: AITableFieldType.member,
-        name: '成员',
-        icon: 'user',
-        width: AI_TABLE_FIELD_MIN_WIDTH,
-        settings: {
-            is_multiple: false
-        }
-    },
-    // 级联单选
-    // 级联多选
-    {
-        type: AITableFieldType.progress,
-        name: '进度',
-        icon: 'progress',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    },
-    {
-        type: AITableFieldType.rate,
-        name: '评分',
-        icon: 'star-circle',
-        width: AI_TABLE_FIELD_MIN_WIDTH
-    },
-    {
-        type: AITableFieldType.link,
-        name: '链接',
-        icon: 'link-insert',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    },
-    {
-        type: AITableFieldType.attachment,
-        name: '附件',
-        icon: 'attachment',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    },
-    {
-        type: AITableFieldType.createdBy,
-        name: '创建人',
-        icon: 'user',
-        width: AI_TABLE_FIELD_MIN_WIDTH
-    },
-    {
-        type: AITableFieldType.createdAt,
-        name: '创建时间',
-        icon: 'calendar',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    },
-    {
-        type: AITableFieldType.updatedBy,
-        name: '更新人',
-        icon: 'user',
-        width: AI_TABLE_FIELD_MIN_WIDTH
-    },
-    {
-        type: AITableFieldType.updatedAt,
-        name: '更新时间',
-        icon: 'calendar',
-        width: AI_TABLE_FIELD_MIDDLE_WIDTH
-    }
-];
+function getFieldOptions(aiTable) {
+    return [
+        {
+            type: AITableFieldType.text,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeText),
+            icon: 'font',
+            width: AI_TABLE_FIELD_MAX_WIDTH
+        },
+        {
+            type: AITableFieldType.select,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeSelect),
+            icon: 'check-circle',
+            width: AI_TABLE_FIELD_MIN_WIDTH
+        },
+        {
+            type: AITableFieldType.select,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMultiSelect),
+            icon: 'list-check',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH,
+            settings: {
+                is_multiple: true
+            }
+        },
+        {
+            type: AITableFieldType.number,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeNumber),
+            icon: 'hashtag',
+            width: AI_TABLE_FIELD_MINI_WIDTH
+        },
+        {
+            type: AITableFieldType.date,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeDate),
+            icon: 'calendar',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        },
+        {
+            type: AITableFieldType.member,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeMember),
+            icon: 'user',
+            width: AI_TABLE_FIELD_MIN_WIDTH,
+            settings: {
+                is_multiple: false
+            }
+        },
+        {
+            type: AITableFieldType.progress,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeProgress),
+            icon: 'progress',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        },
+        {
+            type: AITableFieldType.rate,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeRate),
+            icon: 'star-circle',
+            width: AI_TABLE_FIELD_MIN_WIDTH
+        },
+        {
+            type: AITableFieldType.link,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeLink),
+            icon: 'link-insert',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        },
+        {
+            type: AITableFieldType.attachment,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeAttachment),
+            icon: 'attachment',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        },
+        {
+            type: AITableFieldType.createdBy,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedBy),
+            icon: 'user',
+            width: AI_TABLE_FIELD_MIN_WIDTH
+        },
+        {
+            type: AITableFieldType.createdAt,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeCreatedAt),
+            icon: 'calendar',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        },
+        {
+            type: AITableFieldType.updatedBy,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedBy),
+            icon: 'user',
+            width: AI_TABLE_FIELD_MIN_WIDTH
+        },
+        {
+            type: AITableFieldType.updatedAt,
+            name: getI18nTextByKey(aiTable, AITableGridI18nKey.fieldTypeUpdatedAt),
+            icon: 'calendar',
+            width: AI_TABLE_FIELD_MIDDLE_WIDTH
+        }
+    ];
+}
 
 var AITableAvatarSize;
 (function (AITableAvatarSize) {
@@ -674,6 +757,49 @@ function shortIdsCreator(count) {
     return shortId(undefined, 8, count);
 }
 
+function createAITable(records, fields, gridData) {
+    const aiTable = {
+        records,
+        fields,
+        gridData,
+        selection: signal({
+            selectedRecords: new Set(),
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null,
+            selectAllState: AITableSelectAllState.none
+        }),
+        keywordsMatchedCells: signal(new Set()),
+        recordsMap: computed(() => {
+            return records().reduce((object, item) => {
+                object[item._id] = item;
+                return object;
+            }, {});
+        }),
+        fieldsMap: computed(() => {
+            return fields().reduce((object, item) => {
+                object[item._id] = item;
+                return object;
+            }, {});
+        }),
+        recordsWillHidden: signal([]),
+        recordsWillMove: signal([])
+    };
+    return aiTable;
+}
+function generateNewName(existNames, count, name) {
+    let newName = name;
+    let suffix = count;
+    if (count > 1) {
+        newName = `${name} ${suffix}`;
+    }
+    while (existNames.includes(newName)) {
+        suffix++;
+        newName = `${name} ${suffix}`;
+    }
+    return newName;
+}
+
 const isArrayField = (field) => {
     return [
         AITableFieldType.member,
@@ -699,17 +825,20 @@ function getDefaultFieldValue(field) {
     return '';
 }
 function createDefaultFieldName(aiTable, field) {
-    const fieldOption = getFieldOptionByField(field);
+    const fieldOption = getFieldOptionByField(aiTable, field);
     if (fieldOption) {
+        const allNames = aiTable.fields().map((item) => item.name);
         const count = aiTable.fields().filter((item) => {
             return isSameFieldOption(field, item);
         }).length;
-        return count === 0 ? fieldOption.name : fieldOption.name + ' ' + count;
+        return generateNewName(allNames, count, fieldOption.name);
     }
-    return FieldOptions[0].name;
+    const fieldOptions = getFieldOptions(aiTable);
+    return fieldOptions[0].name;
 }
-function getFieldOptionByField(field) {
-    let fieldOption = FieldOptions.find((item) => isSameFieldOption(item, field));
+function getFieldOptionByField(aiTable, field) {
+    const fieldOptions = getFieldOptions(aiTable);
+    let fieldOption = fieldOptions.find((item) => isSameFieldOption(item, field));
     if (fieldOption && field.type === AITableFieldType.member && field.settings?.is_multiple) {
         fieldOption.width = AI_TABLE_FIELD_MIDDLE_WIDTH;
     }
@@ -722,41 +851,11 @@ function isSameFieldOption(fieldOption, field) {
             : true));
 }
 function createDefaultField(aiTable, type = AITableFieldType.text) {
-    const fieldOption = FieldOptions.find((item) => item.type === type);
+    const fieldOptions = getFieldOptions(aiTable);
+    const fieldOption = fieldOptions.find((item) => item.type === type);
     return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, fieldOption) };
 }
 
-function createAITable(records, fields, gridData) {
-    const aiTable = {
-        records,
-        fields,
-        gridData,
-        selection: signal({
-            selectedRecords: new Set(),
-            selectedFields: new Set(),
-            selectedCells: new Set(),
-            activeCell: null,
-            selectAllState: AITableSelectAllState.none
-        }),
-        keywordsMatchedCells: signal(new Set()),
-        recordsMap: computed(() => {
-            return records().reduce((object, item) => {
-                object[item._id] = item;
-                return object;
-            }, {});
-        }),
-        fieldsMap: computed(() => {
-            return fields().reduce((object, item) => {
-                object[item._id] = item;
-                return object;
-            }, {});
-        }),
-        recordsWillHidden: signal([]),
-        recordsWillMove: signal([])
-    };
-    return aiTable;
-}
-
 function getFieldValue(record, field) {
     if (isSystemField(field)) {
         return getSystemFieldValue(record, field.type);
@@ -917,6 +1016,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class DateCellEditorComponent extends AbstractEditCellEditor {
+    constructor() {
+        super(...arguments);
+        this.placeholder = '';
+    }
     ngOnInit() {
         this.modelValue = computed(() => {
             const value = AITableQueries.getFieldValue(this.aiTable, [this.record()._id, this.field()._id]);
@@ -927,6 +1030,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
             }
             return value;
         })();
+        this.placeholder = getI18nTextByKey(this.aiTable, AITableGridI18nKey.dataPickerPlaceholder);
     }
     updateValue(value) {
         this.updateFieldValue.emit({
@@ -945,7 +1049,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
-            thyPlaceHolder="选择日期"
+            [thyPlaceHolder]="placeholder"
             [ngModel]="modelValue.timestamp"
             (ngModelChange)="updateValue($event)"
             (thyOpenChange)="thyOpenChange($event)"
@@ -967,7 +1071,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
-            thyPlaceHolder="选择日期"
+            [thyPlaceHolder]="placeholder"
             [ngModel]="modelValue.timestamp"
             (ngModelChange)="updateValue($event)"
             (thyOpenChange)="thyOpenChange($event)"
@@ -998,23 +1102,37 @@ class LinkEditComponent {
         this.thyPopoverRef = thyPopoverRef;
         this.url = '';
         this.text = '';
+        this.aiTable = input();
         this.confirm = new EventEmitter();
         this.URLRegex = LINK_URL_REGEX;
-        this.validatorConfig = {
-            validationMessages: {
-                url: {
-                    pattern: '链接格式不正确'
+        this.i18nTexts = computed(() => {
+            return {
+                linkText: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkText),
+                textPlaceholder: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.inputText),
+                urlLabel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkUrl),
+                urlPlaceholder: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.inputUrl),
+                cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
+                apply: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.apply)
+            };
+        });
+        this.validatorConfig = computed(() => {
+            return {
+                validationMessages: {
+                    url: {
+                        pattern: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.invalidLinkFormat)
+                    }
                 }
-            }
-        };
+            };
+        });
+    }
+    ngOnInit() {
     }
-    ngOnInit() { }
     close() {
         this.thyPopoverRef.close();
     }
     apply(form) {
         if (this.text && !this.url) {
-            form.validator.setElementErrorMessage('url', '链接不能为空');
+            form.validator.setElementErrorMessage('url', getI18nTextByKey(this.aiTable(), AITableGridI18nKey.linkRequired));
             return;
         }
         this.close();
@@ -1024,7 +1142,7 @@ class LinkEditComponent {
         this.confirm.emit(link);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: "url", text: "text" }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input thyInput placeholder=\"\u8F93\u5165\u6587\u672C\" name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input name=\"url\" thyInput placeholder=\"\u8F93\u5165\u94FE\u63A5\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">\u53D6\u6D88</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{i18nTexts().cancel}}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{i18nTexts().apply}}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkEditComponent, decorators: [{
             type: Component,
@@ -1036,7 +1154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ThyButton,
                         ThyFormSubmitDirective,
                         ThyFormModule
-                    ], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group thyLabelText=\"\u6587\u672C\">\n        <input thyInput placeholder=\"\u8F93\u5165\u6587\u672C\" name=\"text\" [(ngModel)]=\"text\" thyAutofocus type=\"text\" />\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u94FE\u63A5\">\n        <input name=\"url\" thyInput placeholder=\"\u8F93\u5165\u94FE\u63A5\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">\u53D6\u6D88</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">\u5E94\u7528</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
+                    ], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" [pattern]=\"URLRegex\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{i18nTexts().cancel}}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{i18nTexts().apply}}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ThyPopoverRef }], propDecorators: { url: [{
                 type: Input
             }], text: [{
@@ -1055,6 +1173,9 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         this.cdr = inject(ChangeDetectorRef);
         this.notifyService = inject(ThyNotifyService);
         this.isOpened = false;
+        this.linkTooltip = computed(() => {
+            return getI18nTextByKey(this.aiTable, AITableGridI18nKey.linkTooltip);
+        });
     }
     isValidLink(link) {
         if (!link?.text?.trim()) {
@@ -1089,7 +1210,7 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
     }
     updateValue() {
         if (!this.isValidLink({ text: this.text, url: this.url ?? '' })) {
-            this.notifyService.error('链接格式不正确');
+            this.notifyService.error(getI18nTextByKey(this.aiTable, AITableGridI18nKey.invalidLinkFormat));
             return;
         }
         this.modelValue = this.createLinkValue({ text: this.text, url: this.url ?? '' });
@@ -1108,7 +1229,8 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
             width: this.elementRef.nativeElement.clientWidth + 'px',
             initialState: {
                 url: this.url ?? '',
-                text: this.text ?? ''
+                text: this.text ?? '',
+                aiTable: this.aiTable
             }
         });
         if (popoverRef) {
@@ -1124,7 +1246,7 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            thyTooltip=\"\u94FE\u63A5\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
             type: Component,
@@ -1136,11 +1258,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         ThyTooltipModule,
                         ThyAction,
                         ThyInputModule,
-                        ThyFlexibleTextModule,
-                        LinkEditComponent
+                        ThyFlexibleTextModule
                     ], host: {
                         class: 'ai-table-link-editor'
-                    }, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            thyTooltip=\"\u94FE\u63A5\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n" }]
+                    }, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n" }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: false }]
@@ -1529,18 +1650,22 @@ class AITableFieldSetting {
         this.addField = output();
         this.setField = output();
         this.selectedFieldOption = computed(() => {
-            return getFieldOptionByField(this.aiEditField());
+            return getFieldOptionByField(this.aiTable(), this.aiEditField());
         });
         this.fieldMaxLength = 32;
-        this.validatorConfig = {
-            validationMessages: {
-                fieldName: {
-                    required: '列名不能为空',
-                    thyUniqueCheck: '列名已存在'
+        this.validatorConfig = computed(() => {
+            return {
+                validationMessages: {
+                    fieldName: {
+                        required: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameRequired),
+                        thyUniqueCheck: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldNameDuplicate)
+                    }
                 }
-            }
-        };
-        this.fieldOptions = _.cloneDeep(FieldOptions);
+            };
+        });
+        this.fieldOptions = computed(() => {
+            return getFieldOptions(this.aiTable());
+        });
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
         this.thyPopoverRef = inject((ThyPopoverRef));
@@ -1550,6 +1675,16 @@ class AITableFieldSetting {
                 .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)
+            };
+        });
     }
     ngOnInit() {
         this.isMultipleMember =
@@ -1595,7 +1730,7 @@ class AITableFieldSetting {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\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=\"\u5217\u7C7B\u578B\">\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                \u5141\u8BB8\u9009\u62E9\u591A\u4E2A\u6210\u5458\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\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions; track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{i18nTexts().allowMultipleMembers}}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{i18nTexts().cancel}}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{i18nTexts().confirm}}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
@@ -1621,7 +1756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AITableFieldIsSameOptionPipe
                     ], host: {
                         class: 'field-setting d-block pl-5 pr-5 pb-5 pt-4'
-                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\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=\"\u5217\u7C7B\u578B\">\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                \u5141\u8BB8\u9009\u62E9\u591A\u4E2A\u6210\u5458\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\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions; track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
+                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span\n                    thyDropdownMenuItem\n                    [thyDropdown]=\"menu\"\n                    [thyDisabled]=\"isUpdate()\"\n                    thyTrigger=\"hover\"\n                    thyPlacement=\"right\"\n                    (click)=\"fieldTypeClick($event)\"\n                >\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{i18nTexts().allowMultipleMembers}}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [thyDisabled]=\"isUpdate()\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{i18nTexts().cancel}}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{i18nTexts().confirm}}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of fieldOptions(); track $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: (item | fieldIsSameOption: aiEditField())\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
         }] });
 
 class AITableGridSelectionService {
@@ -1813,6 +1948,8 @@ const GRID_CELL_EDITOR_MAP = {
 };
 
 const AI_TABLE_ACTION_COMMON_SIZE = 32; // 表格图标action背景的通用尺寸
+const AI_TABLE_ACTION_COMMON_RADIUS = 4; // 表格图标action背景的radius通用尺寸
+const AI_TABLE_ACTION_COMMON_RIGHT_PADDING = 6; // 表格图标action右侧padding尺寸
 const AI_TABLE_DEFAULT_COLUMN_WIDTH = 200; // 默认列宽
 const AI_TABLE_SCROLL_BAR_PADDING = 3; // 单元格滑动容器的滚动条宽度
 const AI_TABLE_OFFSET = 0.5; // 边框线偏移值
@@ -1827,6 +1964,8 @@ const AI_TABLE_FIELD_HEAD_HEIGHT = 44; // 表格字段列头的高度
 const AI_TABLE_ROW_BLANK_HEIGHT = 43; // 减去边框后真实的行高
 const AI_TABLE_ROW_HEIGHT = 44; // 默认行高基准
 const AI_TABLE_CELL_ACTIVE_BORDER_WIDTH = 2; // 选中单元格的边框宽度
+const AI_TABLE_CELL_ATTACHMENT_ADD = 'AI_TABLE_CELL_ATTACHMENT_ADD'; // 附件cell中新增图标名称
+const AI_TABLE_CELL_ATTACHMENT_FILE = 'AI_TABLE_CELL_ATTACHMENT_FILE'; // 附件cell中文件
 const AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH = 30; // 字段列头文本的最小宽度
 const AI_TABLE_ROW_SELECT_CHECKBOX = 'AI_TABLE_ROW_SELECT_CHECKBOX'; // 行 checkbox
 const AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX = 'AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX'; // 表头 checkbox 标识
@@ -1863,7 +2002,7 @@ const AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT = 8; // 成员头像与成员名
 const AI_TABLE_FILE_ICON_ITEM_HEIGHT = 20; // 文件字段项高度
 const AI_TABLE_FILE_ICON_SIZE = 20; // 文件图标大小
 const AI_TABLE_CELL_FIELD_ITEM_HEIGHT = 8; // 文件字段项右边距
-const AI_TABLE_FIELD_ITEM_MARGIN_RIGHT = 4; // 文件图标之间的间距
+const AI_TABLE_FIELD_ITEM_MARGIN_RIGHT = 8; // 文件图标之间的间距
 const AI_TABLE_OPTION_ITEM_PADDING = 10; // 选项按钮间距
 const AI_TABLE_OPTION_ITEM_HEIGHT = 24;
 const AI_TABLE_OPTION_ITEM_FONT_SIZE = 14;
@@ -1886,7 +2025,6 @@ const DBL_CLICK_EDIT_TYPE = [
     AITableFieldType.select,
     AITableFieldType.date,
     AITableFieldType.member,
-    AITableFieldType.attachment,
     AITableFieldType.link
 ];
 const MOUSEOVER_EDIT_TYPE = [AITableFieldType.progress, AITableFieldType.rate];
@@ -1974,14 +2112,20 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
             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: "18.2.13", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "@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>{{ menu.name! }}</span>\n            </a>\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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: "@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", 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: "18.2.13", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
-                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@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>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
+                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@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" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -2018,9 +2162,10 @@ const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
     });
     return linearRows;
 };
-const buildGridData = (recordValue, fieldsValue) => {
+const buildGridData = (aiTable, recordValue, fieldsValue) => {
+    const fieldOptions = getFieldOptions(aiTable);
     const fields = fieldsValue.map((value) => {
-        const fieldOption = FieldOptions.find((item) => item.type === value.type);
+        const fieldOption = fieldOptions.find((item) => item.type === value.type);
         return {
             ...value,
             icon: value.icon || fieldOption.icon,
@@ -2085,10 +2230,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
 
-function getColumnIndicesSizeMap(fields) {
+function getColumnIndicesSizeMap(aiTable, fields) {
     const columnIndicesSizeMap = {};
     fields?.forEach((field, index) => {
-        columnIndicesSizeMap[index] = field.width ?? getFieldOptionByField(field).width;
+        columnIndicesSizeMap[index] = field.width ?? getFieldOptionByField(aiTable, field).width;
     });
     return columnIndicesSizeMap;
 }
@@ -2157,9 +2302,9 @@ function getAvatarBgColor(name) {
 /**
  * 生成目标名称
  */
-const generateTargetName = ({ targetName, fieldId, recordId, mouseStyle }) => {
+const generateTargetName = ({ targetName, fieldId, recordId, mouseStyle, source }) => {
     const flag = '$';
-    return `${targetName}.${fieldId || flag}.${recordId || flag}.${mouseStyle || flag}`;
+    return `${targetName}.${fieldId || flag}.${recordId || flag}.${mouseStyle || flag}.${source || flag}`;
 };
 /**
  *  取目标名称
@@ -2182,12 +2327,13 @@ const getDetailByTargetName = (_targetName) => {
         };
     }
     const flag = '$';
-    const [targetName, fieldId, recordId, mouseStyle] = _targetName.split('.');
+    const [targetName, fieldId, recordId, mouseStyle, source] = _targetName.split('.');
     return {
         targetName,
         fieldId: fieldId === flag ? null : fieldId,
         recordId: recordId === flag ? null : recordId,
-        mouseStyle: mouseStyle === flag ? null : mouseStyle
+        mouseStyle: mouseStyle === flag ? null : mouseStyle,
+        source: source === flag ? null : source
     };
 };
 /**
@@ -2688,21 +2834,15 @@ function toDateFieldValue(plainText, targetField, originData) {
         switch (field.type) {
             case AITableFieldType.date:
                 return cellValue;
-            case AITableFieldType.text:
-                const dateValue = transformDateValue(cellValue);
-                if (dateValue) {
-                    return dateValue;
-                }
-                break;
             default:
                 break;
         }
     }
-    else {
-        const dateValue = transformDateValue(plainText);
-        if (dateValue) {
-            return dateValue;
-        }
+    const texts = plainText.split(',');
+    const value = texts && texts.length ? texts[0].trim() : plainText.trim();
+    const dateValue = transformDateValue(value);
+    if (dateValue) {
+        return dateValue;
     }
     return null;
 }
@@ -3005,10 +3145,17 @@ function toProgressFieldValue(plainText, targetField, originData) {
                 break;
         }
     }
+    const progressRegex = /^(?:100|[1-9]?\d(?:\.\d+)?)\s*%$/;
+    if (progressRegex.test(value)) {
+        value = parseFloat(value);
+    }
     if (!isEmpty(value)) {
-        const progressValue = Number(value);
-        if (!Number.isNaN(progressValue) && progressValue >= 0 && progressValue <= 100) {
-            return progressValue;
+        let progressValue = Number(value);
+        if (!Number.isNaN(progressValue)) {
+            progressValue = Math.round(progressValue);
+            if (progressValue >= 0 && progressValue <= 100) {
+                return progressValue;
+            }
         }
     }
     return null;
@@ -3442,12 +3589,14 @@ function appendRecord(aiTable, actions) {
     });
 }
 function appendField(aiTable, originField, actions) {
-    const lastFieldId = aiTable.fields().length > 0 ? aiTable.fields()[aiTable.fields().length - 1]._id : '';
+    const fields = aiTable.gridData().fields;
+    const lastFieldId = fields.length > 0 ? fields[fields.length - 1]._id : '';
     let defaultFieldValue;
     if (originField) {
+        const fieldOptions = getFieldOptions(aiTable);
         defaultFieldValue = {
             ...originField,
-            name: createDefaultFieldName(aiTable, FieldOptions.find((item) => item.type === originField.type)),
+            name: createDefaultFieldName(aiTable, fieldOptions.find((item) => item.type === originField.type)),
             _id: idCreator()
         };
     }
@@ -3538,15 +3687,15 @@ const getVisibleRangeInfo = (coordinate, scrollState) => {
         columnStopIndex
     };
 };
-const scrollMax = (coordinate, visibleColumns) => {
-    const scrollMaxWidth = visibleColumns.reduce((pre, cur) => pre + getFieldOptionByField(cur)?.width, AI_TABLE_ROW_HEAD_WIDTH);
+const scrollMax = (aiTable, coordinate, visibleColumns) => {
+    const scrollMaxWidth = visibleColumns.reduce((pre, cur) => pre + getFieldOptionByField(aiTable, cur)?.width, AI_TABLE_ROW_HEAD_WIDTH);
     const scrollMaxHeight = coordinate.getRowOffset(coordinate.rowCount - 1) + 32;
     return { scrollMaxWidth, scrollMaxHeight };
 };
 
-const getMousePosition = (x, y, coordinate, fields, context, _targetName) => {
+const getMousePosition = (aiTable, x, y, coordinate, fields, context, _targetName) => {
     const { scrollTop, scrollLeft } = context.scrollState();
-    const { scrollMaxWidth, scrollMaxHeight } = scrollMax(coordinate, fields);
+    const { scrollMaxWidth, scrollMaxHeight } = scrollMax(aiTable, coordinate, fields);
     const offsetTop = scrollTop + y;
     const rowIndex = coordinate.getRowStartIndex(offsetTop);
     const offsetLeft = isWithinFrozenColumnBoundary(x, coordinate.frozenColumnWidth) ? x : scrollLeft + x;
@@ -5079,7 +5228,7 @@ class AITableCellLink {
             return;
         const { context } = aiTable;
         const { x, y } = pos;
-        const curMousePosition = getMousePosition(x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
+        const curMousePosition = getMousePosition(aiTable, x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
         handleMouseStyle(AI_TABLE_FIELD_HEAD_MORE, curMousePosition.areaType, coordinate.container);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableCellLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5104,927 +5253,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-var cellComponents = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AITableCellLink: AITableCellLink
-});
-
-const componentMap = {};
-Object.values(cellComponents).forEach((cellComponent) => {
-    componentMap[cellComponent.fieldType] = cellComponent;
-});
-
-function getHoverCell(aiTable) {
-    const pointPosition = aiTable.context.pointPosition();
-    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
-    if (!recordId || !fieldId) {
-        return;
-    }
-    const record = aiTable.recordsMap()[recordId];
-    const field = aiTable.fieldsMap()[fieldId];
-    if (!record || !field || !recordId || !fieldId) {
-        return;
-    }
-    const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, fieldId]);
-    const transformValue = transformCellValue(aiTable, field, cellValue) || {};
-    if (Object.keys(transformValue).length === 0) {
-        return;
-    }
-    const renderComponentDefinition = componentMap[field?.type];
-    if (!renderComponentDefinition) {
-        return;
-    }
-    return {
-        field,
-        recordId,
-        fieldId,
-        renderComponentDefinition
-    };
-}
-
-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, isHoverEdit } = 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);
-        // hover 编辑组件无边框
-        if (isHoverEdit) {
-            x = originPosition.x + getHoverEditorBoxOffset();
-            y = originPosition.y + getHoverEditorBoxOffset();
-            width = getHoverEditorSpace(originPosition.width);
-            height = getHoverEditorSpace(originPosition.height);
-        }
-        return {
-            ...originPosition,
-            x: x,
-            y: y,
-            width: width,
-            height: height
-        };
-    }
-    openCellEditor(aiTable, options) {
-        const { container, recordId, fieldId, isHoverEdit, references } = options;
-        const { component, isInternalComponent } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
-        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
-            },
-            panelClass: 'grid-cell-editor',
-            outsideClosable: 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: "18.2.13", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, decorators: [{
-            type: Injectable
-        }] });
-
-class AITableGridBase {
-    constructor() {
-        this.aiRecords = model.required();
-        this.aiFields = model.required();
-        this.aiContextMenuItems = input([]);
-        this.aiFieldConfig = input();
-        this.aiReadonly = input();
-        this.aiPlugins = input();
-        this.aiReferences = input.required();
-        this.aiBuildRenderDataFn = input();
-        this.aiKeywords = input();
-        this.AITableFieldType = AITableFieldType;
-        this.AITableSelectOptionStyle = AITableSelectOptionStyle;
-        this.isSelectedAll = computed(() => {
-            return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
-        });
-        this.aiTableInitialized = output();
-        this.aiAddRecord = output();
-        this.aiAddField = output();
-        this.aiMoveField = output();
-        this.aiUpdateFieldValue = output();
-        this.aiSetField = output();
-        this.fieldMenus = computed(() => {
-            return this.aiFieldConfig()?.fieldMenus || [];
-        });
-        this.gridData = computed(() => {
-            if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
-                return this.aiBuildRenderDataFn()(this.aiTable);
-            }
-            return {
-                records: this.aiRecords(),
-                fields: this.aiFields()
-            };
-        });
-        this.ngZone = inject(NgZone);
-        this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
-        this.aiTableGridFieldService = inject(AITableGridFieldService);
-        this.aiTableGridEventService = inject(AITableGridEventService);
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
-    }
-    ngOnInit() {
-        this.initAITable();
-        this.initService();
-    }
-    initAITable() {
-        this.aiTable = createAITable(this.aiRecords, this.aiFields, this.gridData);
-        this.aiPlugins()?.forEach((plugin) => {
-            this.aiTable = plugin(this.aiTable);
-        });
-        this.aiTableInitialized.emit(this.aiTable);
-    }
-    initService() {
-        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldRenderers);
-        this.aiTableGridSelectionService.initialize(this.aiTable);
-        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
-        this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
-        AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
-    }
-    addRecord() {
-        const records = this.aiRecords();
-        const recordCount = records.length;
-        this.aiAddRecord.emit({
-            originId: recordCount > 0 ? records[records.length - 1]._id : ''
-        });
-    }
-    selectRecord(recordId) {
-        this.aiTableGridSelectionService.selectRecord(recordId);
-    }
-    toggleSelectAll(checked) {
-        this.aiTableGridSelectionService.toggleSelectAll(checked);
-    }
-    addField(gridColumnBlank, position) {
-        const field = createDefaultField(this.aiTable, AITableFieldType.text);
-        const popoverRef = this.aiTableGridFieldService.editFieldProperty(this.aiTable, {
-            field,
-            isUpdate: false,
-            origin: gridColumnBlank,
-            position
-        });
-        if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
-            popoverRef.componentInstance.addField.subscribe((defaultValue) => {
-                const fields = this.gridData().fields;
-                const fieldCount = fields.length;
-                this.aiAddField.emit({
-                    originId: fieldCount > 0 ? fields[fields.length - 1]._id : '',
-                    defaultValue
-                });
-            });
-        }
-    }
-    subscribeEvents() {
-        this.ngZone.runOutsideAngular(() => {
-            this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.dblClick(event);
-            });
-            this.aiTableGridEventService.mousedownEvent$
-                .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
-                .subscribe((event) => {
-                this.aiTableGridSelectionService.updateSelect(event);
-            });
-            this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.mouseoverHandle(event);
-            });
-            this.aiTableGridEventService.globalMouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.closeHoverCellEditor(event);
-            });
-        });
-    }
-    dblClick(event) {
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
-            this.aiTableGridEventService.openEdit(cellDom);
-        }
-    }
-    mouseoverHandle(event) {
-        if (this.mouseoverRef) {
-            this.mouseoverRef?.close();
-        }
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && MOUSEOVER_EDIT_TYPE.includes(type)) {
-            this.mouseoverRef = this.aiTableGridEventService.openEdit(cellDom);
-        }
-    }
-    closeHoverCellEditor(e) {
-        if (this.mouseoverRef) {
-            const hasGrid = e.target && e.target.closest('.ai-table-grid');
-            const hasCellEditor = e.target && e.target.closest('.grid-cell-editor');
-            if (!hasGrid && !hasCellEditor) {
-                this.mouseoverRef.close();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValue: "aiUpdateFieldValue", aiSetField: "aiSetField" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-grid-base',
-                    template: '',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class AITableDomGrid extends AITableGridBase {
-    ngOnInit() {
-        super.ngOnInit();
-        this.subscribeEvents();
-    }
-    openFieldMenu(e, field, fieldAction) {
-        const moreBtn = e.target.closest('.grid-field-action');
-        this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
-            origin: moreBtn,
-            editOrigin: fieldAction,
-            fieldId: field._id,
-            fieldMenus: this.fieldMenus()
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"selectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, decorators: [{
-            type: Component,
-            args: [{ selector: 'ai-table-dom-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'ai-table-grid ai-table-dom-grid'
-                    }, imports: [
-                        NgClass,
-                        NgComponentOutlet,
-                        CommonModule,
-                        FormsModule,
-                        SelectOptionPipe,
-                        SelectOptionsPipe,
-                        ThyTag,
-                        ThyPopoverModule,
-                        ThyIcon,
-                        ThyRate,
-                        ThyProgress,
-                        AITableFieldSetting,
-                        ThyDatePickerFormatPipe,
-                        ThyFlexibleText,
-                        ThyStopPropagationDirective,
-                        AITableFieldMenu,
-                        ThyAction,
-                        ThyDropdownDirective,
-                        ThyDropdownMenuComponent,
-                        ThyCheckboxModule,
-                        ProgressEditorComponent,
-                        ThyAvatarModule,
-                        NgTemplateOutlet,
-                        IsSelectRecordPipe,
-                        ProgressEditorComponent,
-                        SelectOptionComponent,
-                        UserPipe,
-                        SelectSettingPipe,
-                        MemberSettingPipe
-                    ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"selectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
-        }] });
-
-class KoStage {
-    constructor() {
-        this.config = input();
-        this.koMouseover = new EventEmitter();
-        this.koMousemove = new EventEmitter();
-        this.koMouseout = new EventEmitter();
-        this.koMouseenter = new EventEmitter();
-        this.koMouseleave = new EventEmitter();
-        this.koMousedown = new EventEmitter();
-        this.koMouseup = new EventEmitter();
-        this.koWheel = new EventEmitter();
-        this.koContextmenu = new EventEmitter();
-        this.koClick = new EventEmitter();
-        this.koDblclick = new EventEmitter();
-        this.koTouchstart = new EventEmitter();
-        this.koTouchmove = new EventEmitter();
-        this.koTouchend = new EventEmitter();
-        this.koTap = new EventEmitter();
-        this.koDbltap = new EventEmitter();
-        this.koDragstart = new EventEmitter();
-        this.koDragmove = new EventEmitter();
-        this.koDragend = new EventEmitter();
-        this.cacheProps = {};
-        this.nodeContainer = inject(ElementRef).nativeElement;
-        effect(() => {
-            if (this.config()) {
-                if (!this._stage) {
-                    this.initStage();
-                }
-                this.updateNode(this.config());
-            }
-        });
-    }
-    ngOnInit() {
-        this.initStage();
-    }
-    getNode() {
-        return this._stage;
-    }
-    initStage() {
-        this._stage = new Stage({
-            ...this.config(),
-            container: this.nodeContainer
-        });
-    }
-    updateNode(config) {
-        const props = {
-            ...config,
-            ...createListener(this)
-        };
-        applyNodeProps(this, props, this.cacheProps);
-        this.cacheProps = props;
-    }
-    ngOnDestroy() {
-        this._stage?.destroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
-            {
-                provide: KO_CONTAINER_TOKEN,
-                useExisting: KoStage
-            }
-        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KoStage, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ko-stage',
-                    standalone: true,
-                    template: `<ng-content></ng-content>`,
-                    providers: [
-                        {
-                            provide: KO_CONTAINER_TOKEN,
-                            useExisting: KoStage
-                        }
-                    ],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: () => [], propDecorators: { koMouseover: [{
-                type: Output
-            }], koMousemove: [{
-                type: Output
-            }], koMouseout: [{
-                type: Output
-            }], koMouseenter: [{
-                type: Output
-            }], koMouseleave: [{
-                type: Output
-            }], koMousedown: [{
-                type: Output
-            }], koMouseup: [{
-                type: Output
-            }], koWheel: [{
-                type: Output
-            }], koContextmenu: [{
-                type: Output
-            }], koClick: [{
-                type: Output
-            }], koDblclick: [{
-                type: Output
-            }], koTouchstart: [{
-                type: Output
-            }], koTouchmove: [{
-                type: Output
-            }], koTouchend: [{
-                type: Output
-            }], koTap: [{
-                type: Output
-            }], koDbltap: [{
-                type: Output
-            }], koDragstart: [{
-                type: Output
-            }], koDragmove: [{
-                type: Output
-            }], koDragend: [{
-                type: Output
-            }] } });
-
-class KoComponent extends Component {
-}
-
-const KoShapeTypes = {
-    Arc,
-    Arrow,
-    Circle,
-    Ellipse,
-    Image: Image$1,
-    Label,
-    Tag,
-    Line,
-    Path,
-    Rect,
-    RegularPolygon,
-    Ring,
-    Star,
-    Text,
-    TextPath,
-    Transformer,
-    Wedge,
-    Group,
-    Layer,
-    FastLayer
-};
-
-class AITableIcon {
-    constructor() {
-        this.config = input.required();
-        this.groupConfig = computed(() => {
-            const { x, y, listening } = this.config();
-            return { x, y, listening };
-        });
-        this.squareShapeConfig = computed(() => {
-            const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
-            return {
-                name,
-                width: backgroundWidth || size,
-                height: backgroundHeight || size,
-                strokeWidth: strokeWidth,
-                fill: background || Colors.transparent,
-                cornerRadius,
-                opacity
-            };
-        });
-        this.iconConfig = computed(() => {
-            const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = 'position' } = this.config();
-            let pathData = data;
-            switch (type) {
-                case AITableCheckType.checked:
-                    pathData = Check;
-                    break;
-                case AITableCheckType.unchecked:
-                    pathData = Unchecked;
-                    break;
-            }
-            return {
-                x: backgroundWidth && (backgroundWidth - size * (scaleX || 1)) / 2,
-                y: backgroundHeight && (backgroundHeight - size * (scaleY || 1)) / 2,
-                data: pathData,
-                width: size,
-                height: size,
-                fill,
-                offsetX,
-                offsetY,
-                scaleX,
-                scaleY,
-                rotation,
-                stroke,
-                strokeWidth,
-                transformsEnabled,
-                perfectDrawEnabled: false,
-                listening: false
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        <ko-group [config]="groupConfig()">
-            <ko-rect [config]="squareShapeConfig()"></ko-rect>
-            <ko-path [config]="iconConfig()"></ko-path>
-        </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-icon',
-                    template: `
-        <ko-group [config]="groupConfig()">
-            <ko-rect [config]="squareShapeConfig()"></ko-rect>
-            <ko-path [config]="iconConfig()"></ko-path>
-        </ko-group>
-    `,
-                    standalone: true,
-                    imports: [KoContainer, KoShape],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class AITableAddField {
-    constructor() {
-        this.config = input.required();
-        this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        this.x = computed(() => {
-            const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
-            const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
-            return lastColumnWidth + lastColumnOffset;
-        });
-        this.rectConfig = computed(() => {
-            const { pointPosition: { targetName }, readonly } = this.config();
-            const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
-            return {
-                name: generateTargetName({
-                    targetName: AI_TABLE_FIELD_ADD_BUTTON,
-                    fieldId: this.config().fields[this.config().columnStopIndex]._id,
-                    mouseStyle: readonly ? 'default' : 'pointer'
-                }),
-                x: AI_TABLE_OFFSET,
-                y: AI_TABLE_OFFSET,
-                width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
-                    ? this.btnWidth
-                    : this.config().coordinate.containerWidth - this.x(),
-                height: this.config().coordinate.rowInitSize,
-                stroke: Colors.gray200,
-                strokeWidth: 1,
-                listening: true,
-                fill
-            };
-        });
-        this.addIconConfig = computed(() => {
-            const { readonly } = this.config();
-            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
-            return {
-                x: AI_TABLE_CELL_PADDING,
-                y: offsetY,
-                data: AddOutlinedPath,
-                fill: Colors.gray600,
-                listening: false,
-                visible: isNil(readonly) ? true : !readonly
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        <ko-group [config]="{ x: x() }">
-            <ko-group>
-                <ko-rect [config]="rectConfig()"></ko-rect>
-            </ko-group>
-            <ko-group>
-                @if (addIconConfig().visible) {
-                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
-                }
-            </ko-group>
-        </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-add-field',
-                    template: `
-        <ko-group [config]="{ x: x() }">
-            <ko-group>
-                <ko-rect [config]="rectConfig()"></ko-rect>
-            </ko-group>
-            <ko-group>
-                @if (addIconConfig().visible) {
-                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
-                }
-            </ko-group>
-        </ko-group>
-    `,
-                    standalone: true,
-                    imports: [KoContainer, KoShape, AITableIcon],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-/**
- * 用于处理表格行或单元格的布局和绘制。
- * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
- * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
- */
-class Layout extends Drawer {
-    constructor() {
-        super(...arguments);
-        // 定义当前单元格或行的位置
-        this.x = 0;
-        this.y = 0;
-        // 行高
-        this.rowHeight = 0;
-        // 列宽
-        this.columnWidth = 0;
-        // 行索引
-        this.rowIndex = 0;
-        // 列索引
-        this.columnIndex = 0;
-        // 列数
-        this.columnCount = 0;
-        this.containerWidth = 0;
-    }
-    // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }) {
-        this.x = x;
-        this.y = y;
-        this.rowIndex = rowIndex;
-        this.columnIndex = columnIndex;
-        this.rowHeight = rowHeight;
-        this.columnWidth = columnWidth;
-        this.columnCount = columnCount;
-        this.containerWidth = containerWidth;
-    }
-    // 当前单元格是否是行的第一列
-    get isFirst() {
-        return this.columnIndex === 0;
-    }
-    // 当前单元格是否是行的最后一列
-    get isLast() {
-        return this.columnIndex === this.columnCount - 1;
-    }
-    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
-        const rowHeight = this.rowHeight;
-        const fill = isCheckedRow ? this.colors.itemActiveBgColor : isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
-        this.rect({
-            x: addFieldBlankX,
-            y: this.y + AI_TABLE_OFFSET,
-            width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
-                ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
-                : this.containerWidth - addFieldBlankX,
-            height: rowHeight,
-            fill
-        });
-    }
-}
-
-class AddRowLayout extends Layout {
-    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
-        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
-        const rowHeight = this.rowHeight;
-        const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
-        this.line({
-            x: this.x + this.columnWidth,
-            y: this.y,
-            points: [0, rowHeight, width, rowHeight],
-            stroke: this.colors.gray200
-        });
-    }
-    renderCell({ width, isHoverRow }) {
-        const x = this.x;
-        const y = this.y;
-        const rowHeight = this.rowHeight;
-        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        this.rect({
-            x,
-            y: y + AI_TABLE_OFFSET,
-            width: width,
-            height: rowHeight,
-            fill
-        });
-        this.line({
-            x,
-            y: y + rowHeight,
-            points: [0, 0, width, 0],
-            stroke: this.colors.gray200
-        });
-    }
-    renderFirstCell({ isHoverRow }) {
-        if (!this.isFirst)
-            return;
-        const y = this.y;
-        const rowHeight = this.rowHeight;
-        const columnWidth = this.columnWidth;
-        const frozenOffset = AI_TABLE_OFFSET;
-        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        this.rect({
-            x: frozenOffset,
-            y: y + AI_TABLE_OFFSET,
-            width: columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1,
-            height: rowHeight,
-            fill
-        });
-        this.line({
-            x: frozenOffset,
-            y,
-            points: [0, rowHeight, columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1, rowHeight],
-            stroke: this.colors.gray200
-        });
-        this.path({
-            x: AI_TABLE_CELL_PADDING,
-            y: y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2 - AI_TABLE_OFFSET,
-            data: AddOutlinedPath,
-            size: AI_TABLE_ROW_HEAD_SIZE,
-            fill: this.colors.gray600
-        });
-    }
-    renderLastCell({ isHoverRow, isCheckedRow }) {
-        if (!this.isLast)
-            return;
-        const width = this.columnWidth;
-        if (!this.isFirst) {
-            this.renderCell({
-                width,
-                isHoverRow
-            });
-        }
-        this.renderAddFieldBlank({ isHoverRow, isCheckedRow });
-    }
-    renderCommonCell({ isHoverRow }) {
-        if (this.isFirst || this.isLast)
-            return;
-        this.renderCell({
-            width: this.columnWidth,
-            isHoverRow
-        });
-    }
-    render({ isHoverRow, isCheckedRow }) {
-        this.renderFirstCell({
-            isHoverRow
-        });
-        this.renderCommonCell({
-            isHoverRow
-        });
-        this.renderLastCell({
-            isHoverRow,
-            isCheckedRow
-        });
-    }
-}
-const addRowLayout = new AddRowLayout();
-
 // 自动生成的图标常量文件
 const apk = `<?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -6367,293 +5595,1267 @@ const zip = `<?xml version="1.0" encoding="UTF-8"?>
     </g>
 </svg>`;
 
-var fileIcons = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    apk: apk,
-    bak: bak,
-    bat: bat,
-    cs: cs,
-    css: css,
-    csv: csv,
-    defaultFile: defaultFile,
-    doc: doc,
-    exe: exe,
-    fla: fla,
-    html: html,
-    img: img,
-    ipa: ipa,
-    java: java,
-    js: js,
-    key: key,
-    mp3: mp3,
-    page: page,
-    pdf: pdf,
-    php: php,
-    ppt: ppt,
-    rar: rar,
-    snippet: snippet,
-    swf: swf,
-    ttf: ttf,
-    txt: txt,
-    video: video,
-    vss: vss,
-    xls: xls,
-    xsd: xsd,
-    zip: zip
-});
+function getFileThumbnailSvgString(ext) {
+    let result = 'defaultFile';
+    switch (ext) {
+        case 'doc':
+        case 'docx':
+            result = doc;
+            break;
+        case 'ppt':
+        case 'pptx':
+            result = ppt;
+            break;
+        case 'xls':
+        case 'xlsx':
+            result = xls;
+            break;
+        case 'css':
+        case 'scss':
+        case 'sass':
+        case 'less':
+            result = css;
+            break;
+        case 'png':
+        case 'jpeg':
+        case 'jpg':
+        case 'gif':
+        case 'bmp':
+        case 'svg':
+            result = img;
+            break;
+        case 'mp4':
+        case 'mkv':
+        case 'webm':
+        case 'mov':
+        case 'flv':
+        case '3gp':
+        case 'mpv':
+        case 'avi':
+        case 'mpeg':
+        case 'wmv':
+            result = video;
+            break;
+        case 'mp3':
+        case 'wma':
+        case 'wav':
+        case 'ape':
+        case 'flac':
+        case 'ogg':
+        case 'm4r':
+        case 'm4a':
+            result = mp3;
+            break;
+        case 'pdf':
+            result = pdf;
+            break;
+        case 'txt':
+            result = txt;
+            break;
+        case 'apk':
+            result = apk;
+            break;
+        case 'bak':
+            result = apk;
+            break;
+        case 'cs':
+            result = cs;
+            break;
+        case 'csv':
+            result = csv;
+            break;
+        case 'exe':
+            result = exe;
+            break;
+        case 'fla':
+            result = fla;
+            break;
+        case 'html':
+            result = html;
+            break;
+        case 'ipa':
+            result = ipa;
+            break;
+        case 'java':
+            result = java;
+            break;
+        case 'js':
+            result = js;
+            break;
+        case 'php':
+            result = php;
+            break;
+        case 'rar':
+            result = rar;
+            break;
+        case 'swf':
+            result = swf;
+            break;
+        case 'ttf':
+            result = ttf;
+            break;
+        case 'vss':
+            result = vss;
+            break;
+        case 'xsd':
+            result = xsd;
+            break;
+        case 'zip':
+            result = zip;
+            break;
+        default:
+            result = defaultFile;
+            break;
+    }
+    return result;
+}
+
+class KoStage {
+    constructor() {
+        this.config = input();
+        this.koMouseover = new EventEmitter();
+        this.koMousemove = new EventEmitter();
+        this.koMouseout = new EventEmitter();
+        this.koMouseenter = new EventEmitter();
+        this.koMouseleave = new EventEmitter();
+        this.koMousedown = new EventEmitter();
+        this.koMouseup = new EventEmitter();
+        this.koWheel = new EventEmitter();
+        this.koContextmenu = new EventEmitter();
+        this.koClick = new EventEmitter();
+        this.koDblclick = new EventEmitter();
+        this.koTouchstart = new EventEmitter();
+        this.koTouchmove = new EventEmitter();
+        this.koTouchend = new EventEmitter();
+        this.koTap = new EventEmitter();
+        this.koDbltap = new EventEmitter();
+        this.koDragstart = new EventEmitter();
+        this.koDragmove = new EventEmitter();
+        this.koDragend = new EventEmitter();
+        this.cacheProps = {};
+        this.nodeContainer = inject(ElementRef).nativeElement;
+        effect(() => {
+            if (this.config()) {
+                if (!this._stage) {
+                    this.initStage();
+                }
+                this.updateNode(this.config());
+            }
+        });
+    }
+    ngOnInit() {
+        this.initStage();
+    }
+    getNode() {
+        return this._stage;
+    }
+    initStage() {
+        this._stage = new Stage({
+            ...this.config(),
+            container: this.nodeContainer
+        });
+    }
+    updateNode(config) {
+        const props = {
+            ...config,
+            ...createListener(this)
+        };
+        applyNodeProps(this, props, this.cacheProps);
+        this.cacheProps = props;
+    }
+    ngOnDestroy() {
+        this._stage?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
+            {
+                provide: KO_CONTAINER_TOKEN,
+                useExisting: KoStage
+            }
+        ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KoStage, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ko-stage',
+                    standalone: true,
+                    template: `<ng-content></ng-content>`,
+                    providers: [
+                        {
+                            provide: KO_CONTAINER_TOKEN,
+                            useExisting: KoStage
+                        }
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [], propDecorators: { koMouseover: [{
+                type: Output
+            }], koMousemove: [{
+                type: Output
+            }], koMouseout: [{
+                type: Output
+            }], koMouseenter: [{
+                type: Output
+            }], koMouseleave: [{
+                type: Output
+            }], koMousedown: [{
+                type: Output
+            }], koMouseup: [{
+                type: Output
+            }], koWheel: [{
+                type: Output
+            }], koContextmenu: [{
+                type: Output
+            }], koClick: [{
+                type: Output
+            }], koDblclick: [{
+                type: Output
+            }], koTouchstart: [{
+                type: Output
+            }], koTouchmove: [{
+                type: Output
+            }], koTouchend: [{
+                type: Output
+            }], koTap: [{
+                type: Output
+            }], koDbltap: [{
+                type: Output
+            }], koDragstart: [{
+                type: Output
+            }], koDragmove: [{
+                type: Output
+            }], koDragend: [{
+                type: Output
+            }] } });
+
+class KoComponent extends Component {
+}
+
+const KoShapeTypes = {
+    Arc,
+    Arrow,
+    Circle,
+    Ellipse,
+    Image: Image$1,
+    Label,
+    Tag,
+    Line,
+    Path,
+    Rect,
+    RegularPolygon,
+    Ring,
+    Star,
+    Text,
+    TextPath,
+    Transformer,
+    Wedge,
+    Group,
+    Layer,
+    FastLayer
+};
+
+class AITableActionIcon {
+    constructor() {
+        this.onClick = output();
+        this.onMousemove = output();
+        this.onMouseenter = output();
+        this.onMouseleave = output();
+        this.config = input.required();
+        this.isHover = signal(false);
+        this.groupConfig = computed(() => {
+            const { x, y, listening } = this.config();
+            return { x, y, listening };
+        });
+        this.squareShapeConfig = computed(() => {
+            const { name, backgroundWidth, backgroundHeight, hoverFill, size = DEFAULT_ICON_SIZE, strokeWidth = 1, cornerRadius } = this.config();
+            return {
+                name,
+                width: backgroundWidth || size,
+                height: backgroundHeight || size,
+                strokeWidth: strokeWidth,
+                fill: hoverFill && this.isHover() ? hoverFill : Colors.transparent,
+                opacity: hoverFill && this.isHover() ? 0.1 : 1,
+                cornerRadius
+            };
+        });
+        this.iconConfig = computed(() => {
+            let { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill, hoverFill, transformsEnabled = 'position' } = this.config();
+            fill = fill || Colors.gray600;
+            let pathData = data;
+            switch (type) {
+                case AITableCheckType.checked:
+                    pathData = Check;
+                    break;
+                case AITableCheckType.unchecked:
+                    pathData = Unchecked;
+                    break;
+            }
+            return {
+                x: backgroundWidth && (backgroundWidth - size * (scaleX || 1)) / 2,
+                y: backgroundHeight && (backgroundHeight - size * (scaleY || 1)) / 2,
+                data: pathData,
+                width: size,
+                height: size,
+                fill: hoverFill && this.isHover() ? hoverFill : fill,
+                offsetX,
+                offsetY,
+                scaleX,
+                scaleY,
+                rotation,
+                stroke,
+                strokeWidth,
+                transformsEnabled,
+                perfectDrawEnabled: false,
+                listening: false
+            };
+        });
+    }
+    koClick(e) {
+        this.onClick.emit(e);
+    }
+    koMousemove(e) {
+        e.event.cancelBubble = true;
+    }
+    koMouseenter(e) {
+        this.onMouseenter.emit(e);
+        this.isHover.set(true);
+        const { coordinate } = this.config();
+        setMouseStyle('pointer', coordinate.container);
+    }
+    koMouseleave(e) {
+        this.onMouseleave.emit(e);
+        this.isHover.set(false);
+        const { coordinate } = this.config();
+        setMouseStyle('default', coordinate.container);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableActionIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableActionIcon, isStandalone: true, selector: "ai-table-action-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onMousemove: "onMousemove", onMouseenter: "onMouseenter", onMouseleave: "onMouseleave" }, ngImport: i0, template: `
+        <ko-group
+            [config]="groupConfig()"
+            (koClick)="koClick($event)"
+            (koMousemove)="koMousemove($event)"
+            (koMouseenter)="koMouseenter($event)"
+            (koMouseleave)="koMouseleave($event)"
+        >
+            <ko-rect [config]="squareShapeConfig()"></ko-rect>
+            <ko-path [config]="iconConfig()"></ko-path>
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableActionIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-action-icon',
+                    template: `
+        <ko-group
+            [config]="groupConfig()"
+            (koClick)="koClick($event)"
+            (koMousemove)="koMousemove($event)"
+            (koMouseenter)="koMouseenter($event)"
+            (koMouseleave)="koMouseleave($event)"
+        >
+            <ko-rect [config]="squareShapeConfig()"></ko-rect>
+            <ko-path [config]="iconConfig()"></ko-path>
+        </ko-group>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableCellAttachment {
+    constructor() {
+        this.config = input();
+        this.attachments = computed(() => {
+            const { render, aiTable, coordinate, field, recordId, readonly } = this.config();
+            if (render) {
+                const {} = aiTable;
+                const { transformValue, references, columnWidth, rowHeight, style, zIndex } = render;
+                if (!transformValue?.length) {
+                    return [];
+                }
+                const result = transformValue?.map((attachmentId, index) => {
+                    const itemWidth = AI_TABLE_FILE_ICON_SIZE + AI_TABLE_FIELD_ITEM_MARGIN_RIGHT;
+                    const currentX = AI_TABLE_CELL_PADDING + index * itemWidth + AI_TABLE_OFFSET;
+                    let currentY = (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_FILE_ICON_SIZE) / 2 + AI_TABLE_OFFSET;
+                    if (columnWidth != null) {
+                        // 当超出列宽时，不会渲染后续内容
+                        if (currentX >= columnWidth - AI_TABLE_ACTION_COMMON_SIZE - 2 * AI_TABLE_CELL_PADDING) {
+                            return null;
+                        }
+                    }
+                    const attachmentInfo = references.attachments[attachmentId];
+                    if (attachmentInfo) {
+                        const svgString = getFileThumbnailSvgString(attachmentInfo.addition.ext);
+                        const image = new Image();
+                        image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+                        return {
+                            // coordinate,
+                            // readonly,
+                            attachmentInfo,
+                            name: generateTargetName({
+                                targetName: AI_TABLE_CELL,
+                                fieldId: field._id,
+                                recordId,
+                                mouseStyle: readonly ? 'default' : 'pointer',
+                                source: attachmentInfo._id
+                            }),
+                            x: currentX,
+                            y: currentY,
+                            width: AI_TABLE_FILE_ICON_SIZE,
+                            height: AI_TABLE_FILE_ICON_SIZE,
+                            image,
+                            listening: true
+                        };
+                    }
+                    return null;
+                }) || [];
+                return result.filter((item) => !!item);
+            }
+            return [];
+        });
+        this.iconConfig = computed(() => {
+            const { coordinate, render, field, recordId, readonly } = this.config();
+            const offsetX = render.columnWidth - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_ACTION_COMMON_RIGHT_PADDING;
+            const offsetY = (coordinate.rowInitSize - AI_TABLE_ACTION_COMMON_SIZE) / 2;
+            return {
+                coordinate,
+                readonly,
+                name: generateTargetName({
+                    targetName: AI_TABLE_CELL,
+                    fieldId: field._id,
+                    recordId,
+                    source: AI_TABLE_CELL_ATTACHMENT_ADD,
+                    mouseStyle: readonly ? 'default' : 'pointer'
+                }),
+                x: offsetX,
+                y: offsetY,
+                data: AddOutlinedPath,
+                fill: Colors.gray600,
+                hoverFill: Colors.primary,
+                backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
+                backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
+                cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
+                listening: true
+            };
+        });
+    }
+    static { this.fieldType = AITableFieldType.attachment; }
+    addClick(e) {
+        // e.event.cancelBubble = true;
+    }
+    attachmentClick(e) {
+        // e.event.cancelBubble = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableCellAttachment, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @for (attachment of attachments(); track attachment.attachmentInfo._id) {
+            <ko-image [config]="attachment" (koClick)="attachmentClick($event)"></ko-image>
+        }
+        <ai-table-action-icon [config]="iconConfig()" (onClick)="addClick($event)"></ai-table-action-icon>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableCellAttachment, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-attachments',
+                    template: `
+        @for (attachment of attachments(); track attachment.attachmentInfo._id) {
+            <ko-image [config]="attachment" (koClick)="attachmentClick($event)"></ko-image>
+        }
+        <ai-table-action-icon [config]="iconConfig()" (onClick)="addClick($event)"></ai-table-action-icon>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape, AITableActionIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+// TODO: components下的cells组件考虑移出 components ，这些组件都属于
+
+var cellComponents = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AITableCellAttachment: AITableCellAttachment,
+    AITableCellLink: AITableCellLink
+});
+
+const componentMap = {};
+Object.values(cellComponents).forEach((cellComponent) => {
+    componentMap[cellComponent.fieldType] = cellComponent;
+});
+
+function getHoverCell(aiTable) {
+    const pointPosition = aiTable.context.pointPosition();
+    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+    if (!recordId || !fieldId) {
+        return;
+    }
+    const record = aiTable.recordsMap()[recordId];
+    const field = aiTable.fieldsMap()[fieldId];
+    if (!record || !field || !recordId || !fieldId) {
+        return;
+    }
+    const renderComponentDefinition = componentMap[field?.type];
+    if (!renderComponentDefinition) {
+        return;
+    }
+    return {
+        field,
+        recordId,
+        fieldId,
+        renderComponentDefinition
+    };
+}
+
+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, isHoverEdit } = 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);
+        // hover 编辑组件无边框
+        if (isHoverEdit) {
+            x = originPosition.x + getHoverEditorBoxOffset();
+            y = originPosition.y + getHoverEditorBoxOffset();
+            width = getHoverEditorSpace(originPosition.width);
+            height = getHoverEditorSpace(originPosition.height);
+        }
+        return {
+            ...originPosition,
+            x: x,
+            y: y,
+            width: width,
+            height: height
+        };
+    }
+    openCellEditor(aiTable, options) {
+        const { container, recordId, fieldId, isHoverEdit, references } = options;
+        const { component, isInternalComponent } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
+        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
+            },
+            panelClass: 'grid-cell-editor',
+            outsideClosable: 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: "18.2.13", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, decorators: [{
+            type: Injectable
+        }] });
 
-function parseSVGToCanvasObjects(svgString) {
-    const parser = new DOMParser();
-    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
-    const elements = svgDoc.querySelectorAll('path, polyline, polygon');
-    const canvasObjects = [];
-    elements.forEach((element) => {
-        let d;
-        if (element.tagName === 'path') {
-            d = element.getAttribute('d');
-        }
-        else if (element.tagName === 'polyline' || element.tagName === 'polygon') {
-            const points = element.getAttribute('points') || '';
-            const pointArray = points.split(/\s+|,/).filter(Boolean);
-            d = 'M' + pointArray[0] + ' ' + pointArray[1];
-            for (let i = 2; i < pointArray.length; i += 2) {
-                d += ' L' + pointArray[i] + ' ' + pointArray[i + 1];
+class AITableGridBase {
+    constructor() {
+        this.aiRecords = model.required();
+        this.aiFields = model.required();
+        this.aiContextMenuItems = input();
+        this.aiFieldConfig = input();
+        this.aiReadonly = input();
+        this.aiPlugins = input();
+        this.aiReferences = input.required();
+        this.aiBuildRenderDataFn = input();
+        this.aiGetI18nTextByKey = input();
+        this.aiKeywords = input();
+        this.AITableFieldType = AITableFieldType;
+        this.AITableSelectOptionStyle = AITableSelectOptionStyle;
+        this.isSelectedAll = computed(() => {
+            return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
+        });
+        this.aiTableInitialized = output();
+        this.aiAddRecord = output();
+        this.aiAddField = output();
+        this.aiMoveField = output();
+        this.aiUpdateFieldValue = output();
+        this.aiSetField = output();
+        this.aiClick = output();
+        this.aiDbClick = output();
+        this.fieldMenus = computed(() => {
+            const fieldMenusFn = this.aiFieldConfig()?.fieldMenus;
+            if (fieldMenusFn && this.aiTable) {
+                return fieldMenusFn(this.aiTable);
+            }
+            return [];
+        });
+        this.gridData = computed(() => {
+            if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
+                return this.aiBuildRenderDataFn()(this.aiTable);
             }
-            if (element.tagName === 'polygon') {
-                d += ' Z';
+            return {
+                records: this.aiRecords(),
+                fields: this.aiFields()
+            };
+        });
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.aiTableGridFieldService = inject(AITableGridFieldService);
+        this.aiTableGridEventService = inject(AITableGridEventService);
+        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
+    }
+    ngOnInit() {
+        this.initAITable();
+        this.initService();
+    }
+    initAITable() {
+        this.aiTable = createAITable(this.aiRecords, this.aiFields, this.gridData);
+        if (this.aiGetI18nTextByKey()) {
+            this.aiTable.getI18nTextByKey = this.aiGetI18nTextByKey();
+        }
+        this.aiPlugins()?.forEach((plugin) => {
+            this.aiTable = plugin(this.aiTable);
+        });
+        this.aiTableInitialized.emit(this.aiTable);
+    }
+    initService() {
+        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldRenderers);
+        this.aiTableGridSelectionService.initialize(this.aiTable);
+        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
+        this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
+        AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
+    }
+    addRecord() {
+        const records = this.aiRecords();
+        const recordCount = records.length;
+        this.aiAddRecord.emit({
+            originId: recordCount > 0 ? records[records.length - 1]._id : ''
+        });
+    }
+    selectRecord(recordId) {
+        this.aiTableGridSelectionService.selectRecord(recordId);
+    }
+    toggleSelectAll(checked) {
+        this.aiTableGridSelectionService.toggleSelectAll(checked);
+    }
+    addField(gridColumnBlank, position) {
+        const field = createDefaultField(this.aiTable, AITableFieldType.text);
+        const popoverRef = this.aiTableGridFieldService.editFieldProperty(this.aiTable, {
+            field,
+            isUpdate: false,
+            origin: gridColumnBlank,
+            position
+        });
+        if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
+            popoverRef.componentInstance.addField.subscribe((defaultValue) => {
+                const fields = this.gridData().fields;
+                const fieldCount = fields.length;
+                this.aiAddField.emit({
+                    originId: fieldCount > 0 ? fields[fields.length - 1]._id : '',
+                    defaultValue
+                });
+            });
+        }
+    }
+    subscribeEvents() {
+        this.ngZone.runOutsideAngular(() => {
+            this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.dblClick(event);
+            });
+            this.aiTableGridEventService.mousedownEvent$
+                .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                this.aiTableGridSelectionService.updateSelect(event);
+            });
+            this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.mouseoverHandle(event);
+            });
+            this.aiTableGridEventService.globalMouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.closeHoverCellEditor(event);
+            });
+        });
+    }
+    dblClick(event) {
+        const cellDom = event.target.closest('.grid-cell');
+        const type = cellDom && cellDom.getAttribute('type');
+        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
+            this.aiTableGridEventService.openEdit(cellDom);
+        }
+    }
+    mouseoverHandle(event) {
+        if (this.mouseoverRef) {
+            this.mouseoverRef?.close();
+        }
+        const cellDom = event.target.closest('.grid-cell');
+        const type = cellDom && cellDom.getAttribute('type');
+        if (type && MOUSEOVER_EDIT_TYPE.includes(type)) {
+            this.mouseoverRef = this.aiTableGridEventService.openEdit(cellDom);
+        }
+    }
+    closeHoverCellEditor(e) {
+        if (this.mouseoverRef) {
+            const hasGrid = e.target && e.target.closest('.ai-table-grid');
+            const hasCellEditor = e.target && e.target.closest('.grid-cell-editor');
+            if (!hasGrid && !hasCellEditor) {
+                this.mouseoverRef.close();
             }
         }
-        const fill = element.getAttribute('fill') || 'black';
-        const stroke = 'none';
-        const strokeWidth = element.getAttribute('stroke-width') || 0;
-        const opacity = parseFloat(element?.getAttribute('opacity') || '1');
-        const fillRule = element.getAttribute('fill-rule') || 'nonzero';
-        if (d) {
-            canvasObjects.push({
-                d,
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValue: "aiUpdateFieldValue", aiSetField: "aiSetField", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-grid-base',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableDomGrid extends AITableGridBase {
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscribeEvents();
+    }
+    openFieldMenu(e, field, fieldAction) {
+        const moreBtn = e.target.closest('.grid-field-action');
+        this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
+            origin: moreBtn,
+            editOrigin: fieldAction,
+            fieldId: field._id,
+            fieldMenus: this.fieldMenus()
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"selectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-dom-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ai-table-grid ai-table-dom-grid'
+                    }, imports: [
+                        NgClass,
+                        NgComponentOutlet,
+                        CommonModule,
+                        FormsModule,
+                        SelectOptionPipe,
+                        SelectOptionsPipe,
+                        ThyTag,
+                        ThyPopoverModule,
+                        ThyIcon,
+                        ThyRate,
+                        ThyProgress,
+                        AITableFieldSetting,
+                        ThyDatePickerFormatPipe,
+                        ThyFlexibleText,
+                        ThyStopPropagationDirective,
+                        AITableFieldMenu,
+                        ThyAction,
+                        ThyDropdownDirective,
+                        ThyDropdownMenuComponent,
+                        ThyCheckboxModule,
+                        ProgressEditorComponent,
+                        ThyAvatarModule,
+                        NgTemplateOutlet,
+                        IsSelectRecordPipe,
+                        ProgressEditorComponent,
+                        SelectOptionComponent,
+                        UserPipe,
+                        SelectSettingPipe,
+                        MemberSettingPipe
+                    ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"selectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
+        }] });
+
+class AITableIcon {
+    constructor() {
+        this.config = input.required();
+        this.groupConfig = computed(() => {
+            const { x, y, listening } = this.config();
+            return { x, y, listening };
+        });
+        this.squareShapeConfig = computed(() => {
+            const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
+            return {
+                name,
+                width: backgroundWidth || size,
+                height: backgroundHeight || size,
+                strokeWidth: strokeWidth,
+                fill: background || Colors.transparent,
+                cornerRadius,
+                opacity
+            };
+        });
+        this.iconConfig = computed(() => {
+            const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = 'position' } = this.config();
+            let pathData = data;
+            switch (type) {
+                case AITableCheckType.checked:
+                    pathData = Check;
+                    break;
+                case AITableCheckType.unchecked:
+                    pathData = Unchecked;
+                    break;
+            }
+            return {
+                x: backgroundWidth && (backgroundWidth - size * (scaleX || 1)) / 2,
+                y: backgroundHeight && (backgroundHeight - size * (scaleY || 1)) / 2,
+                data: pathData,
+                width: size,
+                height: size,
                 fill,
+                offsetX,
+                offsetY,
+                scaleX,
+                scaleY,
+                rotation,
                 stroke,
                 strokeWidth,
-                opacity,
-                fillRule: fillRule
-            });
-        }
-    });
-    return canvasObjects;
+                transformsEnabled,
+                perfectDrawEnabled: false,
+                listening: false
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <ko-group [config]="groupConfig()">
+            <ko-rect [config]="squareShapeConfig()"></ko-rect>
+            <ko-path [config]="iconConfig()"></ko-path>
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-const FileIcons = (() => {
-    const result = {};
-    Object.entries(fileIcons).forEach((fileIcon) => {
-        result[fileIcon[0]] = parseSVGToCanvasObjects(fileIcon[1]);
-    });
-    return result;
-})();
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-icon',
+                    template: `
+        <ko-group [config]="groupConfig()">
+            <ko-rect [config]="squareShapeConfig()"></ko-rect>
+            <ko-path [config]="iconConfig()"></ko-path>
+        </ko-group>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
 
-function getFileThumbnailName(ext) {
-    let result = 'defaultFile';
-    switch (ext) {
-        case 'doc':
-        case 'docx':
-            result = 'doc';
-            break;
-        case 'ppt':
-        case 'pptx':
-            result = 'ppt';
-            break;
-        case 'xls':
-        case 'xlsx':
-            result = 'xls';
-            break;
-        case 'css':
-        case 'scss':
-        case 'sass':
-        case 'less':
-            result = 'css';
-            break;
-        case 'png':
-        case 'jpeg':
-        case 'jpg':
-        case 'gif':
-        case 'bmp':
-        case 'svg':
-            result = 'img';
-            break;
-        case 'mp4':
-        case 'mkv':
-        case 'webm':
-        case 'mov':
-        case 'flv':
-        case '3gp':
-        case 'mpv':
-        case 'avi':
-        case 'mpeg':
-        case 'wmv':
-            result = 'video';
-            break;
-        case 'mp3':
-        case 'wma':
-        case 'wav':
-        case 'ape':
-        case 'flac':
-        case 'ogg':
-        case 'm4r':
-        case 'm4a':
-            result = 'mp3';
-            break;
-        case 'pdf':
-        case 'txt':
-        case 'apk':
-        case 'bak':
-        case 'cs':
-        case 'csv':
-        case 'exe':
-        case 'fla':
-        case 'html':
-        case 'ipa':
-        case 'java':
-        case 'js':
-        case 'php':
-        case 'rar':
-        case 'swf':
-        case 'ttf':
-        case 'vss':
-        case 'xsd':
-        case 'zip':
-        case 'youdaonote':
-        case 'evernote':
-        case 'yinxiang':
-        case 'quip':
-        case 'onenote':
-        case 'onedrive':
-        case 'box':
-        case 'shimo':
-        case 'processon':
-            result = ext;
-            break;
-        default:
-            result = 'defaultFile';
-            break;
+class AITableAddField {
+    constructor() {
+        this.config = input.required();
+        this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+        this.x = computed(() => {
+            const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
+            const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
+            return lastColumnWidth + lastColumnOffset;
+        });
+        this.rectConfig = computed(() => {
+            const { pointPosition: { targetName }, readonly } = this.config();
+            const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
+            return {
+                name: generateTargetName({
+                    targetName: AI_TABLE_FIELD_ADD_BUTTON,
+                    fieldId: this.config().fields[this.config().columnStopIndex]._id,
+                    mouseStyle: readonly ? 'default' : 'pointer'
+                }),
+                x: AI_TABLE_OFFSET,
+                y: AI_TABLE_OFFSET,
+                width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
+                    ? this.btnWidth
+                    : this.config().coordinate.containerWidth - this.x(),
+                height: this.config().coordinate.rowInitSize,
+                stroke: Colors.gray200,
+                strokeWidth: 1,
+                listening: true,
+                fill
+            };
+        });
+        this.addIconConfig = computed(() => {
+            const { readonly } = this.config();
+            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
+            return {
+                x: AI_TABLE_CELL_PADDING,
+                y: offsetY,
+                data: AddOutlinedPath,
+                fill: Colors.gray600,
+                listening: false,
+                visible: isNil(readonly) ? true : !readonly
+            };
+        });
     }
-    return result;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <ko-group [config]="{ x: x() }">
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                @if (addIconConfig().visible) {
+                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                }
+            </ko-group>
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-function getFileThumbnailSvgString(ext) {
-    let result = 'defaultFile';
-    switch (ext) {
-        case 'doc':
-        case 'docx':
-            result = doc;
-            break;
-        case 'ppt':
-        case 'pptx':
-            result = ppt;
-            break;
-        case 'xls':
-        case 'xlsx':
-            result = xls;
-            break;
-        case 'css':
-        case 'scss':
-        case 'sass':
-        case 'less':
-            result = css;
-            break;
-        case 'png':
-        case 'jpeg':
-        case 'jpg':
-        case 'gif':
-        case 'bmp':
-        case 'svg':
-            result = img;
-            break;
-        case 'mp4':
-        case 'mkv':
-        case 'webm':
-        case 'mov':
-        case 'flv':
-        case '3gp':
-        case 'mpv':
-        case 'avi':
-        case 'mpeg':
-        case 'wmv':
-            result = video;
-            break;
-        case 'mp3':
-        case 'wma':
-        case 'wav':
-        case 'ape':
-        case 'flac':
-        case 'ogg':
-        case 'm4r':
-        case 'm4a':
-            result = mp3;
-            break;
-        case 'pdf':
-            result = pdf;
-            break;
-        case 'txt':
-            result = txt;
-            break;
-        case 'apk':
-            result = apk;
-            break;
-        case 'bak':
-            result = apk;
-            break;
-        case 'cs':
-            result = cs;
-            break;
-        case 'csv':
-            result = csv;
-            break;
-        case 'exe':
-            result = exe;
-            break;
-        case 'fla':
-            result = fla;
-            break;
-        case 'html':
-            result = html;
-            break;
-        case 'ipa':
-            result = ipa;
-            break;
-        case 'java':
-            result = java;
-            break;
-        case 'js':
-            result = js;
-            break;
-        case 'php':
-            result = php;
-            break;
-        case 'rar':
-            result = rar;
-            break;
-        case 'swf':
-            result = swf;
-            break;
-        case 'ttf':
-            result = ttf;
-            break;
-        case 'vss':
-            result = vss;
-            break;
-        case 'xsd':
-            result = xsd;
-            break;
-        case 'zip':
-            result = zip;
-            break;
-        default:
-            result = defaultFile;
-            break;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-add-field',
+                    template: `
+        <ko-group [config]="{ x: x() }">
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                @if (addIconConfig().visible) {
+                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                }
+            </ko-group>
+        </ko-group>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape, AITableIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+/**
+ * 用于处理表格行或单元格的布局和绘制。
+ * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
+ * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
+ */
+class Layout extends Drawer {
+    constructor() {
+        super(...arguments);
+        // 定义当前单元格或行的位置
+        this.x = 0;
+        this.y = 0;
+        // 行高
+        this.rowHeight = 0;
+        // 列宽
+        this.columnWidth = 0;
+        // 行索引
+        this.rowIndex = 0;
+        // 列索引
+        this.columnIndex = 0;
+        // 列数
+        this.columnCount = 0;
+        this.containerWidth = 0;
+    }
+    // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }) {
+        this.x = x;
+        this.y = y;
+        this.rowIndex = rowIndex;
+        this.columnIndex = columnIndex;
+        this.rowHeight = rowHeight;
+        this.columnWidth = columnWidth;
+        this.columnCount = columnCount;
+        this.containerWidth = containerWidth;
+    }
+    // 当前单元格是否是行的第一列
+    get isFirst() {
+        return this.columnIndex === 0;
+    }
+    // 当前单元格是否是行的最后一列
+    get isLast() {
+        return this.columnIndex === this.columnCount - 1;
+    }
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        const rowHeight = this.rowHeight;
+        const fill = isCheckedRow ? this.colors.itemActiveBgColor : isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
+        this.rect({
+            x: addFieldBlankX,
+            y: this.y + AI_TABLE_OFFSET,
+            width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                : this.containerWidth - addFieldBlankX,
+            height: rowHeight,
+            fill
+        });
     }
-    return result;
 }
-function getFileCanvasPaths(ext) {
-    const fileThumbnailName = getFileThumbnailName(ext);
-    return FileIcons[fileThumbnailName];
+
+class AddRowLayout extends Layout {
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
+        const rowHeight = this.rowHeight;
+        const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+        const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
+        this.line({
+            x: this.x + this.columnWidth,
+            y: this.y,
+            points: [0, rowHeight, width, rowHeight],
+            stroke: this.colors.gray200
+        });
+    }
+    renderCell({ width, isHoverRow }) {
+        const x = this.x;
+        const y = this.y;
+        const rowHeight = this.rowHeight;
+        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        this.rect({
+            x,
+            y: y + AI_TABLE_OFFSET,
+            width: width,
+            height: rowHeight,
+            fill
+        });
+        this.line({
+            x,
+            y: y + rowHeight,
+            points: [0, 0, width, 0],
+            stroke: this.colors.gray200
+        });
+    }
+    renderFirstCell({ isHoverRow }) {
+        if (!this.isFirst)
+            return;
+        const y = this.y;
+        const rowHeight = this.rowHeight;
+        const columnWidth = this.columnWidth;
+        const frozenOffset = AI_TABLE_OFFSET;
+        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        this.rect({
+            x: frozenOffset,
+            y: y + AI_TABLE_OFFSET,
+            width: columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1,
+            height: rowHeight,
+            fill
+        });
+        this.line({
+            x: frozenOffset,
+            y,
+            points: [0, rowHeight, columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1, rowHeight],
+            stroke: this.colors.gray200
+        });
+        this.path({
+            x: AI_TABLE_CELL_PADDING,
+            y: y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2 - AI_TABLE_OFFSET,
+            data: AddOutlinedPath,
+            size: AI_TABLE_ROW_HEAD_SIZE,
+            fill: this.colors.gray600
+        });
+    }
+    renderLastCell({ isHoverRow, isCheckedRow }) {
+        if (!this.isLast)
+            return;
+        const width = this.columnWidth;
+        if (!this.isFirst) {
+            this.renderCell({
+                width,
+                isHoverRow
+            });
+        }
+        this.renderAddFieldBlank({ isHoverRow, isCheckedRow });
+    }
+    renderCommonCell({ isHoverRow }) {
+        if (this.isFirst || this.isLast)
+            return;
+        this.renderCell({
+            width: this.columnWidth,
+            isHoverRow
+        });
+    }
+    render({ isHoverRow, isCheckedRow }) {
+        this.renderFirstCell({
+            isHoverRow
+        });
+        this.renderCommonCell({
+            isHoverRow
+        });
+        this.renderLastCell({
+            isHoverRow,
+            isCheckedRow
+        });
+    }
 }
+const addRowLayout = new AddRowLayout();
 
 /**
  * 处理和渲染表格单元格的内容
@@ -7265,15 +7467,12 @@ class CellDrawer extends Drawer {
     }
     renderCellAttachment(render, ctx) {
         const { references, x, y, field, transformValue: _cellValue, rowHeight, columnWidth, isActive } = render;
-        const cellValue = _cellValue;
-        if (!cellValue?.length || !references) {
-            return;
-        }
+        const cellValue = _cellValue || [];
         const fileIconSize = AI_TABLE_FILE_ICON_SIZE;
         const itemHeight = AI_TABLE_FILE_ICON_ITEM_HEIGHT;
         const isOperating = isActive;
         let currentX = AI_TABLE_CELL_PADDING;
-        let currentY = (AI_TABLE_ROW_BLANK_HEIGHT - fileIconSize) / 2;
+        let currentY = (AI_TABLE_ROW_BLANK_HEIGHT - itemHeight) / 2;
         const itemOtherWidth = fileIconSize + AI_TABLE_FIELD_ITEM_MARGIN_RIGHT;
         const maxHeight = isActive ? 130 - AI_TABLE_CELL_MULTI_PADDING_TOP : rowHeight - AI_TABLE_CELL_MULTI_PADDING_TOP;
         const maxTextWidth = isOperating
@@ -7282,7 +7481,7 @@ class CellDrawer extends Drawer {
         const listCount = cellValue.length;
         let isOverflow = false;
         for (let index = 0; index < listCount; index++) {
-            const attachmentInfo = references.attachments[cellValue[index]];
+            const attachmentInfo = references?.attachments[cellValue[index]];
             if (!attachmentInfo)
                 continue;
             const { title, addition } = attachmentInfo;
@@ -7890,7 +8089,8 @@ const createColumnHeads = (config) => {
         };
     };
     const fieldHeads = [];
-    const fieldMenus = config.aiTable.context?.aiFieldConfig()?.fieldMenus || [];
+    const fieldMenuFn = config.aiTable.context?.aiFieldConfig()?.fieldMenus;
+    const fieldMenus = (fieldMenuFn && fieldMenuFn(aiTable)) || [];
     let noMoreIcon = false;
     if (fieldMenus.length === 0) {
         noMoreIcon = true;
@@ -8332,7 +8532,6 @@ const createActiveCellBorder = (config) => {
                     columnIndex,
                     columnCount: totalColumnCount
                 });
-                // active 外边界和非 active 外边界 box 大小保持一致
                 const currentConfig = {
                     x: x + offset + AI_TABLE_OFFSET,
                     y: y + AI_TABLE_OFFSET,
@@ -8369,7 +8568,7 @@ class AITableHoverCells {
             };
         });
         this.hoverCellConfig = computed(() => {
-            const { aiTable, coordinate } = this.config();
+            const { aiTable, coordinate, references, readonly } = this.config();
             const pointPosition = aiTable.context.pointPosition();
             const hoverCell = this.hoverCell();
             if (!hoverCell) {
@@ -8377,10 +8576,7 @@ class AITableHoverCells {
             }
             const { field, recordId, fieldId, renderComponentDefinition } = hoverCell;
             const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
-            const transformValue = transformCellValue(aiTable, field, cellValue) || {};
-            if (Object.keys(transformValue).length === 0) {
-                return;
-            }
+            const transformValue = transformCellValue(aiTable, field, cellValue);
             const { rowHeight, columnCount, rowCount } = coordinate;
             const columnIndex = pointPosition.columnIndex;
             const rowIndex = pointPosition.rowIndex;
@@ -8402,10 +8598,12 @@ class AITableHoverCells {
             const renderY = 0 - AI_TABLE_OFFSET * 2;
             const result = {
                 field,
+                recordId,
                 aiTable,
                 coordinate,
                 x,
                 y,
+                readonly,
                 render: {
                     aiTable,
                     recordId,
@@ -8417,7 +8615,8 @@ class AITableHoverCells {
                     rowHeight,
                     cellValue,
                     transformValue,
-                    style
+                    style,
+                    references
                 }
             };
             return result;
@@ -8637,22 +8836,17 @@ class AITableDragComponent {
         this.draggedData = null;
         this.mouseStartPosition = null;
         this.aiTableDrag = null;
-        effect(() => {
-            const drag = this.aiTableGridSelectionService.aiTable.dragState?.();
-            if (drag && drag.sourceIds.size > 0) {
-                if (!this.rect || !this.line) {
-                    return;
-                }
-                this.aiTableDrag = drag;
-            }
-            else {
-                this.aiTableDrag = null;
-            }
-        });
+        effect(() => this.handleDragStateChange());
     }
     ngOnInit() {
+        this.initElements();
+        this.setupEventListeners();
+    }
+    initElements() {
         this.rect = this.elementRef.nativeElement.querySelector('.rect');
-        this.line = this.elementRef.nativeElement.querySelector('.line');
+        this.auxiliaryLine = this.elementRef.nativeElement.querySelector('.auxiliary-line');
+    }
+    setupEventListeners() {
         this.mousedownListener = this.render2.listen('window', 'mousedown', (e) => {
             this.mouseStartPosition = { x: e.x, y: e.y };
         });
@@ -8661,7 +8855,7 @@ class AITableDragComponent {
                 cancelAnimationFrame(this.timer);
             }
             this.timer = requestAnimationFrame(() => {
-                if (this.mouseStartPosition && this.aiTableDrag) {
+                if (this.aiTableDrag && this.mouseStartPosition) {
                     this.handleDrag(e, this.aiTableDrag);
                 }
             });
@@ -8672,72 +8866,23 @@ class AITableDragComponent {
             this.handleDragEnd();
         });
     }
-    handleDrag(e, drag) {
-        if (drag.type !== DragType.none) {
-            this.render2.setStyle(this.elementRef.nativeElement, 'display', 'block');
+    handleDragStateChange() {
+        const drag = this.aiTableGridSelectionService.aiTable.dragState?.();
+        if (!drag || drag.type === DragType.none || !this.rect || !this.auxiliaryLine) {
+            this.aiTableDrag = null;
+            return;
         }
-        else {
+        this.aiTableDrag = drag;
+    }
+    handleDrag(e, drag) {
+        if (drag.type === DragType.none) {
             return;
         }
-        const moveX = e.x - this.mouseStartPosition.x;
-        const aiTable = this.aiTableGridSelectionService.aiTable;
-        const scroll = drag.scroll || { x: 0, y: 0 };
-        const coordinate = drag.coordinate;
+        this.setDisplayStyle('block');
+        const moveX = e.x - (this.mouseStartPosition?.x || 0);
         switch (drag.type) {
             case DragType.field:
-                const fields = aiTable.gridData().fields;
-                let width = 0;
-                fields.forEach((field, index) => {
-                    if (drag.sourceIds.has(field._id)) {
-                        width += coordinate.columnIndicesSizeMap[index] || 0;
-                    }
-                });
-                const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
-                const sourceColumnIndex = visibleColumnIndexMap.get(drag.sourceIds.values().next().value) || 0;
-                const sourceColumnStartX = coordinate.getColumnOffset(sourceColumnIndex);
-                const sourceColumnWidth = coordinate.getColumnWidth(sourceColumnIndex);
-                // TODO: 目前默认第一列为冻结列，后期支持设置冻结列需要处理
-                const isSourceColumnFrozen = sourceColumnIndex === 0;
-                const pointerX = moveX + sourceColumnStartX;
-                // 拖拽中心点
-                const dragCenter = sourceColumnWidth / 2;
-                let targetColumnIndex = coordinate.getColumnStartIndex(pointerX + (isSourceColumnFrozen ? scroll.x : 0) + dragCenter);
-                let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
-                this.render2.setStyle(this.rect, 'cursor', 'move');
-                this.render2.setStyle(this.rect, 'width', `${width}px`);
-                this.render2.setStyle(this.rect, 'height', `100%`);
-                this.render2.setStyle(this.rect, 'top', 0);
-                this.render2.setStyle(this.rect, 'left', `${pointerX - (isSourceColumnFrozen ? 0 : scroll.x)}px`);
-                const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
-                const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
-                let isLastColumn = false;
-                // 处理最后一列
-                if (pointerX + dragCenter > lastColumnOffset + lastColumnWidth) {
-                    targetColumnIndex = coordinate.columnCount;
-                    targetColumnStartX = lastColumnOffset + lastColumnWidth;
-                    isLastColumn = true;
-                }
-                if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
-                    isLastColumn) {
-                    this.render2.setStyle(this.line, 'width', `2px`);
-                    this.render2.setStyle(this.line, 'height', `100%`);
-                    this.render2.setStyle(this.line, 'top', 0);
-                    this.render2.setStyle(this.line, 'left', `${targetColumnStartX - scroll.x}px`);
-                    const fieldsIndex = [];
-                    drag.sourceIds.forEach((id) => {
-                        const index = visibleColumnIndexMap.get(id) || 0;
-                        fieldsIndex.push(index);
-                    });
-                    // 向右移动目标在目标列的前一列
-                    if (targetColumnIndex > sourceColumnIndex) {
-                        targetColumnIndex -= 1;
-                    }
-                    this.draggedData = { type: DragType.field, targetIndex: targetColumnIndex, fieldIds: drag.sourceIds, fieldsIndex };
-                }
-                else {
-                    this.render2.setStyle(this.line, 'width', 0);
-                    this.draggedData = null;
-                }
+                this.movingColumn(drag, moveX);
                 break;
             case DragType.record:
                 break;
@@ -8745,13 +8890,95 @@ class AITableDragComponent {
                 break;
         }
     }
+    movingColumn(drag, moveX) {
+        const aiTable = this.aiTableGridSelectionService.aiTable;
+        const scroll = drag.scroll || { x: 0, y: 0 };
+        const coordinate = drag.coordinate;
+        const fields = aiTable.gridData().fields;
+        const width = this.calculateDragWidth(fields, coordinate, drag);
+        const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
+        const sourceColumnIndex = visibleColumnIndexMap.get(drag.sourceIds.values().next().value) || 0;
+        const sourceColumnStartX = coordinate.getColumnOffset(sourceColumnIndex);
+        const sourceColumnWidth = coordinate.getColumnWidth(sourceColumnIndex);
+        // TODO: 目前默认第一列为冻结列，后期支持设置冻结列需要处理
+        const isSourceColumnFrozen = sourceColumnIndex === 0;
+        const pointerX = moveX + sourceColumnStartX;
+        // 拖拽中心点
+        const dragCenter = sourceColumnWidth / 2;
+        this.setRectStyles({
+            cursor: 'move',
+            width: `${width}px`,
+            height: '100%',
+            top: '0',
+            left: `${pointerX - (isSourceColumnFrozen ? 0 : scroll.x)}px`
+        });
+        const lastColumnOffset = coordinate.getColumnOffset(coordinate.columnCount - 1);
+        const lastColumnWidth = coordinate.getColumnWidth(coordinate.columnCount - 1);
+        let targetColumnIndex = coordinate.getColumnStartIndex(pointerX + (isSourceColumnFrozen ? scroll.x : 0) + dragCenter);
+        let targetColumnStartX = coordinate.getColumnOffset(targetColumnIndex);
+        let isLastColumn = false;
+        // 处理最后一列
+        if (pointerX + dragCenter > lastColumnOffset + lastColumnWidth) {
+            targetColumnIndex = coordinate.columnCount;
+            targetColumnStartX = lastColumnOffset + lastColumnWidth;
+            isLastColumn = true;
+        }
+        if ((targetColumnIndex >= 0 && (targetColumnIndex - sourceColumnIndex > 1 || targetColumnIndex - sourceColumnIndex < 0)) ||
+            isLastColumn) {
+            this.setAuxiliaryLineStyles({
+                width: '2px',
+                height: '100%',
+                top: 0,
+                left: `${targetColumnStartX - scroll.x}px`
+            });
+            const fieldsIndex = [];
+            drag.sourceIds.forEach((id) => {
+                const index = visibleColumnIndexMap.get(id) || 0;
+                fieldsIndex.push(index);
+            });
+            // 向右移动目标在目标列的前一列
+            if (targetColumnIndex > sourceColumnIndex) {
+                targetColumnIndex -= 1;
+            }
+            this.draggedData = { type: DragType.field, targetIndex: targetColumnIndex, fieldIds: drag.sourceIds, fieldsIndex };
+        }
+        else {
+            this.resetAuxiliaryLine();
+            this.draggedData = null;
+        }
+    }
     handleDragEnd() {
-        this.render2.setStyle(this.elementRef.nativeElement, 'display', 'none');
+        this.setDisplayStyle('none');
         if (this.draggedData) {
             this.dragEnd.emit({ ...this.draggedData });
             this.draggedData = null;
         }
     }
+    calculateDragWidth(fields, coordinate, drag) {
+        let width = 0;
+        fields.forEach((field, index) => {
+            if (drag.sourceIds.has(field._id)) {
+                width += coordinate.columnIndicesSizeMap[index] || 0;
+            }
+        });
+        return width;
+    }
+    setDisplayStyle(display) {
+        this.render2.setStyle(this.elementRef.nativeElement, 'display', display);
+    }
+    setRectStyles(styles) {
+        Object.entries(styles).forEach(([prop, value]) => {
+            this.render2.setStyle(this.rect, prop, value);
+        });
+    }
+    setAuxiliaryLineStyles(styles) {
+        Object.entries(styles).forEach(([prop, value]) => {
+            this.render2.setStyle(this.auxiliaryLine, prop, value);
+        });
+    }
+    resetAuxiliaryLine() {
+        this.setAuxiliaryLineStyles({ width: 0 });
+    }
     ngOnDestroy() {
         if (this.mousedownListener)
             this.mousedownListener();
@@ -8765,13 +8992,13 @@ class AITableDragComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDragComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-drag', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'drag-container'
-                    }, template: "<div class=\"rect\"></div>\n<div class=\"line\"></div>" }]
+                    }, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>" }]
         }], ctorParameters: () => [] });
 
 class AITableGrid extends AITableGridBase {
@@ -8813,7 +9040,7 @@ class AITableGrid extends AITableGridBase {
                 rowInitSize: AI_TABLE_FIELD_HEAD_HEIGHT,
                 columnInitSize: AI_TABLE_ROW_HEAD_WIDTH,
                 rowIndicesSizeMap: {},
-                columnIndicesSizeMap: getColumnIndicesSizeMap(fields),
+                columnIndicesSizeMap: getColumnIndicesSizeMap(this.aiTable, fields),
                 frozenColumnCount: this.frozenColumnCount()
             });
             return {
@@ -8955,7 +9182,7 @@ class AITableGrid extends AITableGridBase {
                 return;
             const { context } = this.aiTable;
             const { x, y } = pos;
-            const curMousePosition = getMousePosition(x, y, this.coordinate(), AITable.getVisibleFields(this.aiTable), context, targetName);
+            const curMousePosition = getMousePosition(this.aiTable, x, y, this.coordinate(), AITable.getVisibleFields(this.aiTable), context, targetName);
             handleMouseStyle(curMousePosition.realTargetName, curMousePosition.areaType, this.containerElement());
             context.setPointPosition(curMousePosition);
             this.timer = null;
@@ -9023,7 +9250,10 @@ class AITableGrid extends AITableGridBase {
             x: mouseEvent.x,
             y: mouseEvent.y
         };
-        const menuItems = this.aiContextMenuItems();
+        const menuItems = [];
+        if (this.aiContextMenuItems()) {
+            menuItems.push(...this.aiContextMenuItems()(this.aiTable));
+        }
         if (!menuItems.length || menuItems.every((item) => !!(item.hidden && item.hidden(this.aiTable, targetName, position)))) {
             return;
         }
@@ -9047,17 +9277,17 @@ class AITableGrid extends AITableGridBase {
             case AI_TABLE_ROW_ADD_BUTTON: {
                 this.aiTableGridSelectionService.clearSelection();
                 this.addRecord();
-                return;
+                break;
             }
             case AI_TABLE_ROW_SELECT_CHECKBOX: {
                 const pointRecordId = context.linearRows()[pointRowIndex]?._id;
                 this.selectRecord(pointRecordId);
-                return;
+                break;
             }
             case AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX: {
                 const isChecked = this.aiTable.selection().selectAllState === AITableSelectAllState.all;
                 this.toggleSelectAll(!isChecked);
-                return;
+                break;
             }
             case AI_TABLE_FIELD_ADD_BUTTON: {
                 this.aiTableGridSelectionService.clearSelection();
@@ -9067,7 +9297,7 @@ class AITableGrid extends AITableGridBase {
                     x: fieldGroupRect.x + containerRect.x,
                     y: containerRect.y + fieldGroupRect.y + fieldGroupRect.height
                 });
-                return;
+                break;
             }
             case AI_TABLE_FIELD_HEAD_MORE:
                 mouseEvent.preventDefault();
@@ -9095,36 +9325,52 @@ class AITableGrid extends AITableGridBase {
                         editFieldPosition
                     });
                 }
-                return;
+                break;
         }
+        const targetNameDetail = getDetailByTargetName(e.event.target.name());
+        this.aiClick.emit({
+            ...e,
+            targetNameDetail
+        });
+        return;
     }
     stageDblclick(e) {
+        const _targetName = e.event.target.name();
+        const targetNameDetail = getDetailByTargetName(_targetName);
         if (this.aiReadonly()) {
+            this.aiDbClick.emit({
+                ...e,
+                targetNameDetail
+            });
             return;
         }
-        const _targetName = e.event.target.name();
-        const { fieldId, recordId } = getDetailByTargetName(_targetName);
+        const { fieldId, recordId } = targetNameDetail;
         if (!recordId || !fieldId) {
             return;
         }
         const field = this.aiTable.fieldsMap()[fieldId];
         const fieldType = field.type;
-        if (!DBL_CLICK_EDIT_TYPE.includes(fieldType)) {
-            return;
+        if (DBL_CLICK_EDIT_TYPE.includes(fieldType)) {
+            setTimeout(() => {
+                this.aiTableGridEventService.openCellEditor(this.aiTable, {
+                    viewContainerRef: this.viewContainerRef,
+                    container: this.containerElement(),
+                    coordinate: this.coordinate(),
+                    fieldId: fieldId,
+                    recordId: recordId,
+                    references: this.aiReferences(),
+                    updateFieldValue: (value) => {
+                        this.aiUpdateFieldValue.emit(value);
+                    }
+                });
+            }, 0);
         }
-        setTimeout(() => {
-            this.aiTableGridEventService.openCellEditor(this.aiTable, {
-                viewContainerRef: this.viewContainerRef,
-                container: this.containerElement(),
-                coordinate: this.coordinate(),
-                fieldId: fieldId,
-                recordId: recordId,
-                references: this.aiReferences(),
-                updateFieldValue: (value) => {
-                    this.aiUpdateFieldValue.emit(value);
-                }
+        else {
+            this.aiDbClick.emit({
+                ...e,
+                targetNameDetail
             });
-        }, 0);
+        }
     }
     bindWheel() {
         fromEvent(this.containerElement(), 'wheel', { passive: false })
@@ -9236,18 +9482,24 @@ class AITableGrid extends AITableGridBase {
         fromEvent(document, 'keydown')
             .pipe(filter((event) => (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v')), takeUntilDestroyed(this.destroyRef))
             .subscribe(async (event) => {
+            const hasSelectedCells = this.aiTable.selection().selectedCells.size > 0;
+            if (!hasSelectedCells) {
+                return;
+            }
+            const hasEditingCell = !!this.aiTableGridEventService.getCurrentEditCell();
             if (event.key === 'c') {
                 const clipboardData = buildClipboardData(this.aiTable);
                 if (clipboardData) {
                     writeToClipboard(clipboardData).then(() => {
                         const copiedCellsCount = this.aiTable.selection().selectedCells.size;
-                        this.notifyService.success(`已复制 ${copiedCellsCount} 个单元格`, undefined, {
+                        const message = getI18nTextByKey(this.aiTable, AITableGridI18nKey.copiedCells).replace('{count}', copiedCellsCount.toString());
+                        this.notifyService.success(message, undefined, {
                             placement: 'bottomLeft'
                         });
                     });
                 }
             }
-            else if (event.key === 'v') {
+            else if (event.key === 'v' && !hasEditingCell) {
                 event.preventDefault();
                 const actions = {
                     updateFieldValue: (data) => {
@@ -9265,7 +9517,7 @@ class AITableGrid extends AITableGridBase {
                 };
                 writeToAITable(this.aiTable, actions).then((isPasteSuccess) => {
                     if (!isPasteSuccess) {
-                        this.notifyService.error('粘贴内容不符合当前类型', undefined, {
+                        this.notifyService.error(getI18nTextByKey(this.aiTable, AITableGridI18nKey.invalidPasteContent), undefined, {
                             placement: 'bottomLeft'
                         });
                     }
@@ -9323,5 +9575,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectAllState, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, 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_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_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, DragType, FONT_SIZE_SM, FieldModelMap, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, buildClipboardData, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, extractLinkHref, extractText, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldValue, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectAllState, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_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_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_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, DragType, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, buildClipboardData, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, extractLinkHref, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptions, getFieldValue, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getPlaceHolderCellsConfigs, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map