@globalpayments/vega 2.56.0 → 2.57.1

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-pinned-renderer.js

@@ -0,0 +1,175 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPlaceholder, VegaSlimmer, } from 'vega-slimmer/core';
+import { isNonNullable } from '../../../../types/type-guard';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { extractNumberFromString } from '../../../../utils/ui';
+export class VegaTablePinnedRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      // eslint-disable-next-line
+      target: () => this.host.shadowRoot.querySelector('table'),
+      isDeferred: true,
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:resize-pinned-position-by-edit-row}
+       */
+      callback: /* istanbul ignore next */ async () => {
+        await this.host.componentOnReady().then(() => {
+          this.updateTableRowPinnedPosition();
+          this.updateTableCellPinnedPosition();
+        });
+      },
+    });
+  }
+  componentDidLoad() {
+    methodPlaceholder;
+  }
+  componentDidRender() {
+    this.updateTableRowPinnedPosition();
+    this.updateTableCellPinnedPosition();
+  }
+  updateTableCellPinnedPosition() {
+    if (!this.columnStructureModel.hasLeftPinnedColumn() &&
+      !this.columnStructureModel.hasRightPinnedColumn())
+      return;
+    // if not have head row, it means no pinned, so no need to update
+    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    // to avoid window resize before table rendered.
+    // @see{module:resize-pinned-position-by-edit-row}
+    /* istanbul ignore next */
+    if (!row)
+      return;
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const pinnedColumnBodyCellRenderInputMap = this.vegaTableRenderInputController.getPinnedColumnBodyCellRenderInputMap();
+    const [prevShadowThWidth, nextShadowThWidth] = this.getRowShadowThWidths();
+    const leafWidths = this.getLeafWidths();
+    headCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+    pinnedColumnBodyCellRenderInputMap.forEach((renderInput, headCell) => {
+      this.updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+    });
+  }
+  getRowShadowThWidths() {
+    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const rowShadow = row.shadowRoot;
+    const firstTh = rowShadow.querySelector('th:first-of-type');
+    const selectionTh = rowShadow.querySelector('.vega-table-selection-column');
+    const expandTh = rowShadow.querySelector('.vega-table-expand-action-column');
+    const lastTh = rowShadow.querySelector('th:last-of-type');
+    if (firstTh) {
+      const prevWidth = firstTh.getBoundingClientRect().width + ((selectionTh === null || selectionTh === void 0 ? void 0 : selectionTh.getBoundingClientRect().width) || 0);
+      const nextWidth = ((expandTh === null || expandTh === void 0 ? void 0 : expandTh.getBoundingClientRect().width) || 0) + lastTh.getBoundingClientRect().width;
+      return [prevWidth, nextWidth];
+    }
+    // to avoid window resize before row rendered.
+    // @see{module:resize-pinned-position-by-edit-row}
+    /* istanbul ignore next */
+    return [0, 0];
+  }
+  getLeafWidths() {
+    const headCellRenderInputMap = this.vegaTableRenderInputController.getHeadCellRenderInputMap();
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    return leafRenderInputs.map((leaf) => {
+      var _a;
+      for (const [cell, renderInput] of headCellRenderInputMap.entries()) {
+        if (leaf === renderInput) {
+          // to avoid window resize before cell rendered.
+          // @see{module:resize-pinned-position-by-edit-row}
+          /* istanbul ignore next */
+          return ((_a = cell.shadowRoot.querySelector('th, td')) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        }
+      }
+    });
+  }
+  updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
+    if (['left', 'right'].includes(renderInput.pinned)) {
+      const shadowCell = headCell.shadowRoot.querySelector('th, td');
+      if (renderInput.pinned === 'left') {
+        const position = prevShadowThWidth +
+          leafWidths
+            .slice(0, renderInput.columnIndex)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'left', position);
+      }
+      if (renderInput.pinned === 'right') {
+        const colSpan = isNonNullable(renderInput.colSpan) ? renderInput.colSpan : 1;
+        const position = nextShadowThWidth +
+          leafWidths
+            .slice(renderInput.columnIndex + (colSpan - 1) + 1)
+            .reduce((count, colWidth) => count + colWidth, 0);
+        this.updatePinnedPosition(shadowCell, 'right', position);
+      }
+    }
+  }
+  updateTableRowPinnedPosition() {
+    const hasLeftPinnedColumn = this.columnStructureModel.hasLeftPinnedColumn();
+    const hasRightPinnedColumn = this.columnStructureModel.hasRightPinnedColumn();
+    const tableWidth = this.host.getBoundingClientRect().width;
+    const leftPadding = extractNumberFromString(this.paddingX[0]);
+    const rightPadding = extractNumberFromString(this.paddingX[1]);
+    // table width - padding(8*2) - border(2);
+    const expandContainerWidth = tableWidth - leftPadding - rightPadding - 2;
+    this.host.shadowRoot
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row')
+      .forEach((row) => {
+      const rowShadow = row.shadowRoot;
+      if (hasLeftPinnedColumn) {
+        const firstCell = rowShadow.querySelector('th:first-of-type, td:first-of-type');
+        const selectionCell = rowShadow.querySelector('.vega-table-selection-column');
+        this.updatePinnedPosition(firstCell, 'left', 0);
+        this.updatePinnedPosition(selectionCell, 'left', leftPadding);
+      }
+      if (hasRightPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expand-action-column');
+        const lastCell = rowShadow.querySelector('th:last-of-type, td:last-of-type');
+        this.updatePinnedPosition(expandCell, 'right', rightPadding);
+        this.updatePinnedPosition(lastCell, 'right', 0);
+      }
+      if (hasRightPinnedColumn || hasLeftPinnedColumn) {
+        const expandCell = rowShadow.querySelector('.vega-table-expanded-row-slot-container');
+        if (expandCell) {
+          const slotInnerContainer = expandCell.querySelector('.expanded-row-slot-inner');
+          this.updatePinnedPosition(slotInnerContainer, 'left', leftPadding);
+          // we should set the width to make the expand slot not scroll by table scroll.
+          // ticket: https://gethired.atlassian.net/browse/VD-7015
+          slotInnerContainer.style.width = `${expandContainerWidth}px`;
+        }
+      }
+    });
+  }
+  updatePinnedPosition(cell, type, position) {
+    if (!cell)
+      return;
+    cell.style.position = 'sticky';
+    cell.style.zIndex = '1';
+    cell.style[type] = `${position}px`;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTablePinnedRenderer.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaTablePinnedRenderer.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTablePinnedRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-renderer.js

@@ -37,6 +37,10 @@ export class VegaTableRenderer extends VegaSlimmer {
       this.columnDivider && 'column-divider',
       `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
       this.striped && 'striped',
+      this.columnStructureModel.hasGroupColumn() && 'is-group-table',
+      (this.columnStructureModel.hasLeftPinnedColumn() ||
+        this.columnStructureModel.hasRightPinnedColumn()) &&
+        'is-pinned-table',
     ]);
     return sanitizeVegaComponent(h(Host, { class: hostClasses },
       this.vegaTableScrollContainerRenderer.render(this.renderInternalTable()),
@@ -68,6 +72,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnStructureModel", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-row-renderer.js

@@ -14,6 +14,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     super(...arguments);
     this.renderTableRowComponent = (rowProps) => {
       const { rowKey, index, record, isVisibleInCurrentPage } = rowProps;
+      const renderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
       return (h("vega-table-row", { class: {
           'v-hidden': !isVisibleInCurrentPage,
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
@@ -22,8 +23,8 @@ export class VegaTableRowRenderer extends VegaSlimmer {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index });
           });
-        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, this.columns.map((column) => {
-        return this.vegaTableCellRenderer.render(column, record, index);
+        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, renderInputs.map((renderInput) => {
+        return this.vegaTableCellRenderer.render(renderInput, record, index);
       })));
     };
   }
@@ -32,9 +33,6 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     return editable ? (h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate([
-  MapToComponentField()
-], VegaTableRowRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "rowClickEventEmitter", void 0);
@@ -47,3 +45,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRowRenderer.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRenderInputController", void 0);

package/dist/collection/components/vega-table/vega-table-cell/slimmers/controllers/vega-table-cell-state-controller.js

@@ -19,10 +19,51 @@ export class VegaTableCellStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'rowDivider',
+          parentStateName: 'rowDivider',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (rowDivider) => {
+            const row = this.host.parentElement;
+            const body = row.parentElement;
+            if (row && body) {
+              const lastRow = body.querySelector('vega-table-row:last-of-type');
+              this.rowDivider = rowDivider && lastRow !== row;
+            }
+          },
+        },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (columnDivider) => {
+            const parent = this.host.parentElement;
+            if (parent) {
+              const lastCell = parent.querySelector('vega-table-cell:last-of-type');
+              this.columnDivider = columnDivider && lastCell !== this.host;
+            }
+          },
+        },
+        {
+          subStateName: 'clickable',
+          parentStateName: 'rowClickable',
+        },
       ],
     });
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaTableCellStateController.prototype, "host", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "rowDivider", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "columnDivider", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableCellStateController.prototype, "clickable", void 0);

package/dist/collection/components/vega-table/vega-table-cell/slimmers/controllers/vega-table-row-state-controller.js

@@ -0,0 +1,48 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/sub-state-observer-slimmer';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+/**
+ * Controller for the table row states
+ */
+export class VegaTableRowStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table-row',
+      subStates: [
+        {
+          subStateName: 'checked',
+          parentStateName: 'checked',
+        },
+        {
+          subStateName: 'expanded',
+          parentStateName: 'expanded',
+        },
+      ],
+    });
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaTableCell.componentWillLoad}
+   */
+  componentWillRender() {
+    const row = this.host.parentElement;
+    this.striped = row && row.dataset.striped === 'striped';
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "checked", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "striped", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "expanded", void 0);
+__decorate([
+  MapToComponentMethod('componentWillRender')
+], VegaTableRowStateController.prototype, "componentWillRender", null);

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.css

@@ -4,27 +4,27 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 /* This file is generated by vega-design 2.0.77 */
-:host(.v-hidden) {
+:host .vega-table-cell.v-hidden {
   display: none;
 }
 
 @media (min-width: 320px) {
-  :host(.S\:v-table-cell) {
+  :host .vega-table-cell.S\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 768px) {
-  :host(.M\:v-table-cell) {
+  :host .vega-table-cell.M\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1024px) {
-  :host(.L\:v-table-cell) {
+  :host .vega-table-cell.L\:v-table-cell {
     display: table-cell;
   }
 }
 @media (min-width: 1440px) {
-  :host(.XL\:v-table-cell) {
+  :host .vega-table-cell.XL\:v-table-cell {
     display: table-cell;
   }
 }
@@ -34,11 +34,7 @@
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
 :host {
-  display: table-cell;
-  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  text-align: left;
-  vertical-align: middle;
+  display: contents;
 }
 
 .vega-table-cell {
@@ -79,8 +75,11 @@
 }
 
 td {
-  display: block;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
   padding: 0px;
+  vertical-align: middle;
 }
 td.v-text-center {
   text-align: center;
@@ -113,4 +112,52 @@ td.v-text-right {
 
 .vega-table-cell-scroll {
   overflow: auto;
+}
+
+:host(.column-divider) .vega-table-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+
+:host(.row-divider) .vega-table-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+
+:host(.striped) .vega-table-cell {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+}
+
+:host(.clickable.hovered:not(.checked)) .vega-table-cell {
+  cursor: pointer;
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+}
+
+:host(.checked) .vega-table-cell {
+  background-color: rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1));
+}
+
+:host(.expanded) .vega-table-cell {
+  border-top-width: 1px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 0px;
+  border-style: solid;
+  border-color: rgba(var(--v-border-color-input-field, 171, 198, 216, 1));
+}
+
+:host .vega-table-cell.right-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 2px;
+  border-right-style: solid;
+}
+:host .vega-table-cell.left-divider {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-left-width: 2px;
+  border-left-style: solid;
+}
+:host .vega-table-cell.hide-right-border {
+  border-right-width: 0px;
 }

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 import { generateResponsiveClass, generateTextAlignClass } from '../utils';
-import { arrayToClassString } from '../../../utils/ui';
+import { arrayToClassString, findParent } from '../../../utils/ui';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableCellStateController } from './slimmers/controllers/vega-table-cell-state-controller';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
@@ -15,6 +15,10 @@ import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaTableRowStateController } from './slimmers/controllers/vega-table-row-state-controller';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnBodyCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
+import remoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
 /**
  * @vegaVersion 1.44.0
  */
@@ -22,6 +26,7 @@ export class VegaTableCell {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTableCellStateController = new VegaTableCellStateController();
+    this.vegaTableRowStateController = new VegaTableRowStateController();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();
@@ -38,18 +43,47 @@ export class VegaTableCell {
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
-    const columnClasses = [columnAlignClass, 'vega-table-cell'];
+    const columnClasses = [responsiveClass, columnAlignClass, 'vega-table-cell'];
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       columnClasses.push('break-word');
     }
+    const table = findParent(this.host, 'vega-table');
+    const renderInput = table &&
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnBodyCellRenderInputRIC), this.host);
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned) {
+      columnClasses.push('left-divider');
+    }
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned) {
+      columnClasses.push('right-divider');
+    }
+    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd) {
+      columnClasses.push('hide-right-border');
+    }
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
         `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
-        responsiveClass,
-      ]), style: { width: this.width } },
-      h("td", { class: arrayToClassString(columnClasses), part: "cell" },
+        this.rowDivider && 'row-divider',
+        this.columnDivider && 'column-divider',
+        this.clickable && 'clickable',
+        this.checked && 'checked',
+        this.striped && 'striped',
+        this.expanded && 'expanded',
+      ]) },
+      h("td", { class: arrayToClassString(columnClasses), part: "cell", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onMouseEnter: this.onMouseEnter.bind(this), 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onMouseLeave: this.onMouseLeave.bind(this), style: { width: this.width } },
         h("div", { class: overflowClass },
           h("slot", null)))), this.host);
   }
+  onMouseEnter() {
+    const row = this.host.parentElement;
+    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.add('hovered'));
+  }
+  onMouseLeave() {
+    const row = this.host.parentElement;
+    row.querySelectorAll('vega-table-cell').forEach((cell) => cell.classList.remove('hovered'));
+  }
   static get is() { return "vega-table-cell"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -147,7 +181,13 @@ export class VegaTableCell {
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "density": {}
+    "density": {},
+    "rowDivider": {},
+    "columnDivider": {},
+    "clickable": {},
+    "checked": {},
+    "striped": {},
+    "expanded": {}
   }; }
   static get elementRef() { return "host"; }
 }
@@ -157,6 +197,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaTableRowStateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);

package/dist/collection/components/vega-table/vega-table-expand-row/slimmers/renderers/vega-table-expand-row-renderer.js

@@ -16,10 +16,14 @@ export class VegaTableExpandRowRenderer extends VegaSlimmer {
       }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
       h("td", null),
       h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
-        h("slot", null)),
+        h("div", { class: "expanded-row-slot-inner" },
+          h("slot", null))),
       h("td", null)));
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.css

@@ -52,4 +52,15 @@
 }
 .vega-table-expanded-row.expanded.checked {
   background-color: rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1));
+}
+
+:host tr.is-pinned-row td:first-of-type {
+  position: sticky;
+  z-index: 1;
+  left: 0px;
+}
+:host tr.is-pinned-row td.vega-table-expanded-row-slot-container div {
+  position: sticky;
+  z-index: 1;
+  left: 8px;
 }

package/dist/collection/components/vega-table/vega-table-head-cell/slimmers/controllers/vega-table-head-cell-state-controller.js

@@ -19,6 +19,18 @@ export class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
           subStateName: 'density',
           parentStateName: 'density',
         },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (columnDivider) => {
+            const parent = this.host.parentElement;
+            if (parent) {
+              const lastCell = parent.querySelector('vega-table-head-cell:last-of-type');
+              this.columnDivider = columnDivider && lastCell !== this.host;
+            }
+          },
+        },
       ],
     });
   }
@@ -26,3 +38,6 @@ export class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaTableHeadCellStateController.prototype, "columnDivider", void 0);