@ai-table/grid 0.5.0 → 0.5.2

package/components/record-detail/record-detail.component.scss

@@ -76,3 +76,12 @@
         }
     }
 }
+
+.ai-table-record-detail-remove {
+    &:hover {
+        .thy-icon {
+            color: variables.$danger !important;
+        }
+        color: variables.$danger !important;
+    }
+}

package/fesm2022/ai-table-grid.mjs

@@ -6958,7 +6958,7 @@ class GroupLayout extends Layout {
             return;
         const { row, indexStyle } = config;
         const { _id: groupValue, fieldId } = row;
-        const { field, style, aiTable } = render;
+        const { field, style, aiTable, cellValue } = render;
         const y = this.y;
         const rowHeight = this.rowHeight;
         const { fill: indexFill } = indexStyle || { fill: this.colors.white };
@@ -6986,7 +6986,7 @@ class GroupLayout extends Layout {
             });
         }
         const iconContainerWidth = AI_TABLE_ICON_COMMON_SIZE + AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
-        if (!isEmpty(groupValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
+        if (!isEmpty(cellValue) || [AITableFieldType.checkbox, AITableFieldType.progress].includes(field.type)) {
             cellDrawer.initStyle(field, style);
             const statContainerWidth = aiTable.context?.groupStatContainerWidthMap()?.get(`${config.row.groupId}:${fieldId}`);
             const widthOffset = statContainerWidth ? statContainerWidth - AI_TABLE_CELL_PADDING : 0;
@@ -12177,15 +12177,54 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }] });
 
