@ai-table/grid 0.4.0 → 0.4.2

package/fesm2022/ai-table-grid.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Renderer2, Input, ChangeDetectorRef, ViewChild, model, untracked, Pipe, booleanAttribute, DestroyRef, Injectable, NgZone, ViewContainerRef, viewChild, afterNextRender } from '@angular/core';
+import { InjectionToken, input, EventEmitter, inject, ElementRef, effect, Output, ChangeDetectionStrategy, Component, signal, computed, output, Renderer2, Input, ChangeDetectorRef, ViewChild, model, untracked, Pipe, booleanAttribute, viewChild, ViewContainerRef, DestroyRef, Injectable, NgZone, afterNextRender } from '@angular/core';
 import Konva from 'konva';
 import { Shape } from 'konva/lib/Shape';
 import { Sprite } from 'konva/lib/shapes/Sprite';
@@ -24,12 +24,13 @@ import { TextPath } from 'konva/lib/shapes/TextPath';
 import { Transformer } from 'konva/lib/shapes/Transformer';
 import { Wedge } from 'konva/lib/shapes/Wedge';
 import * as i1$1 from 'ngx-tethys/popover';
-import { ThyPopoverRef, ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
+import { ThyPopoverRef, ThyPopover, ThyPopoverDirective, ThyPopoverModule } from 'ngx-tethys/popover';
 import { AITableFieldGroup, AITableFieldType, AITableRecordHeightType, DragType, AITableRowColumnType, isUndefinedOrNull, idCreator as idCreator$1, isUrl, isEmpty, AITableFilterOperation, AttachmentFieldBase, AITableStatType, DateFieldBase, DEFAULT_FIELD_STAT_TYPE_ITEMS, isDateValid, isDateAndReturnDate, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, isProgressAndReturnValue, RateFieldBase, RichTextFieldBase, SelectFieldBase, AITableSelectOptionStyle, generateOptionsByTexts, TextFieldBase, CheckboxFieldBase, FieldModelBaseMap, numberFormat, DragDirection, AI_TABLE_MIN_FROZEN_COLUMN_COUNT } from '@ai-table/utils';
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
 import * as _ from 'lodash';
 import ___default, { isNumber, includes, values, isString, isArray as isArray$1, isObject } from 'lodash';
+import { coerceBooleanProperty, helpers, isArray, TinyDate, hexToRgb } from 'ngx-tethys/util';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { ThyDatePicker, ThyDatePickerFormatPipe } from 'ngx-tethys/date-picker';
@@ -46,7 +47,6 @@ import * as i2 from 'ngx-tethys/form';
 import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator } from 'ngx-tethys/form';
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { ThyInputNumber } from 'ngx-tethys/input-number';
-import { helpers, isArray, TinyDate, hexToRgb } from 'ngx-tethys/util';
 import { isKeyHotkey } from 'is-hotkey';
 import { LRUCache } from 'lru-cache';
 import { differenceInDays, fromUnixTime, differenceInMonths, subDays } from 'date-fns';
@@ -65,6 +65,7 @@ import { of, Subject, fromEvent, debounceTime, animationFrames, filter } from 'r
 import { ThyDivider } from 'ngx-tethys/divider';
 import * as i2$2 from 'ngx-tethys/checkbox';
 import { ThyCheckbox, ThyCheckboxModule } from 'ngx-tethys/checkbox';
+import { ThySlideRef, ThySlideService } from 'ngx-tethys/slide';
 import * as i3$1 from 'ngx-tethys/avatar';
 import { ThyAvatarModule } from 'ngx-tethys/avatar';
 import { ThyProgress } from 'ngx-tethys/progress';
@@ -942,6 +943,7 @@ const AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT = AI_TABLE_FIELD_STAT_INNER_HEIGHT +
 const AI_TABLE_GROUP_MAX_LEVEL = 3;
 const AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON = 'AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON';
 const AI_TABLE_ROW_GROUP_OFFSET = 16;
+const AI_TABLE_EXPAND_RECORD_ICON = 'AI_TABLE_EXPAND_RECORD_ICON';
 const AI_TABLE_SHADOW_DEFAULT_WIDTH = 8;
 const AI_TABLE_CELL_MULTI_ITEM_DEFAULT_MIN_WIDTH = 60;
 const AI_TABLE_CELL_MULTI_SELECT_ITEM_TAG_MIN_WIDTH = 40;
