@ai-table/grid 0.4.7 → 0.4.9

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

@@ -48,17 +48,21 @@
     }
 
     .cell-item {
+        .field-action {
+            margin-right: -15px;
+            display: none;
+            &.active {
+                display: block;
+            }
+        }
+        &:hover {
+            .field-action {
+                display: block;
+            }
+        }
+
         .cell-header {
             height: 22px;
-
-            .cell-operations {
-                opacity: 0;
-                transition: opacity 0.2s;
-
-                &.visible {
-                    opacity: 1;
-                }
-            }
         }
 
         .dynamic-cell-editor {

package/fesm2022/ai-table-grid.mjs

@@ -24,7 +24,7 @@ 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, ThyPopoverDirective, ThyPopoverModule } from 'ngx-tethys/popover';
+import { ThyPopoverRef, ThyPopover, 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, SelectFieldBase, AITableSelectOptionStyle, generateOptionsByTexts, LinkFieldBase, MemberFieldBase, NumberFieldBase, ProgressFieldBase, isProgressAndReturnValue, RateFieldBase, RichTextFieldBase, TextFieldBase, CheckboxFieldBase, FieldModelBaseMap, numberFormat, DragDirection, AI_TABLE_MIN_FROZEN_COLUMN_COUNT } from '@ai-table/utils';
 import ObjectID from 'bson-objectid';
 import { customAlphabet } from 'nanoid';
@@ -5950,6 +5950,7 @@ class Layout extends Drawer {
         this.columnCount = 0;
         this.containerWidth = 0;
         this.frozenColumnCount = 0;
+        this.groupOffset = 0;
         this.rowHeadWidth = AI_TABLE_ROW_HEAD_WIDTH_AND_DRAG_ICON_WIDTH;
         this.hiddenIndexColumn = false;
         this.showExpandIcon = false;
@@ -5958,7 +5959,7 @@ class Layout extends Drawer {
         this.xIsScroll = false;
     }
     // 用于初始化或重置布局的基本属性。这个方法通常在每次渲染新的一行或单元格时调用，确保布局信息是最新的
-    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, showExpandIcon, hiddenRowDrag, readonly, frozenColumnCount, xIsScroll }) {
+    init({ x, y, rowIndex, columnIndex, rowHeight, columnWidth, columnCount, containerWidth, rowHeadWidth, hiddenIndexColumn, showExpandIcon, hiddenRowDrag, readonly, frozenColumnCount, xIsScroll, groupOffset }) {
         this.x = x;
         this.y = y;
         this.rowIndex = rowIndex;
@@ -5974,6 +5975,7 @@ class Layout extends Drawer {
         this.readonly = readonly;
         this.frozenColumnCount = frozenColumnCount;
         this.xIsScroll = xIsScroll;
+        this.groupOffset = groupOffset;
     }
     // 当前单元格是否是行的第一列
     get isFirst() {
@@ -6832,11 +6834,12 @@ class RecordLayout extends Layout {
         const columnWidth = this.columnWidth;
         const width = this.rowHeadWidth - x + columnWidth;
         const expandWidth = this.showExpandIcon ? AI_TABLE_ROW_HEAD_EXPAND_WIDTH : 0;
-        const indexWidth = this.rowHeadWidth - x - expandWidth;
+        const indexWidth = this.rowHeadWidth - x;
+        const groupOffset = this.groupOffset ?? 0;
         this.rect({
-            x: x + indexWidth,
+            x: x + indexWidth + groupOffset,
             y: y + AI_TABLE_OFFSET,
-            width: width - indexWidth,
+            width: width - indexWidth - groupOffset,
             height: rowHeight - AI_TABLE_OFFSET * 2,
             fill
         });
@@ -6851,7 +6854,7 @@ class RecordLayout extends Layout {
             this.rect({
                 x: x,
                 y: y + AI_TABLE_OFFSET,
-                width: indexWidth,
+                width: indexWidth + groupOffset,
                 height: rowHeight - AI_TABLE_OFFSET * 2,
                 fill: indexFill
             });
@@ -6859,12 +6862,12 @@ class RecordLayout extends Layout {
             this.line({
                 x: x,
                 y: y,
-                points: [indexWidth, 0, indexWidth, rowHeight],
+                points: [indexWidth - expandWidth, 0, indexWidth - expandWidth, rowHeight],
                 stroke: this.colors.gray200
             });
             // 右垂直边框
             this.line({
-                x: x + indexWidth + expandWidth + columnWidth + AI_TABLE_OFFSET,
+                x: x + indexWidth + columnWidth + AI_TABLE_OFFSET,
                 y: y,
                 points: [0, 0, 0, rowHeight],
                 stroke: this.colors.gray200
@@ -6873,7 +6876,7 @@ class RecordLayout extends Layout {
                 // 设置字体样式，居中绘制行号
                 this.setStyle({ fontSize: DEFAULT_FONT_SIZE });
                 this.text({
-                    x: x + indexWidth / 2 - AI_TABLE_CELL_LINE_BORDER,
+                    x: x + (indexWidth - expandWidth) / 2 - AI_TABLE_CELL_LINE_BORDER,
                     y: y + AI_TABLE_FIELD_HEAD_HEIGHT / 2,
                     text: String(row.displayIndex),
                     textAlign: DEFAULT_TEXT_ALIGN_CENTER,
@@ -7111,6 +7114,12 @@ const createCells = (config) => {
                     const cell = [recordId, fieldId];
                     let background = getCellBackground(cell, isHover, targetName, aiTable);
                     let indexBackground = getIndexCellBackground(cell, isHover, targetName, aiTable);
+                    const { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
+                        columnIndex,
+                        columnWidth,
+                        columnCount,
+                        depth
+                    });
                     recordLayout.init({
                         x,
                         y,
@@ -7126,7 +7135,8 @@ const createCells = (config) => {
                         showExpandIcon,
                         readonly: aiTable.context?.readonly?.(),
                         frozenColumnCount,
-                        xIsScroll
+                        xIsScroll,
+                        groupOffset: columnWidth - width
                     });
                     recordLayout.render({
                         row,
@@ -7135,12 +7145,6 @@ const createCells = (config) => {
                         isHoverRow: isHoverRecord(isHover, targetName),
                         isCheckedRow: isSelectedRecord(recordId, aiTable)
                     });
-                    const { width, offset, isGroupAndFirstColumn } = getCellHorizontalPosition({
-                        columnIndex,
-                        columnWidth,
-                        columnCount,
-                        depth
-                    });
                     let realX = x + offset + AI_TABLE_OFFSET;
                     if (isGroupAndFirstColumn) {
                         realX += AI_TABLE_FIELD_HEAD_ICON_GAP_SIZE;
@@ -7759,6 +7763,7 @@ class AITableFrozenColumnHeads {
     constructor() {
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
         this.textMeasure = TextMeasure();
+        this.emptyRecordsSelectAllStatus = signal(AITableSelectAllState.none, ...(ngDevMode ? [{ debugName: "emptyRecordsSelectAllStatus" }] : []));
         this.coordinate = computed(() => {
             const config = this.config();
             if (!config)
@@ -7783,8 +7788,12 @@ class AITableFrozenColumnHeads {
         }, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
         this.isChecked = computed(() => {
             const config = this.config();
-            if (!config)
+            if (!config) {
                 return false;
+            }
+            if (config.aiTable?.records().length === 0) {
+                return this.emptyRecordsSelectAllStatus() === AITableSelectAllState.all;
+            }
             const selectedRecords = config.aiTable.selection().selectedRecords;
             const selectedAllState = selectedRecords.size === config.aiTable.records().length
                 ? AITableSelectAllState.all
@@ -7963,12 +7972,17 @@ class AITableFrozenColumnHeads {
             return lines;
         }, ...(ngDevMode ? [{ debugName: "cellLinesConfig" }] : []));
     }
+    selectAllClick(e) {
+        if (this.config()?.aiTable?.records().length === 0) {
+            this.emptyRecordsSelectAllStatus.set(this.emptyRecordsSelectAllStatus() === AITableSelectAllState.all ? AITableSelectAllState.none : AITableSelectAllState.all);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableFrozenColumnHeads, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AITableFrozenColumnHeads, isStandalone: true, selector: "ai-table-frozen-column-heads", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         @if (!hiddenIndexColumn()) {
             <ko-group>
                 @if (!readonly()) {
-                    <ai-table-icon [config]="iconConfig()"></ai-table-icon>
+                    <ai-table-icon [config]="iconConfig()" (koClick)="selectAllClick($event)"></ai-table-icon>
                 } @else {
                     <ai-table-text [config]="textConfig()"></ai-table-text>
                 }
@@ -7991,7 +8005,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         @if (!hiddenIndexColumn()) {
             <ko-group>
                 @if (!readonly()) {
-                    <ai-table-icon [config]="iconConfig()"></ai-table-icon>
+                    <ai-table-icon [config]="iconConfig()" (koClick)="selectAllClick($event)"></ai-table-icon>
                 } @else {
                     <ai-table-text [config]="textConfig()"></ai-table-text>
                 }
@@ -8297,6 +8311,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
 
+class AITableExpandRecord {
+    constructor() {
+        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
+        this.backgroundConfig = computed(() => {
+            const { coordinate, aiTable } = this.config();
+            const context = aiTable.context;
+            const { rowIndex: pointRowIndex, columnIndex } = context.pointPosition();
+            const firstColumnOffset = coordinate.getColumnOffset(0);
+            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
+            const rowHeight = coordinate.getRowHeight(pointRowIndex);
+            const firstField = aiTable.gridData().fields[0];
+            const row = context.linearRows()[pointRowIndex];
+            const recordId = row?._id;
+            const isRateOrProgress = firstField?.type === AITableFieldType.rate || firstField?.type === AITableFieldType.progress;
+            const isFirstColumn = columnIndex === 0;
+            const activeCell = aiTable.selection()?.activeCell;
+            const fieldId = aiTable.gridData().fields[0]._id;
+            const isWhiteBg = isRateOrProgress && isFirstColumn && (!activeCell || (activeCell?.[0] === recordId && activeCell?.[1] === fieldId));
+            return {
+                coordinate,
+                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH,
+                y: y,
+                width: AI_TABLE_ROW_HEAD_EXPAND_WIDTH + AI_TABLE_CELL_LINE_BORDER * 2 + AI_TABLE_OFFSET,
+                height: rowHeight,
+                fill: isWhiteBg ? Colors.white : Colors.transparent,
+                hoverFill: Colors.transparent,
+                listening: true
+            };
+        }, ...(ngDevMode ? [{ debugName: "backgroundConfig" }] : []));
+        this.shouldShowIcon = computed(() => {
+            const { aiTable, rowStartIndex, rowStopIndex } = this.config();
+            const context = aiTable.context;
+            if (!context)
+                return false;
+            if (!context.recordDetailConfig?.()?.showExpandIcon)
+                return false;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const row = context.linearRows()[pointRowIndex];
+            return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
+        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
+        this.expandIconConfig = computed(() => {
+            const { coordinate, aiTable } = this.config();
+            const context = aiTable.context;
+            const { rowIndex: pointRowIndex } = context.pointPosition();
+            const row = context.linearRows()[pointRowIndex];
+            const recordId = row?._id;
+            const firstColumnOffset = coordinate.getColumnOffset(0);
+            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
+            return {
+                coordinate,
+                name: generateTargetName({
+                    targetName: AI_TABLE_EXPAND_RECORD_ICON,
+                    recordId,
+                    mouseStyle: 'pointer'
+                }),
+                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH + (AI_TABLE_ROW_HEAD_EXPAND_WIDTH - AI_TABLE_ACTION_COMMON_SIZE) / 2,
+                y: y + (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ACTION_COMMON_SIZE) / 2,
+                data: ExpandRecordPath,
+                fill: Colors.gray600,
+                hoverFill: Colors.primary,
+                backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
+                backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
+                cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
+                listening: true
+            };
+        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
+            }
+        </ko-group>
+    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ai-table-expand-record',
+                    template: `
+        <ko-group>
+            @if (shouldShowIcon()) {
+                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
+            }
+        </ko-group>
+    `,
+                    imports: [KoContainer, AITableActionIcon],
+                    changeDetection: ChangeDetectionStrategy.OnPush
+                }]
+        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
+
 class AITableBackground {
     constructor() {
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -8467,100 +8573,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }], koClick: [{ type: i0.Output, args: ["koClick"] }], hover: [{ type: i0.Output, args: ["hover"] }], koMouseenter: [{ type: i0.Output, args: ["koMouseenter"] }], koMouseleave: [{ type: i0.Output, args: ["koMouseleave"] }], isHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "isHover", required: false }] }, { type: i0.Output, args: ["isHoverChange"] }] } });
 
-class AITableExpandRecord {
-    constructor() {
-        this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
-        this.backgroundConfig = computed(() => {
-            const { coordinate, aiTable } = this.config();
-            const context = aiTable.context;
-            const { rowIndex: pointRowIndex, columnIndex } = context.pointPosition();
-            const firstColumnOffset = coordinate.getColumnOffset(0);
-            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
-            const rowHeight = coordinate.getRowHeight(pointRowIndex);
-            const firstField = aiTable.gridData().fields[0];
-            const row = context.linearRows()[pointRowIndex];
-            const recordId = row?._id;
-            const isRateOrProgress = firstField?.type === AITableFieldType.rate || firstField?.type === AITableFieldType.progress;
-            const isFirstColumn = columnIndex === 0;
-            const activeCell = aiTable.selection()?.activeCell;
-            const fieldId = aiTable.gridData().fields[0]._id;
-            const isWhiteBg = isRateOrProgress && isFirstColumn && (!activeCell || (activeCell?.[0] === recordId && activeCell?.[1] === fieldId));
-            return {
-                coordinate,
-                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH,
-                y: y,
-                width: AI_TABLE_ROW_HEAD_EXPAND_WIDTH + AI_TABLE_CELL_LINE_BORDER * 2 + AI_TABLE_OFFSET,
-                height: rowHeight,
-                fill: isWhiteBg ? Colors.white : Colors.transparent,
-                hoverFill: Colors.transparent,
-                listening: true
-            };
-        }, ...(ngDevMode ? [{ debugName: "backgroundConfig" }] : []));
-        this.shouldShowIcon = computed(() => {
-            const { aiTable, rowStartIndex, rowStopIndex } = this.config();
-            const context = aiTable.context;
-            if (!context)
-                return false;
-            if (!context.recordDetailConfig?.()?.showExpandIcon)
-                return false;
-            const { rowIndex: pointRowIndex } = context.pointPosition();
-            const row = context.linearRows()[pointRowIndex];
-            return pointRowIndex >= rowStartIndex && pointRowIndex <= rowStopIndex && row && row.type === AITableRowType.record;
-        }, ...(ngDevMode ? [{ debugName: "shouldShowIcon" }] : []));
-        this.expandIconConfig = computed(() => {
-            const { coordinate, aiTable } = this.config();
-            const context = aiTable.context;
-            const { rowIndex: pointRowIndex } = context.pointPosition();
-            const row = context.linearRows()[pointRowIndex];
-            const recordId = row?._id;
-            const firstColumnOffset = coordinate.getColumnOffset(0);
-            const y = coordinate.getRowOffset(pointRowIndex) + AI_TABLE_OFFSET;
-            return {
-                coordinate,
-                name: generateTargetName({
-                    targetName: AI_TABLE_EXPAND_RECORD_ICON,
-                    recordId,
-                    mouseStyle: 'pointer'
-                }),
-                x: firstColumnOffset - AI_TABLE_ROW_HEAD_EXPAND_WIDTH + (AI_TABLE_ROW_HEAD_EXPAND_WIDTH - AI_TABLE_ACTION_COMMON_SIZE) / 2,
-                y: y + (AI_TABLE_FIELD_HEAD_HEIGHT - AI_TABLE_ACTION_COMMON_SIZE) / 2,
-                data: ExpandRecordPath,
-                fill: Colors.gray600,
-                hoverFill: Colors.primary,
-                backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
-                backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
-                cornerRadius: AI_TABLE_ACTION_COMMON_RADIUS,
-                listening: true
-            };
-        }, ...(ngDevMode ? [{ debugName: "expandIconConfig" }] : []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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-background [config]="backgroundConfig()"></ai-table-background>
-                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
-            }
-        </ko-group>
-    `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: AITableActionIcon, selector: "ai-table-action-icon", inputs: ["config"], outputs: ["onClick", "onMousemove", "onMouseenter", "onMouseleave"] }, { kind: "component", type: AITableBackground, selector: "ai-table-background", inputs: ["config", "isActive", "isHover"], outputs: ["koClick", "hover", "koMouseenter", "koMouseleave", "isHoverChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableExpandRecord, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ai-table-expand-record',
-                    template: `
-        <ko-group>
-            @if (shouldShowIcon()) {
-                <ai-table-background [config]="backgroundConfig()"></ai-table-background>
-                <ai-table-action-icon [config]="expandIconConfig()"></ai-table-action-icon>
-            }
-        </ko-group>
-    `,
-                    imports: [KoContainer, AITableActionIcon, AITableBackground],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }] } });
-
 class AITableShadow {
     constructor() {
         this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
@@ -9310,8 +9322,7 @@ class AITableFieldStat {
                 aiTable,
                 getFieldValue: (record, options) => {
                     const { aiTable, field } = options;
-                    const cellValue = AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
-                    return transformToCellText(cellValue, options);
+                    return AITableQueries.getFieldValue(aiTable, [record._id, field._id]);
                 }
             };
         }, ...(ngDevMode ? [{ debugName: "options" }] : []));
@@ -12508,9 +12519,7 @@ class DynamicCellEditorComponent {
         }
         catch (error) { }
         const fieldRenderers = this.aiTable().context?.aiFieldConfig()?.fieldRenderers;
-        this.editorComponentRef = editorHost?.createComponent(editorComponent, {
-            injector: fieldRenderers?.[field.type]?.recordCellEditorInjector
-        });
+        this.editorComponentRef = editorHost?.createComponent(editorComponent, {});
         const instance = this.editorComponentRef.instance;
         if (instance instanceof AbstractEditCellEditor) {
             this.editorComponentRef.setInput('aiTable', this.aiTable());
@@ -12621,7 +12630,6 @@ class RecordDetailComponent {
             return [];
         }, ...(ngDevMode ? [{ debugName: "fieldMenus" }] : []));
         this.activeFieldId = null;
-        this.fieldMenuVisible = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuVisible" }] : []));
         this.fieldMenuActive = signal({}, ...(ngDevMode ? [{ debugName: "fieldMenuActive" }] : []));
         this.fieldMenuPopoverRef = null;
         this.slideRef = inject(ThySlideRef);
@@ -12661,35 +12669,23 @@ class RecordDetailComponent {
     cellClick(fieldId) {
         this.activateCell(fieldId);
     }
-    showFieldMenu(fieldId) {
-        this.fieldMenuVisible.set({ [fieldId]: true });
-    }
-    hideFieldMenu(fieldId) {
-        if (!this.fieldMenuPopoverRef) {
-            this.fieldMenuVisible.set({ [fieldId]: false });
-        }
-    }
-    fieldMenuMoreClick(e, fieldId) {
-        const origin = e.target;
-        const position = origin.getBoundingClientRect();
-        this.fieldMenuVisible.set({ [fieldId]: true });
+    fieldMenuMoreClick(e, fieldId, fieldMenuOrigin) {
+        const origin = e.currentTarget;
+        const position = fieldMenuOrigin.getBoundingClientRect();
         this.fieldMenuActive.set({ [fieldId]: true });
         let isSelfClose = false;
         this.fieldMenuPopoverRef = this.thyPopover.open(AITableFieldMenu, {
             origin,
             placement: 'bottomRight',
-            manualClosure: true,
             initialState: {
                 aiTable: this.aiTable(),
                 fieldId,
                 fieldMenus: this.fieldMenus(),
-                origin,
+                origin: fieldMenuOrigin,
                 position,
                 execMenuCallback: (data) => {
                     isSelfClose = true;
-                    this.thyPopover.close();
                     data.popoverRef?.beforeClosed().subscribe(() => {
-                        this.fieldMenuVisible.set({ [fieldId]: false });
                         this.fieldMenuActive.set({ [fieldId]: false });
                     });
                 }
@@ -12698,7 +12694,6 @@ class RecordDetailComponent {
         if (this.fieldMenuPopoverRef) {
             this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
                 if (!isSelfClose) {
-                    this.fieldMenuVisible.set({ [fieldId]: false });
                     this.fieldMenuActive.set({ [fieldId]: false });
                 }
                 this.fieldMenuPopoverRef = null;
@@ -12756,7 +12751,7 @@ class RecordDetailComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"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\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n                                <a\n                                    thyAction\n                                    [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                    href=\"javascript:;\"\n                                    (click)=\"fieldMenuMoreClick($event, field._id)\"\n                                    ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                                ></a>\n                            </div>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: 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"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: RecordDetailComponent, isStandalone: true, selector: "ai-record-detail", inputs: { aiTable: { classPropertyName: "aiTable", publicName: "aiTable", isSignal: true, isRequired: true, transformFunction: null }, recordId: { classPropertyName: "recordId", publicName: "recordId", isSignal: true, isRequired: true, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordIdChange: "recordIdChange" }, viewQueries: [{ propertyName: "fieldOperationsMenuTemplate", first: true, predicate: ["fieldOperationsMenuTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: ThyButton, selector: "thy-button,[thy-button],[thyButton]", inputs: ["thyButton", "thyType", "thyLoading", "thyLoadingText", "thySize", "thyIcon", "thyBlock"] }, { kind: "component", type: ThyAction, selector: "thy-action, [thyAction]", inputs: ["thyType", "thyIcon", "thyActionIcon", "thyActive", "thyActionActive", "thyTheme", "thyHoverIcon", "thyDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownDirective, selector: "[thyDropdown]", inputs: ["thyDropdownMenu", "thyDropdown", "thyTrigger", "thyShowDelay", "thyHideDelay", "thyActiveClass", "thyPopoverOptions", "thyPlacement", "thyMenuInsideClosable", "thyPanelClass"], outputs: ["thyActiveChange"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "component", type: DynamicCellEditorComponent, selector: "ai-dynamic-cell-editor", inputs: ["aiTable", "fieldId", "recordId", "references"], outputs: ["updateFieldValues"] }, { kind: "component", type: ThyFlexibleText, selector: "thy-flexible-text,[thyFlexibleText]", inputs: ["thyTooltipTrigger", "thyContainerClass", "thyTooltipContent", "thyTooltipPlacement", "thyTooltipOffset"], exportAs: ["thyFlexibleText"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: RecordDetailComponent, decorators: [{
             type: Component,
@@ -12765,11 +12760,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ThyAction,
                         ThyIcon,
                         ThyDivider,
-                        ThyPopoverDirective,
+                        ThyDropdownDirective,
                         ThyDropdownMenuItemDirective,
+                        ThyDropdownMenuComponent,
                         DynamicCellEditorComponent,
                         ThyFlexibleText
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between px-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\">\n                <thy-icon thyIconName=\"angle-up\"></thy-icon>\n            </button>\n            <button thyButton=\"link-secondary\" thySize=\"md\" [disabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\">\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>{{ i18nTexts().deleteRecord }}</span>\n                    </a>\n                </div>\n            </ng-template>\n\n            <button thyButton=\"link-secondary\" thySize=\"md\" (click)=\"close()\">\n                <thy-icon thyIconName=\"close\"></thy-icon>\n            </button>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div\n                    class=\"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\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <div class=\"cell-operations\" [class.visible]=\"fieldMenuVisible()[field._id]\">\n                                <a\n                                    thyAction\n                                    [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                    href=\"javascript:;\"\n                                    (click)=\"fieldMenuMoreClick($event, field._id)\"\n                                    ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                                ></a>\n                            </div>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"d-flex flex-column ai-record-detail\">\n    <div class=\"d-flex align-items-center justify-content-between pl-8 pr-5 record-detail-header\">\n        <span class=\"record-title\" thyFlexibleText [thyTooltipContent]=\"recordTitle()\">\n            {{ recordTitle() }}\n        </span>\n\n        <div class=\"record-navigation\">\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasPrevious\" (click)=\"previousRecord()\"\n                ><thy-icon thyIconName=\"angle-up\"></thy-icon\n            ></a>\n\n            <a thyAction href=\"javascript:;\" [thyDisabled]=\"!recordNavigation()?.hasNext\" (click)=\"nextRecord()\"\n                ><thy-icon thyIconName=\"angle-down\"></thy-icon\n            ></a>\n        </div>\n        <thy-divider [thyVertical]=\"true\" thyColor=\"light\"></thy-divider>\n        <div class=\"header-operations\">\n            <a\n                thyAction\n                thyActiveClass=\"active\"\n                href=\"javascript:;\"\n                [thyDropdown]=\"headerMoreMenu\"\n                thyTrigger=\"click\"\n                thyPlacement=\"bottomRight\"\n                ><thy-icon thyIconName=\"list\"></thy-icon\n            ></a>\n\n            <thy-dropdown-menu #headerMoreMenu>\n                <a thyDropdownMenuItem [thyDisabled]=\"readonly()\" href=\"javascript:;\" (click)=\"deleteRecord()\">\n                    <thy-icon thyIconName=\"trash\"></thy-icon>\n                    <span>{{ i18nTexts().deleteRecord }}</span>\n                </a>\n            </thy-dropdown-menu>\n\n            <a thyAction href=\"javascript:;\" (click)=\"close()\"><thy-icon thyIconName=\"close\"></thy-icon></a>\n        </div>\n    </div>\n\n    <div class=\"record-detail-body\">\n        <div class=\"px-8 cell-list-viewport\">\n            @for (field of fields(); track field._id) {\n                <div class=\"pt-4 cell-item\" [class.active]=\"activeFieldId === field._id\">\n                    <div #fieldMenuOrigin class=\"d-flex align-items-center justify-content-between mb-2 cell-header\">\n                        <div class=\"d-flex align-items-center cell-label\">\n                            <span class=\"d-flex align-items-center mr-2 text-muted font-size-md\">\n                                @if (fieldIconPath(field)) {\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n                                        <path [attr.d]=\"fieldIconPath(field)\" fill=\"currentColor\"></path>\n                                    </svg>\n                                }\n                            </span>\n                            <span class=\"d-flex align-items-center font-size-base\">\n                                {{ field.name }}\n                            </span>\n                        </div>\n                        @if (!readonly()) {\n                            <a\n                                class=\"field-action\"\n                                thyAction\n                                [thyActionActive]=\"fieldMenuActive()[field._id]\"\n                                href=\"javascript:;\"\n                                (click)=\"fieldMenuMoreClick($event, field._id, fieldMenuOrigin)\"\n                                ><thy-icon thyIconName=\"more-vertical\"></thy-icon\n                            ></a>\n                        }\n                    </div>\n\n                    <div class=\"dynamic-cell-editor\" (click)=\"cellClick(field._id)\">\n                        <ai-dynamic-cell-editor\n                            [aiTable]=\"aiTable()\"\n                            [fieldId]=\"field._id\"\n                            [recordId]=\"currentRecordId()\"\n                            [references]=\"references()\"\n                            (updateFieldValues)=\"fieldValueChange($event)\"\n                        >\n                        </ai-dynamic-cell-editor>\n                    </div>\n                </div>\n            }\n        </div>\n        <div class=\"py-4 px-5\">\n            @if (!readonly()) {\n                <button class=\"p-0\" thyButton=\"link-secondary\" thySize=\"md\" (click)=\"addNewField($event)\">\n                    <thy-icon thyIconName=\"plus\"></thy-icon>\n                    <span>{{ i18nTexts().addField }}</span>\n                </button>\n            }\n        </div>\n    </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { aiTable: [{ type: i0.Input, args: [{ isSignal: true, alias: "aiTable", required: true }] }], recordId: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordId", required: true }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], recordIdChange: [{ type: i0.Output, args: ["recordIdChange"] }], fieldOperationsMenuTemplate: [{ type: i0.ViewChild, args: ['fieldOperationsMenuTemplate', { isSignal: true }] }] } });
 
 class AITableGridEventService {
@@ -13478,6 +13474,7 @@ class RecordDetailService {
             from: 'right',
             width: '480px',
             hasBackdrop: false,
+            viewContainerRef: config.viewContainerRef,
             panelClass: 'ai-expand-record-slide',
             initialState: {
                 aiTable: config.aiTable,