@ai-table/grid 0.0.19 → 0.0.21

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, output, inject, ElementRef, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ChangeDetectorRef, ViewChild, HostListener, Pipe, input, Renderer2, model, booleanAttribute, Injectable, DestroyRef, NgZone, InjectionToken, effect, viewChild, afterNextRender } from '@angular/core';
+import { signal, computed, output, inject, ElementRef, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, ChangeDetectorRef, ViewChild, HostListener, Pipe, input, Renderer2, model, booleanAttribute, Injectable, DestroyRef, NgZone, InjectionToken, effect, ViewContainerRef, viewChild, afterNextRender } from '@angular/core';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import ObjectID from 'bson-objectid';
@@ -26,7 +26,7 @@ import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { ThySlider } from 'ngx-tethys/slider';
 import { ThyRate } from 'ngx-tethys/rate';
 import * as i1$2 from '@angular/common';
-import { NgTemplateOutlet, NgIf, NgForOf, NgClass, CommonModule, NgComponentOutlet } from '@angular/common';
+import { NgTemplateOutlet, NgIf, NgClass, NgForOf, CommonModule, NgComponentOutlet } from '@angular/common';
 import { ThyDot } from 'ngx-tethys/dot';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThyIcon } from 'ngx-tethys/icon';
@@ -185,7 +185,7 @@ const FieldOptions = [
         type: AITableFieldType.text,
         name: '单行文本',
         icon: 'font',
-        width: 300
+        width: 200
     },
     // 多行文本
     {
@@ -217,7 +217,13 @@ const FieldOptions = [
     },
     {
         type: AITableFieldType.member,
-        name: '成员',
+        name: '单个成员',
+        icon: 'user',
+        width: 200
+    },
+    {
+        type: AITableFieldType.member,
+        name: '多个成员',
         icon: 'user',
         width: 200,
         settings: {
@@ -1274,6 +1280,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     standalone: true
                 }]
         }] });
+class AITableFieldIsMultiplePipe {
+    transform(settings) {
+        if (settings && settings.hasOwnProperty('is_multiple')) {
+            return !!settings.is_multiple;
+        }
+        return false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldIsMultiplePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldIsMultiplePipe, isStandalone: true, name: "fieldIsMultiple" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldIsMultiplePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'fieldIsMultiple',
+                    standalone: true
+                }]
+        }] });
 
 class SelectOptionComponent {
     constructor() {
@@ -1465,13 +1488,14 @@ class AITableFieldPropertyEditor {
         this.thyPopoverRef.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldPropertyEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableFieldPropertyEditor, isStandalone: true, selector: "ai-table-field-property-editor", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", 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: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, 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)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ selectedFieldOption().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 fieldOptions; track $index) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item)\">\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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableFieldPropertyEditor, isStandalone: true, selector: "ai-table-field-property-editor", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", 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: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, 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)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ selectedFieldOption().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 fieldOptions; track $index) {\n        @let isSelectedField = aiEditField().type === item.type;\n        @let isSameMultipleMode = (item.settings! | fieldIsMultiple) === (aiEditField().settings! | fieldIsMultiple);\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: isSelectedField && isSameMultipleMode\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "component", type: ThyInputCount, selector: "thy-input-count", inputs: ["thyInput"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyUniqueCheckValidator, selector: "[thyUniqueCheck]", inputs: ["thyUniqueCheck"] }, { kind: "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"] }, { kind: "pipe", type: AITableFieldIsMultiplePipe, name: "fieldIsMultiple" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldPropertyEditor, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-property-editor', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgIf,
                         NgForOf,
+                        NgClass,
                         FormsModule,
                         ThyIcon,
                         ThyInput,
@@ -1489,10 +1513,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ThyFormModule,
                         ThyListItem,
                         NgTemplateOutlet,
-                        ThyAutofocusDirective
+                        ThyAutofocusDirective,
+                        AITableFieldIsMultiplePipe
                     ], 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)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ selectedFieldOption().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 fieldOptions; track $index) {\n        <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"selectFieldType(item)\">\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
+                    }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired thyLabelText=\"\u8868\u683C\u5217\u540D\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                required\n                placeholder=\"\u8F93\u5165\u5217\u540D\u79F0\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group thyLabelText=\"\u5217\u7C7B\u578B\">\n        <div class=\"ml-n5 mr-n5\">\n            <thy-list-item [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" class=\"justify-content-between\">\n                <span>\n                    <thy-icon [thyIconName]=\"selectedFieldOption().icon\" class=\"text-desc mr-2\"></thy-icon>\n                    <span>{{ selectedFieldOption().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 fieldOptions; track $index) {\n        @let isSelectedField = aiEditField().type === item.type;\n        @let isSameMultipleMode = (item.settings! | fieldIsMultiple) === (aiEditField().settings! | fieldIsMultiple);\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: isSelectedField && isSameMultipleMode\n            }\"\n            (click)=\"selectFieldType(item)\"\n        >\n            <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n            <span thyDropdownMenuItemName>{{ item.name }}</span>\n        </a>\n    }\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
         }], propDecorators: { aiTable: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1503,6 +1528,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 args: [{ transform: booleanAttribute }]
             }] } });
 