-class AITableFieldSetting {
+class AITableFieldSettingBase {
     constructor() {
         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.thyPopoverRef = inject((ThyPopoverRef));
+    }
+    ngOnInit() {
+        this.originField = this.aiEditField();
+    }
+    editFieldProperty() {
+        if (this.isUpdate()) {
+            const originFieldType = this.originField?.type;
+            this.setField.emit({
+                fieldOptions: {
+                    field: this.aiEditField(),
+                    path: [this.aiEditField()._id]
+                },
+                isSwitchType: !!originFieldType && this.aiEditField().type !== originFieldType
+            });
+        }
+        else {
+            this.addField.emit(this.aiEditField());
+        }
+        this.thyPopoverRef.close();
+    }
+    cancel() {
+        this.thyPopoverRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableFieldSettingBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.14", type: AITableFieldSettingBase, isStandalone: true, selector: "ai-table-field-setting-base", inputs: { aiEditField: { classPropertyName: "aiEditField", publicName: "aiEditField", isSignal: true, isRequired: true, transformFunction: null }, aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, 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" }, ngImport: i0, template: ` <ng-content></ng-content> `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableFieldSettingBase, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-field-setting-base',
+                    template: ` <ng-content></ng-content> `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], 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 }] }], 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 AITableFieldSetting extends AITableFieldSettingBase {
+    constructor() {
+        super(...arguments);
+        this.aiExternalTemplate = input(null, ...(ngDevMode ? [{ debugName: "aiExternalTemplate" }] : []));
         this.selectedFieldOption = computed(() => {
             return getFieldOptionByField(this.aiTable(), this.aiEditField());
         }, ...(ngDevMode ? [{ debugName: "selectedFieldOption" }] : []));
@@ -12207,7 +12246,6 @@ class AITableFieldSetting {
         this.aITableFieldType = AITableFieldType;
         this.isMultipleMember = false;
         this.isManualInputName = signal(false, ...(ngDevMode ? [{ debugName: "isManualInputName" }] : []));
-        this.thyPopoverRef = inject((ThyPopoverRef));
         this.checkUniqueName = (fieldName) => {
             fieldName = fieldName?.trim();
             return of(!!this.aiTable()
@@ -12228,7 +12266,7 @@ class AITableFieldSetting {
         }, ...(ngDevMode ? [{ debugName: "i18nTexts" }] : []));
     }
     ngOnInit() {
-        this.originField = this.aiEditField();
+        super.ngOnInit();
         this.isMultipleMember =
             this.aiEditField().type === AITableFieldType.member && !!this.aiEditField().settings?.is_multiple;
     }
@@ -12255,22 +12293,6 @@ class AITableFieldSetting {
             this.thyPopoverRef.updatePosition();
         }, 0);
     }
-    editFieldProperty() {
-        if (this.isUpdate()) {
-            const originFieldType = this.originField?.type;
-            this.setField.emit({
-                fieldOptions: {
-                    field: this.aiEditField(),
-                    path: [this.aiEditField()._id]
-                },
-                isSwitchType: !!originFieldType && this.aiEditField().type !== originFieldType
-            });
-        }
-        else {
-            this.addField.emit(this.aiEditField());
-        }
-        this.thyPopoverRef.close();
-    }
     multipleMemberChange() {
         this.aiEditField.set({
             ...this.aiEditField(),
@@ -12287,11 +12309,8 @@ class AITableFieldSetting {
     nameChange(event) {
         this.isManualInputName.set(true);
     }
-    cancel() {
-        this.thyPopoverRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableFieldSetting, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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.14", ngImport: i0, type: AITableFieldSetting, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AITableFieldSetting, isStandalone: true, selector: "ai-table-field-setting", inputs: { aiExternalTemplate: { classPropertyName: "aiExternalTemplate", publicName: "aiExternalTemplate", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "field-setting d-block pl-5 pr-5 pb-5 pt-4" }, usesInheritance: true, 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: "20.3.14", ngImport: i0, type: AITableFieldSetting, decorators: [{
             type: Component,
@@ -12319,7 +12338,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", 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"] }] } });
+        }], propDecorators: { aiExternalTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiExternalTemplate", required: false }] }] } });
 
 class AITableContextMenu extends ThyDropdownAbstractMenu {
     constructor() {
@@ -12573,13 +12592,13 @@ class RecordDetailComponent {
     }
     constructor() {
         this.aiTable = input.required(...(ngDevMode ? [{ debugName: "aiTable" }] : []));
-        this.recordId = input.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
+        this.recordId = model.required(...(ngDevMode ? [{ debugName: "recordId" }] : []));
         this.references = input.required(...(ngDevMode ? [{ debugName: "references" }] : []));
         this.actions = input(...(ngDevMode ? [undefined, { debugName: "actions" }] : []));
         this.recordIdChange = output();
         this.internalRecordId = signal('', ...(ngDevMode ? [{ debugName: "internalRecordId" }] : []));
         this.readonly = computed(() => {
-            return this.aiTable().context?.readonly?.();
+            return this.aiTable()?.context?.readonly?.();
         }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.currentRecordId = computed(() => {
             const inputId = this.recordId();
@@ -12636,6 +12655,13 @@ class RecordDetailComponent {
         this.fieldMenuPopoverRef = null;
         this.slideRef = inject(ThySlideRef);
         this.thyPopover = inject(ThyPopover);
+        effect(() => {
+            const recordId = this.recordId();
+            untracked(() => {
+                this.setSelection(recordId);
+                this.internalRecordId.set(recordId);
+            });
+        });
         effect(() => {
             const activeCell = this.aiTable().selection().activeCell;
             if (activeCell) {
@@ -12643,9 +12669,8 @@ class RecordDetailComponent {
             }
         });
     }
-    ngOnInit() {
-        this.setSelection(this.recordId());
-        this.internalRecordId.set(this.recordId());
+    updateRecordId(recordId) {
+        this.recordId.set(recordId);
     }
     close() {
         this.slideRef?.close();
@@ -12653,15 +12678,13 @@ class RecordDetailComponent {
     previousRecord() {
         const prevId = getPreviousRecordByActiveCell(this.aiTable());
         if (prevId) {
-            this.internalRecordId.set(prevId);
-            this.setSelection(prevId);
+            this.updateRecordId(prevId);
         }
     }
     nextRecord() {
         const nextId = getNextRecordByActiveCell(this.aiTable());
         if (nextId) {
-            this.internalRecordId.set(nextId);
-            this.setSelection(nextId);
+            this.updateRecordId(nextId);
         }
     }
     deleteRecord() {
@@ -12676,23 +12699,24 @@ class RecordDetailComponent {
         const position = fieldMenuOrigin.getBoundingClientRect();
         this.fieldMenuActive.set({ [fieldId]: true });
         let isSelfClose = false;
-        this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
-            origin,
-            placement: 'bottomRight',
-            initialState: {
-                aiTable: this.aiTable(),
-                fieldId,
-                fieldMenus: this.fieldMenus(),
-                origin: fieldMenuOrigin,
-                position,
-                execMenuCallback: (data) => {
-                    isSelfClose = true;
-                    data.popoverRef?.beforeClosed().subscribe(() => {
-                        this.fieldMenuActive.set({ [fieldId]: false });
-                    });
+        this.fieldMenuPopoverRef =
+            this.thyPopover.open(AITableFieldMenu, {
+                origin,
+                placement: 'bottomRight',
+                initialState: {
+                    aiTable: this.aiTable(),
+                    fieldId,
+                    fieldMenus: this.fieldMenus(),
+                    origin: fieldMenuOrigin,
+                    position,
+                    execMenuCallback: (data) => {
+                        isSelfClose = true;
+                        data.popoverRef?.beforeClosed().subscribe(() => {
+                            this.fieldMenuActive.set({ [fieldId]: false });
+                        });
+                    }
                 }
-            }
-        }) ?? null;
+            }) ?? null;
         if (this.fieldMenuPopoverRef) {
             this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
                 if (!isSelfClose) {
@@ -12753,7 +12777,7 @@ class RecordDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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 pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin 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                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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: 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: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: { recordId: "recordIdChange", 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 pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a\n                    class=\"ai-table-record-detail-remove\"\n                    thyDropdownMenuItem\n                    [thyDisabled]=\"readonly()\"\n                    href=\"javascript:;\"\n                    (click)=\"deleteRecord()\"\n                >\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin 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                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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: 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: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { 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: "20.3.14", ngImport: i0, type: RecordDetailComponent, decorators: [{
             type: Component,
@@ -12767,8 +12791,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ThyDropdownMenuComponent,
                         DynamicCellEditorComponent,
                         ThyFlexibleText
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin 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                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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 }] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a\n                    class=\"ai-table-record-detail-remove\"\n                    thyDropdownMenuItem\n                    [thyDisabled]=\"readonly()\"\n                    href=\"javascript:;\"\n                    (click)=\"deleteRecord()\"\n                >\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\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 class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin 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                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(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>{{ i18nTexts().addField }}</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 }] }, { type: i0.Output, args: ["recordIdChange"] }], 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() {
@@ -13178,7 +13202,7 @@ class AITableGridBase {
             position,
             references: this.aiReferences()
         });
-        if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
+        if (popoverRef) {
             popoverRef.componentInstance.addField.subscribe((defaultValue) => {
                 const fields = this.gridData().fields;
                 const fieldCount = fields.length;
@@ -13468,24 +13492,28 @@ class RecordDetailService {
     }
     open(config) {
         if (this.isOpen() && this.currentSlideRef) {
-            this.currentSlideRef.componentInstance.setSelection(config.recordId);
+            const componentInstance = this.currentSlideRef.componentInstance;
+            if (componentInstance && componentInstance.recordId() !== config.recordId) {
+                componentInstance.updateRecordId(config.recordId);
+            }
             return this.currentSlideRef;
         }
         this.config = config;
-        this.currentSlideRef = this.thySlide.open(RecordDetailComponent, {
-            from: 'right',
-            width: '480px',
-            hasBackdrop: false,
-            viewContainerRef: config.viewContainerRef,
-            panelClass: 'ai-expand-record-slide',
-            initialState: {
-                aiTable: config.aiTable,
-                recordId: config.recordId,
-                references: config.references,
-                actions: config.actions
-            },
-            ...config.slideConfig
-        }) ?? null;
+        this.currentSlideRef =
+            this.thySlide.open(RecordDetailComponent, {
+                from: 'right',
+                width: '480px',
+                hasBackdrop: false,
+                viewContainerRef: config.viewContainerRef,
+                panelClass: 'ai-expand-record-slide',
+                initialState: {
+                    aiTable: config.aiTable,
+                    recordId: config.recordId,
+                    references: config.references,
+                    actions: config.actions
+                },
+                ...config.slideConfig
+            }) ?? null;
         if (this.currentSlideRef) {
             this.currentSlideRef.afterOpened().subscribe(() => {
                 this.setupDocumentClickListener(config);
@@ -14762,7 +14790,7 @@ class AITableGrid extends AITableGridBase {
         if (!focused) {
             return true;
         }
-        const hasAITableGrid = focused.querySelector('ai-table-grid') !== null;
+        const hasAITableGrid = focused.closest('ai-table-grid') !== null || focused.closest('.ai-table-prevent-clear-selection') !== null;
         if (!hasAITableGrid) {
             return true;
         }
@@ -15121,5 +15149,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableExpandRecord, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderAtomType, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_LINE_SPACING, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_MIN_WIDTH, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_MULTI_SELECT_ITEM_DOT_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_PIECE_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_TAG_MIN_WIDTH, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_EXPAND_RECORD_ICON, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILE_ITEM_MARGIN_RIGHT, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_RECORD_HEIGHT_LEVELS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_EXPAND_WIDTH, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellBaseLayout, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, DynamicCellEditorComponent, EditPath, ExpandRecordPath, FONT_SIZE_SM, FieldModelMap, GROUP_STAT_DEFAULT_FONT_SIZE, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RecordDetailComponent, RecordDetailService, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridLinearRows, buildNormalLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewFieldName, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldIconPath, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getNextRecordByActiveCell, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getPreviousRecordByActiveCell, getRecordNavigationInfo, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmptyOrNot, isMac, isMeetFilter, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setCollapseDisabled, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableExpandRecord, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldSettingBase, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderAtomType, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_LINE_SPACING, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_MIN_WIDTH, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_MULTI_SELECT_ITEM_DOT_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_PIECE_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_TAG_MIN_WIDTH, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_EXPAND_RECORD_ICON, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILE_ITEM_MARGIN_RIGHT, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_RECORD_HEIGHT_LEVELS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_EXPAND_WIDTH, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellBaseLayout, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, DynamicCellEditorComponent, EditPath, ExpandRecordPath, FONT_SIZE_SM, FieldModelMap, GROUP_STAT_DEFAULT_FONT_SIZE, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RecordDetailComponent, RecordDetailService, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridLinearRows, buildNormalLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewFieldName, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldIconPath, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getNextRecordByActiveCell, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getPreviousRecordByActiveCell, getRecordNavigationInfo, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmptyOrNot, isMac, isMeetFilter, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setCollapseDisabled, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map