@ai-table/grid 0.0.15 → 0.0.17

package/fesm2022/ai-table-grid.mjs

@@ -1252,7 +1252,7 @@ class SelectCellEditorComponent extends AbstractEditCellEditor {
     }
     updateValue(value) {
         if (!value) {
-            const value = this.isMultiple ? this.modelValue : [this.modelValue];
+            const value = this.isMultiple ? this.modelValue : (this.modelValue && [this.modelValue]) || [];
             this.updateFieldValue.emit({
                 value: value,
                 path: [this.record()._id, this.field()._id]
@@ -1681,8 +1681,8 @@ class AITableGridFieldService {
         return this.thyPopover.open(component, {
             origin,
             originPosition: position,
-            manualClosure: true,
             placement: 'bottomLeft',
+            originActiveClass: undefined,
             initialState: {
                 aiTable,
                 aiEditField: field,
@@ -1696,13 +1696,10 @@ class AITableGridFieldService {
             origin,
             originPosition: position,
             placement: 'bottomLeft',
-            originActiveClass: origin ? 'active' : undefined,
-            hasBackdrop: false,
-            insideClosable: true,
-            outsideClosable: true,
+            originActiveClass: undefined,
             initialState: {
                 origin: editOrigin,
-                position: options.editOriginPosition,
+                position: options.editFieldPosition,
                 aiTable,
                 fieldId,
                 fieldMenus
@@ -3190,33 +3187,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 
 class AITableAddField {
     constructor() {
-        this.coordinate = input.required();
-        this.fields = input.required();
-        this.columnStopIndex = input.required();
+        this.config = input.required();
         this.btnWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         this.x = computed(() => {
-            const lastColumnWidth = this.coordinate().getColumnWidth(this.columnStopIndex());
-            const lastColumnOffset = this.coordinate().getColumnOffset(this.columnStopIndex());
+            const lastColumnWidth = this.config().coordinate.getColumnWidth(this.config().columnStopIndex);
+            const lastColumnOffset = this.config().coordinate.getColumnOffset(this.config().columnStopIndex);
             return lastColumnWidth + lastColumnOffset;
         });
         this.rectConfig = computed(() => {
+            const { targetName } = this.config().pointPosition;
+            const fill = targetName === AI_TABLE_FIELD_ADD_BUTTON ? Colors.gray80 : Colors.white;
             return {
                 name: generateTargetName({
                     targetName: AI_TABLE_FIELD_ADD_BUTTON,
-                    fieldId: this.fields()[this.columnStopIndex()]._id,
+                    fieldId: this.config().fields[this.config().columnStopIndex]._id,
                     mouseStyle: 'pointer'
                 }),
                 x: AI_TABLE_OFFSET,
                 y: AI_TABLE_OFFSET,
-                width: this.coordinate().containerWidth - this.x() < this.btnWidth ? this.btnWidth : this.coordinate().containerWidth - this.x(),
-                height: this.coordinate().rowInitSize,
+                width: this.config().coordinate.containerWidth - this.x() < this.btnWidth
+                    ? this.btnWidth
+                    : this.config().coordinate.containerWidth - this.x(),
+                height: this.config().coordinate.rowInitSize,
                 stroke: Colors.gray200,
                 strokeWidth: 1,
-                listening: true
+                listening: true,
+                fill
             };
         });
         this.addIconConfig = computed(() => {
-            const offsetY = (this.coordinate().rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
+            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
             return {
                 x: AI_TABLE_CELL_PADDING,
                 y: offsetY,
@@ -3227,10 +3227,14 @@ class AITableAddField {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableAddField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { coordinate: { classPropertyName: "coordinate", publicName: "coordinate", isSignal: true, isRequired: true, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: true, transformFunction: null }, columnStopIndex: { classPropertyName: "columnStopIndex", publicName: "columnStopIndex", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.0", type: AITableAddField, isStandalone: true, selector: "ai-table-add-field", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
         <ko-group [config]="{ x: x() }">
-            <ko-rect [config]="rectConfig()"></ko-rect>
-            <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            </ko-group>
         </ko-group>
     `, isInline: true, dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableIcon, selector: "ai-table-icon", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -3240,12 +3244,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                     selector: 'ai-table-add-field',
                     template: `
         <ko-group [config]="{ x: x() }">
-            <ko-rect [config]="rectConfig()"></ko-rect>
-            <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            <ko-group>
+                <ko-rect [config]="rectConfig()"></ko-rect>
+            </ko-group>
+            <ko-group>
+                <ai-table-icon [config]="addIconConfig()"></ai-table-icon>
+            </ko-group>
         </ko-group>
     `,
                     standalone: true,
-                    imports: [KoContainer, KoStage, KoShape, AITableIcon],
+                    imports: [KoContainer, KoShape, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -4223,23 +4231,25 @@ class Layout extends Drawer {
     get isLast() {
         return this.columnIndex === this.columnCount - 1;
     }
-    renderAddFieldBlank() {
-        const width = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
-        const y = this.y;
+    renderAddFieldBlank({ style, isHoverRow }) {
         const rowHeight = this.rowHeight;
+        const fill = style?.fill || (isHoverRow ? this.colors.gray80 : this.colors.transparent);
+        const addFieldBlankX = this.x + this.columnWidth + AI_TABLE_OFFSET;
         this.rect({
-            x: this.x + 0.5,
-            y: y - 0.5,
-            width: this.containerWidth - this.x < width ? width : this.containerWidth - this.x,
-            height: rowHeight + 1,
-            fill: this.colors.transparent
+            x: addFieldBlankX,
+            y: this.y + AI_TABLE_OFFSET,
+            width: this.containerWidth - addFieldBlankX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH
+                : this.containerWidth - addFieldBlankX,
+            height: rowHeight,
+            fill
         });
     }
 }
 
 class AddRowLayout extends Layout {
-    renderAddFieldBlank() {
-        super.renderAddFieldBlank();
+    renderAddFieldBlank({ isHoverRow }) {
+        super.renderAddFieldBlank({ isHoverRow });
         const rowHeight = this.rowHeight;
         const defaultWidth = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         const width = this.containerWidth - this.x < defaultWidth ? defaultWidth : this.containerWidth - this.x;
@@ -4308,7 +4318,7 @@ class AddRowLayout extends Layout {
                 isHoverRow
             });
         }
-        this.renderAddFieldBlank();
+        this.renderAddFieldBlank({ isHoverRow });
     }
     renderCommonCell({ isHoverRow }) {
         if (this.isFirst || this.isLast)
@@ -4652,6 +4662,9 @@ class CellDrawer extends Drawer {
         if (!isValid || transformValue.length === 0) {
             return;
         }
+        if (!transformValue[0]) {
+            console.warn(`single select field unexpected value: ${transformValue[0]}`);
+        }
         const isOperating = isActive;
         const item = field.settings.options?.find((option) => option._id === transformValue[0]);
         const itemName = item?.text || '';
@@ -4968,22 +4981,31 @@ class RecordRowLayout extends Layout {
         }
     }
     // 尾列
-    renderLastCell({ style }) {
+    renderLastCell({ style, isHoverRow }) {
         if (!this.isLast || this.isFirst)
             return;
         const { fill, stroke } = style;
-        const columnWidth = this.columnWidth;
-        const width = columnWidth;
         const colors = AITable.getColors();
         // 背景、边框
         this.rect({
             x: this.x,
             y: this.y,
-            width,
+            width: this.columnWidth,
             height: this.rowHeight,
             fill: fill || colors.white,
             stroke: stroke || colors.gray200
         });
+        // 延伸到 FIELD_ADD_BUTTON
+        super.renderAddFieldBlank({ style, isHoverRow });
+        const rowHeight = this.rowHeight;
+        const startX = this.x + this.columnWidth;
+        const lineWidth = this.containerWidth - startX < AI_TABLE_FIELD_ADD_BUTTON_WIDTH ? AI_TABLE_FIELD_ADD_BUTTON_WIDTH : this.containerWidth - startX;
+        this.line({
+            x: startX,
+            y: this.y,
+            points: [0, rowHeight, lineWidth, rowHeight],
+            stroke: this.colors.gray200
+        });
     }
     // 绘制中间的普通单元格
     renderCommonCell({ style }) {
@@ -5005,7 +5027,7 @@ class RecordRowLayout extends Layout {
         const { row, style, isCheckedRow, isHoverRow } = config;
         this.renderFirstCell({ row, style, isCheckedRow, isHoverRow });
         this.renderCommonCell({ style });
-        this.renderLastCell({ style });
+        this.renderLastCell({ style, isHoverRow });
     }
 }
 const recordRowLayout = new RecordRowLayout();
@@ -5047,8 +5069,8 @@ const createCells = (config) => {
             const row = context.linearRows()[rowIndex];
             const { _id: recordId, type } = row;
             const y = coordinate.getRowOffset(rowIndex) + AI_TABLE_OFFSET;
-            const { rowIndex: pointRowIndex, areaType, targetName } = context.pointPosition();
-            const isHover = pointRowIndex === rowIndex && areaType !== AITableAreaType.none;
+            const { rowIndex: pointRowIndex, targetName } = context.pointPosition();
+            const isHover = pointRowIndex === rowIndex;
             switch (type) {
                 case AITableRowType.add: {
                     const isHoverRow = isHover && targetName === AI_TABLE_ROW_ADD_BUTTON;
@@ -5346,11 +5368,11 @@ class AITableFieldHead {
                     targetName: AI_TABLE_FIELD_HEAD_MORE,
                     fieldId: field._id
                 }),
-                x: width - AI_TABLE_CELL_PADDING - AI_TABLE_ACTION_COMMON_SIZE,
+                x: width - AI_TABLE_ACTION_COMMON_SIZE,
                 y: commonIconOffsetY,
                 data: MoreStandOutlinedPath,
                 fill: isHoverIcon ? Colors.primary : Colors.gray600,
-                background: isSelected || isHoverIcon ? Colors.itemActiveBgColor : Colors.gray80,
+                background: Colors.transparent,
                 backgroundWidth: AI_TABLE_ACTION_COMMON_SIZE,
                 backgroundHeight: AI_TABLE_ACTION_COMMON_SIZE,
                 cornerRadius: 4
@@ -5388,7 +5410,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         </ko-group>
     `,
                     standalone: true,
-                    imports: [KoContainer, KoStage, KoShape, AITableFieldIcon, AITableText, AITableIcon],
+                    imports: [KoContainer, KoShape, AITableFieldIcon, AITableText, AITableIcon],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -5573,7 +5595,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
         <ko-rect [config]="headBgConfig()"></ko-rect>
     `,
                     standalone: true,
-                    imports: [KoStage, KoShape, AITableFieldHead, AITableIcon, KoContainer],
+                    imports: [KoShape, AITableFieldHead, AITableIcon, KoContainer],
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
@@ -5939,8 +5961,7 @@ class AITableRenderer {
             return this.coordinate().getColumnOffset(this.visibleRangeInfo().columnStopIndex);
         });
         this.cellGroupClipWidth = computed(() => {
-            const { scrollLeft } = this.scrollState();
-            return Math.min(this.containerWidth() - this.frozenAreaWidth(), AI_TABLE_FIELD_ADD_BUTTON_WIDTH + this.lastColumnOffset() + this.lastColumnWidth() - scrollLeft - this.frozenAreaWidth());
+            return this.containerWidth() - this.frozenAreaWidth();
         });
         this.stageConfig = computed(() => {
             const { isScrolling } = this.scrollState();
@@ -6001,7 +6022,7 @@ class AITableRenderer {
                 offsetY: scrollTop
             };
         });
-        this.columnHeadConfig = computed(() => {
+        this.columnHeadOrAddFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
             const { aiTable, coordinate } = this.config();
             const { pointPosition } = aiTable.context;
@@ -6045,7 +6066,7 @@ class AITableRenderer {
         this.koDblclick.emit(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field\n                        [coordinate]=\"coordinate()\"\n                        [fields]=\"fields()\"\n                        [columnStopIndex]=\"visibleRangeInfo().columnStopIndex\"\n                    ></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["coordinate", "fields", "columnStopIndex"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableRenderer, isStandalone: true, selector: "ai-table-renderer", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { koMousemove: "koMousemove", koMousedown: "koMousedown", koWheel: "koWheel", koClick: "koClick", koDblclick: "koDblclick" }, ngImport: i0, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field\n                        [config]=\"columnHeadOrAddFieldConfig()\"\n                    ></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -6053,8 +6074,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         KoContainer,
                         KoStage,
                         KoShape,
-                        AITableIcon,
-                        AITableFieldHead,
                         AITableColumnHeads,
                         AITableFrozenColumnHeads,
                         AITableCells,
@@ -6064,14 +6083,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         AITableAddField,
                         AITableHoverRowHeads,
                         AITableOtherRows
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field\n                        [coordinate]=\"coordinate()\"\n                        [fields]=\"fields()\"\n                        [columnStopIndex]=\"visibleRangeInfo().columnStopIndex\"\n                    ></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ko-stage\n    [config]=\"stageConfig()\"\n    (koMousemove)=\"stageMousemove($event)\"\n    (koMousedown)=\"stageMousedown($event)\"\n    (koClick)=\"stageClick($event)\"\n    (koDblclick)=\"stageDblclick($event)\"\n>\n    <ko-layer>\n        <ko-group [config]=\"gridGroupConfig()\">\n            <ko-group [config]=\"offsetYConfig()\">\n                <ai-table-frozen-cells [config]=\"cellsConfig()\"></ai-table-frozen-cells>\n                <ai-table-other-rows [config]=\"cellsConfig()\"></ai-table-other-rows>\n                <ai-table-hover-row-heads [config]=\"cellsConfig()\"></ai-table-hover-row-heads>\n                <ai-table-frozen-placeholder-cells [config]=\"cellsConfig()\"></ai-table-frozen-placeholder-cells>\n            </ko-group>\n\n            <ko-group>\n                <ai-table-frozen-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-frozen-column-heads>\n            </ko-group>\n\n            <ko-group [config]=\"commonGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-cells [config]=\"cellsConfig()\"></ai-table-cells>\n                </ko-group>\n\n                <ko-group [config]=\"offsetXConfig()\">\n                    <ai-table-column-heads [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-column-heads>\n                    <ai-table-add-field\n                        [config]=\"columnHeadOrAddFieldConfig()\"\n                    ></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableGrid extends AITableGridBase {
     constructor() {
         super();
         this.fieldHeadHeight = AI_TABLE_FIELD_HEAD_HEIGHT;
-        this.ADD_BUTTON_WIDTH = AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
         this.containerRect = signal({ width: 0, height: 0 });
         this.hasContainerRect = computed(() => {
             return this.containerRect().width > 0 && this.containerRect().height > 0;
@@ -6120,6 +6138,9 @@ class AITableGrid extends AITableGridBase {
         this.scrollTotalHeight = computed(() => {
             return Math.max(this.coordinate().totalHeight, this.containerRect().height - this.fieldHeadHeight);
         });
+        this.scrollbarWidth = computed(() => {
+            return this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
+        });
         this.scrollAction = (options) => {
             if (this.timer) {
                 cancelAnimationFrame(this.timer);
@@ -6276,8 +6297,8 @@ class AITableGrid extends AITableGridBase {
                         x: containerRect.x + moreRect.x,
                         y: containerRect.y + moreRect.y + moreRect.height
                     };
-                    const editOriginPosition = {
-                        x: AI_TABLE_POPOVER_LEFT_OFFSET + fieldGroupRect.x,
+                    const editFieldPosition = {
+                        x: containerRect.x + fieldGroupRect.x - AI_TABLE_CELL_PADDING,
                         y: containerRect.y + fieldGroupRect.y + fieldGroupRect.height
                     };
                     const editOrigin = this.containerElement().querySelector('.konvajs-content');
@@ -6287,7 +6308,7 @@ class AITableGrid extends AITableGridBase {
                         origin: this.containerElement(),
                         position,
                         editOrigin: editOrigin,
-                        editOriginPosition
+                        editFieldPosition
                     });
                 }
                 return;
@@ -6361,7 +6382,7 @@ class AITableGrid extends AITableGridBase {
     containerResizeListener() {
         this.resizeObserver = new ResizeObserver(() => {
             const containerWidth = this.containerElement().offsetWidth;
-            const totalWidth = this.coordinate().totalWidth + this.ADD_BUTTON_WIDTH;
+            const totalWidth = this.coordinate().totalWidth + AI_TABLE_FIELD_ADD_BUTTON_WIDTH;
             this.setContainerRect();
             if (containerWidth >= totalWidth) {
                 this.aiTable.context.setScrollState({ scrollLeft: 0 });
@@ -6414,13 +6435,13 @@ class AITableGrid extends AITableGridBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"coordinate().totalWidth + ADD_BUTTON_WIDTH\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: AITableGrid, isStandalone: true, selector: "ai-table-grid", host: { classAttribute: "ai-table-grid" }, providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "verticalBarRef", first: true, predicate: ["verticalBar"], descendants: true, isSignal: true }, { propertyName: "horizontalBarRef", first: true, predicate: ["horizontalBar"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n", dependencies: [{ kind: "component", type: AITableRenderer, selector: "ai-table-renderer", inputs: ["config"], outputs: ["koMousemove", "koMousedown", "koWheel", "koClick", "koDblclick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableGrid, decorators: [{
             type: Component,
             args: [{ selector: 'ai-table-grid', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'ai-table-grid'
-                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"coordinate().totalWidth + ADD_BUTTON_WIDTH\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
+                    }, imports: [AITableRenderer], providers: [AITableGridEventService, AITableGridFieldService, AITableGridSelectionService], template: "<div #container class=\"ai-table-grid-view\">\n    @if (hasContainerRect()) {\n        <ai-table-renderer\n            [config]=\"rendererConfig()\"\n            (koMousemove)=\"stageMousemove($event)\"\n            (koMousedown)=\"stageMousedown($event)\"\n            (koClick)=\"stageClick($event)\"\n            (koDblclick)=\"stageDblclick($event)\"\n        >\n            <div #horizontalBar class=\"ai-table-horizontal-scroll-bar-wrapper\" [style.width.px]=\"containerRect().width\">\n                <div class=\"ai-table-scroll-bar-inner\" [style.width.px]=\"scrollbarWidth()\"></div>\n            </div>\n            <div\n                #verticalBar\n                class=\"ai-table-vertical-scroll-bar-wrapper\"\n                [style.height.px]=\"containerRect().height - fieldHeadHeight\"\n                [style.top.px]=\"fieldHeadHeight\"\n            >\n                <div class=\"ai-table-scroll-bar-inner\" [style.height.px]=\"scrollTotalHeight()\"></div>\n            </div>\n        </ai-table-renderer>\n    }\n</div>\n" }]
         }], ctorParameters: () => [] });
 
 /**