@ai-table/grid 0.0.16 → 0.0.18

package/fesm2022/ai-table-grid.mjs

@@ -19,7 +19,7 @@ import { ThyButton } from 'ngx-tethys/button';
 import * as i2 from 'ngx-tethys/form';
 import { ThyFormSubmitDirective, ThyFormModule, ThyUniqueCheckValidator, ThyConfirmValidatorDirective } from 'ngx-tethys/form';
 import * as _ from 'lodash';
-import ___default from 'lodash';
+import ___default, { isNil } from 'lodash';
 import { ThyNotifyService } from 'ngx-tethys/notify';
 import { ThyInputNumber } from 'ngx-tethys/input-number';
 import { ThySlider } from 'ngx-tethys/slider';
@@ -406,7 +406,7 @@ class Coordinate {
                 offset = itemMetadata.offset + itemMetadata.size;
             }
             for (let i = lastMeasuredIndex + 1; i <= index; i++) {
-                const size = isColumnType ? this.columnIndicesMap[i] : this.rowIndicesMap[i] ?? this.rowHeight;
+                const size = isColumnType ? this.columnIndicesMap[i] : (this.rowIndicesMap[i] ?? this.rowHeight);
                 cellMetadataMap[i] = {
                     offset,
                     size
@@ -1603,7 +1603,7 @@ class FieldMenu extends ThyDropdownAbstractMenu {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.type === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: FieldMenu, isStandalone: true, selector: "field-menu", inputs: { fieldId: "fieldId", aiTable: "aiTable", fieldMenus: "fieldMenus", origin: "origin", position: "position" }, usesInheritance: true, ngImport: i0, template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n", dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "component", type: ThyDivider, selector: "thy-divider", inputs: ["thyVertical", "thyStyle", "thyColor", "thyText", "thyTextDirection", "thyDeeper"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FieldMenu, decorators: [{
             type: Component,
@@ -1614,7 +1614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemNameDirective,
                         ThyDropdownMenuItemIconDirective
-                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if (menu.type === 'divider') {\n        <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n    } @else {\n        @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n            <a thyDropdownMenuItem href=\"javascript:;\" (click)=\"execute(menu)\">\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
+                    ], template: "@for (menu of fieldMenus; track index; let index = $index) {\n    @if ((menu.hidden && !menu.hidden(aiTable, field)) || !menu.hidden) {\n        @if (menu.type === 'divider') {\n            <thy-divider [thyStyle]=\"'solid'\"></thy-divider>\n        } @else {\n            <a\n                thyDropdownMenuItem\n                href=\"javascript:;\"\n                (click)=\"execute(menu)\"\n                [thyDisabled]=\"!!(menu.disabled && menu.disabled(aiTable, field))\"\n            >\n                <thy-icon [thyIconName]=\"menu.icon!\"></thy-icon>\n                <span>{{ menu.name! }}</span>\n            </a>\n        }\n    }\n}\n" }]
         }], propDecorators: { fieldId: [{
                 type: Input,
                 args: [{ required: true }]
@@ -1630,7 +1630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                 type: Input
             }] } });
 