+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) {
+        const fields = this.aiTable.selection().selectedCells.get(recordId);
+        if (fields?.hasOwnProperty(fieldId)) {
+            return;
+        }
+        this.clearSelection();
+        this.aiTable.selection().selectedCells.set(recordId, { [fieldId]: true });
+    }
+    selectField(fieldId) {
+        if (this.aiTable.selection().selectedFields.has(fieldId)) {
+            return;
+        }
+        this.clearSelection();
+        this.aiTable.selection().selectedFields.set(fieldId, true);
+    }
+    selectRecord(recordId) {
+        if (this.aiTable.selection().selectedRecords.has(recordId)) {
+            this.aiTable.selection().selectedRecords.delete(recordId);
+        }
+        else {
+            this.aiTable.selection().selectedRecords.set(recordId, true);
+        }
+        this.aiTable.selection.set({
+            selectedRecords: this.aiTable.selection().selectedRecords,
+            selectedFields: new Map(),
+            selectedCells: new Map()
+        });
+    }
+    toggleSelectAll(checked) {
+        this.clearSelection();
+        if (checked) {
+            this.aiTable.records().forEach((item) => {
+                this.selectRecord(item._id);
+            });
+        }
+    }
+    updateSelect(event) {
+        const target = event?.target;
+        if (!target) {
+            return;
+        }
+        const cellDom = target.closest('.grid-cell');
+        const colDom = target.closest('.grid-field');
+        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
+        const fieldAction = target.closest('.grid-field-action');
+        if (cellDom) {
+            const fieldId = cellDom.getAttribute('fieldId');
+            const recordId = cellDom.getAttribute('recordId');
+            fieldId && recordId && this.selectCell(recordId, fieldId);
+        }
+        if (colDom && !fieldAction) {
+            const fieldId = colDom.getAttribute('fieldId');
+            fieldId && this.selectField(fieldId);
+        }
+        if (!cellDom && !colDom && !checkbox) {
+            this.clearSelection();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+class AITableContextMenu extends ThyDropdownAbstractMenu {
+    constructor() {
+        super(...arguments);
+        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
+        this.aiTable = input.required();
+        this.menuItems = input.required();
+        this.targetName = input.required();
+        this.position = input.required();
+    }
+    execute(menu) {
+        if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
+            menu.exec && menu.exec(this.aiTable(), this.targetName(), this.position(), this.aiTableGridSelectionService);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableContextMenu, isStandalone: true, selector: "ai-table-context-menu", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, menuItems: { classPropertyName: "menuItems", publicName: "menuItems", isSignal: true, isRequired: true, transformFunction: null }, targetName: { classPropertyName: "targetName", publicName: "targetName", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "context-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{ 'ai-table-prohibit-clear-selection remove-record': !disabled }\"\n            (click)=\"execute(menu)\"\n            [thyDisabled]=\"disabled\"\n        >\n            <thy-icon thyIconName=\"menu.icon\"></thy-icon>\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableContextMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-context-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'context-menu'
+                    }, imports: [
+                        ThyDropdownMenuComponent,
+                        ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuItemNameDirective,
+                        ThyDropdownMenuItemIconDirective,
+                        ThyIcon,
+                        NgClass
+                    ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{ 'ai-table-prohibit-clear-selection remove-record': !disabled }\"\n            (click)=\"execute(menu)\"\n            [thyDisabled]=\"disabled\"\n        >\n            <thy-icon thyIconName=\"menu.icon\"></thy-icon>\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n" }]
+        }] });
+
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
     [AITableFieldType.richText]: TextCellEditorComponent,
