@ai-table/grid 0.0.3 → 0.0.5

package/fesm2022/ai-table-grid.mjs

@@ -1,79 +1,56 @@
+import * as i1$2 from '@angular/common';
+import { NgIf, NgTemplateOutlet, NgForOf, NgClass, CommonModule, NgComponentOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, computed, model, inject, booleanAttribute, Component, ChangeDetectionStrategy, Input, Injectable, input, signal, output } from '@angular/core';
-import { NgIf, NgTemplateOutlet, NgForOf, CommonModule, NgClass, NgComponentOutlet } from '@angular/common';
-import { ThyTag } from 'ngx-tethys/tag';
-import * as i1$1 from 'ngx-tethys/popover';
-import { ThyPopoverRef, ThyPopoverModule } from 'ngx-tethys/popover';
+import { signal, input, inject, computed, Component, ChangeDetectionStrategy, Input, HostListener, ElementRef, Renderer2, model, booleanAttribute, Injectable, Pipe, DestroyRef, output, NgZone } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { createDraft, finishDraft } from 'immer';
-import { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
-import { ThyIcon } from 'ngx-tethys/icon';
-import { of, fromEvent } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ThyInputGroup, ThyInputCount, ThyInputDirective, ThyInput } from 'ngx-tethys/input';
+import { ThyAction } from 'ngx-tethys/action';
+import * as i3 from 'ngx-tethys/checkbox';
+import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
+import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
+import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective } from 'ngx-tethys/dropdown';
+import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { ThyIcon } from 'ngx-tethys/icon';
+import * as i1$1 from 'ngx-tethys/popover';
+import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
+import { ThyProgress } from 'ngx-tethys/progress';
+import { ThyRate } from 'ngx-tethys/rate';
+import { ThyAutofocusDirective, ThyEnterDirective, ThyOption, ThyStopPropagationDirective } from 'ngx-tethys/shared';
+import { ThyTag } from 'ngx-tethys/tag';
+import { mergeWith } from 'rxjs/operators';
+import { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
+import { createDraft, finishDraft } from 'immer';
+import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
+import { ThyInputNumber } from 'ngx-tethys/input-number';
+import { ThySlider } from 'ngx-tethys/slider';
+import { ThyInputDirective, ThyInputGroup, ThyInputCount, ThyInput } from 'ngx-tethys/input';
 import * as i2 from 'ngx-tethys/form';
 import { ThyUniqueCheckValidator, ThyFormModule, ThyConfirmValidatorDirective } from 'ngx-tethys/form';
-import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective } from 'ngx-tethys/dropdown';
 import { ThyButton } from 'ngx-tethys/button';
 import { ThyListItem } from 'ngx-tethys/list';
-import { ThySelect } from 'ngx-tethys/select';
-import { ThyOption, ThyAutofocusDirective, ThyEnterDirective, ThyStopPropagationDirective } from 'ngx-tethys/shared';
-import { ThyInputNumber } from 'ngx-tethys/input-number';
-import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
-import { ThyTimePickerModule } from 'ngx-tethys/time-picker';
-import { ThyRate } from 'ngx-tethys/rate';
-import { ThyTooltipModule, ThyTooltipService } from 'ngx-tethys/tooltip';
-import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { of, Subject, fromEvent, debounceTime } from 'rxjs';
 import { ThyDivider } from 'ngx-tethys/divider';
-import { ThyAction } from 'ngx-tethys/action';
-
-;
-class SelectOptionPipe {
-    transform(id, options) {
-        return options.find((item) => item.id === id);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'selectOption',
-                    standalone: true
-                }]
-        }] });
-
-;
-const buildGridData = (recordValue, fieldsValue) => {
-    return {
-        type: 'grid',
-        fields: fieldsValue,
-        records: recordValue
-    };
-};
-
-function getRecordOrField(value, id) {
-    return computed(() => {
-        return value().find((item) => item.id === id);
-    });
-}
+import { ThySelect } from 'ngx-tethys/select';
+import * as i4 from 'ngx-tethys/avatar';
+import { ThyAvatarModule } from 'ngx-tethys/avatar';
 
 var AITableFieldType;
 (function (AITableFieldType) {
-    // NotSupport = 0,
-    AITableFieldType[AITableFieldType["Text"] = 1] = "Text";
-    AITableFieldType[AITableFieldType["Number"] = 2] = "Number";
-    AITableFieldType[AITableFieldType["SingleSelect"] = 3] = "SingleSelect";
-    // MultiSelect = 4,
-    AITableFieldType[AITableFieldType["DateTime"] = 5] = "DateTime";
-    // Attachment = 6,
-    AITableFieldType[AITableFieldType["Link"] = 7] = "Link";
-    // Email = 9,
-    // Phone = 10,
-    // Checkbox = 11,
-    AITableFieldType[AITableFieldType["Rating"] = 12] = "Rating";
-    // Member = 13
+    AITableFieldType["text"] = "text";
+    AITableFieldType["richText"] = "rich_text";
+    AITableFieldType["select"] = "select";
+    AITableFieldType["number"] = "number";
+    AITableFieldType["date"] = "date";
+    AITableFieldType["member"] = "member";
+    // cascadeSelect = 'cascade_select', // 包含单选和多选，参数复杂后续再进行设计
+    AITableFieldType["progress"] = "progress";
+    AITableFieldType["rate"] = "rate";
+    AITableFieldType["link"] = "link";
+    AITableFieldType["createdAt"] = "created_at";
+    AITableFieldType["updatedAt"] = "updated_at";
+    AITableFieldType["createdBy"] = "created_by";
+    AITableFieldType["updatedBy"] = "updated_by";
 })(AITableFieldType || (AITableFieldType = {}));
 var AITableStatType;
 (function (AITableStatType) {
@@ -102,6 +79,11 @@ var ActionName;
     ActionName["UpdateFieldValue"] = "update_field_value";
     ActionName["AddRecord"] = "add_record";
     ActionName["AddField"] = "add_field";
+    ActionName["MoveField"] = "move_field";
+    ActionName["MoveRecord"] = "move_record";
+    ActionName["RemoveField"] = "remove_field";
+    ActionName["RemoveRecord"] = "remove_record";
+    ActionName["SetField"] = "set_field";
 })(ActionName || (ActionName = {}));
 var ExecuteType;
 (function (ExecuteType) {
@@ -110,65 +92,6 @@ var ExecuteType;
     ExecuteType[ExecuteType["Redo"] = 2] = "Redo";
 })(ExecuteType || (ExecuteType = {}));
 
