@ai-table/grid 0.0.28 → 0.0.29

package/fesm2022/ai-table-grid.mjs

@@ -6,7 +6,7 @@ import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
 import ___default, { isNumber, includes, values, isString, isNil } from 'lodash';
-import { isUndefinedOrNull, isArray, isEmpty as isEmpty$1, isObject } from 'ngx-tethys/util';
+import { isUndefinedOrNull, isArray, isEmpty as isEmpty$1, isObject, TinyDate, helpers } from 'ngx-tethys/util';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
@@ -42,6 +42,7 @@ import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
 import { ThyProgress } from 'ngx-tethys/progress';
 import { ThyDivider } from 'ngx-tethys/divider';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { fromUnixTime, subDays } from 'date-fns';
 import { LRUCache } from 'lru-cache';
 import Konva from 'konva';
 import { Shape } from 'konva/lib/Shape';
@@ -98,32 +99,41 @@ const AITable = {
         return aiTable.records();
     },
     getActiveCell(aiTable) {
-        const selection = aiTable.selection();
-        let selectedCells = [];
-        for (let [recordId, fieldIds] of selection.selectedCells.entries()) {
-            for (let fieldId of Object.keys(fieldIds)) {
-                if (fieldIds[fieldId]) {
-                    selectedCells.push({
-                        recordId,
-                        fieldId
-                    });
-                }
-            }
+        return aiTable.selection().activeCell;
+    },
+    getSelectedRecordIds(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]);
         }
-        return selectedCells ? selectedCells[0] : null;
+        else {
+            selectedRecordIds = [];
+        }
+        return selectedRecordIds;
     },
     isCellVisible(aiTable, cell) {
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
         const visibleColumnIndexMap = aiTable.context.visibleColumnsMap();
-        return visibleRowIndexMap.has(cell.recordId) && visibleColumnIndexMap.has(cell.fieldId);
+        let isVisible = false;
+        if (Array.isArray(cell) && !!cell.length) {
+            const [recordId, fieldId] = cell;
+            isVisible = visibleRowIndexMap.has(recordId) && visibleColumnIndexMap.has(fieldId);
+        }
+        return isVisible;
     },
     getCellIndex(aiTable, cell) {
         const visibleRowIndexMap = aiTable.context.visibleRowsIndexMap();
         const visibleColumnIndexMap = aiTable.context.visibleColumnsMap();
         if (AITable.isCellVisible(aiTable, cell)) {
+            const [recordId, fieldId] = cell;
             return {
-                rowIndex: visibleRowIndexMap.get(cell.recordId),
-                columnIndex: visibleColumnIndexMap.get(cell.fieldId)
+                rowIndex: visibleRowIndexMap.get(recordId),
+                columnIndex: visibleColumnIndexMap.get(fieldId)
             };
         }
         return null;
@@ -333,6 +343,24 @@ var AITableRowType;
     AITableRowType["record"] = "record";
 })(AITableRowType || (AITableRowType = {}));
 
+var AITableFilterOperation;
+(function (AITableFilterOperation) {
+    AITableFilterOperation["eq"] = "eq";
+    AITableFilterOperation["gte"] = "gte";
+    AITableFilterOperation["lte"] = "lte";
+    AITableFilterOperation["gt"] = "gt";
+    AITableFilterOperation["lt"] = "lt";
+    AITableFilterOperation["in"] = "in";
+    AITableFilterOperation["contain"] = "contain";
+    AITableFilterOperation["ne"] = "ne";
+    AITableFilterOperation["nin"] = "nin";
+    AITableFilterOperation["between"] = "between";
+    AITableFilterOperation["besides"] = "besides";
+    AITableFilterOperation["empty"] = "empty";
+    AITableFilterOperation["exists"] = "exists";
+    AITableFilterOperation["notContain"] = "not_contain";
+})(AITableFilterOperation || (AITableFilterOperation = {}));
+
 /**
  * 用于构建 Canvas 基础坐标系，后续的绘制工作以此为基础
  */