@@ -1536,6 +1669,7 @@ const AI_TABLE_FIELD_ADD_BUTTON = 'AI_TABLE_FIELD_ADD_BUTTON'; // 添加列名
 const AI_TABLE_FIELD_ADD_BUTTON_WIDTH = 100; // 添加列宽度
 const AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE = 8; // 字段表列头图标的间距
 const AI_TABLE_FIELD_HEAD_MORE = 'AI_TABLE_FIELD_HEAD_MORE'; // 更多图标名称
+const AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS = '.ai-table-prohibit-clear-selection';
 const AI_TABLE_ICON_COMMON_SIZE = 16; // 表格图标的通用尺寸
 const AI_TABLE_CELL = 'AI_TABLE_CELL'; // 单元格标识
 // 因为 dom 的边距 12 是不包含 边框的，所以加上边框 2px  才能跟 编辑里面的内容对其；
@@ -1657,7 +1791,7 @@ const DEFAULT_TEXT_SCALE = 1;
 const DEFAULT_TEXT_MAX_CACHE = 500;
 const FONT_SIZE_SM = 12;
 
-class FieldMenu extends ThyDropdownAbstractMenu {
+class AITableFieldMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
         this.field = computed(() => {
@@ -1669,19 +1803,22 @@ class FieldMenu extends ThyDropdownAbstractMenu {
             menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n            @let isRemoveField = menu.type === 'removeField';\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
-            args: [{ selector: 'field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'ai-table-field-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'field-menu'
+                    }, imports: [
                         ThyIcon,
                         ThyDivider,
                         ThyDropdownMenuComponent,
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective
-                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
+                        ThyDropdownMenuItemIconDirective,
+                        NgClass
+                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n            @let isRemoveField = menu.type === 'removeField';\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1751,6 +1888,8 @@ class AITableGridFieldService {
             placement: 'bottomLeft',
             manualClosure: true,
             originActiveClass: undefined,
+            height: 'auto',
+            panelClass: 'ai-table-field-property-editor-panel',
             initialState: {
                 aiTable,
                 aiEditField: field,
@@ -1760,11 +1899,12 @@ class AITableGridFieldService {
     }
     openFieldMenu(aiTable, options) {
         const { origin, editOrigin, position, fieldId, fieldMenus } = options;
-        const ref = this.thyPopover.open(FieldMenu, {
+        const ref = this.thyPopover.open(AITableFieldMenu, {
             origin,
             originPosition: position,
             placement: 'bottomLeft',
             originActiveClass: undefined,
+            insideClosable: true,
             initialState: {
                 origin: editOrigin,
                 position: options.editFieldPosition,
@@ -1782,83 +1922,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.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) {
-        const fields = this.aiTable.selection().selectedCells.get(recordId);
-        if (fields?.hasOwnProperty(fieldId)) {
-            return;
-        }
-        this.clearSelection();
-        this.aiTable.selection().selectedCells.set(recordId, { [fieldId]: true });
-    }
-    selectField(fieldId) {
-        if (this.aiTable.selection().selectedFields.has(fieldId)) {
-            return;
-        }
-        this.clearSelection();
-        this.aiTable.selection().selectedFields.set(fieldId, true);
-    }
-    selectRecord(recordId) {
-        if (this.aiTable.selection().selectedRecords.has(recordId)) {
-            this.aiTable.selection().selectedRecords.delete(recordId);
-        }
-        else {
-            this.aiTable.selection().selectedRecords.set(recordId, true);
-        }
-        this.aiTable.selection.set({
-            selectedRecords: this.aiTable.selection().selectedRecords,
-            selectedFields: new Map(),
-            selectedCells: new Map()
-        });
-    }
-    toggleSelectAll(checked) {
-        this.clearSelection();
-        if (checked) {
-            this.aiTable.records().forEach((item) => {
-                this.selectRecord(item._id);
-            });
-        }
-    }
-    updateSelect(event) {
-        const target = event?.target;
-        if (!target) {
-            return;
-        }
-        const cellDom = target.closest('.grid-cell');
-        const colDom = target.closest('.grid-field');
-        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
-        const fieldAction = target.closest('.grid-field-action');
-        if (cellDom) {
-            const fieldId = cellDom.getAttribute('fieldId');
-            const recordId = cellDom.getAttribute('recordId');
-            fieldId && recordId && this.selectCell(recordId, fieldId);
-        }
-        if (colDom && !fieldAction) {
-            const fieldId = colDom.getAttribute('fieldId');
-            fieldId && this.selectField(fieldId);
-        }
-        if (!cellDom && !colDom && !checkbox) {
-            this.clearSelection();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridSelectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 function getColumnIndicesMap(fields) {
     const columnIndicesMap = {};
     fields?.forEach((field, index) => {
@@ -2549,6 +2612,23 @@ class AITableGridEventService {
         }
         return null;
     }
+    openContextMenu(aiTable, options) {
+        const { origin, position, menuItems, targetName, viewContainerRef } = options;
+        const ref = this.thyPopover.open(AITableContextMenu, {
+            origin: origin,
+            originPosition: position,
+            placement: 'bottomLeft',
+            insideClosable: true,
+            viewContainerRef,
+            initialState: {
+                aiTable,
+                menuItems,
+                targetName,
+                position
+            }
+        });
+        return ref;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridEventService }); }
 }
@@ -2560,6 +2640,7 @@ class AITableGridBase {
     constructor() {
         this.aiRecords = model.required();
         this.aiFields = model.required();
+        this.aiContextMenuItems = input([]);
         this.aiFieldConfig = input();
         this.aiReadonly = input();
         this.aiPlugins = input();
@@ -2688,7 +2769,7 @@ class AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiUpdateFieldValue: "aiUpdateFieldValue" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiUpdateFieldValue: "aiUpdateFieldValue" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
@@ -2737,7 +2818,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ThyDatePickerFormatPipe,
                         ThyFlexibleText,
                         ThyStopPropagationDirective,
-                        FieldMenu,
+                        AITableFieldMenu,
                         ThyAction,
                         ThyDropdownDirective,
                         ThyDropdownMenuComponent,
@@ -4304,9 +4385,9 @@ class Layout extends Drawer {
     get isLast() {
         return this.columnIndex === this.columnCount - 1;
     }
-    renderAddFieldBlank({ style, isHoverRow }) {
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
         const rowHeight = this.rowHeight;
-        const fill = style?.fill || (isHoverRow ? this.colors.gray80 : this.colors.transparent);
+        const fill = isCheckedRow ? this.colors.itemActiveBgColor : isHoverRow ? this.colors.gray80 : this.colors.transparent;
         const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
         this.rect({
             x: addFieldBlankX,
@@ -4321,8 +4402,8 @@ class Layout extends Drawer {
 }
 
 class AddRowLayout extends Layout {
-    renderAddFieldBlank({ isHoverRow }) {
-        super.renderAddFieldBlank({ isHoverRow });
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
         const rowHeight = this.rowHeight;
         const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
@@ -4381,7 +4462,7 @@ class AddRowLayout extends Layout {
             fill: this.colors.gray600
         });
     }
-    renderLastCell({ isHoverRow }) {
+    renderLastCell({ isHoverRow, isCheckedRow }) {
         if (!this.isLast)
             return;
         const width = this.columnWidth;
@@ -4391,7 +4472,7 @@ class AddRowLayout extends Layout {
                 isHoverRow
             });
         }
-        this.renderAddFieldBlank({ isHoverRow });
+        this.renderAddFieldBlank({ isHoverRow, isCheckedRow });
     }
     renderCommonCell({ isHoverRow }) {
         if (this.isFirst || this.isLast)
@@ -4401,7 +4482,7 @@ class AddRowLayout extends Layout {
             isHoverRow
         });
     }
-    render({ isHoverRow }) {
+    render({ isHoverRow, isCheckedRow }) {
         this.renderFirstCell({
             isHoverRow
         });
@@ -4409,7 +4490,8 @@ class AddRowLayout extends Layout {
             isHoverRow
         });
         this.renderLastCell({
-            isHoverRow
+            isHoverRow,
+            isCheckedRow
         });
     }
 }
@@ -5054,7 +5136,7 @@ class RecordRowLayout extends Layout {
         }
     }
     // 尾列
-    renderLastCell({ style, isHoverRow }) {
+    renderLastCell({ style, isHoverRow, isCheckedRow }) {
         if (!this.isLast || this.isFirst)
             return;
         const { fill, stroke } = style;
@@ -5069,7 +5151,7 @@ class RecordRowLayout extends Layout {
             stroke: stroke || colors.gray200
         });
         // 延伸到 FIELD_ADD_BUTTON
-        super.renderAddFieldBlank({ style, isHoverRow });
+        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
         const rowHeight = this.rowHeight;
         const startX = this.x + this.columnWidth;
         const lineWidth = this.containerWidth - startX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH : this.containerWidth - startX;
@@ -5100,7 +5182,7 @@ class RecordRowLayout extends Layout {
         const { row, style, isCheckedRow, isHoverRow } = config;
         this.renderFirstCell({ row, style, isCheckedRow, isHoverRow });
         this.renderCommonCell({ style });
-        this.renderLastCell({ style, isHoverRow });
+        this.renderLastCell({ style, isCheckedRow, isHoverRow });
     }
 }
 const recordRowLayout = new RecordRowLayout();
@@ -5147,6 +5229,7 @@ const createCells = (config) => {
             switch (type) {
                 case AITableRowType.add: {
                     const isHoverRow = isHover && targetName === AI_TABLE_ROW_ADD_BUTTON;
+                    const isCheckedRow = aiTable.selection().selectedRecords.has(row._id);
                     addRowLayout.init({
                         x,
                         y,
@@ -5158,19 +5241,24 @@ const createCells = (config) => {
                         containerWidth: coordinate.containerWidth
                     });
                     addRowLayout.render({
-                        isHoverRow
+                        isHoverRow,
+                        isCheckedRow
                     });
                     break;
                 }
                 case AITableRowType.record: {
                     let background = colors.white;
+                    const fieldId = field._id;
                     const isCheckedRow = aiTable.selection().selectedRecords.has(row._id);
-                    const isSelected = aiTable.selection().selectedFields.has(field._id);
+                    const isSelected = aiTable.selection().selectedFields.has(fieldId);
                     const isHoverRow = isHover && targetName !== AI_TABLE_FIELD_HEAD;
-                    if (isCheckedRow || isSelected) {
+                    const activeCell = AITable.getActiveCell(aiTable);
+                    const isSiblingActiveCell = recordId === activeCell?.recordId && fieldId !== activeCell?.fieldId;
+                    const isActiveCell = recordId === activeCell?.recordId;
+                    if (isCheckedRow || isSelected || isSiblingActiveCell) {
                         background = colors.itemActiveBgColor;
                     }
-                    else if (isHoverRow) {
+                    else if (isHoverRow && !isActiveCell) {
                         background = colors.gray80;
                     }
                     recordRowLayout.init({
@@ -5197,7 +5285,7 @@ const createCells = (config) => {
                     const realX = x + offset + AI_TABLE_OFFSET;
                     const realY = y + AI_TABLE_OFFSET;
                     const style = { fontWeight: DEFAULT_FONT_STYLE };
-                    const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
+                    const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, fieldId]);
                     const transformValue = transformCellValue(aiTable, field, cellValue);
                     const render = {
                         aiTable,
@@ -5772,7 +5860,7 @@ class AITableHoverRowHeads {
                     continue;
                 }
                 let isHoverRow;
-                if (pointRowIndex > -1) {
+                if (pointRowIndex > -1 && !!context.linearRows().length && pointRowIndex < context.linearRows().length) {
                     const { type: pointRowType, _id: pointRecordId } = context.linearRows()[pointRowIndex];
                     isHoverRow = recordId === pointRecordId && pointRowType === AITableRowType.record && targetName !== AI_TABLE_FIELD_HEAD;
                 }
@@ -6003,6 +6091,7 @@ class AITableRenderer {
         this.config = input.required();
         this.koMousemove = output();
         this.koMousedown = output();
+        this.koContextmenu = output();
         this.koWheel = output();
         this.koClick = output();
         this.koDblclick = output();
@@ -6136,6 +6225,9 @@ class AITableRenderer {
     stageMousedown(e) {
         this.koMousedown.emit(e);
     }
+    stageContextmenu(e) {
+        this.koContextmenu.emit(e);
+    }
     stageClick(e) {
         this.koClick.emit(e);
     }
@@ -6143,7 +6235,7 @@ class AITableRenderer {
         this.koDblclick.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -6160,12 +6252,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AITableAddField,
                         AITableHoverRowHeads,
                         AITableOtherRows
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableGrid extends AITableGridBase {
     constructor() {
         super();
+        this.viewContainerRef = inject(ViewContainerRef);
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
         this.containerRect = signal({ width: 0, height: 0 });
         this.hasContainerRect = computed(() => {
@@ -6308,6 +6401,12 @@ class AITableGrid extends AITableGridBase {
         const mouseEvent = e.event.evt;
         const _targetName = e.event.target.name();
         const { targetName, fieldId, recordId } = getDetailByTargetName(_targetName);
+        if (mouseEvent.button === AITableMouseDownType.Right &&
+            recordId &&
+            fieldId &&
+            this.aiTable.selection().selectedRecords.has(recordId)) {
+            return;
+        }
         switch (targetName) {
             case AI_TABLE_FIELD_HEAD:
                 mouseEvent.preventDefault();
@@ -6330,6 +6429,33 @@ class AITableGrid extends AITableGridBase {
                 this.aiTableGridSelectionService.clearSelection();
         }
     }
+    stageContextmenu(e) {
+        const mouseEvent = e.event.evt;
+        mouseEvent.preventDefault();
+        if (this.aiReadonly()) {
+            return;
+        }
+        const targetName = e.event.target.name();
+        const { fieldId, recordId } = getDetailByTargetName(targetName);
+        if (!recordId || !fieldId) {
+            return;
+        }
+        const position = {
+            x: mouseEvent.x,
+            y: mouseEvent.y
+        };
+        const menuItems = this.aiContextMenuItems();
+        if (!menuItems.length || menuItems.every((item) => !!(item.hidden && item.hidden(this.aiTable, targetName, position)))) {
+            return;
+        }
+        this.aiTableGridEventService.openContextMenu(this.aiTable, {
+            origin: this.containerElement(),
+            menuItems,
+            position,
+            targetName,
+            viewContainerRef: this.viewContainerRef
+        });
+    }
     stageClick(e) {
         const mouseEvent = e.event.evt;
         mouseEvent.preventDefault();
@@ -6441,7 +6567,9 @@ class AITableGrid extends AITableGridBase {
     }
     bindGlobalMousedown() {
         fromEvent(document, 'mousedown', { passive: true })
-            .pipe(filter((e) => e.target instanceof Element && !this.containerElement().contains(e.target)), takeUntilDestroyed(this.destroyRef))
+            .pipe(filter((e) => e.target instanceof Element &&
+            !this.containerElement().contains(e.target) &&
+            !(e.target.closest(AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS) && this.aiTable.selection().selectedRecords.size > 0)), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.aiTableGridSelectionService.clearSelection();
         });
@@ -6516,18 +6644,18 @@ class AITableGrid extends AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koContextmenu", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
+                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableDomGrid, AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, idCreator, idsCreator, imageCache, isArrayField, isMac, isNumberFiled, isSameFieldOption, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, textDataCache, transformCellValue };
+export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsMultiplePipe, AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, idCreator, idsCreator, imageCache, isArrayField, isMac, isNumberFiled, isSameFieldOption, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, textDataCache, transformCellValue };
 //# sourceMappingURL=ai-table-grid.mjs.map