-function addField(aiTable, field, path) {
-    const operation = {
-        type: ActionName.AddField,
-        field,
-        path
-    };
-    aiTable.apply(operation);
-}
-const FieldActions = {
-    addField
-};
-
-const apply = (aiTable, records, fields, options) => {
-    switch (options.type) {
-        case ActionName.UpdateFieldValue: {
-            const [recordIndex, fieldIndex] = options.path;
-            const fieldId = aiTable.fields()[fieldIndex].id;
-            records[recordIndex].value[fieldId] = options.newFieldValue;
-            break;
-        }
-        case ActionName.AddRecord: {
-            const [recordIndex] = options.path;
-            records.splice(recordIndex, 0, options.record);
-            break;
-        }
-        case ActionName.AddField: {
-            const [fieldIndex] = options.path;
-            const newField = options.field;
-            fields.splice(fieldIndex, 0, newField);
-            const newRecord = {
-                [newField.id]: ''
-            };
-            records.forEach((item) => {
-                item.value = {
-                    ...item.value,
-                    ...newRecord
-                };
-            });
-        }
-    }
-    return {
-        records,
-        fields
-    };
-};
-const GeneralActions = {
-    transform(aiTable, op) {
-        const records = createDraft(aiTable.records());
-        const fields = createDraft(aiTable.fields());
-        apply(aiTable, records, fields, op);
-        aiTable.fields.update(() => {
-            return finishDraft(fields);
-        });
-        aiTable.records.update(() => {
-            return finishDraft(records);
-        });
-    }
-};
-
 function idCreator(length = 5) {
     // remove numeral
     const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default oOLl,9gq,Vv,Uu,I1****/
@@ -182,34 +105,80 @@ function idCreator(length = 5) {
 
 const BasicFields = [
     {
-        type: AITableFieldType.Text,
-        name: '文本',
-        icon: 'font'
+        type: AITableFieldType.text,
+        name: '单行文本',
+        icon: 'font',
+        width: 300
     },
+    // 多行文本
     {
-        type: AITableFieldType.SingleSelect,
+        type: AITableFieldType.select,
         name: '单选',
-        icon: 'check-circle'
+        icon: 'check-circle',
+        width: 200
     },
+    // 多选
     {
-        type: AITableFieldType.Number,
+        type: AITableFieldType.number,
         name: '数字',
-        icon: 'hashtag'
+        icon: 'hashtag',
+        width: 200
     },
     {
-        type: AITableFieldType.DateTime,
+        type: AITableFieldType.date,
         name: '日期',
-        icon: 'calendar'
+        icon: 'calendar',
+        width: 200
+    },
+    {
+        type: AITableFieldType.member,
+        name: '成员',
+        icon: 'user',
+        width: 200
+    },
+    // 级联单选
+    // 级联多选
+    {
+        type: AITableFieldType.progress,
+        name: '进度',
+        icon: 'progress',
+        width: 200
     },
     {
-        type: AITableFieldType.Rating,
+        type: AITableFieldType.rate,
         name: '评分',
-        icon: 'star-circle'
+        icon: 'star-circle',
+        width: 200
     },
     {
-        type: AITableFieldType.Link,
+        type: AITableFieldType.link,
         name: '链接',
-        icon: 'link-insert'
+        icon: 'link-insert',
+        width: 300
+    },
+    {
+        type: AITableFieldType.createdBy,
+        name: '创建人',
+        icon: 'user',
+        width: 200
+    },
+    {
+        type: AITableFieldType.createdAt,
+        name: '创建时间',
+        icon: 'calendar',
+        width: 200
+    },
+    {
+        type: AITableFieldType.updatedBy,
+        name: '更新人',
+        icon: 'user',
+        width: 200
+    },
+    {
+        type: AITableFieldType.updatedAt,
+        name: '更新时间',
+        icon: 'calendar',
+        width: 200
     }
 ];
 const Fields = [...BasicFields];
@@ -218,13 +187,13 @@ const FieldsMap = helpers.keyBy([...BasicFields], 'type');
 function getDefaultFieldValue(type) {
     return '';
 }
-function createDefaultFieldName(aiTable, type = AITableFieldType.Text) {
+function createDefaultFieldName(aiTable, type = AITableFieldType.text) {
     const fields = aiTable.fields();
     const count = fields.filter((item) => item.type === type).length;
     return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
 }
-function createDefaultField(aiTable, type = AITableFieldType.Text) {
-    return { id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
+function createDefaultField(aiTable, type = AITableFieldType.text) {
+    return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
 }
 
 const FLUSHING = new WeakMap();
@@ -234,6 +203,11 @@ function createAITable(records, fields) {
         records,
         fields,
         actions: [],
+        selection: signal({
+            selectedRecords: new Map(),
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        }),
         onChange: () => { },
         apply: (action) => {
             aiTable.actions.push(action);
@@ -250,14 +224,17 @@ function createAITable(records, fields) {
     };
     return aiTable;
 }
+function isPathEqual(path, another) {
+    return path.length === another.length && path.every((n, i) => n === another[i]);
+}
 
 function getDefaultRecord(fields) {
     const newRow = {
-        id: idCreator(),
-        value: {}
+        _id: idCreator(),
+        values: {}
     };
     fields.map((item) => {
-        newRow.value[item.id] = getDefaultFieldValue(item.type);
+        newRow.values[item._id] = getDefaultFieldValue(item.type);
     });
     return newRow;
 }
@@ -275,23 +252,205 @@ const AITableQueries = {
         if (!isUndefinedOrNull(fieldIndex) && fieldIndex > -1) {
             return [fieldIndex];
         }
-        throw new Error(`Unable to find the path: ${JSON.stringify({ ...(field || {}), ...(record || {}) })}`);
+        throw new Error(`can not find the path: ${JSON.stringify({ ...(field || {}), ...(record || {}) })}`);
     },
     getFieldValue(aiTable, path) {
-        if (!aiTable || !aiTable.records() || !aiTable.fields()) {
-            throw new Error(`Cannot find a descendant at path [${path}]`);
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!aiTable.records()) {
+            throw new Error(`aiTable has no records`);
+        }
+        if (!aiTable.fields()) {
+            throw new Error(`aiTable has no fields`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
+        }
+        const field = aiTable.fields()[path[1]];
+        if (!field) {
+            throw new Error(`can not find field at path [${path}]`);
+        }
+        return aiTable.records()[path[0]].values[field._id];
+    },
+    getField(aiTable, path) {
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
+        }
+        return aiTable.fields()[path[0]];
+    },
+    getRecord(aiTable, path) {
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
+        }
+        return aiTable.records()[path[0]];
+    }
+};
+
+function addField(aiTable, field, path) {
+    const operation = {
+        type: ActionName.AddField,
+        field,
+        path
+    };
+    aiTable.apply(operation);
+}
+function moveField(aiTable, path, newPath) {
+    const operation = {
+        type: ActionName.MoveField,
+        path,
+        newPath
+    };
+    aiTable.apply(operation);
+}
+function removeField(aiTable, path) {
+    const operation = {
+        type: ActionName.RemoveField,
+        path
+    };
+    aiTable.apply(operation);
+}
+function setField(aiTable, value, path) {
+    const field = AITableQueries.getField(aiTable, path);
+    if (field) {
+        const oldField = {};
+        const newField = {};
+        for (const k in value) {
+            if (field[k] !== value[k]) {
+                if (field.hasOwnProperty(k)) {
+                    oldField[k] = field[k];
+                }
+                newField[k] = value[k];
+            }
+        }
+        const operation = {
+            type: ActionName.SetField,
+            field: oldField,
+            newField,
+            path
+        };
+        aiTable.apply(operation);
+    }
+}
+const FieldActions = {
+    addField,
+    moveField,
+    removeField,
+    setField
+};
+
+const apply = (aiTable, records, fields, options) => {
+    switch (options.type) {
+        case ActionName.UpdateFieldValue: {
+            const [recordIndex, fieldIndex] = options.path;
+            if (fieldIndex > -1 && recordIndex > -1) {
+                const fieldId = aiTable.fields()[fieldIndex]._id;
+                records[recordIndex].values[fieldId] = options.newFieldValue;
+            }
+            break;
+        }
+        case ActionName.AddRecord: {
+            const [recordIndex] = options.path;
+            if (recordIndex > -1) {
+                records.splice(recordIndex, 0, options.record);
+            }
+            break;
+        }
+        case ActionName.AddField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                const newField = options.field;
+                fields.splice(fieldIndex, 0, newField);
+                const newRecord = {
+                    [newField._id]: ''
+                };
+                records.forEach((item) => {
+                    item.values = {
+                        ...item.values,
+                        ...newRecord
+                    };
+                });
+            }
+            break;
+        }
+        case ActionName.MoveRecord: {
+            if (isPathEqual(options.path, options.newPath)) {
+                return;
+            }
+            const record = records[options.path[0]];
+            records.splice(options.path[0], 1);
+            records.splice(options.newPath[0], 0, record);
+            break;
+        }
+        case ActionName.MoveField: {
+            if (isPathEqual(options.path, options.newPath)) {
+                return;
+            }
+            const field = fields[options.path[0]];
+            fields.splice(options.path[0], 1);
+            fields.splice(options.newPath[0], 0, field);
+            break;
+        }
+        case ActionName.RemoveField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                const fieldId = aiTable.fields()[fieldIndex]._id;
+                fields.splice(fieldIndex, 1);
+                records.forEach((item) => {
+                    delete item.values[fieldId];
+                });
+            }
+            break;
+        }
+        case ActionName.RemoveRecord: {
+            const [recordIndex] = options.path;
+            if (recordIndex > -1) {
+                records.splice(recordIndex, 1);
+            }
+            break;
         }
-        const fieldId = aiTable.fields()[path[1]].id;
-        return aiTable.records()[path[0]].value[fieldId];
+        case ActionName.SetField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                fields.splice(fieldIndex, 1, {
+                    ...fields[fieldIndex],
+                    ...options.newField
+                });
+            }
+            break;
+        }
+    }
+    return {
+        records,
+        fields
+    };
+};
+const GeneralActions = {
+    transform(aiTable, op) {
+        const records = createDraft(aiTable.records());
+        const fields = createDraft(aiTable.fields());
+        apply(aiTable, records, fields, op);
+        aiTable.fields.update(() => {
+            return finishDraft(fields);
+        });
+        aiTable.records.update(() => {
+            return finishDraft(records);
+        });
     }
 };
 
 function updateFieldValue(aiTable, value, path) {
-    const node = AITableQueries.getFieldValue(aiTable, path);
-    if (node !== value) {
+    const field = AITableQueries.getFieldValue(aiTable, path);
+    if (field !== value) {
         const operation = {
             type: ActionName.UpdateFieldValue,
-            fieldValue: node,
+            fieldValue: field,
             newFieldValue: value,
             path
         };
@@ -306,9 +465,26 @@ function addRecord(aiTable, record, path) {
     };
     aiTable.apply(operation);
 }
+function moveRecord(aiTable, path, newPath) {
+    const operation = {
+        type: ActionName.MoveRecord,
+        path,
+        newPath
+    };
+    aiTable.apply(operation);
+}
+function removeRecord(aiTable, path) {
+    const operation = {
+        type: ActionName.RemoveRecord,
+        path
+    };
+    aiTable.apply(operation);
+}
 const RecordActions = {
     addRecord,
-    updateFieldValue
+    updateFieldValue,
+    moveRecord,
+    removeRecord
 };
 
 const Actions = {
@@ -317,50 +493,355 @@ const Actions = {
     ...FieldActions
 };
 
-const DEFAULT_COLUMN_WIDTH = 200;
-const MIN_COLUMN_WIDTH = 80;
-const DBL_CLICK_EDIT_TYPE = [
-    AITableFieldType.Text,
-    AITableFieldType.Number,
-    AITableFieldType.SingleSelect,
-    AITableFieldType.DateTime
-];
-const RowHeight = {
-    Short: 32,
-    Medium: 57,
-    Tall: 104,
-    ExtraTall: 152
-};
-
-class AITableFieldPropertyEditor {
+class AbstractEditCellEditor {
     constructor() {
-        this.aiField = model.required();
-        this.aiExternalTemplate = null;
-        this.fieldType = computed(() => {
-            return FieldsMap[this.aiField().type];
-        });
-        this.fieldMaxLength = 32;
-        this.validatorConfig = {
-            validationMessages: {
-                fieldName: {
-                    required: '列名不能为空',
-                    thyUniqueCheck: '列名已存在'
-                }
-            }
-        };
-        this.selectableFields = Fields;
+        this.field = input.required();
+        this.record = input.required();
         this.thyPopoverRef = inject((ThyPopoverRef));
-        this.checkUniqueName = (fieldName) => {
-            fieldName = fieldName?.trim();
-            return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.aiField()?.id !== field.id));
-        };
     }
-    selectFieldType(fieldType) {
-        this.aiField.update((item) => ({ ...item, type: fieldType, name: createDefaultFieldName(this.aiTable, fieldType) }));
+    ngOnInit() {
+        this.modelValue = computed(() => {
+            const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
+            return AITableQueries.getFieldValue(this.aiTable, path);
+        })();
     }
-    editFieldProperty() {
+    updateFieldValue() {
+        const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
+        Actions.updateFieldValue(this.aiTable, this.modelValue, path);
+    }
+    closePopover() {
+        this.thyPopoverRef?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abstract-edit-cell',
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+class DateTimeCellEditorComponent extends AbstractEditCellEditor {
+    constructor() {
+        super(...arguments);
+        this.dateShowTime = input(false);
+        this.dateFormat = computed(() => {
+            return this.dateShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
+        })();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (!this.modelValue && this.dateShowTime()) {
+            this.modelValue = {
+                date: 0,
+                with_time: 1
+            };
+        }
+    }
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+    thyOpenChange(isOpen) {
+        if (!isOpen) {
+            this.closePopover();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DateTimeCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: DateTimeCellEditorComponent, isStandalone: true, selector: "date-time-cell-editor", inputs: { dateShowTime: { classPropertyName: "dateShowTime", publicName: "dateShowTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "date-time-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+        <thy-date-picker
+            class="h-100"
+            thyTimestampPrecision="milliseconds"
+            thyPlaceHolder="选择时间"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="updateValue()"
+            (thyOpenChange)="thyOpenChange($event)"
+            [thyAllowClear]="true"
+            [thyShowShortcut]="true"
+            [thyHasBackdrop]="false"
+            [thyShowTime]="dateShowTime()"
+            [thyOpen]="true"
+            [thyFormat]="dateFormat"
+        >
+        </thy-date-picker>
+    `, isInline: true, dependencies: [{ 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: "component", type: ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "ngmodule", type: ThyTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DateTimeCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'date-time-cell-editor',
+                    template: `
+        <thy-date-picker
+            class="h-100"
+            thyTimestampPrecision="milliseconds"
+            thyPlaceHolder="选择时间"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="updateValue()"
+            (thyOpenChange)="thyOpenChange($event)"
+            [thyAllowClear]="true"
+            [thyShowShortcut]="true"
+            [thyHasBackdrop]="false"
+            [thyShowTime]="dateShowTime()"
+            [thyOpen]="true"
+            [thyFormat]="dateFormat"
+        >
+        </thy-date-picker>
+    `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ThyDatePicker, ThyTimePickerModule],
+                    host: {
+                        class: 'date-time-cell-editor'
+                    }
+                }]
+        }] });
+
+class LinkCellEditorComponent extends AbstractEditCellEditor {
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'link-cell-editor',
+                    template: ``,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber]
+                }]
+        }] });
+
+class NumberCellEditorComponent extends AbstractEditCellEditor {
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
+        class="h-100"
+        [thyAutoFocus]="true"
+        [(ngModel)]="modelValue"
+        (thyEnter)="updateValue()"
+        (thyBlur)="updateValue()"
+    /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'number-cell-editor',
+                    template: `<thy-input-number
+        class="h-100"
+        [thyAutoFocus]="true"
+        [(ngModel)]="modelValue"
+        (thyEnter)="updateValue()"
+        (thyBlur)="updateValue()"
+    /> `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber],
+                    host: {
+                        class: 'number-cell-editor'
+                    }
+                }]
+        }] });
+
+class ProgressEditorComponent extends AbstractEditCellEditor {
+    mousedownHandler(event) {
+        event.preventDefault();
+    }
+    constructor() {
+        super();
+        this.config = {
+            max: 100,
+            min: 0,
+            step: 1,
+            progressType: 'success',
+            suffix: '%',
+            size: 'md'
+        };
+    }
+    sliderMousedownHandler(event) {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    updateValue(value) {
+        this.updateFieldValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ProgressEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: ProgressEditorComponent, isStandalone: true, selector: "progress-editor", host: { listeners: { "mousedown": "mousedownHandler($event)" }, properties: { "attr.type": "field().type", "attr.fieldId": "field()._id", "attr.recordId": "record()._id" }, classAttribute: "grid-cell progress-editor" }, usesInheritance: true, ngImport: i0, template: `
+        <thy-slider
+            [(ngModel)]="modelValue"
+            [thyMax]="config?.max || 100"
+            [thyMin]="config?.min || 0"
+            [thyStep]="config?.step || 1"
+            [thyType]="config?.progressType || 'success'"
+            [thySize]="config?.size || 'md'"
+            (ngModelChange)="updateValue($event)"
+            (mousedown)="sliderMousedownHandler($event)"
+        ></thy-slider>
+        <span class="progress-text">{{ modelValue }}{{ config?.suffix || '%' }}</span>
+    `, isInline: true, dependencies: [{ 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: "component", type: ThySlider, selector: "thy-slider", inputs: ["thyVertical", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyType", "thyColor", "thySize"], outputs: ["thyAfterChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: ProgressEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'progress-editor',
+                    template: `
+        <thy-slider
+            [(ngModel)]="modelValue"
+            [thyMax]="config?.max || 100"
+            [thyMin]="config?.min || 0"
+            [thyStep]="config?.step || 1"
+            [thyType]="config?.progressType || 'success'"
+            [thySize]="config?.size || 'md'"
+            (ngModelChange)="updateValue($event)"
+            (mousedown)="sliderMousedownHandler($event)"
+        ></thy-slider>
+        <span class="progress-text">{{ modelValue }}{{ config?.suffix || '%' }}</span>
+    `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ThySlider],
+                    host: {
+                        class: 'grid-cell progress-editor',
+                        '[attr.type]': 'field().type',
+                        '[attr.fieldId]': 'field()._id',
+                        '[attr.recordId]': 'record()._id'
+                    }
+                }]
+        }], ctorParameters: () => [], propDecorators: { mousedownHandler: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }] } });
+
+class RatingCellEditorComponent extends AbstractEditCellEditor {
+    updateValue() {
+        this.updateFieldValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RatingCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: RatingCellEditorComponent, isStandalone: true, selector: "rating-cell-editor", host: { classAttribute: "d-flex align-items-center h-100 px-3" }, usesInheritance: true, ngImport: i0, template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `, isInline: true, dependencies: [{ 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: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RatingCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'rating-cell-editor',
+                    template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [FormsModule, ThyRate],
+                    host: {
+                        class: 'd-flex align-items-center h-100 px-3'
+                    }
+                }]
+        }] });
+
+class TextCellEditorComponent extends AbstractEditCellEditor {
+    constructor() {
+        super();
+        this.elementRef = inject(ElementRef);
+        this.render2 = inject(Renderer2);
+        this.maxHeight = 148;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.updateStyle();
+        });
+    }
+    updateStyle() {
+        const textarea = this.elementRef.nativeElement.querySelector('textarea');
+        const height = textarea.scrollHeight < this.maxHeight ? textarea.scrollHeight : this.maxHeight;
+        this.render2.setStyle(textarea, 'height', `${height}px`);
+        this.render2.setStyle(textarea, 'min-height', `44px`);
+        this.render2.setStyle(textarea, 'max-height', `${this.maxHeight}px`);
+        this.render2.setStyle(textarea, 'resize', 'none');
+    }
+    valueChange() {
+        this.updateStyle();
+    }
+    updateValue() {
+        this.updateFieldValue();
+        this.closePopover();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+        <textarea
+            placeholder=""
+            rows="1"
+            thyInput
+            [thyAutofocus]="true"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="valueChange()"
+            (thyEnter)="updateValue()"
+            (blur)="updateValue()"
+        ></textarea>
+    `, isInline: true, 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: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'text-cell-editor',
+                    template: `
+        <textarea
+            placeholder=""
+            rows="1"
+            thyInput
+            [thyAutofocus]="true"
+            [(ngModel)]="modelValue"
+            (ngModelChange)="valueChange()"
+            (thyEnter)="updateValue()"
+            (blur)="updateValue()"
+        ></textarea>
+    `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective],
+                    host: {
+                        class: 'text-cell-editor'
+                    }
+                }]
+        }], ctorParameters: () => [] });
+
+class AITableFieldPropertyEditor {
+    constructor() {
+        this.aiField = model.required();
+        this.aiExternalTemplate = null;
+        this.fieldType = computed(() => {
+            return FieldsMap[this.aiField().type];
+        });
+        this.fieldMaxLength = 32;
+        this.validatorConfig = {
+            validationMessages: {
+                fieldName: {
+                    required: '列名不能为空',
+                    thyUniqueCheck: '列名已存在'
+                }
+            }
+        };
+        this.selectableFields = Fields;
+        this.thyPopoverRef = inject((ThyPopoverRef));
+        this.checkUniqueName = (fieldName) => {
+            fieldName = fieldName?.trim();
+            return of(!!this.aiTable.fields()?.find((field) => field.name === fieldName && this.aiField()?._id !== field._id));
+        };
+    }
+    selectFieldType(fieldType) {
+        this.aiField.update((item) => ({ ...item, type: fieldType, name: createDefaultFieldName(this.aiTable, fieldType) }));
+    }
+    editFieldProperty() {
         if (this.isUpdate) {
-            //TODO: updateField
+            const path = this.aiTable.fields().findIndex((item) => item._id === this.aiField()._id);
+            Actions.setField(this.aiTable, this.aiField(), [path]);
         }
         else {
             Actions.addField(this.aiTable, this.aiField(), [this.aiTable.fields().length]);
@@ -371,7 +852,7 @@ class AITableFieldPropertyEditor {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableFieldPropertyEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableFieldPropertyEditor, isStandalone: true, selector: "ai-table-field-property-editor", inputs: { aiField: { classPropertyName: "aiField", publicName: "aiField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: false, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { aiField: "aiFieldChange" }, host: { classAttribute: "field-property-editor 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\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiField().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=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\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 selectableFields; track item.type) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { 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: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableFieldPropertyEditor, isStandalone: true, selector: "ai-table-field-property-editor", inputs: { aiField: { classPropertyName: "aiField", publicName: "aiField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: false, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { aiField: "aiFieldChange" }, host: { classAttribute: "field-property-editor 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)]=\"aiField().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=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\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 selectableFields; track $index) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\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: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { 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: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableFieldPropertyEditor, decorators: [{
             type: Component,
@@ -394,10 +875,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         ThyButton,
                         ThyFormModule,
                         ThyListItem,
-                        NgTemplateOutlet
+                        NgTemplateOutlet,
+                        ThyAutofocusDirective
                     ], host: {
                         class: 'field-property-editor 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\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiField().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=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\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 selectableFields; track item.type) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\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=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiField().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=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\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 selectableFields; track $index) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\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"] }]
         }], ctorParameters: () => [], propDecorators: { aiTable: [{
                 type: Input,
                 args: [{ required: true }]
@@ -408,6 +890,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+const buildGridData = (recordValue, fieldsValue, references) => {
+    const fields = fieldsValue.map((item) => {
+        return {
+            ...item,
+            icon: item.icon || FieldsMap[item.type].icon,
+            width: item.width || FieldsMap[item.type].width
+        };
+    });
+    let records = buildRecordsByReferences(recordValue, fieldsValue, references);
+    return {
+        type: 'grid',
+        fields,
+        records
+    };
+};
+function buildRecordsByReferences(records, fields, references) {
+    if (!references) {
+        return records;
+    }
+    const memberFields = fields.filter((field) => [AITableFieldType.createdBy, AITableFieldType.updatedBy, AITableFieldType.member].includes(field.type));
+    if (memberFields.length) {
+        const uidToMember = references.members.reduce((map, member) => {
+            map[member.uid] = member;
+            return map;
+        }, {});
+        const draftRecords = createDraft(records);
+        draftRecords.forEach((record) => {
+            memberFields.forEach((field) => {
+                const value = record.values[field._id];
+                if (field.isMultiple) {
+                    record.values[field._id] = value.map((uid) => uidToMember[uid]).filter(Boolean);
+                }
+                else {
+                    record.values[field._id] = uidToMember[value] || {};
+                }
+            });
+        });
+        records = finishDraft(draftRecords);
+    }
+    return records;
+}
+
+function getRecordOrField(value, _id) {
+    return computed(() => {
+        return value().find((item) => item._id === _id);
+    });
+}
+
+class FieldMenu {
+    execute(menu) {
+        const field = getRecordOrField(this.aiTable.fields, this.fieldId);
+        menu.exec && menu.exec(this.aiTable, field, this.origin);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin" }, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.type === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name! }}</span>\n        </a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        ThyIcon,
+                        ThyDivider,
+                        ThyDropdownMenuComponent,
+                        ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuItemNameDirective,
+                        ThyDropdownMenuItemIconDirective
+                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.type === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name! }}</span>\n        </a>\n    }\n}\n" }]
+        }], propDecorators: { fieldId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], fieldMenus: [{
+                type: Input,
+                args: [{ required: true }]
+            }], origin: [{
+                type: Input
+            }] } });
+
+const DEFAULT_COLUMN_WIDTH = 200;
+const MIN_COLUMN_WIDTH = 80;
+const DBL_CLICK_EDIT_TYPE = [
+    AITableFieldType.text,
+    AITableFieldType.number,
+    AITableFieldType.select,
+    AITableFieldType.date,
+    AITableFieldType.member
+];
+const MOUSEOVER_EDIT_TYPE = [AITableFieldType.progress];
+const RowHeight = {
+    Short: 32,
+    Medium: 57,
+    Tall: 104,
+    ExtraTall: 152
+};
+
 const AI_TABLE_GRID_FIELD_SERVICE_MAP = new WeakMap();
 class AITableGridFieldService {
     constructor(thyPopover) {
@@ -437,55 +1015,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
 
 const DividerMenuItem = {
-    id: 'divider'
+    type: 'divider'
 };
 const EditFieldPropertyItem = {
-    id: 'editFieldProperty',
+    type: 'editFieldProperty',
     name: '编辑列',
     icon: 'edit',
     exec: (aiTable, field, origin) => {
         const fieldService = AI_TABLE_GRID_FIELD_SERVICE_MAP.get(aiTable);
-        origin && fieldService?.editFieldProperty(origin, aiTable, field, true);
+        const copyField = signal(JSON.parse(JSON.stringify(field())));
+        origin && fieldService?.editFieldProperty(origin, aiTable, copyField, true);
     }
 };
-const DefaultFieldMenus = [EditFieldPropertyItem];
-
-class AbstractEditCellEditor {
-    constructor() {
-        this.field = input.required();
-        this.record = input.required();
-        this.thyPopoverRef = inject((ThyPopoverRef));
-    }
-    ngOnInit() {
-        this.modelValue = computed(() => {
-            const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
-            return AITableQueries.getFieldValue(this.aiTable, path);
-        })();
+const RemoveFieldItem = {
+    type: 'removeField',
+    name: '删除列',
+    icon: 'trash',
+    exec: (aiTable, field) => {
+        const path = AITableQueries.findPath(aiTable, field());
+        Actions.removeField(aiTable, path);
     }
-    updateFieldValue() {
-        const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
-        Actions.updateFieldValue(this.aiTable, this.modelValue, path);
-    }
-    closePopover() {
-        this.thyPopoverRef.close();
+};
+const DefaultFieldMenus = [EditFieldPropertyItem, RemoveFieldItem];
+
+class SelectOptionPipe {
+    transform(_id, options) {
+        return options.find((item) => item._id === _id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectOptionPipe, decorators: [{
+            type: Pipe,
             args: [{
-                    selector: 'abstract-edit-cell',
-                    template: ``,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
+                    name: 'selectOption',
+                    standalone: true
                 }]
-        }], propDecorators: { aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }] } });
+        }] });
+class IsSelectRecordPipe {
+    transform(recordId, selection) {
+        return selection.selectedRecords.has(recordId);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.0.2", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'isSelectRecord',
+                    standalone: true
+                }]
+        }] });
 
-class SingleSelectCellEditorComponent extends AbstractEditCellEditor {
+class SelectCellEditorComponent extends AbstractEditCellEditor {
     constructor() {
         super();
         this.selectOptions = computed(() => {
@@ -498,17 +1080,17 @@ class SingleSelectCellEditorComponent extends AbstractEditCellEditor {
             this.closePopover();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SingleSelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: SingleSelectCellEditorComponent, isStandalone: true, selector: "single-select-cell-editor", host: { classAttribute: "d-block h-100" }, usesInheritance: true, ngImport: i0, template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
-        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: SelectCellEditorComponent, isStandalone: true, selector: "single-select-cell-editor", inputs: { isMultiple: "isMultiple" }, host: { classAttribute: "d-block h-100" }, usesInheritance: true, ngImport: i0, template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
+        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option._id" [thyLabelText]="option.text"> </thy-option>
     </thy-select> `, isInline: true, dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SingleSelectCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'single-select-cell-editor',
                     template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
-        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
+        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option._id" [thyLabelText]="option.text"> </thy-option>
     </thy-select> `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -517,200 +1099,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     },
                     imports: [NgIf, NgForOf, FormsModule, ThySelect, ThyOption, ThyTag, ThyIcon]
                 }]
-        }], ctorParameters: () => [] });
-
-class TextCellEditorComponent extends AbstractEditCellEditor {
-    updateValue() {
-        this.updateFieldValue();
-        this.closePopover();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", usesInheritance: true, ngImport: i0, template: `<input
-        thyInput
-        [thyAutofocus]="true"
-        [(ngModel)]="modelValue"
-        (thyEnter)="updateValue()"
-        (blur)="updateValue()"
-        placeholder=""
-    /> `, isInline: true, 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: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'text-cell-editor',
-                    template: `<input
-        thyInput
-        [thyAutofocus]="true"
-        [(ngModel)]="modelValue"
-        (thyEnter)="updateValue()"
-        (blur)="updateValue()"
-        placeholder=""
-    /> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [NgIf, FormsModule, ThyAutofocusDirective, ThyInputDirective, ThyEnterDirective]
-                }]
-        }] });
-
-class NumberCellEditorComponent extends AbstractEditCellEditor {
-    updateValue() {
-        this.updateFieldValue();
-        this.closePopover();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", usesInheritance: true, ngImport: i0, template: `<thy-input-number
-        class="h-100"
-        [thyAutoFocus]="true"
-        [(ngModel)]="modelValue"
-        (thyEnter)="updateValue()"
-        (thyBlur)="updateValue()"
-        placeholder=""
-    /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'number-cell-editor',
-                    template: `<thy-input-number
-        class="h-100"
-        [thyAutoFocus]="true"
-        [(ngModel)]="modelValue"
-        (thyEnter)="updateValue()"
-        (thyBlur)="updateValue()"
-        placeholder=""
-    /> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber]
-                }]
-        }] });
-
-class DateTimeCellEditorComponent extends AbstractEditCellEditor {
-    constructor() {
-        super(...arguments);
-        this.dateShowTime = input(false);
-        this.dateFormat = computed(() => {
-            return this.dateShowTime() ? 'yyyy-MM-dd HH:mm' : 'yyyy-MM-dd';
-        })();
-    }
-    ngOnInit() {
-        super.ngOnInit();
-        if (!this.modelValue && this.dateShowTime()) {
-            this.modelValue = {
-                date: 0,
-                with_time: 1
-            };
-        }
-    }
-    updateValue() {
-        this.updateFieldValue();
-        this.closePopover();
-    }
-    thyOpenChange(isOpen) {
-        if (!isOpen) {
-            this.closePopover();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DateTimeCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: DateTimeCellEditorComponent, isStandalone: true, selector: "date-time-cell-editor", inputs: { dateShowTime: { classPropertyName: "dateShowTime", publicName: "dateShowTime", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "date-time-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
-        <thy-date-picker
-            class="h-100"
-            thyTimestampPrecision="milliseconds"
-            thyPlaceHolder="选择时间"
-            [(ngModel)]="modelValue"
-            (ngModelChange)="updateValue()"
-            (thyOpenChange)="thyOpenChange($event)"
-            [thyAllowClear]="true"
-            [thyShowShortcut]="true"
-            [thyHasBackdrop]="false"
-            [thyShowTime]="dateShowTime()"
-            [thyOpen]="true"
-            [thyFormat]="dateFormat"
-        >
-        </thy-date-picker>
-    `, isInline: true, dependencies: [{ 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: "component", type: ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "ngmodule", type: ThyTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: DateTimeCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'date-time-cell-editor',
-                    template: `
-        <thy-date-picker
-            class="h-100"
-            thyTimestampPrecision="milliseconds"
-            thyPlaceHolder="选择时间"
-            [(ngModel)]="modelValue"
-            (ngModelChange)="updateValue()"
-            (thyOpenChange)="thyOpenChange($event)"
-            [thyAllowClear]="true"
-            [thyShowShortcut]="true"
-            [thyHasBackdrop]="false"
-            [thyShowTime]="dateShowTime()"
-            [thyOpen]="true"
-            [thyFormat]="dateFormat"
-        >
-        </thy-date-picker>
-    `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyDatePicker, ThyTimePickerModule],
-                    host: {
-                        class: 'date-time-cell-editor'
-                    }
-                }]
-        }] });
-
-class RatingCellEditorComponent extends AbstractEditCellEditor {
-    updateValue() {
-        this.updateFieldValue();
-        this.closePopover();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RatingCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: RatingCellEditorComponent, isStandalone: true, selector: "rating-cell-editor", usesInheritance: true, ngImport: i0, template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `, isInline: true, dependencies: [{ 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: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "ngmodule", type: ThyTooltipModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: RatingCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'rating-cell-editor',
-                    template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyRate, ThyTooltipModule]
-                }]
-        }] });
-
-class LinkCellEditorComponent extends AbstractEditCellEditor {
-    updateValue() {
-        this.updateFieldValue();
-        this.closePopover();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", usesInheritance: true, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'link-cell-editor',
-                    template: ``,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber]
-                }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { isMultiple: [{
+                type: Input
+            }] } });
 
 const GRID_CELL_EDITOR_MAP = {
-    [AITableFieldType.Text]: TextCellEditorComponent,
-    [AITableFieldType.SingleSelect]: SingleSelectCellEditorComponent,
-    [AITableFieldType.Number]: NumberCellEditorComponent,
-    [AITableFieldType.DateTime]: DateTimeCellEditorComponent,
-    [AITableFieldType.Rating]: RatingCellEditorComponent,
-    [AITableFieldType.Link]: LinkCellEditorComponent
+    [AITableFieldType.text]: TextCellEditorComponent,
+    [AITableFieldType.richText]: TextCellEditorComponent,
+    [AITableFieldType.select]: SelectCellEditorComponent,
+    [AITableFieldType.number]: NumberCellEditorComponent,
+    [AITableFieldType.date]: DateTimeCellEditorComponent,
+    [AITableFieldType.rate]: RatingCellEditorComponent,
+    [AITableFieldType.link]: LinkCellEditorComponent,
+    [AITableFieldType.progress]: ProgressEditorComponent
 };
 
 class AITableGridEventService {
-    constructor(thyPopover) {
-        this.thyPopover = thyPopover;
-        this.takeUntilDestroyed = takeUntilDestroyed();
+    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;
@@ -718,17 +1130,30 @@ class AITableGridEventService {
     }
     registerEvents(element) {
         fromEvent(element, 'dblclick')
-            .pipe(this.takeUntilDestroyed)
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
-            this.dblClick(event);
+            this.dblClickEvent$.next(event);
+        });
+        fromEvent(element, 'mouseover')
+            .pipe(debounceTime(80), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mouseoverEvent$.next(event);
+        });
+        fromEvent(document, 'mouseover')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMouseoverEvent$.next(event);
+        });
+        fromEvent(element, 'mousedown')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mousedownEvent$.next(event);
+        });
+        fromEvent(document, 'mousedown')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMousedownEvent$.next(event);
         });
-    }
-    dblClick(event) {
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && DBL_CLICK_EDIT_TYPE.includes(Number(type))) {
-            this.openEdit(cellDom);
-        }
     }
     getEditorComponent(type) {
         if (this.aiFieldRenderers && this.aiFieldRenderers[type]) {
@@ -743,7 +1168,7 @@ class AITableGridEventService {
         const field = getRecordOrField(this.aiTable.fields, fieldId);
         const record = getRecordOrField(this.aiTable.records, recordId);
         const component = this.getEditorComponent(field().type);
-        this.thyPopover.open(component, {
+        const ref = this.thyPopover.open(component, {
             origin: cellDom,
             originPosition: {
                 x: x - 1,
@@ -751,10 +1176,11 @@ class AITableGridEventService {
                 width: width + 2,
                 height: height + 2
             },
-            width: width + 2 + 'px',
+            width: width + 1 + 'px',
             height: height + 2 + 'px',
             placement: 'top',
             offset: -(height + 4),
+            minWidth: width,
             initialState: {
                 field: field,
                 record: record,
@@ -764,72 +1190,123 @@ class AITableGridEventService {
             outsideClosable: false,
             hasBackdrop: false,
             manualClosure: true,
-            animationDisabled: true
+            animationDisabled: true,
+            autoAdaptive: true
         });
+        return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridEventService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridEventService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridEventService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
+        }] });
 
-class FieldMenu {
-    execute(menu) {
-        const field = signal({ ...this.field });
-        menu.exec && menu.exec(this.aiTable, field, this.origin);
+class AITableGridSelectionService {
+    constructor() { }
+    initialize(aiTable) {
+        this.aiTable = aiTable;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { field: "field", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin" }, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.id === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name! }}</span>\n        </a>\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    clearSelection() {
+        this.aiTable.selection.set({
+            selectedRecords: new Map(),
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        });
+    }
+    selectCell(recordId, fieldId) {
+        this.clearSelection();
+        this.aiTable.selection().selectedCells.set(recordId, { [fieldId]: true });
+    }
+    selectField(fieldId) {
+        this.clearSelection();
+        this.aiTable.selection().selectedFields.set(fieldId, true);
+    }
+    selectRecord(recordId) {
+        if (this.aiTable.selection().selectedRecords.has(recordId)) {
+            this.aiTable.selection().selectedRecords.delete(recordId);
+        }
+        else {
+            this.aiTable.selection().selectedRecords.set(recordId, true);
+        }
+        this.aiTable.selection.set({
+            selectedRecords: this.aiTable.selection().selectedRecords,
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        });
+    }
+    toggleSelectAll(checked) {
+        this.clearSelection();
+        if (checked) {
+            this.aiTable.records().forEach((item) => {
+                this.selectRecord(item._id);
+            });
+        }
+    }
+    updateSelect(event) {
+        const target = event?.target;
+        if (!target) {
+            return;
+        }
+        const cellDom = target.closest('.grid-cell');
+        const colDom = target.closest('.grid-field');
+        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
+        const fieldAction = target.closest('.grid-field-action');
+        if (cellDom) {
+            const fieldId = cellDom.getAttribute('fieldId');
+            const recordId = cellDom.getAttribute('recordId');
+            fieldId && recordId && this.selectCell(recordId, fieldId);
+        }
+        if (colDom && !fieldAction) {
+            const fieldId = colDom.getAttribute('fieldId');
+            fieldId && this.selectField(fieldId);
+        }
+        if (!cellDom && !colDom && !checkbox) {
+            this.clearSelection();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        ThyIcon,
-                        ThyDivider,
-                        ThyDropdownMenuComponent,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective
-                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.id === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name! }}</span>\n        </a>\n    }\n}\n" }]
-        }], propDecorators: { field: [{
-                type: Input,
-                args: [{ required: true }]
-            }], aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }], fieldMenus: [{
-                type: Input,
-                args: [{ required: true }]
-            }], origin: [{
-                type: Input
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
 
 class AITableGrid {
-    constructor(elementRef, aiTableGridEventService, aiTableGridFieldService) {
-        this.elementRef = elementRef;
-        this.aiTableGridEventService = aiTableGridEventService;
-        this.aiTableGridFieldService = aiTableGridFieldService;
+    constructor() {
         this.aiRecords = model.required();
         this.aiFields = model.required();
-        this.aiRowHeight = input();
         this.aiFieldConfig = input();
         this.aiReadonly = input();
+        this.aiPlugins = input();
+        this.aiReferences = input();
         this.AITableFieldType = AITableFieldType;
-        this.takeUntilDestroyed = takeUntilDestroyed();
+        this.isSelectedAll = computed(() => {
+            return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
+        });
         this.onChange = output();
         this.aiTableInitialized = output();
         this.gridData = computed(() => {
-            return buildGridData(this.aiRecords(), this.aiFields());
+            return buildGridData(this.aiRecords(), this.aiFields(), this.aiReferences());
         });
+        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();
         this.buildFieldMenus();
+        this.subscribeEvents();
     }
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
+        this.aiPlugins()?.forEach((plugin) => {
+            this.aiTable = plugin(this.aiTable);
+        });
         this.aiTableInitialized.emit(this.aiTable);
         this.aiTable.onChange = () => {
             this.onChange.emit({
@@ -841,6 +1318,7 @@ class AITableGrid {
     }
     initService() {
         this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldPropertyEditor);
+        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);
@@ -851,12 +1329,63 @@ class AITableGrid {
     addRecord() {
         Actions.addRecord(this.aiTable, getDefaultRecord(this.aiFields()), [this.aiRecords().length]);
     }
+    selectRecord(recordId) {
+        this.aiTableGridSelectionService.selectRecord(recordId);
+    }
+    toggleSelectAll(checked) {
+        this.aiTableGridSelectionService.toggleSelectAll(checked);
+    }
     addField(gridColumnBlank) {
-        const field = signal(createDefaultField(this.aiTable, AITableFieldType.Text));
+        const field = signal(createDefaultField(this.aiTable, AITableFieldType.text));
         this.aiTableGridFieldService.editFieldProperty(gridColumnBlank, this.aiTable, field, false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGrid, deps: [{ token: i0.ElementRef }, { token: AITableGridEventService }, { token: AITableGridFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiRowHeight: { classPropertyName: "aiRowHeight", publicName: "aiRowHeight", 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 } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell grid-field\" #fieldAction>\n            {{ field.name }}\n            <a thyAction thyActiveClass=\"active\" thyIcon=\"more-vertical\" [thyDropdown]=\"fieldMenu\" href=\"javascript:;\">\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [field]=\"field\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\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\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\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: "ngmodule", type: CommonModule }, { 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: "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: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "ngmodule", type: ThyTooltipModule }, { 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: FieldMenu, selector: "field-menu", inputs: ["field", "aiTable", "fieldMenus", "origin"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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');
+        const readonly = cellDom && cellDom.getAttribute('readonly');
+        if (type && !readonly && 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.0.2", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, 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: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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                class=\"grid-field-action\"\n                thyAction\n                thyActiveClass=\"active\"\n                thyIcon=\"more-vertical\"\n                [thyDropdown]=\"fieldMenu\"\n                href=\"javascript:;\"\n            >\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [fieldId]=\"field._id\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\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                <div\n                    #cell\n                    class=\"grid-cell\"\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                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.readonly]=\"[field?.readonly]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @if (!field.isMultiple && record.values[field._id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.text }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id] | 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]\"\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] }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @if (!field.isMultiple) {\n                                <thy-avatar\n                                    [thyName]=\"record.values[field._id].display_name\"\n                                    [thySrc]=\"record.values[field._id].avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            } @else {\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of record.values[field._id]; 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                            <thy-avatar\n                                [thyName]=\"record.values[field._id].display_name\"\n                                [thySrc]=\"record.values[field._id].avatar\"\n                                thySize=\"xs\"\n                                thyShowName=\"true\"\n                            ></thy-avatar>\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            <thy-avatar\n                                [thyName]=\"record.values[field._id].display_name\"\n                                [thySrc]=\"record.values[field._id].avatar\"\n                                thySize=\"xs\"\n                                thyShowName=\"true\"\n                            ></thy-avatar>\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>", 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: "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: FieldMenu, selector: "field-menu", inputs: ["fieldId", "aiTable", "fieldMenus", "origin"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3.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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
@@ -873,29 +1402,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         ThyPopoverModule,
                         ThyIcon,
                         ThyRate,
+                        ThyProgress,
                         AITableFieldPropertyEditor,
                         ThyDatePickerFormatPipe,
-                        ThyTooltipModule,
                         ThyFlexibleText,
                         ThyStopPropagationDirective,
                         FieldMenu,
                         ThyAction,
                         ThyDropdownDirective,
-                        ThyDropdownMenuComponent
-                    ], providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell grid-field\" #fieldAction>\n            {{ field.name }}\n            <a thyAction thyActiveClass=\"active\" thyIcon=\"more-vertical\" [thyDropdown]=\"fieldMenu\" href=\"javascript:;\">\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [field]=\"field\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\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\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\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" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AITableGridEventService }, { type: AITableGridFieldService }] });
-
-var AITableRowHeight;
-(function (AITableRowHeight) {
-    AITableRowHeight[AITableRowHeight["Short"] = 1] = "Short";
-    AITableRowHeight[AITableRowHeight["Medium"] = 2] = "Medium";
-    AITableRowHeight[AITableRowHeight["Tall"] = 3] = "Tall";
-    AITableRowHeight[AITableRowHeight["ExtraTall"] = 4] = "ExtraTall";
-})(AITableRowHeight || (AITableRowHeight = {}));
+                        ThyDropdownMenuComponent,
+                        ThyCheckboxModule,
+                        ProgressEditorComponent,
+                        ThyAvatarModule,
+                        NgTemplateOutlet,
+                        IsSelectRecordPipe
+                    ], 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                class=\"grid-field-action\"\n                thyAction\n                thyActiveClass=\"active\"\n                thyIcon=\"more-vertical\"\n                [thyDropdown]=\"fieldMenu\"\n                href=\"javascript:;\"\n            >\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [fieldId]=\"field._id\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\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                <div\n                    #cell\n                    class=\"grid-cell\"\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                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.readonly]=\"[field?.readonly]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @if (!field.isMultiple && record.values[field._id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.text }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id] | 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]\"\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] }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @if (!field.isMultiple) {\n                                <thy-avatar\n                                    [thyName]=\"record.values[field._id].display_name\"\n                                    [thySrc]=\"record.values[field._id].avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            } @else {\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of record.values[field._id]; 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                            <thy-avatar\n                                [thyName]=\"record.values[field._id].display_name\"\n                                [thySrc]=\"record.values[field._id].avatar\"\n                                thySize=\"xs\"\n                                thyShowName=\"true\"\n                            ></thy-avatar>\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            <thy-avatar\n                                [thyName]=\"record.values[field._id].display_name\"\n                                [thySrc]=\"record.values[field._id].avatar\"\n                                thySize=\"xs\"\n                                thyShowName=\"true\"\n                            ></thy-avatar>\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>" }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableQueries, AITableRowHeight, AITableStatType, ActionName, Actions, BasicFields, DBL_CLICK_EDIT_TYPE, DEFAULT_COLUMN_WIDTH, DefaultFieldMenus, DividerMenuItem, EditFieldPropertyItem, ExecuteType, FLUSHING, Fields, FieldsMap, MIN_COLUMN_WIDTH, RowHeight, SelectOptionPipe, buildGridData, createAITable, createDefaultField, createDefaultFieldName, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator };
+export { AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableQueries, AITableStatType, ActionName, Actions, BasicFields, DBL_CLICK_EDIT_TYPE, DEFAULT_COLUMN_WIDTH, DateTimeCellEditorComponent, DefaultFieldMenus, DividerMenuItem, EditFieldPropertyItem, ExecuteType, FLUSHING, Fields, FieldsMap, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RemoveFieldItem, RowHeight, SelectOptionPipe, TextCellEditorComponent, buildGridData, buildRecordsByReferences, createAITable, createDefaultField, createDefaultFieldName, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator, isPathEqual };
 //# sourceMappingURL=ai-table-grid.mjs.map