@ai-table/grid 0.0.2 → 0.0.4

package/fesm2022/ai-table-grid.mjs

@@ -1,32 +1,36 @@
 import * as i0 from '@angular/core';
-import { Pipe, computed, input, inject, Component, ChangeDetectionStrategy, signal, Injectable, Input, model, output } from '@angular/core';
-import { NgForOf, NgIf, CommonModule, NgClass, NgComponentOutlet } from '@angular/common';
+import { Pipe, signal, computed, model, inject, booleanAttribute, Component, ChangeDetectionStrategy, Input, Injectable, input, output } from '@angular/core';
+import * as i4 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 { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
 import { createDraft, finishDraft } from 'immer';
-import { isUndefinedOrNull, helpers } from 'ngx-tethys/util';
 import { ThyIcon } from 'ngx-tethys/icon';
-import { fromEvent, of } from 'rxjs';
+import { of, Subject, fromEvent } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ThySelect } from 'ngx-tethys/select';
-import { ThyOption, ThyAutofocusDirective, ThyEnterDirective, ThyStopPropagationDirective } from 'ngx-tethys/shared';
-import { ThyInputDirective, ThyInputGroup, ThyInputCount, ThyInput } from 'ngx-tethys/input';
-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 { ThyInputGroup, ThyInputCount, ThyInputDirective, 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 { ThyDivider } from 'ngx-tethys/divider';
+import { ThyAction } from 'ngx-tethys/action';
 
-;
 class SelectOptionPipe {
     transform(id, options) {
         return options.find((item) => item.id === id);
@@ -42,36 +46,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
-;
-const buildGridData = (recordValue, fieldsValue) => {
-    return {
-        type: 'grid',
-        fields: fieldsValue,
-        records: recordValue
-    };
-};
-
-function getRecordOrField(value, id) {
-    return computed(() => {
-        return value().find((item) => item.id === id);
-    });
-}
-
 var AITableFieldType;
 (function (AITableFieldType) {
-    // NotSupport = 0,
-    AITableFieldType[AITableFieldType["Text"] = 1] = "Text";
-    AITableFieldType[AITableFieldType["Number"] = 2] = "Number";
-    AITableFieldType[AITableFieldType["SingleSelect"] = 3] = "SingleSelect";
-    // MultiSelect = 4,
-    AITableFieldType[AITableFieldType["DateTime"] = 5] = "DateTime";
-    // Attachment = 6,
-    AITableFieldType[AITableFieldType["Link"] = 7] = "Link";
-    // Email = 9,
-    // Phone = 10,
-    // Checkbox = 11,
-    AITableFieldType[AITableFieldType["Rating"] = 12] = "Rating";
-    // Member = 13
+    AITableFieldType["text"] = "text";
+    AITableFieldType["richText"] = "rich_text";
+    AITableFieldType["select"] = "select";
+    AITableFieldType["number"] = "number";
+    AITableFieldType["date"] = "date";
+    AITableFieldType["member"] = "member";
+    // cascadeSelect = "cascade_select", // 包含单选和多选，参数复杂后续再进行设计
+    AITableFieldType["progress"] = "progress";
+    AITableFieldType["rate"] = "rate";
+    AITableFieldType["link"] = "link";
 })(AITableFieldType || (AITableFieldType = {}));
 var AITableStatType;
 (function (AITableStatType) {
@@ -100,6 +86,11 @@ var ActionName;
     ActionName["UpdateFieldValue"] = "update_field_value";
     ActionName["AddRecord"] = "add_record";
     ActionName["AddField"] = "add_field";
+    ActionName["MoveField"] = "move_field";
+    ActionName["MoveRecord"] = "move_record";
+    ActionName["RemoveField"] = "remove_field";
+    ActionName["RemoveRecord"] = "remove_record";
+    ActionName["SetField"] = "set_field";
 })(ActionName || (ActionName = {}));
 var ExecuteType;
 (function (ExecuteType) {
@@ -108,65 +99,6 @@ var ExecuteType;
     ExecuteType[ExecuteType["Redo"] = 2] = "Redo";
 })(ExecuteType || (ExecuteType = {}));
 
-function addField(aiTable, field, path) {
-    const operation = {
-        type: ActionName.AddField,
-        field,
-        path
-    };
-    aiTable.apply(operation);
-}
-const FieldActions = {
-    addField
-};
-
-const apply = (aiTable, records, fields, options) => {
-    switch (options.type) {
-        case ActionName.UpdateFieldValue: {
-            const [recordIndex, fieldIndex] = options.path;
-            const fieldId = aiTable.fields()[fieldIndex].id;
-            records[recordIndex].value[fieldId] = options.newFieldValue;
-            break;
-        }
-        case ActionName.AddRecord: {
-            const [recordIndex] = options.path;
-            records.splice(recordIndex, 0, options.record);
-            break;
-        }
-        case ActionName.AddField: {
-            const [fieldIndex] = options.path;
-            const newField = options.field;
-            fields.splice(fieldIndex, 0, newField);
-            const newRecord = {
-                [newField.id]: ''
-            };
-            records.forEach((item) => {
-                item.value = {
-                    ...item.value,
-                    ...newRecord
-                };
-            });
-        }
-    }
-    return {
-        records,
-        fields
-    };
-};
-const GeneralActions = {
-    transform(aiTable, op) {
-        const records = createDraft(aiTable.records());
-        const fields = createDraft(aiTable.fields());
-        apply(aiTable, records, fields, op);
-        aiTable.fields.update(() => {
-            return finishDraft(fields);
-        });
-        aiTable.records.update(() => {
-            return finishDraft(records);
-        });
-    }
-};
-
 function idCreator(length = 5) {
     // remove numeral
     const $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz'; /**** Easily confusing characters are removed by default oOLl,9gq,Vv,Uu,I1****/
@@ -178,9 +110,58 @@ function idCreator(length = 5) {
     return key;
 }
 
+const BasicFields = [
+    {
+        type: AITableFieldType.text,
+        name: '文本',
+        icon: 'font',
+        width: 300
+    },
+    {
+        type: AITableFieldType.select,
+        name: '单选',
+        icon: 'check-circle',
+        width: 200
+    },
+    {
+        type: AITableFieldType.number,
+        name: '数字',
+        icon: 'hashtag',
+        width: 200
+    },
+    {
+        type: AITableFieldType.date,
+        name: '日期',
+        icon: 'calendar',
+        width: 200
+    },
+    {
+        type: AITableFieldType.rate,
+        name: '评分',
+        icon: 'star-circle',
+        width: 200
+    },
+    {
+        type: AITableFieldType.link,
+        name: '链接',
+        icon: 'link-insert',
+        width: 300
+    }
+];
+const Fields = [...BasicFields];
+const FieldsMap = helpers.keyBy([...BasicFields], 'type');
+
 function getDefaultFieldValue(type) {
     return '';
 }
+function createDefaultFieldName(aiTable, type = AITableFieldType.text) {
+    const fields = aiTable.fields();
+    const count = fields.filter((item) => item.type === type).length;
+    return count === 0 ? FieldsMap[type].name : FieldsMap[type].name + count;
+}
+function createDefaultField(aiTable, type = AITableFieldType.text) {
+    return { id: idCreator(), type, name: createDefaultFieldName(aiTable, type) };
+}
 
 const FLUSHING = new WeakMap();
 
@@ -189,6 +170,11 @@ function createAITable(records, fields) {
         records,
         fields,
         actions: [],
+        selection: signal({
+            selectedRecords: new Map(),
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        }),
         onChange: () => { },
         apply: (action) => {
             aiTable.actions.push(action);
@@ -205,14 +191,17 @@ function createAITable(records, fields) {
     };
     return aiTable;
 }
+function isPathEqual(path, another) {
+    return path.length === another.length && path.every((n, i) => n === another[i]);
+}
 
 function getDefaultRecord(fields) {
     const newRow = {
         id: idCreator(),
-        value: {}
+        values: {}
     };
     fields.map((item) => {
-        newRow.value[item.id] = getDefaultFieldValue(item.type);
+        newRow.values[item.id] = getDefaultFieldValue(item.type);
     });
     return newRow;
 }
@@ -230,23 +219,205 @@ const AITableQueries = {
         if (!isUndefinedOrNull(fieldIndex) && fieldIndex > -1) {
             return [fieldIndex];
         }
-        throw new Error(`Unable to find the path: ${JSON.stringify({ ...(field || {}), ...(record || {}) })}`);
+        throw new Error(`can not find the path: ${JSON.stringify({ ...(field || {}), ...(record || {}) })}`);
     },
     getFieldValue(aiTable, path) {
-        if (!aiTable || !aiTable.records() || !aiTable.fields()) {
-            throw new Error(`Cannot find a descendant at path [${path}]`);
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!aiTable.records()) {
+            throw new Error(`aiTable has no records`);
+        }
+        if (!aiTable.fields()) {
+            throw new Error(`aiTable has no fields`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
+        }
+        const field = aiTable.fields()[path[1]];
+        if (!field) {
+            throw new Error(`can not find field at path [${path}]`);
+        }
+        return aiTable.records()[path[0]].values[field.id];
+    },
+    getField(aiTable, path) {
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
         }
-        const fieldId = aiTable.fields()[path[1]].id;
-        return aiTable.records()[path[0]].value[fieldId];
+        return aiTable.fields()[path[0]];
+    },
+    getRecord(aiTable, path) {
+        if (!aiTable) {
+            throw new Error(`aiTable does not exist`);
+        }
+        if (!path) {
+            throw new Error(`path does not exist as path [${path}]`);
+        }
+        return aiTable.records()[path[0]];
+    }
+};
+
+function addField(aiTable, field, path) {
+    const operation = {
+        type: ActionName.AddField,
+        field,
+        path
+    };
+    aiTable.apply(operation);
+}
+function moveField(aiTable, path, newPath) {
+    const operation = {
+        type: ActionName.MoveField,
+        path,
+        newPath
+    };
+    aiTable.apply(operation);
+}
+function removeField(aiTable, path) {
+    const operation = {
+        type: ActionName.RemoveField,
+        path
+    };
+    aiTable.apply(operation);
+}
+function setField(aiTable, value, path) {
+    const field = AITableQueries.getField(aiTable, path);
+    if (field) {
+        const oldField = {};
+        const newField = {};
+        for (const k in value) {
+            if (field[k] !== value[k]) {
+                if (field.hasOwnProperty(k)) {
+                    oldField[k] = field[k];
+                }
+                newField[k] = value[k];
+            }
+        }
+        const operation = {
+            type: ActionName.SetField,
+            field: oldField,
+            newField,
+            path
+        };
+        aiTable.apply(operation);
+    }
+}
+const FieldActions = {
+    addField,
+    moveField,
+    removeField,
+    setField
+};
+
+const apply = (aiTable, records, fields, options) => {
+    switch (options.type) {
+        case ActionName.UpdateFieldValue: {
+            const [recordIndex, fieldIndex] = options.path;
+            if (fieldIndex > -1 && recordIndex > -1) {
+                const fieldId = aiTable.fields()[fieldIndex].id;
+                records[recordIndex].values[fieldId] = options.newFieldValue;
+            }
+            break;
+        }
+        case ActionName.AddRecord: {
+            const [recordIndex] = options.path;
+            if (recordIndex > -1) {
+                records.splice(recordIndex, 0, options.record);
+            }
+            break;
+        }
+        case ActionName.AddField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                const newField = options.field;
+                fields.splice(fieldIndex, 0, newField);
+                const newRecord = {
+                    [newField.id]: ''
+                };
+                records.forEach((item) => {
+                    item.values = {
+                        ...item.values,
+                        ...newRecord
+                    };
+                });
+            }
+            break;
+        }
+        case ActionName.MoveRecord: {
+            if (isPathEqual(options.path, options.newPath)) {
+                return;
+            }
+            const record = records[options.path[0]];
+            records.splice(options.path[0], 1);
+            records.splice(options.newPath[0], 0, record);
+            break;
+        }
+        case ActionName.MoveField: {
+            if (isPathEqual(options.path, options.newPath)) {
+                return;
+            }
+            const field = fields[options.path[0]];
+            fields.splice(options.path[0], 1);
+            fields.splice(options.newPath[0], 0, field);
+            break;
+        }
+        case ActionName.RemoveField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                const fieldId = aiTable.fields()[fieldIndex].id;
+                fields.splice(fieldIndex, 1);
+                records.forEach((item) => {
+                    delete item.values[fieldId];
+                });
+            }
+            break;
+        }
+        case ActionName.RemoveRecord: {
+            const [recordIndex] = options.path;
+            if (recordIndex > -1) {
+                records.splice(recordIndex, 1);
+            }
+            break;
+        }
+        case ActionName.SetField: {
+            const [fieldIndex] = options.path;
+            if (fieldIndex > -1) {
+                fields.splice(fieldIndex, 1, {
+                    ...fields[fieldIndex],
+                    ...options.newField
+                });
+            }
+            break;
+        }
+    }
+    return {
+        records,
+        fields
+    };
+};
+const GeneralActions = {
+    transform(aiTable, op) {
+        const records = createDraft(aiTable.records());
+        const fields = createDraft(aiTable.fields());
+        apply(aiTable, records, fields, op);
+        aiTable.fields.update(() => {
+            return finishDraft(fields);
+        });
+        aiTable.records.update(() => {
+            return finishDraft(records);
+        });
     }
 };
 
 function updateFieldValue(aiTable, value, path) {
-    const node = AITableQueries.getFieldValue(aiTable, path);
-    if (node !== value) {
+    const field = AITableQueries.getFieldValue(aiTable, path);
+    if (field !== value) {
         const operation = {
             type: ActionName.UpdateFieldValue,
-            fieldValue: node,
+            fieldValue: field,
             newFieldValue: value,
             path
         };
@@ -261,9 +432,26 @@ function addRecord(aiTable, record, path) {
     };
     aiTable.apply(operation);
 }
+function moveRecord(aiTable, path, newPath) {
+    const operation = {
+        type: ActionName.MoveRecord,
+        path,
+        newPath
+    };
+    aiTable.apply(operation);
+}
+function removeRecord(aiTable, path) {
+    const operation = {
+        type: ActionName.RemoveRecord,
+        path
+    };
+    aiTable.apply(operation);
+}
 const RecordActions = {
     addRecord,
-    updateFieldValue
+    updateFieldValue,
+    moveRecord,
+    removeRecord
 };
 
 const Actions = {
@@ -272,13 +460,35 @@ 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.SingleSelect,
-    AITableFieldType.DateTime
+    AITableFieldType.text,
+    AITableFieldType.number,
+    AITableFieldType.select,
+    AITableFieldType.date
 ];
 const RowHeight = {
     Short: 32,
@@ -287,28 +497,157 @@ const RowHeight = {
     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();
         this.record = input.required();
-        this.aiTable = input.required();
         this.thyPopoverRef = inject((ThyPopoverRef));
     }
     ngOnInit() {
         this.modelValue = computed(() => {
-            const path = AITableQueries.findPath(this.aiTable(), this.field(), this.record());
-            return AITableQueries.getFieldValue(this.aiTable(), path);
+            const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
+            return AITableQueries.getFieldValue(this.aiTable, path);
         })();
     }
     updateFieldValue() {
-        const path = AITableQueries.findPath(this.aiTable(), this.field(), this.record());
-        Actions.updateFieldValue(this.aiTable(), this.modelValue, path);
+        const path = AITableQueries.findPath(this.aiTable, this.field(), this.record());
+        Actions.updateFieldValue(this.aiTable, this.modelValue, path);
     }
     closePopover() {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.2", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null } }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
             type: Component,
@@ -318,41 +657,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
-
-class SingleSelectCellEditorComponent extends AbstractEditCellEditor {
-    constructor() {
-        super();
-        this.selectOptions = computed(() => {
-            return this.field().options;
-        });
-    }
-    updateValue(value) {
-        if (!value) {
-            this.updateFieldValue();
-            this.closePopover();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SingleSelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.0.2", type: SingleSelectCellEditorComponent, isStandalone: true, selector: "single-select-cell-editor", host: { classAttribute: "d-block h-100" }, usesInheritance: true, ngImport: i0, template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
-        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
-    </thy-select> `, isInline: true, dependencies: [{ kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: SingleSelectCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'single-select-cell-editor',
-                    template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
-        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
-    </thy-select> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: {
-                        class: 'd-block h-100'
-                    },
-                    imports: [NgIf, NgForOf, FormsModule, ThySelect, ThyOption, ThyTag, ThyIcon]
-                }]
-        }], ctorParameters: () => [] });
+        }], propDecorators: { aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class TextCellEditorComponent extends AbstractEditCellEditor {
     updateValue() {
@@ -533,19 +841,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                 }]
         }] });
 
+class SelectCellEditorComponent extends AbstractEditCellEditor {
+    constructor() {
+        super();
+        this.selectOptions = computed(() => {
+            return this.field().options;
+        });
+    }
+    updateValue(value) {
+        if (!value) {
+            this.updateFieldValue();
+            this.closePopover();
+        }
+    }
+    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-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: [{
+            type: Component,
+            args: [{
+                    selector: 'single-select-cell-editor',
+                    template: `<thy-select [(ngModel)]="modelValue" [thyAutoExpand]="true" (thyOnExpandStatusChange)="updateValue($event)">
+        <thy-option *ngFor="let option of selectOptions()" [thyValue]="option.id" [thyLabelText]="option.name"> </thy-option>
+    </thy-select> `,
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'd-block h-100'
+                    },
+                    imports: [NgIf, NgForOf, FormsModule, ThySelect, ThyOption, ThyTag, ThyIcon]
+                }]
+        }], ctorParameters: () => [], propDecorators: { isMultiple: [{
+                type: Input
+            }] } });
+
 const GRID_CELL_EDITOR_MAP = {
-    [AITableFieldType.Text]: TextCellEditorComponent,
-    [AITableFieldType.SingleSelect]: SingleSelectCellEditorComponent,
-    [AITableFieldType.Number]: NumberCellEditorComponent,
-    [AITableFieldType.DateTime]: DateTimeCellEditorComponent,
-    [AITableFieldType.Rating]: RatingCellEditorComponent,
-    [AITableFieldType.Link]: LinkCellEditorComponent
+    [AITableFieldType.text]: TextCellEditorComponent,
+    [AITableFieldType.select]: SelectCellEditorComponent,
+    [AITableFieldType.number]: NumberCellEditorComponent,
+    [AITableFieldType.date]: DateTimeCellEditorComponent,
+    [AITableFieldType.rate]: RatingCellEditorComponent,
+    [AITableFieldType.link]: LinkCellEditorComponent
 };
 
 class AITableGridEventService {
     constructor(thyPopover) {
         this.thyPopover = thyPopover;
         this.takeUntilDestroyed = takeUntilDestroyed();
+        this.mousedownEvent$ = new Subject();
     }
     initialize(aiTable, aiFieldRenderers) {
         this.aiTable = aiTable;
@@ -557,17 +902,22 @@ class AITableGridEventService {
             .subscribe((event) => {
             this.dblClick(event);
         });
+        fromEvent(element, 'mousedown')
+            .pipe(this.takeUntilDestroyed)
+            .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(Number(type))) {
+        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
             this.openEdit(cellDom);
         }
     }
     getEditorComponent(type) {
         if (this.aiFieldRenderers && this.aiFieldRenderers[type]) {
-            return this.aiFieldRenderers[type].edit;
+            return this.aiFieldRenderers[type].editor;
         }
         return GRID_CELL_EDITOR_MAP[type];
     }
@@ -590,10 +940,11 @@ class AITableGridEventService {
             height: height + 2 + 'px',
             placement: 'top',
             offset: -(height + 4),
+            minWidth: width,
             initialState: {
                 field: field,
                 record: record,
-                aiTable: signal(this.aiTable)
+                aiTable: this.aiTable
             },
             panelClass: 'grid-cell-editor',
             outsideClosable: false,
@@ -609,132 +960,141 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
 
-const BasicFieldTypes = [
-    {
-        type: AITableFieldType.Text,
-        name: '文本',
-        icon: 'font'
-    },
-    {
-        type: AITableFieldType.SingleSelect,
-        name: '单选',
-        icon: 'check-circle'
-    },
-    {
-        type: AITableFieldType.Number,
-        name: '数字',
-        icon: 'hashtag'
-    },
-    {
-        type: AITableFieldType.DateTime,
-        name: '日期',
-        icon: 'calendar'
-    },
-    {
-        type: AITableFieldType.Rating,
-        name: '评分',
-        icon: 'star-circle'
-    },
-    {
-        type: AITableFieldType.Link,
-        name: '链接',
-        icon: 'link-insert'
+class FieldMenu {
+    execute(menu) {
+        const field = getRecordOrField(this.aiTable.fields, this.fieldId);
+        menu.exec && menu.exec(this.aiTable, field, this.origin);
     }
-];
-const FieldTypes = [...BasicFieldTypes];
-const FieldTypesMap = helpers.keyBy([...FieldTypes], 'type');
-
-class FieldPropertyEditorComponent {
-    constructor() {
-        this.fields = input.required();
-        this.confirmAction = null;
-        this.field = signal({ id: idCreator(), type: AITableFieldType.Text, name: '' });
-        this.fieldType = computed(() => {
-            return FieldTypesMap[this.field().type];
-        });
-        this.fieldMaxLength = 32;
-        this.validatorConfig = {
-            validationMessages: {
-                fieldName: {
-                    required: '列名不能为空',
-                    thyUniqueCheck: '列名已存在'
-                }
-            }
-        };
-        this.selectableFields = FieldTypes;
-        this.thyPopoverRef = inject((ThyPopoverRef));
-        this.checkUniqueName = (fieldName) => {
-            fieldName = fieldName?.trim();
-            return of(!!this.fields()?.find((field) => field.name === fieldName));
-        };
-    }
-    ngOnInit() { }
-    selectFieldType(fieldType) {
-        this.field.update((item) => ({ ...item, type: fieldType }));
-    }
-    addField() {
-        this.confirmAction(this.field());
-        this.thyPopoverRef.close();
-    }
-    cancel() {
-        this.thyPopoverRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldPropertyEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: FieldPropertyEditorComponent, isStandalone: true, selector: "field-property-editor", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, confirmAction: { classPropertyName: "confirmAction", publicName: "confirmAction", isSignal: false, isRequired: true, transformFunction: null } }, host: { classAttribute: "field-property-editor d-block pl-5 pr-5 pb-5 pt-4" }, ngImport: i0, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                thyAutofocus\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"field().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    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"addField()\" 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: "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]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: FieldPropertyEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: FieldMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'field-property-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        NgIf,
-                        NgForOf,
-                        FormsModule,
+            args: [{ selector: 'field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         ThyIcon,
-                        ThyInput,
-                        ThyInputGroup,
-                        ThyInputCount,
-                        ThyInputDirective,
-                        ThyConfirmValidatorDirective,
-                        ThyUniqueCheckValidator,
-                        ThyDropdownDirective,
+                        ThyDivider,
                         ThyDropdownMenuComponent,
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        ThyButton,
-                        ThyFormModule,
-                        ThyListItem
-                    ], host: {
-                        class: 'field-property-editor d-block pl-5 pr-5 pb-5 pt-4'
-                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                thyAutofocus\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"field().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    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"addField()\" 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: { confirmAction: [{
+                        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 AITableGridComponent {
-    constructor(elementRef, aiTableGridEventService, thyPopover) {
+class AITableGridSelectionService {
+    constructor() { }
+    initialize(aiTable) {
+        this.aiTable = aiTable;
+    }
+    clearSelection() {
+        this.aiTable.selection.set({
+            selectedRecords: new Map(),
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        });
+    }
+    selectCell(recordId, fieldId) {
+        this.clearSelection();
+        this.aiTable.selection().selectedCells.set(recordId, { [fieldId]: true });
+    }
+    selectField(fieldId) {
+        this.clearSelection();
+        this.aiTable.selection().selectedFields.set(fieldId, true);
+    }
+    selectRecord(recordId) {
+        if (this.aiTable.selection().selectedRecords.has(recordId)) {
+            this.aiTable.selection().selectedRecords.delete(recordId);
+        }
+        else {
+            this.aiTable.selection().selectedRecords.set(recordId, true);
+        }
+        this.aiTable.selection.set({
+            selectedRecords: this.aiTable.selection().selectedRecords,
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        });
+    }
+    toggleSelectAll(checked) {
+        this.clearSelection();
+        if (checked) {
+            this.aiTable.records().forEach((item) => {
+                this.selectRecord(item.id);
+            });
+        }
+    }
+    updateSelect(event) {
+        const target = event.target;
+        const cellDom = target.closest('.grid-cell');
+        const colDom = target.closest('.grid-field');
+        if (cellDom) {
+            const fieldId = cellDom.getAttribute('fieldId');
+            const recordId = cellDom.getAttribute('recordId');
+            fieldId && recordId && this.selectCell(recordId, fieldId);
+        }
+        if (colDom) {
+            const fieldId = colDom.getAttribute('fieldId');
+            fieldId && this.selectField(fieldId);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridSelectionService, decorators: [{
+            type: Injectable
+        }], 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.thyPopover = thyPopover;
+        this.aiTableGridSelectionService = aiTableGridSelectionService;
+        this.aiTableGridFieldService = aiTableGridFieldService;
+        this.ngZone = ngZone;
         this.aiRecords = model.required();
         this.aiFields = model.required();
         this.aiRowHeight = input();
-        this.aiFieldRenderers = input();
+        this.aiFieldConfig = input();
         this.aiReadonly = input();
+        this.aiPlugins = input();
         this.AITableFieldType = AITableFieldType;
         this.takeUntilDestroyed = takeUntilDestroyed();
         this.onChange = output();
+        this.aiTableInitialized = output();
         this.gridData = computed(() => {
-            return buildGridData(this.aiRecords(), this.aiFields());
+            return buildGridData(this.aiRecords(), this.aiFields(), this.aiTable.selection());
         });
     }
     ngOnInit() {
         this.initAITable();
-        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldRenderers());
-        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
+        this.initService();
+        this.buildFieldMenus();
+        this.ngZone.runOutsideAngular(() => {
+            this.aiTableGridEventService.mousedownEvent$.pipe(this.takeUntilDestroyed).subscribe((event) => {
+                if (event?.target) {
+                    this.aiTableGridSelectionService.updateSelect(event);
+                }
+            });
+        });
     }
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
+        this.aiPlugins()?.forEach((plugin) => {
+            this.aiTable = plugin(this.aiTable);
+        });
+        this.aiTableInitialized.emit(this.aiTable);
         this.aiTable.onChange = () => {
             this.onChange.emit({
                 records: this.aiRecords(),
@@ -743,26 +1103,33 @@ class AITableGridComponent {
             });
         };
     }
+    initService() {
+        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldPropertyEditor);
+        this.aiTableGridSelectionService.initialize(this.aiTable);
+        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
+        this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
+        AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
+    }
+    buildFieldMenus() {
+        this.fieldMenus = this.aiFieldConfig()?.fieldMenus ?? DefaultFieldMenus;
+    }
     addRecord() {
         Actions.addRecord(this.aiTable, getDefaultRecord(this.aiFields()), [this.aiRecords().length]);
     }
-    addField(event) {
-        this.thyPopover.open(FieldPropertyEditorComponent, {
-            origin: event.currentTarget,
-            manualClosure: true,
-            placement: 'bottomLeft',
-            initialState: {
-                fields: this.aiFields,
-                confirmAction: (field) => {
-                    Actions.addField(this.aiTable, field, [this.aiFields().length]);
-                }
-            }
-        });
+    selectRecord(recordId) {
+        this.aiTableGridSelectionService.selectRecord(recordId);
+    }
+    toggleSelectAll(checked) {
+        this.aiTableGridSelectionService.toggleSelectAll(checked);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridComponent, deps: [{ token: i0.ElementRef }, { token: AITableGridEventService }, { token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableGridComponent, 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 }, aiFieldRenderers: { classPropertyName: "aiFieldRenderers", publicName: "aiFieldRenderers", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange" }, host: { classAttribute: "ai-table-grid" }, providers: [ThyTooltipService, AITableGridEventService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell\">{{ field.name }}</div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" (click)=\"addField($event)\"><thy-icon thyIconName=\"plus\"></thy-icon></div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record.id; let index = $index) {\n        <div class=\"grid-row d-flex\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    addField(gridColumnBlank) {
+        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 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGridComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
@@ -777,13 +1144,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                         ThyPopoverModule,
                         ThyIcon,
                         ThyRate,
-                        FieldPropertyEditorComponent,
+                        AITableFieldPropertyEditor,
                         ThyDatePickerFormatPipe,
                         ThyTooltipModule,
                         ThyFlexibleText,
-                        ThyStopPropagationDirective
-                    ], providers: [ThyTooltipService, AITableGridEventService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell\">{{ field.name }}</div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" (click)=\"addField($event)\"><thy-icon thyIconName=\"plus\"></thy-icon></div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record.id; let index = $index) {\n        <div class=\"grid-row d-flex\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AITableGridEventService }, { type: i1$1.ThyPopover }] });
+                        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) {
@@ -797,5 +1169,5 @@ var AITableRowHeight;
  * Generated bundle index. Do not edit.
  */
 
-export { AITableFieldType, AITableGridComponent, AITableQueries, AITableRowHeight, AITableStatType, ActionName, Actions, DBL_CLICK_EDIT_TYPE, DEFAULT_COLUMN_WIDTH, ExecuteType, FLUSHING, MIN_COLUMN_WIDTH, RowHeight, SelectOptionPipe, buildGridData, createAITable, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator };
+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 };
 //# sourceMappingURL=ai-table-grid.mjs.map