@ai-table/grid 0.1.35 → 0.1.37

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Input, ChangeDetectorRef, ViewChild, model, untracked, Renderer2, Pipe, booleanAttribute, Injectable, DestroyRef, NgZone, ViewContainerRef, viewChild, afterNextRender } from '@angular/core';
+import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Input, ChangeDetectorRef, ViewChild, model, untracked, Renderer2, Pipe, booleanAttribute, DestroyRef, Injectable, NgZone, ViewContainerRef, viewChild, afterNextRender } from '@angular/core';
 import Konva from 'konva';
 import { Shape } from 'konva/lib/Shape';
 import { Sprite } from 'konva/lib/shapes/Sprite';
@@ -25,7 +25,7 @@ import { Transformer } from 'konva/lib/shapes/Transformer';
 import { Wedge } from 'konva/lib/shapes/Wedge';
 import * as i1$1 from 'ngx-tethys/popover';
 import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
-import { AITableFieldGroup, AITableFieldType, AITableRowColumnType, DragType, isUndefinedOrNull, idCreator as idCreator$1, isUrl, isEmpty, AITableFilterOperation, AttachmentFieldBase, AITableStatType, DateFieldBase, DEFAULT_FIELD_STAT_TYPE_ITEMS, isDateValid, isDateAndReturnDate, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, isProgressAndReturnValue, RateFieldBase, RichTextFieldBase, SelectFieldBase, AITableSelectOptionStyle, generateOptionsByTexts, TextFieldBase, CheckboxFieldBase, FieldModelBaseMap, numberFormat, DragDirection, AI_TABLE_MIN_FROZEN_COLUMN_COUNT } from '@ai-table/utils';
+import { AITableFieldGroup, AITableFieldType, DragType, AITableRowColumnType, isUndefinedOrNull, idCreator as idCreator$1, isUrl, isEmpty, AITableFilterOperation, AttachmentFieldBase, AITableStatType, DateFieldBase, DEFAULT_FIELD_STAT_TYPE_ITEMS, isDateValid, isDateAndReturnDate, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, isProgressAndReturnValue, RateFieldBase, RichTextFieldBase, SelectFieldBase, AITableSelectOptionStyle, generateOptionsByTexts, TextFieldBase, CheckboxFieldBase, FieldModelBaseMap, numberFormat, DragDirection, AI_TABLE_MIN_FROZEN_COLUMN_COUNT } from '@ai-table/utils';
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
@@ -53,7 +53,7 @@ import { isArray, TinyDate, helpers } from 'ngx-tethys/util';
 import { DEFAULT_COLORS } from 'ngx-tethys/color-picker';
 import GraphemeSplitter from 'grapheme-splitter';
 import * as i1$2 from '@angular/common';
-import { CommonModule, NgClass, NgTemplateOutlet } from '@angular/common';
+import { CommonModule, NgClass, NgTemplateOutlet, NgComponentOutlet } from '@angular/common';
 import { ThyDropdownAbstractMenu, ThyDropdownMenuItemDirective, ThyDropdownMenuComponent, ThyDropdownMenuGroup, ThyDropdownDirective, ThyDropdownMenuItemIconDirective, ThyDropdownMenuItemNameDirective, ThyDropdownMenuItemExtendIconDirective, ThyDropdownMenuItemMetaDirective } from 'ngx-tethys/dropdown';
 import { ThyEmptyModule } from 'ngx-tethys/empty';
 import { ThySelect, ThySelectModule } from 'ngx-tethys/select';
@@ -61,12 +61,12 @@ import { ThyDot } from 'ngx-tethys/dot';
 import { ThyIcon } from 'ngx-tethys/icon';
 import { ThyTag } from 'ngx-tethys/tag';
 import { ThySwitch } from 'ngx-tethys/switch';
-import { of, Subject, fromEvent, debounceTime, mergeWith, animationFrames, filter } from 'rxjs';
+import { of, Subject, fromEvent, debounceTime, animationFrames, filter } from 'rxjs';
 import { ThyDivider } from 'ngx-tethys/divider';
+import * as i3$1 from 'ngx-tethys/checkbox';
+import { ThyCheckbox, ThyCheckboxModule } from 'ngx-tethys/checkbox';
 import * as i4 from 'ngx-tethys/avatar';
 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';
@@ -222,6 +222,9 @@ class KoShape {
             if (this.config()) {
                 this.updateNode(this.config());
             }
+            else {
+                this.updateNode({});
+            }
         });
     }
     getNode() {
@@ -254,9 +257,6 @@ class KoShape {
                 });
             }, 200);
         };
-        if (this.config()) {
-            this.updateNode(this.config());
-        }
     }
     updateNode(config) {
         if (!this._node)
@@ -1003,6 +1003,65 @@ const DEFAULT_TEXT_SCALE = 1;
 const DEFAULT_TEXT_MAX_CACHE = 500;
 const FONT_SIZE_SM = 12;
 
+const AITable = {
+    getColors() {
+        return Colors;
+    },
+    getVisibleFields(aiTable) {
+        return aiTable.gridData().fields.filter((field) => !field.hidden);
+    },
+    getVisibleRows(aiTable) {
+        return aiTable.records();
+    },
+    getActiveCell(aiTable) {
+        return aiTable.selection().activeCell;
+    },
+    getActiveRecordIds(aiTable) {
+        const selectedRecords = aiTable.selection().selectedRecords;
+        const selectedCells = aiTable.selection().selectedCells;
+        let selectedRecordIds = [];
+        if (selectedRecords.size > 0) {
+            selectedRecordIds = [...selectedRecords.keys()];
+        }
+        else if (selectedCells.size > 0) {
+            selectedRecordIds = [...selectedCells].map((item) => item.split(':')[0]);
+        }
+        else {
+            selectedRecordIds = [];
+        }
+        return selectedRecordIds;
+    },
+    isCellVisible(aiTable, cell) {
+        const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
+        const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
+        const [recordId, fieldId] = cell || [];
+        const isVisible = visibleRowIndexMap.has(recordId) && visibleColumnIndexMap.has(fieldId);
+        return isVisible;
+    },
+    getCellIndex(aiTable, cell) {
+        const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
+        const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
+        if (AITable.isCellVisible(aiTable, cell)) {
+            const [recordId, fieldId] = cell;
+            return {
+                rowIndex: visibleRowIndexMap.get(recordId),
+                columnIndex: visibleColumnIndexMap.get(fieldId)
+            };
+        }
+        return null;
+    },
+    isFrozenColumn(aiTable, columnIndex) {
+        const frozenColumnCount = aiTable.context.frozenColumnCount();
+        if (columnIndex <= frozenColumnCount - 1) {
+            return true;
+        }
+        return false;
+    },
+    getDragState(aiTable) {
+        return aiTable.dragState?.()?.type || DragType.none;
+    }
+};
+
 /**
  * 用于构建 Canvas 基础坐标系，后续的绘制工作以此为基础
  */
@@ -1222,66 +1281,59 @@ class Coordinate {
             height
         };
     }
