@ai-table/grid 0.0.4 → 0.0.6

package/fesm2022/ai-table-grid.mjs

@@ -1,50 +1,39 @@
-import * as i0 from '@angular/core';
-import { Pipe, signal, computed, model, inject, booleanAttribute, Component, ChangeDetectionStrategy, Input, Injectable, input, output } from '@angular/core';
-import * as i4 from '@angular/common';
+import * as i1$2 from '@angular/common';
 import { NgIf, NgTemplateOutlet, NgForOf, NgClass, CommonModule, 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 * as i0 from '@angular/core';
+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 { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
-import { createDraft, finishDraft } from 'immer';
-import { ThyIcon } from 'ngx-tethys/icon';
-import { of, Subject, 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 { ThyAutofocusDirective, ThyEnterDirective, ThyOption, 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 { ThySelect } from 'ngx-tethys/select';
-import { ThyFlexibleText } from 'ngx-tethys/flexible-text';
-import * as i6 from 'ngx-tethys/checkbox';
-import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
+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
-                }]
-        }] });
+import { ThySelect } from 'ngx-tethys/select';
+import * as i4 from 'ngx-tethys/avatar';
+import { ThyAvatarModule } from 'ngx-tethys/avatar';
 
 var AITableFieldType;
 (function (AITableFieldType) {
@@ -54,10 +43,14 @@ var AITableFieldType;
     AITableFieldType["number"] = "number";
     AITableFieldType["date"] = "date";
     AITableFieldType["member"] = "member";
-    // cascadeSelect = "cascade_select", // 包含单选和多选，参数复杂后续再进行设计
+    // 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) {
@@ -113,16 +106,18 @@ function idCreator(length = 5) {
 const BasicFields = [
     {
         type: AITableFieldType.text,
-        name: '文本',
+        name: '单行文本',
         icon: 'font',
         width: 300
     },
+    // 多行文本
     {
         type: AITableFieldType.select,
         name: '单选',
         icon: 'check-circle',
         width: 200
     },
+    // 多选
     {
         type: AITableFieldType.number,
         name: '数字',
@@ -135,6 +130,20 @@ const BasicFields = [
         icon: 'calendar',
         width: 200
     },
+    {
+        type: AITableFieldType.member,
+        name: '成员',
+        icon: 'user',
+        width: 200
+    },
+    // 级联单选
+    // 级联多选
+    {
+        type: AITableFieldType.progress,
+        name: '进度',
+        icon: 'progress',
+        width: 200
+    },
     {
         type: AITableFieldType.rate,
         name: '评分',
@@ -146,12 +155,39 @@ const BasicFields = [
         name: '链接',
         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];
 const FieldsMap = helpers.keyBy([...BasicFields], 'type');
 
-function getDefaultFieldValue(type) {
+function getDefaultFieldValue(field) {
+    if ([AITableFieldType.member, AITableFieldType.createdBy, AITableFieldType.updatedBy].includes(field.type)) {
+        return [];
+    }
     return '';
 }
 function createDefaultFieldName(aiTable, type = AITableFieldType.text) {
@@ -160,7 +196,7 @@ function createDefaultFieldName(aiTable, type = AITableFieldType.text) {
     return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
 }
 function createDefaultField(aiTable, type = AITableFieldType.text) {
-    return { id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
+    return { _id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
 }
 
 const FLUSHING = new WeakMap();
@@ -197,11 +233,11 @@ function isPathEqual(path, another) {
 
 function getDefaultRecord(fields) {
     const newRow = {
-        id: idCreator(),
+        _id: idCreator(),
         values: {}
     };
     fields.map((item) => {
-        newRow.values[item.id] = getDefaultFieldValue(item.type);
+        newRow.values[item._id] = getDefaultFieldValue(item);
     });
     return newRow;
 }
@@ -238,7 +274,7 @@ const AITableQueries = {
         if (!field) {
             throw new Error(`can not find field at path [${path}]`);
         }
-        return aiTable.records()[path[0]].values[field.id];
+        return aiTable.records()[path[0]].values[field._id];
     },
     getField(aiTable, path) {
         if (!aiTable) {
@@ -317,7 +353,7 @@ const apply = (aiTable, records, fields, options) => {
         case ActionName.UpdateFieldValue: {
             const [recordIndex, fieldIndex] = options.path;
             if (fieldIndex > -1 && recordIndex > -1) {
-                const fieldId = aiTable.fields()[fieldIndex].id;
+                const fieldId = aiTable.fields()[fieldIndex]._id;
                 records[recordIndex].values[fieldId] = options.newFieldValue;
             }
             break;
@@ -335,7 +371,7 @@ const apply = (aiTable, records, fields, options) => {
                 const newField = options.field;
                 fields.splice(fieldIndex, 0, newField);
                 const newRecord = {
-                    [newField.id]: ''
+                    [newField._id]: ''
                 };
                 records.forEach((item) => {
                     item.values = {
@@ -367,7 +403,7 @@ const apply = (aiTable, records, fields, options) => {
         case ActionName.RemoveField: {
             const [fieldIndex] = options.path;
             if (fieldIndex > -1) {
-                const fieldId = aiTable.fields()[fieldIndex].id;
+                const fieldId = aiTable.fields()[fieldIndex]._id;
                 fields.splice(fieldIndex, 1);
                 records.forEach((item) => {
                     delete item.values[fieldId];
@@ -460,173 +496,6 @@ const Actions = {
     ...FieldActions
 };
 
-const buildGridData = (recordValue, fieldsValue, selection) => {
-    return {
-        type: 'grid',
-        fields: fieldsValue.map(item => {
-            return {
-                ...item,
-                icon: item.icon || FieldsMap[item.type].icon,
-                width: item.width || FieldsMap[item.type].width
-            };
-        }),
-        records: recordValue.map((item) => {
-            return { ...item, checked: selection.selectedRecords.has(item.id) };
-        })
-    };
-};
-
-function getRecordOrField(value, id) {
-    return computed(() => {
-        return value().find((item) => item.id === id);
-    });
-}
-
-const DEFAULT_COLUMN_WIDTH = 200;
-const MIN_COLUMN_WIDTH = 80;
-const DBL_CLICK_EDIT_TYPE = [
-    AITableFieldType.text,
-    AITableFieldType.number,
-    AITableFieldType.select,
-    AITableFieldType.date
-];
-const RowHeight = {
-    Short: 32,
-    Medium: 57,
-    Tall: 104,
-    ExtraTall: 152
-};
-
-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) {
-            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]);
-        }
-        this.thyPopoverRef.close();
-    }
-    cancel() {
-        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]=\"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 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"] }, { 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,
-            args: [{ selector: 'ai-table-field-property-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        NgForOf,
-                        FormsModule,
-                        ThyIcon,
-                        ThyInput,
-                        ThyInputGroup,
-                        ThyInputCount,
-                        ThyInputDirective,
-                        ThyConfirmValidatorDirective,
-                        ThyUniqueCheckValidator,
-                        ThyDropdownDirective,
-                        ThyDropdownMenuComponent,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        ThyButton,
-                        ThyFormModule,
-                        ThyListItem,
-                        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]=\"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 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"] }]
-        }], ctorParameters: () => [], propDecorators: { aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }], aiExternalTemplate: [{
-                type: Input
-            }], isUpdate: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }] } });
-
-const AI_TABLE_GRID_FIELD_SERVICE_MAP = new WeakMap();
-class AITableGridFieldService {
-    constructor(thyPopover) {
-        this.thyPopover = thyPopover;
-    }
-    initAIFieldConfig(aiFieldConfig) {
-        this.aiFieldConfig = aiFieldConfig;
-    }
-    editFieldProperty(origin, aiTable, aiField, isUpdate) {
-        const component = this.aiFieldConfig?.fieldPropertyEditor ?? AITableFieldPropertyEditor;
-        this.thyPopover.open(component, {
-            origin: origin,
-            manualClosure: true,
-            placement: 'bottomLeft',
-            initialState: {
-                aiTable,
-                aiField,
-                isUpdate
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
-
-const DividerMenuItem = {
-    id: 'divider'
-};
-const EditFieldPropertyItem = {
-    id: 'editFieldProperty',
-    name: '编辑列',
-    icon: 'edit',
-    exec: (aiTable, field, origin) => {
-        const fieldService = AI_TABLE_GRID_FIELD_SERVICE_MAP.get(aiTable);
-        const copyField = signal(JSON.parse(JSON.stringify(field())));
-        origin && fieldService?.editFieldProperty(origin, aiTable, copyField, true);
-    }
-};
-const RemoveFieldItem = {
-    id: 'removeField',
-    name: '删除列',
-    icon: 'trash',
-    exec: (aiTable, field) => {
-        const path = AITableQueries.findPath(aiTable, field());
-        Actions.removeField(aiTable, path);
-    }
-};
-const DefaultFieldMenus = [EditFieldPropertyItem, RemoveFieldItem];
-
 class AbstractEditCellEditor {
     constructor() {
         this.field = input.required();
@@ -644,7 +513,7 @@ class AbstractEditCellEditor {
         Actions.updateFieldValue(this.aiTable, this.modelValue, path);
     }
     closePopover() {
-        this.thyPopoverRef.close();
+        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 }); }
@@ -662,88 +531,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 args: [{ required: true }]
             }] } });
 
-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
-            };
-        }
+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();
@@ -803,13 +606,134 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
-class RatingCellEditorComponent extends AbstractEditCellEditor {
+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", 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 }); }
+    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,
@@ -818,26 +742,326 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="updateValue()"></thy-rate> `,
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyRate, ThyTooltipModule]
+                    imports: [FormsModule, ThyRate],
+                    host: {
+                        class: 'd-flex align-items-center h-100 px-3'
+                    }
                 }]
         }] });
 
-class LinkCellEditorComponent extends AbstractEditCellEditor {
+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: 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 }); }
+    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: LinkCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: TextCellEditorComponent, decorators: [{
             type: Component,
             args: [{
-                    selector: 'link-cell-editor',
-                    template: ``,
+                    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: [FormsModule, ThyAutofocusDirective, ThyEnterDirective, ThyInputNumber]
+                    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) {
+            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]);
+        }
+        this.thyPopoverRef.close();
+    }
+    cancel() {
+        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]=\"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,
+            args: [{ selector: 'ai-table-field-property-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        NgIf,
+                        NgForOf,
+                        FormsModule,
+                        ThyIcon,
+                        ThyInput,
+                        ThyInputGroup,
+                        ThyInputCount,
+                        ThyInputDirective,
+                        ThyConfirmValidatorDirective,
+                        ThyUniqueCheckValidator,
+                        ThyDropdownDirective,
+                        ThyDropdownMenuComponent,
+                        ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuItemNameDirective,
+                        ThyDropdownMenuItemIconDirective,
+                        ThyButton,
+                        ThyFormModule,
+                        ThyListItem,
+                        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]=\"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 }]
+            }], aiExternalTemplate: [{
+                type: Input
+            }], isUpdate: [{
+                type: Input,
+                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];
+                record.values[field._id] = value.map((uid) => uidToMember[uid]).filter(Boolean);
+            });
+        });
+        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) {
+        this.thyPopover = thyPopover;
+    }
+    initAIFieldConfig(aiFieldConfig) {
+        this.aiFieldConfig = aiFieldConfig;
+    }
+    editFieldProperty(origin, aiTable, aiField, isUpdate) {
+        const component = this.aiFieldConfig?.fieldPropertyEditor ?? AITableFieldPropertyEditor;
+        this.thyPopover.open(component, {
+            origin: origin,
+            manualClosure: true,
+            placement: 'bottomLeft',
+            initialState: {
+                aiTable,
+                aiField,
+                isUpdate
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridFieldService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
+
+const DividerMenuItem = {
+    type: 'divider'
+};
+const EditFieldPropertyItem = {
+    type: 'editFieldProperty',
+    name: '编辑列',
+    icon: 'edit',
+    exec: (aiTable, field, origin) => {
+        const fieldService = AI_TABLE_GRID_FIELD_SERVICE_MAP.get(aiTable);
+        const copyField = signal(JSON.parse(JSON.stringify(field())));
+        origin && fieldService?.editFieldProperty(origin, aiTable, copyField, true);
+    }
+};
+const RemoveFieldItem = {
+    type: 'removeField',
+    name: '删除列',
+    icon: 'trash',
+    exec: (aiTable, field) => {
+        const path = AITableQueries.findPath(aiTable, field());
+        Actions.removeField(aiTable, path);
+    }
+};
+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: 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
+                }]
+        }] });
+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
                 }]
         }] });
 
@@ -856,7 +1080,7 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
     }
     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.name"> </thy-option>
+        <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: SelectCellEditorComponent, decorators: [{
@@ -864,7 +1088,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             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,
@@ -879,18 +1103,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
 
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
+    [AITableFieldType.richText]: TextCellEditorComponent,
     [AITableFieldType.select]: SelectCellEditorComponent,
     [AITableFieldType.number]: NumberCellEditorComponent,
     [AITableFieldType.date]: DateTimeCellEditorComponent,
     [AITableFieldType.rate]: RatingCellEditorComponent,
-    [AITableFieldType.link]: LinkCellEditorComponent
+    [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;
@@ -898,22 +1128,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(this.takeUntilDestroyed)
+            .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((event) => {
             this.mousedownEvent$.next(event);
         });
-    }
-    dblClick(event) {
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
-            this.openEdit(cellDom);
-        }
+        fromEvent(document, 'mousedown')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMousedownEvent$.next(event);
+        });
     }
     getEditorComponent(type) {
         if (this.aiFieldRenderers && this.aiFieldRenderers[type]) {
@@ -928,7 +1166,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,
@@ -936,7 +1174,7 @@ 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),
@@ -950,46 +1188,17 @@ 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 = 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.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 }); }
-}
-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: { fieldId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }], fieldMenus: [{
-                type: Input,
-                args: [{ required: true }]
-            }], origin: [{
-                type: Input
-            }] } });
+        }] });
 
 class AITableGridSelectionService {
     constructor() { }
@@ -1028,23 +1237,31 @@ class AITableGridSelectionService {
         this.clearSelection();
         if (checked) {
             this.aiTable.records().forEach((item) => {
-                this.selectRecord(item.id);
+                this.selectRecord(item._id);
             });
         }
     }
     updateSelect(event) {
-        const target = event.target;
+        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) {
+        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 }); }
@@ -1054,40 +1271,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
         }], ctorParameters: () => [] });
 
 class AITableGrid {
-    get isSelectedAll() {
-        return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
-    }
-    constructor(elementRef, aiTableGridEventService, aiTableGridSelectionService, aiTableGridFieldService, ngZone) {
-        this.elementRef = elementRef;
-        this.aiTableGridEventService = aiTableGridEventService;
-        this.aiTableGridSelectionService = aiTableGridSelectionService;
-        this.aiTableGridFieldService = aiTableGridFieldService;
-        this.ngZone = ngZone;
+    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(), this.aiTable.selection());
+            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.ngZone.runOutsideAngular(() => {
-            this.aiTableGridEventService.mousedownEvent$.pipe(this.takeUntilDestroyed).subscribe((event) => {
-                if (event?.target) {
-                    this.aiTableGridSelectionService.updateSelect(event);
-                }
-            });
-        });
+        this.subscribeEvents();
     }
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
@@ -1126,8 +1337,53 @@ class AITableGrid {
         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: AITableGridSelectionService }, { token: AITableGridFieldService }, { token: i0.NgZone }], 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 }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\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: aiTable.selection().selectedRecords.has(record.id) }\">\n            <div class=\"grid-row-index\">\n                <label\n                    [ngClass]=\"record.checked ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record.checked\"\n                    (ngModelChange)=\"selectRecord(record.id)\"\n                ></label>\n                <span [ngClass]=\"record.checked ? 'grid-row-no-number' : 'grid-row-number'\"> {{ index + 1 }} </span>\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div\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.recordId]=\"[record.id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                    #cell\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.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field.id] | thyDatePickerFormat }}\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                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field.id]?.text\"\n                                [href]=\"record.values[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.values[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field.id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.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: "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: ["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: i6.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }], 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!.bg_color! || 'default'\">{{\n                                    selectedOption.text\n                                }}</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                                @if (record.values[field._id][0]; as recordValue) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValue.display_name\"\n                                        [thySrc]=\"recordValue.avatar\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\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                            @if (record.values[field._id][0]; as recordValue) {\n                                <thy-avatar\n                                    [thyName]=\"recordValue.display_name\"\n                                    [thySrc]=\"recordValue.avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @if (record.values[field._id][0]; as recordValue) {\n                                <thy-avatar\n                                    [thyName]=\"recordValue.display_name\"\n                                    [thySrc]=\"recordValue.avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "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,
@@ -1144,30 +1400,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,
-                        ThyCheckboxModule
-                    ], providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\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: aiTable.selection().selectedRecords.has(record.id) }\">\n            <div class=\"grid-row-index\">\n                <label\n                    [ngClass]=\"record.checked ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record.checked\"\n                    (ngModelChange)=\"selectRecord(record.id)\"\n                ></label>\n                <span [ngClass]=\"record.checked ? 'grid-row-no-number' : 'grid-row-number'\"> {{ index + 1 }} </span>\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div\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.recordId]=\"[record.id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                    #cell\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.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field.id] | thyDatePickerFormat }}\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                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field.id]?.text\"\n                                [href]=\"record.values[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.values[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field.id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AITableGridEventService }, { type: AITableGridSelectionService }, { type: AITableGridFieldService }, { type: i0.NgZone }] });
-
-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 = {}));
+                        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!.bg_color! || 'default'\">{{\n                                    selectedOption.text\n                                }}</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                                @if (record.values[field._id][0]; as recordValue) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValue.display_name\"\n                                        [thySrc]=\"recordValue.avatar\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\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                            @if (record.values[field._id][0]; as recordValue) {\n                                <thy-avatar\n                                    [thyName]=\"recordValue.display_name\"\n                                    [thySrc]=\"recordValue.avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @if (record.values[field._id][0]; as recordValue) {\n                                <thy-avatar\n                                    [thyName]=\"recordValue.display_name\"\n                                    [thySrc]=\"recordValue.avatar\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
+        }] });
 
 /**
  * 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, RemoveFieldItem, RowHeight, SelectOptionPipe, buildGridData, createAITable, createDefaultField, createDefaultFieldName, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator, isPathEqual };
+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