@revolist/revogrid 4.23.0 → 4.23.2

package/dist/revo-grid/revogr-data_4.entry.js

@@ -2,11 +2,11 @@
  * Built by Revolist OU ❤️
  */
 import { r as registerInstance, d as createEvent, h, e as Host, g as getElement } from './index-Chp_81rd.js';
-import { M as ColumnService, u as isGrouping } from './column.service-DbpulTog.js';
+import { M as ColumnService, u as isGrouping } from './column.service-CC_SD8W3.js';
 import { B as ROW_FOCUSED_CLASS, b as getSourceItem, n as DATA_ROW, m as DATA_COL, M as MIN_COL_SIZE, r as HEADER_SORTABLE_CLASS, H as HEADER_CLASS, F as FOCUS_CLASS, k as getItemByIndex, u as HEADER_ROW_CLASS, v as HEADER_ACTUAL_ROW_CLASS } from './dimension.helpers-CGKwSvw6.js';
-import { G as GroupingRowRenderer, C as CellRenderer, R as RowRenderer, P as PADDING_DEPTH, S as SortingSign } from './cell-renderer-8UiGd-s7.js';
+import { G as GroupingRowRenderer, C as CellRenderer, R as RowRenderer, P as PADDING_DEPTH, S as SortingSign } from './cell-renderer-BtN-NGCk.js';
 import { c as FilterButton } from './filter.button-C8XTWPU2.js';
-import { H as HeaderCellRenderer } from './header-cell-renderer-DGI2FAD8.js';
+import { H as HeaderCellRenderer } from './header-cell-renderer-BsvUQ8GS.js';
 import { t as throttle, L as LocalScrollTimer, a as LocalScrollService, g as getContentSize } from './throttle-CaUDyxyU.js';
 import { H as HEADER_SLOT, C as CONTENT_SLOT, F as FOOTER_SLOT } from './viewport.helpers-CoCAvmZs.js';
 import './debounce-PCRWZliA.js';
@@ -434,22 +434,13 @@ const RevogrHeaderComponent = class {
         ];
     }
     renderGroupColumn(group, level, visibleGroupRange) {
-        var _a;
-        const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-        if (groupStartIndex < 0) {
-            return;
-        }
-        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-        if (!visibleGroupRange ||
-            !isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleGroupRange)) {
-            return;
-        }
-        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+        const groupRange = this.getGroupIndexRange(group);
+        const groupBounds = this.getGroupBounds(groupRange);
         const props = {
+            level,
             providers: this.providers,
-            start: groupStart,
-            end: groupEnd,
+            start: groupBounds.start,
+            end: groupBounds.end,
             group,
             renderOffset: this.viewportCol.get('renderOffset') || 0,
             active: this.resizeHandler,
@@ -457,15 +448,57 @@ const RevogrHeaderComponent = class {
             additionalData: this.additionalData,
             onResize: e => {
                 var _a;
-                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+                return groupRange
+                    ? this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupRange.startIndex, groupRange.endIndex)
+                    : undefined;
             },
         };
         const event = this.beforeGroupHeaderRender.emit(props);
         if (event.defaultPrevented) {
             return;
         }
+        const renderRange = this.getGroupIndexRange(event.detail.group);
+        if (!renderRange ||
+            !visibleGroupRange ||
+            !isGroupInVisibleRange(renderRange.startIndex, renderRange.endIndex, visibleGroupRange)) {
+            return;
+        }
+        if (event.detail.onResize === props.onResize) {
+            event.detail.onResize = e => {
+                var _a;
+                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, renderRange.startIndex, renderRange.endIndex);
+            };
+        }
+        const renderBounds = this.getGroupBounds(renderRange);
+        if (event.detail.start === props.start) {
+            event.detail.start = renderBounds.start;
+        }
+        if (event.detail.end === props.end) {
+            event.detail.end = renderBounds.end;
+        }
         return h(HeaderGroupRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
     }