@@ -1014,6 +1016,7 @@ const RowDragPath = `M6,3 C6.55228475,3 7,2.55228475 7,2 C7,1.44771525 6.5522847
 const AngleDownPath = `M7.97815,11.99732 L7.9728,12.00267 L2.2998,6.33067 L3.1298,5.49967 L7.97807731,10.3479473 L12.8255,5.49967 L13.6565,6.33067 L7.9835,12.00267 L7.97815,11.99732 Z`;
 const AngleRightPath = `M4.72665,3.40415 L5.55765,2.57315 L11.22965,8.24615 L5.55765,13.92985 L4.72665,13.09985 L9.57465,8.25285`;
 const IconPathMap = {};
+const ExpandRecordPath = `M14.0865,2.5978 L14.0865,7.1238 C14.0865,7.4548 14.3545,7.7238 14.6855,7.7238 C15.0175,7.7238 15.2865,7.4548 15.2865,7.1238 L15.2865,1.2008 C15.2865,0.8698 15.0175,0.6018 14.6855,0.6018 L8.7615,0.6028 C8.4305,0.6028 8.1625,0.8718 8.1625,1.2028 C8.1625,1.5338 8.4305,1.8028 8.7615,1.8028 L13.1805,1.8028 L9.8265,5.0068 C9.5865,5.2358 9.5775,5.6158 9.8065,5.8548 C10.0355,6.0948 10.4155,6.1038 10.6555,5.8748 L14.0865,2.5978 Z M1.8031,13.2924 L1.8031,8.7664 C1.8031,8.4354 1.5341,8.1664 1.2031,8.1664 C0.8721,8.1664 0.6031,8.4354 0.6031,8.7664 L0.6031,14.6894 C0.6031,15.0204 0.8721,15.2884 1.2031,15.2884 C1.2061,15.2884 1.2081,15.2874 1.2101,15.2874 L7.1271,15.2874 C7.4581,15.2874 7.7271,15.0194 7.7271,14.6874 C7.7271,14.3564 7.4581,14.0874 7.1271,14.0874 L2.7081,14.0874 L6.0631,10.8834 C6.3021,10.6554 6.3111,10.2754 6.0821,10.0354 C5.8541,9.7954 5.4741,9.7864 5.2341,10.0154 L1.8031,13.2924 Z`;
 
 const DEFAULT_FONT_SIZE = 14;
 const GROUP_STAT_DEFAULT_FONT_SIZE = 12;
@@ -1667,6 +1670,7 @@ class RendererContext {
 class AbstractEditCellEditor {
     constructor() {
         this.recordHeight = input(AI_TABLE_RECORD_HEIGHT_LEVELS.low);
+        this.autoFocus = input(true, { transform: coerceBooleanProperty });
         this.updateFieldValues = output();
         this.field = computed(() => {
             return this.aiTable.fieldsMap()[this.fieldId];
@@ -1725,7 +1729,7 @@ class AbstractEditCellEditor {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AbstractEditCellEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AbstractEditCellEditor, isStandalone: true, selector: "abstract-edit-cell", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: false, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: false, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: false, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: false, isRequired: true, transformFunction: null }, recordHeight: { classPropertyName: "recordHeight", publicName: "recordHeight", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, ngImport: i0, template: ``, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AbstractEditCellEditor, decorators: [{
             type: Component,
@@ -1793,7 +1797,7 @@ class DateCellEditorComponent extends AbstractEditCellEditor {
             [thyShowShortcut]="true"
             [thyHasBackdrop]="false"
             [thyShowTime]="false"
-            [thyOpen]="true"
+            [thyOpen]="autoFocus()"
             thyFormat="yyyy-MM-dd"
         >
         </thy-date-picker>
@@ -1815,7 +1819,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             [thyShowShortcut]="true"
             [thyHasBackdrop]="false"
             [thyShowTime]="false"
-            [thyOpen]="true"
+            [thyOpen]="autoFocus()"
             thyFormat="yyyy-MM-dd"
         >
         </thy-date-picker>
@@ -1973,7 +1977,7 @@ class LinkCellEditorComponent extends AbstractEditCellEditor {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: LinkCellEditorComponent, isStandalone: true, selector: "link-cell-editor", host: { classAttribute: "ai-table-link-editor" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ThyAutofocusDirective, selector: "input[thyAutofocus],textarea[thyAutofocus]", inputs: ["thyAutofocus", "thyAutoSelect"] }, { kind: "directive", type: ThyEnterDirective, selector: "[thyEnter]", outputs: ["thyEnter"] }, { kind: "component", type: ThyInputGroup, selector: "thy-input-group", inputs: ["thyAppendText", "thyAppendTextTranslateKey", "thyPrependText", "thyPrependTextTranslateKey", "thySize"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "directive", type: i2$1.ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "ngmodule", type: ThyInputModule }, { kind: "directive", type: i3.ThyInputDirective, selector: "input[thyInput], select[thyInput], textarea[thyInput]", inputs: ["thySize"], exportAs: ["thyInput"] }, { kind: "ngmodule", type: ThyFlexibleTextModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: LinkCellEditorComponent, decorators: [{
             type: Component,
@@ -1988,7 +1992,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ThyFlexibleTextModule
                     ], host: {
                         class: 'ai-table-link-editor'
-                    }, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"true\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n" }]
+                    }, template: "<thy-input-group class=\"link-input-group h-100\" thySize=\"lg\">\n    <input\n        #inputElement\n        class=\"h-100\"\n        class=\"link-input\"\n        thyInput\n        thySize=\"md\"\n        [thyAutofocus]=\"autoFocus()\"\n        [(ngModel)]=\"text\"\n        (blur)=\"blur($event)\"\n        (thyEnter)=\"updateValue()\"\n    />\n    <ng-template #suffix>\n        <a\n            thyAction\n            thyIcon=\"link-insert\"\n            [thyTooltip]=\"linkTooltip()\"\n            class=\"font-size-base edit-icon\"\n            [class.active]=\"isOpened\"\n            href=\"javascript:;\"\n            (click)=\"openEdit()\"\n        ></a>\n    </ng-template>\n</thy-input-group>\n" }]
         }], propDecorators: { inputElement: [{
                 type: ViewChild,
                 args: ['inputElement', { static: false }]
@@ -3533,6 +3537,49 @@ function selectField(aiTable, fieldId) {
         selectedEndCell: null
     });
 }
+function getFieldIconPath(field) {
+    let data = null;
+    switch (field.type) {
+        case AITableFieldType.text:
+            data = ColumnTextFilledPath;
+            break;
+        case AITableFieldType.richText:
+            data = ColumnRichTextFilledPath;
+            break;
+        case AITableFieldType.select:
+            data = field.settings?.is_multiple ? ColumnMultipleFillPath : ColumnSelectFilledPath;
+            break;
+        case AITableFieldType.date:
+        case AITableFieldType.createdAt:
+        case AITableFieldType.updatedAt:
+            data = ColumnCalendarFilledPath;
+            break;
+        case AITableFieldType.number:
+            data = ColumnNumberFilledPath;
+            break;
+        case AITableFieldType.link:
+            data = ColumnLinkOutlinedPath;
+            break;
+        case AITableFieldType.rate:
+            data = ColumnRatingFilledPath;
+            break;
+        case AITableFieldType.member:
+        case AITableFieldType.createdBy:
+        case AITableFieldType.updatedBy:
+            data = ColumnMemberFilledPath;
+            break;
+        case AITableFieldType.progress:
+            data = ColumnProgressFilledPath;
+            break;
+        case AITableFieldType.attachment:
+            data = AttachmentPath;
+            break;
+        case AITableFieldType.checkbox:
+            data = ColumnCheckboxFilledPath;
+            break;
+    }
+    return data;
+}
 
 const aiTableFragmentAttribute = 'ai-table-fragment';
 const buildClipboardData = (aiTable) => {
@@ -7733,46 +7780,7 @@ class AITableFieldIcon {
         this.config = input.required();
         this.iconConfig = computed(() => {
             const { field, x, y, width, height, fill, path } = this.config();
-            let data = path;
-            switch (field.type) {
-                case AITableFieldType.text:
-                    data = ColumnTextFilledPath;
-                    break;
-                case AITableFieldType.richText:
-                    data = ColumnRichTextFilledPath;
-                    break;
-                case AITableFieldType.select:
-                    data = field.settings?.is_multiple ? ColumnMultipleFillPath : ColumnSelectFilledPath;
-                    break;
-                case AITableFieldType.date:
-                case AITableFieldType.createdAt:
-                case AITableFieldType.updatedAt:
-                    data = ColumnCalendarFilledPath;
-                    break;
-                case AITableFieldType.number:
-                    data = ColumnNumberFilledPath;
-                    break;
-                case AITableFieldType.link:
-                    data = ColumnLinkOutlinedPath;
-                    break;
-                case AITableFieldType.rate:
-                    data = ColumnRatingFilledPath;
-                    break;
-                case AITableFieldType.member:
-                case AITableFieldType.createdBy:
-                case AITableFieldType.updatedBy:
-                    data = ColumnMemberFilledPath;
-                    break;
-                case AITableFieldType.progress:
-                    data = ColumnProgressFilledPath;
-                    break;
-                case AITableFieldType.attachment:
-                    data = AttachmentPath;
-                    break;
-                case AITableFieldType.checkbox:
-                    data = ColumnCheckboxFilledPath;
-                    break;
-            }
+            const data = getFieldIconPath(field) || path;
             return {
                 x,
                 y,
@@ -8539,6 +8547,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
+class AITableExpandRecord {
+    constructor() {
+        this.config = input.required();
+        this.shouldShowIcon = computed(() => {
+            const { aiTable, rowStartIndex, rowStopIndex } = this.config();
+            const context = aiTable.context;
+            if (!context)
+                return false;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const row = context.linearRows()[pointRowIndex];
+            return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
+        });
+        this.expandIconConfig = computed(() => {
+            const { aiTable, coordinate } = this.config();
+            const context = aiTable.context;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const rowHeight = coordinate.rowHeight;
+            const firstColumnWidth = coordinate.getColumnWidth(0);
+            const firstColumnOffset = coordinate.getColumnOffset(0);
+            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
+            const iconSize = AI_TABLE_ICON_COMMON_SIZE;
+            const padding = 8;
+            const x = firstColumnOffset + firstColumnWidth - iconSize - padding;
+            const row = context.linearRows()[pointRowIndex];
+            const recordId = row?._id;
+            return {
+                x,
+                y: y + (rowHeight - iconSize) / 2,
+                data: ExpandRecordPath,
+                fill: Colors.gray600,
+                name: recordId
+                    ? generateTargetName({
+                        targetName: AI_TABLE_EXPAND_RECORD_ICON,
+                        recordId: recordId,
+                        mouseStyle: 'pointer'
+                    })
+                    : undefined
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableExpandRecord, isStandalone: true, selector: "ai-table-expand-record", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+        <ko-group>
+            @if (shouldShowIcon()) {
+                <ai-table-icon [config]="expandIconConfig()"></ai-table-icon>
+            }
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"], outputs: ["koClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableExpandRecord, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-expand-record',
+                    template: `
+        <ko-group>
+            @if (shouldShowIcon()) {
+                <ai-table-icon [config]="expandIconConfig()"></ai-table-icon>
+            }
+        </ko-group>
+    `,
+                    imports: [KoContainer, AITableIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }] });
+
 class AITableBackground {
     constructor() {
         this.config = input.required();
@@ -10406,6 +10479,16 @@ class AITableRenderer {
                 keywordsMatchedCells
             };
         });
+        this.expandRecordConfig = computed(() => {
+            const { aiTable, coordinate } = this.config();
+            const { rowStartIndex, rowStopIndex } = this.visibleRangeInfo();
+            return {
+                aiTable,
+                coordinate,
+                rowStartIndex,
+                rowStopIndex
+            };
+        });
         this.fillHandleConfig = computed(() => {
             return {
                 aiTable: this.config().aiTable,
@@ -10478,7 +10561,7 @@ class AITableRenderer {
         this.isHoverStatContainer.set(isHover);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koMouseup: "koMouseup", koContextmenu: "koContextmenu", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick", koMouseleave: "koMouseleave", onScrollPosition: "onScrollPosition" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableCoverCellEntry, selector: "ai-table-cover-cell-entry", inputs: ["config", "onlyDisplayBorder"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }, { kind: "component", type: AITableFillHandle, selector: "ai-table-fill-handle", inputs: ["config"] }, { kind: "component", type: AITableFieldStats, selector: "ai-table-column-stats", inputs: ["config"], outputs: ["hover"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }, { kind: "component", type: AITableFrozenGroups, selector: "ai-table-frozen-groups", inputs: ["config"] }, { kind: "component", type: AITableGroups, selector: "ai-table-groups", inputs: ["config"] }, { kind: "component", type: AITableShadow, selector: "ai-table-shadow", inputs: ["config"] }, { kind: "component", type: AITableExpandRecord, selector: "ai-table-expand-record", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -10502,8 +10585,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         AITableFrozenGroups,
                         AITableGroups,
                         AITableShadow,
-                        AITableFrozenGroups
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                        AITableFrozenGroups,
+                        AITableExpandRecord
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koMouseup)=\"stageMouseup($event)\"\n    (koContextmenu)=\"stageContextmenu($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n    (koMouseleave)=\"stageMouseleave($event)\"\n    (koWheel)=\"stageWheel($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <!-- \u53F3\u4FA7\u975E\u56FA\u5B9A\u5217\u7684\u533A\u57DF -->\n            <ko-group [config]=\"commonGroupConfig()\">\n                <!-- \u53F3\u4FA7x,y\u6EDA\u52A8\u533A\u57DF\u7684 cell -->\n                <ko-group #commonOffsetGroup [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                    <ai-table-groups [config]=\"cellsConfig()\"></ai-table-groups>\n                </ko-group>\n\n                <!-- \u53F3\u4FA7\u8868\u5934head \u548C \u65B0\u589E\u5217 + \u533A\u57DF -->\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field [config]=\"columnHeadFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 y\u6EDA\u52A8\u533A\u57DF\u7684cell -->\n            <ko-group [config]=\"frozenCommonGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                    <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                    @if (!hiddenIndexColumn()) {\n                        <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                    }\n                    <ai-table-frozen-groups [config]=\"cellsConfig()\"></ai-table-frozen-groups>\n                    <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n                    <ai-table-expand-record [config]=\"expandRecordConfig()\"></ai-table-expand-record>\n                </ko-group>\n            </ko-group>\n\n            <!-- \u5DE6\u4FA7\u56FA\u5B9A\u5217 \u8868\u5934 + \u8868\u5934\u53F3\u4FA7\u5206\u5272\u9634\u5F71 -->\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnFrozenHeadFieldConfig()\"></ai-table-frozen-column-heads>\n                <ai-table-shadow [config]=\"fieldHeadShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().expandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (!isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n            <ko-group [config]=\"frozenCoverAttachGroupConfig()\">\n                <ko-group #frozenCoverAttachOffsetGroup [config]=\"offsetYConfig()\">\n                    <ai-table-cover-cell-entry [config]=\"cellsConfig()\"></ai-table-cover-cell-entry>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                    @if (showExpandCellBorder().frozenExpandCellBorder) {\n                        <ai-table-cover-cell-entry [config]=\"cellsConfig()\" [onlyDisplayBorder]=\"true\"></ai-table-cover-cell-entry>\n                    }\n                    @if (isLastSelectedCellInFrozenColumn()) {\n                        <ai-table-fill-handle [config]=\"fillHandleConfig()\"></ai-table-fill-handle>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n\n        <ko-group [config]=\"statGroupConfig()\">\n            <ai-table-background [config]=\"columnFieldStatsBgConfig()\"></ai-table-background>\n            <ko-group>\n                <ai-table-column-stats\n                    [config]=\"columnFrozenFieldStatsConfig()\"\n                    (hover)=\"onStatContainerHover($event)\"\n                ></ai-table-column-stats>\n            </ko-group>\n            <ko-group [config]=\"statCommonGroupConfig()\">\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-stats\n                        [config]=\"columnFieldStatsConfig()\"\n                        (hover)=\"onStatContainerHover($event)\"\n                    ></ai-table-column-stats>\n                </ko-group>\n            </ko-group>\n            <ko-group>\n                <ai-table-shadow [config]=\"statShadowConfig()\"></ai-table-shadow>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableCellRate extends CoverCellBase {
@@ -11941,6 +12025,47 @@ function toggleSelectAllRecords(aiTable, checked) {
         clearSelection(aiTable);
     }
 }
+function getNextRecordByActiveCell(aiTable) {
+    const records = aiTable.gridData().records;
+    const visibleRowsIndexMap = aiTable.context.visibleRowsIndexMap();
+    const currentId = aiTable.selection().activeCell?.[0];
+    if (!currentId)
+        return null;
+    const currentIndex = visibleRowsIndexMap.get(currentId) || 0;
+    if (currentIndex === -1 || currentIndex === records.length - 1) {
+        return null;
+    }
+    const nextId = records[currentIndex + 1]._id;
+    return nextId;
+}
+function getPreviousRecordByActiveCell(aiTable) {
+    const records = aiTable.gridData().records;
+    const visibleRowsIndexMap = aiTable.context.visibleRowsIndexMap();
+    const currentId = aiTable.selection().activeCell?.[0];
+    if (!currentId)
+        return null;
+    const currentIndex = visibleRowsIndexMap.get(currentId) || 0;
+    if (currentIndex <= 0) {
+        return null;
+    }
+    const prevId = records[currentIndex - 1]._id;
+    return prevId;
+}
+function getRecordNavigationInfo(aiTable, recordId) {
+    const records = aiTable.gridData().records;
+    const visibleRowsIndexMap = aiTable.context.visibleRowsIndexMap();
+    const index = visibleRowsIndexMap.get(recordId) || 0;
+    if (index === -1)
+        return null;
+    return {
+        index,
+        total: records.length,
+        hasPrevious: index > 0,
+        hasNext: index < records.length - 1,
+        previousId: index > 0 ? records[index - 1]._id : null,
+        nextId: index < records.length - 1 ? records[index + 1]._id : null
+    };
+}
 
 class NumberCellEditorComponent extends AbstractEditCellEditor {
     updateValue() {
@@ -11954,7 +12079,7 @@ class NumberCellEditorComponent extends AbstractEditCellEditor {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NumberCellEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.10", type: NumberCellEditorComponent, isStandalone: true, selector: "number-cell-editor", host: { classAttribute: "number-cell-editor" }, usesInheritance: true, ngImport: i0, template: `<thy-input-number
         class="h-100"
