@ai-table/grid 0.4.8 → 0.5.0

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

@@ -49,6 +49,7 @@
 
     .cell-item {
         .field-action {
+            margin-right: -15px;
             display: none;
             &.active {
                 display: block;

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() {
@@ -6282,7 +6284,7 @@ class MemberLayout extends CellBaseLayout {
             const count = this.items.length - renderItems.length;
             const renderAtoms = [];
             let itemWidth = 2 * AI_TABLE_TAG_PADDING;
-            const textAtom = this.getTextAtom(`+${count}`, undefined, FONT_SIZE_SM);
+            const textAtom = this.getTextAtom(`+${count}`, undefined, DEFAULT_FONT_SIZE);
             itemWidth += textAtom.width;
             renderAtoms.push({
                 type: AITableRenderAtomType.circle,
@@ -6295,7 +6297,7 @@ class MemberLayout extends CellBaseLayout {
             renderAtoms.push({
                 ...textAtom,
                 x: lastItem.x + (AITableAvatarSize.size24 - textAtom.width) / 2,
-                y: lastItem.y + (AITableAvatarSize.size24 - FONT_SIZE_SM) / 2,
+                y: lastItem.y + (AITableAvatarSize.size24 - DEFAULT_FONT_SIZE) / 2,
                 fillStyle: Colors.white
             });
             return [
@@ -6333,12 +6335,12 @@ class MemberLayout extends CellBaseLayout {
             });
             const textX = AITableAvatarSize.size24 + AI_TABLE_MEMBER_ITEM_AVATAR_MARGIN_RIGHT;
             const textWidth = containerMaxWidth - textX;
-            const textAtom = this.getTextAtom(display_name || '', textWidth, FONT_SIZE_SM);
+            const textAtom = this.getTextAtom(display_name || '', textWidth, DEFAULT_FONT_SIZE);
             renderAtoms.push({
                 ...textAtom,
                 type: AITableRenderAtomType.text,
                 x: textX,
-                y: (AITableAvatarSize.size24 - FONT_SIZE_SM) / 2,
+                y: (AITableAvatarSize.size24 - DEFAULT_FONT_SIZE) / 2,
                 width: textWidth
             });
         }
@@ -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" }] : []));
@@ -9561,17 +9573,19 @@ class AITableFieldStat {
                 statMenus: fieldModel.getStatTypes(aiTable)
             }
         });
-        ref.componentInstance.menuClick.subscribe((event) => {
-            this.isActive.set(false);
-            actions.setFieldStatType({
-                path: [field._id],
-                statType: event.menu.type
+        if (ref) {
+            ref.componentInstance.menuClick.subscribe((event) => {
+                this.isActive.set(false);
+                actions.setFieldStatType({
+                    path: [field._id],
+                    statType: event.menu.type
+                });
             });
-        });
-        ref.afterClosed().subscribe(() => {
-            this.isActive.set(false);
-            this.hover.emit(false);
-        });
+            ref.afterClosed().subscribe(() => {
+                this.isActive.set(false);
+                this.hover.emit(false);
+            });
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AITableFieldStat, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AITableFieldStat, isStandalone: true, selector: "ai-table-field-stat", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { hover: "hover" }, ngImport: i0, template: `
@@ -11973,7 +11987,7 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SelectCellEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", 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: 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: "20.3.14", 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", "thyItemSize", "thyShowSearch", "thyPlaceHolder", "thyServerSearch", "thyLoadState", "thyAutoActiveFirstItem", "thyMode", "thySize", "thyEmptyStateText", "thyEmptySearchMessageText", "thyEnableScrollLoad", "thyAllowClear", "thyDisabled", "thySortComparator", "thyFooterTemplate", "thyPlacement", "thyOrigin", "thyFooterClass", "thyAutoExpand", "thyHasBackdrop", "thyMaxTagCount", "thyBorderless", "thyVirtualScroll", "thyOptions", "thyPreset"], outputs: ["thyOnSearch", "thyOnScrollToBottom", "thyOnExpandStatusChange"], exportAs: ["thySelect"] }, { kind: "component", type: ThyOption, selector: "thy-option", inputs: ["thyValue", "thyRawValue", "thyLabelText", "thyShowOptionCustom", "thySearchKey", "thyDisabled"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: ThyTooltipModule }, { kind: "component", type: SelectOptionComponent, selector: "select-option", inputs: ["field", "displayOption"] }, { 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: "20.3.14", ngImport: i0, type: SelectCellEditorComponent, decorators: [{
             type: Component,
@@ -12678,7 +12692,7 @@ class RecordDetailComponent {
                     });
                 }
             }
-        });
+        }) ?? null;
         if (this.fieldMenuPopoverRef) {
             this.fieldMenuPopoverRef.beforeClosed().subscribe(() => {
                 if (!isSelfClose) {
@@ -12739,7 +12753,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 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: 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,
@@ -12748,11 +12762,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 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" }]
+                    ], 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 {
@@ -12914,7 +12929,7 @@ class AITableGridEventService {
             manualClosure: true,
             animationDisabled: true,
             autoAdaptive: true
-        });
+        }) ?? null;
         if (this.cellEditorPopoverRef) {
             const wheelEvent = fromEvent(this.cellEditorPopoverRef.componentInstance.elementRef.nativeElement, 'wheel').subscribe((event) => {
                 const field = aiTable.fieldsMap()[fieldId];
@@ -13452,8 +13467,8 @@ class RecordDetailService {
         this.config = null;
     }
     open(config) {
-        if (this.isOpen()) {
-            this.currentSlideRef?.componentInstance.setSelection(config.recordId);
+        if (this.isOpen() && this.currentSlideRef) {
+            this.currentSlideRef.componentInstance.setSelection(config.recordId);
             return this.currentSlideRef;
         }
         this.config = config;
@@ -13470,7 +13485,7 @@ class RecordDetailService {
                 actions: config.actions
             },
             ...config.slideConfig
-        });
+        }) ?? null;
         if (this.currentSlideRef) {
             this.currentSlideRef.afterOpened().subscribe(() => {
                 this.setupDocumentClickListener(config);
@@ -13479,6 +13494,9 @@ class RecordDetailService {
                 this.close();
             });
         }
+        if (!this.currentSlideRef) {
+            throw new Error('Failed to open slide');
+        }
         return this.currentSlideRef;
     }
     close() {