@ai-table/grid 0.4.2 → 0.4.4

package/fesm2022/ai-table-grid.mjs

@@ -52,9 +52,9 @@ import { LRUCache } from 'lru-cache';
 import { differenceInDays, fromUnixTime, differenceInMonths, subDays } from 'date-fns';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
 import GraphemeSplitter from 'grapheme-splitter';
+import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import * as i1$2 from '@angular/common';
 import { NgClass, CommonModule, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
-import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
 import { ThyDot } from 'ngx-tethys/dot';
@@ -195,7 +195,7 @@ function createListener(instance) {
 
 class KoShape {
     constructor() {
-        this.config = input();
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
         this.koMouseover = new EventEmitter();
         this.koMousemove = new EventEmitter();
         this.koMouseout = new EventEmitter();
@@ -277,17 +277,17 @@ class KoShape {
     ngOnDestroy() {
         this._node?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoShape, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: KoShape, isStandalone: true, 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: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoShape, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: KoShape, isStandalone: true, 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: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoShape, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoShape, decorators: [{
             type: Component,
             args: [{
                     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',
                     template: `<ng-content></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [], propDecorators: { koMouseover: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], koMouseover: [{
                 type: Output
             }], koMousemove: [{
                 type: Output
@@ -328,15 +328,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }] } });
 
 class KoContainer extends KoShape {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: KoContainer, isStandalone: true, selector: "ko-layer, ko-fastlayer, ko-group", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoContainer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: KoContainer, isStandalone: true, selector: "ko-layer, ko-fastlayer, ko-group", providers: [
             {
                 provide: KO_CONTAINER_TOKEN,
                 useExisting: KoContainer
             }
         ], usesInheritance: true, ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoContainer, decorators: [{
             type: Component,
             args: [{
                     selector: 'ko-layer, ko-fastlayer, ko-group',
@@ -353,7 +353,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 class KoStage {
     constructor() {
-        this.config = input();
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
         this.koMouseover = new EventEmitter();
         this.koMousemove = new EventEmitter();
         this.koMouseout = new EventEmitter();
@@ -407,15 +407,15 @@ class KoStage {
     ngOnDestroy() {
         this._stage?.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoStage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: KoStage, isStandalone: true, selector: "ko-stage", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koMouseover: "koMouseover", koMousemove: "koMousemove", koMouseout: "koMouseout", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", koMousedown: "koMousedown", koMouseup: "koMouseup", koWheel: "koWheel", koContextmenu: "koContextmenu", koClick: "koClick", koDblclick: "koDblclick", koTouchstart: "koTouchstart", koTouchmove: "koTouchmove", koTouchend: "koTouchend", koTap: "koTap", koDbltap: "koDbltap", koDragstart: "koDragstart", koDragmove: "koDragmove", koDragend: "koDragend" }, providers: [
             {
                 provide: KO_CONTAINER_TOKEN,
                 useExisting: KoStage
             }
         ], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: KoStage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: KoStage, decorators: [{
             type: Component,
             args: [{
                     selector: 'ko-stage',
@@ -428,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [], propDecorators: { koMouseover: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], koMouseover: [{
                 type: Output
             }], koMousemove: [{
                 type: Output
@@ -1669,15 +1669,15 @@ class RendererContext {
 
 class AbstractEditCellEditor {
     constructor() {
-        this.recordHeight = input(AI_TABLE_RECORD_HEIGHT_LEVELS.low);
-        this.autoFocus = input(true, { transform: coerceBooleanProperty });
+        this.recordHeight = input(AI_TABLE_RECORD_HEIGHT_LEVELS.low, ...(ngDevMode ? [{ debugName: "recordHeight" }] : []));
+        this.autoFocus = input(true, ...(ngDevMode ? [{ debugName: "autoFocus", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         this.updateFieldValues = output();
         this.field = computed(() => {
             return this.aiTable.fieldsMap()[this.fieldId];
-        });
+        }, ...(ngDevMode ? [{ debugName: "field" }] : []));
         this.record = computed(() => {
             return this.aiTable.recordsMap()[this.recordId];
-        });
+        }, ...(ngDevMode ? [{ debugName: "record" }] : []));
         this.elementRef = inject((ElementRef));
         this.thyPopoverRef = inject((ThyPopoverRef), { optional: true });
         this.render2 = inject(Renderer2);
@@ -1728,10 +1728,10 @@ class AbstractEditCellEditor {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
             type: Component,
             args: [{
                     selector: 'abstract-edit-cell',
@@ -1750,7 +1750,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], references: [{
                 type: Input,
                 args: [{ required: true }]
-            }] } });
+            }], recordHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordHeight", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], updateFieldValues: [{ type: i0.Output, args: ["updateFieldValues"] }] } });
 
 class DateCellEditorComponent extends AbstractEditCellEditor {
     constructor() {
@@ -1784,8 +1784,8 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
             this.closePopover();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DateCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: DateCellEditorComponent, isStandalone: true, selector: "date-cell-editor", host: { classAttribute: "date-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: DateCellEditorComponent, isStandalone: true, selector: "date-cell-editor", host: { classAttribute: "date-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <thy-date-picker
             class="h-100"
             thyTimestampPrecision="seconds"
@@ -1803,7 +1803,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
         </thy-date-picker>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ThyDatePicker, selector: "thy-date-picker", exportAs: ["thyDatePicker"] }, { kind: "ngmodule", type: ThyTimePickerModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DateCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DateCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'date-cell-editor',
@@ -1840,7 +1840,7 @@ class LinkEditComponent {
         this.thyPopoverRef = thyPopoverRef;
         this.url = '';
         this.text = '';
-        this.aiTable = input();
+        this.aiTable = input(...(ngDevMode ? [undefined, { debugName: "aiTable" }] : []));
         this.confirm = new EventEmitter();
         this.i18nTexts = computed(() => {
             return {
@@ -1851,7 +1851,7 @@ class LinkEditComponent {
                 cancel: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.cancel),
                 apply: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.apply)
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : []));
         this.validatorConfig = computed(() => {
             return {
                 validationMessages: {
@@ -1860,7 +1860,7 @@ class LinkEditComponent {
                     }
                 }
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "validatorConfig" }] : []));
     }
     ngOnInit() { }
     close() {
@@ -1881,17 +1881,17 @@ class LinkEditComponent {
         const link = url ? { text: text || url, url: url } : undefined;
         this.confirm.emit(link);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\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.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: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { 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: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkEditComponent, deps: [{ token: i1$1.ThyPopoverRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: LinkEditComponent, isStandalone: true, selector: "link-edit", inputs: { url: { classPropertyName: "url", publicName: "url", isSignal: false, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: false, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirm: "confirm" }, ngImport: i0, template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\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.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: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "directive", type: ThyFormSubmitDirective, selector: "[thyFormSubmit],[thy-form-submit]", outputs: ["thyFormSubmit"] }, { 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: "component", type: i2.ThyFormGroupFooter, selector: "thy-form-group-footer", inputs: ["thyAlign"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkEditComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkEditComponent, decorators: [{
             type: Component,
             args: [{ selector: 'link-edit', imports: [FormsModule, ThyStopPropagationDirective, ThyInputDirective, ThyButton, ThyFormSubmitDirective, ThyFormModule], template: "<form\n    thyLayout=\"vertical\"\n    thyStopPropagation\n    thyForm\n    #linkForm=\"thyForm\"\n    [thyFormValidatorConfig]=\"validatorConfig()\"\n    name=\"linkForm\"\n    class=\"p-5\"\n>\n    <thy-form-group [thyLabelText]=\"i18nTexts().linkText\">\n        <input thyInput [placeholder]=\"i18nTexts().textPlaceholder\" name=\"text\" [(ngModel)]=\"text\" />\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().urlLabel\">\n        <input name=\"url\" thyInput [placeholder]=\"i18nTexts().urlPlaceholder\" type=\"text\" [(ngModel)]=\"url\" />\n    </thy-form-group>\n    <thy-form-group-footer thyAlign=\"right\">\n        <div class=\"btn-pair\">\n            <button thyStopPropagation thyButton=\"link-secondary\" thySize=\"sm\" (click)=\"close()\">{{ i18nTexts().cancel }}</button>\n            <button thyStopPropagation thyButton=\"primary\" thySize=\"sm\" (thyFormSubmit)=\"apply(linkForm)\">{{ i18nTexts().apply }}</button>\n        </div>\n    </thy-form-group-footer>\n</form>\n" }]
         }], ctorParameters: () => [{ type: i1$1.ThyPopoverRef }], propDecorators: { url: [{
                 type: Input
             }], text: [{
                 type: Input
-            }], confirm: [{
+            }], aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: false }] }], confirm: [{
                 type: Output
             }] } });
 
@@ -1907,7 +1907,7 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         this.isOpened = false;
         this.linkTooltip = computed(() => {
             return getI18nTextByKey(this.aiTable, AITableGridI18nKey.linkTooltip);
-        });
+        }, ...(ngDevMode ? [{ debugName: "linkTooltip" }] : []));
     }
     isValidLink(link) {
         if (!link.text) {
@@ -1976,10 +1976,10 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'link-cell-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         FormsModule,
@@ -4163,7 +4163,7 @@ const isCellMatchKeywords = (aiTable, field, recordId, keywords, references) =>
 
 class AITableTextComponent {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         // @Output() koClick = new EventEmitter<KoEventObject<MouseEvent>>();
         this.koClick = output();
         this.koMouseMove = output();
@@ -4190,7 +4190,7 @@ class AITableTextComponent {
                 ...rest
             };
             return result;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
     }
     onClick(e) {
         this.koClick.emit(e);
@@ -4198,10 +4198,10 @@ class AITableTextComponent {
     onMousemove(e) {
         this.koMouseMove.emit(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableTextComponent, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableTextComponent, isStandalone: true, selector: "ai-table-text", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick", koMouseMove: "koMouseMove" }, ngImport: i0, template: ` <ko-text [config]="textConfig()" (koClick)="onClick($event)" (koMousemove)="onMousemove($event)"></ko-text> `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableTextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableTextComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-text',
@@ -4209,7 +4209,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], koClick: [{ type: i0.Output, args: ["koClick"] }], koMouseMove: [{ type: i0.Output, args: ["koMouseMove"] }] } });
 
 // 用于正确地分割字符串，包括表情符号
 const graphemeSplitter = new GraphemeSplitter();
@@ -5232,32 +5232,32 @@ const drawer = new Drawer();
 
 class CoverCellBase {
     constructor() {
-        this.config = input();
-        this.onlyDisplayBorder = input(false);
+        this.config = input(...(ngDevMode ? [undefined, { debugName: "config" }] : []));
+        this.onlyDisplayBorder = input(false, ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : []));
         this.isExpand = computed(() => {
             const { isExpand } = this.config();
             return isExpand;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isExpand" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: CoverCellBase, isStandalone: true, selector: "ai-table-cover-cell-base", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CoverCellBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: CoverCellBase, isStandalone: true, selector: "ai-table-cover-cell-base", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CoverCellBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CoverCellBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cover-cell-base',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], onlyDisplayBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyDisplayBorder", required: false }] }] } });
 
 class AITableCellLink extends CoverCellBase {
     constructor() {
         super(...arguments);
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
-        this.render = computed(() => this.config()?.render);
-        this.transformValue = computed(() => this.render()?.transformValue);
-        this.showLink = computed(() => !!this.transformValue()?.text);
+        this.render = computed(() => this.config()?.render, ...(ngDevMode ? [{ debugName: "render" }] : []));
+        this.transformValue = computed(() => this.render()?.transformValue, ...(ngDevMode ? [{ debugName: "transformValue" }] : []));
+        this.showLink = computed(() => !!this.transformValue()?.text, ...(ngDevMode ? [{ debugName: "showLink" }] : []));
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -5292,7 +5292,7 @@ class AITableCellLink extends CoverCellBase {
                 };
             }
             return;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
     }
     static { this.fieldType = AITableFieldType.link; }
     linkClick(e) {
@@ -5312,14 +5312,14 @@ class AITableCellLink extends CoverCellBase {
         const curMousePosition = getMousePosition(aiTable, x, y, coordinate, AITable.getVisibleFields(aiTable), context, targetName);
         handleMouseStyle(AI_TABLE_FIELD_HEAD_MORE, curMousePosition.areaType, coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellLink, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellLink, isStandalone: true, selector: "ai-table-link", usesInheritance: true, ngImport: i0, template: `
         @if (showLink()) {
             <ai-table-text [config]="textConfig()!" (koClick)="linkClick($event)" (koMouseMove)="linkMouseMove($event)"></ai-table-text>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellLink, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-link',
@@ -5339,12 +5339,12 @@ class AITableActionIcon {
         this.onMousemove = output();
         this.onMouseenter = output();
         this.onMouseleave = output();
-        this.config = input.required();
-        this.isHover = signal(false);
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : []));
         this.groupConfig = computed(() => {
             const { x, y, listening } = this.config();
             return { x, y, listening };
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
         this.squareShapeConfig = computed(() => {
             const { name, backgroundWidth, backgroundHeight, hoverFill: coverFill, size = DEFAULT_ICON_SIZE, strokeWidth = 1, cornerRadius, source } = this.config();
             return {
@@ -5357,7 +5357,7 @@ class AITableActionIcon {
                 cornerRadius,
                 source
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : []));
         this.iconGroupConfig = computed(() => {
             let { backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, scaleX, scaleY, offsetX, offsetY } = this.config();
             return {
@@ -5368,7 +5368,7 @@ class AITableActionIcon {
                 scaleX: scaleX || size / DEFAULT_ICON_SIZE,
                 scaleY: scaleY || size / DEFAULT_ICON_SIZE
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconGroupConfig" }] : []));
         this.iconConfig = computed(() => {
             let { type, data, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill, hoverFill: hoverFill, transformsEnabled = 'position' } = this.config();
             fill = fill || Colors.gray600;
@@ -5397,7 +5397,7 @@ class AITableActionIcon {
                 perfectDrawEnabled: false,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
     }
     koClick(e) {
         this.onClick.emit(e);
@@ -5417,8 +5417,8 @@ class AITableActionIcon {
         const { coordinate } = this.config();
         setMouseStyle('default', coordinate.container);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableActionIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableActionIcon, isStandalone: true, selector: "ai-table-action-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onMousemove: "onMousemove", onMouseenter: "onMouseenter", onMouseleave: "onMouseleave" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableActionIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableActionIcon, isStandalone: true, selector: "ai-table-action-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onClick: "onClick", onMousemove: "onMousemove", onMouseenter: "onMouseenter", onMouseleave: "onMouseleave" }, ngImport: i0, template: `
         <ko-group
             [config]="groupConfig()"
             (koClick)="koClick($event)"
@@ -5433,7 +5433,7 @@ class AITableActionIcon {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableActionIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableActionIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-action-icon',
@@ -5454,7 +5454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { onClick: [{ type: i0.Output, args: ["onClick"] }], onMousemove: [{ type: i0.Output, args: ["onMousemove"] }], onMouseenter: [{ type: i0.Output, args: ["onMouseenter"] }], onMouseleave: [{ type: i0.Output, args: ["onMouseleave"] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class CellBaseLayout {
     get minItemWidth() {
@@ -5705,7 +5705,7 @@ class AITableCellAttachment extends CoverCellBase {
                 });
             }
             return [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "attachments" }] : []));
         this.iconConfig = computed(() => {
             const { coordinate, render, field, recordId, readonly } = this.config();
             const offsetX = render.columnWidth - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_ACTION_COMMON_RIGHT_PADDING;
@@ -5730,18 +5730,18 @@ class AITableCellAttachment extends CoverCellBase {
                 cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
                 listening: true
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
     }
     static { this.fieldType = AITableFieldType.attachment; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellAttachment, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellAttachment, isStandalone: true, selector: "ai-table-attachments", usesInheritance: true, ngImport: i0, template: `
         @for (attachment of attachments(); track attachment.attachmentInfo._id) {
             <ko-image [config]="attachment"></ko-image>
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
     `, isInline: true, dependencies: [{ 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: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellAttachment, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellAttachment, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-attachments',
@@ -5785,7 +5785,7 @@ class AITableCellRichText extends CoverCellBase {
                 };
             }
             return;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
         this.iconConfig = computed(() => {
             const { coordinate, render, field, recordId, readonly } = this.config();
             const offsetX = render.columnWidth - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_ACTION_COMMON_RIGHT_PADDING;
@@ -5810,18 +5810,18 @@ class AITableCellRichText extends CoverCellBase {
                 cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
                 listening: true
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
     }
     static { this.fieldType = AITableFieldType.richText; }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellRichText, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellRichText, isStandalone: true, selector: "ai-table-rich-text", usesInheritance: true, ngImport: i0, template: `
         @if (textConfig()) {
             <ai-table-text [config]="textConfig()!"></ai-table-text>
         }
         <ai-table-action-icon [config]="iconConfig()"></ai-table-action-icon>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRichText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellRichText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-rich-text',
@@ -5915,7 +5915,7 @@ const createActiveCellBorder = (config) => {
 /**
  * 用于处理表格行或单元格的布局和绘制。
  * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
- * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
+ * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordLayout）扩展和使用
  */
 class Layout extends Drawer {
     constructor() {
@@ -6002,7 +6002,7 @@ class Layout extends Drawer {
     }
 }
 
-class AddRowLayout extends Layout {
+class AddRecordLayout extends Layout {
     renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
         super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
         const rowHeight = this.rowHeight;
@@ -6098,7 +6098,7 @@ class AddRowLayout extends Layout {
         });
     }
 }
-const addRowLayout = new AddRowLayout();
+const addRecordLayout = new AddRecordLayout();
 
 class MultiSelectLayout extends CellBaseLayout {
     constructor(render, cellLayoutOption = {}) {
@@ -6400,13 +6400,13 @@ class CellDrawer extends Drawer {
             case AITableFieldType.member:
             case AITableFieldType.createdBy:
             case AITableFieldType.updatedBy:
-                cellLayout = this.renderCellMember2(ctx, render);
+                cellLayout = this.renderCellMember(render);
                 break;
             case AITableFieldType.attachment:
-                cellLayout = this.renderCellAttachment2(render);
+                cellLayout = this.renderCellAttachment(render);
                 break;
             case AITableFieldType.checkbox:
-                return this.renderCellCheckbox(render, ctx);
+                return this.renderCellCheckbox(render);
             default:
                 return null;
         }
@@ -6414,7 +6414,7 @@ class CellDrawer extends Drawer {
             this.renderAtoms(ctx, { x, y }, cellLayout);
         }
     }
-    renderCellCheckbox(render, ctx) {
+    renderCellCheckbox(render) {
         const { x, y, columnWidth, transformValue, isCoverCell, isGroupFirstRender } = render;
         if (isCoverCell) {
             return;
@@ -6498,7 +6498,7 @@ class CellDrawer extends Drawer {
     renderCellSelect(ctx, render) {
         const { field } = render;
         if (field.settings?.is_multiple) {
-            return this.renderCellMultiSelect2(render, ctx);
+            return this.renderCellMultiSelect(render);
         }
         else {
             return this.renderSingleSelectCell(render, ctx);
@@ -6508,205 +6508,7 @@ class CellDrawer extends Drawer {
         const fieldOptionsMap = helpers.keyBy(field.settings.options || [], '_id');
         return (transformValue || []).filter((optionId) => !!fieldOptionsMap[optionId]);
     }
-    renderCellMultiSelect(render, ctx) {
-        const { x, y, field, columnWidth } = render;
-        let transformValue = this.getValidSelectedValue(field, render.transformValue);
-        if (!transformValue.length) {
-            return;
-        }
-        let currentX = x + AI_TABLE_CELL_PADDING;
-        const maxContainerWidth = columnWidth - 2 * AI_TABLE_CELL_PADDING;
-        const optionStyle = field.settings.option_style;
-        const fontStyle = `${DEFAULT_FONT_WEIGHT} ${AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE}px ${DEFAULT_FONT_FAMILY}`;
-        const isDotOrPiece = optionStyle === AITableSelectOptionStyle.dot || optionStyle === AITableSelectOptionStyle.piece;
-        let totalWidth = 0;
-        const cellItemInfoMap = new Map();
-        let drawableIndex = 0;
-        transformValue.forEach((optionId, index) => {
-            const item = field.settings.options?.find((option) => option._id === optionId);
-            const textWidth = getTextWidth(ctx, item?.text, fontStyle);
-            totalWidth += textWidth + 2 * AI_TABLE_CELL_PADDING;
-            if (index < transformValue.length - 1) {
-                totalWidth += AI_TABLE_CELL_MULTI_PADDING_LEFT;
-            }
-            if (isDotOrPiece) {
-                totalWidth += AI_TABLE_CELL_MULTI_DOT_RADIUS * 2 + AI_TABLE_CELL_MULTI_PADDING_LEFT;
-            }
-            if (totalWidth < maxContainerWidth || totalWidth === maxContainerWidth) {
-                drawableIndex = index;
-            }
-            cellItemInfoMap.set(optionId, { textWidth, item, offset: totalWidth });
-        });
-        const baseWidth = AI_TABLE_MIN_TEXT_WIDTH + AI_TABLE_CELL_PADDING * 2;
-        const minWidth = isDotOrPiece ? baseWidth + AI_TABLE_CELL_MULTI_DOT_RADIUS * 2 + AI_TABLE_CELL_MULTI_PADDING_LEFT : baseWidth;
-        if (transformValue[drawableIndex + 1]) {
-            const { offset: currentOffset } = cellItemInfoMap.get(transformValue[drawableIndex]);
-            const canDrawerNext = maxContainerWidth - currentOffset > minWidth;
-            drawableIndex = canDrawerNext ? drawableIndex + 1 : drawableIndex;
-            // 上面过程是  没有 +数字  的情况下最大能放几个；
-            const number = transformValue.length - (drawableIndex + 1);
-            if (number > 0) {
-                // 说明有 +数字，重新计算
-                const circleWidth = getTextWidth(ctx, `+{number}`, fontStyle) + 2 * AI_TABLE_CELL_PADDING;
-                const max = maxContainerWidth - AI_TABLE_CELL_MULTI_PADDING_LEFT - circleWidth;
-                // 如果当前已经超出了，看是否能容下当前的，不能就减去  1；
-                const currentItemHasOver = currentOffset > max;
-                if (currentItemHasOver) {
-                    const lastOffset = drawableIndex === 0 ? 0 : cellItemInfoMap.get(transformValue[drawableIndex - 1]);
-                    drawableIndex = max - lastOffset > minWidth ? drawableIndex : drawableIndex - 1;
-                }
-                else {
-                    // 还有剩余空间, 看是否能多渲染一个
-                    drawableIndex = max - currentOffset > minWidth ? drawableIndex + 1 : drawableIndex;
-                }
-            }
-        }
-        const circleText = `+${transformValue.length - (drawableIndex + 1)}`;
-        const circleWidth = transformValue.length - (drawableIndex + 1) > 0 ? getTextWidth(ctx, circleText, fontStyle) + 2 * AI_TABLE_CELL_PADDING : 0;
-        // 剩余空间
-        let remainSpace = maxContainerWidth - circleWidth - (circleWidth > 0 ? AI_TABLE_CELL_MULTI_PADDING_LEFT : 0);
-        for (let index = 0; index < transformValue.length; index++) {
-            const optionId = transformValue[index];
-            const bgConfig = {
-                x: currentX,
-                y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_OPTION_ITEM_HEIGHT) / 2,
-                height: AI_TABLE_OPTION_ITEM_HEIGHT,
-                radius: AI_TABLE_PIECE_RADIUS,
-                fill: Colors.gray100,
-                width: 0
-            };
-            const commonItem = (optionStyle, shape) => {
-                const baseWidth = isDotOrPiece
-                    ? AI_TABLE_CELL_MULTI_DOT_RADIUS * 2 + AI_TABLE_CELL_MULTI_PADDING_LEFT + AI_TABLE_CELL_PADDING * 2
-                    : AI_TABLE_CELL_PADDING * 2;
-                if (remainSpace < minWidth) {
-                    return;
-                }
-                const { textWidth, item } = cellItemInfoMap.get(optionId);
-                const completeWidth = baseWidth + textWidth;
-                if (index !== transformValue.length - 1) {
-                    remainSpace -= AI_TABLE_CELL_MULTI_PADDING_LEFT;
-                }
-                const bgWidth = remainSpace > completeWidth ? completeWidth : remainSpace;
-                bgConfig.width = bgWidth;
-                if (isDotOrPiece) {
-                    this.rect(bgConfig);
-                    if (shape === 'rect') {
-                        this.rect({
-                            x: bgConfig.x + AI_TABLE_CELL_PADDING,
-                            y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_CELL_MULTI_DOT_RADIUS * 2) / 2,
-                            width: AI_TABLE_CELL_MULTI_DOT_RADIUS * 2,
-                            height: AI_TABLE_CELL_MULTI_DOT_RADIUS * 2,
-                            radius: AI_TABLE_PIECE_RADIUS,
-                            fill: item?.bg_color ?? item?.color ?? Colors.primary
-                        });
-                    }
-                    else if (shape === 'arc') {
-                        this.arc({
-                            x: bgConfig.x + AI_TABLE_CELL_PADDING,
-                            y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_CELL_MULTI_DOT_RADIUS * 2) / 2 + AI_TABLE_CELL_MULTI_DOT_RADIUS,
-                            radius: AI_TABLE_CELL_MULTI_DOT_RADIUS,
-                            fill: item?.bg_color ?? item?.color ?? Colors.primary
-                        });
-                    }
-                    this.text({
-                        x: bgConfig.x + AI_TABLE_CELL_PADDING + AI_TABLE_CELL_MULTI_DOT_RADIUS * 2 + AI_TABLE_CELL_MULTI_PADDING_LEFT,
-                        y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE) / 2,
-                        text: this.textEllipsis({
-                            text: item.text,
-                            maxWidth: bgWidth - baseWidth,
-                            fontSize: AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE
-                        }).text,
-                        fillStyle: Colors.gray700,
-                        fontSize: AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE
-                    });
-                }
-                else if (optionStyle === AITableSelectOptionStyle.tag) {
-                    this.tag({
-                        x: bgConfig.x,
-                        y: bgConfig.y,
-                        width: bgConfig.width,
-                        text: this.textEllipsis({
-                            text: item.text,
-                            maxWidth: bgWidth - baseWidth,
-                            fontSize: AI_TABLE_TAG_FONT_SIZE
-                        }).text,
-                        radius: AI_TABLE_OPTION_ITEM_RADIUS,
-                        fontSize: AI_TABLE_TAG_FONT_SIZE,
-                        height: bgConfig.height,
-                        color: Colors.white,
-                        padding: AI_TABLE_CELL_PADDING,
-                        background: item?.bg_color ?? item?.color ?? Colors.primary
-                    });
-                }
-                else {
-                    this.rect(bgConfig);
-                    this.text({
-                        x: bgConfig.x + AI_TABLE_CELL_PADDING,
-                        y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_TAG_FONT_SIZE) / 2,
-                        text: this.textEllipsis({
-                            text: item.text,
-                            maxWidth: bgWidth - baseWidth,
-                            fontSize: AI_TABLE_TAG_FONT_SIZE
-                        }).text,
-                        fillStyle: Colors.gray700,
-                        fontSize: AI_TABLE_TAG_FONT_SIZE
-                    });
-                }
-                const currentWidth = bgConfig.width;
-                remainSpace -= currentWidth;
-                currentX += currentWidth + AI_TABLE_CELL_MULTI_PADDING_LEFT;
-            };
-            switch (optionStyle) {
-                case AITableSelectOptionStyle.dot:
-                    commonItem(AITableSelectOptionStyle.dot, 'arc');
-                    break;
-                case AITableSelectOptionStyle.piece:
-                    commonItem(AITableSelectOptionStyle.piece, 'rect');
-                    break;
-                case AITableSelectOptionStyle.tag:
-                    commonItem(AITableSelectOptionStyle.tag, '');
-                    break;
-                default:
-                    commonItem(AITableSelectOptionStyle.text, '');
-                    break;
-            }
-        }
-        if (circleWidth > 0) {
-            if (optionStyle === AITableSelectOptionStyle.tag) {
-                this.tag({
-                    x: currentX,
-                    y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_OPTION_ITEM_HEIGHT) / 2,
-                    width: circleWidth,
-                    height: AI_TABLE_OPTION_ITEM_HEIGHT,
-                    text: circleText,
-                    background: Colors.gray100,
-                    color: Colors.gray700,
-                    radius: AI_TABLE_OPTION_ITEM_RADIUS,
-                    padding: AI_TABLE_CELL_PADDING,
-                    fontSize: AI_TABLE_TAG_FONT_SIZE
-                });
-            }
-            else {
-                this.rect({
-                    x: currentX,
-                    y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_OPTION_ITEM_HEIGHT) / 2,
-                    width: circleWidth,
-                    height: AI_TABLE_OPTION_ITEM_HEIGHT,
-                    fill: Colors.gray100,
-                    radius: AI_TABLE_PIECE_RADIUS
-                });
-                this.text({
-                    x: currentX + AI_TABLE_CELL_PADDING,
-                    y: y + (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_TAG_FONT_SIZE) / 2,
-                    text: circleText,
-                    fillStyle: Colors.gray700,
-                    fontSize: AI_TABLE_TAG_FONT_SIZE
-                });
-            }
-        }
-    }
-    renderCellMultiSelect2(render, ctx) {
+    renderCellMultiSelect(render) {
         const { field } = render;
         let transformValue = this.getValidSelectedValue(field, render.transformValue);
         if (!transformValue.length) {
@@ -6971,118 +6773,10 @@ class CellDrawer extends Drawer {
             });
         }
     }
-    renderCellMember(render, ctx) {
-        const { references, x, y, field, transformValue, rowHeight, columnWidth, isActive } = render;
-        if (!transformValue?.length || !references) {
-            return;
-        }
-        const settings = field.settings;
-        const avatarSize = AI_TABLE_MEMBER_AVATAR_SIZE;
-        const itemHeight = AI_TABLE_CELL_MEMBER_ITEM_HEIGHT;
-        const isOperating = isActive;
-        const isMultiple = settings?.is_multiple;
-        let currentX = AI_TABLE_CELL_PADDING;
-        let currentY = (AI_TABLE_ROW_BLANK_HEIGHT - avatarSize) / 2;
-        const itemOtherWidth = avatarSize + AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT;
-        const maxHeight = isActive ? 130 - AI_TABLE_CELL_MULTI_PADDING_TOP : rowHeight - AI_TABLE_CELL_MULTI_PADDING_TOP;
-        const maxTextWidth = isOperating
-            ? columnWidth - 2 * AI_TABLE_CELL_PADDING - itemOtherWidth - AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE - 12
-            : columnWidth - 2 * AI_TABLE_CELL_PADDING - itemOtherWidth;
-        const listCount = transformValue.length;
-        let isOverflow = false;
-        for (let index = 0; index < listCount; index++) {
-            const userInfo = references?.members[transformValue[index]];
-            if (!userInfo)
-                continue;
-            const { uid, display_name, avatar } = userInfo;
-            const itemWidth = AITableAvatarSize.size24 + (isMultiple ? AI_TABLE_CELL_MEMBER_ITEM_PADDING : 0);
-            currentX = AI_TABLE_CELL_PADDING + index * itemWidth;
-            let realMaxTextWidth = maxTextWidth < 0 ? 0 : maxTextWidth;
-            if (index === 0 && isOperating) {
-                const operatingMaxWidth = maxTextWidth - (AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE + 4);
-                // item No space to display, then perform a line feed
-                if (operatingMaxWidth <= 20) {
-                    currentX = AI_TABLE_CELL_PADDING;
-                    currentY += AI_TABLE_OPTION_ITEM_HEIGHT + AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP;
-                }
-                else {
-                    realMaxTextWidth = operatingMaxWidth;
-                }
-            }
-            let isMore = currentX + itemWidth > columnWidth - 2 * AI_TABLE_CELL_PADDING;
-            if (columnWidth != null) {
-                // 在非活动状态下，当超出列宽时，不会渲染后续内容
-                if (currentX >= columnWidth - 2 * AI_TABLE_CELL_PADDING) {
-                    break;
-                }
-                // 如果不是非活动状态的最后一行，则换行渲染溢出内容
-                if (currentX > columnWidth - 2 * AI_TABLE_CELL_PADDING) {
-                    currentX = AI_TABLE_CELL_PADDING;
-                }
-                if (currentX + itemWidth > columnWidth - AI_TABLE_CELL_PADDING) {
-                    currentX = AI_TABLE_CELL_PADDING;
-                    currentY += itemHeight;
-                }
-                if (currentY >= maxHeight) {
-                    isOverflow = true;
-                }
-            }
-            if (ctx) {
-                this.avatar({
-                    x: x + currentX,
-                    y: y + currentY,
-                    url: avatar,
-                    id: uid,
-                    title: getAvatarShortName(display_name),
-                    bgColor: getAvatarBgColor(display_name),
-                    type: AITableAvatarType.member,
-                    size: AITableAvatarSize.size24
-                });
-                // 在非多选模式下显示名称
-                if (!isMultiple) {
-                    const textX = x + currentX + AITableAvatarSize.size24 + AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT;
-                    this.text({
-                        x: textX,
-                        y: y + AI_TABLE_ROW_BLANK_HEIGHT / 2,
-                        text: this.textEllipsis({
-                            text: display_name || '',
-                            maxWidth: maxTextWidth,
-                            fontSize: AI_TABLE_COMMON_FONT_SIZE
-                        }).text,
-                        fillStyle: this.colors.gray800,
-                        fontSize: AI_TABLE_COMMON_FONT_SIZE,
-                        verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE
-                    });
-                }
-                if (isMore) {
-                    ctx.save();
-                    ctx.globalAlpha = 0.3;
-                    this.rect({
-                        x: x + currentX,
-                        y: y + currentY,
-                        width: AITableAvatarSize.size24,
-                        height: AITableAvatarSize.size24,
-                        radius: 24,
-                        fill: this.colors.black
-                    });
-                    ctx.restore();
-                    this.text({
-                        x: x + currentX + FONT_SIZE_SM / 2,
-                        y: y + AI_TABLE_ROW_BLANK_HEIGHT / 2,
-                        fillStyle: this.colors.white,
-                        fontSize: FONT_SIZE_SM,
-                        text: `+${listCount - index - 1}`,
-                        verticalAlign: DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE
-                    });
-                }
-            }
-        }
-    }
-    renderCellMember2(ctx, render) {
-        const { x, y } = render;
+    renderCellMember(render) {
         return new MemberLayout(render, {});
     }
-    renderCellAttachment2(render) {
+    renderCellAttachment(render) {
         const { transformValue } = render;
         if (isUndefinedOrNull(transformValue)) {
             return;
@@ -7096,7 +6790,7 @@ const cellDrawer = new CellDrawer();
  * 绘制行的布局，通过直接操作 Canvas 提供高效的渲染方法。
  * 它继承自 Layout 类，包含了用于绘制行中单元格（尤其是首列和尾列）的几个方法
  */
-class RecordRowLayout extends Layout {
+class RecordLayout extends Layout {
     renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
         super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
         const rowHeight = this.rowHeight;
@@ -7211,7 +6905,7 @@ class RecordRowLayout extends Layout {
         this.renderFrozenShadow();
     }
 }
-const recordRowLayout = new RecordRowLayout();
+const recordLayout = new RecordLayout();
 
 class GroupLayout extends Layout {
     renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
@@ -7230,11 +6924,10 @@ class GroupLayout extends Layout {
         if (!this.isFirst)
             return;
         const { row, indexStyle } = config;
-        const { _id: recordId, type, depth = 0, groupValue, fieldId, isCollapsed } = row;
+        const { _id: groupValue, fieldId } = row;
         const { field, style, aiTable } = render;
         const y = this.y;
         const rowHeight = this.rowHeight;
-        const columnWidth = this.columnWidth;
         const { fill: indexFill } = indexStyle || {};
         if (!this.hiddenIndexColumn) {
             this.customRect({
@@ -7280,7 +6973,7 @@ class GroupLayout extends Layout {
             });
         }
     }
-    renderCommonCellBorder({ style }) {
+    renderCommonCell({ style }) {
         const { fill, stroke } = style || {};
         const colors = AITable.getColors();
         // 背景、边框
@@ -7305,7 +6998,7 @@ class GroupLayout extends Layout {
     render(render, config) {
         const { style, isHoverRow, isCheckedRow } = config;
         this.renderFirstCell(render, config);
-        this.renderCommonCellBorder({ style });
+        this.renderCommonCell({ style });
         this.renderLastCell({ style, isHoverRow, isCheckedRow });
         this.renderFrozenShadow();
     }
@@ -7326,8 +7019,8 @@ const createCells = (config) => {
     const xIsScroll = aiTable.context.scrollState().scrollLeft > 0;
     // 初始化绘图上下文, 为后续的绘制操作做准备
     cellDrawer.initCtx(ctx);
-    addRowLayout.initCtx(ctx);
-    recordRowLayout.initCtx(ctx);
+    addRecordLayout.initCtx(ctx);
+    recordLayout.initCtx(ctx);
     groupLayout.initCtx(ctx);
     const coverCell = getCoverCell(aiTable);
     const frozenColumnCount = aiTable.context?.frozenColumnCount() || 1;
@@ -7359,7 +7052,7 @@ const createCells = (config) => {
                 case AITableRowType.add: {
                     const isHoverRow = isHover && targetName === AI_TABLE_ROW_ADD_BUTTON;
                     const isCheckedRow = aiTable.selection().selectedRecords.has(row._id);
-                    addRowLayout.init({
+                    addRecordLayout.init({
                         x,
                         y,
                         rowIndex,
@@ -7374,7 +7067,7 @@ const createCells = (config) => {
                         readonly: aiTable.context?.readonly?.(),
                         frozenColumnCount
                     });
-                    addRowLayout.render({
+                    addRecordLayout.render({
                         isHoverRow,
                         isCheckedRow,
                         isDisabled: maxRecords ? aiTable.records().length >= maxRecords : false
@@ -7386,7 +7079,7 @@ const createCells = (config) => {
                     const cell = [recordId, fieldId];
                     let background = getCellBackground(cell, isHover, targetName, aiTable);
                     let indexBackground = getIndexCellBackground(cell, isHover, targetName, aiTable);
-                    recordRowLayout.init({
+                    recordLayout.init({
                         x,
                         y,
                         rowIndex,
@@ -7402,7 +7095,7 @@ const createCells = (config) => {
                         frozenColumnCount,
                         xIsScroll
                     });
-                    recordRowLayout.render({
+                    recordLayout.render({
                         row,
                         style: { fill: background },
                         indexStyle: { fill: indexBackground },
@@ -7587,12 +7280,12 @@ const isHoverRecord = (isHover, targetName) => {
 
 class AITableIcon {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.koClick = output();
         this.groupConfig = computed(() => {
             const { x, y, listening } = this.config();
             return { x, y, listening };
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
         this.squareShapeConfig = computed(() => {
             const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
             return {
@@ -7604,7 +7297,7 @@ class AITableIcon {
                 cornerRadius,
                 opacity
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "squareShapeConfig" }] : []));
         this.iconConfig = computed(() => {
             const { type, data, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, stroke, strokeWidth = 1, scaleX, scaleY, offsetX, offsetY, rotation, fill = Colors.gray600, transformsEnabled = 'position', disabled } = this.config();
             let pathData = data;
@@ -7637,17 +7330,17 @@ class AITableIcon {
                 perfectDrawEnabled: false,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koClick: "koClick" }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()" (koClick)="koClick.emit($event)">
             <ko-rect [config]="squareShapeConfig()"></ko-rect>
             <ko-path [config]="iconConfig()"></ko-path>
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-icon',
@@ -7660,17 +7353,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], koClick: [{ type: i0.Output, args: ["koClick"] }] } });
 
 class AITableAddField {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         this.x = computed(() => {
             const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
             const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
             return lastColumnWidth + lastColumnOffset;
-        });
+        }, ...(ngDevMode ? [{ debugName: "x" }] : []));
         this.rectConfig = computed(() => {
             const { pointPosition: { targetName }, readonly, maxFields, aiTable } = this.config();
             const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
@@ -7695,7 +7388,7 @@ class AITableAddField {
                 listening: true,
                 fill
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "rectConfig" }] : []));
         this.addIconConfig = computed(() => {
             const { readonly, maxFields, aiTable } = this.config();
             const offsetY = (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ICON_COMMON_SIZE) / 2;
@@ -7708,10 +7401,10 @@ class AITableAddField {
                 visible: !readonly,
                 disabled: maxFields ? aiTable.fields().length >= maxFields : false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "addIconConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group [config]="{ x: x() }">
             <ko-group>
                 <ko-rect [config]="rectConfig()"></ko-rect>
@@ -7724,7 +7417,7 @@ class AITableAddField {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableAddField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableAddField, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-add-field',
@@ -7743,11 +7436,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableCells {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.cellsShapeConfig = computed(() => {
             const { coordinate, columnStartIndex } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -7760,12 +7453,12 @@ class AITableCells {
                     columnStartIndex: Math.max(columnStartIndex, frozenColumnCount)
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellsShapeConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableCells, isStandalone: true, selector: "ai-table-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ko-shape [config]="cellsShapeConfig()"></ko-shape> `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableCells, isStandalone: true, selector: "ai-table-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ko-shape [config]="cellsShapeConfig()"></ko-shape> `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cells',
@@ -7773,11 +7466,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFieldIcon {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.iconConfig = computed(() => {
             const { field, x, y, width, height, fill, path } = this.config();
             const data = getFieldIconPath(field) || path;
@@ -7790,12 +7483,12 @@ class AITableFieldIcon {
                 data,
                 fill
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableFieldIcon, isStandalone: true, selector: "ai-table-field-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ai-table-icon [config]="iconConfig()"></ai-table-icon> `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableFieldIcon, isStandalone: true, selector: "ai-table-field-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: ` <ai-table-icon [config]="iconConfig()"></ai-table-icon> `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldIcon, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-icon',
@@ -7803,11 +7496,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFieldHead {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.textOffset = AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
         this.textMeasure = TextMeasure();
         this.availableTextWidth = computed(() => {
@@ -7816,7 +7509,7 @@ class AITableFieldHead {
                 (iconVisible
                     ? 2 * (AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE)
                     : 2 * AI_TABLE_CELL_PADDING + AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE));
-        });
+        }, ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : []));
         this.textData = computed(() => {
             const fieldName = this.config().field.name.replace(/\r|\n/g, ' ');
             this.textMeasure.setFont({ fontSize: DEFAULT_FONT_SIZE });
@@ -7826,13 +7519,13 @@ class AITableFieldHead {
                 height,
                 isOverflow
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "textData" }] : []));
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
                 y: this.config().y
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
         this.bgConfig = computed(() => {
             const { field, width, height, stroke, isSelected, iconVisible } = this.config();
             return {
@@ -7849,7 +7542,7 @@ class AITableFieldHead {
                 strokeWidth: 1,
                 opacity: 1
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : []));
         this.fieldIconConfig = computed(() => {
             const { field, height } = this.config();
             return {
@@ -7861,7 +7554,7 @@ class AITableFieldHead {
                 fill: Colors.gray600,
                 path: IconPathMap[field.icon]
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldIconConfig" }] : []));
         this.textConfig = computed(() => {
             const { field, height } = this.config();
             return {
@@ -7872,7 +7565,7 @@ class AITableFieldHead {
                 text: field.name,
                 lineHeight: AI_TABLE_TEXT_LINE_HEIGHT
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
         this.moreIconConfig = computed(() => {
             const { field, width, height, isHoverIcon, isSelected } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -7890,7 +7583,7 @@ class AITableFieldHead {
                 backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
                 cornerRadius: 4
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "moreIconConfig" }] : []));
         this.fieldOpacityLineConfig = computed(() => {
             const { field, width, height } = this.config();
             return {
@@ -7904,10 +7597,10 @@ class AITableFieldHead {
                 stroke: Colors.transparent,
                 strokeWidth: 6
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldOpacityLineConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldHead, isStandalone: true, selector: "ai-table-field-head", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldHead, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldHead, isStandalone: true, selector: "ai-table-field-head", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()">
             <ko-rect [config]="bgConfig()"></ko-rect>
             <ko-group>
@@ -7921,7 +7614,7 @@ class AITableFieldHead {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableFieldIcon, selector: "ai-table-field-icon", inputs: ["config"] }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldHead, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldHead, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-head',
@@ -7941,11 +7634,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape, AITableFieldIcon, AITableTextComponent, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFrozenCells {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.frozenCellsConfig = computed(() => {
             const { coordinate } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -7959,12 +7652,12 @@ class AITableFrozenCells {
                     columnStopIndex: frozenColumnCount - 1
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenCellsConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableFrozenCells, isStandalone: true, selector: "ai-table-frozen-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-shape [config]="frozenCellsConfig()"></ko-shape>`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableFrozenCells, isStandalone: true, selector: "ai-table-frozen-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-shape [config]="frozenCellsConfig()"></ko-shape>`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-cells',
@@ -7972,7 +7665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 const createColumnHeads = (config) => {
     const { coordinate, columnStartIndex, columnStopIndex, pointPosition, aiTable } = config;
@@ -8026,30 +7719,30 @@ const createColumnHeads = (config) => {
 
 class AITableFrozenColumnHeads {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.textMeasure = TextMeasure();
         this.coordinate = computed(() => {
             const config = this.config();
             if (!config)
                 return null;
             return config.coordinate;
-        });
+        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : []));
         this.hiddenIndexColumn = computed(() => {
             const context = this.context();
             if (!context)
                 return false;
             return context?.aiFieldConfig()?.hiddenIndexColumn;
-        });
+        }, ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : []));
         this.context = computed(() => {
             const config = this.config();
             if (!config)
                 return null;
             return config?.aiTable.context;
-        });
+        }, ...(ngDevMode ? [{ debugName: "context" }] : []));
         this.readonly = computed(() => {
             const context = this.context();
             return !!context?.readonly?.();
-        });
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.isChecked = computed(() => {
             const config = this.config();
             if (!config)
@@ -8061,14 +7754,14 @@ class AITableFrozenColumnHeads {
                     ? AITableSelectAllState.none
                     : AITableSelectAllState.partial;
             return selectedAllState === AITableSelectAllState.all;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
         this.fieldHeadHeight = computed(() => {
             const coord = this.coordinate();
             if (!coord)
                 return 0;
             // return coord.rowInitSize;
             return AI_TABLE_FIELD_HEAD_HEIGHT;
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldHeadHeight" }] : []));
         this.headConfigs = computed(() => {
             const coord = this.coordinate();
             if (!coord)
@@ -8078,7 +7771,7 @@ class AITableFrozenColumnHeads {
                 columnStartIndex: 0,
                 columnStopIndex: coord.frozenColumnCount - 1
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : []));
         this.dragHeadBgConfig = computed(() => {
             return {
                 x: AI_TABLE_OFFSET,
@@ -8088,7 +7781,7 @@ class AITableFrozenColumnHeads {
                 fill: Colors.white,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "dragHeadBgConfig" }] : []));
         this.numberHeadBgConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -8101,7 +7794,7 @@ class AITableFrozenColumnHeads {
                 fill: Colors.white,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "numberHeadBgConfig" }] : []));
         this.topLineConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -8114,7 +7807,7 @@ class AITableFrozenColumnHeads {
                 strokeWidth: 1,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "topLineConfig" }] : []));
         this.bottomLineConfig = computed(() => {
             const ctx = this.context();
             if (!ctx)
@@ -8127,7 +7820,7 @@ class AITableFrozenColumnHeads {
                 strokeWidth: 1,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "bottomLineConfig" }] : []));
         this.iconConfig = computed(() => {
             return {
                 name: AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX,
@@ -8138,7 +7831,7 @@ class AITableFrozenColumnHeads {
                     ? Colors.primary
                     : Colors.gray300
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
         this.textConfig = computed(() => {
             const text = AI_TABLE_INDEX_FIELD_TEXT;
             const lineHeight = AI_TABLE_TEXT_LINE_HEIGHT;
@@ -8151,7 +7844,7 @@ class AITableFrozenColumnHeads {
                 text,
                 lineHeight
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
         this.headBgConfig = computed(() => {
             const coord = this.coordinate();
             const ctx = this.context();
@@ -8168,7 +7861,7 @@ class AITableFrozenColumnHeads {
                 listening: false,
                 zIndex: 10
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "headBgConfig" }] : []));
         this.cellLinesConfig = computed(() => {
             const coord = this.coordinate();
             const ctx = this.context();
@@ -8203,10 +7896,10 @@ class AITableFrozenColumnHeads {
                     zIndex: 10
                 }
             ];
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellLinesConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-rect [config]="headBgConfig()"></ko-rect>
         @if (!hiddenIndexColumn()) {
             <ko-rect [config]="dragHeadBgConfig()"></ko-rect>
@@ -8230,7 +7923,7 @@ class AITableFrozenColumnHeads {
         }
     `, isInline: true, dependencies: [{ 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: AITableFieldHead, selector: "ai-table-field-head", inputs: ["config"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenColumnHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenColumnHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-column-heads',
@@ -8260,11 +7953,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape, AITableFieldHead, AITableIcon, AITableTextComponent, KoContainer],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFrozenPlaceholderCells {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.frozenPlaceHolderCellsConfig = computed(() => {
             const { coordinate } = this.config();
             return getPlaceHolderCellsConfigs({
@@ -8272,16 +7965,16 @@ class AITableFrozenPlaceholderCells {
                 columnStartIndex: 0,
                 columnStopIndex: coordinate.frozenColumnCount - 1
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenPlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFrozenPlaceholderCells, isStandalone: true, selector: "ai-table-frozen-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenPlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFrozenPlaceholderCells, isStandalone: true, selector: "ai-table-frozen-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (item of frozenPlaceHolderCellsConfig(); track $index) {
             <ko-rect [config]="item"></ko-rect>
         }
     `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenPlaceholderCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenPlaceholderCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-placeholder-cells',
@@ -8293,11 +7986,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableColumnHeads {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.headConfigs = computed(() => {
             const { coordinate, columnStartIndex } = this.config();
             const { frozenColumnCount } = coordinate;
@@ -8305,16 +7998,16 @@ class AITableColumnHeads {
                 ...this.config(),
                 columnStartIndex: Math.max(columnStartIndex, frozenColumnCount)
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableColumnHeads, isStandalone: true, selector: "ai-table-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableColumnHeads, isStandalone: true, selector: "ai-table-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of headConfigs(); track $index) {
             <ai-table-field-head [config]="config"></ai-table-field-head>
         }
     `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldHead, selector: "ai-table-field-head", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableColumnHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableColumnHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-column-heads',
@@ -8326,23 +8019,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [AITableFieldHead],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableHoverRowHeads {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.pointPosition = computed(() => {
             return this.config().aiTable.context.pointPosition();
-        });
+        }, ...(ngDevMode ? [{ debugName: "pointPosition" }] : []));
         this.headConfigs = computed(() => {
             return this.createHoverRowHeads(this.pointPosition());
-        });
+        }, ...(ngDevMode ? [{ debugName: "headConfigs" }] : []));
         this.readonly = computed(() => {
             return this.config().readonly;
-        });
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.hiddenRowDrag = computed(() => {
             return this.config()?.aiTable.context?.aiFieldConfig()?.hiddenRowDrag;
-        });
+        }, ...(ngDevMode ? [{ debugName: "hiddenRowDrag" }] : []));
         this.createHoverRowHeads = (pointPosition) => {
             const { coordinate, rowStartIndex, rowStopIndex, aiTable } = this.config();
             const context = aiTable.context;
@@ -8410,8 +8103,8 @@ class AITableHoverRowHeads {
             return headConfigs;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableHoverRowHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableHoverRowHeads, isStandalone: true, selector: "ai-table-hover-row-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableHoverRowHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableHoverRowHeads, isStandalone: true, selector: "ai-table-hover-row-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of headConfigs(); track config.recordId) {
             <ko-group [config]="{ x: 0, y: config.y, name: 'hover-heads' }">
                 @if (config.bgConfig) {
@@ -8427,7 +8120,7 @@ class AITableHoverRowHeads {
         }
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableHoverRowHeads, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableHoverRowHeads, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-hover-row-heads',
@@ -8449,15 +8142,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableOtherRows {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.AITableRowType = AITableRowType;
         this.otherConfigs = computed(() => {
             return this.createOtherRows(this.config());
-        });
+        }, ...(ngDevMode ? [{ debugName: "otherConfigs" }] : []));
         this.createOtherRows = (config) => {
             const { coordinate, rowStartIndex, rowStopIndex, aiTable, maxRecords } = config;
             const otherRowConfigs = [];
@@ -8490,8 +8183,8 @@ class AITableOtherRows {
             return otherRowConfigs;
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableOtherRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableOtherRows, isStandalone: true, selector: "ai-table-other-rows", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableOtherRows, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableOtherRows, isStandalone: true, selector: "ai-table-other-rows", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (config of otherConfigs(); track $index) {
             @switch (config.type) {
                 @case (AITableRowType.add) {
@@ -8501,7 +8194,7 @@ class AITableOtherRows {
         }
     `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableOtherRows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableOtherRows, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-other-rows',
@@ -8517,23 +8210,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITablePlaceholderCells {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.frozenPlaceHolderCellsConfig = computed(() => {
             return getPlaceHolderCellsConfigs(this.config());
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenPlaceHolderCellsConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITablePlaceholderCells, isStandalone: true, selector: "ai-table-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITablePlaceholderCells, isStandalone: true, selector: "ai-table-placeholder-cells", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (item of frozenPlaceHolderCellsConfig(); track $index) {
             <ko-rect [config]="item"></ko-rect>
         }
     `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-placeholder-cells',
@@ -8545,11 +8238,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableExpandRecord {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.shouldShowIcon = computed(() => {
             const { aiTable, rowStartIndex, rowStopIndex } = this.config();
             const context = aiTable.context;
@@ -8558,7 +8251,7 @@ class AITableExpandRecord {
             const { rowIndex: pointRowIndex } = context.pointPosition();
             const row = context.linearRows()[pointRowIndex];
             return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
-        });
+        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
         this.expandIconConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
             const context = aiTable.context;
@@ -8585,10 +8278,10 @@ class AITableExpandRecord {
                     })
                     : undefined
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group>
             @if (shouldShowIcon()) {
                 <ai-table-icon [config]="expandIconConfig()"></ai-table-icon>
@@ -8596,7 +8289,7 @@ class AITableExpandRecord {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableExpandRecord, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableExpandRecord, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-expand-record',
@@ -8610,12 +8303,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableBackground {
     constructor() {
-        this.config = input.required();
-        this.isActive = input(false);
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.isActive = input(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
         this.koClick = output();
         this.hover = output();
         this.koMouseenter = output();
@@ -8623,14 +8316,14 @@ class AITableBackground {
         this.groupConfig = computed(() => {
             const { x, y } = this.config();
             return { x, y, listening: false };
-        });
-        this.isHover = model(false);
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
+        this.isHover = model(false, ...(ngDevMode ? [{ debugName: "isHover" }] : []));
         this.isShowSpecialBorderConfig = computed(() => {
             const { borders } = this.config();
             const stroke = this.stroke();
             const strokeWidth = this.strokeWidth();
             return borders && stroke && strokeWidth && ___default.some(borders, (item) => !item) && ___default.some(borders, (item) => !!item);
-        });
+        }, ...(ngDevMode ? [{ debugName: "isShowSpecialBorderConfig" }] : []));
         this.borderLinesConfig = computed(() => {
             const { borders, height, width } = this.config();
             const stroke = this.stroke();
@@ -8678,21 +8371,21 @@ class AITableBackground {
                 });
             }
             return result;
-        });
+        }, ...(ngDevMode ? [{ debugName: "borderLinesConfig" }] : []));
         this.stroke = computed(() => {
             const { stroke, hoverStroke } = this.config();
             const active = this.isHover() || this.isActive();
             return active ? hoverStroke || stroke : stroke;
-        });
+        }, ...(ngDevMode ? [{ debugName: "stroke" }] : []));
         this.strokeWidth = computed(() => {
             const { strokeWidth, hoverStrokeWidth } = this.config();
             const active = this.isHover() || this.isActive();
             return active ? hoverStrokeWidth || strokeWidth : strokeWidth;
-        });
+        }, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : []));
         this.containerConfig = computed(() => {
             const { x, y } = this.config();
             return { x, y };
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerConfig" }] : []));
         this.bgConfig = computed(() => {
             const { name, width, height, fill = Colors.transparent, opacity, hoverFill, hoverOpacity, listening, borders } = this.config();
             const [top, right, bottom, left] = borders || [false, false, false, false];
@@ -8713,7 +8406,7 @@ class AITableBackground {
                 result.strokeWidth = this.strokeWidth();
             }
             return result;
-        });
+        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : []));
     }
     onClick(e) {
         this.koClick.emit(e);
@@ -8735,8 +8428,8 @@ class AITableBackground {
         this.koMouseleave.emit(e);
         this.hover.emit(this.isHover());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableBackground, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableBackground, isStandalone: true, selector: "ai-table-background", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koClick: "koClick", hover: "hover", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", isHover: "isHoverChange" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableBackground, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableBackground, isStandalone: true, selector: "ai-table-background", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isHover: { classPropertyName: "isHover", publicName: "isHover", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { koClick: "koClick", hover: "hover", koMouseenter: "koMouseenter", koMouseleave: "koMouseleave", isHover: "isHoverChange" }, ngImport: i0, template: `
         <ko-group [config]="containerConfig()">
             <ko-group>
                 <ko-rect
@@ -8755,7 +8448,7 @@ class AITableBackground {
         </ko-group>
     `, isInline: true, dependencies: [{ 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: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableBackground, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableBackground, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-background',
@@ -8780,11 +8473,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape, KoContainer],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], koClick: [{ type: i0.Output, args: ["koClick"] }], hover: [{ type: i0.Output, args: ["hover"] }], koMouseenter: [{ type: i0.Output, args: ["koMouseenter"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], isHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHover", required: false }] }, { type: i0.Output, args: ["isHoverChange"] }] } });
 
 class AITableShadow {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.shadowConfig = computed(() => {
             const { visible, x, y, width = AI_TABLE_SHADOW_DEFAULT_WIDTH, height } = this.config();
             return {
@@ -8797,12 +8490,12 @@ class AITableShadow {
                 fillLinearGradientEndPoint: { x: width, y: 0 },
                 fillLinearGradientColorStops: [0, 'rgba(0,0,0,0.05)', 1, Colors.transparent]
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "shadowConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableShadow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableShadow, isStandalone: true, selector: "ai-table-shadow", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ko-rect [config]="shadowConfig()"></ko-rect>`, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableShadow, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableShadow, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-shadow',
@@ -8810,20 +8503,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableScrollableGroup {
     constructor() {
-        this.config = input.required();
-        this.contentTemplate = input.required();
-        this.parentContainer = input();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.contentTemplate = input.required(...(ngDevMode ? [{ debugName: "contentTemplate" }] : []));
+        this.parentContainer = input(...(ngDevMode ? [undefined, { debugName: "parentContainer" }] : []));
         this.scrollPosition = output();
-        this.displayScrollbarTime = signal(null);
-        this.hiddenScrollbar = signal(true);
-        this.isHoverScrollbar = signal(false);
+        this.displayScrollbarTime = signal(null, ...(ngDevMode ? [{ debugName: "displayScrollbarTime" }] : []));
+        this.hiddenScrollbar = signal(true, ...(ngDevMode ? [{ debugName: "hiddenScrollbar" }] : []));
+        this.isHoverScrollbar = signal(false, ...(ngDevMode ? [{ debugName: "isHoverScrollbar" }] : []));
         // 滚动位置信号
-        this.scrollX = signal(0);
-        this.scrollY = signal(0);
+        this.scrollX = signal(0, ...(ngDevMode ? [{ debugName: "scrollX" }] : []));
+        this.scrollY = signal(0, ...(ngDevMode ? [{ debugName: "scrollY" }] : []));
         // 容器配置
         this.containerConfig = computed(() => {
             const { x = 0, y = 0, width, height } = this.config();
@@ -8840,7 +8533,7 @@ class AITableScrollableGroup {
                 clipHeight: height,
                 name: 'scrollable-group'
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerConfig" }] : []));
         this.bgConfig = computed(() => {
             const { x = 0, y = 0, width, height, bgName } = this.config();
             const config = {
@@ -8855,7 +8548,7 @@ class AITableScrollableGroup {
                 config.name = bgName;
             }
             return config;
-        });
+        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : []));
         // 内容区域配置
         this.contentConfig = computed(() => {
             if (this.config().contentNotScrollbar) {
@@ -8868,17 +8561,17 @@ class AITableScrollableGroup {
                 offsetX: this.scrollX(),
                 offsetY: this.scrollY()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "contentConfig" }] : []));
         // 是否显示竖向滚动条
         this.showVerticalScrollbar = computed(() => {
             const { height, contentHeight, verticalScrollbar } = this.config();
             return verticalScrollbar && contentHeight > height;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showVerticalScrollbar" }] : []));
         // 是否显示横向滚动条
         this.showHorizontalScrollbar = computed(() => {
             const { width, contentWidth, horizontalScrollbar } = this.config();
             return horizontalScrollbar && contentWidth > width;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showHorizontalScrollbar" }] : []));
         // 竖向滚动条配置
         this.verticalScrollbarConfig = computed(() => {
             const { width, scrollbarSize = 12 } = this.config();
@@ -8888,7 +8581,7 @@ class AITableScrollableGroup {
                 width: scrollbarSize,
                 height: this.verticalScrollbarHeight()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalScrollbarConfig" }] : []));
         // 横向滚动条配置
         this.horizontalScrollbarConfig = computed(() => {
             const { height, scrollbarSize = 12 } = this.config();
@@ -8898,7 +8591,7 @@ class AITableScrollableGroup {
                 width: this.horizontalScrollbarHeight(),
                 height: scrollbarSize
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalScrollbarConfig" }] : []));
         // 竖向滚动条轨道配置
         this.verticalTrackConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarTrackColor, height } = this.config();
@@ -8910,7 +8603,7 @@ class AITableScrollableGroup {
                 fill: scrollbarTrackColor,
                 cornerRadius: 2
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalTrackConfig" }] : []));
         // 横向滚动条轨道配置
         this.horizontalTrackConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarTrackColor } = this.config();
@@ -8922,40 +8615,40 @@ class AITableScrollableGroup {
                 fill: scrollbarTrackColor,
                 cornerRadius: 2
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalTrackConfig" }] : []));
         this.verticalThumbMinY = computed(() => {
             const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
             return getAbsolutePositionY;
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalThumbMinY" }] : []));
         // 垂直滚动条滑块的最大Y坐标
         this.verticalThumbMaxY = computed(() => {
             const { height, contentHeight } = this.config();
             const getAbsolutePositionY = this.verticalTrack.getNode().getAbsolutePosition().y;
             return getAbsolutePositionY + height - this.verticalThumbHeight();
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalThumbMaxY" }] : []));
         // 横向滚动条滑块的最小X坐标
         this.horizontalThumbMinX = computed(() => {
             const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
             return getAbsolutePositionX;
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalThumbMinX" }] : []));
         // 横向滚动条滑块的最大X坐标
         this.horizontalThumbMaxX = computed(() => {
             const { width } = this.config();
             const getAbsolutePositionX = this.horizontalTrack.getNode().getAbsolutePosition().x;
             return getAbsolutePositionX + width - this.horizontalThumbWidth();
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalThumbMaxX" }] : []));
         // 竖向滚动条滑块高度
         this.verticalThumbHeight = computed(() => {
             const { height, contentHeight } = this.config();
             const thumbHeight = Math.max(20, (height / contentHeight) * this.verticalScrollbarHeight());
             return thumbHeight;
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalThumbHeight" }] : []));
         // 横向滚动条滑块宽度
         this.horizontalThumbWidth = computed(() => {
             const { width, contentWidth } = this.config();
             const thumbWidth = Math.max(20, (width / contentWidth) * this.horizontalScrollbarHeight());
             return thumbWidth;
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalThumbWidth" }] : []));
         // 竖向滚动条滑块配置
         this.verticalConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
@@ -8987,7 +8680,7 @@ class AITableScrollableGroup {
                     };
                 }
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalConfig" }] : []));
         // 横向滚动条滑块配置
         this.horizontalThumbConfig = computed(() => {
             const { scrollbarSize = 12, scrollbarColor = Colors.black, scrollbarOpacity = 0.8 } = this.config();
@@ -9019,17 +8712,17 @@ class AITableScrollableGroup {
                     };
                 }
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalThumbConfig" }] : []));
         // 横向滚动条滑块配置
         this.verticalScrollbarHeight = computed(() => {
             const { height } = this.config();
             return height;
-        });
+        }, ...(ngDevMode ? [{ debugName: "verticalScrollbarHeight" }] : []));
         // 获取横向滚动条宽度
         this.horizontalScrollbarHeight = computed(() => {
             const { width } = this.config();
             return width;
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontalScrollbarHeight" }] : []));
         // 滚动条延迟隐藏
         effect(() => {
             const displayScrollbarTime = this.displayScrollbarTime();
@@ -9142,8 +8835,8 @@ class AITableScrollableGroup {
         const { width, contentWidth } = this.config();
         this.scrollX.set(Math.max(0, contentWidth - width));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollableGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableScrollableGroup, isStandalone: true, selector: "ai-table-scrollable-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null }, parentContainer: { classPropertyName: "parentContainer", publicName: "parentContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollPosition: "scrollPosition" }, viewQueries: [{ propertyName: "verticalTrack", first: true, predicate: ["verticalTrack"], descendants: true }, { propertyName: "verticalThumb", first: true, predicate: ["verticalThumb"], descendants: true }, { propertyName: "horizontalTrack", first: true, predicate: ["horizontalTrack"], descendants: true }, { propertyName: "contentGroup", first: true, predicate: ["contentGroup"], descendants: true }, { propertyName: "rootGroup", first: true, predicate: ["rootGroup"], descendants: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableScrollableGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableScrollableGroup, isStandalone: true, selector: "ai-table-scrollable-group", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, contentTemplate: { classPropertyName: "contentTemplate", publicName: "contentTemplate", isSignal: true, isRequired: true, transformFunction: null }, parentContainer: { classPropertyName: "parentContainer", publicName: "parentContainer", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { scrollPosition: "scrollPosition" }, viewQueries: [{ propertyName: "verticalTrack", first: true, predicate: ["verticalTrack"], descendants: true }, { propertyName: "verticalThumb", first: true, predicate: ["verticalThumb"], descendants: true }, { propertyName: "horizontalTrack", first: true, predicate: ["horizontalTrack"], descendants: true }, { propertyName: "contentGroup", first: true, predicate: ["contentGroup"], descendants: true }, { propertyName: "rootGroup", first: true, predicate: ["rootGroup"], descendants: true }], ngImport: i0, template: `
         <ko-group #rootGroup [config]="containerConfig()" (koWheel)="stageWheel($event)">
             <ko-group>
                 <ko-rect [config]="bgConfig()"></ko-rect>
@@ -9191,7 +8884,7 @@ class AITableScrollableGroup {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollableGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableScrollableGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-scrollable-group',
@@ -9245,7 +8938,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, KoShape],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [], propDecorators: { verticalTrack: [{
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], contentTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTemplate", required: true }] }], parentContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentContainer", required: false }] }], scrollPosition: [{ type: i0.Output, args: ["scrollPosition"] }], verticalTrack: [{
                 type: ViewChild,
                 args: ['verticalTrack']
             }], verticalThumb: [{
@@ -9379,11 +9072,11 @@ const createGroupFieldStats = (config) => {
 class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
-        this.field = input.required();
-        this.aiTable = input.required();
-        this.statMenus = input.required();
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
+        this.statMenus = input.required(...(ngDevMode ? [{ debugName: "statMenus" }] : []));
         this.menuClick = output();
-        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None);
+        this.selectStatType = computed(() => this.field().stat_type || AITableStatType.None, ...(ngDevMode ? [{ debugName: "selectStatType" }] : []));
     }
     execute(menu) {
         this.menuClick.emit({
@@ -9391,41 +9084,41 @@ class AITableStatTypeMenu extends ThyDropdownAbstractMenu {
             field: this.field()
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableStatTypeMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableStatTypeMenu, isStandalone: true, selector: "ai-table-stat-type-menu", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, statMenus: { classPropertyName: "statMenus", publicName: "statMenus", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { menuClick: "menuClick" }, host: { classAttribute: "stat-type-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n", dependencies: [{ 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: "19.2.10", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableStatTypeMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-stat-type-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'stat-type-menu'
                     }, imports: [ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of statMenus(); track index; let index = $index) {\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{\n                active: selectStatType() === menu.type\n            }\"\n            (click)=\"execute(menu)\"\n        >\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n" }]
-        }] });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], statMenus: [{ type: i0.Input, args: [{ isSignal: true, alias: "statMenus", required: true }] }], menuClick: [{ type: i0.Output, args: ["menuClick"] }] } });
 
 class AITableFieldStat {
     constructor() {
         this.thyPopover = inject(ThyPopover);
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.hover = output();
-        this.isActive = signal(false);
-        this.isHover = signal(false);
+        this.isActive = signal(false, ...(ngDevMode ? [{ debugName: "isActive" }] : []));
+        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : []));
         this.isShowSelectedCount = false;
         this.availableTextWidth = computed(() => {
             const { width } = this.config();
             return width - AI_TABLE_ACTION_COMMON_SIZE - AI_TABLE_CELL_PADDING;
-        });
+        }, ...(ngDevMode ? [{ debugName: "availableTextWidth" }] : []));
         this.groupConfig = computed(() => {
             return {
                 x: this.config().x,
                 y: this.config().y
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
         this.isGroupStat = computed(() => {
             return this.config().isGroupStat;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isGroupStat" }] : []));
         this.groupStatContainerWidthMap = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.groupStatContainerWidthMap();
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupStatContainerWidthMap" }] : []));
         this.bgConfig = computed(() => {
             const { field, width, height, coordinate, readonly, aiTable, isGroupStat, columnIndex, groupRow } = this.config();
             const rowHeadWidth = aiTable.context.rowHeadWidth();
@@ -9484,21 +9177,21 @@ class AITableFieldStat {
                 }
             }
             return config;
-        });
+        }, ...(ngDevMode ? [{ debugName: "bgConfig" }] : []));
         this.field = computed(() => {
             const { field } = this.config();
             return field;
-        });
+        }, ...(ngDevMode ? [{ debugName: "field" }] : []));
         this.linearRows = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.linearRows();
-        });
+        }, ...(ngDevMode ? [{ debugName: "linearRows" }] : []));
         this.recordsMap = computed(() => {
             const { aiTable } = this.config();
             return aiTable.recordsMap();
-        });
-        this.groupRow = computed(() => this.config().groupRow);
-        this.gridData = computed(() => this.config().aiTable.gridData());
+        }, ...(ngDevMode ? [{ debugName: "recordsMap" }] : []));
+        this.groupRow = computed(() => this.config().groupRow, ...(ngDevMode ? [{ debugName: "groupRow" }] : []));
+        this.gridData = computed(() => this.config().aiTable.gridData(), ...(ngDevMode ? [{ debugName: "gridData" }] : []));
         this.records = computed(() => {
             let records = [];
             const groupRow = this.groupRow();
@@ -9511,15 +9204,15 @@ class AITableFieldStat {
                 records = this.gridData().records;
             }
             return records;
-        });
+        }, ...(ngDevMode ? [{ debugName: "records" }] : []));
         this.aiFieldConfig = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context?.aiFieldConfig;
-        });
+        }, ...(ngDevMode ? [{ debugName: "aiFieldConfig" }] : []));
         this.aiTable = computed(() => {
             const { aiTable } = this.config();
             return aiTable;
-        });
+        }, ...(ngDevMode ? [{ debugName: "aiTable" }] : []));
         this.options = computed(() => {
             const aiTable = this.aiTable();
             return {
@@ -9531,18 +9224,18 @@ class AITableFieldStat {
                     return transformToCellText(cellValue, options);
                 }
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "options" }] : []));
         this.isActiveOrHover = computed(() => {
             return this.isActive() || this.isHover();
-        });
+        }, ...(ngDevMode ? [{ debugName: "isActiveOrHover" }] : []));
         this.containerBoxHeight = computed(() => {
             const { height } = this.config();
             return height;
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerBoxHeight" }] : []));
         this.containerBoxWidth = computed(() => {
             const { width } = this.config();
             return width;
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerBoxWidth" }] : []));
         this.noneStatWidth = computed(() => {
             const noneStatString = getI18nTextByKey(this.aiTable(), AITableGridI18nKey.stat);
             const { text, textWidth } = drawer.textEllipsis({
@@ -9551,7 +9244,7 @@ class AITableFieldStat {
                 fontWeight: DEFAULT_FONT_WEIGHT
             });
             return textWidth + AI_TABLE_ACTION_COMMON_SIZE + AI_TABLE_OFFSET;
-        });
+        }, ...(ngDevMode ? [{ debugName: "noneStatWidth" }] : []));
         this.renderTexts = computed(() => {
             const width = this.containerBoxWidth();
             const field = this.field();
@@ -9601,10 +9294,10 @@ class AITableFieldStat {
                 totalWidth: textWidth,
                 statValue: statValue || ''
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "renderTexts" }] : []));
         this.fontSize = computed(() => {
             return this.isGroupStat() ? GROUP_STAT_DEFAULT_FONT_SIZE : DEFAULT_FONT_SIZE;
-        });
+        }, ...(ngDevMode ? [{ debugName: "fontSize" }] : []));
         this.textsConfig = computed(() => {
             const height = this.containerBoxHeight();
             const width = this.containerBoxWidth();
@@ -9666,17 +9359,17 @@ class AITableFieldStat {
                 return result;
             }
             return null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textsConfig" }] : []));
         this.selectedRecordCount = computed(() => {
             const aiTable = this.aiTable();
             const selectedRecords = aiTable.selection().selectedRecords;
             return selectedRecords.size;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedRecordCount" }] : []));
         this.selectedCellCount = computed(() => {
             const aiTable = this.aiTable();
             const selectedCells = aiTable.selection().selectedCells;
             return selectedCells.size;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedCellCount" }] : []));
         this.selectedInfo = computed(() => {
             const selectedRecordCount = this.selectedRecordCount();
             const selectedCellCount = this.selectedCellCount();
@@ -9689,15 +9382,15 @@ class AITableFieldStat {
                 selectedCount
             };
             return result;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedInfo" }] : []));
         this.isFirstColumn = computed(() => {
             const { columnIndex } = this.config();
             return columnIndex === 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isFirstColumn" }] : []));
         this.isLastFrozenColumn = computed(() => {
             const { columnIndex, coordinate } = this.config();
             return columnIndex === coordinate.frozenColumnCount - 1;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isLastFrozenColumn" }] : []));
         this.iconConfig = computed(() => {
             const { field, width, height } = this.config();
             const commonIconOffsetY = (height - AI_TABLE_ACTION_COMMON_SIZE) / 2;
@@ -9712,7 +9405,7 @@ class AITableFieldStat {
                 cornerRadius: 4,
                 listening: false
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "iconConfig" }] : []));
         effect(() => {
             const isGroupStat = this.isGroupStat();
             const bgConfigWidth = this.bgConfig().width;
@@ -9791,8 +9484,8 @@ class AITableFieldStat {
             this.hover.emit(false);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldStat, isStandalone: true, selector: "ai-table-field-stat", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldStat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldStat, isStandalone: true, selector: "ai-table-field-stat", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
         <ko-group [config]="groupConfig()">
             <ai-table-background
                 [config]="bgConfig()"
@@ -9814,7 +9507,7 @@ class AITableFieldStat {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStat, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldStat, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-field-stat',
@@ -9842,28 +9535,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, AITableTextComponent, AITableIcon, AITableBackground],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], hover: [{ type: i0.Output, args: ["hover"] }] } });
 
 class AITableGroups {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.trackBy = (groupStat) => {
             return groupStat.groupRow._id + groupStat.columnIndex;
         };
         this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
             return coordinate.frozenColumnCount ?? 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : []));
         this.columnStartIndex = computed(() => {
             const { columnStartIndex } = this.config();
             return Math.max(columnStartIndex, this.frozenColumnCount());
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnStartIndex" }] : []));
         this.groups = computed(() => {
             return createGroupCells({
                 ...this.config(),
                 columnStartIndex: this.columnStartIndex()
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
         this.groupCells = computed(() => {
             const groups = this.groups();
             const groupCells = [];
@@ -9881,16 +9574,16 @@ class AITableGroups {
                 });
             });
             return groupCells;
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupCells" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableGroups, isStandalone: true, selector: "ai-table-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (groupCell of groupCells(); track trackBy(groupCell.groupStat!)) {
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGroups, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGroups, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-groups',
@@ -9899,32 +9592,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `,
-                    imports: [CommonModule, AITableFieldStat],
+                    imports: [AITableFieldStat],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFrozenGroups {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.frozenColumnCount = computed(() => {
             const { coordinate } = this.config();
             return coordinate.frozenColumnCount ?? 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : []));
         this.columnStopIndex = computed(() => {
             return this.frozenColumnCount() - 1;
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnStopIndex" }] : []));
         this.groups = computed(() => {
             return createGroupCells({
                 ...this.config(),
                 columnStartIndex: 0,
                 columnStopIndex: this.columnStopIndex()
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
         this.groupCollapseDisabled = computed(() => {
             const { aiTable } = this.config();
             return aiTable.context.groupCollapseDisabled();
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupCollapseDisabled" }] : []));
         this.groupCells = computed(() => {
             const groups = this.groups();
             const groupCells = [];
@@ -9963,24 +9656,24 @@ class AITableFrozenGroups {
                 });
             });
             return groupCells;
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupCells" }] : []));
     }
     collapseClick(e) {
         if (this.groupCollapseDisabled()) {
             e.event.cancelBubble = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenGroups, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFrozenGroups, isStandalone: true, selector: "ai-table-frozen-groups", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @for (groupCell of groupCells(); track $index) {
             @if (groupCell.collapsedIcon) {
                 <ai-table-icon [config]="groupCell.collapsedIcon" (koClick)="collapseClick($event)"></ai-table-icon>
             }
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }, { kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFrozenGroups, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFrozenGroups, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-frozen-groups',
@@ -9992,21 +9685,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             <ai-table-field-stat [config]="groupCell.groupStat!"></ai-table-field-stat>
         }
     `,
-                    imports: [CommonModule, AITableIcon, AITableFieldStat],
+                    imports: [AITableIcon, AITableFieldStat],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableFillHandle {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.showFillHandle = computed(() => {
             const { aiTable, readonly } = this.config();
             const selection = aiTable.selection();
             const hasSelectedCells = selection.selectedCells.size > 0;
             const isEditingCell = !!aiTable.editingCell()?.path;
             return hasSelectedCells && !readonly && !isEditingCell;
-        });
+        }, ...(ngDevMode ? [{ debugName: "showFillHandle" }] : []));
         this.handleConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
             const selectedCells = Array.from(aiTable.selection().selectedCells);
@@ -10040,16 +9733,16 @@ class AITableFillHandle {
                     recordId
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "handleConfig" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFillHandle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFillHandle, isStandalone: true, selector: "ai-table-fill-handle", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @if (showFillHandle()) {
             <ko-rect [config]="handleConfig()"></ko-rect>
         }
     `, isInline: true, dependencies: [{ 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFillHandle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFillHandle, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-fill-handle',
@@ -10060,12 +9753,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     `,
                     imports: [KoShape]
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
 class AITableCoverCellEntry {
     constructor() {
-        this.config = input.required();
-        this.onlyDisplayBorder = input(false);
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.onlyDisplayBorder = input(false, ...(ngDevMode ? [{ debugName: "onlyDisplayBorder" }] : []));
         this.componentMap = {};
         this.groupConfig = computed(() => {
             return {
@@ -10073,7 +9766,7 @@ class AITableCoverCellEntry {
                 y: this.coverCellConfig()?.y,
                 listening: true
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "groupConfig" }] : []));
         this.coverCellConfig = computed(() => {
             const { aiTable, coordinate, references, readonly, actions } = this.config();
             const coverCell = this.coverCell();
@@ -10137,11 +9830,11 @@ class AITableCoverCellEntry {
                 }
             };
             return result;
-        });
-        this.coverCell = computed(() => getCoverCell(this.config().aiTable));
+        }, ...(ngDevMode ? [{ debugName: "coverCellConfig" }] : []));
+        this.coverCell = computed(() => getCoverCell(this.config().aiTable), ...(ngDevMode ? [{ debugName: "coverCell" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCoverCellEntry, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCoverCellEntry, isStandalone: true, selector: "ai-table-cover-cell-entry", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, onlyDisplayBorder: { classPropertyName: "onlyDisplayBorder", publicName: "onlyDisplayBorder", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
         @if (coverCell()) {
             <ko-group #rootGroup [config]="groupConfig()">
                 <ng-container
@@ -10153,9 +9846,9 @@ class AITableCoverCellEntry {
                 </ng-container>
             </ko-group>
         }
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCoverCellEntry, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-cover-cell-entry',
@@ -10175,17 +9868,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [KoContainer, CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], onlyDisplayBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlyDisplayBorder", required: false }] }] } });
 
 class AITableFieldStats {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.hover = output();
-        this.isHover = signal(false);
+        this.isHover = signal(false, ...(ngDevMode ? [{ debugName: "isHover" }] : []));
         this.trackBy = (groupStat) => {
             return groupStat.columnIndex;
         };
-        this.statConfigs = computed(() => createFieldStats(this.config()));
+        this.statConfigs = computed(() => createFieldStats(this.config()), ...(ngDevMode ? [{ debugName: "statConfigs" }] : []));
     }
     onMouseenter(e) {
         this.isHover.set(true);
@@ -10193,8 +9886,8 @@ class AITableFieldStats {
     onMouseleave(e) {
         this.isHover.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldStats, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldStats, isStandalone: true, selector: "ai-table-column-stats", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
         <ko-group>
             @for (config of statConfigs(); track trackBy(config)) {
                 <ai-table-field-stat [config]="config" (hover)="hover.emit($event)"></ai-table-field-stat>
@@ -10202,7 +9895,7 @@ class AITableFieldStats {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableFieldStat, selector: "ai-table-field-stat", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldStats, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldStats, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-column-stats',
@@ -10216,12 +9909,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     imports: [AITableFieldStat, KoContainer],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], hover: [{ type: i0.Output, args: ["hover"] }] } });
 
 Konva.pixelRatio = 2;
 class AITableRenderer {
     constructor() {
-        this.config = input.required();
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.koMousemove = output();
         this.koMousedown = output();
         this.koMouseup = output();
@@ -10231,46 +9924,46 @@ class AITableRenderer {
         this.koDblclick = output();
         this.koMouseleave = output();
         this.onScrollPosition = output();
-        this.isHoverStatContainer = signal(false);
+        this.isHoverStatContainer = signal(false, ...(ngDevMode ? [{ debugName: "isHoverStatContainer" }] : []));
         this.fields = computed(() => {
             return AITable.getVisibleFields(this.config().aiTable);
-        });
+        }, ...(ngDevMode ? [{ debugName: "fields" }] : []));
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        });
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.hiddenIndexColumn = computed(() => {
             return this.config()?.aiTable.context?.aiFieldConfig()?.hiddenIndexColumn;
-        });
+        }, ...(ngDevMode ? [{ debugName: "hiddenIndexColumn" }] : []));
         this.coordinate = computed(() => {
             return this.config()?.coordinate;
-        });
+        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : []));
         this.containerWidth = computed(() => {
             return this.config().containerWidth;
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerWidth" }] : []));
         this.containerHeight = computed(() => {
             return this.config().containerHeight;
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerHeight" }] : []));
         this.gridContainerHeight = computed(() => {
             return this.containerHeight() - AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT;
-        });
+        }, ...(ngDevMode ? [{ debugName: "gridContainerHeight" }] : []));
         this.scrollState = computed(() => {
             return this.config()?.aiTable.context.scrollState();
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollState" }] : []));
         this.visibleRangeInfo = computed(() => {
             return getVisibleRangeInfo(this.coordinate(), this.scrollState());
-        });
+        }, ...(ngDevMode ? [{ debugName: "visibleRangeInfo" }] : []));
         this.frozenAreaWidth = computed(() => {
             return this.config().aiTable.context.rowHeadWidth() + this.coordinate().frozenColumnWidth;
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenAreaWidth" }] : []));
         this.lastColumnWidth = computed(() => {
             return this.coordinate().getColumnWidth(this.visibleRangeInfo().columnStopIndex);
-        });
+        }, ...(ngDevMode ? [{ debugName: "lastColumnWidth" }] : []));
         this.lastColumnOffset = computed(() => {
             return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
-        });
+        }, ...(ngDevMode ? [{ debugName: "lastColumnOffset" }] : []));
         this.cellGroupClipWidth = computed(() => {
             return this.containerWidth() - this.frozenAreaWidth();
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellGroupClipWidth" }] : []));
         this.stageConfig = computed(() => {
             const { isScrolling } = this.scrollState();
             return {
@@ -10278,7 +9971,7 @@ class AITableRenderer {
                 height: this.containerHeight(),
                 listening: isScrolling ? false : true
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "stageConfig" }] : []));
         this.gridGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10286,7 +9979,7 @@ class AITableRenderer {
                 clipWidth: this.containerWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "gridGroupConfig" }] : []));
         this.statGroupConfig = computed(() => {
             return {
                 x: 0,
@@ -10294,13 +9987,13 @@ class AITableRenderer {
                 width: this.containerWidth(),
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "statGroupConfig" }] : []));
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT);
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : []));
         this.scrollTotalWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollTotalWidth" }] : []));
         this.frozenCommonGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10308,7 +10001,7 @@ class AITableRenderer {
                 clipWidth: this.containerWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenCommonGroupConfig" }] : []));
         this.commonGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() + 1,
@@ -10316,7 +10009,7 @@ class AITableRenderer {
                 clipWidth: this.cellGroupClipWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "commonGroupConfig" }] : []));
         this.statCommonGroupConfig = computed(() => {
             return {
                 x: AI_TABLE_OFFSET,
@@ -10325,7 +10018,7 @@ class AITableRenderer {
                 clipWidth: this.cellGroupClipWidth(),
                 clipHeight: this.gridContainerHeight()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "statCommonGroupConfig" }] : []));
         this.attachGroupConfig = computed(() => {
             return {
                 clipX: this.frozenAreaWidth() - 1,
@@ -10333,7 +10026,7 @@ class AITableRenderer {
                 clipWidth: this.containerWidth() - this.frozenAreaWidth(),
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "attachGroupConfig" }] : []));
         this.frozenAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10341,7 +10034,7 @@ class AITableRenderer {
                 clipWidth: this.frozenAreaWidth() + 10,
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenAttachGroupConfig" }] : []));
         this.frozenCoverAttachGroupConfig = computed(() => {
             return {
                 clipX: 0,
@@ -10349,26 +10042,26 @@ class AITableRenderer {
                 clipWidth: this.frozenAreaWidth(),
                 clipHeight: this.gridContainerHeight() - AI_TABLE_FIELD_HEAD_HEIGHT
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenCoverAttachGroupConfig" }] : []));
         this.offsetYConfig = computed(() => {
             const { scrollTop } = this.scrollState();
             return {
                 offsetY: scrollTop
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "offsetYConfig" }] : []));
         this.offsetXConfig = computed(() => {
             const { scrollLeft } = this.scrollState();
             return {
                 offsetX: scrollLeft
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "offsetXConfig" }] : []));
         this.offsetConfig = computed(() => {
             const { scrollLeft, scrollTop } = this.scrollState();
             return {
                 offsetX: scrollLeft,
                 offsetY: scrollTop
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "offsetConfig" }] : []));
         this.columnFrozenHeadFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
             const { aiTable, coordinate, readonly, maxFields, actions } = this.config();
@@ -10385,7 +10078,7 @@ class AITableRenderer {
                 readonly,
                 maxFields
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnFrozenHeadFieldConfig" }] : []));
         this.columnHeadFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
             const { aiTable, coordinate, readonly, maxFields, actions } = this.config();
@@ -10402,7 +10095,7 @@ class AITableRenderer {
                 readonly,
                 maxFields
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnHeadFieldConfig" }] : []));
         this.columnFieldStatsConfig = computed(() => {
             return {
                 ...this.columnHeadFieldConfig(),
@@ -10412,10 +10105,10 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnFieldStatsConfig" }] : []));
         this.xIsScroll = computed(() => {
             return this.scrollState().scrollLeft > 0;
-        });
+        }, ...(ngDevMode ? [{ debugName: "xIsScroll" }] : []));
         this.statShadowConfig = computed(() => {
             return {
                 width: 8,
@@ -10424,7 +10117,7 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 visible: this.xIsScroll()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "statShadowConfig" }] : []));
         this.fieldHeadShadowConfig = computed(() => {
             return {
                 width: AI_TABLE_SHADOW_DEFAULT_WIDTH,
@@ -10433,7 +10126,7 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_HEAD_HEIGHT,
                 visible: this.xIsScroll()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldHeadShadowConfig" }] : []));
         this.columnFieldStatsBgConfig = computed(() => {
             return {
                 x: 0,
@@ -10448,7 +10141,7 @@ class AITableRenderer {
                 listening: true,
                 coordinate: this.coordinate()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnFieldStatsBgConfig" }] : []));
         this.columnFrozenFieldStatsConfig = computed(() => {
             return {
                 ...this.columnHeadFieldConfig(),
@@ -10460,7 +10153,7 @@ class AITableRenderer {
                 height: AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT,
                 isHoverStatContainer: this.isHoverStatContainer()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "columnFrozenFieldStatsConfig" }] : []));
         this.cellsConfig = computed(() => {
             const { aiTable, readonly, coordinate, references, actions, maxRecords } = this.config();
             const keywordsMatchedCells = aiTable.keywordsMatchedCells();
@@ -10478,7 +10171,7 @@ class AITableRenderer {
                 maxRecords,
                 keywordsMatchedCells
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellsConfig" }] : []));
         this.expandRecordConfig = computed(() => {
             const { aiTable, coordinate } = this.config();
             const { rowStartIndex, rowStopIndex } = this.visibleRangeInfo();
@@ -10488,14 +10181,14 @@ class AITableRenderer {
                 rowStartIndex,
                 rowStopIndex
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandRecordConfig" }] : []));
         this.fillHandleConfig = computed(() => {
             return {
                 aiTable: this.config().aiTable,
                 coordinate: this.coordinate(),
                 readonly: this.readonly()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "fillHandleConfig" }] : []));
         this.isLastSelectedCellInFrozenColumn = computed(() => {
             const { aiTable } = this.config();
             const selectedCells = Array.from(aiTable.selection().selectedCells);
@@ -10505,10 +10198,10 @@ class AITableRenderer {
             const [, fieldId] = lastCell.split(':');
             const columnIndex = aiTable.context.visibleColumnsIndexMap().get(fieldId);
             return AITable.isFrozenColumn(aiTable, columnIndex);
-        });
+        }, ...(ngDevMode ? [{ debugName: "isLastSelectedCellInFrozenColumn" }] : []));
         this.activeCellBorderConfig = computed(() => {
             return createActiveCellBorder(this.cellsConfig());
-        });
+        }, ...(ngDevMode ? [{ debugName: "activeCellBorderConfig" }] : []));
         this.showExpandCellBorder = computed(() => {
             let expandCellBorder = false;
             let frozenExpandCellBorder = false;
@@ -10531,7 +10224,7 @@ class AITableRenderer {
                 expandCellBorder,
                 frozenExpandCellBorder
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "showExpandCellBorder" }] : []));
     }
     stageMousemove(e) {
         this.koMousemove.emit(e);
@@ -10560,10 +10253,10 @@ class AITableRenderer {
     onStatContainerHover(isHover) {
         this.isHoverStatContainer.set(isHover);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\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                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\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                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\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: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { 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"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }, { kind: "component", type: AITableExpandRecord, selector: "ai-table-expand-record", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\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                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\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                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\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: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { 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"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }, { kind: "component", type: AITableExpandRecord, selector: "ai-table-expand-record", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-renderer', imports: [
                         KoContainer,
@@ -10588,17 +10281,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFrozenGroups,
                         AITableExpandRecord
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\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                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\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                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
-        }] });
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], koMousemove: [{ type: i0.Output, args: ["koMousemove"] }], koMousedown: [{ type: i0.Output, args: ["koMousedown"] }], koMouseup: [{ type: i0.Output, args: ["koMouseup"] }], koContextmenu: [{ type: i0.Output, args: ["koContextmenu"] }], koWheel: [{ type: i0.Output, args: ["koWheel"] }], koClick: [{ type: i0.Output, args: ["koClick"] }], koDblclick: [{ type: i0.Output, args: ["koDblclick"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], onScrollPosition: [{ type: i0.Output, args: ["onScrollPosition"] }] } });
 
 class AITableCellRate extends CoverCellBase {
     constructor() {
         super(...arguments);
-        this.pointerX = signal(0);
-        this.pointerY = signal(0);
-        this.resetStatus = signal(false);
+        this.pointerX = signal(0, ...(ngDevMode ? [{ debugName: "pointerX" }] : []));
+        this.pointerY = signal(0, ...(ngDevMode ? [{ debugName: "pointerY" }] : []));
+        this.resetStatus = signal(false, ...(ngDevMode ? [{ debugName: "resetStatus" }] : []));
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        });
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.whiteBgConfig = computed(() => {
             const { aiTable, render, field, recordId, coordinate } = this.config();
             const pointPosition = aiTable.context.pointPosition();
@@ -10622,7 +10315,7 @@ class AITableCellRate extends CoverCellBase {
                     recordId
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : []));
         this.starConfigs = computed(() => {
             const { render, field, recordId, readonly, aiTable, coordinate } = this.config();
             const { x, columnWidth, transformValue } = render;
@@ -10676,7 +10369,7 @@ class AITableCellRate extends CoverCellBase {
                     })
                 };
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "starConfigs" }] : []));
     }
     static { this.fieldType = AITableFieldType.rate; }
     koMousemove(e) {
@@ -10714,8 +10407,8 @@ class AITableCellRate extends CoverCellBase {
             ]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellRate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
         }
@@ -10724,7 +10417,7 @@ class AITableCellRate extends CoverCellBase {
         }
     `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellRate, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellRate, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-rate',
@@ -10746,18 +10439,18 @@ class AITableCellProgress extends CoverCellBase {
         super(...arguments);
         this.readonly = computed(() => {
             return this.config()?.readonly;
-        });
-        this.dragPointerX = signal(null);
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
+        this.dragPointerX = signal(null, ...(ngDevMode ? [{ debugName: "dragPointerX" }] : []));
         this.railWidth = computed(() => {
             const { columnWidth } = this.config().render;
             return columnWidth - 2 * AI_TABLE_CELL_PADDING - AI_TABLE_PROGRESS_TEXT_WIDTH;
-        });
+        }, ...(ngDevMode ? [{ debugName: "railWidth" }] : []));
         this.trackWidth = computed(() => {
             return (this.progressValue() / 100) * this.railWidth();
-        });
+        }, ...(ngDevMode ? [{ debugName: "trackWidth" }] : []));
         this.pointerWidth = AI_TABLE_PROGRESS_BAR_POINTER_WIDTH;
         this.progressOffsetY = (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_PROGRESS_BAR_HEIGHT) / 2 + AI_TABLE_OFFSET;
-        this.dragProgressValue = signal(null);
+        this.dragProgressValue = signal(null, ...(ngDevMode ? [{ debugName: "dragProgressValue" }] : []));
         this.progressValue = computed(() => {
             const dragValue = this.dragProgressValue();
             if (dragValue !== null) {
@@ -10769,7 +10462,7 @@ class AITableCellProgress extends CoverCellBase {
                 return 0;
             }
             return transformValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "progressValue" }] : []));
         this.whiteBgConfig = computed(() => {
             const { aiTable, render, field, recordId, coordinate } = this.config();
             const pointPosition = aiTable.context.pointPosition();
@@ -10792,7 +10485,7 @@ class AITableCellProgress extends CoverCellBase {
                     recordId
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "whiteBgConfig" }] : []));
         this.railConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10810,7 +10503,7 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "railConfig" }] : []));
         this.trackConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10828,7 +10521,7 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "trackConfig" }] : []));
         this.pointerConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10867,7 +10560,7 @@ class AITableCellProgress extends CoverCellBase {
                     mouseStyle: this.readonly() ? 'default' : 'pointer'
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "pointerConfig" }] : []));
         this.textConfig = computed(() => {
             const { render, field, recordId } = this.config();
             const { x } = render;
@@ -10886,7 +10579,7 @@ class AITableCellProgress extends CoverCellBase {
                     recordId
                 })
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
     }
     static { this.fieldType = AITableFieldType.progress; }
     calculatePercentage(clickX) {
@@ -10965,8 +10658,8 @@ class AITableCellProgress extends CoverCellBase {
             ]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellProgress, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellProgress, isStandalone: true, selector: "ai-table-progress", usesInheritance: true, ngImport: i0, template: `
         @if (!readonly()) {
             <ko-rect [config]="whiteBgConfig()"></ko-rect>
         }
@@ -10981,7 +10674,7 @@ class AITableCellProgress extends CoverCellBase {
         <ko-text [config]="textConfig()"></ko-text>
     `, isInline: true, dependencies: [{ 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellProgress, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellProgress, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-progress',
@@ -11011,7 +10704,7 @@ class AITableCellCheckbox extends CoverCellBase {
             const { render } = this.config();
             const { transformValue } = render;
             return !isEmpty(transformValue) && !!transformValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
         this.checkbox = computed(() => {
             const { render, field, recordId, readonly } = this.config();
             if (render) {
@@ -11035,7 +10728,7 @@ class AITableCellCheckbox extends CoverCellBase {
                 };
             }
             return null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "checkbox" }] : []));
     }
     static { this.fieldType = AITableFieldType.checkbox; }
     switchChecked() {
@@ -11047,14 +10740,14 @@ class AITableCellCheckbox extends CoverCellBase {
             }
         ]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: AITableCellCheckbox, isStandalone: true, selector: "ai-table-checkbox", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellCheckbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: AITableCellCheckbox, isStandalone: true, selector: "ai-table-checkbox", usesInheritance: true, ngImport: i0, template: `
         <ko-group>
             <ai-table-icon [config]="checkbox()" (koClick)="switchChecked()"></ai-table-icon>
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellCheckbox, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-checkbox',
@@ -11079,7 +10772,7 @@ class AITableCellText extends CoverCellBase {
                 fieldId: field._id,
                 recordId
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellName" }] : []));
         this.expandBorderConfig = computed(() => {
             const { render, field, recordId, readonly, isExpand } = this.config();
             const { columnWidth } = render;
@@ -11098,7 +10791,7 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return null;
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandBorderConfig" }] : []));
         this.scrollConfig = computed(() => {
             const { render, field, recordId, readonly, isExpand, coordinate } = this.config();
             const { columnWidth } = render;
@@ -11118,7 +10811,7 @@ class AITableCellText extends CoverCellBase {
                 contentNotScrollbar: false,
                 bgName: this.cellName()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollConfig" }] : []));
         this.expandTextBounds = computed(() => {
             const textRender = this.textString();
             const tmpText = new Konva.Text({
@@ -11139,11 +10832,11 @@ class AITableCellText extends CoverCellBase {
                 ...tmpText.getClientRect(),
                 height: tmpText.getClientRect().height + this.startY() * 2 - AI_TABLE_CELL_LINE_BORDER
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandTextBounds" }] : []));
         this.textMaxWidth = computed(() => {
             const { columnWidth } = this.config()?.render;
             return columnWidth - AI_TABLE_CELL_PADDING - AI_TABLE_CELL_PADDING;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textMaxWidth" }] : []));
         this.textString = computed(() => {
             const { transformValue } = this.config()?.render;
             let textRender = transformValue;
@@ -11151,18 +10844,18 @@ class AITableCellText extends CoverCellBase {
                 return;
             }
             return textRender.replace(/\r|\n/g, ' ');
-        });
+        }, ...(ngDevMode ? [{ debugName: "textString" }] : []));
         this.height = computed(() => {
             const { height } = this.expandTextBounds() || { height: 0 };
             return Math.min(Math.max(height, this.config().render.rowHeight - AI_TABLE_CELL_LINE_BORDER || AI_TABLE_ROW_BLANK_HEIGHT), 146);
-        });
+        }, ...(ngDevMode ? [{ debugName: "height" }] : []));
         this.startY = computed(() => {
             const { y, rowHeight } = this.config()?.render;
             return (y +
                 (AI_TABLE_ROW_HEIGHT - DEFAULT_FONT_SIZE) / 2 -
                 (DEFAULT_FONT_SIZE * (AI_TABLE_TEXT_LINE_HEIGHT - 1)) / 2 +
                 AI_TABLE_CELL_LINE_BORDER);
-        });
+        }, ...(ngDevMode ? [{ debugName: "startY" }] : []));
         this.expandTextConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -11189,7 +10882,7 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return;
-        });
+        }, ...(ngDevMode ? [{ debugName: "expandTextConfig" }] : []));
         this.textConfig = computed(() => {
             const render = this.config()?.render;
             if (render) {
@@ -11214,7 +10907,7 @@ class AITableCellText extends CoverCellBase {
                 };
             }
             return;
-        });
+        }, ...(ngDevMode ? [{ debugName: "textConfig" }] : []));
         effect(() => {
             const height = this.height();
             if (this.isExpand()) {
@@ -11226,8 +10919,8 @@ class AITableCellText extends CoverCellBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableCellText, isStandalone: true, selector: "ai-table-single-text", usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellText, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableCellText, isStandalone: true, selector: "ai-table-single-text", usesInheritance: true, ngImport: i0, template: `
         <ko-group>
             @if (isExpand()) {
                 <ko-group>
@@ -11252,7 +10945,7 @@ class AITableCellText extends CoverCellBase {
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: AITableTextComponent, selector: "ai-table-text", inputs: ["config"], outputs: ["koClick", "koMouseMove"] }, { 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: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableScrollableGroup, selector: "ai-table-scrollable-group", inputs: ["config", "contentTemplate", "parentContainer"], outputs: ["scrollPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableCellText, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableCellText, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-single-text',
@@ -12076,8 +11769,8 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
         super.update();
         this.closePopover();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.13", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
         class="h-100"
         [thyAutoFocus]="autoFocus()"
         [thyShowStepControls]="false"
@@ -12086,7 +11779,7 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
         (thyBlur)="updateValue()"
     /> `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: NumberCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'number-cell-editor',
@@ -12108,23 +11801,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 class SelectOptionComponent {
     constructor() {
-        this.field = input.required();
-        this.displayOption = input.required();
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.displayOption = input.required(...(ngDevMode ? [{ debugName: "displayOption" }] : []));
         this.optionStyle = computed(() => {
             return this.field().settings.option_style || AITableSelectOptionStyle.text;
-        });
+        }, ...(ngDevMode ? [{ debugName: "optionStyle" }] : []));
         this.AITableSelectOptionStyle = AITableSelectOptionStyle;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectOptionComponent, isStandalone: true, selector: "select-option", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, displayOption: { classPropertyName: "displayOption", publicName: "displayOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.select-option-tag": "optionStyle === AITableSelectOptionStyle.tag" }, classAttribute: "select-option thy-text" }, ngImport: i0, template: "@if (displayOption(); as displayOption) {\n    @switch (optionStyle()) {\n        @case (AITableSelectOptionStyle.dot) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @case (AITableSelectOptionStyle.tag) {\n            @if (displayOption.bg_color || displayOption.color || 'default'; as color) {\n                <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n                    @if (displayOption['icon']) {\n                        <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n                    }\n                    <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n                </thy-tag>\n            }\n        }\n        @case (AITableSelectOptionStyle.piece) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @default {\n            @if (displayOption['icon']) {\n                <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyDot, selector: "thy-dot,[thy-dot],[thyDot]", inputs: ["thyColor", "thySize", "thyTheme", "thyShape"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SelectOptionComponent, isStandalone: true, selector: "select-option", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, displayOption: { classPropertyName: "displayOption", publicName: "displayOption", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.select-option-tag": "optionStyle === AITableSelectOptionStyle.tag" }, classAttribute: "select-option thy-text" }, ngImport: i0, template: "@if (displayOption(); as displayOption) {\n    @switch (optionStyle()) {\n        @case (AITableSelectOptionStyle.dot) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @case (AITableSelectOptionStyle.tag) {\n            @if (displayOption.bg_color || displayOption.color || 'default'; as color) {\n                <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n                    @if (displayOption['icon']) {\n                        <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n                    }\n                    <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n                </thy-tag>\n            }\n        }\n        @case (AITableSelectOptionStyle.piece) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @default {\n            @if (displayOption['icon']) {\n                <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: ThyDot, selector: "thy-dot,[thy-dot],[thyDot]", inputs: ["thyColor", "thySize", "thyTheme", "thyShape"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select-option', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'select-option thy-text',
                         '[class.select-option-tag]': 'optionStyle === AITableSelectOptionStyle.tag'
                     }, imports: [ThyTag, ThyIcon, ThyTooltipModule, ThyDot, ThyFlexibleText], template: "@if (displayOption(); as displayOption) {\n    @switch (optionStyle()) {\n        @case (AITableSelectOptionStyle.dot) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @case (AITableSelectOptionStyle.tag) {\n            @if (displayOption.bg_color || displayOption.color || 'default'; as color) {\n                <thy-tag thyTheme=\"fill\" thyShape=\"pill\" [thyColor]=\"color\">\n                    @if (displayOption['icon']) {\n                        <thy-icon class=\"text-white\" [thyIconName]=\"displayOption['icon']\"></thy-icon>\n                    }\n                    <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n                </thy-tag>\n            }\n        }\n        @case (AITableSelectOptionStyle.piece) {\n            @if (displayOption.bg_color || displayOption.color; as color) {\n                <thy-dot thyShape=\"square\" [thyColor]=\"color\" [thySize]=\"'md'\" class=\"mr-2\"></thy-dot>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n        @default {\n            @if (displayOption['icon']) {\n                <thy-icon [thyIconName]=\"displayOption['icon']\" [style.color]=\"displayOption.color\"></thy-icon>\n            }\n            <span thyFlexibleText [thyTooltipContent]=\"displayOption.text\">{{ displayOption.text }}</span>\n        }\n    }\n}\n" }]
-        }] });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], displayOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "displayOption", required: true }] }] } });
 
 class SelectCellEditorComponent extends AbstractEditCellEditor {
     get isMultiple() {
@@ -12134,10 +11827,10 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
         super();
         this.selectOptions = computed(() => {
             return this.field().settings.options;
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectOptions" }] : []));
         this.preset = computed(() => {
             return this.field().settings.is_multiple && this.field().settings.option_style === AITableSelectOptionStyle.tag ? 'tag' : '';
-        });
+        }, ...(ngDevMode ? [{ debugName: "preset" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12183,10 +11876,10 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
             this.thyPopoverRef?.updatePosition();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { 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: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { 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: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'select-cell-editor', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'd-block h-100 select-cell-editor'
@@ -12195,7 +11888,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ThyOption,
                         ThyTooltipModule,
                         SelectOptionComponent,
-                        CommonModule,
                         ThyEmptyModule,
                         ThyFormModule,
                         FormsModule,
@@ -12206,7 +11898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 class TextCellEditorComponent extends AbstractEditCellEditor {
     constructor() {
         super();
-        this.isSelectAll = input(false);
+        this.isSelectAll = input(false, ...(ngDevMode ? [{ debugName: "isSelectAll" }] : []));
     }
     ngOnInit() {
         super.ngOnInit();
@@ -12235,8 +11927,8 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         super.update();
         this.closePopover();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TextCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: TextCellEditorComponent, isStandalone: true, selector: "text-cell-editor", inputs: { isSelectAll: { classPropertyName: "isSelectAll", publicName: "isSelectAll", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "text-cell-editor" }, usesInheritance: true, ngImport: i0, template: `
         <textarea
             #textarea
             placeholder=""
@@ -12250,7 +11942,7 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
         ></textarea>
     `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: TextCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: TextCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'text-cell-editor',
@@ -12273,16 +11965,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         class: 'text-cell-editor'
                     }
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { isSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelectAll", required: false }] }] } });
 
 class SelectOptionPipe {
     transform(_id, options) {
         return options?.length && options.find((item) => item._id === _id);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionPipe, isStandalone: true, name: "selectOption" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectOption'
@@ -12296,10 +11988,10 @@ class SelectOptionsPipe {
             })) ||
             []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionsPipe, isStandalone: true, name: "selectOptions" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionsPipe, isStandalone: true, name: "selectOptions" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectOptionsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectOptionsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectOptions'
@@ -12309,10 +12001,10 @@ class IsSelectRecordPipe {
     transform(recordId, selection) {
         return selection.selectedRecords.has(recordId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IsSelectRecordPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: IsSelectRecordPipe, isStandalone: true, name: "isSelectRecord" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: IsSelectRecordPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'isSelectRecord'
@@ -12326,10 +12018,10 @@ class UserPipe {
             })) ||
             []);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: UserPipe, isStandalone: true, name: "user" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UserPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: UserPipe, isStandalone: true, name: "user" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: UserPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'user'
@@ -12339,10 +12031,10 @@ class SelectSettingPipe {
     transform(settings) {
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SelectSettingPipe, isStandalone: true, name: "selectSetting" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: SelectSettingPipe, isStandalone: true, name: "selectSetting" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectSettingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: SelectSettingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'selectSetting'
@@ -12352,10 +12044,10 @@ class MemberSettingPipe {
     transform(settings) {
         return settings;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MemberSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: MemberSettingPipe, isStandalone: true, name: "memberSetting" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MemberSettingPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: MemberSettingPipe, isStandalone: true, name: "memberSetting" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MemberSettingPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: MemberSettingPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'memberSetting'
@@ -12365,10 +12057,10 @@ class AITableFieldIsSameOptionPipe {
     transform(fieldOption, field) {
         return isSameFieldOption(fieldOption, field);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldIsSameOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldIsSameOptionPipe, isStandalone: true, name: "fieldIsSameOption" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, isStandalone: true, name: "fieldIsSameOption" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldIsSameOptionPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldIsSameOptionPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fieldIsSameOption'
@@ -12377,16 +12069,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 class AITableFieldSetting {
     constructor() {
-        this.aiEditField = model.required();
-        this.aiTable = input.required();
-        this.aiExternalTemplate = input(null);
-        this.aiReferences = input();
-        this.isUpdate = input(false, { transform: booleanAttribute });
+        this.aiEditField = model.required(...(ngDevMode ? [{ debugName: "aiEditField" }] : []));
+        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
+        this.aiExternalTemplate = input(null, ...(ngDevMode ? [{ debugName: "aiExternalTemplate" }] : []));
+        this.aiReferences = input(...(ngDevMode ? [undefined, { debugName: "aiReferences" }] : []));
+        this.isUpdate = input(false, ...(ngDevMode ? [{ debugName: "isUpdate", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         this.addField = output();
         this.setField = output();
         this.selectedFieldOption = computed(() => {
             return getFieldOptionByField(this.aiTable(), this.aiEditField());
-        });
+        }, ...(ngDevMode ? [{ debugName: "selectedFieldOption" }] : []));
         this.fieldMaxLength = 32;
         this.validatorConfig = computed(() => {
             return {
@@ -12397,14 +12089,14 @@ class AITableFieldSetting {
                     }
                 }
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "validatorConfig" }] : []));
         this.fieldOptions = computed(() => {
             const fieldOptions = getFieldOptions(this.aiTable());
             return _.groupBy(fieldOptions, 'group');
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : []));
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
-        this.isManualInputName = signal(false);
+        this.isManualInputName = signal(false, ...(ngDevMode ? [{ debugName: "isManualInputName" }] : []));
         this.thyPopoverRef = inject((ThyPopoverRef));
         this.checkUniqueName = (fieldName) => {
             fieldName = fieldName?.trim();
@@ -12423,7 +12115,7 @@ class AITableFieldSetting {
                 base: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupBase),
                 advanced: getI18nTextByKey(this.aiTable(), AITableGridI18nKey.fieldGroupAdvanced)
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : []));
     }
     ngOnInit() {
         this.originField = this.aiEditField();
@@ -12488,10 +12180,10 @@ class AITableFieldSetting {
     cancel() {
         this.thyPopoverRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting 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]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\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]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ 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: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: false, transformFunction: null }, isUpdate: { classPropertyName: "isUpdate", publicName: "isUpdate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiEditField: "aiEditFieldChange", addField: "addField", setField: "setField" }, host: { classAttribute: "field-setting 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]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\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]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"], dependencies: [{ 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: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: ThyDropdownMenuGroup, selector: "thy-dropdown-menu-group", inputs: ["thyTitle"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemExtendIconDirective, selector: "[thyDropdownMenuItemExtendIcon]" }, { kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThySwitch, selector: "thy-switch", inputs: ["thyType", "thySize", "thyDisabled", "thyLoading"], outputs: ["thyChange"] }, { 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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "pipe", type: AITableFieldIsSameOptionPipe, name: "fieldIsSameOption" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldSetting, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-setting', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
@@ -12517,18 +12209,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ], host: {
                         class: 'field-setting 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]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\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]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\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-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
-        }] });
+        }], propDecorators: { aiEditField: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiEditField", required: true }] }, { type: i0.Output, args: ["aiEditFieldChange"] }], aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], aiExternalTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiExternalTemplate", required: false }] }], aiReferences: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReferences", required: false }] }], isUpdate: [{ type: i0.Input, args: [{ isSignal: true, alias: "isUpdate", required: false }] }], addField: [{ type: i0.Output, args: ["addField"] }], setField: [{ type: i0.Output, args: ["setField"] }] } });
 
 class AITableContextMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
         this.notifyService = inject(ThyNotifyService);
         this.thyPopoverRef = inject(ThyPopoverRef);
-        this.aiTable = input.required();
-        this.menuItems = input.required();
-        this.targetName = input.required();
-        this.position = input.required();
-        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length);
+        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
+        this.menuItems = input.required(...(ngDevMode ? [{ debugName: "menuItems" }] : []));
+        this.targetName = input.required(...(ngDevMode ? [{ debugName: "targetName" }] : []));
+        this.position = input.required(...(ngDevMode ? [{ debugName: "position" }] : []));
+        this.maxCount = computed(() => this.aiTable().context?.maxRecords() - this.aiTable().records().length, ...(ngDevMode ? [{ debugName: "maxCount" }] : []));
     }
     execute(menu) {
         if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
@@ -12542,10 +12234,10 @@ class AITableContextMenu extends ThyDropdownAbstractMenu {
         this.execute(menu);
         this.thyPopoverRef.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { 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: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { 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"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableContextMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", 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        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyInputNumber, selector: "thy-input-number", inputs: ["thyAutoFocus", "thyPlaceholder", "thyDisabled", "thyMax", "thyMin", "thyStep", "thyShowStepControls", "thyStepDelay", "thySize", "thyPrecision", "thySuffix"], outputs: ["thyBlur", "thyFocus", "thyStepChange"] }, { 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: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemNameDirective, selector: "[thyDropdownMenuItemName]" }, { kind: "directive", type: ThyDropdownMenuItemIconDirective, selector: "[thyDropdownMenuItemIcon]" }, { kind: "directive", type: ThyDropdownMenuItemMetaDirective, selector: "[thyDropdownMenuItemMeta]" }, { 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"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableContextMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableContextMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'context-menu'
@@ -12562,12 +12254,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         NgClass,
                         ThyDivider
                     ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n" }]
-        }] });
+        }], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], menuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "menuItems", required: true }] }], targetName: [{ type: i0.Input, args: [{ isSignal: true, alias: "targetName", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: true }] }] } });
 
 class CheckboxMenuSort {
     constructor() {
-        this.field = input.required();
-        this.menu = input.required();
+        this.field = input.required(...(ngDevMode ? [{ debugName: "field" }] : []));
+        this.menu = input.required(...(ngDevMode ? [{ debugName: "menu" }] : []));
         this.Direction = {
             ascending: 'ascending',
             descending: 'descending'
@@ -12583,8 +12275,8 @@ class CheckboxMenuSort {
         }
         return '按 Z → A 排序';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CheckboxMenuSort, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: CheckboxMenuSort, isStandalone: true, selector: "checkbox-menu-sort", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "checkbox-menu-sort" }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CheckboxMenuSort, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: CheckboxMenuSort, isStandalone: true, selector: "checkbox-menu-sort", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "checkbox-menu-sort" }, ngImport: i0, template: `
         <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
         <div class="sort-state">
             @if (menu().type === 'sortByAsc') {
@@ -12599,7 +12291,7 @@ class CheckboxMenuSort {
         </div>
     `, isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CheckboxMenuSort, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: CheckboxMenuSort, decorators: [{
             type: Component,
             args: [{
                     selector: 'checkbox-menu-sort',
@@ -12623,21 +12315,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [ThyIcon, ThyCheckbox, FormsModule, FormsModule]
                 }]
-        }] });
+        }], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], menu: [{ type: i0.Input, args: [{ isSignal: true, alias: "menu", required: true }] }] } });
 
 class AITableFieldMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
+        this.execMenuCallback = input(...(ngDevMode ? [undefined, { debugName: "execMenuCallback" }] : []));
         this.field = computed(() => {
             return this.aiTable.fields().find((item) => item._id === this.fieldId);
-        });
+        }, ...(ngDevMode ? [{ debugName: "field" }] : []));
     }
     getCustomComponent(menu) {
         return menu.customComponent?.(this.aiTable, this.field());
     }
     execute(menu) {
         if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
-            menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
+            if (menu.exec) {
+                const popoverRef = menu.exec(this.aiTable, this.field, this.origin, this.position);
+                this.execMenuCallback()?.({ menu, popoverRef });
+            }
         }
     }
     getMenuName(menu, field) {
@@ -12646,10 +12342,10 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
         }
         return menu.name || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", 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: "@if (field()) {\n    @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                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\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"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldMenus: { classPropertyName: "fieldMenus", publicName: "fieldMenus", isSignal: false, isRequired: true, transformFunction: null }, origin: { classPropertyName: "origin", publicName: "origin", isSignal: false, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: false, isRequired: false, transformFunction: null }, execMenuCallback: { classPropertyName: "execMenuCallback", publicName: "execMenuCallback", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @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                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\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"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
@@ -12667,7 +12363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 type: Input
             }], position: [{
                 type: Input
-            }] } });
+            }], execMenuCallback: [{ type: i0.Input, args: [{ isSignal: true, alias: "execMenuCallback", required: false }] }] } });
 
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
@@ -12680,18 +12376,18 @@ const GRID_CELL_EDITOR_MAP = {
 
 class DynamicCellEditorComponent {
     constructor() {
-        this.aiTable = input.required();
-        this.fieldId = input.required();
-        this.recordId = input.required();
-        this.references = input.required();
+        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
+        this.fieldId = input.required(...(ngDevMode ? [{ debugName: "fieldId" }] : []));
+        this.recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
+        this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : []));
         this.updateFieldValues = output();
-        this.editorHost = viewChild('editorHost', { read: ViewContainerRef });
+        this.editorHost = viewChild('editorHost', ...(ngDevMode ? [{ debugName: "editorHost", read: ViewContainerRef }] : [{ read: ViewContainerRef }]));
         this.field = computed(() => {
             return this.aiTable().fieldsMap()[this.fieldId()];
-        });
+        }, ...(ngDevMode ? [{ debugName: "field" }] : []));
         this.cellValue = computed(() => {
             return AITableQueries.getFieldValue(this.aiTable(), [this.recordId(), this.fieldId()]);
-        });
+        }, ...(ngDevMode ? [{ debugName: "cellValue" }] : []));
         effect(() => {
             this.recordId();
             this.fieldId();
@@ -12743,14 +12439,14 @@ class DynamicCellEditorComponent {
         }
         return GRID_CELL_EDITOR_MAP[fieldType];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DynamicCellEditorComponent, isStandalone: true, selector: "ai-dynamic-cell-editor", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DynamicCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.13", type: DynamicCellEditorComponent, isStandalone: true, selector: "ai-dynamic-cell-editor", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
         <div class="ai-dynamic-cell-editor-wrapper">
             <ng-container #editorHost></ng-container>
         </div>
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCellEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: DynamicCellEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-dynamic-cell-editor',
@@ -12761,59 +12457,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
     `,
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], updateFieldValues: [{ type: i0.Output, args: ["updateFieldValues"] }], editorHost: [{ type: i0.ViewChild, args: ['editorHost', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
 class RecordDetailComponent {
     fieldIconPath(field) {
         return getFieldIconPath(field);
     }
     constructor() {
-        this.aiTable = input.required();
-        this.recordId = input.required();
-        this.references = input.required();
-        this.actions = input();
+        this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
+        this.recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
+        this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : []));
+        this.actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
         this.recordIdChange = output();
-        this.internalRecordId = signal('');
+        this.internalRecordId = signal('', ...(ngDevMode ? [{ debugName: "internalRecordId" }] : []));
+        this.readonly = computed(() => {
+            return this.aiTable().context?.readonly?.();
+        }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.currentRecordId = computed(() => {
             const inputId = this.recordId();
             const internalId = this.internalRecordId();
             return internalId || inputId;
-        });
-        this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate');
-        this.slideRef = inject(ThySlideRef);
-        this.thyPopover = inject(ThyPopover);
+        }, ...(ngDevMode ? [{ debugName: "currentRecordId" }] : []));
+        this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate', ...(ngDevMode ? [{ debugName: "fieldOperationsMenuTemplate" }] : []));
         this.record = computed(() => {
             return this.aiTable().recordsMap()[this.currentRecordId()];
-        });
+        }, ...(ngDevMode ? [{ debugName: "record" }] : []));
         this.fields = computed(() => {
             return this.aiTable().gridData().fields;
-        });
+        }, ...(ngDevMode ? [{ debugName: "fields" }] : []));
         this.firstField = computed(() => {
             return this.aiTable().gridData().fields[0];
-        });
+        }, ...(ngDevMode ? [{ debugName: "firstField" }] : []));
         this.lastField = computed(() => {
             const fields = this.aiTable().gridData().fields;
             return fields[fields.length - 1];
-        });
+        }, ...(ngDevMode ? [{ debugName: "lastField" }] : []));
         this.recordTitle = computed(() => {
             const firstField = this.firstField();
             if (!firstField)
                 return '未命名记录';
             const cellValue = AITableQueries.getFieldValue(this.aiTable(), [this.currentRecordId(), firstField._id]);
             return this.formatCellValue(cellValue, firstField) || '未命名记录';
-        });
+        }, ...(ngDevMode ? [{ debugName: "recordTitle" }] : []));
         this.recordNavigation = computed(() => {
             return getRecordNavigationInfo(this.aiTable(), this.currentRecordId());
-        });
+        }, ...(ngDevMode ? [{ debugName: "recordNavigation" }] : []));
         this.fieldMenus = computed(() => {
             const fieldMenusFn = this.aiTable()?.context?.aiFieldConfig()?.recordDetailFieldMenus;
             if (fieldMenusFn && this.aiTable()) {
                 return fieldMenusFn(this.aiTable());
             }
             return [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
         this.activeFieldId = null;
-        this.fieldMenuVisible = {};
+        this.fieldMenuVisible = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuVisible" }] : []));
+        this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : []));
+        this.fieldMenuPopoverRef = null;
+        this.slideRef = inject(ThySlideRef);
+        this.thyPopover = inject(ThyPopover);
         effect(() => {
             const activeCell = this.aiTable().selection().activeCell;
             if (activeCell) {
@@ -12851,15 +12552,20 @@ class RecordDetailComponent {
         setActiveCell(this.aiTable(), [this.currentRecordId(), fieldId]);
     }
     showFieldMenu(fieldId) {
-        this.fieldMenuVisible[fieldId] = true;
+        this.fieldMenuVisible.set({ [fieldId]: true });
     }
     hideFieldMenu(fieldId) {
-        this.fieldMenuVisible[fieldId] = false;
+        if (!this.fieldMenuPopoverRef) {
+            this.fieldMenuVisible.set({ [fieldId]: false });
+        }
     }
     fieldMenuMoreClick(e, fieldId) {
         const origin = e.target;
         const position = origin.getBoundingClientRect();
-        this.thyPopover.open(AITableFieldMenu, {
+        this.fieldMenuVisible.set({ [fieldId]: true });
+        this.fieldMenuActive.set({ [fieldId]: true });
+        let isSelfClose = false;
+        this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
             origin,
             placement: 'bottomRight',
             manualClosure: true,
@@ -12868,9 +12574,26 @@ class RecordDetailComponent {
                 fieldId,
                 fieldMenus: this.fieldMenus(),
                 origin,
-                position
+                position,
+                execMenuCallback: (data) => {
+                    isSelfClose = true;
+                    this.thyPopover.close();
+                    data.popoverRef?.beforeClosed().subscribe(() => {
+                        this.fieldMenuVisible.set({ [fieldId]: false });
+                        this.fieldMenuActive.set({ [fieldId]: false });
+                    });
+                }
             }
         });
+        if (this.fieldMenuPopoverRef) {
+            this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
+                if (!isSelfClose) {
+                    this.fieldMenuVisible.set({ [fieldId]: false });
+                    this.fieldMenuActive.set({ [fieldId]: false });
+                }
+                this.fieldMenuPopoverRef = null;
+            });
+        }
     }
     addNewField(e) {
         const origin = e.target;
@@ -12932,13 +12655,13 @@ class RecordDetailComponent {
                 return transformValue;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"px-5 pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base text-secondary\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n                            <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n                                <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                <thy-icon thyIconName=\"plus\"></thy-icon>\n                <span>\u65B0\u589E\u5B57\u6BB5</span>\n            </button>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { 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: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n                                <a\n                                    thyAction\n                                    [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                    href=\"javascript:;\"\n                                    (click)=\"fieldMenuMoreClick($event, field._id)\"\n                                    ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                                ></a>\n                            </div>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>\u65B0\u589E\u5B57\u6BB5</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { 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: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ai-record-detail', imports: [ThyButton, ThyIcon, ThyDivider, ThyPopoverDirective, ThyDropdownMenuItemDirective, DynamicCellEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"px-5 pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base text-secondary\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n                            <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n                                <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                <thy-icon thyIconName=\"plus\"></thy-icon>\n                <span>\u65B0\u589E\u5B57\u6BB5</span>\n            </button>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [] });
+            args: [{ selector: 'ai-record-detail', imports: [ThyButton, ThyAction, ThyIcon, ThyDivider, ThyPopoverDirective, ThyDropdownMenuItemDirective, DynamicCellEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n                                <a\n                                    thyAction\n                                    [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                    href=\"javascript:;\"\n                                    (click)=\"fieldMenuMoreClick($event, field._id)\"\n                                    ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                                ></a>\n                            </div>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>\u65B0\u589E\u5B57\u6BB5</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], recordIdChange: [{ type: i0.Output, args: ["recordIdChange"] }], fieldOperationsMenuTemplate: [{ type: i0.ViewChild, args: ['fieldOperationsMenuTemplate', { isSignal: true }] }] } });
 
 class AITableGridEventService {
     constructor() {
@@ -13170,10 +12893,10 @@ class AITableGridEventService {
         });
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridEventService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridEventService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridEventService, decorators: [{
             type: Injectable
         }] });
 
@@ -13222,37 +12945,38 @@ class AITableGridFieldService {
         });
         return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridFieldService, deps: [{ token: i1$1.ThyPopover }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridFieldService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridFieldService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridFieldService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$1.ThyPopover }] });
 
 class AITableGridBase {
     constructor() {
-        this.aiRecords = model.required();
-        this.aiFields = model.required();
-        this.aiContextMenuItems = input();
-        this.aiFieldConfig = input();
-        this.aiReadonly = input(false);
-        this.aiPlugins = input();
-        this.aiMaxFields = input();
-        this.aiMaxRecords = input();
-        this.aiMaxSelectOptions = input();
-        this.aiReferences = input.required();
-        this.aiBuildRenderDataFn = input();
-        this.aiBuildGroupLinearRowsFn = input();
-        this.aiSortKeysMap = input();
-        this.aiGetI18nTextByKey = input();
-        this.aiKeywords = input();
-        this.aiFrozenColumnCountFn = input();
-        this.aiRecordHeight = input(AITableRecordHeightType.low);
+        this.aiRecords = model.required(...(ngDevMode ? [{ debugName: "aiRecords" }] : []));
+        this.aiFields = model.required(...(ngDevMode ? [{ debugName: "aiFields" }] : []));
+        this.aiContextMenuItems = input(...(ngDevMode ? [undefined, { debugName: "aiContextMenuItems" }] : []));
+        this.aiFieldConfig = input(...(ngDevMode ? [undefined, { debugName: "aiFieldConfig" }] : []));
+        this.aiReadonly = input(false, ...(ngDevMode ? [{ debugName: "aiReadonly" }] : []));
+        this.aiPlugins = input(...(ngDevMode ? [undefined, { debugName: "aiPlugins" }] : []));
+        this.aiMaxFields = input(...(ngDevMode ? [undefined, { debugName: "aiMaxFields" }] : []));
+        this.aiMaxRecords = input(...(ngDevMode ? [undefined, { debugName: "aiMaxRecords" }] : []));
+        this.aiMaxSelectOptions = input(...(ngDevMode ? [undefined, { debugName: "aiMaxSelectOptions" }] : []));
+        this.aiReferences = input.required(...(ngDevMode ? [{ debugName: "aiReferences" }] : []));
+        this.aiBuildRenderDataFn = input(...(ngDevMode ? [undefined, { debugName: "aiBuildRenderDataFn" }] : []));
+        this.aiBuildGroupLinearRowsFn = input(...(ngDevMode ? [undefined, { debugName: "aiBuildGroupLinearRowsFn" }] : []));
+        this.aiSortKeysMap = input(...(ngDevMode ? [undefined, { debugName: "aiSortKeysMap" }] : []));
+        this.aiGetI18nTextByKey = input(...(ngDevMode ? [undefined, { debugName: "aiGetI18nTextByKey" }] : []));
+        this.aiKeywords = input(...(ngDevMode ? [undefined, { debugName: "aiKeywords" }] : []));
+        this.aiFrozenColumnCountFn = input(...(ngDevMode ? [undefined, { debugName: "aiFrozenColumnCountFn" }] : []));
+        this.aiRecordHeight = input(AITableRecordHeightType.low, ...(ngDevMode ? [{ debugName: "aiRecordHeight" }] : []));
+        this.aiRecordDetailConfig = input(...(ngDevMode ? [undefined, { debugName: "aiRecordDetailConfig" }] : []));
         this.AITableFieldType = AITableFieldType;
         this.AITableSelectOptionStyle = AITableSelectOptionStyle;
         this.isSelectedAll = computed(() => {
             return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
-        });
+        }, ...(ngDevMode ? [{ debugName: "isSelectedAll" }] : []));
         this.aiTableInitialized = output();
         this.aiAddRecord = output();
         this.aiRemoveRecord = output();
@@ -13273,7 +12997,7 @@ class AITableGridBase {
                 return fieldMenusFn(this.aiTable);
             }
             return [];
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
         this.gridData = computed(() => {
             this.aiTable.recordsWillHidden();
             if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
@@ -13283,7 +13007,7 @@ class AITableGridBase {
                 records: this.aiRecords(),
                 fields: this.aiFields()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "gridData" }] : []));
         this.ngZone = inject(NgZone);
         this.elementRef = inject(ElementRef);
         this.destroyRef = inject(DestroyRef);
@@ -13372,17 +13096,17 @@ class AITableGridBase {
             this.aiTableGridEventService.openEdit(cellDom);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", 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 }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", 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 }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", 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 }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", 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 }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null }, aiRecordDetailConfig: { classPropertyName: "aiRecordDetailConfig", publicName: "aiRecordDetailConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
             args: [{
                     selector: 'ai-table-grid-base',
                     template: '',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
-        }] });
+        }], propDecorators: { aiRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecords", required: true }] }, { type: i0.Output, args: ["aiRecordsChange"] }], aiFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFields", required: true }] }, { type: i0.Output, args: ["aiFieldsChange"] }], aiContextMenuItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiContextMenuItems", required: false }] }], aiFieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFieldConfig", required: false }] }], aiReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReadonly", required: false }] }], aiPlugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiPlugins", required: false }] }], aiMaxFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxFields", required: false }] }], aiMaxRecords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxRecords", required: false }] }], aiMaxSelectOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiMaxSelectOptions", required: false }] }], aiReferences: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiReferences", required: true }] }], aiBuildRenderDataFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildRenderDataFn", required: false }] }], aiBuildGroupLinearRowsFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiBuildGroupLinearRowsFn", required: false }] }], aiSortKeysMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiSortKeysMap", required: false }] }], aiGetI18nTextByKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiGetI18nTextByKey", required: false }] }], aiKeywords: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiKeywords", required: false }] }], aiFrozenColumnCountFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiFrozenColumnCountFn", required: false }] }], aiRecordHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecordHeight", required: false }] }], aiRecordDetailConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiRecordDetailConfig", required: false }] }], aiTableInitialized: [{ type: i0.Output, args: ["aiTableInitialized"] }], aiAddRecord: [{ type: i0.Output, args: ["aiAddRecord"] }], aiRemoveRecord: [{ type: i0.Output, args: ["aiRemoveRecord"] }], aiAddField: [{ type: i0.Output, args: ["aiAddField"] }], aiCopyRecords: [{ type: i0.Output, args: ["aiCopyRecords"] }], aiMoveField: [{ type: i0.Output, args: ["aiMoveField"] }], aiUpdateFieldValues: [{ type: i0.Output, args: ["aiUpdateFieldValues"] }], aiSetField: [{ type: i0.Output, args: ["aiSetField"] }], aiSetFieldWidth: [{ type: i0.Output, args: ["aiSetFieldWidth"] }], aiSetFieldStatType: [{ type: i0.Output, args: ["aiSetFieldStatType"] }], aiMoveRecords: [{ type: i0.Output, args: ["aiMoveRecords"] }], aiClick: [{ type: i0.Output, args: ["aiClick"] }], aiDbClick: [{ type: i0.Output, args: ["aiDbClick"] }], aiRowGroupCollapseClick: [{ type: i0.Output, args: ["aiRowGroupCollapseClick"] }] } });
 
 class AITableDomGrid extends AITableGridBase {
     ngOnInit() {
@@ -13398,10 +13122,10 @@ class AITableDomGrid extends AITableGridBase {
             fieldMenus: this.fieldMenus()
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "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: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { 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: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i2$2.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i3$1.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i3$1.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n        >\n            <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                href=\"javascript:;\"\n                class=\"grid-field-action\"\n                thyAction\n                thyIcon=\"more-vertical\"\n                (click)=\"openFieldMenu($event, field, fieldAction)\"\n            >\n            </a>\n        </div>\n    }\n    <div class=\"grid-column-blank cursor-pointer\" #gridColumnBlank (click)=\"addField(gridColumnBlank)\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n<div class=\"grid-body d-flex\">\n    @for (record of gridData().records; track record._id; let index = $index) {\n        <div class=\"grid-row d-flex\" [ngClass]=\"{ highlight: (record._id | isSelectRecord: aiTable.selection()) }\">\n            <div class=\"grid-row-index grid-checkbox\">\n                <label\n                    [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'checked-box' : 'unchecked-box'\"\n                    thyCheckbox\n                    thyLabelText=\"\"\n                    [ngModel]=\"record._id | isSelectRecord: aiTable.selection()\"\n                    (ngModelChange)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div #cell class=\"grid-cell\" [attr.type]=\"[field.type]\" [attr.fieldId]=\"[field._id]\" [attr.recordId]=\"[record._id]\">\n                    <!-- [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\" -->\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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: ["thyValue", "currentValue", "hasHalf", "thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyValueChange", "currentValueChange", "hasHalfChange", "thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { 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: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i2$2.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i3$1.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError", "thySizeChange"] }, { kind: "component", type: i3$1.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-dom-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid ai-table-dom-grid'
@@ -13621,10 +13345,10 @@ class AITableScrollControllerService {
             this.mouseUpSubscription = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableScrollControllerService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableScrollControllerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableScrollControllerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableScrollControllerService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
@@ -13651,7 +13375,8 @@ class RecordDetailService {
                 recordId: config.recordId,
                 references: config.references,
                 actions: config.actions
-            }
+            },
+            ...config.slideConfig
         });
         if (this.currentSlideRef) {
             this.currentSlideRef.afterOpened().subscribe(() => {
@@ -13678,19 +13403,19 @@ class RecordDetailService {
     isOpen() {
         return this.currentSlideRef !== null;
     }
-    isClickInsideTableOrPanel(event, viewContainerRef) {
+    canCloseSlide(event, viewContainerRef) {
         const target = event.target;
         const tableElement = viewContainerRef.element.nativeElement;
         if (tableElement && tableElement.contains(target)) {
-            return true;
+            return false;
         }
         const overlayContainers = document.querySelectorAll('.cdk-overlay-container');
         for (let i = 0; i < overlayContainers.length; i++) {
             if (overlayContainers[i].contains(target)) {
-                return true;
+                return false;
             }
         }
-        return false;
+        return true;
     }
     setupDocumentClickListener(config) {
         if (this.clickSubscription) {
@@ -13698,22 +13423,23 @@ class RecordDetailService {
             this.clickSubscription = null;
         }
         this.clickSubscription = fromEvent(document, 'click').subscribe((event) => {
-            if (!this.isClickInsideTableOrPanel(event, config.viewContainerRef)) {
+            const callback = config.canCloseSlideCallback ? config.canCloseSlideCallback : this.canCloseSlide;
+            if (callback(event, config.viewContainerRef)) {
                 this.close();
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: RecordDetailService, decorators: [{
             type: Injectable
         }] });
 
 class AITableDragComponent {
     constructor() {
-        this.horizontalBar = input();
-        this.verticalBar = input();
+        this.horizontalBar = input(...(ngDevMode ? [undefined, { debugName: "horizontalBar" }] : []));
+        this.verticalBar = input(...(ngDevMode ? [undefined, { debugName: "verticalBar" }] : []));
         this.dragEnd = output();
         this.aiTableGridEventService = inject(AITableGridEventService);
         this.render2 = inject(Renderer2);
@@ -14152,15 +13878,15 @@ class AITableDragComponent {
         }
         this.scrollControllerService.destroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableDragComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.13", type: AITableDragComponent, isStandalone: true, selector: "ai-table-drag", inputs: { horizontalBar: { classPropertyName: "horizontalBar", publicName: "horizontalBar", isSignal: true, isRequired: false, transformFunction: null }, verticalBar: { classPropertyName: "verticalBar", publicName: "verticalBar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dragEnd: "dragEnd" }, host: { classAttribute: "ai-table-drag-container" }, ngImport: i0, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDragComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableDragComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-drag', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-drag-container'
                     }, template: "<div class=\"rect\"></div>\n<div class=\"auxiliary-line\"></div>" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { horizontalBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalBar", required: false }] }], verticalBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBar", required: false }] }], dragEnd: [{ type: i0.Output, args: ["dragEnd"] }] } });
 
 class AITableGrid extends AITableGridBase {
     constructor() {
@@ -14181,7 +13907,7 @@ class AITableGrid extends AITableGridBase {
         this.recordDetailService = inject(RecordDetailService);
         this.isPopoverOpen = false;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
-        this.containerRect = signal({ width: 0, height: 0 });
+        this.containerRect = signal({ width: 0, height: 0 }, ...(ngDevMode ? [{ debugName: "containerRect" }] : []));
         this.frozenColumnCount = computed(() => {
             const containerWidth = this.containerRect().width;
             const aiFrozenColumnCountFn = this.aiFrozenColumnCountFn();
@@ -14189,16 +13915,16 @@ class AITableGrid extends AITableGridBase {
                 return aiFrozenColumnCountFn(containerWidth);
             }
             return AI_TABLE_MIN_FROZEN_COLUMN_COUNT;
-        });
+        }, ...(ngDevMode ? [{ debugName: "frozenColumnCount" }] : []));
         this.hasContainerRect = computed(() => {
             return this.containerRect().width > 0 && this.containerRect().height > 0;
-        });
-        this.container = viewChild('container');
-        this.verticalBarRef = viewChild('verticalBar');
-        this.horizontalBarRef = viewChild('horizontalBar');
+        }, ...(ngDevMode ? [{ debugName: "hasContainerRect" }] : []));
+        this.container = viewChild('container', ...(ngDevMode ? [{ debugName: "container" }] : []));
+        this.verticalBarRef = viewChild('verticalBar', ...(ngDevMode ? [{ debugName: "verticalBarRef" }] : []));
+        this.horizontalBarRef = viewChild('horizontalBar', ...(ngDevMode ? [{ debugName: "horizontalBarRef" }] : []));
         this.linearRows = computed(() => {
             return buildGridLinearRows(this.gridData().records, !this.aiReadonly(), this.aiTable, this.aiBuildGroupLinearRowsFn?.());
-        });
+        }, ...(ngDevMode ? [{ debugName: "linearRows" }] : []));
         this.domToolTips = computed(() => {
             const scrollTop = this.aiTable.context.scrollState().scrollTop;
             const rowIndices = this.toolTipRowIndices();
@@ -14211,7 +13937,7 @@ class AITableGrid extends AITableGridBase {
                     tooltip
                 };
             });
-        });
+        }, ...(ngDevMode ? [{ debugName: "domToolTips" }] : []));
         this.toolTipRowIndices = computed(() => {
             const hiddenRows = this.aiTable.recordsWillHidden() || [];
             const moveRows = this.aiTable.recordsWillMove() || [];
@@ -14228,11 +13954,11 @@ class AITableGrid extends AITableGridBase {
                 });
             });
             return toolTipRowIndices;
-        });
+        }, ...(ngDevMode ? [{ debugName: "toolTipRowIndices" }] : []));
         this.visibleColumnsIndexMap = computed(() => {
             const columns = AITable.getVisibleFields(this.aiTable);
             return new Map(columns?.map((item, index) => [item._id, index]));
-        });
+        }, ...(ngDevMode ? [{ debugName: "visibleColumnsIndexMap" }] : []));
         this.fieldOptions = computed(() => {
             let allFieldOptions = getDefaultFieldOptions().map((fieldOption) => {
                 const name = getI18nTextByKey(this.aiTable, fieldOption.name);
@@ -14248,16 +13974,16 @@ class AITableGrid extends AITableGridBase {
                 allFieldOptions = filterFieldOptions(allFieldOptions);
             }
             return allFieldOptions;
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : []));
         this.fieldOptionMap = computed(() => {
             return new Map(this.fieldOptions().map((fieldOption) => [fieldOption.type, fieldOption]));
-        });
+        }, ...(ngDevMode ? [{ debugName: "fieldOptionMap" }] : []));
         this.visibleRowsIndexMap = computed(() => {
             return new Map(this.linearRows().map((row, index) => [row._id, index]));
-        });
+        }, ...(ngDevMode ? [{ debugName: "visibleRowsIndexMap" }] : []));
         this.containerElement = computed(() => {
             return this.container().nativeElement;
-        });
+        }, ...(ngDevMode ? [{ debugName: "containerElement" }] : []));
         this.trackBy = (index, item) => {
             return item.sort_by ?? index;
         };
@@ -14289,25 +14015,25 @@ class AITableGrid extends AITableGridBase {
                 maxRecords: this.aiMaxRecords(),
                 maxSelectOptions: this.aiMaxSelectOptions()
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "rendererConfig" }] : []));
         this.coordinate = computed(() => {
             return this.rendererConfig().coordinate;
-        });
+        }, ...(ngDevMode ? [{ debugName: "coordinate" }] : []));
         this.scrollState = computed(() => {
             return this.aiTable.context.scrollState();
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollState" }] : []));
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollTotalHeight" }] : []));
         this.scrollbarWidth = computed(() => {
             return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        });
+        }, ...(ngDevMode ? [{ debugName: "scrollbarWidth" }] : []));
         this.i18nTexts = computed(() => {
             this.aiGetI18nTextByKey();
             return {
                 rowAddFilterTooltip: getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip)
             };
-        });
+        }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : []));
         // rowAddFilterTooltip = getI18nTextByKey(this.aiTable, AITableGridI18nKey.rowAddFilterTooltip);
         this.rowIndicesMap = computed(() => {
             const rowIndicesMap = {};
@@ -14320,7 +14046,7 @@ class AITableGrid extends AITableGridBase {
                 }
             });
             return rowIndicesMap;
-        });
+        }, ...(ngDevMode ? [{ debugName: "rowIndicesMap" }] : []));
         this.actions = {
             updateFieldValues: (data) => {
                 this.aiUpdateFieldValues.emit(data);
@@ -14438,6 +14164,7 @@ class AITableGrid extends AITableGridBase {
         this.initCustomField();
     }
     ngOnDestroy() {
+        this.recordDetailService.close();
         this.resizeObserver?.disconnect();
     }
     initContext() {
@@ -14722,7 +14449,8 @@ class AITableGrid extends AITableGridBase {
         this.aiTableGridEventService.closeCellEditor();
         const { context } = this.aiTable;
         const targetName = targetNameDetail.targetName;
-        if (mouseEvent.button !== AITableMouseDownType.Left || (targetName !== AI_TABLE_FIELD_HEAD_MORE && this.aiReadonly()))
+        if (mouseEvent.button !== AITableMouseDownType.Left ||
+            (![AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_EXPAND_RECORD_ICON].includes(targetName) && this.aiReadonly()))
             return;
         switch (targetName) {
             case AI_TABLE_ROW_ADD_BUTTON: {
@@ -14811,7 +14539,8 @@ class AITableGrid extends AITableGridBase {
                     aiTable: this.aiTable,
                     recordId: targetNameDetail.recordId,
                     references: this.aiReferences(),
-                    actions: this.actions
+                    actions: this.actions,
+                    ...this.aiRecordDetailConfig()
                 });
             }
         }
@@ -15258,15 +14987,15 @@ class AITableGrid extends AITableGridBase {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], 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            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\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    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.13", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], 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            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\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    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.13", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
                     }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], 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            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\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    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }], verticalBarRef: [{ type: i0.ViewChild, args: ['verticalBar', { isSignal: true }] }], horizontalBarRef: [{ type: i0.ViewChild, args: ['horizontalBar', { isSignal: true }] }] } });
 
 /**
  * Generated bundle index. Do not edit.