@ai-table/grid 0.0.1 → 0.0.3

package/fesm2022/ai-table-grid.mjs

@@ -1,30 +1,32 @@
 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, computed, model, inject, booleanAttribute, Component, ChangeDetectionStrategy, Input, Injectable, input, signal, output } from '@angular/core';
+import { NgIf, NgTemplateOutlet, NgForOf, CommonModule, NgClass, NgComponentOutlet } from '@angular/common';
 import { ThyTag } from 'ngx-tethys/tag';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopoverModule } from 'ngx-tethys/popover';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createDraft, finishDraft } from 'immer';
-import { isUndefinedOrNull, helpers } from 'ngx-tethys/util';
+import { helpers, isUndefinedOrNull } from 'ngx-tethys/util';
 import { ThyIcon } from 'ngx-tethys/icon';
-import { fromEvent, of } from 'rxjs';
+import { of, fromEvent } from 'rxjs';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { ThyInputGroup, ThyInputCount, ThyInputDirective, ThyInput } from 'ngx-tethys/input';
+import * as i2 from 'ngx-tethys/form';
+import { ThyUniqueCheckValidator, ThyFormModule, ThyConfirmValidatorDirective } from 'ngx-tethys/form';
+import { ThyDropdownDirective, ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemIconDirective } from 'ngx-tethys/dropdown';
+import { ThyButton } from 'ngx-tethys/button';
+import { ThyListItem } from 'ngx-tethys/list';
 import { ThySelect } from 'ngx-tethys/select';
 import { ThyOption, ThyAutofocusDirective, ThyEnterDirective, ThyStopPropagationDirective } from 'ngx-tethys/shared';