-        [thyAutoFocus]="true"
+        [thyAutoFocus]="autoFocus()"
         [thyShowStepControls]="false"
         [(ngModel)]="modelValue"
         (thyEnter)="updateValue()"
@@ -11967,7 +12092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     selector: 'number-cell-editor',
                     template: `<thy-input-number
         class="h-100"
-        [thyAutoFocus]="true"
+        [thyAutoFocus]="autoFocus()"
         [thyShowStepControls]="false"
         [(ngModel)]="modelValue"
         (thyEnter)="updateValue()"
@@ -12059,7 +12184,7 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: SelectCellEditorComponent, isStandalone: true, selector: "select-cell-editor", host: { classAttribute: "d-block h-100 select-cell-editor" }, usesInheritance: true, ngImport: i0, template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n", dependencies: [{ kind: "component", type: ThySelect, selector: "thy-select,thy-custom-select", inputs: ["thyDropdownWidthMode", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange", "visibleChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ThyEmptyModule }, { kind: "ngmodule", type: ThyFormModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThySelectModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
@@ -12075,7 +12200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                         ThyFormModule,
                         FormsModule,
                         ThySelectModule
-                    ], template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"true\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n" }]
+                    ], template: "<thy-select\n    [(ngModel)]=\"modelValue\"\n    [thyAutoExpand]=\"autoFocus()\"\n    [thyAllowClear]=\"true\"\n    [thyPlaceHolder]=\"''\"\n    [thyPreset]=\"preset()\"\n    [thyMode]=\"field().settings.is_multiple ? 'multiple' : ''\"\n    (ngModelChange)=\"onModelChange($event)\"\n    (thyOnExpandStatusChange)=\"onOpenChange($event)\"\n>\n    <ng-template #selectedDisplay let-option>\n        <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n    </ng-template>\n    @for (option of selectOptions(); track option._id) {\n        <thy-option\n            [thyValue]=\"option._id\"\n            [hidden]=\"!!option.is_disabled\"\n            [thyRawValue]=\"option\"\n            [thyShowOptionCustom]=\"true\"\n            [thyLabelText]=\"option.text\"\n        >\n            <select-option [field]=\"field()\" [displayOption]=\"option\"></select-option>\n        </thy-option>\n    }\n</thy-select>\n" }]
         }], ctorParameters: () => [] });
 
 class TextCellEditorComponent extends AbstractEditCellEditor {
@@ -12117,7 +12242,7 @@ class TextCellEditorComponent extends AbstractEditCellEditor {
             placeholder=""
             rows="1"
             thyInput
-            [thyAutofocus]="true"
+            [thyAutofocus]="autoFocus()"
             [(ngModel)]="modelValue"
             (ngModelChange)="valueChange()"
             (thyEnter)="updateValue()"
@@ -12135,7 +12260,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             placeholder=""
             rows="1"
             thyInput
-            [thyAutofocus]="true"
+            [thyAutofocus]="autoFocus()"
             [(ngModel)]="modelValue"
             (ngModelChange)="valueChange()"
             (thyEnter)="updateValue()"
@@ -12500,6 +12625,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                 }]
         }] });
 
+class AITableFieldMenu extends ThyDropdownAbstractMenu {
+    constructor() {
+        super(...arguments);
+        this.field = computed(() => {
+            return this.aiTable.fields().find((item) => item._id === this.fieldId);
+        });
+    }
+    getCustomComponent(menu) {
+        return menu.customComponent?.(this.aiTable, this.field());
+    }
+    execute(menu) {
+        if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
+            menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
+        }
+    }
+    getMenuName(menu, field) {
+        if (typeof menu.name === 'function') {
+            return menu.name(field);
+        }
+        return menu.name || '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'field-menu'
+                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass, NgComponentOutlet], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n" }]
+        }], propDecorators: { fieldId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], aiTable: [{
+                type: Input,
+                args: [{ required: true }]
+            }], fieldMenus: [{
+                type: Input,
+                args: [{ required: true }]
+            }], origin: [{
+                type: Input
+            }], position: [{
+                type: Input
+            }] } });
+
 const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.text]: TextCellEditorComponent,
     [AITableFieldType.richText]: TextCellEditorComponent,
@@ -12509,6 +12678,268 @@ const GRID_CELL_EDITOR_MAP = {
     [AITableFieldType.link]: LinkCellEditorComponent
 };
 
+class DynamicCellEditorComponent {
+    constructor() {
+        this.aiTable = input.required();
+        this.fieldId = input.required();
+        this.recordId = input.required();
+        this.references = input.required();
+        this.updateFieldValues = output();
+        this.editorHost = viewChild('editorHost', { read: ViewContainerRef });
+        this.field = computed(() => {
+            return this.aiTable().fieldsMap()[this.fieldId()];
+        });
+        this.cellValue = computed(() => {
+            return AITableQueries.getFieldValue(this.aiTable(), [this.recordId(), this.fieldId()]);
+        });
+        effect(() => {
+            this.recordId();
+            this.fieldId();
+            this.createEditorComponent();
+        });
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.destroyEditorComponent();
+    }
+    createEditorComponent() {
+        const field = this.field();
+        if (!field)
+            return;
+        const editorComponent = this.getEditorComponent(field.type);
+        if (!editorComponent)
+            return;
+        const editorHost = this.editorHost();
+        try {
+            editorHost?.clear();
+        }
+        catch (error) { }
+        const fieldRenderers = this.aiTable().context?.aiFieldConfig()?.fieldRenderers;
+        this.editorComponentRef = editorHost?.createComponent(editorComponent, {
+            injector: fieldRenderers?.[field.type]?.recordCellEditorInjector
+        });
+        const instance = this.editorComponentRef.instance;
+        if (instance instanceof AbstractEditCellEditor) {
+            this.editorComponentRef.setInput('aiTable', this.aiTable());
+            this.editorComponentRef.setInput('fieldId', this.fieldId());
+            this.editorComponentRef.setInput('recordId', this.recordId());
+            this.editorComponentRef.setInput('references', this.references());
+            this.editorComponentRef.setInput('autoFocus', false);
+            instance.updateFieldValues.subscribe((options) => {
+                this.updateFieldValues.emit(options);
+            });
+        }
+    }
+    destroyEditorComponent() {
+        if (this.editorComponentRef) {
+            this.editorComponentRef.destroy();
+            this.editorComponentRef = undefined;
+        }
+    }
+    getEditorComponent(fieldType) {
+        const customEditors = this.aiTable().context?.aiFieldConfig()?.fieldRenderers;
+        if (customEditors && customEditors[fieldType]?.recordCellEditor) {
+            return customEditors[fieldType].recordCellEditor;
+        }
+        return GRID_CELL_EDITOR_MAP[fieldType];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DynamicCellEditorComponent, isStandalone: true, selector: "ai-dynamic-cell-editor", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { updateFieldValues: "updateFieldValues" }, viewQueries: [{ propertyName: "editorHost", first: true, predicate: ["editorHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
+        <div class="ai-dynamic-cell-editor-wrapper">
+            <ng-container #editorHost></ng-container>
+        </div>
+    `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DynamicCellEditorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-dynamic-cell-editor',
+                    template: `
+        <div class="ai-dynamic-cell-editor-wrapper">
+            <ng-container #editorHost></ng-container>
+        </div>
+    `,
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], ctorParameters: () => [] });
+
+class RecordDetailComponent {
+    fieldIconPath(field) {
+        return getFieldIconPath(field);
+    }
+    constructor() {
+        this.aiTable = input.required();
+        this.recordId = input.required();
+        this.references = input.required();
+        this.actions = input();
+        this.recordIdChange = output();
+        this.internalRecordId = signal('');
+        this.currentRecordId = computed(() => {
+            const inputId = this.recordId();
+            const internalId = this.internalRecordId();
+            return internalId || inputId;
+        });
+        this.fieldOperationsMenuTemplate = viewChild('fieldOperationsMenuTemplate');
+        this.slideRef = inject(ThySlideRef);
+        this.thyPopover = inject(ThyPopover);
+        this.record = computed(() => {
+            return this.aiTable().recordsMap()[this.currentRecordId()];
+        });
+        this.fields = computed(() => {
+            return this.aiTable().gridData().fields;
+        });
+        this.firstField = computed(() => {
+            return this.aiTable().gridData().fields[0];
+        });
+        this.lastField = computed(() => {
+            const fields = this.aiTable().gridData().fields;
+            return fields[fields.length - 1];
+        });
+        this.recordTitle = computed(() => {
+            const firstField = this.firstField();
+            if (!firstField)
+                return '未命名记录';
+            const cellValue = AITableQueries.getFieldValue(this.aiTable(), [this.currentRecordId(), firstField._id]);
+            return this.formatCellValue(cellValue, firstField) || '未命名记录';
+        });
+        this.recordNavigation = computed(() => {
+            return getRecordNavigationInfo(this.aiTable(), this.currentRecordId());
+        });
+        this.fieldMenus = computed(() => {
+            const fieldMenusFn = this.aiTable()?.context?.aiFieldConfig()?.recordDetailFieldMenus;
+            if (fieldMenusFn && this.aiTable()) {
+                return fieldMenusFn(this.aiTable());
+            }
+            return [];
+        });
+        this.activeFieldId = null;
+        this.fieldMenuVisible = {};
+        effect(() => {
+            const activeCell = this.aiTable().selection().activeCell;
+            if (activeCell) {
+                this.internalRecordId.set(activeCell[0]);
+            }
+        });
+    }
+    ngOnInit() {
+        this.setSelection(this.recordId());
+        this.internalRecordId.set(this.recordId());
+    }
+    close() {
+        this.slideRef?.close();
+    }
+    previousRecord() {
+        const prevId = getPreviousRecordByActiveCell(this.aiTable());
+        if (prevId) {
+            this.internalRecordId.set(prevId);
+            this.setSelection(prevId);
+        }
+    }
+    nextRecord() {
+        const nextId = getNextRecordByActiveCell(this.aiTable());
+        if (nextId) {
+            this.internalRecordId.set(nextId);
+            this.setSelection(nextId);
+        }
+    }
+    deleteRecord() {
+        this.actions()?.removeRecord?.([this.currentRecordId()]);
+        this.close();
+    }
+    fieldClick(fieldId) {
+        this.activateField(fieldId);
+        setActiveCell(this.aiTable(), [this.currentRecordId(), fieldId]);
+    }
+    showFieldMenu(fieldId) {
+        this.fieldMenuVisible[fieldId] = true;
+    }
+    hideFieldMenu(fieldId) {
+        this.fieldMenuVisible[fieldId] = false;
+    }
+    fieldMenuMoreClick(e, fieldId) {
+        const origin = e.target;
+        const position = origin.getBoundingClientRect();
+        this.thyPopover.open(AITableFieldMenu, {
+            origin,
+            placement: 'bottomRight',
+            manualClosure: true,
+            initialState: {
+                aiTable: this.aiTable(),
+                fieldId,
+                fieldMenus: this.fieldMenus(),
+                origin,
+                position
+            }
+        });
+    }
+    addNewField(e) {
+        const origin = e.target;
+        const newField = createDefaultField(this.aiTable(), AITableFieldType.text);
+        const popoverRef = this.thyPopover.open(AITableFieldSetting, {
+            origin,
+            placement: 'topLeft',
+            manualClosure: true,
+            originActiveClass: undefined,
+            height: 'auto',
+            panelClass: 'ai-table-field-setting-panel',
+            initialState: {
+                aiTable: this.aiTable(),
+                aiReferences: this.references(),
+                aiEditField: newField,
+                isUpdate: false
+            }
+        });
+        if (popoverRef) {
+            popoverRef.componentInstance.addField.subscribe((defaultValue) => {
+                const fields = this.aiTable().gridData().fields;
+                const fieldCount = fields.length;
+                this.actions()?.addField?.({
+                    originId: fieldCount > 0 ? fields[fields.length - 1]._id : '',
+                    defaultValue
+                });
+            });
+        }
+    }
+    fieldValueChange(options) {
+        this.actions()?.updateFieldValues?.(options);
+    }
+    setSelection(recordId) {
+        clearSelection(this.aiTable());
+        closeExpendCell(this.aiTable());
+        const idPath = [recordId, this.firstField()?._id];
+        selectCells(this.aiTable(), idPath);
+        setActiveCell(this.aiTable(), idPath);
+    }
+    activateField(fieldId) {
+        setActiveCell(this.aiTable(), [this.recordId(), fieldId]);
+    }
+    formatCellValue(value, field) {
+        if (value === null || value === undefined)
+            return '';
+        const transformValue = transformToCellText(value, { aiTable: this.aiTable(), field });
+        switch (field.type) {
+            case AITableFieldType.text:
+            case AITableFieldType.richText:
+            case AITableFieldType.number:
+                return transformValue;
+            case AITableFieldType.select:
+                return Array.isArray(transformValue)
+                    ? transformValue.map((v) => field.settings?.options?.find((o) => o._id === v)?.text || v).join(', ')
+                    : transformValue?.text || transformValue;
+            case AITableFieldType.date:
+                return transformValue ? new Date(transformValue).toLocaleString() : '';
+            default:
+                return transformValue;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"px-5 pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base text-secondary\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n                            <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n                                <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                <thy-icon thyIconName=\"plus\"></thy-icon>\n                <span>\u65B0\u589E\u5B57\u6BB5</span>\n            </button>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyPopoverDirective, selector: "[thyPopover]", inputs: ["thyPopover", "thyTrigger", "thyPlacement", "thyOffset", "thyConfig", "thyShowDelay", "thyHideDelay", "thyAutoAdaptive", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ai-record-detail', imports: [ThyButton, ThyIcon, ThyDivider, ThyPopoverDirective, ThyDropdownMenuItemDirective, DynamicCellEditorComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" [title]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button\n                thyButton=\"link-secondary\"\n                thySize=\"md\"\n                [disabled]=\"!recordNavigation()?.hasPrevious\"\n                (click)=\"previousRecord()\"\n                title=\"\u4E0A\u4E00\u6761\"\n            >\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\" title=\"\u4E0B\u4E00\u6761\">\n                <thy-icon thyIconName=\"angle-down\"></thy-icon>\n            </button>\n        </div>\n        <thy-divider [thyVertical]=\"true\"></thy-divider>\n        <div class=\"header-operations\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [thyPopover]=\"headerMoreMenu\" thyTrigger=\"click\" thyPlacement=\"bottomRight\">\n                <thy-icon thyIconName=\"list\"></thy-icon>\n            </button>\n\n            <ng-template #headerMoreMenu>\n                <div class=\"thy-dropdown-menu\">\n                    <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"deleteRecord()\">\n                        <thy-icon thyIconName=\"trash\"></thy-icon>\n                        <span>\u5220\u9664</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\" title=\"\u5173\u95ED\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"px-5 pt-4 cell-item\"\n                    [class.active]=\"activeFieldId === field._id\"\n                    (mouseenter)=\"showFieldMenu(field._id)\"\n                    (mouseleave)=\"hideFieldMenu(field._id)\"\n                >\n                    <div class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base text-secondary\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible[field._id]\">\n                            <button thyButton=\"link-secondary\" thySize=\"xs\" (click)=\"fieldMenuMoreClick($event, field._id)\">\n                                <thy-icon thyIconName=\"more-vertical\"></thy-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"fieldClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                <thy-icon thyIconName=\"plus\"></thy-icon>\n                <span>\u65B0\u589E\u5B57\u6BB5</span>\n            </button>\n        </div>\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
 class AITableGridEventService {
     constructor() {
         this.dblClickEvent$ = new Subject();
@@ -12746,50 +13177,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Injectable
         }] });
 
-class AITableFieldMenu extends ThyDropdownAbstractMenu {
-    constructor() {
-        super(...arguments);
-        this.field = computed(() => {
-            return this.aiTable.fields().find((item) => item._id === this.fieldId);
-        });
-    }
-    getCustomComponent(menu) {
-        return menu.customComponent?.(this.aiTable, this.field());
-    }
-    execute(menu) {
-        if ((menu.disabled && !menu.disabled(this.aiTable, this.field)) || !menu.disabled) {
-            menu.exec && menu.exec(this.aiTable, this.field, this.origin, this.position);
-        }
-    }
-    getMenuName(menu, field) {
-        if (typeof menu.name === 'function') {
-            return menu.name(field);
-        }
-        return menu.name || '';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableFieldMenu, isStandalone: true, selector: "ai-table-field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, host: { classAttribute: "field-menu" }, usesInheritance: true, ngImport: i0, template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableFieldMenu, decorators: [{
-            type: Component,
-            args: [{ selector: 'ai-table-field-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'field-menu'
-                    }, imports: [ThyIcon, ThyDivider, ThyDropdownMenuItemDirective, NgClass, NgComponentOutlet], template: "@if (field()) {\n    @for (menu of fieldMenus; track index; let index = $index) {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            @if (menu.type === 'divider') {\n                <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n            } @else {\n                @let disabled = !!(menu.disabled && menu.disabled(aiTable, field));\n                @let isRemoveField = menu.type === 'removeField';\n                @let customComponent = getCustomComponent(menu);\n                <a\n                    thyDropdownMenuItem\n                    href=\"javascript:;\"\n                    [ngClass]=\"{ 'remove-field': isRemoveField && !disabled }\"\n                    (click)=\"execute(menu)\"\n                    [thyDisabled]=\"disabled\"\n                >\n                    @if (customComponent) {\n                        <ng-container *ngComponentOutlet=\"customComponent; inputs: { field: field(), menu: menu }\"> </ng-container>\n                    } @else {\n                        <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                        <span>{{ getMenuName(menu, field()) }}</span>\n                    }\n                </a>\n            }\n        }\n    }\n}\n" }]
-        }], propDecorators: { fieldId: [{
-                type: Input,
-                args: [{ required: true }]
-            }], aiTable: [{
-                type: Input,
-                args: [{ required: true }]
-            }], fieldMenus: [{
-                type: Input,
-                args: [{ required: true }]
-            }], origin: [{
-                type: Input
-            }], position: [{
-                type: Input
-            }] } });
-
 const AI_TABLE_GRID_FIELD_SERVICE_MAP = new WeakMap();
 class AITableGridFieldService {
     constructor(thyPopover) {
@@ -12868,7 +13255,9 @@ class AITableGridBase {
         });
         this.aiTableInitialized = output();
         this.aiAddRecord = output();
+        this.aiRemoveRecord = output();
         this.aiAddField = output();
+        this.aiCopyRecords = output();
         this.aiMoveField = output();
         this.aiUpdateFieldValues = output();
         this.aiSetField = output();
@@ -12932,6 +13321,14 @@ class AITableGridBase {
         }
         this.aiAddRecord.emit(options || {});
     }