-const buildGridLinearRows = (visibleRecords) => {
+const buildGridLinearRows = (visibleRecords, isAddingVisible = true) => {
     const linearRows = [];
     let displayRowIndex = 0;
     [...visibleRecords, { _id: '' }].forEach((row) => {
@@ -1642,7 +1642,7 @@ const buildGridLinearRows = (visibleRecords) => {
                 displayIndex: displayRowIndex
             });
         }
-        if (!row._id) {
+        if (isAddingVisible && !row._id) {
             linearRows.push({
                 type: AITableRowType.add,
                 _id: ''
@@ -1681,8 +1681,9 @@ class AITableGridFieldService {
         return this.thyPopover.open(component, {
             origin,
             originPosition: position,
-            manualClosure: true,
             placement: 'bottomLeft',
+            manualClosure: true,
+            originActiveClass: undefined,
             initialState: {
                 aiTable,
                 aiEditField: field,
@@ -1696,13 +1697,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
@@ -2509,6 +2507,9 @@ class AITableGridBase {
         this.aiAddRecord = output();
         this.aiAddField = output();
         this.aiUpdateFieldValue = output();
+        this.fieldMenus = computed(() => {
+            return this.aiFieldConfig()?.fieldMenus || [];
+        });
         this.gridData = computed(() => {
             if (this.aiBuildRenderDataFn && this.aiBuildRenderDataFn() && this.aiTable) {
                 return this.aiBuildRenderDataFn()(this.aiTable);
@@ -2528,7 +2529,6 @@ class AITableGridBase {
     ngOnInit() {
         this.initAITable();
         this.initService();
-        this.buildFieldMenus();
     }
     initAITable() {
         this.aiTable = createAITable(this.aiRecords, this.aiFields);
@@ -2544,9 +2544,6 @@ class AITableGridBase {
         this.aiTableGridFieldService.initAIFieldConfig(this.aiFieldConfig());
         AI_TABLE_GRID_FIELD_SERVICE_MAP.set(this.aiTable, this.aiTableGridFieldService);
     }
-    buildFieldMenus() {
-        this.fieldMenus = this.aiFieldConfig()?.fieldMenus || [];
-    }
     addRecord() {
         const records = this.gridData().records;
         const recordCount = records.length;
@@ -2647,7 +2644,7 @@ class AITableDomGrid extends AITableGridBase {
             origin: moreBtn,
             editOrigin: fieldAction,
             fieldId: field._id,
-            fieldMenus: this.fieldMenus
+            fieldMenus: this.fieldMenus()
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableDomGrid, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
@@ -3190,47 +3187,58 @@ 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 { pointPosition: { targetName }, readonly } = this.config();
+            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,
-                    mouseStyle: 'pointer'
+                    fieldId: this.config().fields[this.config().columnStopIndex]._id,
+                    mouseStyle: readonly ? 'default' : '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 { readonly } = this.config();
+            const offsetY = (this.config().coordinate.rowInitSize - AI_TABLE_ICON_COMMON_SIZE) / 2;
             return {
                 x: AI_TABLE_CELL_PADDING,
                 y: offsetY,
                 data: AddOutlinedPath,
                 fill: Colors.gray600,
-                listening: false
+                listening: false,
+                visible: isNil(readonly) ? true : !readonly
             };
         });
     }
     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.0.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>
+                @if (addIconConfig().visible) {
+                    <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 +3248,18 @@ 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>
+                @if (addIconConfig().visible) {
+                    <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 +4237,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 +4324,7 @@ class AddRowLayout extends Layout {
                 isHoverRow
             });
         }
-        this.renderAddFieldBlank();
+        this.renderAddFieldBlank({ isHoverRow });
     }
     renderCommonCell({ isHoverRow }) {
         if (this.isFirst || this.isLast)
@@ -4971,22 +4987,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 }) {
@@ -5008,7 +5033,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();
@@ -5050,8 +5075,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;
@@ -5349,11 +5374,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
@@ -5391,7 +5416,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
                 }]
         }] });
@@ -5576,7 +5601,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
                 }]
         }] });
@@ -5917,6 +5942,9 @@ class AITableRenderer {
         this.fields = computed(() => {
             return AITable.getVisibleFields(this.config().aiTable);
         });
+        this.readonly = computed(() => {
+            return this.config()?.readonly;
+        });
         this.coordinate = computed(() => {
             return this.config()?.coordinate;
         });
@@ -5942,8 +5970,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();
@@ -6004,9 +6031,9 @@ class AITableRenderer {
                 offsetY: scrollTop
             };
         });
-        this.columnHeadConfig = computed(() => {
+        this.columnHeadOrAddFieldConfig = computed(() => {
             const { columnStartIndex, columnStopIndex } = this.visibleRangeInfo();
-            const { aiTable, coordinate } = this.config();
+            const { aiTable, coordinate, readonly } = this.config();
             const { pointPosition } = aiTable.context;
             const fields = this.fields();
             return {
@@ -6015,7 +6042,8 @@ class AITableRenderer {
                 fields,
                 columnStartIndex,
                 columnStopIndex,
-                pointPosition: pointPosition()
+                pointPosition: pointPosition(),
+                readonly
             };
         });
         this.cellsConfig = computed(() => {
@@ -6048,7 +6076,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 [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "component", type: KoContainer, selector: "ko-layer, ko-fastlayer, ko-group" }, { kind: "component", type: KoStage, selector: "ko-stage", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: KoShape, selector: "ko-shape, ko-circle, ko-label, ko-rect, ko-ellipse, ko-wedge, ko-line, ko-sprite, ko-image, ko-text, ko-text-path, ko-star, ko-ring, ko-arc, ko-tag, ko-path, ko-regular-polygon, ko-arrow, ko-transformer", inputs: ["config"], outputs: ["koMouseover", "koMousemove", "koMouseout", "koMouseenter", "koMouseleave", "koMousedown", "koMouseup", "koWheel", "koContextmenu", "koClick", "koDblclick", "koTouchstart", "koTouchmove", "koTouchend", "koTap", "koDbltap", "koDragstart", "koDragmove", "koDragend"] }, { kind: "component", type: AITableColumnHeads, selector: "ai-table-column-heads", inputs: ["config"] }, { kind: "component", type: AITableFrozenColumnHeads, selector: "ai-table-frozen-column-heads", inputs: ["config"] }, { kind: "component", type: AITableCells, selector: "ai-table-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenCells, selector: "ai-table-frozen-cells", inputs: ["config"] }, { kind: "component", type: AITableFrozenPlaceholderCells, selector: "ai-table-frozen-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITablePlaceholderCells, selector: "ai-table-placeholder-cells", inputs: ["config"] }, { kind: "component", type: AITableAddField, selector: "ai-table-add-field", inputs: ["config"] }, { kind: "component", type: AITableHoverRowHeads, selector: "ai-table-hover-row-heads", inputs: ["config"] }, { kind: "component", type: AITableOtherRows, selector: "ai-table-other-rows", inputs: ["config"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AITableRenderer, decorators: [{
             type: Component,
@@ -6056,8 +6084,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
                         KoContainer,
                         KoStage,
                         KoShape,
-                        AITableIcon,
-                        AITableFieldHead,
                         AITableColumnHeads,
                         AITableFrozenColumnHeads,
                         AITableCells,
@@ -6067,14 +6093,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 [config]=\"columnHeadOrAddFieldConfig()\"></ai-table-add-field>\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"attachGroupConfig()\">\n                <ko-group [config]=\"offsetConfig()\">\n                    <ai-table-placeholder-cells [config]=\"cellsConfig()\"></ai-table-placeholder-cells>\n                    @if (activeCellBorderConfig().activeCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().activeCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n\n            <ko-group [config]=\"frozenAttachGroupConfig()\">\n                <ko-group [config]=\"offsetYConfig()\">\n                    @if (activeCellBorderConfig().frozenActiveCellBorder) {\n                        <ko-rect [config]=\"activeCellBorderConfig().frozenActiveCellBorder!\"></ko-rect>\n                    }\n                </ko-group>\n            </ko-group>\n        </ko-group>\n    </ko-layer>\n</ko-stage>\n\n<ng-content></ng-content>\n" }]
         }] });
 
 class AITableGrid extends AITableGridBase {
     constructor() {
         super();
         this.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;
@@ -6083,7 +6108,7 @@ class AITableGrid extends AITableGridBase {
         this.verticalBarRef = viewChild('verticalBar');
         this.horizontalBarRef = viewChild('horizontalBar');
         this.linearRows = computed(() => {
-            return buildGridLinearRows(this.gridData().records);
+            return buildGridLinearRows(this.gridData().records, !this.aiReadonly());
         });
         this.visibleColumnsMap = computed(() => {
             const columns = AITable.getVisibleFields(this.aiTable);
@@ -6114,7 +6139,8 @@ class AITableGrid extends AITableGridBase {
                 coordinate: coordinate,
                 containerWidth: this.containerRect().width,
                 containerHeight: this.containerRect().height,
-                references: this.aiReferences()
+                references: this.aiReferences(),
+                readonly: this.aiReadonly()
             };
         });
         this.coordinate = computed(() => {
@@ -6123,6 +6149,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);
@@ -6168,7 +6197,7 @@ class AITableGrid extends AITableGridBase {
             }
         });
         effect(() => {
-            if (this.aiTable.context?.pointPosition()) {
+            if (!this.aiReadonly() && this.aiTable.context?.pointPosition()) {
                 this.toggleHoverCellEditor();
             }
         });
@@ -6239,7 +6268,7 @@ class AITableGrid extends AITableGridBase {
         mouseEvent.preventDefault();
         const { context } = this.aiTable;
         const { targetName, rowIndex: pointRowIndex } = context.pointPosition();
-        if (mouseEvent.button !== AITableMouseDownType.Left)
+        if (mouseEvent.button !== AITableMouseDownType.Left || (targetName !== AI_TABLE_FIELD_HEAD_MORE && this.aiReadonly()))
             return;
         switch (targetName) {
             case AI_TABLE_ROW_ADD_BUTTON: {
@@ -6279,24 +6308,27 @@ 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');
                     this.aiTableGridFieldService.openFieldMenu(this.aiTable, {
                         fieldId: fieldId,
-                        fieldMenus: this.fieldMenus,
+                        fieldMenus: this.fieldMenus(),
                         origin: this.containerElement(),
                         position,
                         editOrigin: editOrigin,
-                        editOriginPosition
+                        editFieldPosition
                     });
                 }
                 return;
         }
     }
     stageDblclick(e) {
+        if (this.aiReadonly()) {
+            return;
+        }
         const _targetName = e.event.target.name();
         const { fieldId, recordId } = getDetailByTargetName(_targetName);
         if (!recordId || !fieldId) {
@@ -6364,7 +6396,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 });
@@ -6417,13 +6449,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: () => [] });
 
 /**