@@ -672,9 +700,10 @@ function createAITable(records, fields) {
         records,
         fields,
         selection: signal({
-            selectedRecords: new Map(),
-            selectedFields: new Map(),
-            selectedCells: new Map()
+            selectedRecords: new Set(),
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null
         }),
         matchedCells: signal([]),
         recordsMap: computed(() => {
@@ -1541,37 +1570,34 @@ class AITableGridSelectionService {
     }
     clearSelection() {
         this.aiTable.selection.set({
-            selectedRecords: new Map(),
-            selectedFields: new Map(),
-            selectedCells: new Map()
+            selectedRecords: new Set(),
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null
         });
     }
-    selectCell(recordId, fieldId) {
-        const fields = this.aiTable.selection().selectedCells.get(recordId);
-        if (fields?.hasOwnProperty(fieldId)) {
-            return;
-        }
-        this.clearSelection();
-        this.aiTable.selection().selectedCells.set(recordId, { [fieldId]: true });
+    setActiveCell(activeCell) {
+        this.aiTable.selection().activeCell = activeCell;
     }
     selectField(fieldId) {
         if (this.aiTable.selection().selectedFields.has(fieldId)) {
             return;
         }
         this.clearSelection();
-        this.aiTable.selection().selectedFields.set(fieldId, true);
+        this.aiTable.selection().selectedFields.add(fieldId);
     }
     selectRecord(recordId) {
         if (this.aiTable.selection().selectedRecords.has(recordId)) {
             this.aiTable.selection().selectedRecords.delete(recordId);
         }
         else {
-            this.aiTable.selection().selectedRecords.set(recordId, true);
+            this.aiTable.selection().selectedRecords.add(recordId);
         }
         this.aiTable.selection.set({
             selectedRecords: this.aiTable.selection().selectedRecords,
-            selectedFields: new Map(),
-            selectedCells: new Map()
+            selectedFields: new Set(),
+            selectedCells: new Set(),
+            activeCell: null
         });
     }
     toggleSelectAll(checked) {
@@ -1594,7 +1620,7 @@ class AITableGridSelectionService {
         if (cellDom) {
             const fieldId = cellDom.getAttribute('fieldId');
             const recordId = cellDom.getAttribute('recordId');
-            fieldId && recordId && this.selectCell(recordId, fieldId);
+            fieldId && recordId && this.selectCells([recordId, fieldId]);
         }
         if (colDom && !fieldAction) {
             const fieldId = colDom.getAttribute('fieldId');
@@ -1604,6 +1630,38 @@ class AITableGridSelectionService {
             this.clearSelection();
         }
     }
+    selectCells(startCell, endCell) {
+        const [startRecordId, startFieldId] = startCell;
+        if (!this.aiTable.context.visibleRowsIndexMap().has(startRecordId) ||
+            !this.aiTable.context.visibleColumnsMap().has(startFieldId)) {
+            return;
+        }
+        const selectedCells = new Set();
+        if (!endCell || !endCell.length) {
+            selectedCells.add(`${startRecordId}:${startFieldId}`);
+        }
+        else {
+            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.visibleColumnsMap().get(startFieldId);
+            const endColIndex = this.aiTable.context.visibleColumnsMap().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);
+            const rows = this.aiTable.context.linearRows();
+            const fields = AITable.getVisibleFields(this.aiTable);
+            for (let i = minRowIndex; i <= maxRowIndex; i++) {
+                for (let j = minColIndex; j <= maxColIndex; j++) {
+                    selectedCells.add(`${rows[i]._id}:${fields[j]._id}`);
+                }
+            }
+        }
+        this.clearSelection();
+        this.setActiveCell(startCell);
+        this.aiTable.selection().selectedCells = selectedCells;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGridSelectionService }); }
 }
@@ -1632,14 +1690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             type: Component,
             args: [{ selector: 'ai-table-context-menu', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'context-menu'
-                    }, imports: [
-                        ThyDropdownMenuComponent,
-                        ThyDropdownMenuItemDirective,
-                        ThyDropdownMenuItemNameDirective,
-                        ThyDropdownMenuItemIconDirective,
-                        ThyIcon,
-                        NgClass
-                    ], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{ 'ai-table-prohibit-clear-selection remove-record': !disabled }\"\n            (click)=\"execute(menu)\"\n            [thyDisabled]=\"disabled\"\n        >\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n" }]
+                    }, imports: [ThyDropdownMenuItemDirective, ThyIcon, NgClass], template: "@for (menu of menuItems(); track $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable(), targetName(), position())) || !menu.hidden) {\n        @let disabled = !!(menu.disabled && menu.disabled(aiTable(), targetName(), position()));\n        <a\n            thyDropdownMenuItem\n            href=\"javascript:;\"\n            [ngClass]=\"{ 'ai-table-prohibit-clear-selection remove-record': !disabled }\"\n            (click)=\"execute(menu)\"\n            [thyDisabled]=\"disabled\"\n        >\n            <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n            <span>{{ menu.name }}</span>\n        </a>\n    }\n}\n" }]
         }] });
 
 const GRID_CELL_EDITOR_MAP = {
@@ -1941,7 +1992,7 @@ class AITableGridMatchCellService {
         this.aiTable.records().forEach((record) => {
             this.aiTable.fields().forEach((field) => {
                 if (this.isCellMatchKeywords(this.aiTable, field, record._id, keywords, references)) {
-                    matchedCells.push(`${record._id}-${field._id}`);
+                    matchedCells.push(`${record._id}:${field._id}`);
                 }
             });
         });
@@ -2480,19 +2531,195 @@ const TextMeasure = (defaults = {}) => {
 };
 
 class Field {
+    // 筛选
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+            case AITableFilterOperation.exists: {
+                return this.isEmptyOrNot(condition.operation, cellValue);
+            }
+            default: {
+                return true;
+            }
+        }
+    }
+    // 查找
+    cellFullText(transformValue, field, references) {
+        let fullText = [];
+        if (!isEmpty(transformValue)) {
+            fullText.push(String(transformValue));
+        }
+        return fullText;
+    }
+    isEmptyOrNot(operation, cellValue) {
+        switch (operation) {
+            case AITableFilterOperation.empty: {
+                return isEmpty(cellValue);
+            }
+            case AITableFilterOperation.exists: {
+                return !isEmpty(cellValue);
+            }
+            default: {
+                throw new Error('compare operator type error');
+            }
+        }
+    }
+}
+
+const zhIntlCollator = typeof Intl !== 'undefined' ? new Intl.Collator('zh-CN') : undefined;
+function compareNumber(a, b) {
+    if (isEmpty(a) && isEmpty(b)) {
+        return 0;
+    }
+    if (isEmpty(a)) {
+        return -1;
+    }
+    if (isEmpty(b)) {
+        return 1;
+    }
+    return a === b ? 0 : a > b ? 1 : -1;
+}
+function compareString(a, b) {
+    if (a === b) {
+        return 0;
+    }
+    if (a == null) {
+        return -1;
+    }
+    if (b == null) {
+        return 1;
+    }
+    //  pinyin sort
+    return a === b ? 0 : zhIntlCollator ? zhIntlCollator.compare(a, b) : a.localeCompare(b, 'zh-CN') > 0 ? 1 : -1;
+}
+function stringInclude(str, searchStr) {
+    return str.toLowerCase().includes(searchStr.trim().toLowerCase());
+}
+/**
+ * 两数组是否有交集
+ */
+function hasIntersect(array1, array2) {
+    if (!Array.isArray(array1) || !Array.isArray(array2)) {
+        return false;
+    }
+    const set1 = new Set(array1);
+    const set2 = new Set(array2);
+    for (const element of set1) {
+        if (set2.has(element)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+class DateField extends Field {
+    isMeetFilter(condition, cellValue) {
+        const [left, right] = this.getTimeRange(condition.value);
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty$1(cellValue.timestamp) || cellValue.timestamp === 0;
+            case AITableFilterOperation.exists:
+                return !isEmpty$1(cellValue.timestamp) && cellValue.timestamp !== 0;
+            case AITableFilterOperation.eq:
+                return left <= cellValue.timestamp && cellValue.timestamp < right;
+            case AITableFilterOperation.gt:
+                return cellValue.timestamp > right;
+            case AITableFilterOperation.lt:
+                return cellValue.timestamp < left;
+            case AITableFilterOperation.between:
+                return left <= cellValue.timestamp && cellValue.timestamp < right;
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2) {
+        const value1 = cellValueToSortValue$4(cellValue1);
+        const value2 = cellValueToSortValue$4(cellValue2);
+        return compareNumber(value1, value2);
+    }
+    getTimeRange(value) {
+        switch (value) {
+            case 'today':
+                return [new TinyDate(new Date()).startOfDay().getUnixTime(), new TinyDate(new Date()).endOfDay().getUnixTime()];
+            case 'current_week':
+                return [
+                    new TinyDate().startOfWeek({ weekStartsOn: 1 }).getUnixTime(),
+                    new TinyDate().endOfWeek({ weekStartsOn: 1 }).getUnixTime()
+                ];
+            case 'yesterday':
+                return [
+                    new TinyDate(subDays(new Date(), 1)).startOfDay().getUnixTime(),
+                    new TinyDate(subDays(new Date(), 1)).endOfDay().getUnixTime()
+                ];
+            case 'current_month':
+                return [new TinyDate().startOfMonth().getUnixTime(), new TinyDate().endOfMonth().getUnixTime()];
+            default:
+                if (isArray(value)) {
+                    return [
+                        new TinyDate(fromUnixTime(value[0])).startOfDay().getUnixTime(),
+                        new TinyDate(fromUnixTime(value[1])).endOfDay().getUnixTime()
+                    ];
+                }
+                return [
+                    new TinyDate(fromUnixTime(value)).startOfDay().getUnixTime(),
+                    new TinyDate(fromUnixTime(value)).endOfDay().getUnixTime()
+                ];
+        }
+    }
+}
+function cellValueToSortValue$4(cellValue) {
+    return cellValue?.timestamp;
 }
 
 class LinkField extends Field {
-    cellFullText(transformValue, field) {
-        let fullText = [];
+    isMeetFilter(condition, cellValue) {
+        const cellTextValue = cellValue?.text;
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellTextValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellTextValue);
+            case AITableFilterOperation.contain:
+                return !isEmpty(cellTextValue) && stringInclude(cellTextValue, condition.value);
+            default:
+                return super.isMeetFilter(condition, cellTextValue);
+        }
+    }
+    compare(cellValue1, cellValue2) {
+        return compareString(cellValueToSortValue$3(cellValue1), cellValueToSortValue$3(cellValue2));
+    }
+    cellFullText(transformValue) {
+        let texts = [];
         if (!isEmpty(transformValue?.text)) {
-            fullText.push(transformValue.text);
+            texts.push(transformValue.text);
         }
-        return fullText;
+        return texts;
     }
 }
+function cellValueToSortValue$3(cellValue) {
+    return (cellValue && cellValue.text && cellValue.text.trim()) || null;
+}
 
 class MemberField extends Field {
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.in:
+                return Array.isArray(condition.value) && hasIntersect(cellValue, condition.value);
+            case AITableFilterOperation.nin:
+                return Array.isArray(condition.value) && !hasIntersect(cellValue, condition.value);
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2, field, references) {
+        const value1 = cellValueToSortValue$2(cellValue1, field, references);
+        const value2 = cellValueToSortValue$2(cellValue2, field, references);
+        return compareString(value1, value2);
+    }
     cellFullText(transformValue, field, references) {
         let fullText = [];
         if (transformValue?.length && references) {
@@ -2509,9 +2736,77 @@ class MemberField extends Field {
         return fullText;
     }
 }
+function cellValueToSortValue$2(cellValue, field, references) {
+    let names = [];
+    if (cellValue?.length && references) {
+        for (let index = 0; index < cellValue.length; index++) {
+            const userInfo = references?.members[cellValue[index]];
+            if (!userInfo) {
+                continue;
+            }
+            if (userInfo.display_name_pinyin) {
+                names.push(userInfo.display_name_pinyin);
+            }
+        }
+    }
+    return names && names.length ? names.join(', ') : null;
+}
+
+class NumberField extends Field {
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.eq:
+                return !Number.isNaN(condition.value) && cellValue != null && cellValue !== '' && condition.value === cellValue;
+            case AITableFilterOperation.gte:
+                return cellValue != null && cellValue !== '' && cellValue >= condition.value;
+            case AITableFilterOperation.lte:
+                return cellValue != null && cellValue !== '' && cellValue <= condition.value;
+            case AITableFilterOperation.gt:
+                return cellValue != null && cellValue !== '' && cellValue > condition.value;
+            case AITableFilterOperation.lt:
+                return cellValue != null && cellValue !== '' && cellValue < condition.value;
+            case AITableFilterOperation.ne:
+                return cellValue == null || cellValue == '' || Number.isNaN(condition.value) || cellValue !== condition.value;
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2) {
+        return compareNumber(cellValue1, cellValue2);
+    }
+}
 
 class ProgressField extends Field {
-    cellFullText(transformValue, field) {
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.eq:
+                return !Number.isNaN(condition.value) && cellValue != null && cellValue !== '' && condition.value === cellValue;
+            case AITableFilterOperation.gte:
+                return cellValue != null && cellValue !== '' && cellValue >= condition.value;
+            case AITableFilterOperation.lte:
+                return cellValue != null && cellValue !== '' && cellValue <= condition.value;
+            case AITableFilterOperation.gt:
+                return cellValue != null && cellValue !== '' && cellValue > condition.value;
+            case AITableFilterOperation.lt:
+                return cellValue != null && cellValue !== '' && cellValue < condition.value;
+            case AITableFilterOperation.ne:
+                return cellValue == null || cellValue == '' || Number.isNaN(condition.value) || cellValue !== condition.value;
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2) {
+        return compareNumber(cellValue1, cellValue2);
+    }
+    cellFullText(transformValue) {
         let fullText = [];
         if (!isEmpty(transformValue)) {
             fullText.push(`${transformValue}%`);
@@ -2520,40 +2815,111 @@ class ProgressField extends Field {
     }
 }
 
+class RateField extends Field {
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.in:
+                const isContain = condition.value.some((item) => String(item) === String(cellValue));
+                return !isEmpty(cellValue) && isContain;
+            case AITableFilterOperation.nin:
+                const noContain = condition.value.every((item) => String(item) !== String(cellValue));
+                return isEmpty(cellValue) || noContain;
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2) {
+        return compareNumber(cellValue1, cellValue2);
+    }
+}
+
 class SelectField extends Field {
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.in:
+                return Array.isArray(condition.value) && hasIntersect(cellValue, condition.value);
+            case AITableFilterOperation.nin:
+                return Array.isArray(condition.value) && !hasIntersect(cellValue, condition.value);
+            default:
+                return super.isMeetFilter(condition, cellValue);
+        }
+    }
+    compare(cellValue1, cellValue2, field) {
+        const value1 = cellValueToSortValue$1(cellValue1, field);
+        const value2 = cellValueToSortValue$1(cellValue2, field);
+        return compareString(value1, value2);
+    }
     cellFullText(transformValue, field) {
-        let cellText = [];
+        let fullText = [];
+        const optionsMap = helpers.keyBy(field.settings.options || [], '_id');
         if (transformValue && Array.isArray(transformValue) && transformValue.length) {
             transformValue.forEach((optionId) => {
-                const item = field.settings?.options?.find((option) => option._id === optionId);
-                if (item?.text) {
-                    cellText.push(item.text);
+                const option = optionsMap[optionId];
+                if (option && option.text) {
+                    fullText.push(option.text);
                 }
             });
         }
-        return cellText;
+        return fullText;
     }
 }
+function cellValueToSortValue$1(cellValue, field) {
+    if (!cellValue) {
+        return null;
+    }
+    const texts = [];
+    const optionsMap = helpers.keyBy(field.settings.options || [], '_id');
+    if (cellValue && Array.isArray(cellValue) && cellValue.length) {
+        cellValue.forEach((optionId) => {
+            const option = optionsMap[optionId];
+            if (option && option.text) {
+                texts.push(option.text);
+            }
+        });
+    }
+    return texts && texts.length ? texts.join(',') : null;
+}
 
 class TextField extends Field {
-    cellFullText(transformValue, field, references) {
-        let fullText = [];
-        if (!isEmpty(transformValue)) {
-            fullText.push(String(transformValue));
+    isMeetFilter(condition, cellValue) {
+        switch (condition.operation) {
+            case AITableFilterOperation.empty:
+                return isEmpty(cellValue);
+            case AITableFilterOperation.exists:
+                return !isEmpty(cellValue);
+            case AITableFilterOperation.contain:
+                return !isEmpty(cellValue) && stringInclude(cellValue, condition.value);
+            default:
+                return super.isMeetFilter(condition, cellValue);
         }
-        return fullText;
     }
+    compare(cellValue1, cellValue2) {
+        const value1 = cellValueToSortValue(cellValue1);
+        const value2 = cellValueToSortValue(cellValue2);
+        return compareString(value1, value2);
+    }
+}
+function cellValueToSortValue(cellValue) {
+    return (cellValue && cellValue.trim()) || null;
 }
 
 const ViewOperationMap = {
     [AITableFieldType.text]: new TextField(),
     [AITableFieldType.richText]: new TextField(),
     [AITableFieldType.select]: new SelectField(),
-    [AITableFieldType.date]: new TextField(),
-    [AITableFieldType.createdAt]: new TextField(),
-    [AITableFieldType.updatedAt]: new TextField(),
-    [AITableFieldType.number]: new TextField(),
-    [AITableFieldType.rate]: new TextField(),
+    [AITableFieldType.date]: new DateField(),
+    [AITableFieldType.createdAt]: new DateField(),
+    [AITableFieldType.updatedAt]: new DateField(),
+    [AITableFieldType.number]: new NumberField(),
+    [AITableFieldType.rate]: new RateField(),
     [AITableFieldType.link]: new LinkField(),
     [AITableFieldType.member]: new MemberField(),
     [AITableFieldType.progress]: new ProgressField(),
@@ -2645,7 +3011,8 @@ class AITableGridEventService {
         const { container, coordinate, recordId, fieldId, isHoverEdit } = options;
         const { scrollState } = aiTable.context;
         const { rowHeight, columnCount } = coordinate;
-        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, { recordId, fieldId });
+        const cell = [recordId, fieldId];
+        const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, cell);
         const originX = coordinate.getColumnOffset(columnIndex);
         const originY = coordinate.getRowOffset(rowIndex);
         const columnWidth = coordinate.getColumnWidth(columnIndex);
@@ -2940,7 +3307,7 @@ class AITableDomGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + '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                <div\n                    #cell\n                    class=\"grid-cell\"\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                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableDomGrid, isStandalone: true, selector: "ai-table-dom-grid", host: { classAttribute: "ai-table-grid ai-table-dom-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], usesInheritance: true, ngImport: i0, template: "<div class=\"grid-header d-flex\">\n    <div class=\"grid-column-checkbox grid-cell grid-checkbox\">\n        <label thyCheckbox thyLabelText=\"\" [ngModel]=\"isSelectedAll()\" (ngModelChange)=\"toggleSelectAll($event)\"></label>\n    </div>\n    @for (field of gridData().fields; track field._id) {\n        <div\n            class=\"grid-cell grid-field\"\n            #fieldAction\n            [attr.fieldId]=\"field._id\"\n            [ngClass]=\"{ highlight: aiTable.selection().selectedFields.has(field._id) }\"\n            [ngStyle]=\"{ width: field.width + '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: field.width + 'px' }\"\n                >\n                    @switch (field.type) {\n                        @case (AITableFieldType.select) {\n                            @let fieldValue = record.values[field._id];\n                            @let settings = field.settings! | selectSetting;\n                            @let options = settings['options'];\n                            @let optionStyle = settings['option_style'] || AITableSelectOptionStyle.tag;\n                            @let isTagStyle = optionStyle === AITableSelectOptionStyle.tag;\n\n                            @if (!settings['is_multiple'] && fieldValue | selectOption: options; as selectedOption) {\n                                @if (isTagStyle) {\n                                    <select-option class=\"mb-1 mr-1\" [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                } @else {\n                                    <div thyTag class=\"mb-1 mr-1\">\n                                        <select-option [field]=\"field\" [displayOption]=\"selectedOption\"></select-option>\n                                    </div>\n                                }\n                            } @else {\n                                @let maxShowCount = 2;\n\n                                <div class=\"d-flex\">\n                                    @if (fieldValue | selectOptions: options; as selectedOptions) {\n                                        @for (option of selectedOptions; track option!._id; let i = $index) {\n                                            @if (i + 1 <= maxShowCount) {\n                                                @if (isTagStyle) {\n                                                    <select-option\n                                                        class=\"mb-1 mr-1\"\n                                                        [field]=\"field\"\n                                                        [displayOption]=\"option!\"\n                                                    ></select-option>\n                                                } @else {\n                                                    <div thyTag class=\"mb-1 mr-1\">\n                                                        <select-option [field]=\"field\" [displayOption]=\"option!\"></select-option>\n                                                    </div>\n                                                }\n                                            }\n                                        }\n\n                                        @let selectedLength = selectedOptions.length || 0;\n                                        @if (selectedOptions && maxShowCount < selectedLength) {\n                                            @let shape = isTagStyle ? 'pill' : 'rectangle';\n                                            @let isHidden = maxShowCount >= selectedLength;\n\n                                            <thy-tag\n                                                class=\"cursor-pointer\"\n                                                [class.multi-property-value-hidden]=\"isHidden\"\n                                                [thyShape]=\"shape\"\n                                            >\n                                                <span class=\"text-truncate\"> +{{ selectedLength - maxShowCount }} </span>\n                                            </thy-tag>\n                                        }\n                                    }\n                                </div>\n                            }\n                        }\n                        @case (AITableFieldType.date) {\n                            {{ record.values[field._id].timestamp | thyDatePickerFormat }}\n                        }\n                        @case (AITableFieldType.updatedAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.createdAt) {\n                            <div class=\"d-block user-select-none\">\n                                <span class=\"text-truncate\">\n                                    {{ record.values[field._id] | thyDatePickerFormat: 'yyyy-MM-dd HH:mm' }}\n                                </span>\n                            </div>\n                        }\n                        @case (AITableFieldType.rate) {\n                            <thy-rate [ngModel]=\"record.values[field._id]\"></thy-rate>\n                        }\n                        @case (AITableFieldType.link) {\n                            <a\n                                class=\"d-block\"\n                                target=\"_blank\"\n                                [href]=\"record.values[field._id]?.url\"\n                                thyStopPropagation\n                                thyFlexibleText\n                                [thyTooltipContent]=\"record.values[field._id]?.text\"\n                            >\n                                {{ record.values[field._id]?.text }}\n                            </a>\n                        }\n                        @case (AITableFieldType.progress) {\n                            <thy-progress\n                                class=\"w-100\"\n                                [thyValue]=\"record.values[field._id] || 0\"\n                                [thySize]=\"record.values[field._id]?.config?.size || 'md'\"\n                                [thyMax]=\"record.values[field._id]?.config?.max || 100\"\n                                [thyType]=\"record.values[field._id]?.config?.progressType || 'success'\"\n                            >\n                                <span> {{ record.values[field._id] || 0 }}{{ record.values[field._id]?.config?.suffix || '%' }} </span>\n                            </thy-progress>\n                        }\n                        @case (AITableFieldType.member) {\n                            @let settings = field.settings! | memberSetting;\n\n                            @if (!settings!['is_multiple']) {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                @if (recordValues && recordValues.length) {\n                                    <thy-avatar\n                                        [thyName]=\"recordValues[0].display_name!\"\n                                        [thySrc]=\"recordValues[0].avatar!\"\n                                        thySize=\"xs\"\n                                        thyShowName=\"true\"\n                                    ></thy-avatar>\n                                }\n                            } @else {\n                                @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                                <thy-avatar-list thyAvatarSize=\"xs\">\n                                    @for (item of recordValues; track $index) {\n                                        <thy-avatar [thyName]=\"item.display_name!\" [thySrc]=\"item.avatar!\"></thy-avatar>\n                                    }\n                                </thy-avatar-list>\n                            }\n                        }\n                        @case (AITableFieldType.createdBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @case (AITableFieldType.updatedBy) {\n                            @let recordValues = record.values[field._id] | user: aiReferences()!;\n\n                            @if (recordValues && recordValues.length) {\n                                <thy-avatar\n                                    [thyName]=\"recordValues[0].display_name!\"\n                                    [thySrc]=\"recordValues[0].avatar!\"\n                                    thySize=\"xs\"\n                                    thyShowName=\"true\"\n                                ></thy-avatar>\n                            }\n                        }\n                        @default {\n                            <span class=\"text-truncate\"> {{ record.values[field._id] }}</span>\n                        }\n                    }\n                    <div class=\"autofill-container\"></div>\n                </div>\n            }\n            <div class=\"grid-column-blank\"></div>\n        </div>\n    }\n    <div class=\"grid-row-insert grid-row cursor-pointer\" (click)=\"addRecord()\">\n        <thy-icon thyIconName=\"plus\"></thy-icon>\n    </div>\n</div>\n\n<div #activeBorder class=\"active-border\"></div>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SelectOptionPipe, name: "selectOption" }, { kind: "pipe", type: SelectOptionsPipe, name: "selectOptions" }, { kind: "component", type: ThyTag, selector: "thy-tag,[thyTag]", inputs: ["thyTag", "thyShape", "thyColor", "thyTheme", "thySize", "thyHoverable"] }, { kind: "ngmodule", type: ThyPopoverModule }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyRate, selector: "thy-rate", inputs: ["thyCount", "thyDisabled", "thyAllowHalf", "thyAllowClear", "thyTooltips", "thyIconTemplate"], outputs: ["thyItemHoverChange"] }, { kind: "component", type: ThyProgress, selector: "thy-progress", inputs: ["thyType", "thySize", "thyValue", "thyMax", "thyTips", "thyShape", "thyGapDegree", "thyGapPosition", "thyStrokeWidth"] }, { kind: "pipe", type: ThyDatePickerFormatPipe, name: "thyDatePickerFormat" }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }, { kind: "directive", type: ThyStopPropagationDirective, selector: "[thyStopPropagation]", inputs: ["thyStopPropagation"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyCheckboxModule }, { kind: "component", type: i3$1.ThyCheckbox, selector: "thy-checkbox,[thy-checkbox],[thyCheckbox]", inputs: ["thyIndeterminate"] }, { kind: "ngmodule", type: ThyAvatarModule }, { kind: "component", type: i4.ThyAvatar, selector: "thy-avatar", inputs: ["thyShowName", "thySrc", "thyName", "thySize", "thyShowRemove", "thyRemovable", "thyImgClass", "thyDisabled", "thyLoading", "thyFetchPriority"], outputs: ["thyOnRemove", "thyRemove", "thyError"] }, { kind: "component", type: i4.ThyAvatarList, selector: "thy-avatar-list", inputs: ["thyMode", "thyAvatarSize"] }, { kind: "pipe", type: IsSelectRecordPipe, name: "isSelectRecord" }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "pipe", type: UserPipe, name: "user" }, { kind: "pipe", type: SelectSettingPipe, name: "selectSetting" }, { kind: "pipe", type: MemberSettingPipe, name: "memberSetting" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableDomGrid, decorators: [{
             type: Component,
@@ -2976,7 +3343,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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: field.width + '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                <div\n                    #cell\n                    class=\"grid-cell\"\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                    [attr.type]=\"[field.type]\"\n                    [attr.fieldId]=\"[field._id]\"\n                    [attr.recordId]=\"[record._id]\"\n                    [ngStyle]=\"{ width: field.width + '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, 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: field.width + '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: field.width + '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" }]
         }] });
 
 const KO_CONTAINER_TOKEN = new InjectionToken('KO_CONTAINER_TOKEN');