+    copyRecords(options) {
+        const records = this.aiTable.records();
+        const recordCount = records.length;
+        if (this.aiMaxRecords() && recordCount >= this.aiMaxRecords()) {
+            return;
+        }
+        this.aiCopyRecords.emit(options);
+    }
     toggleSelectRecord(recordId) {
         toggleSelectRecord(this.aiTable, recordId);
     }
@@ -12976,7 +13373,7 @@ class AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiAddField: "aiAddField", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.10", type: AITableGridBase, isStandalone: true, selector: "ai-table-grid-base", inputs: { aiRecords: { classPropertyName: "aiRecords", publicName: "aiRecords", isSignal: true, isRequired: true, transformFunction: null }, aiFields: { classPropertyName: "aiFields", publicName: "aiFields", isSignal: true, isRequired: true, transformFunction: null }, aiContextMenuItems: { classPropertyName: "aiContextMenuItems", publicName: "aiContextMenuItems", isSignal: true, isRequired: false, transformFunction: null }, aiFieldConfig: { classPropertyName: "aiFieldConfig", publicName: "aiFieldConfig", isSignal: true, isRequired: false, transformFunction: null }, aiReadonly: { classPropertyName: "aiReadonly", publicName: "aiReadonly", isSignal: true, isRequired: false, transformFunction: null }, aiPlugins: { classPropertyName: "aiPlugins", publicName: "aiPlugins", isSignal: true, isRequired: false, transformFunction: null }, aiMaxFields: { classPropertyName: "aiMaxFields", publicName: "aiMaxFields", isSignal: true, isRequired: false, transformFunction: null }, aiMaxRecords: { classPropertyName: "aiMaxRecords", publicName: "aiMaxRecords", isSignal: true, isRequired: false, transformFunction: null }, aiMaxSelectOptions: { classPropertyName: "aiMaxSelectOptions", publicName: "aiMaxSelectOptions", isSignal: true, isRequired: false, transformFunction: null }, aiReferences: { classPropertyName: "aiReferences", publicName: "aiReferences", isSignal: true, isRequired: true, transformFunction: null }, aiBuildRenderDataFn: { classPropertyName: "aiBuildRenderDataFn", publicName: "aiBuildRenderDataFn", isSignal: true, isRequired: false, transformFunction: null }, aiBuildGroupLinearRowsFn: { classPropertyName: "aiBuildGroupLinearRowsFn", publicName: "aiBuildGroupLinearRowsFn", isSignal: true, isRequired: false, transformFunction: null }, aiSortKeysMap: { classPropertyName: "aiSortKeysMap", publicName: "aiSortKeysMap", isSignal: true, isRequired: false, transformFunction: null }, aiGetI18nTextByKey: { classPropertyName: "aiGetI18nTextByKey", publicName: "aiGetI18nTextByKey", isSignal: true, isRequired: false, transformFunction: null }, aiKeywords: { classPropertyName: "aiKeywords", publicName: "aiKeywords", isSignal: true, isRequired: false, transformFunction: null }, aiFrozenColumnCountFn: { classPropertyName: "aiFrozenColumnCountFn", publicName: "aiFrozenColumnCountFn", isSignal: true, isRequired: false, transformFunction: null }, aiRecordHeight: { classPropertyName: "aiRecordHeight", publicName: "aiRecordHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { aiRecords: "aiRecordsChange", aiFields: "aiFieldsChange", aiTableInitialized: "aiTableInitialized", aiAddRecord: "aiAddRecord", aiRemoveRecord: "aiRemoveRecord", aiAddField: "aiAddField", aiCopyRecords: "aiCopyRecords", aiMoveField: "aiMoveField", aiUpdateFieldValues: "aiUpdateFieldValues", aiSetField: "aiSetField", aiSetFieldWidth: "aiSetFieldWidth", aiSetFieldStatType: "aiSetFieldStatType", aiMoveRecords: "aiMoveRecords", aiClick: "aiClick", aiDbClick: "aiDbClick", aiRowGroupCollapseClick: "aiRowGroupCollapseClick" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGridBase, decorators: [{
             type: Component,
@@ -13231,6 +13628,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             type: Injectable
         }], ctorParameters: () => [{ type: i0.NgZone }] });
 