+    getGroupIndexRange(group) {
+        var _a;
+        const startIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+        if (startIndex < 0) {
+            return;
+        }
+        const endIndex = group.indexes[group.indexes.length - 1];
+        return {
+            startIndex,
+            endIndex,
+        };
+    }
+    getGroupBounds(range) {
+        if (!range) {
+            return { start: 0, end: 0 };
+        }
+        return {
+            start: getItemByIndex(this.dimensionCol.state, range.startIndex).start,
+            end: getItemByIndex(this.dimensionCol.state, range.endIndex).end,
+        };
+    }
     getVisibleGroupRange() {
         const visibleColumns = this.viewportCol.get('items');
         if (!visibleColumns.length) {
@@ -782,8 +815,10 @@ const RevogrViewportScroll = class {
     render() {
         var _a, _b, _c, _d;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
-        const physicalContentWidth = getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
-        return (h(Host, { key: 'a0c47dede9d131dea8c8ca449e8a323f24d9b113', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '6c960e753ffe522ba4afb1c379264873b6c617f3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: '1a6cbcbd3634e84756b54c8150aebd25c824e14a', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: 'e4202c687bc39b4f78f3ed9840e979b032f06af8', name: HEADER_SLOT })), h("div", { key: '651415b5b32e72735065b183317386a34042bb85', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'e65623b78d80957d8676adb019618953ef267ec3', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '5af47b12ef1226587cf774233447b5252d65e836', name: CONTENT_SLOT }))), h("div", { key: 'cbc0fd64fbfb53d3b18e547bbe34e32b7bb9c043', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: 'a8e4bfaef400973121090bac3069eb85469a95f3', name: FOOTER_SLOT })))));
+        const physicalContentWidth = this.colType === 'colPinStart' || this.colType === 'colPinEnd'
+            ? this.contentWidth
+            : getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
+        return (h(Host, { key: '9b23f5c3c18924a25ecd3e1ee0909ebd03b25048', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, h("div", { key: '144f5c79d0a99e6423c1ca448917aedf514f0ae3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, h("div", { key: '10db0971f2db6acf8510cf21d736c82f0d0e5632', class: "header-wrapper", ref: e => (this.header = e) }, h("slot", { key: '77e0cd002ccda4a9e420de50648b711cde412a34', name: HEADER_SLOT })), h("div", { key: 'a78167dc52a24005a35dd94c5a9a43eb7dd289dd', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, h("div", { key: 'c277d9d1ffc54452b584eb55b1a29d2a10672fb6', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, h("slot", { key: '01fb5630a3d40e231a3aead9ad1c07aa06e69004', name: CONTENT_SLOT }))), h("div", { key: 'ff7389e77b500b97ea1fc38228da9fc3d6514e30', class: "footer-wrapper", ref: e => (this.footer = e) }, h("slot", { key: '3aa725e0a8f38ef5d4bc4dce53037ff55a6c25b3', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/types/components/header/header-group-renderer.d.ts

@@ -3,6 +3,7 @@ import { Group } from "../../store/index";
 import type { ProvidersColumns } from "../../types/index";
 import { ResizeEvent, ResizeProps } from './resizable.directive';
 export type HeaderGroupRendererProps = {
+    level: number;
     start: number;
     end: number;
     group: Group;

package/dist/types/components/header/revogr-header.d.ts

@@ -88,6 +88,8 @@ export declare class RevogrHeaderComponent {
     private renderGroupingColumns;
     private renderGroupRow;
     private renderGroupColumn;
+    private getGroupIndexRange;
+    private getGroupBounds;
     private getVisibleGroupRange;
     private getHeaderCellKey;
     private getDuplicateHeaderProps;

package/dist/types/components/revoGrid/revo-grid.d.ts

@@ -626,8 +626,20 @@ export declare class RevoGridComponent {
     orderService: OrdererService;
     selectionStoreConnector?: SelectionStoreConnector;
     scrollingService: GridScrollingService;
+    private pendingColumnFocusRestore?;
     columnTypesChanged(): void;
     columnChanged(newVal?: (ColumnGrouping | ColumnRegular)[], _prevVal?: (ColumnGrouping | ColumnRegular)[] | undefined, __watchName?: string, init?: boolean): void;
+    /**
+     * Capture logical focus before columns are repartitioned by pin state.
+     * Regression case: selecting a regular cell, then pinning that column left,
+     * used to let the new pinned viewport reuse the old rgCol selection store.
+     */
+    private getColumnFocusRestore;
+    /**
+     * Reapply focus by column prop after render, once pinning has moved the
+     * column to its new viewport and virtual index.
+     */
+    private restoreColumnFocusAfterRender;
     disableVirtualXChanged(newVal?: boolean, prevVal?: boolean): void;
     rowSizeChanged(s: number): void;
     themeChanged(t: Theme, _?: Theme, __?: string, init?: boolean): void;

package/dist/types/services/selection.store.connector.d.ts

@@ -70,5 +70,11 @@ export declare class SelectionStoreConnector {
     selectAll(): void;
     private getXStores;
     private getYStores;
+    /**
+     * Keep column viewport positions and types in sync across pin/unpin rerenders.
+     * Regression case: when a selected rgCol cell was pinned left, colPinStart
+     * could take over x=0 and render the stale rgCol focus store in the pinned area.
+     */
+    private updateColumnTypeMapping;
 }
 export {};

package/dist/types/types/selection.d.ts

@@ -65,6 +65,19 @@ export type ChangedRange = {
         [newRowIndex: number]: DataType;
     };
 };
+/**
+ * Logical focus marker captured before column viewport ownership changes.
+ * Used when a selected column is pinned/unpinned so focus can be restored by
+ * column prop after the column moves between rgCol, colPinStart, or colPinEnd.
+ */
+export type PendingColumnFocusRestore = {
+    prop: ColumnProp;
+    colType: DimensionCols;
+    colIndex: ColIndex;
+    prevStoreX: ColIndex;
+    rowType: DimensionRows;
+    rowIndex: RowIndex;
+};
 /**
  * Cell coordinates
  */

package/hydrate/index.js

@@ -12645,6 +12645,9 @@ const GROUPING_ROW_TYPE = 'rgRow';
 function getGroupValueDefault(item, prop) {
     return item[prop] || null;
 }
+function isDataRow(item) {
+    return item != null;
+}
 // get source based on proxy item collection to preserve rgRow order
 function getSource(source, items, withoutGrouping = false) {
     let index = 0;
@@ -12666,6 +12669,9 @@ function getSource(source, items, withoutGrouping = false) {
                 result.prevExpanded[model[PSEUDO_GROUP_ITEM_VALUE]] = true;
             }
         }
+        else if (!isDataRow(model)) {
+            return;
+        }
         else {
             result.source.push(model);
             result.oldNewIndexes[i] = index;
@@ -12746,6 +12752,9 @@ function flattenGroupMaps({ groupedValues, parentIds, isExpanded, itemIndex, exp
 function gatherGrouping(array, columnProps, { prevExpanded = {}, expandedAll = false, getGroupValue = getGroupValueDefault, }) {
     const groupedItems = new Map();
     array.forEach((item, originalIndex) => {
+        if (!isDataRow(item)) {
+            return;
+        }
         const groupLevelValues = columnProps.map(groupId => getGroupValue(item, groupId));
         const lastLevelValue = groupLevelValues.pop();
         let currentGroupLevel = groupedItems;
@@ -17654,13 +17663,11 @@ class SelectionStoreConnector {
         return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
     }
     registerColumn(x, type) {
+        this.updateColumnTypeMapping(x, type);
         if (this.columnStores[x]) {
             return this.columnStores[x];
         }
         this.columnStores[x] = new SelectionStore();
-        // build cross-linking type to position
-        this.storesByType[type] = x;
-        this.storesXToType[x] = type;
         return this.columnStores[x];
     }
     registerRow(y, type) {
@@ -17881,6 +17888,31 @@ class SelectionStoreConnector {
         }
         return stores;
     }
+    /**
+     * Keep column viewport positions and types in sync across pin/unpin rerenders.
+     * Regression case: when a selected rgCol cell was pinned left, colPinStart
+     * could take over x=0 and render the stale rgCol focus store in the pinned area.
+     */
+    updateColumnTypeMapping(x, type) {
+        const previousType = this.storesXToType[x];
+        const previousX = this.storesByType[type];
+        let shouldClearFocus = false;
+        this.storesByType[type] = x;
+        this.storesXToType[x] = type;
+        if (previousType && previousType !== type) {
+            shouldClearFocus = true;
+            if (this.storesByType[previousType] === x) {
+                delete this.storesByType[previousType];
+            }
+        }
+        if (typeof previousX === 'number' && previousX !== x && this.storesXToType[previousX] === type) {
+            delete this.storesXToType[previousX];
+            shouldClearFocus = true;
+        }
+        if (shouldClearFocus) {
+            this.clearAll();
+        }
+    }
 }
 
 /**
@@ -19477,6 +19509,7 @@ class RevoGridComponent {
         if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
+        const focusToRestore = init ? undefined : this.getColumnFocusRestore();
         const beforeGatherEvent = this.beforecolumnsgather.emit({
             columns: [...newVal],
         });
@@ -19494,6 +19527,9 @@ class RevoGridComponent {
             return;
         }
         const columns = this.columnProvider.setColumns(beforeApplyEvent.detail);
+        if (focusToRestore) {
+            this.pendingColumnFocusRestore = focusToRestore;
+        }
         const order = {};
         for (const prop of Object.keys(beforeApplyEvent.detail.sort)) {
             order[prop] = beforeApplyEvent.detail.sort[prop].order;
@@ -19503,6 +19539,64 @@ class RevoGridComponent {
             order,
         });
     }
+    /**
+     * Capture logical focus before columns are repartitioned by pin state.
+     * Regression case: selecting a regular cell, then pinning that column left,
+     * used to let the new pinned viewport reuse the old rgCol selection store.
+     */
+    getColumnFocusRestore() {
+        var _a, _b, _c, _d;
+        const focused = (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.getFocused();
+        const prevStoreX = (_c = (_b = this.selectionStoreConnector) === null || _b === void 0 ? void 0 : _b.focusedStore) === null || _c === void 0 ? void 0 : _c.position.x;
+        const prop = (_d = focused === null || focused === void 0 ? void 0 : focused.column) === null || _d === void 0 ? void 0 : _d.prop;
+        if (!focused || prop === undefined || prevStoreX === undefined) {
+            return;
+        }
+        return {
+            prop,
+            colType: focused.colType,
+            colIndex: focused.cell.x,
+            prevStoreX,
+            rowType: focused.rowType,
+            rowIndex: focused.cell.y,
+        };
+    }
+    /**
+     * Reapply focus by column prop after render, once pinning has moved the
+     * column to its new viewport and virtual index.
+     */
+    restoreColumnFocusAfterRender() {
+        var _a, _b, _c, _d;
+        const pending = this.pendingColumnFocusRestore;
+        if (!pending) {
+            return;
+        }
+        this.pendingColumnFocusRestore = undefined;
+        if (!this.viewport || !this.columnProvider) {
+            return;
+        }
+        const column = (_b = (_a = this.columnProvider.getColumnByProp(pending.prop)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : getColumnByProp(this.columns, pending.prop);
+        if (!column) {
+            return;
+        }
+        const colType = column.pin || 'rgCol';
+        const columnIndex = this.columnProvider.getColumnIndexByProp(pending.prop, colType);
+        if (columnIndex < 0) {
+            return;
+        }
+        // Header-only column refreshes should not collapse an existing range.
+        // Replay focus only when pin/unpin or repartitioning moved the logical column.
+        if (colType === pending.colType &&
+            columnIndex === pending.colIndex &&
+            pending.prevStoreX === ((_d = (_c = this.selectionStoreConnector) === null || _c === void 0 ? void 0 : _c.focusedStore) === null || _d === void 0 ? void 0 : _d.position.x)) {
+            return;
+        }
+        const cell = {
+            x: columnIndex,
+            y: pending.rowIndex,
+        };
+        this.viewport.setFocus(colType, pending.rowType, cell, cell);
+    }
     disableVirtualXChanged(newVal = false, prevVal = false) {
         if (newVal === prevVal) {
             return;
@@ -19815,6 +19909,7 @@ class RevoGridComponent {
         return Promise.all(this.jobsBeforeRender);
     }
     componentDidRender() {
+        this.restoreColumnFocusAfterRender();
         this.aftergridrender.emit();
     }
     render() {
@@ -20836,22 +20931,13 @@ class RevogrHeaderComponent {
         ];
     }
     renderGroupColumn(group, level, visibleGroupRange) {
-        var _a;
-        const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-        if (groupStartIndex < 0) {
-            return;
-        }
-        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-        if (!visibleGroupRange ||
-            !isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleGroupRange)) {
-            return;
-        }
-        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+        const groupRange = this.getGroupIndexRange(group);
+        const groupBounds = this.getGroupBounds(groupRange);
         const props = {
+            level,
             providers: this.providers,
-            start: groupStart,
-            end: groupEnd,
+            start: groupBounds.start,
+            end: groupBounds.end,
             group,
             renderOffset: this.viewportCol.get('renderOffset') || 0,
             active: this.resizeHandler,
@@ -20859,15 +20945,57 @@ class RevogrHeaderComponent {
             additionalData: this.additionalData,
             onResize: e => {
                 var _a;
-                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+                return groupRange
+                    ? this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupRange.startIndex, groupRange.endIndex)
+                    : undefined;
             },
         };
         const event = this.beforeGroupHeaderRender.emit(props);
         if (event.defaultPrevented) {
             return;
         }
+        const renderRange = this.getGroupIndexRange(event.detail.group);
+        if (!renderRange ||
+            !visibleGroupRange ||
+            !isGroupInVisibleRange(renderRange.startIndex, renderRange.endIndex, visibleGroupRange)) {
+            return;
+        }
+        if (event.detail.onResize === props.onResize) {
+            event.detail.onResize = e => {
+                var _a;
+                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, renderRange.startIndex, renderRange.endIndex);
+            };
+        }
+        const renderBounds = this.getGroupBounds(renderRange);
+        if (event.detail.start === props.start) {
+            event.detail.start = renderBounds.start;
+        }
+        if (event.detail.end === props.end) {
+            event.detail.end = renderBounds.end;
+        }
         return hAsync(HeaderGroupRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
     }
+    getGroupIndexRange(group) {
+        var _a;
+        const startIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+        if (startIndex < 0) {
+            return;
+        }
+        const endIndex = group.indexes[group.indexes.length - 1];
+        return {
+            startIndex,
+            endIndex,
+        };
+    }
+    getGroupBounds(range) {
+        if (!range) {
+            return { start: 0, end: 0 };
+        }
+        return {
+            start: getItemByIndex(this.dimensionCol.state, range.startIndex).start,
+            end: getItemByIndex(this.dimensionCol.state, range.endIndex).end,
+        };
+    }
     getVisibleGroupRange() {
         const visibleColumns = this.viewportCol.get('items');
         if (!visibleColumns.length) {
@@ -21691,8 +21819,10 @@ class RevogrViewportScroll {
     render() {
         var _a, _b, _c, _d;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
-        const physicalContentWidth = getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
-        return (hAsync(Host, { key: 'a0c47dede9d131dea8c8ca449e8a323f24d9b113', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6c960e753ffe522ba4afb1c379264873b6c617f3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1a6cbcbd3634e84756b54c8150aebd25c824e14a', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'e4202c687bc39b4f78f3ed9840e979b032f06af8', name: HEADER_SLOT })), hAsync("div", { key: '651415b5b32e72735065b183317386a34042bb85', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'e65623b78d80957d8676adb019618953ef267ec3', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '5af47b12ef1226587cf774233447b5252d65e836', name: CONTENT_SLOT }))), hAsync("div", { key: 'cbc0fd64fbfb53d3b18e547bbe34e32b7bb9c043', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'a8e4bfaef400973121090bac3069eb85469a95f3', name: FOOTER_SLOT })))));
+        const physicalContentWidth = this.colType === 'colPinStart' || this.colType === 'colPinEnd'
+            ? this.contentWidth
+            : getContentSize(this.contentWidth, (_d = (_c = this.horizontalScroll) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 0);
+        return (hAsync(Host, { key: '9b23f5c3c18924a25ecd3e1ee0909ebd03b25048', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '144f5c79d0a99e6423c1ca448917aedf514f0ae3', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '10db0971f2db6acf8510cf21d736c82f0d0e5632', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '77e0cd002ccda4a9e420de50648b711cde412a34', name: HEADER_SLOT })), hAsync("div", { key: 'a78167dc52a24005a35dd94c5a9a43eb7dd289dd', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'c277d9d1ffc54452b584eb55b1a29d2a10672fb6', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '01fb5630a3d40e231a3aead9ad1c07aa06e69004', name: CONTENT_SLOT }))), hAsync("div", { key: 'ff7389e77b500b97ea1fc38228da9fc3d6514e30', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '3aa725e0a8f38ef5d4bc4dce53037ff55a6c25b3', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing