@ai-table/grid 0.0.54 → 0.0.55

package/fesm2022/ai-table-grid.mjs

@@ -47,7 +47,6 @@ import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator } from '
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { ThySlider } from 'ngx-tethys/slider';
-import { ThyRate } from 'ngx-tethys/rate';
 import * as i1$2 from '@angular/common';
 import { CommonModule, NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
@@ -64,6 +63,7 @@ import { ThyAvatarModule } from 'ngx-tethys/avatar';
 import * as i3$1 from 'ngx-tethys/checkbox';
 import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
 import { ThyProgress } from 'ngx-tethys/progress';
+import { ThyRate } from 'ngx-tethys/rate';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { LRUCache } from 'lru-cache';
 import { fromUnixTime, subDays } from 'date-fns';
@@ -1804,24 +1804,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['mousedown', ['$event']]
             }] } });
 
-class RatingCellEditorComponent extends AbstractEditCellEditor {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RatingCellEditorComponent, isStandalone: true, selector: "rating-cell-editor", host: { classAttribute: "d-flex align-items-center h-100 rating-cell-editor" }, usesInheritance: true, ngImport: i0, template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="update()"></thy-rate> `, 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: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RatingCellEditorComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'rating-cell-editor',
-                    template: ` <thy-rate [(ngModel)]="modelValue" (ngModelChange)="update()"></thy-rate> `,
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [FormsModule, ThyRate],
-                    host: {
-                        class: 'd-flex align-items-center h-100 rating-cell-editor'
-                    }
-                }]
-        }] });
-
 class SelectOptionComponent {
     constructor() {
         this.field = input.required();
@@ -2383,7 +2365,6 @@ const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.select]: SelectCellEditorComponent,
     [AITableFieldType.number]: NumberCellEditorComponent,
     [AITableFieldType.date]: DateCellEditorComponent,
-    [AITableFieldType.rate]: RatingCellEditorComponent,
     [AITableFieldType.link]: LinkCellEditorComponent,
     [AITableFieldType.progress]: ProgressEditorComponent
 };
@@ -2460,6 +2441,7 @@ const AI_TABLE_PROGRESS_BAR_HEIGHT = 10;
 const AI_TABLE_PROGRESS_BAR_RADIUS = 5;
 const AI_TABLE_PROGRESS_TEXT_Width = 46;
 const AI_TABLE_POPOVER_LEFT_OFFSET = 4;
+const AI_TABLE_RATE_MAX = 5;
 
 const MIN_COLUMN_WIDTH = 80;
 const DBL_CLICK_EDIT_TYPE = [
@@ -2470,7 +2452,7 @@ const DBL_CLICK_EDIT_TYPE = [
     AITableFieldType.member,
     AITableFieldType.link
 ];
-const MOUSEOVER_EDIT_TYPE = [AITableFieldType.progress, AITableFieldType.rate];
+const MOUSEOVER_EDIT_TYPE = [AITableFieldType.progress];
 const RowHeight = {
     Short: 32,
     Medium: 57,
@@ -6281,761 +6263,189 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-// TODO: components下的cells组件考虑移出 components ，这些组件都属于
-
-var cellComponents = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    AITableCellAttachment: AITableCellAttachment,
-    AITableCellLink: AITableCellLink,
-    AITableCellRichtext: AITableCellRichtext
-});
-
-const componentMap = {};
-Object.values(cellComponents).forEach((cellComponent) => {
-    componentMap[cellComponent.fieldType] = cellComponent;
-});
-
-function getHoverCell(aiTable) {
-    const pointPosition = aiTable.context.pointPosition();
-    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
-    if (!recordId || !fieldId) {
-        return;
-    }
-    const record = aiTable.recordsMap()[recordId];
-    const field = aiTable.fieldsMap()[fieldId];
-    if (!record || !field || !recordId || !fieldId) {
-        return;
-    }
-    const renderComponentDefinition = componentMap[field?.type];
-    if (!renderComponentDefinition) {
-        return;
+const createActiveCellBorder = (config) => {
+    const { aiTable, coordinate, columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex } = config;
+    const { linearRows } = aiTable.context;
+    const { rowHeight, frozenColumnCount } = coordinate;
+    const colors = AITable.getColors();
+    const visibleColumns = AITable.getVisibleFields(aiTable);
+    const activeCell = AITable.getActiveCell(aiTable);
+    const totalColumnCount = visibleColumns.length;
+    let activeCellBorder = null;
+    let frozenActiveCellBorder = null;
+    if (Array.isArray(activeCell) &&
+        !!activeCell.length &&
+        aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
+        aiTable.context.visibleColumnsIndexMap().has(activeCell[1])) {
+        const fieldId = activeCell[1];
+        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
+        const checkIsVisible = (rowIndex, columnIndex) => {
+            if (columnIndex < frozenColumnCount) {
+                return true;
+            }
+            return (rowIndex >= rowStartIndex && rowIndex <= rowStopIndex && columnIndex >= columnStartIndex && columnIndex <= columnStopIndex);
+        };
+        if (rowIndex != null && columnIndex != null && checkIsVisible(rowIndex, columnIndex)) {
+            const { type } = linearRows()[rowIndex];
+            if (type === AITableRowType.record) {
+                const activeField = visibleColumns.find((field) => field._id === fieldId);
+                if (activeField == null) {
+                    return {
+                        activeCellBorder,
+                        frozenActiveCellBorder
+                    };
+                }
+                const x = coordinate.getColumnOffset(columnIndex);
+                const y = coordinate.getRowOffset(rowIndex);
+                const columnWidth = coordinate.getColumnWidth(columnIndex);
+                const isFrozenColumn = columnIndex < frozenColumnCount;
+                const { offset, width } = getCellHorizontalPosition({
+                    columnWidth,
+                    columnIndex,
+                    columnCount: totalColumnCount
+                });
+                const currentConfig = {
+                    x: x + offset + AI_TABLE_OFFSET,
+                    y: y + AI_TABLE_OFFSET,
+                    width: width - AI_TABLE_OFFSET,
+                    height: rowHeight - AI_TABLE_OFFSET,
+                    strokeWidth: AI_TABLE_CELL_BORDER,
+                    stroke: colors.primary,
+                    fillEnabled: false,
+                    listening: false
+                };
+                if (isFrozenColumn) {
+                    frozenActiveCellBorder = currentConfig;
+                }
+                else {
+                    activeCellBorder = currentConfig;
+                }
+            }
+        }
     }
     return {
-        field,
-        recordId,
-        fieldId,
-        renderComponentDefinition
+        activeCellBorder,
+        frozenActiveCellBorder
     };
-}
+};
 
-class AITableGridEventService {
+/**
+ * 用于处理表格行或单元格的布局和绘制。
+ * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
+ * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
+ */
+class Layout extends Drawer {
     constructor() {
-        this.dblClickEvent$ = new Subject();
-        this.mousedownEvent$ = new Subject();
-        this.mouseoverEvent$ = new Subject();
-        this.globalMouseoverEvent$ = new Subject();
-        this.globalMousedownEvent$ = new Subject();
-        this.destroyRef = inject(DestroyRef);
-        this.thyPopover = inject(ThyPopover);
+        super(...arguments);
+        // 定义当前单元格或行的位置
+        this.x = 0;
+        this.y = 0;
+        // 行高
+        this.rowHeight = 0;
+        // 列宽
+        this.columnWidth = 0;
+        // 行索引
+        this.rowIndex = 0;
+        // 列索引
+        this.columnIndex = 0;
+        // 列数
+        this.columnCount = 0;
+        this.containerWidth = 0;
     }
-    initialize(aiTable, aiFieldRenderers) {
-        this.aiTable = aiTable;
-        this.aiFieldRenderers = aiFieldRenderers;
+    // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }) {
+        this.x = x;
+        this.y = y;
+        this.rowIndex = rowIndex;
+        this.columnIndex = columnIndex;
+        this.rowHeight = rowHeight;
+        this.columnWidth = columnWidth;
+        this.columnCount = columnCount;
+        this.containerWidth = containerWidth;
     }
-    registerEvents(element) {
-        fromEvent(element, 'dblclick', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.dblClickEvent$.next(event);
+    // 当前单元格是否是行的第一列
+    get isFirst() {
+        return this.columnIndex === 0;
+    }
+    // 当前单元格是否是行的最后一列
+    get isLast() {
+        return this.columnIndex === this.columnCount - 1;
+    }
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        const rowHeight = this.rowHeight;
+        const fill = isCheckedRow ? this.colors.itemActiveBgColor : isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
+        this.rect({
+            x: addFieldBlankX,
+            y: this.y + AI_TABLE_OFFSET,
+            width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                : this.containerWidth - addFieldBlankX,
+            height: rowHeight,
+            fill
         });
-        fromEvent(element, 'mouseover', { passive: true })
-            .pipe(debounceTime(80), takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.mouseoverEvent$.next(event);
+    }
+}
+
+class AddRowLayout extends Layout {
+    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
+        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
+        const rowHeight = this.rowHeight;
+        const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+        const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
+        this.line({
+            x: this.x + this.columnWidth,
+            y: this.y,
+            points: [0, rowHeight, width, rowHeight],
+            stroke: this.colors.gray200
         });
-        fromEvent(document, 'mouseover', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.globalMouseoverEvent$.next(event);
+    }
+    renderCell({ width, isHoverRow }) {
+        const x = this.x;
+        const y = this.y;
+        const rowHeight = this.rowHeight;
+        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        this.rect({
+            x,
+            y: y + AI_TABLE_OFFSET,
+            width: width,
+            height: rowHeight,
+            fill
         });
-        fromEvent(element, 'mousedown', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.mousedownEvent$.next(event);
+        this.line({
+            x,
+            y: y + rowHeight,
+            points: [0, 0, width, 0],
+            stroke: this.colors.gray200
         });
-        fromEvent(document, 'mousedown', { passive: true })
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((event) => {
-            this.globalMousedownEvent$.next(event);
-        });
-    }
-    getEditorComponent(type) {
-        const filedRenderSchema = this.aiFieldRenderers && this.aiFieldRenderers[type];
-        if (filedRenderSchema && filedRenderSchema.editor) {
-            return {
-                component: filedRenderSchema.editor,
-                isInternalComponent: false
-            };
-        }
-        return {
-            component: GRID_CELL_EDITOR_MAP[type],
-            isInternalComponent: true
-        };
-    }
-    openEdit(cellDom) {
-        const { x, y, width, height } = cellDom.getBoundingClientRect();
-        const fieldId = cellDom.getAttribute('fieldId');
-        const recordId = cellDom.getAttribute('recordId');
-        const { component } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
-        const ref = this.thyPopover.open(component, {
-            origin: cellDom,
-            originPosition: {
-                x: x - 1,
-                y: y + 1,
-                width: width + 2,
-                height: height + 2
-            },
-            width: width + 1 + 'px',
-            height: height + 2 + 'px',
-            placement: 'top',
-            offset: -(height + 4),
-            minWidth: width,
-            initialState: {
-                fieldId: fieldId,
-                recordId: recordId,
-                aiTable: this.aiTable
-            },
-            panelClass: 'grid-cell-editor',
-            outsideClosable: false,
-            hasBackdrop: false,
-            manualClosure: true,
-            animationDisabled: true,
-            autoAdaptive: true
-        });
-        return ref;
-    }
-    getOriginPosition(aiTable, options) {
-        const { container, coordinate, recordId, fieldId, isHoverEdit } = options;
-        const { scrollState } = aiTable.context;
-        const { rowHeight, columnCount } = coordinate;
-        const cell = [recordId, fieldId];
-        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, cell);
-        const originX = coordinate.getColumnOffset(columnIndex);
-        const originY = coordinate.getRowOffset(rowIndex);
-        const columnWidth = coordinate.getColumnWidth(columnIndex);
-        const { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
-            columnWidth,
-            columnIndex,
-            columnCount
-        });
-        const originRect = container.getBoundingClientRect();
-        const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
-        const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
-        const scrollTop = scrollState().scrollTop;
-        const originPosition = {
-            x: originX + originOffset - scrollLeft + originRect.x,
-            y: originY - scrollTop + originRect.y,
-            width: originWidth,
-            height: rowHeight
-        };
-        let x = originPosition.x + getEditorBoxOffset();
-        let y = originPosition.y + getEditorBoxOffset();
-        let width = getEditorSpace(originPosition.width);
-        let height = getEditorSpace(originPosition.height);
-        // hover 编辑组件无边框
-        if (isHoverEdit) {
-            x = originPosition.x + getHoverEditorBoxOffset();
-            y = originPosition.y + getHoverEditorBoxOffset();
-            width = getHoverEditorSpace(originPosition.width);
-            height = getHoverEditorSpace(originPosition.height);
-        }
-        return {
-            ...originPosition,
-            x: x,
-            y: y,
-            width: width,
-            height: height
-        };
-    }
-    openCellEditor(aiTable, options) {
-        const { container, recordId, fieldId, isHoverEdit, references } = options;
-        const { component, isInternalComponent } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
-        const offsetOriginPosition = this.getOriginPosition(aiTable, options);
-        this.cellEditorPopoverRef = this.thyPopover.open(component, {
-            viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
-            origin: container,
-            originPosition: offsetOriginPosition,
-            width: offsetOriginPosition.width + 'px',
-            height: offsetOriginPosition.height + 'px',
-            minWidth: offsetOriginPosition.width + 'px',
-            placement: 'bottom',
-            offset: -offsetOriginPosition.height,
-            initialState: {
-                fieldId: fieldId,
-                recordId: recordId,
-                references,
-                aiTable: aiTable
-            },
-            panelClass: 'grid-cell-editor',
-            outsideClosable: true,
-            hasBackdrop: false,
-            manualClosure: true,
-            animationDisabled: true,
-            autoAdaptive: true
-        });
-        if (this.cellEditorPopoverRef) {
-            const wheelEvent = fromEvent(this.cellEditorPopoverRef.componentInstance.elementRef.nativeElement, 'wheel').subscribe((event) => {
-                const field = aiTable.fieldsMap()[fieldId];
-                if (field.type === AITableFieldType.text || field.type === AITableFieldType.richText) {
-                    return;
-                }
-                event.preventDefault();
-                this.aiTable.context?.scrollAction({
-                    deltaX: event.deltaX,
-                    deltaY: event.deltaY,
-                    shiftKey: event.shiftKey,
-                    callback: () => {
-                        const originPosition = this.getOriginPosition(aiTable, options);
-                        const positionStrategy = this.cellEditorPopoverRef
-                            .getOverlayRef()
-                            .getConfig().positionStrategy;
-                        positionStrategy.setOrigin(originPosition);
-                        positionStrategy.apply();
-                    }
-                });
-            });
-            this.cellEditorPopoverRef.afterClosed().subscribe(() => {
-                wheelEvent.unsubscribe();
-                this.cellEditorPopoverRef = null;
-            });
-            this.cellEditorPopoverRef.componentInstance.updateFieldValue.subscribe((value) => {
-                options.updateFieldValue(value);
-            });
-        }
-        return this.cellEditorPopoverRef;
-    }
-    closeCellEditor() {
-        if (this.cellEditorPopoverRef) {
-            this.cellEditorPopoverRef.close();
-            this.cellEditorPopoverRef = null;
-        }
-    }
-    getCurrentEditCell() {
-        if (this.cellEditorPopoverRef) {
-            const recordId = this.cellEditorPopoverRef.componentInstance?.recordId;
-            const fieldId = this.cellEditorPopoverRef.componentInstance?.fieldId;
-            if (recordId && fieldId) {
-                return {
-                    recordId,
-                    fieldId
-                };
-            }
-            return null;
-        }
-        return null;
-    }
-    openContextMenu(aiTable, options) {
-        const { origin, position, menuItems, targetName, viewContainerRef } = options;
-        const ref = this.thyPopover.open(AITableContextMenu, {
-            origin: origin,
-            originPosition: position,
-            placement: 'bottomLeft',
-            insideClosable: true,
-            viewContainerRef,
-            initialState: {
-                aiTable,
-                menuItems,
-                targetName,
-                position
-            }
-        });
-        return ref;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, decorators: [{
-            type: Injectable
-        }] });
-
-class AITableGridBase {
-    constructor() {
-        this.aiRecords = model.required();
-        this.aiFields = model.required();
-        this.aiFieldsSizeMap = model.required();
-        this.aiContextMenuItems = input();
-        this.aiFieldConfig = input();
-        this.aiReadonly = input();
-        this.aiPlugins = input();
-        this.aiReferences = input.required();
-        this.aiBuildRenderDataFn = input();
-        this.aiGetI18nTextByKey = input();
-        this.aiKeywords = input();
-        this.AITableFieldType = AITableFieldType;
-        this.AITableSelectOptionStyle = AITableSelectOptionStyle;
-        this.isSelectedAll = computed(() => {
-            return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
-        });
-        this.aiTableInitialized = output();
-        this.aiAddRecord = output();
-        this.aiAddField = output();
-        this.aiMoveField = output();
-        this.aiUpdateFieldValue = output();
-        this.aiSetField = output();
-        this.aiSetFieldWidth = output();
-        this.aiClick = output();
-        this.aiDbClick = output();
-        this.fieldMenus = computed(() => {
-            const fieldMenusFn = this.aiFieldConfig()?.fieldMenus;
-            if (fieldMenusFn && this.aiTable) {
-                return fieldMenusFn(this.aiTable);
-            }
-            return [];
-        });
-        this.gridData = computed(() => {
-            if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
-                return this.aiBuildRenderDataFn()(this.aiTable);
-            }
-            return {
-                records: this.aiRecords(),
-                fields: this.aiFields(),
-                fieldsSizeMap: this.aiFieldsSizeMap()
-            };
-        });
-        this.ngZone = inject(NgZone);
-        this.elementRef = inject(ElementRef);
-        this.destroyRef = inject(DestroyRef);
-        this.aiTableGridFieldService = inject(AITableGridFieldService);
-        this.aiTableGridEventService = inject(AITableGridEventService);
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
-    }
-    ngOnInit() {
-        this.initAITable();
-        this.initService();
-    }
-    initAITable() {
-        this.aiTable = createAITable(this.aiRecords, this.aiFields, this.gridData);
-        if (this.aiGetI18nTextByKey()) {
-            this.aiTable.getI18nTextByKey = this.aiGetI18nTextByKey();
-        }
-        this.aiPlugins()?.forEach((plugin) => {
-            this.aiTable = plugin(this.aiTable);
-        });
-        this.aiTableInitialized.emit(this.aiTable);
-    }
-    initService() {
-        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldRenderers);
-        this.aiTableGridSelectionService.initialize(this.aiTable);
-        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
-        this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
-        AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
-    }
-    addRecord() {
-        const records = this.aiRecords();
-        const recordCount = records.length;
-        this.aiAddRecord.emit({
-            originId: recordCount > 0 ? records[records.length - 1]._id : ''
-        });
-    }
-    selectRecord(recordId) {
-        this.aiTableGridSelectionService.selectRecord(recordId);
-    }
-    toggleSelectAll(checked) {
-        this.aiTableGridSelectionService.toggleSelectAll(checked);
-    }
-    addField(gridColumnBlank, position) {
-        const field = createDefaultField(this.aiTable, AITableFieldType.text);
-        const popoverRef = this.aiTableGridFieldService.editFieldProperty(this.aiTable, {
-            field,
-            isUpdate: false,
-            origin: gridColumnBlank,
-            position
-        });
-        if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
-            popoverRef.componentInstance.addField.subscribe((defaultValue) => {
-                const fields = this.gridData().fields;
-                const fieldCount = fields.length;
-                this.aiAddField.emit({
-                    originId: fieldCount > 0 ? fields[fields.length - 1]._id : '',
-                    defaultValue
-                });
-            });
-        }
-    }
-    subscribeEvents() {
-        this.ngZone.runOutsideAngular(() => {
-            this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.dblClick(event);
-            });
-            this.aiTableGridEventService.mousedownEvent$
-                .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
-                .subscribe((event) => {
-                this.aiTableGridSelectionService.updateSelect(event);
-            });
-            this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.mouseoverHandle(event);
-            });
-            this.aiTableGridEventService.globalMouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
-                this.closeHoverCellEditor(event);
-            });
-        });
-    }
-    dblClick(event) {
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
-            this.aiTableGridEventService.openEdit(cellDom);
-        }
-    }
-    mouseoverHandle(event) {
-        if (this.mouseoverRef) {
-            this.mouseoverRef?.close();
-        }
-        const cellDom = event.target.closest('.grid-cell');
-        const type = cellDom && cellDom.getAttribute('type');
-        if (type && MOUSEOVER_EDIT_TYPE.includes(type)) {
-            this.mouseoverRef = this.aiTableGridEventService.openEdit(cellDom);
-        }
-    }
-    closeHoverCellEditor(e) {
-        if (this.mouseoverRef) {
-            const hasGrid = e.target && e.target.closest('.ai-table-grid');
-            const hasCellEditor = e.target && e.target.closest('.grid-cell-editor');
-            if (!hasGrid && !hasCellEditor) {
-                this.mouseoverRef.close();
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.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 }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValue: "aiUpdateFieldValue", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-grid-base',
-                    template: '',
-                    standalone: true,
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class AITableDomGrid extends AITableGridBase {
-    ngOnInit() {
-        super.ngOnInit();
-        this.subscribeEvents();
-    }
-    openFieldMenu(e, field, fieldAction) {
-        const moreBtn = e.target.closest('.grid-field-action');
-        this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
-            origin: moreBtn,
-            editOrigin: fieldAction,
-            fieldId: field._id,
-            fieldMenus: this.fieldMenus()
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                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)=\"selectRecord(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\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\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: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "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: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["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: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.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 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, decorators: [{
-            type: Component,
-            args: [{ selector: 'ai-table-dom-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'ai-table-grid ai-table-dom-grid'
-                    }, imports: [
-                        NgClass,
-                        NgComponentOutlet,
-                        CommonModule,
-                        FormsModule,
-                        SelectOptionPipe,
-                        SelectOptionsPipe,
-                        ThyTag,
-                        ThyPopoverModule,
-                        ThyIcon,
-                        ThyRate,
-                        ThyProgress,
-                        AITableFieldSetting,
-                        ThyDatePickerFormatPipe,
-                        ThyFlexibleText,
-                        ThyStopPropagationDirective,
-                        AITableFieldMenu,
-                        ThyAction,
-                        ThyDropdownDirective,
-                        ThyDropdownMenuComponent,
-                        ThyCheckboxModule,
-                        ProgressEditorComponent,
-                        ThyAvatarModule,
-                        NgTemplateOutlet,
-                        IsSelectRecordPipe,
-                        ProgressEditorComponent,
-                        SelectOptionComponent,
-                        UserPipe,
-                        SelectSettingPipe,
-                        MemberSettingPipe
-                    ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                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)=\"selectRecord(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\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\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" }]
-        }] });
-
-class AITableIcon {
-    constructor() {
-        this.config = input.required();
-        this.groupConfig = computed(() => {
-            const { x, y, listening } = this.config();
-            return { x, y, listening };
-        });
-        this.squareShapeConfig = computed(() => {
-            const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
-            return {
-                name,
-                width: backgroundWidth || size,
-                height: backgroundHeight || size,
-                strokeWidth: strokeWidth,
-                fill: background || Colors.transparent,
-                cornerRadius,
-                opacity
-            };
-        });
-        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' } = this.config();
-            let pathData = data;
-            switch (type) {
-                case AITableCheckType.checked:
-                    pathData = Check;
-                    break;
-                case AITableCheckType.unchecked:
-                    pathData = Unchecked;
-                    break;
-            }
-            return {
-                x: backgroundWidth && (backgroundWidth - size * (scaleX || 1)) / 2,
-                y: backgroundHeight && (backgroundHeight - size * (scaleY || 1)) / 2,
-                data: pathData,
-                width: size,
-                height: size,
-                fill,
-                offsetX,
-                offsetY,
-                scaleX,
-                scaleY,
-                rotation,
-                stroke,
-                strokeWidth,
-                transformsEnabled,
-                perfectDrawEnabled: false,
-                listening: false
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        <ko-group [config]="groupConfig()">
-            <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: "18.2.13", ngImport: i0, type: AITableIcon, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-icon',
-                    template: `
-        <ko-group [config]="groupConfig()">
-            <ko-rect [config]="squareShapeConfig()"></ko-rect>
-            <ko-path [config]="iconConfig()"></ko-path>
-        </ko-group>
-    `,
-                    standalone: true,
-                    imports: [KoContainer, KoShape],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-class AITableAddField {
-    constructor() {
-        this.config = input.required();
-        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;
-        });
-        this.rectConfig = computed(() => {
-            const { pointPosition: { targetName }, readonly } = this.config();
-            const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
-            const fields = this.config().fields || [];
-            const index = this.config().columnStopIndex;
-            const fieldId = fields.length && index < fields.length ? fields[index]._id : '';
-            return {
-                name: generateTargetName({
-                    targetName: AI_TABLE_FIELD_ADD_BUTTON,
-                    fieldId,
-                    mouseStyle: readonly ? 'default' : 'pointer'
-                }),
-                x: AI_TABLE_OFFSET,
-                y: AI_TABLE_OFFSET,
-                width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
-                    ? this.btnWidth
-                    : this.config().coordinate.containerWidth - this.x(),
-                height: this.config().coordinate.rowInitSize,
-                stroke: Colors.gray200,
-                strokeWidth: 1,
-                listening: true,
-                fill
-            };
-        });
-        this.addIconConfig = computed(() => {
-            const { readonly } = this.config();
-            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
-            return {
-                x: AI_TABLE_CELL_PADDING,
-                y: offsetY,
-                data: AddOutlinedPath,
-                fill: Colors.gray600,
-                listening: false,
-                visible: isNil(readonly) ? true : !readonly
-            };
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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>
-            </ko-group>
-            <ko-group>
-                @if (addIconConfig().visible) {
-                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
-                }
-            </ko-group>
-        </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-add-field',
-                    template: `
-        <ko-group [config]="{ x: x() }">
-            <ko-group>
-                <ko-rect [config]="rectConfig()"></ko-rect>
-            </ko-group>
-            <ko-group>
-                @if (addIconConfig().visible) {
-                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
-                }
-            </ko-group>
-        </ko-group>
-    `,
-                    standalone: true,
-                    imports: [KoContainer, KoShape, AITableIcon],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }] });
-
-/**
- * 用于处理表格行或单元格的布局和绘制。
- * 它提供了基本的布局信息（如位置、大小等），并定义了常用的绘图方法（如渲染缩进区域、添加新字段的空白区域等）。
- * 该类继承自 Drawer，并被其他更具体的布局类（如 RecordRowLayout）扩展和使用
- */
-class Layout extends Drawer {
-    constructor() {
-        super(...arguments);
-        // 定义当前单元格或行的位置
-        this.x = 0;
-        this.y = 0;
-        // 行高
-        this.rowHeight = 0;
-        // 列宽
-        this.columnWidth = 0;
-        // 行索引
-        this.rowIndex = 0;
-        // 列索引
-        this.columnIndex = 0;
-        // 列数
-        this.columnCount = 0;
-        this.containerWidth = 0;
-    }
-    // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth }) {
-        this.x = x;
-        this.y = y;
-        this.rowIndex = rowIndex;
-        this.columnIndex = columnIndex;
-        this.rowHeight = rowHeight;
-        this.columnWidth = columnWidth;
-        this.columnCount = columnCount;
-        this.containerWidth = containerWidth;
-    }
-    // 当前单元格是否是行的第一列
-    get isFirst() {
-        return this.columnIndex === 0;
-    }
-    // 当前单元格是否是行的最后一列
-    get isLast() {
-        return this.columnIndex === this.columnCount - 1;
-    }
-    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
-        const rowHeight = this.rowHeight;
-        const fill = isCheckedRow ? this.colors.itemActiveBgColor : isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
-        this.rect({
-            x: addFieldBlankX,
-            y: this.y + AI_TABLE_OFFSET,
-            width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
-                ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
-                : this.containerWidth - addFieldBlankX,
-            height: rowHeight,
-            fill
-        });
-    }
-}
-
-class AddRowLayout extends Layout {
-    renderAddFieldBlank({ isHoverRow, isCheckedRow }) {
-        super.renderAddFieldBlank({ isHoverRow, isCheckedRow });
-        const rowHeight = this.rowHeight;
-        const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
-        this.line({
-            x: this.x + this.columnWidth,
-            y: this.y,
-            points: [0, rowHeight, width, rowHeight],
-            stroke: this.colors.gray200
-        });
-    }
-    renderCell({ width, isHoverRow }) {
-        const x = this.x;
-        const y = this.y;
-        const rowHeight = this.rowHeight;
-        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        this.rect({
-            x,
-            y: y + AI_TABLE_OFFSET,
-            width: width,
-            height: rowHeight,
-            fill
-        });
-        this.line({
-            x,
-            y: y + rowHeight,
-            points: [0, 0, width, 0],
-            stroke: this.colors.gray200
-        });
-    }
-    renderFirstCell({ isHoverRow }) {
-        if (!this.isFirst)
-            return;
-        const y = this.y;
-        const rowHeight = this.rowHeight;
-        const columnWidth = this.columnWidth;
-        const frozenOffset = AI_TABLE_OFFSET;
-        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
-        this.rect({
-            x: frozenOffset,
-            y: y + AI_TABLE_OFFSET,
-            width: columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1,
-            height: rowHeight,
-            fill
-        });
-        this.line({
-            x: frozenOffset,
-            y,
-            points: [0, rowHeight, columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1, rowHeight],
-            stroke: this.colors.gray200
-        });
-        this.path({
-            x: AI_TABLE_CELL_PADDING,
-            y: y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2 - AI_TABLE_OFFSET,
-            data: AddOutlinedPath,
-            size: AI_TABLE_ROW_HEAD_SIZE,
-            fill: this.colors.gray600
+    }
+    renderFirstCell({ isHoverRow }) {
+        if (!this.isFirst)
+            return;
+        const y = this.y;
+        const rowHeight = this.rowHeight;
+        const columnWidth = this.columnWidth;
+        const frozenOffset = AI_TABLE_OFFSET;
+        const fill = isHoverRow ? this.colors.gray80 : this.colors.transparent;
+        this.rect({
+            x: frozenOffset,
+            y: y + AI_TABLE_OFFSET,
+            width: columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1,
+            height: rowHeight,
+            fill
+        });
+        this.line({
+            x: frozenOffset,
+            y,
+            points: [0, rowHeight, columnWidth + AI_TABLE_ROW_HEAD_WIDTH - frozenOffset + 1, rowHeight],
+            stroke: this.colors.gray200
+        });
+        this.path({
+            x: AI_TABLE_CELL_PADDING,
+            y: y + (rowHeight - AI_TABLE_ICON_COMMON_SIZE) / 2 - AI_TABLE_OFFSET,
+            data: AddOutlinedPath,
+            size: AI_TABLE_ROW_HEAD_SIZE,
+            fill: this.colors.gray600
         });
     }
     renderLastCell({ isHoverRow, isCheckedRow }) {
@@ -7515,22 +6925,21 @@ class CellDrawer extends Drawer {
     }
     renderCellRate(render, ctx) {
         const { x, y, transformValue: _cellValue } = render;
-        const max = 5;
+        const max = AI_TABLE_RATE_MAX;
         const cellValue = _cellValue;
         const size = AI_TABLE_CELL_EMOJI_SIZE;
-        const isEmpty = isNil(cellValue);
         return [...Array(max).keys()].map((item, index) => {
             const value = index + 1;
             const checked = value <= cellValue;
             const iconX = index * size + AI_TABLE_CELL_PADDING + index * AI_TABLE_CELL_EMOJI_PADDING;
             const iconY = (AI_TABLE_ROW_BLANK_HEIGHT - size) / 2;
-            if (ctx && (checked || isEmpty)) {
+            if (ctx) {
                 this.path({
                     x: x + iconX,
                     y: y + iconY,
                     size: 22,
                     data: StarFill,
-                    fill: isEmpty ? this.colors.gray100 : this.colors.waring,
+                    fill: checked ? this.colors.waring : this.colors.gray100,
                     scaleX: 1.14,
                     scaleY: 1.14
                 });
@@ -8045,6 +7454,162 @@ const isHoverRecord = (isHover, targetName) => {
     return isHover && targetName !== AI_TABLE_FIELD_HEAD;
 };
 
+class AITableIcon {
+    constructor() {
+        this.config = input.required();
+        this.groupConfig = computed(() => {
+            const { x, y, listening } = this.config();
+            return { x, y, listening };
+        });
+        this.squareShapeConfig = computed(() => {
+            const { name, backgroundWidth, backgroundHeight, size = DEFAULT_ICON_SIZE, strokeWidth = 1, background, cornerRadius, opacity } = this.config();
+            return {
+                name,
+                width: backgroundWidth || size,
+                height: backgroundHeight || size,
+                strokeWidth: strokeWidth,
+                fill: background || Colors.transparent,
+                cornerRadius,
+                opacity
+            };
+        });
+        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' } = this.config();
+            let pathData = data;
+            switch (type) {
+                case AITableCheckType.checked:
+                    pathData = Check;
+                    break;
+                case AITableCheckType.unchecked:
+                    pathData = Unchecked;
+                    break;
+            }
+            return {
+                x: backgroundWidth && (backgroundWidth - size * (scaleX || 1)) / 2,
+                y: backgroundHeight && (backgroundHeight - size * (scaleY || 1)) / 2,
+                data: pathData,
+                width: size,
+                height: size,
+                fill,
+                offsetX,
+                offsetY,
+                scaleX,
+                scaleY,
+                rotation,
+                stroke,
+                strokeWidth,
+                transformsEnabled,
+                perfectDrawEnabled: false,
+                listening: false
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AITableIcon, isStandalone: true, selector: "ai-table-icon", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <ko-group [config]="groupConfig()">
+            <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: "18.2.13", ngImport: i0, type: AITableIcon, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-icon',
+                    template: `
+        <ko-group [config]="groupConfig()">
+            <ko-rect [config]="squareShapeConfig()"></ko-rect>
+            <ko-path [config]="iconConfig()"></ko-path>
+        </ko-group>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableAddField {
+    constructor() {
+        this.config = input.required();
+        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;
+        });
+        this.rectConfig = computed(() => {
+            const { pointPosition: { targetName }, readonly } = this.config();
+            const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
+            const fields = this.config().fields || [];
+            const index = this.config().columnStopIndex;
+            const fieldId = fields.length && index < fields.length ? fields[index]._id : '';
+            return {
+                name: generateTargetName({
+                    targetName: AI_TABLE_FIELD_ADD_BUTTON,
+                    fieldId,
+                    mouseStyle: readonly ? 'default' : 'pointer'
+                }),
+                x: AI_TABLE_OFFSET,
+                y: AI_TABLE_OFFSET,
+                width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
+                    ? this.btnWidth
+                    : this.config().coordinate.containerWidth - this.x(),
+                height: this.config().coordinate.rowInitSize,
+                stroke: Colors.gray200,
+                strokeWidth: 1,
+                listening: true,
+                fill
+            };
+        });
+        this.addIconConfig = computed(() => {
+            const { readonly } = this.config();
+            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
+            return {
+                x: AI_TABLE_CELL_PADDING,
+                y: offsetY,
+                data: AddOutlinedPath,
+                fill: Colors.gray600,
+                listening: false,
+                visible: isNil(readonly) ? true : !readonly
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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>
+            </ko-group>
+            <ko-group>
+                @if (addIconConfig().visible) {
+                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                }
+            </ko-group>
+        </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableAddField, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-add-field',
+                    template: `
+        <ko-group [config]="{ x: x() }">
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                @if (addIconConfig().visible) {
+                    <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+                }
+            </ko-group>
+        </ko-group>
+    `,
+                    standalone: true,
+                    imports: [KoContainer, KoShape, AITableIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
 class AITableCells {
     constructor() {
         this.config = input.required();
@@ -8680,50 +8245,468 @@ class AITableOtherRows {
                 @case (AITableRowType.add) {
                     <ko-rect [config]="config.addBtnConfig"></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: "18.2.13", ngImport: i0, type: AITableOtherRows, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-other-rows',
+                    template: `
+        @for (config of otherConfigs(); track $index) {
+            @switch (config.type) {
+                @case (AITableRowType.add) {
+                    <ko-rect [config]="config.addBtnConfig"></ko-rect>
+                }
+            }
+        }
+    `,
+                    standalone: true,
+                    imports: [KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITablePlaceholderCells {
+    constructor() {
+        this.config = input.required();
+        this.frozenPlaceHolderCellsConfig = computed(() => {
+            return getPlaceHolderCellsConfigs(this.config());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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: "18.2.13", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-placeholder-cells',
+                    template: `
+        @for (item of frozenPlaceHolderCellsConfig(); track $index) {
+            <ko-rect [config]="item"></ko-rect>
+        }
+    `,
+                    standalone: true,
+                    imports: [KoShape],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableHoverCells {
+    constructor() {
+        this.config = input.required();
+        this.componentMap = {};
+        this.groupConfig = computed(() => {
+            return {
+                x: this.hoverCellConfig()?.x,
+                y: this.hoverCellConfig()?.y
+            };
+        });
+        this.hoverCellConfig = computed(() => {
+            const { aiTable, coordinate, references, readonly, actions } = this.config();
+            const pointPosition = aiTable.context.pointPosition();
+            const hoverCell = this.hoverCell();
+            if (!hoverCell) {
+                return;
+            }
+            const { field, recordId } = hoverCell;
+            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
+            const transformValue = transformCellValue(aiTable, field, cellValue);
+            const { rowHeight, columnCount, rowCount } = coordinate;
+            const columnIndex = pointPosition.columnIndex;
+            const rowIndex = pointPosition.rowIndex;
+            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
+            const columnWidth = coordinate.getColumnWidth(columnIndex);
+            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
+            const { width } = getCellHorizontalPosition({
+                columnWidth,
+                columnIndex,
+                columnCount
+            });
+            const style = {
+                textAlign: DEFAULT_TEXT_ALIGN_LEFT
+            };
+            const textAlign = style.textAlign;
+            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
+                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
+                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
+            const renderY = 0 - AI_TABLE_OFFSET * 2;
+            const result = {
+                field,
+                recordId,
+                aiTable,
+                coordinate,
+                x,
+                y,
+                readonly,
+                actions,
+                render: {
+                    aiTable,
+                    recordId,
+                    field,
+                    isActive: isSelectedField(field._id, aiTable),
+                    x: renderX,
+                    y: renderY,
+                    columnWidth: width,
+                    rowHeight,
+                    cellValue,
+                    transformValue,
+                    style,
+                    references
+                }
+            };
+            return result;
+        });
+        this.hoverCell = computed(() => getHoverCell(this.config().aiTable));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableHoverCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        @if (hoverCell()) {
+            <ko-group [config]="groupConfig()">
+                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                </ng-container>
+            </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"] }], 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", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableOtherRows, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableHoverCells, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-other-rows',
+                    selector: 'ai-table-hover-cell',
                     template: `
-        @for (config of otherConfigs(); track $index) {
-            @switch (config.type) {
-                @case (AITableRowType.add) {
-                    <ko-rect [config]="config.addBtnConfig"></ko-rect>
-                }
-            }
+        @if (hoverCell()) {
+            <ko-group [config]="groupConfig()">
+                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
+                </ng-container>
+            </ko-group>
         }
     `,
                     standalone: true,
-                    imports: [KoShape],
+                    imports: [KoContainer, CommonModule],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 
-class AITablePlaceholderCells {
+Konva.pixelRatio = 2;
+class AITableRenderer {
     constructor() {
         this.config = input.required();
-        this.frozenPlaceHolderCellsConfig = computed(() => {
-            return getPlaceHolderCellsConfigs(this.config());
+        this.koMousemove = output();
+        this.koMousedown = output();
+        this.koMouseup = output();
+        this.koContextmenu = output();
+        this.koWheel = output();
+        this.koClick = output();
+        this.koDblclick = output();
+        this.koMouseleave = output();
+        this.fields = computed(() => {
+            return AITable.getVisibleFields(this.config().aiTable);
+        });
+        this.readonly = computed(() => {
+            return this.config()?.readonly;
+        });
+        this.coordinate = computed(() => {
+            return this.config()?.coordinate;
+        });
+        this.containerWidth = computed(() => {
+            return this.config().containerWidth;
+        });
+        this.containerHeight = computed(() => {
+            return this.config().containerHeight;
+        });
+        this.scrollState = computed(() => {
+            return this.config()?.aiTable.context.scrollState();
+        });
+        this.visibleRangeInfo = computed(() => {
+            return getVisibleRangeInfo(this.coordinate(), this.scrollState());
+        });
+        this.frozenAreaWidth = computed(() => {
+            return AI_TABLE_ROW_HEAD_WIDTH + this.coordinate().frozenColumnWidth;
+        });
+        this.lastColumnWidth = computed(() => {
+            return this.coordinate().getColumnWidth(this.visibleRangeInfo().columnStopIndex);
+        });
+        this.lastColumnOffset = computed(() => {
+            return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
+        });
+        this.cellGroupClipWidth = computed(() => {
+            return this.containerWidth() - this.frozenAreaWidth();
+        });
+        this.stageConfig = computed(() => {
+            const { isScrolling } = this.scrollState();
+            return {
+                width: this.containerWidth(),
+                height: this.containerHeight(),
+                listening: isScrolling ? false : true
+            };
+        });
+        this.gridGroupConfig = computed(() => {
+            return {
+                clipX: 0,
+                clipY: 0,
+                clipWidth: this.containerWidth(),
+                clipHeight: this.containerHeight()
+            };
+        });
+        this.commonGroupConfig = computed(() => {
+            return {
+                clipX: this.frozenAreaWidth() + 1,
+                clipY: 0,
+                clipWidth: this.cellGroupClipWidth(),
+                clipHeight: this.containerHeight()
+            };
+        });
+        this.attachGroupConfig = computed(() => {
+            return {
+                clipX: this.frozenAreaWidth() - 1,
+                clipY: this.coordinate().rowInitSize - 1,
+                clipWidth: this.containerWidth() - this.frozenAreaWidth(),
+                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
+            };
+        });
+        this.frozenAttachGroupConfig = computed(() => {
+            return {
+                clipX: 0,
+                clipY: this.coordinate().rowInitSize - 1,
+                clipWidth: this.frozenAreaWidth() + 4,
+                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
+            };
+        });
+        this.offsetYConfig = computed(() => {
+            const { scrollTop } = this.scrollState();
+            return {
+                offsetY: scrollTop
+            };
+        });
+        this.offsetXConfig = computed(() => {
+            const { scrollLeft } = this.scrollState();
+            return {
+                offsetX: scrollLeft
+            };
+        });
+        this.offsetConfig = computed(() => {
+            const { scrollLeft, scrollTop } = this.scrollState();
+            return {
+                offsetX: scrollLeft,
+                offsetY: scrollTop
+            };
+        });
+        this.columnHeadOrAddFieldConfig = computed(() => {
+            const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
+            const { aiTable, coordinate, readonly } = this.config();
+            const { pointPosition } = aiTable.context;
+            const fields = this.fields();
+            return {
+                aiTable,
+                coordinate,
+                fields,
+                columnStartIndex,
+                columnStopIndex,
+                pointPosition: pointPosition(),
+                readonly
+            };
+        });
+        this.cellsConfig = computed(() => {
+            const { aiTable, readonly, coordinate, references, actions } = this.config();
+            const { rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
+            return {
+                aiTable,
+                readonly,
+                coordinate,
+                references,
+                rowStartIndex,
+                rowStopIndex,
+                columnStartIndex,
+                columnStopIndex,
+                actions
+            };
+        });
+        this.activeCellBorderConfig = computed(() => {
+            return createActiveCellBorder(this.cellsConfig());
+        });
+    }
+    stageMousemove(e) {
+        this.koMousemove.emit(e);
+    }
+    stageMousedown(e) {
+        this.koMousedown.emit(e);
+    }
+    stageMouseup(e) {
+        this.koMouseup.emit(e);
+    }
+    stageContextmenu(e) {
+        this.koContextmenu.emit(e);
+    }
+    stageClick(e) {
+        this.koClick.emit(e);
+    }
+    stageDblclick(e) {
+        this.koDblclick.emit(e);
+    }
+    stageMouseleave(e) {
+        this.koMouseleave.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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" }, 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>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableHoverCells, selector: "ai-table-hover-cell", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-renderer', standalone: true, imports: [
+                        KoContainer,
+                        KoStage,
+                        KoShape,
+                        AITableColumnHeads,
+                        AITableFrozenColumnHeads,
+                        AITableCells,
+                        AITableFrozenCells,
+                        AITableFrozenPlaceholderCells,
+                        AITableHoverCells,
+                        AITablePlaceholderCells,
+                        AITableAddField,
+                        AITableHoverRowHeads,
+                        AITableOtherRows
+                    ], 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>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+        }] });
+
+class AITableCellRate {
+    constructor() {
+        this.pointerX = signal(0);
+        this.pointerY = signal(0);
+        this.resetStatus = signal(false);
+        this.config = input();
+        this.readonly = computed(() => {
+            return this.config()?.readonly;
+        });
+        this.whiteBgConfig = computed(() => {
+            const { aiTable, render, field, recordId, coordinate } = this.config();
+            const pointPosition = aiTable.context.pointPosition();
+            const { x, y } = render;
+            const { columnIndex } = pointPosition;
+            const isActive = isActiveCell([recordId, field._id], aiTable);
+            return {
+                x: x - AI_TABLE_CELL_PADDING + AI_TABLE_CELL_BORDER,
+                y: y + AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET,
+                width: coordinate.getColumnWidth(columnIndex) - (AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET) * 2,
+                height: AI_TABLE_ROW_BLANK_HEIGHT - (AI_TABLE_CELL_BORDER + AI_TABLE_OFFSET),
+                fill: Colors.white,
+                stroke: isActive ? null : Colors.white,
+                zIndex: 0,
+                name: generateTargetName({
+                    targetName: AI_TABLE_CELL,
+                    fieldId: field._id,
+                    recordId
+                })
+            };
+        });
+        this.starConfigs = computed(() => {
+            const { render, field, recordId, readonly, aiTable, coordinate } = this.config();
+            const { x, transformValue } = render;
+            const max = AI_TABLE_RATE_MAX;
+            const starY = (AI_TABLE_ROW_BLANK_HEIGHT - AI_TABLE_CELL_EMOJI_SIZE) / 2 + AI_TABLE_OFFSET;
+            const pointPosition = aiTable.context.pointPosition();
+            const { rowIndex, columnIndex } = pointPosition;
+            const { scrollLeft, scrollTop } = aiTable.context.scrollState();
+            const columnLeftX = coordinate.getColumnOffset(columnIndex) - scrollLeft + AI_TABLE_OFFSET;
+            const columnTopY = coordinate.getRowOffset(rowIndex) - scrollTop + AI_TABLE_OFFSET;
+            const firstStarLeftX = columnLeftX + AI_TABLE_CELL_PADDING;
+            const lastStarRightX = columnLeftX + AI_TABLE_CELL_PADDING + max * AI_TABLE_CELL_EMOJI_SIZE + (max - 1) * AI_TABLE_CELL_EMOJI_PADDING;
+            const startTopY = columnTopY + starY;
+            const startBottomY = columnTopY + starY + AI_TABLE_CELL_EMOJI_SIZE;
+            const isHoverStar = this.pointerX() >= firstStarLeftX &&
+                this.pointerX() <= lastStarRightX &&
+                this.pointerY() >= startTopY &&
+                this.pointerY() <= startBottomY;
+            return [...Array(max).keys()].map((item, index) => {
+                const value = index + 1;
+                const checked = value <= transformValue;
+                const starX = x + index * (AI_TABLE_CELL_EMOJI_SIZE + AI_TABLE_CELL_EMOJI_PADDING);
+                let fill = null;
+                if (this.resetStatus()) {
+                    fill = Colors.gray100;
+                }
+                else {
+                    if (isHoverStar) {
+                        fill = columnLeftX + starX <= this.pointerX() ? Colors.waring : Colors.gray100;
+                    }
+                    else {
+                        fill = checked ? Colors.waring : Colors.gray100;
+                    }
+                }
+                return {
+                    x: starX,
+                    y: starY,
+                    size: 22,
+                    data: StarFill,
+                    fill,
+                    scaleX: 1.14,
+                    scaleY: 1.14,
+                    name: generateTargetName({
+                        targetName: AI_TABLE_CELL,
+                        fieldId: field._id,
+                        recordId,
+                        mouseStyle: readonly ? 'default' : 'pointer'
+                    })
+                };
+            });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITablePlaceholderCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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>
+    static { this.fieldType = AITableFieldType.rate; }
+    koMousemove(e) {
+        if (this.readonly()) {
+            return;
+        }
+        this.resetStatus.set(false);
+        const pos = e.event.target.getStage()?.getPointerPosition();
+        if (!pos)
+            return;
+        const { x, y } = pos;
+        this.pointerX.set(x);
+        this.pointerY.set(y);
+    }
+    koClick(e, index) {
+        if (this.readonly()) {
+            return;
+        }
+        this.resetStatus.set(false);
+        const { render, readonly, field, recordId, actions } = this.config();
+        const { transformValue } = render;
+        let value = index + 1;
+        if (transformValue === value) {
+            value = 0;
+            this.resetStatus.set(true);
+        }
+        if (!readonly && actions && actions.updateFieldValue) {
+            actions.updateFieldValue({
+                value,
+                path: [recordId, field._id]
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableCellRate, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableCellRate, isStandalone: true, selector: "ai-table-rate", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+        @if (!readonly()) {
+            <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
+        }
+        @for (config of starConfigs(); let index = $index; track $index) {
+            <ko-path [config]="config" (koClick)="koClick($event, index)"></ko-path>
         }
     `, 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: "18.2.13", ngImport: i0, type: AITablePlaceholderCells, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableCellRate, decorators: [{
             type: Component,
             args: [{
-                    selector: 'ai-table-placeholder-cells',
+                    selector: 'ai-table-rate',
                     template: `
-        @for (item of frozenPlaceHolderCellsConfig(); track $index) {
-            <ko-rect [config]="item"></ko-rect>
+        @if (!readonly()) {
+            <ko-rect [config]="whiteBgConfig()" (koMousemove)="koMousemove($event)"></ko-rect>
+        }
+        @for (config of starConfigs(); let index = $index; track $index) {
+            <ko-path [config]="config" (koClick)="koClick($event, index)"></ko-path>
         }
     `,
                     standalone: true,
@@ -8732,344 +8715,487 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-const createActiveCellBorder = (config) => {
-    const { aiTable, coordinate, columnStartIndex, columnStopIndex, rowStartIndex, rowStopIndex } = config;
-    const { linearRows } = aiTable.context;
-    const { rowHeight, frozenColumnCount } = coordinate;
-    const colors = AITable.getColors();
-    const visibleColumns = AITable.getVisibleFields(aiTable);
-    const activeCell = AITable.getActiveCell(aiTable);
-    const totalColumnCount = visibleColumns.length;
-    let activeCellBorder = null;
-    let frozenActiveCellBorder = null;
-    if (Array.isArray(activeCell) &&
-        !!activeCell.length &&
-        aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
-        aiTable.context.visibleColumnsIndexMap().has(activeCell[1])) {
-        const fieldId = activeCell[1];
-        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
-        const checkIsVisible = (rowIndex, columnIndex) => {
-            if (columnIndex < frozenColumnCount) {
-                return true;
-            }
-            return (rowIndex >= rowStartIndex && rowIndex <= rowStopIndex && columnIndex >= columnStartIndex && columnIndex <= columnStopIndex);
+// TODO: components下的cells组件考虑移出 components ，这些组件都属于
+
+var cellComponents = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AITableCellAttachment: AITableCellAttachment,
+    AITableCellLink: AITableCellLink,
+    AITableCellRate: AITableCellRate,
+    AITableCellRichtext: AITableCellRichtext
+});
+
+const componentMap = {};
+Object.values(cellComponents).forEach((cellComponent) => {
+    componentMap[cellComponent.fieldType] = cellComponent;
+});
+
+function getHoverCell(aiTable) {
+    const pointPosition = aiTable.context.pointPosition();
+    const { fieldId, recordId } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
+    if (!recordId || !fieldId) {
+        return;
+    }
+    const record = aiTable.recordsMap()[recordId];
+    const field = aiTable.fieldsMap()[fieldId];
+    if (!record || !field || !recordId || !fieldId) {
+        return;
+    }
+    const renderComponentDefinition = componentMap[field?.type];
+    if (!renderComponentDefinition) {
+        return;
+    }
+    return {
+        field,
+        recordId,
+        fieldId,
+        renderComponentDefinition
+    };
+}
+
+class AITableGridEventService {
+    constructor() {
+        this.dblClickEvent$ = new Subject();
+        this.mousedownEvent$ = new Subject();
+        this.mouseoverEvent$ = new Subject();
+        this.globalMouseoverEvent$ = new Subject();
+        this.globalMousedownEvent$ = new Subject();
+        this.destroyRef = inject(DestroyRef);
+        this.thyPopover = inject(ThyPopover);
+    }
+    initialize(aiTable, aiFieldRenderers) {
+        this.aiTable = aiTable;
+        this.aiFieldRenderers = aiFieldRenderers;
+    }
+    registerEvents(element) {
+        fromEvent(element, 'dblclick', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.dblClickEvent$.next(event);
+        });
+        fromEvent(element, 'mouseover', { passive: true })
+            .pipe(debounceTime(80), takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mouseoverEvent$.next(event);
+        });
+        fromEvent(document, 'mouseover', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMouseoverEvent$.next(event);
+        });
+        fromEvent(element, 'mousedown', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.mousedownEvent$.next(event);
+        });
+        fromEvent(document, 'mousedown', { passive: true })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            this.globalMousedownEvent$.next(event);
+        });
+    }
+    getEditorComponent(type) {
+        const filedRenderSchema = this.aiFieldRenderers && this.aiFieldRenderers[type];
+        if (filedRenderSchema && filedRenderSchema.editor) {
+            return {
+                component: filedRenderSchema.editor,
+                isInternalComponent: false
+            };
+        }
+        return {
+            component: GRID_CELL_EDITOR_MAP[type],
+            isInternalComponent: true
         };
-        if (rowIndex != null && columnIndex != null && checkIsVisible(rowIndex, columnIndex)) {
-            const { type } = linearRows()[rowIndex];
-            if (type === AITableRowType.record) {
-                const activeField = visibleColumns.find((field) => field._id === fieldId);
-                if (activeField == null) {
-                    return {
-                        activeCellBorder,
-                        frozenActiveCellBorder
-                    };
+    }
+    openEdit(cellDom) {
+        const { x, y, width, height } = cellDom.getBoundingClientRect();
+        const fieldId = cellDom.getAttribute('fieldId');
+        const recordId = cellDom.getAttribute('recordId');
+        const { component } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
+        const ref = this.thyPopover.open(component, {
+            origin: cellDom,
+            originPosition: {
+                x: x - 1,
+                y: y + 1,
+                width: width + 2,
+                height: height + 2
+            },
+            width: width + 1 + 'px',
+            height: height + 2 + 'px',
+            placement: 'top',
+            offset: -(height + 4),
+            minWidth: width,
+            initialState: {
+                fieldId: fieldId,
+                recordId: recordId,
+                aiTable: this.aiTable
+            },
+            panelClass: 'grid-cell-editor',
+            outsideClosable: false,
+            hasBackdrop: false,
+            manualClosure: true,
+            animationDisabled: true,
+            autoAdaptive: true
+        });
+        return ref;
+    }
+    getOriginPosition(aiTable, options) {
+        const { container, coordinate, recordId, fieldId, isHoverEdit } = options;
+        const { scrollState } = aiTable.context;
+        const { rowHeight, columnCount } = coordinate;
+        const cell = [recordId, fieldId];
+        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, cell);
+        const originX = coordinate.getColumnOffset(columnIndex);
+        const originY = coordinate.getRowOffset(rowIndex);
+        const columnWidth = coordinate.getColumnWidth(columnIndex);
+        const { width: originWidth, offset: originOffset } = getCellHorizontalPosition({
+            columnWidth,
+            columnIndex,
+            columnCount
+        });
+        const originRect = container.getBoundingClientRect();
+        const isFrozenColumn = AITable.isFrozenColumn(aiTable, columnIndex);
+        const scrollLeft = isFrozenColumn ? 0 : scrollState().scrollLeft;
+        const scrollTop = scrollState().scrollTop;
+        const originPosition = {
+            x: originX + originOffset - scrollLeft + originRect.x,
+            y: originY - scrollTop + originRect.y,
+            width: originWidth,
+            height: rowHeight
+        };
+        let x = originPosition.x + getEditorBoxOffset();
+        let y = originPosition.y + getEditorBoxOffset();
+        let width = getEditorSpace(originPosition.width);
+        let height = getEditorSpace(originPosition.height);
+        // hover 编辑组件无边框
+        if (isHoverEdit) {
+            x = originPosition.x + getHoverEditorBoxOffset();
+            y = originPosition.y + getHoverEditorBoxOffset();
+            width = getHoverEditorSpace(originPosition.width);
+            height = getHoverEditorSpace(originPosition.height);
+        }
+        return {
+            ...originPosition,
+            x: x,
+            y: y,
+            width: width,
+            height: height
+        };
+    }
+    openCellEditor(aiTable, options) {
+        const { container, recordId, fieldId, isHoverEdit, references } = options;
+        const { component, isInternalComponent } = this.getEditorComponent(this.aiTable.fieldsMap()[fieldId].type);
+        const offsetOriginPosition = this.getOriginPosition(aiTable, options);
+        this.cellEditorPopoverRef = this.thyPopover.open(component, {
+            viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
+            origin: container,
+            originPosition: offsetOriginPosition,
+            width: offsetOriginPosition.width + 'px',
+            height: offsetOriginPosition.height + 'px',
+            minWidth: offsetOriginPosition.width + 'px',
+            placement: 'bottom',
+            offset: -offsetOriginPosition.height,
+            initialState: {
+                fieldId: fieldId,
+                recordId: recordId,
+                references,
+                aiTable: aiTable
+            },
+            panelClass: 'grid-cell-editor',
+            outsideClosable: true,
+            hasBackdrop: false,
+            manualClosure: true,
+            animationDisabled: true,
+            autoAdaptive: true
+        });
+        if (this.cellEditorPopoverRef) {
+            const wheelEvent = fromEvent(this.cellEditorPopoverRef.componentInstance.elementRef.nativeElement, 'wheel').subscribe((event) => {
+                const field = aiTable.fieldsMap()[fieldId];
+                if (field.type === AITableFieldType.text || field.type === AITableFieldType.richText) {
+                    return;
                 }
-                const x = coordinate.getColumnOffset(columnIndex);
-                const y = coordinate.getRowOffset(rowIndex);
-                const columnWidth = coordinate.getColumnWidth(columnIndex);
-                const isFrozenColumn = columnIndex < frozenColumnCount;
-                const { offset, width } = getCellHorizontalPosition({
-                    columnWidth,
-                    columnIndex,
-                    columnCount: totalColumnCount
+                event.preventDefault();
+                this.aiTable.context?.scrollAction({
+                    deltaX: event.deltaX,
+                    deltaY: event.deltaY,
+                    shiftKey: event.shiftKey,
+                    callback: () => {
+                        const originPosition = this.getOriginPosition(aiTable, options);
+                        const positionStrategy = this.cellEditorPopoverRef
+                            .getOverlayRef()
+                            .getConfig().positionStrategy;
+                        positionStrategy.setOrigin(originPosition);
+                        positionStrategy.apply();
+                    }
                 });
-                const currentConfig = {
-                    x: x + offset + AI_TABLE_OFFSET,
-                    y: y + AI_TABLE_OFFSET,
-                    width: width - AI_TABLE_CELL_BORDER / 2,
-                    height: rowHeight - AI_TABLE_CELL_BORDER / 2,
-                    strokeWidth: AI_TABLE_CELL_BORDER,
-                    stroke: colors.primary,
-                    fillEnabled: false,
-                    listening: false
+            });
+            this.cellEditorPopoverRef.afterClosed().subscribe(() => {
+                wheelEvent.unsubscribe();
+                this.cellEditorPopoverRef = null;
+            });
+            this.cellEditorPopoverRef.componentInstance.updateFieldValue.subscribe((value) => {
+                options.updateFieldValue(value);
+            });
+        }
+        return this.cellEditorPopoverRef;
+    }
+    closeCellEditor() {
+        if (this.cellEditorPopoverRef) {
+            this.cellEditorPopoverRef.close();
+            this.cellEditorPopoverRef = null;
+        }
+    }
+    getCurrentEditCell() {
+        if (this.cellEditorPopoverRef) {
+            const recordId = this.cellEditorPopoverRef.componentInstance?.recordId;
+            const fieldId = this.cellEditorPopoverRef.componentInstance?.fieldId;
+            if (recordId && fieldId) {
+                return {
+                    recordId,
+                    fieldId
                 };
-                if (isFrozenColumn) {
-                    frozenActiveCellBorder = currentConfig;
-                }
-                else {
-                    activeCellBorder = currentConfig;
-                }
             }
+            return null;
         }
+        return null;
     }
-    return {
-        activeCellBorder,
-        frozenActiveCellBorder
-    };
-};
-
-class AITableHoverCells {
-    constructor() {
-        this.config = input.required();
-        this.componentMap = {};
-        this.groupConfig = computed(() => {
-            return {
-                x: this.hoverCellConfig()?.x,
-                y: this.hoverCellConfig()?.y
-            };
-        });
-        this.hoverCellConfig = computed(() => {
-            const { aiTable, coordinate, references, readonly } = this.config();
-            const pointPosition = aiTable.context.pointPosition();
-            const hoverCell = this.hoverCell();
-            if (!hoverCell) {
-                return;
-            }
-            const { field, recordId, fieldId, renderComponentDefinition } = hoverCell;
-            const cellValue = AITableQueries.getFieldValue(aiTable, [recordId, field._id]);
-            const transformValue = transformCellValue(aiTable, field, cellValue);
-            const { rowHeight, columnCount, rowCount } = coordinate;
-            const columnIndex = pointPosition.columnIndex;
-            const rowIndex = pointPosition.rowIndex;
-            const x = coordinate.getColumnOffset(columnIndex) + AI_TABLE_OFFSET;
-            const columnWidth = coordinate.getColumnWidth(columnIndex);
-            const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-            const { width } = getCellHorizontalPosition({
-                columnWidth,
-                columnIndex,
-                columnCount
-            });
-            const style = {
-                textAlign: DEFAULT_TEXT_ALIGN_LEFT
-            };
-            const textAlign = style.textAlign;
-            const renderX = textAlign === DEFAULT_TEXT_ALIGN_RIGHT
-                ? columnWidth - AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET
-                : AI_TABLE_CELL_PADDING + AI_TABLE_OFFSET;
-            const renderY = 0 - AI_TABLE_OFFSET * 2;
-            const result = {
-                field,
-                recordId,
+    openContextMenu(aiTable, options) {
+        const { origin, position, menuItems, targetName, viewContainerRef } = options;
+        const ref = this.thyPopover.open(AITableContextMenu, {
+            origin: origin,
+            originPosition: position,
+            placement: 'bottomLeft',
+            insideClosable: true,
+            viewContainerRef,
+            initialState: {
                 aiTable,
-                coordinate,
-                x,
-                y,
-                readonly,
-                render: {
-                    aiTable,
-                    recordId,
-                    field,
-                    isActive: isSelectedField(field._id, aiTable),
-                    x: renderX,
-                    y: renderY,
-                    columnWidth: width,
-                    rowHeight,
-                    cellValue,
-                    transformValue,
-                    style,
-                    references
-                }
-            };
-            return result;
+                menuItems,
+                targetName,
+                position
+            }
         });
-        this.hoverCell = computed(() => getHoverCell(this.config().aiTable));
+        return ref;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableHoverCells, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableHoverCells, isStandalone: true, selector: "ai-table-hover-cell", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-        @if (hoverCell()) {
-            <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
-                </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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableHoverCells, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-hover-cell',
-                    template: `
-        @if (hoverCell()) {
-            <ko-group [config]="groupConfig()">
-                <ng-container *ngComponentOutlet="hoverCell()!.renderComponentDefinition; inputs: { config: hoverCellConfig() }">
-                </ng-container>
-            </ko-group>
-        }
-    `,
-                    standalone: true,
-                    imports: [KoShape, KoContainer, CommonModule],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridEventService, decorators: [{
+            type: Injectable
         }] });
 
-Konva.pixelRatio = 2;
-class AITableRenderer {
+class AITableGridBase {
     constructor() {
-        this.config = input.required();
-        this.koMousemove = output();
-        this.koMousedown = output();
-        this.koMouseup = output();
-        this.koContextmenu = output();
-        this.koWheel = output();
-        this.koClick = output();
-        this.koDblclick = output();
-        this.koMouseleave = output();
-        this.fields = computed(() => {
-            return AITable.getVisibleFields(this.config().aiTable);
-        });
-        this.readonly = computed(() => {
-            return this.config()?.readonly;
-        });
-        this.coordinate = computed(() => {
-            return this.config()?.coordinate;
-        });
-        this.containerWidth = computed(() => {
-            return this.config().containerWidth;
-        });
-        this.containerHeight = computed(() => {
-            return this.config().containerHeight;
-        });
-        this.scrollState = computed(() => {
-            return this.config()?.aiTable.context.scrollState();
-        });
-        this.visibleRangeInfo = computed(() => {
-            return getVisibleRangeInfo(this.coordinate(), this.scrollState());
-        });
-        this.frozenAreaWidth = computed(() => {
-            return AI_TABLE_ROW_HEAD_WIDTH + this.coordinate().frozenColumnWidth;
-        });
-        this.lastColumnWidth = computed(() => {
-            return this.coordinate().getColumnWidth(this.visibleRangeInfo().columnStopIndex);
-        });
-        this.lastColumnOffset = computed(() => {
-            return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
-        });
-        this.cellGroupClipWidth = computed(() => {
-            return this.containerWidth() - this.frozenAreaWidth();
-        });
-        this.stageConfig = computed(() => {
-            const { isScrolling } = this.scrollState();
-            return {
-                width: this.containerWidth(),
-                height: this.containerHeight(),
-                listening: isScrolling ? false : true
-            };
-        });
-        this.gridGroupConfig = computed(() => {
-            return {
-                clipX: 0,
-                clipY: 0,
-                clipWidth: this.containerWidth(),
-                clipHeight: this.containerHeight()
-            };
-        });
-        this.commonGroupConfig = computed(() => {
-            return {
-                clipX: this.frozenAreaWidth() + 1,
-                clipY: 0,
-                clipWidth: this.cellGroupClipWidth(),
-                clipHeight: this.containerHeight()
-            };
-        });
-        this.attachGroupConfig = computed(() => {
-            return {
-                clipX: this.frozenAreaWidth() - 1,
-                clipY: this.coordinate().rowInitSize - 1,
-                clipWidth: this.containerWidth() - this.frozenAreaWidth(),
-                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
-            };
-        });
-        this.frozenAttachGroupConfig = computed(() => {
-            return {
-                clipX: 0,
-                clipY: this.coordinate().rowInitSize - 1,
-                clipWidth: this.frozenAreaWidth() + 4,
-                clipHeight: this.containerHeight() - this.coordinate().rowInitSize
-            };
-        });
-        this.offsetYConfig = computed(() => {
-            const { scrollTop } = this.scrollState();
-            return {
-                offsetY: scrollTop
-            };
-        });
-        this.offsetXConfig = computed(() => {
-            const { scrollLeft } = this.scrollState();
-            return {
-                offsetX: scrollLeft
-            };
+        this.aiRecords = model.required();
+        this.aiFields = model.required();
+        this.aiFieldsSizeMap = model.required();
+        this.aiContextMenuItems = input();
+        this.aiFieldConfig = input();
+        this.aiReadonly = input(false);
+        this.aiPlugins = input();
+        this.aiReferences = input.required();
+        this.aiBuildRenderDataFn = input();
+        this.aiGetI18nTextByKey = input();
+        this.aiKeywords = input();
+        this.AITableFieldType = AITableFieldType;
+        this.AITableSelectOptionStyle = AITableSelectOptionStyle;
+        this.isSelectedAll = computed(() => {
+            return this.aiTable.selection().selectedRecords.size === this.aiRecords().length;
         });
-        this.offsetConfig = computed(() => {
-            const { scrollLeft, scrollTop } = this.scrollState();
-            return {
-                offsetX: scrollLeft,
-                offsetY: scrollTop
-            };
+        this.aiTableInitialized = output();
+        this.aiAddRecord = output();
+        this.aiAddField = output();
+        this.aiMoveField = output();
+        this.aiUpdateFieldValue = output();
+        this.aiSetField = output();
+        this.aiSetFieldWidth = output();
+        this.aiClick = output();
+        this.aiDbClick = output();
+        this.fieldMenus = computed(() => {
+            const fieldMenusFn = this.aiFieldConfig()?.fieldMenus;
+            if (fieldMenusFn && this.aiTable) {
+                return fieldMenusFn(this.aiTable);
+            }
+            return [];
         });
-        this.columnHeadOrAddFieldConfig = computed(() => {
-            const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
-            const { aiTable, coordinate, readonly } = this.config();
-            const { pointPosition } = aiTable.context;
-            const fields = this.fields();
+        this.gridData = computed(() => {
+            if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
+                return this.aiBuildRenderDataFn()(this.aiTable);
+            }
             return {
-                aiTable,
-                coordinate,
-                fields,
-                columnStartIndex,
-                columnStopIndex,
-                pointPosition: pointPosition(),
-                readonly
+                records: this.aiRecords(),
+                fields: this.aiFields(),
+                fieldsSizeMap: this.aiFieldsSizeMap()
             };
         });
-        this.cellsConfig = computed(() => {
-            const { aiTable, coordinate, references } = this.config();
-            const { rowStartIndex, rowStopIndex, columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
-            return {
-                aiTable,
-                coordinate,
-                references,
-                rowStartIndex,
-                rowStopIndex,
-                columnStartIndex,
-                columnStopIndex
-            };
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.destroyRef = inject(DestroyRef);
+        this.aiTableGridFieldService = inject(AITableGridFieldService);
+        this.aiTableGridEventService = inject(AITableGridEventService);
+        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
+    }
+    ngOnInit() {
+        this.initAITable();
+        this.initService();
+    }
+    initAITable() {
+        this.aiTable = createAITable(this.aiRecords, this.aiFields, this.gridData);
+        if (this.aiGetI18nTextByKey()) {
+            this.aiTable.getI18nTextByKey = this.aiGetI18nTextByKey();
+        }
+        this.aiPlugins()?.forEach((plugin) => {
+            this.aiTable = plugin(this.aiTable);
         });
-        this.activeCellBorderConfig = computed(() => {
-            return createActiveCellBorder(this.cellsConfig());
+        this.aiTableInitialized.emit(this.aiTable);
+    }
+    initService() {
+        this.aiTableGridEventService.initialize(this.aiTable, this.aiFieldConfig()?.fieldRenderers);
+        this.aiTableGridSelectionService.initialize(this.aiTable);
+        this.aiTableGridEventService.registerEvents(this.elementRef.nativeElement);
+        this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
+        AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
+    }
+    addRecord() {
+        const records = this.aiRecords();
+        const recordCount = records.length;
+        this.aiAddRecord.emit({
+            originId: recordCount > 0 ? records[records.length - 1]._id : ''
         });
     }
-    stageMousemove(e) {
-        this.koMousemove.emit(e);
+    selectRecord(recordId) {
+        this.aiTableGridSelectionService.selectRecord(recordId);
     }
-    stageMousedown(e) {
-        this.koMousedown.emit(e);
+    toggleSelectAll(checked) {
+        this.aiTableGridSelectionService.toggleSelectAll(checked);
     }
-    stageMouseup(e) {
-        this.koMouseup.emit(e);
+    addField(gridColumnBlank, position) {
+        const field = createDefaultField(this.aiTable, AITableFieldType.text);
+        const popoverRef = this.aiTableGridFieldService.editFieldProperty(this.aiTable, {
+            field,
+            isUpdate: false,
+            origin: gridColumnBlank,
+            position
+        });
+        if (popoverRef && !this.aiFieldConfig()?.fieldSettingComponent) {
+            popoverRef.componentInstance.addField.subscribe((defaultValue) => {
+                const fields = this.gridData().fields;
+                const fieldCount = fields.length;
+                this.aiAddField.emit({
+                    originId: fieldCount > 0 ? fields[fields.length - 1]._id : '',
+                    defaultValue
+                });
+            });
+        }
     }
-    stageContextmenu(e) {
-        this.koContextmenu.emit(e);
+    subscribeEvents() {
+        this.ngZone.runOutsideAngular(() => {
+            this.aiTableGridEventService.dblClickEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.dblClick(event);
+            });
+            this.aiTableGridEventService.mousedownEvent$
+                .pipe(mergeWith(this.aiTableGridEventService.globalMousedownEvent$), takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => {
+                this.aiTableGridSelectionService.updateSelect(event);
+            });
+            this.aiTableGridEventService.mouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.mouseoverHandle(event);
+            });
+            this.aiTableGridEventService.globalMouseoverEvent$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
+                this.closeHoverCellEditor(event);
+            });
+        });
     }
-    stageClick(e) {
-        this.koClick.emit(e);
+    dblClick(event) {
+        const cellDom = event.target.closest('.grid-cell');
+        const type = cellDom && cellDom.getAttribute('type');
+        if (type && DBL_CLICK_EDIT_TYPE.includes(type)) {
+            this.aiTableGridEventService.openEdit(cellDom);
+        }
     }
-    stageDblclick(e) {
-        this.koDblclick.emit(e);
+    mouseoverHandle(event) {
+        if (this.mouseoverRef) {
+            this.mouseoverRef?.close();
+        }
+        const cellDom = event.target.closest('.grid-cell');
+        const type = cellDom && cellDom.getAttribute('type');
+        if (type && MOUSEOVER_EDIT_TYPE.includes(type)) {
+            this.mouseoverRef = this.aiTableGridEventService.openEdit(cellDom);
+        }
     }
-    stageMouseleave(e) {
-        this.koMouseleave.emit(e);
+    closeHoverCellEditor(e) {
+        if (this.mouseoverRef) {
+            const hasGrid = e.target && e.target.closest('.ai-table-grid');
+            const hasCellEditor = e.target && e.target.closest('.grid-cell-editor');
+            if (!hasGrid && !hasCellEditor) {
+                this.mouseoverRef.close();
+            }
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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" }, 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>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableHoverCells, selector: "ai-table-hover-cell", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.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 }, aiFieldsSizeMap: { classPropertyName: "aiFieldsSizeMap", publicName: "aiFieldsSizeMap", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiFieldsSizeMap: "aiFieldsSizeMapChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValue: "aiUpdateFieldValue", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiClick: "aiClick", aiDbClick: "aiDbClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
-            args: [{ selector: 'ai-table-renderer', standalone: true, imports: [
-                        KoContainer,
-                        KoStage,
-                        KoShape,
-                        AITableColumnHeads,
-                        AITableFrozenColumnHeads,
-                        AITableCells,
-                        AITableFrozenCells,
-                        AITableFrozenPlaceholderCells,
-                        AITableHoverCells,
-                        AITablePlaceholderCells,
-                        AITableAddField,
-                        AITableHoverRowHeads,
-                        AITableOtherRows,
-                        AITableCellLink
-                    ], 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>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\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                    <ai-table-hover-cell [config]=\"cellsConfig()\"></ai-table-hover-cell>\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+            args: [{
+                    selector: 'ai-table-grid-base',
+                    template: '',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
+class AITableDomGrid extends AITableGridBase {
+    ngOnInit() {
+        super.ngOnInit();
+        this.subscribeEvents();
+    }
+    openFieldMenu(e, field, fieldAction) {
+        const moreBtn = e.target.closest('.grid-field-action');
+        this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
+            origin: moreBtn,
+            editOrigin: fieldAction,
+            fieldId: field._id,
+            fieldMenus: this.fieldMenus()
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                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)=\"selectRecord(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\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\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: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "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: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["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: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-dom-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'ai-table-grid ai-table-dom-grid'
+                    }, imports: [
+                        NgClass,
+                        NgComponentOutlet,
+                        CommonModule,
+                        FormsModule,
+                        SelectOptionPipe,
+                        SelectOptionsPipe,
+                        ThyTag,
+                        ThyPopoverModule,
+                        ThyIcon,
+                        ThyRate,
+                        ThyProgress,
+                        AITableFieldSetting,
+                        ThyDatePickerFormatPipe,
+                        ThyFlexibleText,
+                        ThyStopPropagationDirective,
+                        AITableFieldMenu,
+                        ThyAction,
+                        ThyDropdownDirective,
+                        ThyDropdownMenuComponent,
+                        ThyCheckboxModule,
+                        ProgressEditorComponent,
+                        ThyAvatarModule,
+                        NgTemplateOutlet,
+                        IsSelectRecordPipe,
+                        ProgressEditorComponent,
+                        SelectOptionComponent,
+                        UserPipe,
+                        SelectSettingPipe,
+                        MemberSettingPipe
+                    ], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], 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            [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n        >\n            <span class=\"text-truncate\">\n                <thy-icon [thyIconName]=\"field.icon!\" class=\"mr-2 text-muted\"></thy-icon>\n                <span>{{ field.name }}</span>\n            </span>\n            <a\n                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)=\"selectRecord(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\n                    #cell\n                    class=\"grid-cell\"\n                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: gridData().fieldsSizeMap[field._id] + 'px' }\"\n                >\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" }]
         }] });
 
 class AITableDragComponent {
@@ -9358,7 +9484,12 @@ class AITableGrid extends AITableGridBase {
                 containerWidth: this.containerRect().width,
                 containerHeight: this.containerRect().height,
                 references: this.aiReferences(),
-                readonly: this.aiReadonly()
+                readonly: this.aiReadonly(),
+                actions: {
+                    updateFieldValue: (options) => {
+                        this.aiUpdateFieldValue.emit(options);
+                    }
+                }
             };
         });
         this.coordinate = computed(() => {
@@ -9911,5 +10042,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectAllState, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_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_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, DragType, EditPath, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptions, getFieldValue, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectAllState, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_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_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_ITEM_MARGIN_RIGHT, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, AttachmentPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, DragType, EditPath, FONT_SIZE_SM, FieldModelMap, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptions, getFieldValue, getHoverCell, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getPlaceHolderCellsConfigs, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, readFromClipboard, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map