+class RecordDetailService {
+    constructor() {
+        this.thySlide = inject(ThySlideService);
+        this.currentSlideRef = null;
+        this.clickSubscription = null;
+        this.config = null;
+    }
+    open(config) {
+        if (this.isOpen()) {
+            this.currentSlideRef?.componentInstance.setSelection(config.recordId);
+            return this.currentSlideRef;
+        }
+        this.config = config;
+        this.currentSlideRef = this.thySlide.open(RecordDetailComponent, {
+            from: 'right',
+            width: '480px',
+            hasBackdrop: false,
+            panelClass: 'ai-expand-record-slide',
+            initialState: {
+                aiTable: config.aiTable,
+                recordId: config.recordId,
+                references: config.references,
+                actions: config.actions
+            }
+        });
+        if (this.currentSlideRef) {
+            this.currentSlideRef.afterOpened().subscribe(() => {
+                this.setupDocumentClickListener(config);
+            });
+            this.currentSlideRef.afterClosed().subscribe(() => {
+                this.close();
+            });
+        }
+        return this.currentSlideRef;
+    }
+    close() {
+        this.currentSlideRef?.close();
+        if (this.clickSubscription) {
+            this.clickSubscription.unsubscribe();
+            this.clickSubscription = null;
+        }
+        this.currentSlideRef = null;
+        if (this.config) {
+            clearSelection(this.config.aiTable);
+            this.config = null;
+        }
+    }
+    isOpen() {
+        return this.currentSlideRef !== null;
+    }
+    isClickInsideTableOrPanel(event, viewContainerRef) {
+        const target = event.target;
+        const tableElement = viewContainerRef.element.nativeElement;
+        if (tableElement && tableElement.contains(target)) {
+            return true;
+        }
+        const overlayContainers = document.querySelectorAll('.cdk-overlay-container');
+        for (let i = 0; i < overlayContainers.length; i++) {
+            if (overlayContainers[i].contains(target)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    setupDocumentClickListener(config) {
+        if (this.clickSubscription) {
+            this.clickSubscription.unsubscribe();
+            this.clickSubscription = null;
+        }
+        this.clickSubscription = fromEvent(document, 'click').subscribe((event) => {
+            if (!this.isClickInsideTableOrPanel(event, config.viewContainerRef)) {
+                this.close();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: RecordDetailService, decorators: [{
+            type: Injectable
+        }] });
+
 class AITableDragComponent {
     constructor() {
         this.horizontalBar = input();
@@ -13699,6 +14178,7 @@ class AITableGrid extends AITableGridBase {
         };
         this.notifyService = inject(ThyNotifyService);
         this.scrollControllerService = inject(AITableScrollControllerService);
+        this.recordDetailService = inject(RecordDetailService);
         this.isPopoverOpen = false;
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
         this.containerRect = signal({ width: 0, height: 0 });
@@ -13856,6 +14336,12 @@ class AITableGrid extends AITableGridBase {
             },
             addRecord: (data) => {
                 this.addRecord(data);
+            },
+            copyRecords: (data) => {
+                this.copyRecords(data);
+            },
+            removeRecord: (data) => {
+                this.aiRemoveRecord.emit([data]);
             }
         };
         this.scrollAction = (options) => {
@@ -14319,6 +14805,15 @@ class AITableGrid extends AITableGridBase {
                 }
                 break;
             }
+            case AI_TABLE_EXPAND_RECORD_ICON: {
+                this.recordDetailService.open({
+                    viewContainerRef: this.viewContainerRef,
+                    aiTable: this.aiTable,
+                    recordId: targetNameDetail.recordId,
+                    references: this.aiReferences(),
+                    actions: this.actions
+                });
+            }
         }
         return;
     }
@@ -14764,18 +15259,18 @@ class AITableGrid extends AITableGridBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koMouseup", "koContextmenu", "koWheel", "koClick", "koDblclick", "koMouseleave", "onScrollPosition"] }, { kind: "component", type: AITableDragComponent, selector: "ai-table-drag", inputs: ["horizontalBar", "verticalBar"], outputs: ["dragEnd"] }, { kind: "directive", type: ThyTooltipDirective, selector: "[thyTooltip],[thy-tooltip]", inputs: ["thyTooltip", "thyTooltipPlacement", "thyTooltipClass", "thyTooltipShowDelay", "thyTooltipHideDelay", "thyTooltipTrigger", "thyTooltipDisabled", "thyTooltipTemplateContext", "thyTooltipOffset", "thyTooltipPin"], exportAs: ["thyTooltip"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
+                    }, imports: [AITableRenderer, AITableDragComponent, ThyTooltipDirective, ThyIcon], providers: [AITableGridEventService, AITableGridFieldService, AITableScrollControllerService, RecordDetailService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koMouseup)=\"stageMouseup($event)\"\n            (koContextmenu)=\"stageContextmenu($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n            (koMouseleave)=\"stageMouseleave($event)\"\n            (koWheel)=\"stageWheel($event)\"\n        >\n            @if (domToolTips().length > 0) {\n                <div\n                    class=\"ai-table-left-background-wrapper\"\n                    [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                    [style.top.px]=\"fieldHeadHeight\"\n                >\n                    @for (domToolTip of domToolTips(); track trackBy(idx, domToolTip); let idx = $index) {\n                        <div\n                            class=\"ai-table-left-background\"\n                            [thyTooltip]=\"domToolTip.tooltip\"\n                            [style.--scroll-top.px]=\"domToolTip.top\"\n                            [style.height.px]=\"domToolTip.height\"\n                        >\n                            <thy-icon class=\"text-white\" thyIconName=\"filter-line\"></thy-icon>\n                        </div>\n                    }\n                </div>\n            }\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n    <ai-table-drag [horizontalBar]=\"horizontalBarRef()\" [verticalBar]=\"verticalBarRef()\" (dragEnd)=\"dragEnd($event)\"></ai-table-drag>\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderAtomType, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_LINE_SPACING, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_MIN_WIDTH, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_MULTI_SELECT_ITEM_DOT_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_PIECE_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_TAG_MIN_WIDTH, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILE_ITEM_MARGIN_RIGHT, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_RECORD_HEIGHT_LEVELS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellBaseLayout, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, EditPath, FONT_SIZE_SM, FieldModelMap, GROUP_STAT_DEFAULT_FONT_SIZE, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridLinearRows, buildNormalLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewFieldName, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmptyOrNot, isMac, isMeetFilter, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setCollapseDisabled, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
+export { AITable, AITableActionIcon, AITableAddField, AITableAreaType, AITableAvatarSize, AITableAvatarType, AITableBackground, AITableCellAttachment, AITableCellCheckbox, AITableCellLink, AITableCellProgress, AITableCellRate, AITableCellRichText, AITableCellText, AITableCells, AITableCheckType, AITableColumnHeads, AITableContextMenu, AITableDomGrid, AITableExpandRecord, AITableFieldHead, AITableFieldIcon, AITableFieldIsSameOptionPipe, AITableFieldSetting, AITableFrozenCells, AITableFrozenColumnHeads, AITableFrozenGroups, AITableFrozenPlaceholderCells, AITableGrid, AITableGridEventService, AITableGridFieldService, AITableGridI18nKey, AITableGridI18nText, AITableGroups, AITableHoverRowHeads, AITableIcon, AITableMemberType, AITableMouseDownType, AITableOtherRows, AITablePlaceholderCells, AITableQueries, AITableRenderAtomType, AITableRenderer, AITableRowType, AITableScrollableGroup, AITableSelectAllState, AITableShadow, AITableTextComponent, AI_TABLE_ACTION_COMMON_RADIUS, AI_TABLE_ACTION_COMMON_RIGHT_PADDING, AI_TABLE_ACTION_COMMON_SIZE, AI_TABLE_AUTO_SCROLL_BOTTOM_THRESHOLD, AI_TABLE_AUTO_SCROLL_LEFT_THRESHOLD, AI_TABLE_AUTO_SCROLL_RIGHT_THRESHOLD, AI_TABLE_AUTO_SCROLL_TOP_THRESHOLD, AI_TABLE_BLANK, AI_TABLE_CELL, AI_TABLE_CELL_ACTIVE_BORDER_WIDTH, AI_TABLE_CELL_ADD_ITEM_BUTTON_SIZE, AI_TABLE_CELL_ATTACHMENT_ADD, AI_TABLE_CELL_ATTACHMENT_FILE, AI_TABLE_CELL_BORDER, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE, AI_TABLE_CELL_DELETE_ITEM_BUTTON_SIZE_OFFSET, AI_TABLE_CELL_EDIT, AI_TABLE_CELL_EMOJI_PADDING, AI_TABLE_CELL_EMOJI_SIZE, AI_TABLE_CELL_LINE_BORDER, AI_TABLE_CELL_MAX_ROW_COUNT, AI_TABLE_CELL_MEMBER_ITEM_HEIGHT, AI_TABLE_CELL_MEMBER_ITEM_PADDING, AI_TABLE_CELL_MEMBER_MAX_HEIGHT, AI_TABLE_CELL_MULTI_DOT_RADIUS, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_LINE_SPACING, AI_TABLE_CELL_MULTI_ITEM_DEFAULT_MIN_WIDTH, AI_TABLE_CELL_MULTI_ITEM_MARGIN_LEFT, AI_TABLE_CELL_MULTI_ITEM_MARGIN_TOP, AI_TABLE_CELL_MULTI_ITEM_MIN_WIDTH, AI_TABLE_CELL_MULTI_PADDING_LEFT, AI_TABLE_CELL_MULTI_PADDING_TOP, AI_TABLE_CELL_MULTI_SELECT_ITEM_DOT_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_PIECE_MIN_WIDTH, AI_TABLE_CELL_MULTI_SELECT_ITEM_TAG_MIN_WIDTH, AI_TABLE_CELL_PADDING, AI_TABLE_COMMON_FONT_SIZE, AI_TABLE_DEFAULT_COLUMN_WIDTH, AI_TABLE_DOT_RADIUS, AI_TABLE_EXPAND_RECORD_ICON, AI_TABLE_FIELD_ADD_BUTTON, AI_TABLE_FIELD_ADD_BUTTON_WIDTH, AI_TABLE_FIELD_HEAD, AI_TABLE_FIELD_HEAD_HEIGHT, AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE, AI_TABLE_FIELD_HEAD_MORE, AI_TABLE_FIELD_HEAD_OPACITY_LINE, AI_TABLE_FIELD_HEAD_SELECT_CHECKBOX, AI_TABLE_FIELD_HEAD_TEXT_MIN_WIDTH, AI_TABLE_FIELD_MAX_WIDTH, AI_TABLE_FIELD_MIDDLE_WIDTH, AI_TABLE_FIELD_MINI_WIDTH, AI_TABLE_FIELD_MIN_WIDTH, AI_TABLE_FIELD_STAT_BG, AI_TABLE_FIELD_STAT_CONTAINER_HEIGHT, AI_TABLE_FIELD_STAT_INNER_HEIGHT, AI_TABLE_FILE_ICON_ITEM_HEIGHT, AI_TABLE_FILE_ICON_SIZE, AI_TABLE_FILE_ITEM_MARGIN_RIGHT, AI_TABLE_FILL_HANDLE, AI_TABLE_GRID_FIELD_SERVICE_MAP, AI_TABLE_GROUP_MAX_LEVEL, AI_TABLE_ICON_COMMON_SIZE, AI_TABLE_INDEX_FIELD_TEXT, AI_TABLE_MEMBER_AVATAR_SIZE, AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT, AI_TABLE_MEMBER_ITEM_PADDING_RIGHT, AI_TABLE_MIN_TEXT_WIDTH, AI_TABLE_OFFSET, AI_TABLE_OPTION_ITEM_FONT_SIZE, AI_TABLE_OPTION_ITEM_HEIGHT, AI_TABLE_OPTION_ITEM_PADDING, AI_TABLE_OPTION_ITEM_RADIUS, AI_TABLE_OPTION_MULTI_ITEM_FONT_SIZE, AI_TABLE_PIECE_RADIUS, AI_TABLE_PIECE_WIDTH, AI_TABLE_POPOVER_LEFT_OFFSET, AI_TABLE_PREVENT_CLEAR_SELECTION_CLASS, AI_TABLE_PROGRESS_BAR_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_HEIGHT, AI_TABLE_PROGRESS_BAR_POINTER_WIDTH, AI_TABLE_PROGRESS_BAR_RADIUS, AI_TABLE_PROGRESS_TEXT_WIDTH, AI_TABLE_RATE_MAX, AI_TABLE_RECORD_HEIGHT_LEVELS, AI_TABLE_ROW_ADD_BUTTON, AI_TABLE_ROW_BLANK_HEIGHT, AI_TABLE_ROW_DRAG, AI_TABLE_ROW_DRAG_ICON_WIDTH, AI_TABLE_ROW_GROUP_COLLAPSE_BUTTON, AI_TABLE_ROW_GROUP_OFFSET, AI_TABLE_ROW_HEAD, AI_TABLE_ROW_HEAD_SIZE, AI_TABLE_ROW_HEAD_WIDTH, AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH, AI_TABLE_ROW_HEIGHT, AI_TABLE_ROW_SELECT_CHECKBOX, AI_TABLE_SCROLL_BAR_PADDING, AI_TABLE_SCROLL_BAR_SIZE, AI_TABLE_SHADOW_DEFAULT_WIDTH, AI_TABLE_TAG_FONT_SIZE, AI_TABLE_TAG_PADDING, AI_TABLE_TEXT_GAP, AI_TABLE_TEXT_LINE_HEIGHT, AbstractEditCellEditor, AddOutlinedPath, AngleDownPath, AngleRightPath, AttachmentField, AttachmentPath, CellBaseLayout, CellDrawer, Check, CheckboxMenuSort, Colors, ColumnCalendarFilledPath, ColumnCheckboxFilledPath, ColumnLinkOutlinedPath, ColumnMemberFilledPath, ColumnMultipleFillPath, ColumnNumberFilledPath, ColumnProgressFilledPath, ColumnRatingFilledPath, ColumnRichTextFilledPath, ColumnSelectFilledPath, ColumnTextFilledPath, Coordinate, CoverCellBase, DBL_CLICK_EDIT_TYPE, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_FONT_STYLE, DEFAULT_FONT_WEIGHT, DEFAULT_ICON_SHAPE, DEFAULT_ICON_SIZE, DEFAULT_POINT_POSITION, DEFAULT_SCROLL_STATE, DEFAULT_TEXT_ALIGN_CENTER, DEFAULT_TEXT_ALIGN_LEFT, DEFAULT_TEXT_ALIGN_RIGHT, DEFAULT_TEXT_DECORATION, DEFAULT_TEXT_ELLIPSIS, DEFAULT_TEXT_FILL, DEFAULT_TEXT_LINE_HEIGHT, DEFAULT_TEXT_LISTENING, DEFAULT_TEXT_MAX_CACHE, DEFAULT_TEXT_MAX_HEIGHT, DEFAULT_TEXT_SCALE, DEFAULT_TEXT_TRANSFORMS_ENABLED, DEFAULT_TEXT_VERTICAL_ALIGN_MIDDLE, DEFAULT_TEXT_VERTICAL_ALIGN_TOP, DEFAULT_TEXT_WRAP, DEFAULT_WRAP_TEXT_MAX_ROW, DateCellEditorComponent, DateField, DepartmentOutlinedPath, Drawer, DynamicCellEditorComponent, EditPath, ExpandRecordPath, FONT_SIZE_SM, FieldModelMap, GROUP_STAT_DEFAULT_FONT_SIZE, IconPathMap, IsSelectRecordPipe, KO_CONTAINER_TOKEN, KoComponent, KoContainer, KoShape, KoShapeTypes, KoStage, LinkCellEditorComponent, LinkField, MIN_COLUMN_WIDTH, MemberField, MemberSettingPipe, MoreStandOutlinedPath, NumberCellEditorComponent, NumberField, ProgressField, RateField, RecordDetailComponent, RecordDetailService, RendererContext, RichTextField, RowDragPath, RowHeight, SelectCellEditorComponent, SelectField, SelectOptionComponent, SelectOptionPipe, SelectOptionsPipe, SelectSettingPipe, StarFill, TextCellEditorComponent, TextField, TextMeasure, Unchecked, UserPipe, WebOutlinedPath, aiTableFragmentAttribute, aiTableImageConfigToKonvaConfig, aiTableRectConfigToKonvaConfig, aiTableTextConfigToKonvaConfig, applyNodeProps, buildClipboardData, buildGridLinearRows, buildNormalLinearRows, castToString, cellDrawer, clearCells, clearCoverCell, clearSelectedCells, clearSelection, clearSelectionFields, clearSelectionRecords, closeEditingCell, closeExpendCell, compareNumber, compareOption, compareString, createAITable, createActiveCellBorder, createCells, createDefaultField, createDefaultFieldName, createListener, dragFillHighlightArea, drawer, expandCell, extractLinkUrl, extractText, generateNewFieldName, generateNewName, generateTargetName, getAvatarBgColor, getAvatarShortName, getCellEditorBorderSpace, getCellHorizontalPosition, getColumnIndicesSizeMap, getCoverCell, getDateFieldValues, getDefaultFieldOptions, getDefaultI18nTextByKey, getDetailByTargetName, getEditorBoxOffset, getEditorSpace, getFieldIconPath, getFieldOptionByField, getFieldOptionMap, getFieldOptions, getFieldValue, getFileThumbnailSvgString, getFillDirection, getGroupLastRecordIndex, getHoverEditorBoxOffset, getHoverEditorSpace, getI18nTextByKey, getMousePosition, getName, getNextRecordByActiveCell, getOptionsByFieldAndRecords, getPlaceHolderCellsConfigs, getPreviousRecordByActiveCell, getRecordNavigationInfo, getStartAndEndCell, getSystemFieldValue, getTargetName, getTextWidth, getVisibleRangeInfo, graphemeSplitter, handleMouseStyle, hasIntersect, idCreator, idsCreator, imageCache, isActiveCell, isCellMatchKeywords, isClipboardReadSupported, isClipboardReadTextSupported, isClipboardWriteSupported, isClipboardWriteTextSupported, isEmptyOrNot, isMac, isMeetFilter, isSameFieldOption, isSelectedField, isSystemField, isVirtualKey, isWindows, isWindowsOS, isWithinFrozenColumnBoundary, performFill, processPastedValueForSelect, readFromClipboard, scrollMax, scrollToMatchedCell, selectCells, selectField, setActiveCell, setCollapseDisabled, setEditingCell, setExpandCellInfo, setMouseStyle, setSelection, shortIdCreator, shortIdsCreator, statDateRangeOfDays, statDateRangeOfMonths, statEarliestTime, statLatestTime, stringInclude, textDataCache, toAttachmentFieldValue, toDateFieldValue, toLinkFieldValue, toMemberFieldValue, toNumberFieldValue, toProgressFieldValue, toRateFieldValue, toRichTextFieldValue, toSelectFieldValue, toTextFieldValue, toggleSelectAllRecords, toggleSelectRecord, transformToCellText, updatePicture, writeToAITable, writeToClipboard, zhIntlCollator };
 //# sourceMappingURL=ai-table-grid.mjs.map