-import { 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 * 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 { ThyFlexibleText } from 'ngx-tethys/flexible-text';
+import { ThyDivider } from 'ngx-tethys/divider';
+import { ThyAction } from 'ngx-tethys/action';
 
 ;
 class SelectOptionPipe {
@@ -178,9 +180,52 @@ function idCreator(length = 5) {
     return key;
 }
 
+const BasicFields = [
+    {
+        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'
+    }
+];
+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();
 
@@ -287,28 +332,145 @@ 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) {
+            //TODO: updateField
+        }
+        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\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of selectableFields; track item.type) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "ngmodule", type: ThyFormModule }, { kind: "directive", type: i2.ThyFormDirective, selector: "[thyForm],[thy-form]", inputs: ["thyLayout", "thyEnterKeyMode", "thyFormValidatorConfig"], exportAs: ["thyForm"] }, { kind: "component", type: i2.ThyFormGroup, selector: "thy-form-group", inputs: ["thyLabelText", "thyLabelTextTranslateKey", "thyLabelRequired", "thyLabelPaddingTopClear", "thyFeedbackIcon", "thyTipsMode", "thyTips", "thyTipsTranslateKey", "thyRowFill"] }, { kind: "directive", type: i2.ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { kind: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }, { kind: "component", type: ThyListItem, selector: "thy-list-item,[thy-list-item]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+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
+                    ], host: {
+                        class: 'field-property-editor d-block pl-5 pr-5 pb-5 pt-4'
+                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                thyAutofocus\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"fieldType().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ fieldType().name }}</span>\n                </span>\n                <thy-icon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n            </thy-list-item>\n        </div>\n    </thy-form-group>\n    <ng-container *ngIf=\"aiExternalTemplate; else defaultTemplate\">\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate\"></ng-container>\n    </ng-container>\n    <ng-template #defaultTemplate>\n        <!-- TODO: \u5185\u90E8\u5C5E\u6027\u6E32\u67D3 -->\n    </ng-template>\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">\u53D6\u6D88</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">\u786E\u5B9A</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    @for (item of selectableFields; track item.type) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item.type)\">\n            <thy-icon [thyIconName]=\"item.icon\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
+        }], 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);
+        origin && fieldService?.editFieldProperty(origin, aiTable, field, true);
+    }
+};
+const DefaultFieldMenus = [EditFieldPropertyItem];
+
 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,7 +480,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImpor
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
 
 class SingleSelectCellEditorComponent extends AbstractEditCellEditor {
     constructor() {
@@ -400,7 +565,7 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
         (thyEnter)="updateValue()"
         (thyBlur)="updateValue()"
         placeholder=""
-    /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
             type: Component,
@@ -567,7 +732,7 @@ class AITableGridEventService {
     }
     getEditorComponent(type) {
         if (this.aiFieldRenderers && this.aiFieldRenderers[type]) {
-            return this.aiFieldRenderers[type].edit;
+            return this.aiFieldRenderers[type].editor;
         }
         return GRID_CELL_EDITOR_MAP[type];
     }
@@ -593,7 +758,7 @@ class AITableGridEventService {
             initialState: {
                 field: field,
                 record: record,
-                aiTable: signal(this.aiTable)
+                aiTable: this.aiTable
             },
             panelClass: 'grid-cell-editor',
             outsideClosable: false,
@@ -609,132 +774,63 @@ 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'
-    }
-];
-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));
-        };
+class FieldMenu {
+    execute(menu) {
+        const field = signal({ ...this.field });
+        menu.exec && menu.exec(this.aiTable, field, this.origin);
     }
-    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: { field: "field", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin" }, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.id === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name! }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-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: { field: [{
+                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 AITableGrid {
+    constructor(elementRef, aiTableGridEventService, aiTableGridFieldService) {
         this.elementRef = elementRef;
         this.aiTableGridEventService = aiTableGridEventService;
-        this.thyPopover = thyPopover;
+        this.aiTableGridFieldService = aiTableGridFieldService;
         this.aiRecords = model.required();
         this.aiFields = model.required();
         this.aiRowHeight = input();
-        this.aiFieldRenderers = input();
+        this.aiFieldConfig = input();
         this.aiReadonly = input();
         this.AITableFieldType = AITableFieldType;
         this.takeUntilDestroyed = takeUntilDestroyed();
         this.onChange = output();
+        this.aiTableInitialized = output();
         this.gridData = computed(() => {
             return buildGridData(this.aiRecords(), this.aiFields());
         });
     }
     ngOnInit() {
         this.initAITable();
-        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldRenderers());
-        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
+        this.initService();
+        this.buildFieldMenus();
     }
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
+        this.aiTableInitialized.emit(this.aiTable);
         this.aiTable.onChange = () => {
             this.onChange.emit({
                 records: this.aiRecords(),
@@ -743,26 +839,26 @@ class AITableGridComponent {
             });
         };
     }
+    initService() {
+        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldPropertyEditor);
+        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]);
-                }
-            }
-        });
+    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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.2", ngImport: i0, type: AITableGrid, deps: [{ token: i0.ElementRef }, { token: AITableGridEventService }, { token: AITableGridFieldService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.2", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiRowHeight: { classPropertyName: "aiRowHeight", publicName: "aiRowHeight", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", onChange: "onChange", aiTableInitialized: "aiTableInitialized" }, host: { classAttribute: "ai-table-grid" }, providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService], ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell grid-field\" #fieldAction>\n            {{ field.name }}\n            <a thyAction thyActiveClass=\"active\" thyIcon=\"more-vertical\" [thyDropdown]=\"fieldMenu\" href=\"javascript:;\">\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [field]=\"field\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record.id; let index = $index) {\n        <div class=\"grid-row d-flex\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: FieldMenu, selector: "field-menu", inputs: ["field", "aiTable", "fieldMenus", "origin"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-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 +873,17 @@ 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
+                    ], providers: [ThyTooltipService, AITableGridEventService, AITableGridFieldService], template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell\">\n        <input type=\"checkbox\" />\n    </div>\n    @for (field of gridData().fields; track field.id) {\n        <div class=\"grid-cell grid-field\" #fieldAction>\n            {{ field.name }}\n            <a thyAction thyActiveClass=\"active\" thyIcon=\"more-vertical\" [thyDropdown]=\"fieldMenu\" href=\"javascript:;\">\n                <thy-dropdown-menu #fieldMenu>\n                    <field-menu [origin]=\"fieldAction\" [field]=\"field\" [aiTable]=\"aiTable\" [fieldMenus]=\"fieldMenus\"></field-menu>\n                </thy-dropdown-menu>\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record.id; let index = $index) {\n        <div class=\"grid-row d-flex\">\n            <div class=\"grid-row-index\">\n                {{ index + 1 }}\n            </div>\n            @for (field of gridData().fields; track $index) {\n                <div class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field.id]\" [attr.recordId]=\"[record.id]\" #cell>\n                    @switch (field.type) {\n                        @case (AITableFieldType.SingleSelect) {\n                            @if (record.value[field.id] | selectOption: field['options']; as selectedOption) {\n                                <thy-tag [thyColor]=\"selectedOption!.color!\">{{ selectedOption.name }}</thy-tag>\n                            }\n                        }\n                        @case (AITableFieldType.DateTime) {\n                            {{ record.value[field.id] | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.Rating) {\n                            <thy-rate [(ngModel)]=\"record.value[field.id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.Link) {\n                            <a\n                                class=\"d-block pl-4 pr-4\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.value[field.id]?.text\"\n                                [href]=\"record.value[field.id]?.url\"\n                                target=\"_blank\"\n                                >{{ record.value[field.id]?.text }}</a\n                            >\n                        }\n                        @default {\n                            {{ record.value[field.id] }}\n                        }\n                    }\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n" }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: AITableGridEventService }, { type: AITableGridFieldService }] });
 
 var AITableRowHeight;
 (function (AITableRowHeight) {
@@ -797,5 +897,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, RowHeight, SelectOptionPipe, buildGridData, createAITable, createDefaultField, createDefaultFieldName, getDefaultFieldValue, getDefaultRecord, getRecordOrField, idCreator };
 //# sourceMappingURL=ai-table-grid.mjs.map