@@ -5391,28 +5758,9 @@ const createCells = (config) => {
                     break;
                 }
                 case AITableRowType.record: {
-                    let background = colors.white;
                     const fieldId = field._id;
-                    const isCheckedRow = aiTable.selection().selectedRecords.has(row._id);
-                    const isSelected = aiTable.selection().selectedFields.has(fieldId);
-                    const isHoverRow = isHover && targetName !== AI_TABLE_FIELD_HEAD;
-                    const activeCell = AITable.getActiveCell(aiTable);
-                    const isSiblingActiveCell = recordId === activeCell?.recordId && fieldId !== activeCell?.fieldId;
-                    const isActiveCell = recordId === activeCell?.recordId;
-                    let matchedCellsMap = {};
-                    aiTable.matchedCells().forEach((key) => {
-                        matchedCellsMap[key] = true;
-                    });
-                    const isMatchedCell = matchedCellsMap[`${recordId}-${fieldId}`];
-                    if (isMatchedCell) {
-                        background = colors.itemMatchBgColor;
-                    }
-                    else if (isCheckedRow || isSelected || isSiblingActiveCell) {
-                        background = colors.itemActiveBgColor;
-                    }
-                    else if (isHoverRow && !isActiveCell) {
-                        background = colors.gray80;
-                    }
+                    const cell = [recordId, fieldId];
+                    let background = getCellBackground(cell, isHover, targetName, aiTable);
                     recordRowLayout.init({
                         x,
                         y,
@@ -5426,8 +5774,8 @@ const createCells = (config) => {
                     recordRowLayout.render({
                         row,
                         style: { fill: background },
-                        isHoverRow,
-                        isCheckedRow
+                        isHoverRow: isHoverRecord(isHover, targetName),
+                        isCheckedRow: isSelectedRecord(recordId, aiTable)
                     });
                     const { width, offset } = getCellHorizontalPosition({
                         columnIndex,
@@ -5450,7 +5798,7 @@ const createCells = (config) => {
                         cellValue,
                         transformValue,
                         references,
-                        isActive: isSelected,
+                        isActive: isSelectedField(fieldId, aiTable),
                         style,
                         colors
                     };
@@ -5472,6 +5820,81 @@ const createCells = (config) => {
         }
     }
 };
+const getCellBackground = (cell, isHover, targetName, aiTable) => {
+    const colors = AITable.getColors();
+    const [recordId, fieldId] = cell;
+    let background = colors.white;
+    const _isSelectedRecord = isSelectedRecord(recordId, aiTable);
+    const _isSelectedField = isSelectedField(fieldId, aiTable);
+    const _isSiblingActiveCell = isSiblingActiveCell(cell, aiTable);
+    const _isActiveCell = isActiveCell(cell, aiTable);
+    const _isSelectedCell = isSelectedCell(cell, aiTable);
+    const _isMatchedCell = isMatchedCell(cell, aiTable);
+    const _isHoverRecord = isHoverRecord(isHover, targetName);
+    if (_isMatchedCell) {
+        background = colors.itemMatchBgColor;
+    }
+    else if (_isSelectedRecord || _isSelectedField || _isSiblingActiveCell || (_isSelectedCell && !_isActiveCell)) {
+        background = colors.itemActiveBgColor;
+    }
+    else if (_isHoverRecord && !_isActiveCell) {
+        background = colors.gray80;
+    }
+    return background;
+};
+const isActiveCell = (cell, aiTable) => {
+    let isActive = false;
+    const activeCell = AITable.getActiveCell(aiTable);
+    if (Array.isArray(activeCell) && !!activeCell.length) {
+        const [activeCellRecordId, activeCellFieldId] = activeCell;
+        const [recordId, fieldId] = cell;
+        if (recordId === activeCellRecordId && fieldId === activeCellFieldId) {
+            isActive = true;
+        }
+    }
+    return isActive;
+};
+const isSiblingActiveCell = (cell, aiTable) => {
+    let isSiblingCell = false;
+    const activeCell = AITable.getActiveCell(aiTable);
+    if (Array.isArray(activeCell) && !!activeCell.length) {
+        const [recordId, fieldId] = cell;
+        const [activeCellRecordId, activeCellFieldId] = activeCell;
+        const selectedCells = aiTable.selection().selectedCells;
+        isSiblingCell =
+            selectedCells.size === 1 &&
+                selectedCells.has(`${activeCellRecordId}:${activeCellFieldId}`) &&
+                recordId === activeCellRecordId &&
+                fieldId !== activeCellFieldId;
+    }
+    return isSiblingCell;
+};
+const isMatchedCell = (cell, aiTable) => {
+    const [recordId, fieldId] = cell;
+    let matchedCellsMap = {};
+    aiTable.matchedCells().forEach((key) => {
+        matchedCellsMap[key] = true;
+    });
+    const isMatchedCell = matchedCellsMap[`${recordId}:${fieldId}`];
+    return isMatchedCell;
+};
+const isSelectedCell = (cell, aiTable) => {
+    const [recordId, fieldId] = cell;
+    const selectedCells = aiTable.selection().selectedCells;
+    const isSelectedCell = selectedCells.has(`${recordId}:${fieldId}`);
+    return isSelectedCell;
+};
+const isSelectedField = (fieldId, aiTable) => {
+    const selectedFields = aiTable.selection().selectedFields;
+    return selectedFields.has(fieldId);
+};
+const isSelectedRecord = (recordId, aiTable) => {
+    const selectedRecords = aiTable.selection().selectedRecords;
+    return selectedRecords.has(recordId);
+};
+const isHoverRecord = (isHover, targetName) => {
+    return isHover && targetName !== AI_TABLE_FIELD_HEAD;
+};
 
 class AITableCells {
     constructor() {
@@ -6183,8 +6606,11 @@ const createActiveCellBorder = (config) => {
     const totalColumnCount = visibleColumns.length;
     let activeCellBorder = null;
     let frozenActiveCellBorder = null;
-    if (activeCell != null) {
-        const { fieldId } = activeCell;
+    if (Array.isArray(activeCell) &&
+        !!activeCell.length &&
+        aiTable.context.visibleRowsIndexMap().has(activeCell[0]) &&
+        aiTable.context.visibleColumnsMap().has(activeCell[1])) {
+        const fieldId = activeCell[1];
         const { rowIndex, columnIndex } = AITable.getCellIndex(aiTable, activeCell);
         const checkIsVisible = (rowIndex, columnIndex) => {
             if (columnIndex < frozenColumnCount) {
@@ -6243,6 +6669,7 @@ class AITableRenderer {
         this.config = input.required();
         this.koMousemove = output();
         this.koMousedown = output();
+        this.koMouseup = output();
         this.koContextmenu = output();
         this.koWheel = output();
         this.koClick = output();
@@ -6377,6 +6804,9 @@ class AITableRenderer {
     stageMousedown(e) {
         this.koMousedown.emit(e);
     }
+    stageMouseup(e) {
+        this.koMouseup.emit(e);
+    }
     stageContextmenu(e) {
         this.koContextmenu.emit(e);
     }
@@ -6387,7 +6817,7 @@ class AITableRenderer {
         this.koDblclick.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -6404,13 +6834,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         AITableAddField,
                         AITableHoverRowHeads,
                         AITableOtherRows
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableGrid extends AITableGridBase {
     constructor() {
         super();
         this.viewContainerRef = inject(ViewContainerRef);
+        this.isSelecting = false;
+        this.selectionStart = null;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
         this.containerRect = signal({ width: 0, height: 0 });
         this.hasContainerRect = computed(() => {
@@ -6550,6 +6982,16 @@ class AITableGrid extends AITableGridBase {
             handleMouseStyle(curMousePosition.realTargetName, curMousePosition.areaType, this.containerElement());
             context.setPointPosition(curMousePosition);
             this.timer = null;
+            if (this.isSelecting) {
+                const { fieldId, recordId } = getDetailByTargetName(curMousePosition.realTargetName);
+                if (fieldId && recordId) {
+                    const startCell = this.selectionStart;
+                    const endCell = [recordId, fieldId];
+                    if (startCell && !!startCell.length) {
+                        this.aiTableGridSelectionService.selectCells(startCell, endCell);
+                    }
+                }
+            }
         });
     }
     stageMousedown(e) {
@@ -6559,7 +7001,7 @@ class AITableGrid extends AITableGridBase {
         if (mouseEvent.button === AITableMouseDownType.Right &&
             recordId &&
             fieldId &&
-            this.aiTable.selection().selectedRecords.has(recordId)) {
+            (this.aiTable.selection().selectedRecords.has(recordId) || this.aiTable.selection().selectedCells.has(`${recordId}:${fieldId}`))) {
             return;
         }
         switch (targetName) {
@@ -6573,7 +7015,9 @@ class AITableGrid extends AITableGridBase {
                 if (!recordId || !fieldId)
                     return;
                 this.aiTableGridEventService.closeCellEditor();
-                this.aiTableGridSelectionService.selectCell(recordId, fieldId);
+                const selectionStart = [recordId, fieldId];
+                this.dragSelectionState(true, selectionStart);
+                this.aiTableGridSelectionService.selectCells(selectionStart);
                 return;
             case AI_TABLE_ROW_ADD_BUTTON:
             case AI_TABLE_FIELD_ADD_BUTTON:
@@ -6584,6 +7028,9 @@ class AITableGrid extends AITableGridBase {
                 this.aiTableGridSelectionService.clearSelection();
         }
     }
+    stageMouseup(e) {
+        this.dragSelectionState(false, null);
+    }
     stageContextmenu(e) {
         const mouseEvent = e.event.evt;
         mouseEvent.preventDefault();
@@ -6725,11 +7172,17 @@ class AITableGrid extends AITableGridBase {
         fromEvent(document, 'mousedown', { passive: true })
             .pipe(filter((e) => e.target instanceof Element &&
             !this.containerElement().contains(e.target) &&
-            !(e.target.closest(AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS) && this.aiTable.selection().selectedRecords.size > 0)), takeUntilDestroyed(this.destroyRef))
+            !(e.target.closest(AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS) &&
+                AITable.getSelectedRecordIds(this.aiTable).length > 0)), takeUntilDestroyed(this.destroyRef))
             .subscribe(() => {
+            this.dragSelectionState(false, null);
             this.aiTableGridSelectionService.clearSelection();
         });
     }
+    dragSelectionState(isSelecting, selectionStart) {
+        this.isSelecting = isSelecting;
+        this.selectionStart = selectionStart;
+    }
     verticalScroll(e) {
         const { scrollTop } = e.target;
         this.aiTable.context.setScrollState({
@@ -6801,18 +7254,18 @@ class AITableGrid extends AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableGridMatchCellService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koContextmenu", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableGridMatchCellService], 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        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableGridMatchCellService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
+                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService, AITableGridMatchCellService], 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        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsMultiplePipe, AITableFieldPropertyEditor, AITableFieldType, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridMatchCellService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, ViewOperationMap, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, idCreator, idsCreator, imageCache, isArrayField, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, textDataCache, transformCellValue };
+export { AITable, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableCheckType, AITableContextMenu, AITableDomGrid, AITableFieldIsMultiplePipe, AITableFieldPropertyEditor, AITableFieldType, AITableFilterOperation, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridMatchCellService, AITableGridSelectionService, AITableMemberType, AITableMouseDownType, AITableQueries, AITableRenderer, AITableRowColumnType, AITableRowType, AITableSelectOptionStyle, AITableStatType, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_Width, AI_TABLE_PROHIBIT_CLEAR_SELECTION_CLASS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AbstractEditCellEditor, AddOutlinedPath, Check, Colors, ColumnCalendarFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DepartmentOutlinedPath, Direction, FONT_SIZE_SM, FieldOptions, GRID_CELL_EDITOR_MAP, IsSelectRecordPipe, LinkCellEditorComponent, MIN_COLUMN_WIDTH, MOUSEOVER_EDIT_TYPE, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, ProgressEditorComponent, RatingCellEditorComponent, RendererContext, RowHeight, SelectCellEditorComponent, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextMeasure, Unchecked, UserPipe, ViewOperationMap, WebOutlinedPath, buildGridData, buildGridLinearRows, castToString, compareNumber, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesMap, getDefaultFieldValue, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getHoverEditorBoxOffset, getHoverEditorSpace, getMousePosition, getPlaceHolderCellsConfigs, getTargetName, getTextWidth, getVisibleRangeInfo, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isArrayField, isEmpty, isMac, isNumberFiled, isSameFieldOption, isSystemField, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, scrollMax, setMouseStyle, shortIdCreator, shortIdsCreator, stringInclude, textDataCache, transformCellValue, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map