-}
-
-const AITable = {
-    getColors() {
-        return Colors;
-    },
-    getVisibleFields(aiTable) {
-        return aiTable.gridData().fields.filter((field) => !field.hidden);
-    },
-    getVisibleRows(aiTable) {
-        return aiTable.records();
-    },
-    getActiveCell(aiTable) {
-        return aiTable.selection().activeCell;
-    },
-    getActiveRecordIds(aiTable) {
-        const selectedRecords = aiTable.selection().selectedRecords;
-        const selectedCells = aiTable.selection().selectedCells;
-        let selectedRecordIds = [];
-        if (selectedRecords.size > 0) {
-            selectedRecordIds = [...selectedRecords.keys()];
-        }
-        else if (selectedCells.size > 0) {
-            selectedRecordIds = [...selectedCells].map((item) => item.split(':')[0]);
-        }
-        else {
-            selectedRecordIds = [];
-        }
-        return selectedRecordIds;
-    },
-    isCellVisible(aiTable, cell) {
-        const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
-        const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
-        const [recordId, fieldId] = cell || [];
-        const isVisible = visibleRowIndexMap.has(recordId) && visibleColumnIndexMap.has(fieldId);
-        return isVisible;
-    },
-    getCellIndex(aiTable, cell) {
-        const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
-        const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
-        if (AITable.isCellVisible(aiTable, cell)) {
-            const [recordId, fieldId] = cell;
-            return {
-                rowIndex: visibleRowIndexMap.get(recordId),
-                columnIndex: visibleColumnIndexMap.get(fieldId)
-            };
-        }
-        return null;
-    },
-    isFrozenColumn(aiTable, columnIndex) {
-        const frozenColumnCount = aiTable.context.frozenColumnCount();
-        if (columnIndex <= frozenColumnCount - 1) {
-            return true;
+    /**
+     * 判断单元格是否在冻结区域
+     */
+    isCellInFrozen(aiTable, cell) {
+        const cellIndex = AITable.getCellIndex(aiTable, cell);
+        if (!cellIndex) {
+            return false;
         }
-        return false;
-    },
-    getDragState(aiTable) {
-        return aiTable.dragState?.()?.type || DragType.none;
+        return cellIndex.columnIndex < this.frozenColumnCount;
     }
-};
+    /**
+     * 获取单元格是否可以完整渲染
+     * 如果可以完整渲染，则返回 { isCellCanFullRender: true, offsetX: 0, offsetY: 0 }
+     * 如果不能完整渲染，则返回 { isCellCanFullRender: false, offsetX: 需要偏移的 x 值, offsetY: 需要偏移的 y 值 }
+     */
+    getCellIsFullRenderInfo(aiTable, cell) {
+        let offsetX = 0;
+        let offsetY = 0;
+        const cellIndex = AITable.getCellIndex(aiTable, cell);
+        const { rowIndex, columnIndex } = cellIndex;
+        const isCellInFrozen = columnIndex < this.frozenColumnCount;
+        const frozenWidth = this.getColumnOffset(this.frozenColumnCount);
+        const { x, y, width, height } = this.getCellRect(rowIndex, columnIndex);
+        const { scrollLeft, scrollTop } = aiTable.context.scrollState();
+        const containerStartPointXY = [frozenWidth + scrollLeft, scrollTop + AI_TABLE_FIELD_HEAD_HEIGHT];
+        const containerEndPointXY = [
+            aiTable.context.containerRect().width + scrollLeft - AI_TABLE_CELL_LINE_BORDER * 4,
+            aiTable.context.containerRect().height + scrollTop - AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT - AI_TABLE_CELL_LINE_BORDER * 4
+        ];
+        const cellStartPointXY = [x, y];
+        const cellEndPointXY = [x + width, y + height];
+        // 不在左侧固定列时，才需要判断 x 坐标是否超出
+        if (!isCellInFrozen && cellStartPointXY[0] < containerStartPointXY[0]) {
+            offsetX = cellStartPointXY[0] - containerStartPointXY[0];
+        }
+        if (cellStartPointXY[1] < containerStartPointXY[1]) {
+            offsetY = cellStartPointXY[1] - containerStartPointXY[1];
+        }
+        // 不在左侧固定列时，才需要判断 x 坐标是否超出
+        if (!isCellInFrozen && cellEndPointXY[0] > containerEndPointXY[0]) {
+            offsetX = cellEndPointXY[0] - containerEndPointXY[0];
+        }
+        if (cellEndPointXY[1] > containerEndPointXY[1]) {
+            offsetY = cellEndPointXY[1] - containerEndPointXY[1];
+        }
+        const isCellCanFullRender = offsetX === 0 && offsetY === 0;
+        return {
+            isCellCanFullRender,
+            offsetX,
+            offsetY
+        };
+    }
+}
 
 var AlphabetType;
 (function (AlphabetType) {
@@ -1363,10 +1415,10 @@ function createAITable(records, fields, gridData) {
             selectedFields: new Set(),
             selectedCells: new Set(),
             activeCell: null,
-            expandCell: null,
-            editingCell: null,
-            selectAllState: AITableSelectAllState.none
+            selectedEndCell: null
         }),
+        expendCell: signal({ path: null }),
+        editingCell: signal({ path: null }),
         keywordsMatchedCells: signal(new Set()),
         recordsMap: computed(() => {
             return records().reduce((object, item) => {
@@ -1976,19 +2028,100 @@ function getAvatarBgColor(name) {
         : 0;
     return colors[code % 9];
 }
-function expandCell(aiTable, path) {
-    const [recordId, fieldId] = path;
+function clearCoverCell(aiTable) {
+    clearSelection(aiTable);
+    closeEditingCell(aiTable);
+    closeExpendCell(aiTable);
+}
+function clearSelection(aiTable) {
     aiTable.selection.set({
-        ...aiTable.selection(),
-        activeCell: [recordId, fieldId],
-        selectedCells: new Set([`${recordId}:${fieldId}`]),
-        expandCell: [recordId, fieldId]
+        selectedRecords: new Set(),
+        selectedFields: new Set(),
+        selectedCells: new Set(),
+        activeCell: null,
+        selectedEndCell: null
+    });
+}
+function clearSelectionRecords(aiTable) {
+    setSelection(aiTable, {
+        selectedRecords: new Set()
+    });
+}
+function clearSelectionFields(aiTable) {
+    setSelection(aiTable, {
+        selectedFields: new Set()
+    });
+}
+function clearSelectedCells(aiTable) {
+    setSelection(aiTable, {
+        selectedCells: new Set()
     });
 }
 function setExpandCellInfo(aiTable, expandCellInfo) {
+    aiTable.expendCell.set({
+        ...aiTable.expendCell(),
+        ...expandCellInfo
+    });
+}
+function expandCell(aiTable, cellPath) {
+    setExpandCellInfo(aiTable, { path: cellPath });
+}
+function closeExpendCell(aiTable) {
+    setExpandCellInfo(aiTable, { path: null, width: undefined, height: undefined });
+}
+function setSelection(aiTable, selection) {
     aiTable.selection.set({
         ...aiTable.selection(),
-        expandCellInfo: expandCellInfo
+        ...selection
+    });
+}
+function setActiveCell(aiTable, activeCellPath) {
+    aiTable.selection.set({
+        ...aiTable.selection(),
+        activeCell: activeCellPath
+    });
+}
+function setEditingCell(aiTable, editingCell) {
+    aiTable.editingCell.set({
+        ...aiTable.editingCell(),
+        ...editingCell
+    });
+}
+function closeEditingCell(aiTable) {
+    setEditingCell(aiTable, { path: null });
+}
+function selectCells(aiTable, startCell, endCell, activeCell) {
+    const [startRecordId, startFieldId] = startCell;
+    const records = aiTable.context.linearRows();
+    const fields = AITable.getVisibleFields(aiTable);
+    const selectedCells = new Set();
+    if (!endCell) {
+        selectedCells.add(`${startRecordId}:${startFieldId}`);
+    }
+    else {
+        if (endCell && endCell.join(':') === aiTable.selection().selectedEndCell?.join(':')) {
+            return;
+        }
+        const [endRecordId, endFieldId] = endCell;
+        const startRowIndex = aiTable.context.visibleRowsIndexMap().get(startRecordId);
+        const endRowIndex = aiTable.context.visibleRowsIndexMap().get(endRecordId);
+        const startColIndex = aiTable.context.visibleColumnsIndexMap().get(startFieldId);
+        const endColIndex = aiTable.context.visibleColumnsIndexMap().get(endFieldId);
+        const minRowIndex = Math.min(startRowIndex, endRowIndex);
+        const maxRowIndex = Math.max(startRowIndex, endRowIndex);
+        const minColIndex = Math.min(startColIndex, endColIndex);
+        const maxColIndex = Math.max(startColIndex, endColIndex);
+        for (let i = minRowIndex; i <= maxRowIndex; i++) {
+            for (let j = minColIndex; j <= maxColIndex; j++) {
+                selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
+            }
+        }
+    }
+    clearSelection(aiTable);
+    setSelection(aiTable, {
+        activeCell: activeCell || startCell,
+        selectedEndCell: endCell || null,
+        selectedCells: selectedCells
     });
 }
 
@@ -3227,6 +3360,18 @@ const FieldModelMap = {
     [AITableFieldType.attachment]: new AttachmentField(),
     [AITableFieldType.checkbox]: new CheckboxField()
 };
+function selectField(aiTable, fieldId) {
+    if (aiTable.selection().selectedFields.has(fieldId)) {
+        return;
+    }
+    aiTable.selection.set({
+        selectedRecords: new Set(),
+        selectedFields: new Set([fieldId]),
+        selectedCells: new Set(),
+        activeCell: null,
+        selectedEndCell: null
+    });
+}
 
 const aiTableFragmentAttribute = 'ai-table-fragment';
 const buildClipboardData = (aiTable) => {
@@ -5196,7 +5341,7 @@ const createActiveCellBorder = (config) => {
         !!activeCell.length &&
         aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
         aiTable.context.visibleColumnsIndexMap().has(activeCell[1]) &&
-        !aiTable.selection().expandCell) {
+        !aiTable.expendCell()?.path) {
         const fieldId = activeCell[1];
         const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
         const checkIsVisible = (rowIndex, columnIndex) => {
@@ -7398,7 +7543,13 @@ class AITableFrozenColumnHeads {
             const config = this.config();
             if (!config)
                 return false;
-            return config.aiTable.selection().selectAllState === AITableSelectAllState.all;
+            const selectedRecords = config.aiTable.selection().selectedRecords;
+            const selectedAllState = selectedRecords.size === config.aiTable.records().length
+                ? AITableSelectAllState.all
+                : selectedRecords.size === 0
+                    ? AITableSelectAllState.none
+                    : AITableSelectAllState.partial;
+            return selectedAllState === AITableSelectAllState.all;
         });
         this.fieldHeadHeight = computed(() => {
             const coord = this.coordinate();
@@ -8564,7 +8715,7 @@ class AITableFillHandle {
             const { aiTable, readonly } = this.config();
             const selection = aiTable.selection();
             const hasSelectedCells = selection.selectedCells.size > 0;
-            const isEditingCell = selection.editingCell;
+            const isEditingCell = !!aiTable.editingCell()?.path;
             return hasSelectedCells && !readonly && !isEditingCell;
         });
         this.handleConfig = computed(() => {
@@ -8579,8 +8730,11 @@ class AITableFillHandle {
             const rowOffset = coordinate.getRowOffset(rowIndex);
             const width = 6;
             const height = 6;
-            const cellHeight = aiTable.selection().expandCellInfo?.height
-                ? aiTable.selection().expandCellInfo.height + AI_TABLE_CELL_LINE_BORDER
+            const [expandRecordId, expandFieldId] = aiTable.expendCell()?.path || [null, null];
+            const cellHeight = expandRecordId === recordId && expandFieldId === fieldId && aiTable.expendCell()?.height
+                ? aiTable.expendCell()?.height
+                    ? aiTable.expendCell().height + AI_TABLE_CELL_LINE_BORDER
+                    : AI_TABLE_ROW_HEIGHT
                 : AI_TABLE_ROW_HEIGHT;
             return {
                 x: columnOffset + columnWidth - width / 2 + AI_TABLE_OFFSET,
@@ -9424,7 +9578,7 @@ class AITableRenderer {
             let expandCellBorder = false;
             let frozenExpandCellBorder = false;
             const { aiTable } = this.config();
-            const expandCellPath = aiTable.selection().expandCell;
+            const expandCellPath = aiTable.expendCell()?.path;
             if (expandCellPath) {
                 const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, expandCellPath);
                 const isFrozenColumn = columnIndex < aiTable.context.frozenColumnCount();
@@ -10185,10 +10339,10 @@ function getCoverCell(aiTable) {
     const pointPosition = aiTable.context.pointPosition();
     let fieldId;
     let recordId;
-    const expandCell = aiTable.selection().expandCell;
-    if (expandCell) {
-        fieldId = expandCell[1];
-        recordId = expandCell[0];
+    const expandCellPath = aiTable.expendCell()?.path;
+    if (expandCellPath) {
+        fieldId = expandCellPath[1];
+        recordId = expandCellPath[0];
     }
     else {
         const { fieldId: fieldIdDetail, recordId: recordIdDetail } = getDetailByTargetName(pointPosition.realTargetName) ?? {};
@@ -10215,7 +10369,7 @@ function getCoverCell(aiTable) {
         field,
         recordId,
         fieldId,
-        isExpand: !!expandCell,
+        isExpand: !!expandCellPath,
         renderComponentDefinition
     };
 }
@@ -10443,6 +10597,33 @@ function getStartAndEndCell(selectedCells) {
     return { startCell, endCell };
 }
 
+function toggleSelectRecord(aiTable, recordId) {
+    if (aiTable.selection().selectedRecords.has(recordId)) {
+        aiTable.selection().selectedRecords.delete(recordId);
+    }
+    else {
+        aiTable.selection().selectedRecords.add(recordId);
+    }
+    const selectedRecords = aiTable.selection().selectedRecords;
+    aiTable.selection.set({
+        selectedRecords: selectedRecords,
+        selectedFields: new Set(),
+        selectedCells: new Set(),
+        activeCell: null,
+        selectedEndCell: null
+    });
+}
+function toggleSelectAllRecords(aiTable, checked) {
+    if (checked) {
+        setSelection(aiTable, {
+            selectedRecords: new Set(aiTable.records().map((item) => item._id))
+        });
+    }
+    else {
+        clearSelection(aiTable);
+    }
+}
+
 class NumberCellEditorComponent extends AbstractEditCellEditor {
     updateValue() {
         if (this.modelValue === '') {
@@ -10886,165 +11067,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     }, template: "<form thyForm name=\"createPropertyForm\" [thyFormValidatorConfig]=\"validatorConfig()\" thyLayout=\"vertical\">\n    <thy-form-group thyLabelRequired [thyLabelText]=\"i18nTexts().columnName\">\n        <thy-input-group>\n            <input\n                thyInput\n                [thyAutofocus]=\"true\"\n                name=\"fieldName\"\n                [maxlength]=\"fieldMaxLength\"\n                [(ngModel)]=\"aiEditField().name\"\n                (ngModelChange)=\"nameChange($event)\"\n                required\n                [placeholder]=\"i18nTexts().columnNamePlaceholder\"\n                [thyUniqueCheck]=\"checkUniqueName\"\n            />\n            <ng-template #suffix>\n                <thy-input-count></thy-input-count>\n            </ng-template>\n        </thy-input-group>\n    </thy-form-group>\n    <thy-form-group [thyLabelText]=\"i18nTexts().fieldType\">\n        <div class=\"thy-dropdown-menu py-0\">\n            <div class=\"ml-n5 mr-n5\">\n                <span thyDropdownMenuItem [thyDropdown]=\"menu\" thyTrigger=\"hover\" thyPlacement=\"right\" (click)=\"fieldTypeClick($event)\">\n                    <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"selectedFieldOption().icon\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ selectedFieldOption().name }}</span>\n                    <thy-icon thyDropdownMenuItemExtendIcon thyIconName=\"angle-right\" class=\"text-desc\"></thy-icon>\n                </span>\n            </div>\n        </div>\n\n        @if (selectedFieldOption().type === aITableFieldType.member) {\n            <div class=\"d-flex justify-content-between mt-3\">\n                {{ i18nTexts().allowMultipleMembers }}\n                <thy-switch\n                    name=\"isMultipleMember\"\n                    [(ngModel)]=\"isMultipleMember\"\n                    (ngModelChange)=\"multipleMemberChange()\"\n                    thySize=\"sm\"\n                ></thy-switch>\n            </div>\n        }\n    </thy-form-group>\n    @if (aiExternalTemplate()) {\n        <ng-container *ngTemplateOutlet=\"aiExternalTemplate()\"></ng-container>\n    }\n    <thy-form-group-footer thyAlign=\"right\">\n        <button thyButton=\"link-secondary\" (click)=\"cancel()\" thySize=\"sm\">{{ i18nTexts().cancel }}</button>\n        <button thyButton=\"primary\" (thyFormSubmit)=\"editFieldProperty()\" thySize=\"sm\">{{ i18nTexts().confirm }}</button>\n    </thy-form-group-footer>\n</form>\n\n<thy-dropdown-menu #menu>\n    <div class=\"ai-table-field-type-menu\">\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().base\">\n            @for (item of fieldOptions().base; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n        <thy-dropdown-menu-group [thyTitle]=\"i18nTexts().advanced\">\n            @for (item of fieldOptions().advanced; track $index) {\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{\n                        active: (item | fieldIsSameOption: aiEditField())\n                    }\"\n                    (click)=\"selectFieldType(item)\"\n                >\n                    <thy-icon [thyIconName]=\"item.icon!\"></thy-icon>\n                    <span thyDropdownMenuItemName>{{ item.name }}</span>\n                </a>\n            }\n        </thy-dropdown-menu-group>\n    </div>\n</thy-dropdown-menu>\n", styles: [":host{width:350px}\n"] }]
         }] });
 
-class AITableGridSelectionService {
-    constructor() {
-        this.selectAllState = computed(() => {
-            const selectedRecords = this.aiTable.selection().selectedRecords;
-            return selectedRecords.size === this.aiTable.records().length
-                ? AITableSelectAllState.all
-                : selectedRecords.size === 0
-                    ? AITableSelectAllState.none
-                    : AITableSelectAllState.partial;
-        });
-    }
-    initialize(aiTable) {
-        this.aiTable = aiTable;
-    }
-    clearSelection(options) {
-        this.aiTable.selection.set({
-            selectedRecords: new Set(),
-            selectedFields: new Set(),
-            selectedCells: new Set(),
-            activeCell: null,
-            expandCell: null,
-            editingCell: null,
-            selectAllState: AITableSelectAllState.none,
-            expandCellInfo: options?.retainExpandCellInfo ? this.aiTable.selection().expandCellInfo : null
-        });
-    }
-    setActiveCell(activeCell) {
-        this.aiTable.selection().activeCell = activeCell;
-    }
-    setExpandCell(expandCell) {
-        this.aiTable.selection.set({
-            ...this.aiTable.selection(),
-            expandCell: expandCell
-        });
-    }
-    setEditingCell(editingCell) {
-        this.aiTable.selection.set({
-            ...this.aiTable.selection(),
-            editingCell: editingCell
-        });
-    }
-    selectField(fieldId) {
-        if (this.aiTable.selection().selectedFields.has(fieldId)) {
-            return;
-        }
-        this.clearSelection();
-        this.aiTable.selection().selectedFields.add(fieldId);
-    }
-    get selectedFields() {
-        return this.aiTable.selection().selectedFields;
-    }
-    get selectedRecords() {
-        return this.aiTable.selection().selectedRecords;
-    }
-    selectRecord(recordId) {
-        if (this.aiTable.selection().selectedRecords.has(recordId)) {
-            this.aiTable.selection().selectedRecords.delete(recordId);
-        }
-        else {
-            this.aiTable.selection().selectedRecords.add(recordId);
-        }
-        const selectedRecords = this.aiTable.selection().selectedRecords;
-        this.aiTable.selection.set({
-            selectedRecords: selectedRecords,
-            selectedFields: new Set(),
-            selectedCells: new Set(),
-            activeCell: null,
-            expandCell: null,
-            editingCell: null,
-            selectAllState: this.selectAllState()
-        });
-    }
-    toggleSelectAll(checked) {
-        if (checked) {
-            if (this.aiTable.records().length === 0) {
-                this.aiTable.selection.set({
-                    ...this.aiTable.selection(),
-                    selectAllState: AITableSelectAllState.all
-                });
-            }
-            else {
-                this.aiTable.records().forEach((item) => {
-                    this.selectRecord(item._id);
-                });
-            }
-        }
-        else {
-            this.clearSelection();
-        }
-    }
-    updateSelect(event) {
-        const target = event?.target;
-        if (!target) {
-            return;
-        }
-        const cellDom = target.closest('.grid-cell');
-        const colDom = target.closest('.grid-field');
-        const checkbox = target.tagName === 'INPUT' && target.type === 'checkbox' && target.closest('.grid-checkbox');
-        const fieldAction = target.closest('.grid-field-action');
-        if (cellDom) {
-            const fieldId = cellDom.getAttribute('fieldId');
-            const recordId = cellDom.getAttribute('recordId');
-            fieldId && recordId && this.selectCells([recordId, fieldId]);
-        }
-        if (colDom && !fieldAction) {
-            const fieldId = colDom.getAttribute('fieldId');
-            fieldId && this.selectField(fieldId);
-        }
-        if (!cellDom && !colDom && !checkbox) {
-            this.clearSelection();
-        }
-    }
-    selectCells(startCell, endCell, activeCell) {
-        const [startRecordId, startFieldId] = startCell;
-        const records = this.aiTable.context.linearRows();
-        const fields = AITable.getVisibleFields(this.aiTable);
-        const selectedCells = new Set();
-        if (!endCell) {
-            selectedCells.add(`${startRecordId}:${startFieldId}`);
-        }
-        else {
-            // 数据的存储设计结构，决定了最后一条就是endCell
-            const lastItem = Array.from(this.aiTable.selection().selectedCells).pop();
-            if (endCell.join(':') === lastItem) {
-                return;
-            }
-            const [endRecordId, endFieldId] = endCell;
-            const startRowIndex = this.aiTable.context.visibleRowsIndexMap().get(startRecordId);
-            const endRowIndex = this.aiTable.context.visibleRowsIndexMap().get(endRecordId);
-            const startColIndex = this.aiTable.context.visibleColumnsIndexMap().get(startFieldId);
-            const endColIndex = this.aiTable.context.visibleColumnsIndexMap().get(endFieldId);
-            const minRowIndex = Math.min(startRowIndex, endRowIndex);
-            const maxRowIndex = Math.max(startRowIndex, endRowIndex);
-            const minColIndex = Math.min(startColIndex, endColIndex);
-            const maxColIndex = Math.max(startColIndex, endColIndex);
-            for (let i = minRowIndex; i <= maxRowIndex; i++) {
-                for (let j = minColIndex; j <= maxColIndex; j++) {
-                    selectedCells.add(`${records[i]._id}:${fields[j]._id}`);
-                }
-            }
-        }
-        this.clearSelection();
-        this.aiTable.selection.set({
-            ...this.aiTable.selection(),
-            activeCell: activeCell || startCell,
-            selectedCells: selectedCells
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridSelectionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [] });
-
 class AITableContextMenu extends ThyDropdownAbstractMenu {
     constructor() {
         super(...arguments);
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
         this.notifyService = inject(ThyNotifyService);
         this.thyPopoverRef = inject(ThyPopoverRef);
         this.aiTable = input.required();
@@ -11055,8 +11080,7 @@ class AITableContextMenu extends ThyDropdownAbstractMenu {
     }
     execute(menu) {
         if ((menu.disabled && !menu.disabled(this.aiTable(), this.targetName(), this.position())) || !menu.disabled) {
-            menu.exec &&
-                menu.exec(this.aiTable(), this.targetName(), this.position(), this.aiTableGridSelectionService, this.notifyService, menu.count);
+            menu.exec && menu.exec(this.aiTable(), this.targetName(), this.position(), this.notifyService, menu.count);
         }
     }
     inputNumberFocus(e) {
@@ -11088,6 +11112,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider thyStyle=\"solid\"></thy-divider>\n        } @else {\n            @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n            @let isRemoveRecords = menu.type === 'removeRecords';\n            @let isPreventClearSelection =\n                menu.type === 'copyCells' ||\n                menu.type === 'pasteCells' ||\n                menu.type === 'removeRecords' ||\n                menu.type === 'insertUpwardRecords' ||\n                menu.type === 'insertDownwardRecords';\n\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                [ngClass]=\"{\n                    'remove-record': isRemoveRecords && !disabled,\n                    'ai-table-prevent-clear-selection': isPreventClearSelection && !disabled\n                }\"\n                draggable=\"false\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"disabled\"\n            >\n                <thy-icon thyDropdownMenuItemIcon [thyIconName]=\"menu.icon!\"></thy-icon>\n                @if (menu?.isInputNumber) {\n                    <span thyDropdownMenuItemName class=\"d-flex align-items-center\">\n                        {{ menu.name }}\n                        <thy-input-number\n                            #inputNumber\n                            class=\"mx-2\"\n                            thySize=\"sm\"\n                            [(ngModel)]=\"menu.count\"\n                            [thyStep]=\"1\"\n                            [thyMin]=\"1\"\n                            [thyMax]=\"maxCount()\"\n                            (click)=\"inputNumberFocus($event)\"\n                            (thyEnter)=\"itemEnterHandle($event, menu)\"\n                            thyStopPropagation\n                        ></thy-input-number>\n                        {{ menu.nameSuffix }}\n                    </span>\n                } @else {\n                    <span thyDropdownMenuItemName>{{ menu.name }}</span>\n                }\n                <span thyDropdownMenuItemMeta class=\"text-desc\">{{ menu.shortcutKey }}</span>\n            </a>\n        }\n    }\n}\n" }]
         }] });
 
+class CheckboxMenuSort {
+    constructor() {
+        this.field = input.required();
+        this.menu = input.required();
+        this.Direction = {
+            ascending: 'ascending',
+            descending: 'descending'
+        };
+    }
+    getSortText() {
+        if (this.menu() && this.field()) {
+            const menuName = this.menu().name;
+            if (typeof menuName === 'function') {
+                return menuName(this.field());
+            }
+            return menuName || '按 Z → A 排序';
+        }
+        return '按 Z → A 排序';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CheckboxMenuSort, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: CheckboxMenuSort, isStandalone: true, selector: "checkbox-menu-sort", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, menu: { classPropertyName: "menu", publicName: "menu", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "checkbox-menu-sort" }, ngImport: i0, template: `
+        <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
+        <div class="sort-state">
+            @if (menu().type === 'sortByAsc') {
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
+            } @else {
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+            }
+        </div>
+    `, isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: CheckboxMenuSort, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'checkbox-menu-sort',
+                    template: `
+        <thy-icon class="sort-icon" [thyIconName]="menu().icon!"></thy-icon>
+        <div class="sort-state">
+            @if (menu().type === 'sortByAsc') {
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
+            } @else {
+                <label thyCheckbox [ngModel]="false" class="sort-checkbox"></label>
+                <thy-icon thyIconName="arrow-right" class="mx-2"></thy-icon>
+                <label thyCheckbox [ngModel]="true" class="sort-checkbox"></label>
+            }
+        </div>
+    `,
+                    host: {
+                        class: 'checkbox-menu-sort'
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [ThyIcon, ThyCheckbox, FormsModule, FormsModule]
+                }]
+        }] });
+
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
     [AITableFieldType.richText]: TextCellEditorComponent,
@@ -11106,7 +11191,6 @@ class AITableGridEventService {
         this.globalMousedownEvent$ = new Subject();
         this.destroyRef = inject(DestroyRef);
         this.thyPopover = inject(ThyPopover);
-        this.selectionService = inject(AITableGridSelectionService);
     }
     initialize(aiTable, aiFieldRenderers) {
         this.aiTable = aiTable;
@@ -11225,7 +11309,8 @@ class AITableGridEventService {
         const fieldType = this.aiTable.fieldsMap()[fieldId].type;
         const { component, isInternalComponent } = this.getEditorComponent(fieldType);
         const offsetOriginPosition = this.getOriginPosition(aiTable, options);
-        this.selectionService.setEditingCell([recordId, fieldId]);
+        setEditingCell(aiTable, { path: [recordId, fieldId] });
+        closeExpendCell(this.aiTable);
         this.cellEditorPopoverRef = this.thyPopover.open(component, {
             viewContainerRef: isInternalComponent ? undefined : options?.viewContainerRef,
             origin: container,
@@ -11273,7 +11358,7 @@ class AITableGridEventService {
             this.cellEditorPopoverRef.afterClosed().subscribe(() => {
                 wheelEvent.unsubscribe();
                 this.cellEditorPopoverRef = null;
-                this.selectionService.setEditingCell(null);
+                closeEditingCell(this.aiTable);
             });
             this.cellEditorPopoverRef.componentInstance.updateFieldValues.subscribe((value) => {
                 options.updateFieldValues(value);
@@ -11285,7 +11370,7 @@ class AITableGridEventService {
         if (this.cellEditorPopoverRef) {
             this.cellEditorPopoverRef.close();
             this.cellEditorPopoverRef = null;
-            this.selectionService.setEditingCell(null);
+            closeEditingCell(this.aiTable);
         }
     }
     getCurrentEditCell() {
@@ -11333,6 +11418,9 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
             return this.aiTable.fields().find((item) => item._id === this.fieldId);
         });
     }
+    getCustomComponent(menu) {
+        return menu.customComponent?.(this.aiTable, this.field());
+    }
     execute(menu) {
         if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
             menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
@@ -11345,13 +11433,13 @@ class AITableFieldMenu extends ThyDropdownAbstractMenu {
         return menu.name || '';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'field-menu'
-                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                    <span>{{ getMenuName(menu, field()) }}</span>\n                </a>\n            }\n        }\n    }\n}\n" }]
+                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass, NgComponentOutlet], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -11475,7 +11563,6 @@ class AITableGridBase {
         this.destroyRef = inject(DestroyRef);
         this.aiTableGridFieldService = inject(AITableGridFieldService);
         this.aiTableGridEventService = inject(AITableGridEventService);
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
     }
     ngOnInit() {
         this.initAITable();
@@ -11493,7 +11580,6 @@ class AITableGridBase {
     }
     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);
@@ -11506,11 +11592,11 @@ class AITableGridBase {
         }
         this.aiAddRecord.emit(options || {});
     }
-    selectRecord(recordId) {
-        this.aiTableGridSelectionService.selectRecord(recordId);
+    toggleSelectRecord(recordId) {
+        toggleSelectRecord(this.aiTable, recordId);
     }
     toggleSelectAll(checked) {
-        this.aiTableGridSelectionService.toggleSelectAll(checked);
+        toggleSelectAllRecords(this.aiTable, checked);
     }
     addField(gridColumnBlank, position) {
         if (this.aiMaxFields() && this.aiTable.fields().length >= this.aiMaxFields()) {
@@ -11540,11 +11626,6 @@ class AITableGridBase {
             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);
-            });
         });
     }
     dblClick(event) {
@@ -11581,7 +11662,7 @@ class AITableDomGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, 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", "thySizeChange"] }, { 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [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)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\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", "thySizeChange"] }, { 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: "19.2.10", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
@@ -11609,7 +11690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         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" }]
+                    ], providers: [AITableGridEventService, AITableGridFieldService], 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)=\"toggleSelectRecord(record._id)\"\n                ></label>\n                <span [ngClass]=\"(record._id | isSelectRecord: aiTable.selection()) ? 'grid-row-no-number' : 'grid-row-number'\">\n                    {{ index + 1 }}\n                </span>\n            </div>\n            @for (field of gridData().fields; track field._id) {\n                <!-- [ngClass]=\"{\n                        highlight: aiTable.selection().selectedCells.has(record._id) || aiTable.selection().selectedFields.has(field._id),\n                        selected: aiTable.selection().selectedCells.get(record._id)?.hasOwnProperty(field._id)\n                    }\" -->\n                <div\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 AITableScrollControllerService {
@@ -11812,7 +11893,7 @@ class AITableDragComponent {
         this.horizontalBar = input();
         this.verticalBar = input();
         this.dragEnd = output();
-        this.aiTableGridSelectionService = inject(AITableGridSelectionService);
+        this.aiTableGridEventService = inject(AITableGridEventService);
         this.render2 = inject(Renderer2);
         this.scrollControllerService = inject(AITableScrollControllerService);
         this.elementRef = inject((ElementRef));
@@ -11877,7 +11958,7 @@ class AITableDragComponent {
         });
     }
     handleDragStateChange() {
-        const drag = this.aiTableGridSelectionService.aiTable.dragState?.();
+        const drag = this.aiTableGridEventService.aiTable.dragState?.();
         if (!drag) {
             this.aiTableDrag = null;
             return;
@@ -11916,7 +11997,7 @@ class AITableDragComponent {
         }
     }
     movingColumn(drag, moveX, direction) {
-        const aiTable = this.aiTableGridSelectionService.aiTable;
+        const aiTable = this.aiTableGridEventService.aiTable;
         const scroll = { x: this.horizontalBarElement?.scrollLeft || 0, y: 0 };
         const coordinate = drag.coordinate;
         const fields = aiTable.gridData().fields;
@@ -12043,7 +12124,7 @@ class AITableDragComponent {
     }
     movingColumnWidth(drag, moveX) {
         this.setCursorStyle('col-resize');
-        const aiTable = this.aiTableGridSelectionService.aiTable;
+        const aiTable = this.aiTableGridEventService.aiTable;
         const visibleColumnIndexMap = aiTable.context.visibleColumnsIndexMap();
         const sourceColumnIndex = visibleColumnIndexMap.get(drag.sourceIds.values().next().value) || 0;
         const sourceColumnStartX = drag.coordinate.getColumnOffset(sourceColumnIndex);
@@ -12073,7 +12154,7 @@ class AITableDragComponent {
         };
     }
     movingRecord(drag, moveY) {
-        const aiTable = this.aiTableGridSelectionService.aiTable;
+        const aiTable = this.aiTableGridEventService.aiTable;
         const scroll = { x: 0, y: this.verticalBarElement?.scrollTop || 0 };
         const coordinate = drag.coordinate;
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
@@ -12349,6 +12430,9 @@ class AITableGrid extends AITableGridBase {
         this.coordinate = computed(() => {
             return this.rendererConfig().coordinate;
         });
+        this.scrollState = computed(() => {
+            return this.aiTable.context.scrollState();
+        });
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
         });
@@ -12449,8 +12533,7 @@ class AITableGrid extends AITableGridBase {
                 this.aiTable.selection.update((item) => {
                     return {
                         ...item,
-                        selectedRecords,
-                        selectAllState: this.aiTableGridSelectionService.selectAllState()
+                        selectedRecords
                     };
                 });
             });
@@ -12562,7 +12645,7 @@ class AITableGrid extends AITableGridBase {
                         endCell = [recordId, fieldId];
                     }
                     if (startCell && !!startCell.length) {
-                        this.aiTableGridSelectionService.selectCells(startCell, endCell, activeCell);
+                        selectCells(this.aiTable, startCell, endCell, activeCell);
                         this.scrollViewToCell(pos, startCell, endCell, this.coordinate(), this.horizontalBarRef(), this.verticalBarRef());
                     }
                 }
@@ -12584,7 +12667,7 @@ class AITableGrid extends AITableGridBase {
                 mouseEvent.preventDefault();
                 if (!fieldId)
                     return;
-                this.aiTableGridSelectionService.selectField(fieldId);
+                selectField(this.aiTable, fieldId);
                 this.handleFieldDragStart();
                 return;
             case AI_TABLE_FIELD_HEAD_OPACITY_LINE:
@@ -12598,16 +12681,15 @@ class AITableGrid extends AITableGridBase {
                     return;
                 const startCell = [recordId, fieldId];
                 this.updateDragSelectState(true, startCell);
-                const [expandRecordId, expandFieldId] = this.aiTable.selection().expandCell || [null, null];
+                const [expandRecordId, expandFieldId] = this.aiTable.expendCell()?.path || [null, null];
                 if (expandRecordId !== recordId || expandFieldId !== fieldId) {
                     const field = this.aiTable.fieldsMap()[fieldId];
+                    closeEditingCell(this.aiTable);
+                    selectCells(this.aiTable, startCell);
+                    closeExpendCell(this.aiTable);
                     if (field.type === AITableFieldType.text) {
-                        this.aiTableGridSelectionService.clearSelection({ retainExpandCellInfo: true });
                         expandCell(this.aiTable, [recordId, fieldId]);
                     }
-                    else {
-                        this.aiTableGridSelectionService.selectCells(startCell);
-                    }
                 }
                 return;
             case AI_TABLE_FILL_HANDLE:
@@ -12641,7 +12723,7 @@ class AITableGrid extends AITableGridBase {
             case AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX:
                 return;
             default:
-                this.aiTableGridSelectionService.clearSelection();
+                clearCoverCell(this.aiTable);
         }
     }
     stageMouseup(e) {
@@ -12731,23 +12813,23 @@ class AITableGrid extends AITableGridBase {
             return;
         switch (targetName) {
             case AI_TABLE_ROW_ADD_BUTTON: {
-                this.aiTableGridSelectionService.clearSelection();
+                clearCoverCell(this.aiTable);
                 this.addRecord();
                 break;
             }
             case AI_TABLE_ROW_SELECT_CHECKBOX: {
                 const { rowIndex: pointRowIndex } = context.pointPosition();
                 const pointRecordId = context.linearRows()[pointRowIndex]?._id;
-                this.selectRecord(pointRecordId);
+                this.toggleSelectRecord(pointRecordId);
                 break;
             }
             case AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX: {
-                const isChecked = this.aiTable.selection().selectAllState === AITableSelectAllState.all;
+                const isChecked = this.aiTable.selection().selectedRecords.size === this.aiTable.records().length;
                 this.toggleSelectAll(!isChecked);
                 break;
             }
             case AI_TABLE_FIELD_ADD_BUTTON: {
-                this.aiTableGridSelectionService.clearSelection();
+                clearCoverCell(this.aiTable);
                 const fieldGroupRect = e.event.target.getParent()?.getClientRect();
                 const containerRect = this.containerElement().getBoundingClientRect();
                 this.addField(this.containerElement(), {
@@ -12843,12 +12925,18 @@ class AITableGrid extends AITableGridBase {
     }
     bindGlobalMousedown() {
         fromEvent(document, 'mousedown', { passive: true })
-            .pipe(filter((e) => e.target instanceof Element &&
-            !this.containerElement().contains(e.target) &&
-            !e.target.closest(AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS)), takeUntilDestroyed(this.destroyRef))
+            .pipe(filter((e) => {
+            // 检查点击事件的目标元素是否在 container 内
+            const isInContainer = e.target instanceof Element && this.containerElement().contains(e.target);
+            // 检查点击事件的目标元素是否在 prevent-clear-selection 元素内
+            const isInPreventClearSelection = e.target instanceof Element && e.target.closest(AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS);
+            // 检查点击事件的目标元素是否在 popover 弹窗内
+            const isInPopover = e.target instanceof Element && e.target.closest('.cdk-overlay-container');
+            return e.target instanceof Element && !isInContainer && !isInPreventClearSelection && !isInPopover;
+        }), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
             this.updateDragSelectState(false, null);
-            this.aiTableGridSelectionService.clearSelection();
+            clearCoverCell(this.aiTable);
         });
     }
     updateDragSelectState(isDragging, startCell) {
@@ -12886,6 +12974,23 @@ class AITableGrid extends AITableGridBase {
         });
         this.resizeObserver.observe(this.containerElement());
     }
+    getNextCell(currentCell, event) {
+        const { rowIndex, columnIndex } = AITable.getCellIndex(this.aiTable, currentCell) || {};
+        let nextCellPath = null;
+        if (event.key === 'ArrowUp' && rowIndex) {
+            nextCellPath = [this.aiTable.gridData().records[rowIndex - 1]._id, currentCell[1]];
+        }
+        if (event.key === 'ArrowDown' && rowIndex < this.gridData().records.length - 1) {
+            nextCellPath = [this.aiTable.gridData().records[rowIndex + 1]._id, currentCell[1]];
+        }
+        if (event.key === 'ArrowLeft' && columnIndex) {
+            nextCellPath = [currentCell[0], this.aiTable.gridData().fields[columnIndex - 1]._id];
+        }
+        if (event.key === 'ArrowRight' && columnIndex < this.aiTable.gridData().fields.length - 1) {
+            nextCellPath = [currentCell[0], this.aiTable.gridData().fields[columnIndex + 1]._id];
+        }
+        return nextCellPath;
+    }
     bindShortcuts() {
         fromEvent(document, 'keydown')
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -12909,6 +13014,46 @@ class AITableGrid extends AITableGridBase {
             event.preventDefault();
             const isCopyOrPaste = (event.ctrlKey || event.metaKey) && (event.key === 'c' || event.key === 'v');
             const isDeleteOrBackspace = event.key === 'Backspace' || event.key === 'Delete';
+            const isDirectionKey = event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight';
+            const isShiftDirectionKey = event.shiftKey &&
+                (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight');
+            if (isDirectionKey) {
+                let endCell = this.aiTable.selection().activeCell;
+                if (isShiftDirectionKey) {
+                    endCell = this.aiTable.selection().selectedEndCell || endCell;
+                }
+                if (endCell) {
+                    const nextCellPath = this.getNextCell(endCell, event);
+                    if (nextCellPath) {
+                        const newField = this.aiTable.fieldsMap()[nextCellPath[1]];
+                        if (isShiftDirectionKey) {
+                            closeExpendCell(this.aiTable);
+                            selectCells(this.aiTable, this.aiTable.selection().activeCell, nextCellPath);
+                        }
+                        else {
+                            clearCoverCell(this.aiTable);
+                            if (newField.type === AITableFieldType.text) {
+                                setExpandCellInfo(this.aiTable, {
+                                    path: nextCellPath
+                                });
+                            }
+                            setSelection(this.aiTable, {
+                                selectedCells: new Set([nextCellPath.join(':')]),
+                                activeCell: nextCellPath
+                            });
+                        }
+                        const cellIsFullRenderInfo = this.coordinate().getCellIsFullRenderInfo(this.aiTable, nextCellPath);
+                        if (cellIsFullRenderInfo.offsetY !== 0 || cellIsFullRenderInfo.offsetX !== 0) {
+                            this.scrollAction({
+                                deltaX: cellIsFullRenderInfo.offsetX,
+                                deltaY: cellIsFullRenderInfo.offsetY,
+                                shiftKey: false
+                            });
+                        }
+                    }
+                }
+                return;
+            }
             if (isCopyOrPaste) {
                 if (event.key === 'c') {
                     this.copyCells();
@@ -12968,10 +13113,10 @@ class AITableGrid extends AITableGridBase {
         });
     }
     handleFieldDragStart() {
-        if (!this.aiReadonly() && this.aiTableGridSelectionService.selectedFields.size > 0) {
+        if (!this.aiReadonly() && this.aiTable.selection().selectedFields.size > 0) {
             this.setDragState({
                 type: DragType.field,
-                sourceIds: this.aiTableGridSelectionService.selectedFields,
+                sourceIds: this.aiTable.selection().selectedFields,
                 coordinate: this.coordinate()
             });
         }
@@ -13090,7 +13235,7 @@ class AITableGrid extends AITableGridBase {
                             newEndCell = [nextRecord._id, nextField._id];
                             newActiveCell = null;
                         }
-                        this.aiTableGridSelectionService.selectCells(newStartCell, newEndCell, newActiveCell);
+                        selectCells(this.aiTable, newStartCell, newEndCell, newActiveCell);
                     }
                 }
             },
@@ -13101,18 +13246,18 @@ class AITableGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
+                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"i18nTexts().rowAddFilterTooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGridSelectionService, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_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_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AttachmentField, AttachmentPath, CellDrawer, Check, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, setExpandCellInfo, setMouseStyle, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenFieldShadow, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_FIELD_ITEM_HEIGHT, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_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_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AttachmentField, AttachmentPath, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridData, buildGridLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultFieldValue, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isArrayField, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isDateFiled, isEmptyOrNot, isMac, isMeetFilter, isNumberFiled, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, selectCells, selectField, setActiveCell, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map