@globalpayments/vega 2.96.0 → 2.98.0

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-render-input-controller.js

@@ -107,6 +107,17 @@ export class VegaTableRenderInputController extends VegaSlimmer {
   addHeadCellRenderInputMap(headCell, renderInput) {
     this.headCellRenderInputMap.set(headCell, renderInput);
   }
+  /**
+   * Clear all head row and head cell render-input mappings.
+   *
+   * Used by template-mode lifecycle to invalidate stale grouped-header metadata
+   * before re-registering current mappings. In data-source mode the header renderer
+   * re-registers via ref callbacks each render, so stale entries are overwritten naturally.
+   */
+  clearHeadRenderInputMaps() {
+    this.headRowRenderInputMap.clear();
+    this.headCellRenderInputMap.clear();
+  }
   /**
    * Store body cell render input mapping for pinned cells (used to update sticky positions).
    *
@@ -174,9 +185,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderInputController.prototype, "columnStructureModel", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableRenderInputController.prototype, "vegaTableColGroupRenderer", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaTableRenderInputController.prototype, "connectedCallback", null);

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

@@ -34,6 +34,9 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicRightDividerCells = new Set();
     this.dynamicLeftDividerCells = new Set();
     this.dynamicHideRightBorderCells = new Set();
+    // Authored template cells whose shadow <td> colspan was shrunk for breakpoint-hidden columns,
+    // tracked so the authored colspan can be restored when pinning is removed at runtime (VD-9768).
+    this.templateColspanSyncedCells = new Set();
     this.clearPinnedPositionsTaskQueue = new SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
@@ -76,8 +79,10 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
-    // if not have head row, it means no pinned, so no need to update
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    // if not have head row, it means no pinned, so no need to update.
+    // In template mode the authored rows live in light DOM (slotted), so resolve the row
+    // container root accordingly instead of always querying the table's shadow root.
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     // to avoid window resize before table rendered.
     // @see{module:resize-pinned-position-by-edit-row}
     /* istanbul ignore next */
@@ -108,6 +113,18 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         lastVisibleRightPinnedHeadCell = shadowCell;
       }
     });
+    // Track last visible left-pinned body cells per row for boundary class propagation.
+    // Declared before the template positioning pass so authored cells feed the same maps the
+    // shared dynamic-boundary logic below consumes (one update flow for both render modes).
+    const lastVisibleLeftPinnedBodyCells = new Map();
+    const firstVisibleRightPinnedBodyCells = new Map();
+    const lastVisibleRightPinnedBodyCells = new Map();
+    // Template mode has no JSX ref callbacks to populate the body-cell render-input map, and
+    // its rows live in light DOM. Position the authored body/foot leaf cells directly by zipping
+    // them with the leaf render inputs (respecting colSpan), reusing the shared positioning primitive.
+    if (this.isTemplateRenderMode) {
+      this.updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+    }
     // Remove stale entries (disconnected cells) left over from prior renders (e.g. after drag reorder).
     pinnedColumnBodyCellRenderInputMap.forEach((_, bodyCell) => {
       /* istanbul ignore next -- defensive cleanup for disconnected cells; jsdom always keeps cells connected */
@@ -115,10 +132,6 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         pinnedColumnBodyCellRenderInputMap.delete(bodyCell);
       }
     });
-    // Track last visible left-pinned body cells per row for boundary class propagation.
-    const lastVisibleLeftPinnedBodyCells = new Map();
-    const firstVisibleRightPinnedBodyCells = new Map();
-    const lastVisibleRightPinnedBodyCells = new Map();
     // Collect body cells whose shadow DOM is not yet ready (newly created cells).
     const unreadyCells = [];
     pinnedColumnBodyCellRenderInputMap.forEach((renderInput, bodyCell) => {
@@ -224,8 +237,164 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
     this.syncColspanForHiddenColumns(leafWidths, pinnedColumnBodyCellRenderInputMap);
     return unreadyCells;
   }
+  /**
+   * Resolve the DOM root that holds the table rows.
+   *
+   * In data-source mode rows are rendered into the table's shadow root; in template mode the
+   * authored rows are slotted, so they live in the host's light DOM.
+   *
+   * @returns {ShadowRoot | HTMLElement} The container to query rows from.
+   */
+  getRowContainerRoot() {
+    return this.isTemplateRenderMode ? this.host : this.host.shadowRoot;
+  }
+  /**
+   * Position authored template body and foot leaf cells by zipping them with the leaf render
+   * inputs in authored order, advancing by each cell's colSpan. Also applies the pinned-boundary
+   * divider classes (mirroring the body cell's render()), since authored body/foot cells have no
+   * render-input of their own in template mode.
+   *
+   * @param {number} prevShadowThWidth - Aggregate width of leading fixed columns (table left padding).
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} nextShadowThWidth - Aggregate width of trailing fixed columns (table right padding).
+   */
+  updateTemplateLeafCellPinnedPosition(prevShadowThWidth, leafWidths, nextShadowThWidth, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    const leafRenderInputs = this.vegaTableRenderInputController.getLeafRenderInputs();
+    // Off-screen / jsdom renders report every width as 0; skip colspan sync there so we don't
+    // collapse every span to 1 (mirrors the data-source syncColspanForHiddenColumns guard).
+    const allLeafWidthsHidden = leafWidths.every((w) => w === 0);
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-row, vega-table-foot-row')
+      .forEach((row) => {
+      let leafIndex = 0;
+      Array.from(row.children).forEach((cell) => {
+        if (cell.tagName !== 'VEGA-TABLE-CELL' && cell.tagName !== 'VEGA-TABLE-FOOT-CELL')
+          return;
+        const leafCell = cell;
+        const renderInput = leafRenderInputs[leafIndex];
+        // Unlike data-source mode (resolveBodyColSpan), template mode positions the authored
+        // <td> as-is and intentionally does NOT clamp col-span at a pinned boundary: the
+        // consumer owns this literal DOM, so a col-span crossing pinned <-> unpinned is an
+        // invalid authoring choice (a cell cannot be both frozen and scrolling), not a case
+        // the component rewrites.
+        const colSpan = this.resolveCellColSpan(leafCell, renderInput);
+        if (renderInput) {
+          this.updateCellPinnedPosition(renderInput, leafCell, prevShadowThWidth, leafWidths, nextShadowThWidth);
+          this.applyTemplateLeafDividerClass(leafCell, leafRenderInputs.slice(leafIndex, leafIndex + colSpan));
+          this.syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden);
+          this.trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells);
+        }
+        leafIndex += colSpan;
+      });
+    });
+  }
+  /**
+   * Record an authored template leaf cell's shadow cell as the last visible left-pinned / first &
+   * last visible right-pinned cell of its row, so the shared dynamic-boundary logic can shift the
+   * boundary divider onto it when the static boundary column is breakpoint-hidden.
+   *
+   * @param {HTMLElement} row - The authored body or foot row (used as the per-row grouping key).
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleLeftPinnedBodyCells - Per-row last visible left-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} firstVisibleRightPinnedBodyCells - Per-row first visible right-pinned shadow cell.
+   * @param {Map<HTMLElement, HTMLElement>} lastVisibleRightPinnedBodyCells - Per-row last visible right-pinned shadow cell.
+   */
+  trackVisiblePinnedTemplateCell(row, leafCell, renderInput, lastVisibleLeftPinnedBodyCells, firstVisibleRightPinnedBodyCells, lastVisibleRightPinnedBodyCells) {
+    var _a;
+    const shadowCell = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell || shadowCell.getBoundingClientRect().width <= 0)
+      return;
+    if (renderInput.pinned === 'left') {
+      lastVisibleLeftPinnedBodyCells.set(row, shadowCell);
+    }
+    if (renderInput.pinned === 'right') {
+      if (!firstVisibleRightPinnedBodyCells.has(row)) {
+        firstVisibleRightPinnedBodyCells.set(row, shadowCell);
+      }
+      lastVisibleRightPinnedBodyCells.set(row, shadowCell);
+    }
+  }
+  /**
+   * Reduce an authored template pinned cell's shadow <td> colspan to the number of *visible*
+   * columns it spans. Breakpoint-hidden columns report width 0 but Chrome still counts them in the
+   * table grid, so without this a pinned span drifts out of column-alignment with the header
+   * (VD-9540). Only applies to pinned cells; skipped off-screen / in jsdom where every width is 0.
+   *
+   * @param {HTMLVegaTableCellElement} leafCell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel} renderInput - Render input of the cell's first leaf.
+   * @param {number} colSpan - The cell's originally declared colspan.
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {boolean} allLeafWidthsHidden - True when every leaf width is 0 (off-screen / jsdom).
+   */
+  syncTemplateLeafColspan(leafCell, renderInput, colSpan, leafWidths, allLeafWidthsHidden) {
+    var _a;
+    if (colSpan <= 1 || allLeafWidthsHidden)
+      return;
+    if (!['left', 'right'].includes(renderInput.pinned))
+      return;
+    const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowTd)
+      return;
+    const visibleColspan = this.countVisibleColspan(leafWidths, renderInput.columnIndex, colSpan);
+    shadowTd.setAttribute('colspan', String(visibleColspan));
+    if (visibleColspan !== colSpan) {
+      this.templateColspanSyncedCells.add(leafCell);
+    }
+    else {
+      this.templateColspanSyncedCells.delete(leafCell);
+    }
+  }
+  /**
+   * Restore the authored colspan on every template cell whose shadow <td> was shrunk by
+   * {@link syncTemplateLeafColspan}. Runs on cleanup so removing `pinned` at runtime does not leave
+   * a body/foot cell stuck at the breakpoint-shrunk colspan once positioning no longer runs (VD-9768).
+   */
+  restoreTemplateLeafColspan() {
+    this.templateColspanSyncedCells.forEach((leafCell) => {
+      var _a, _b;
+      const shadowTd = (_a = leafCell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+      if (!shadowTd)
+        return;
+      const authoredColSpan = (_b = leafCell.colSpan) !== null && _b !== void 0 ? _b : 1;
+      if (authoredColSpan > 1) {
+        shadowTd.setAttribute('colspan', String(authoredColSpan));
+      }
+      else {
+        shadowTd.removeAttribute('colspan');
+      }
+    });
+    this.templateColspanSyncedCells.clear();
+  }
+  /**
+   * Apply the pinned-boundary divider classes to an authored template body/foot cell's shadow
+   * cell, merging boundary flags across the leaves the cell spans. Tracked in the dynamic sets so
+   * the next positioning pass clears and re-evaluates them (matching the data-source cleanup path).
+   *
+   * @param {HTMLVegaTableCellElement} cell - Authored body or foot cell host.
+   * @param {ColumnRenderInputModel[]} spannedLeaves - Leaf render inputs the cell spans.
+   */
+  applyTemplateLeafDividerClass(cell, spannedLeaves) {
+    var _a;
+    const shadowCell = (_a = cell.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('th, td');
+    if (!shadowCell)
+      return;
+    const spans = (predicate) => spannedLeaves.some((leaf) => !!leaf && predicate(leaf));
+    if (spans((leaf) => leaf.isLeftEndPinned)) {
+      shadowCell.classList.add('right-divider');
+      this.dynamicRightDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isRightStartPinned)) {
+      shadowCell.classList.add('left-divider');
+      this.dynamicLeftDividerCells.add(shadowCell);
+    }
+    if (spans((leaf) => leaf.isNoPinnedEnd || leaf.isViewEnd)) {
+      shadowCell.classList.add('hide-right-border');
+      this.dynamicHideRightBorderCells.add(shadowCell);
+    }
+  }
   getRowShadowThWidths() {
-    const row = this.host.shadowRoot.querySelector('vega-table-head-row');
+    const row = this.getRowContainerRoot().querySelector('vega-table-head-row');
     const rowShadow = row.shadowRoot;
     const firstTh = rowShadow.querySelector('th:first-of-type');
     const draggableTh = rowShadow.querySelector('.vega-table-draggable-column');
@@ -279,13 +448,32 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
       /* istanbul ignore next -- shadowTd is always present in jsdom */
       if (!shadowTd)
         return;
-      // Count how many columns in the span are visible (width > 0) — hidden breakpoint
-      // columns have leafWidth === 0 because their <th> has display:none.
-      const spanned = leafWidths.slice(renderInput.columnIndex, renderInput.columnIndex + originalColspan);
-      const effectiveColspan = Math.max(1, spanned.filter((w) => w > 0).length);
-      shadowTd.setAttribute('colspan', String(effectiveColspan));
+      shadowTd.setAttribute('colspan', String(this.countVisibleColspan(leafWidths, renderInput.columnIndex, originalColspan)));
     });
   }
+  /**
+   * Count how many columns in a span are actually visible (leaf width > 0). Breakpoint-hidden
+   * columns report width 0 because their <th> is display:none; Chrome ignores that on the table
+   * grid, so a spanning cell's shadow <td> colspan must be reduced to the visible count to stay
+   * column-aligned (VD-9540). Shared by data-source and template positioning paths.
+   *
+   * @param {number[]} leafWidths - Rendered width of each leaf column, indexed by columnIndex.
+   * @param {number} startIndex - columnIndex of the first leaf the spanning cell covers.
+   * @param {number} declaredColspan - The cell's originally declared colspan.
+   * @returns {number} The number of visible columns in the span (>= 1).
+   */
+  countVisibleColspan(leafWidths, startIndex, declaredColspan) {
+    const spanned = leafWidths.slice(startIndex, startIndex + declaredColspan);
+    return Math.max(1, spanned.filter((w) => w > 0).length);
+  }
+  resolveCellColSpan(cell, renderInput) {
+    var _a;
+    // Group-column render inputs carry an explicit colSpan; flat/leaf and authored template
+    // cells fall back to the col-span prop on the cell. The authored value is honored verbatim
+    // (no pinned-boundary clamping) — see updateTemplateLeafCellPinnedPosition.
+    const colSpan = (_a = renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan) !== null && _a !== void 0 ? _a : null;
+    return isNonNullable(colSpan) ? colSpan : cell.colSpan || 1;
+  }
   updateCellPinnedPosition(renderInput, headCell, prevShadowThWidth, leafWidths, nextShadowThWidth) {
     if (['left', 'right'].includes(renderInput.pinned)) {
       const shadowCell = headCell.shadowRoot.querySelector('th, td');
@@ -302,9 +490,7 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         // colspan (e.g. colSpan:2 spanning the last two right-pinned columns), we read the
         // actual span from the host component prop so the right-edge offset is calculated
         // over the full spanned width rather than just one column (VD-9565).
-        const colSpan = isNonNullable(renderInput.colSpan)
-          ? renderInput.colSpan
-          : headCell.colSpan || 1;
+        const colSpan = this.resolveCellColSpan(headCell, renderInput);
         const position = nextShadowThWidth +
           leafWidths
             .slice(renderInput.columnIndex + colSpan)
@@ -321,8 +507,8 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
     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')
+    this.getRowContainerRoot()
+      .querySelectorAll('vega-table-head-row, vega-table-row, vega-table-expand-row, vega-table-foot-row')
       .forEach((row) => {
       const rowShadow = row.shadowRoot;
       if (hasLeftPinnedColumn) {
@@ -371,6 +557,7 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
     this.dynamicLeftDividerCells.clear();
     this.dynamicHideRightBorderCells.forEach((cell) => cell.classList.remove('hide-right-border'));
     this.dynamicHideRightBorderCells.clear();
+    this.restoreTemplateLeafColspan();
     this.previouslyStyledCells.clear();
   }
   updatePinnedPosition(cell, type, position) {
@@ -391,6 +578,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "paddingX", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTablePinnedRenderer.prototype, "isTemplateRenderMode", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTablePinnedRenderer.prototype, "vegaTableRenderInputController", void 0);

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

@@ -26,6 +26,7 @@
   left: 0;
   width: 100%;
   height: 1px;
+  z-index: 2;
   background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
 }
 

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

@@ -16,7 +16,7 @@ export class VegaTableFootCellRenderer extends VegaSlimmer {
         'vega-table-cell': true,
         'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null },
+      }, colSpan: ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? this.colSpan : null, style: { width: this.width } },
       h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
         h("span", { class: "vega-table-column-label" },
           h("slot", null)))));
@@ -34,3 +34,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableFootCellRenderer.prototype, "colSpan", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableFootCellRenderer.prototype, "width", void 0);

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

@@ -43,6 +43,7 @@ td {
   text-align: left;
   vertical-align: middle;
   padding: 12px;
+  box-sizing: border-box;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;
@@ -113,4 +114,18 @@ td.break-word {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-right-width: 1px;
   border-right-style: solid;
+}
+
+: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-foot-cell/vega-table-foot-cell.js

@@ -30,7 +30,7 @@ export class VegaTableFootCell {
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
+      }, "aria-colspan": ((_a = this.colSpan) !== null && _a !== void 0 ? _a : 0) > 1 ? String(this.colSpan) : null }, this.vegaTableFootCellRenderer.render()), this.host);
   }
   static get is() { return "vega-table-foot-cell"; }
   static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,28 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalTableHeadTemplateStructureChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { findParent } from '../../../../../utils/ui';
+/**
+ * Controller for head-cell template structure notifications.
+ */
+export class VegaTableHeadCellTemplateStructureController extends VegaSlimmer {
+  /**
+   * Notify table template-structure observers when template group keys are updated.
+   */
+  notifyTemplateHeadStructureChange() {
+    const parent = findParent(this.host, 'vega-table-head');
+    if (!parent)
+      return;
+    changeManager.notify(domNodeSubjectFactory.getSubject(parent, VegaInternalTableHeadTemplateStructureChange), { host: this.host });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableHeadCellTemplateStructureController.prototype, "host", void 0);

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

@@ -56,6 +56,7 @@ th {
   vertical-align: middle;
   padding: 0px;
   padding: 12px;
+  box-sizing: border-box;
   font-family: "Inter", sans-serif;
   font-size: 14px;
   font-weight: 700;

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Host, h, Prop, Element, Event, State } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Event, State, Watch } from '@stencil/core';
 import { arrayToClassString } from '../../../utils/ui';
 import { generateResponsiveClass } from '../utils';
 import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
@@ -26,6 +26,7 @@ import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-contr
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { SortIconRenderer } from './slimmers/renderers/sort-icon-renderer';
 import { VegaTableHeadCellSortConfigController } from './slimmers/controllers/vega-table-head-cell-sort-config-controller';
+import { VegaTableHeadCellTemplateStructureController } from './slimmers/controllers/vega-table-head-cell-template-structure-controller';
 import { VegaInternalColumnHeadCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
 /**
@@ -40,6 +41,7 @@ export class VegaTableHeadCell {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.sortIconRenderer = new SortIconRenderer();
     this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
+    this.vegaTableHeadCellTemplateStructureController = new VegaTableHeadCellTemplateStructureController();
     this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnHeadCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     this.handleSort = (e) => {
@@ -65,6 +67,15 @@ export class VegaTableHeadCell {
       return orderSequence[(orderSequence.indexOf(sortOrder) + 1) % orderSequence.length];
     };
   }
+  watchPinned() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
+  watchParentGroupKey() {
+    this.vegaTableHeadCellTemplateStructureController.notifyTemplateHeadStructureChange();
+  }
   render() {
     var _a, _b, _c, _d, _e, _f, _g;
     const sortableConfig = this.sorter
@@ -79,7 +90,7 @@ export class VegaTableHeadCell {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'sortable': !!this.sorter,
         'column-divider': this.columnDivider,
-      }, style: { width: this.width } },
+      } },
       h("th", Object.assign({ class: {
           'vega-table-cell': true,
           'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
@@ -88,7 +99,7 @@ export class VegaTableHeadCell {
           'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
           'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
           [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-        } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan }),
+        } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan, style: { width: this.width } }),
         h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
           h("span", { class: "vega-table-column-label" },
             h("slot", null)),
@@ -264,7 +275,47 @@ export class VegaTableHeadCell {
         "text": "Specifies the pinned type of the head cell."
       },
       "attribute": "pinned",
-      "reflect": false
+      "reflect": true
+    },
+    "groupKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.98.0"
+          }],
+        "text": "Explicit header-node key binding for mapping template head cells to grouped header nodes.\nThe key may point to either a group node or a leaf node from the computed grouped header tree."
+      },
+      "attribute": "group-key",
+      "reflect": true
+    },
+    "parentGroupKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.98.0"
+          }],
+        "text": "Parent header-node key used to derive grouped hierarchy in template render mode.\nOmit this property for cells in the first header row."
+      },
+      "attribute": "parent-group-key",
+      "reflect": true
     }
   }; }
   static get states() { return {
@@ -324,6 +375,16 @@ export class VegaTableHeadCell {
       }
     }]; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "pinned",
+      "methodName": "watchPinned"
+    }, {
+      "propName": "groupKey",
+      "methodName": "watchGroupKey"
+    }, {
+      "propName": "parentGroupKey",
+      "methodName": "watchParentGroupKey"
+    }]; }
 }
 (() => {
   VegaInternalIconManager.register({
@@ -355,6 +416,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellTemplateStructureController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);

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

@@ -38,7 +38,10 @@ import { VegaTableColumnStructureModelController } from './slimmers/controllers/
 import { VegaTableRenderInputController } from './slimmers/controllers/vega-table-render-input-controller';
 import { VegaTablePinnedRenderer } from './slimmers/renderers/vega-table-pinned-renderer';
 import { VegaTableRowDraggableController } from './slimmers/controllers/vega-table-row-draggable-controller';
+import { VegaTableHeadTemplateStructureController } from './slimmers/controllers/vega-table-head-template-structure-controller';
 /**
+ * A Table component presents structured data in rows and columns for easy comparison, manipulation, and display of information.
+ *
  * @vegaVersion 1.3.0
  */
 export class VegaTable {
@@ -46,6 +49,7 @@ export class VegaTable {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableHeadTemplateStructureController = new VegaTableHeadTemplateStructureController();
     this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
     this.vegaTableRenderInputController = new VegaTableRenderInputController();
     this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
@@ -120,6 +124,7 @@ export class VegaTable {
       this.editingRows = newSet;
     });
     this.isSelectedAll = false;
+    this.templateGroupColumns = null;
     this.expandableRows = [];
     this.hasExpandableRow = false;
     /**
@@ -263,6 +268,9 @@ export class VegaTable {
   watchTemplateRenderMode() {
     methodPlaceholder();
   }
+  watchTemplateGroupColumns() {
+    methodPlaceholder();
+  }
   watchColumnStructureModel() {
     methodPlaceholder();
   }
@@ -977,6 +985,7 @@ export class VegaTable {
     "editingRows": {},
     "isSelectedAll": {},
     "isTemplateRenderMode": {},
+    "templateGroupColumns": {},
     "columnStructureModel": {},
     "expandableRows": {},
     "hasExpandableRow": {}
@@ -1866,6 +1875,9 @@ export class VegaTable {
     }, {
       "propName": "isTemplateRenderMode",
       "methodName": "watchTemplateRenderMode"
+    }, {
+      "propName": "templateGroupColumns",
+      "methodName": "watchTemplateGroupColumns"
     }, {
       "propName": "columnStructureModel",
       "methodName": "watchColumnStructureModel"
@@ -1928,6 +1940,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableHeadTemplateStructureController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);