@globalpayments/vega 2.92.0 → 2.93.0

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -14,11 +14,13 @@ import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-sli
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClick, VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaRTEImageExtension } from '../../../extensions/image/image-extension';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
+      autoFocusOnClick: false,
     });
     this.insertURLImage = async () => {
       const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
@@ -31,14 +33,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
           this.uploadInputRef.click();
           break;
         case 'url':
-          this.currentRange = this.selectionController.getCurrentRange();
-          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
-          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          this.host.parentElement.append(this.insertURLModalRef);
-          this.insertURLInputRef.value = '';
-          await this.insertURLModalRef.modal('show');
-          await this.insertURLInputRef.doFocus();
+          await this.openInsertURLModal();
           break;
         /* istanbul ignore next */
         default:
@@ -46,6 +41,16 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       }
       await this.dropdownRef.hide();
     };
+    this.openInsertURLModal = async () => {
+      this.currentRange = this.selectionController.getCurrentRange();
+      this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+      this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.host.parentElement.append(this.insertURLModalRef);
+      this.insertURLInputRef.value = '';
+      await this.insertURLModalRef.modal('show');
+      await this.insertURLInputRef.doFocus();
+    };
     /**
      * The below method is e2e-test covered in
      * @see{module:should-update-url-properly-when-upload-images}
@@ -67,15 +72,33 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
+    const shouldRenderDropdown = this.shouldRenderDropdown();
+    const shouldRenderUpload = this.isImageUploadEnabled();
+    const shouldRenderUrlInsertion = this.isImageURLInsertionEnabled();
+    if (!shouldRenderUpload && !shouldRenderUrlInsertion) {
+      return null;
+    }
     return (h("vega-box", null,
-      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
           this.dropdownRef = ref;
           this.addDropdownObserver(ref);
         } },
         renderBtn({ showArrowIcon: true }),
-        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
-      this.renderUploadInput(),
-      this.renderInsertURLModal()));
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent()))) : (renderBtn({})),
+      shouldRenderUpload ? this.renderUploadInput() : null,
+      shouldRenderUrlInsertion ? this.renderInsertURLModal() : null));
+  }
+  onClick() {
+    if (this.shouldRenderDropdown()) {
+      return;
+    }
+    if (this.isImageURLInsertionEnabled()) {
+      void this.openInsertURLModal();
+      return;
+    }
+    if (this.isImageUploadEnabled()) {
+      this.uploadInputRef.click();
+    }
   }
   isSelected() {
     return false;
@@ -88,10 +111,20 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
   renderDropdownContent() {
-    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+    return (h(Fragment, null, this.getItems().map((item) => {
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
     })));
   }
+  getItems() {
+    return ImageToolbarButtonSlimmer.allItems.filter((item) => {
+      if (item.key === 'upload') {
+        return this.isImageUploadEnabled();
+      }
+      else {
+        return this.isImageURLInsertionEnabled();
+      }
+    });
+  }
   renderUploadInput() {
     return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
   }
@@ -124,6 +157,18 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   addModalInsertObserver(buttonRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
   }
+  getImageExtensionConfig() {
+    return VegaRTEImageExtension.configStore.get(this.host) || {};
+  }
+  isImageUploadEnabled() {
+    return this.getImageExtensionConfig().enableImageUpload !== false;
+  }
+  isImageURLInsertionEnabled() {
+    return this.getImageExtensionConfig().enableImageURLInsertion !== false;
+  }
+  shouldRenderDropdown() {
+    return this.getItems().length > 1;
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:should-update-url-properly-when-upload-images}
@@ -156,7 +201,7 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-ImageToolbarButtonSlimmer.items = [
+ImageToolbarButtonSlimmer.allItems = [
   {
     key: 'upload',
     label: 'Upload from computer',

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/slimmers/renderers/vega-rich-text-editor-toolbar-button-renderer.js

@@ -8,6 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import chevronDown from '../../../../../global/icons/chevron-down';
+import chevronUp from '../../../../../global/icons/chevron-up';
 export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -29,13 +30,14 @@ export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
       }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
         this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
-        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
+        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey(this.arrowIcon || 'chevron-down') }))),
       h("slot", null)));
   }
 }
 (() => {
   VegaInternalIconManager.register({
     'chevron-down': chevronDown,
+    'chevron-up': chevronUp,
   });
 })();
 __decorate([
@@ -50,6 +52,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "arrowIcon", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.js

@@ -17,7 +17,7 @@ import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/sl
 + */
 /**
  * This is an internal used component and shouldn't be used by clients,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  */
 export class VegaRichTextEditorToolbarButton {
   constructor() {
@@ -57,6 +57,12 @@ export class VegaRichTextEditorToolbarButton {
      * @vegaVersion 2.34.0
      */
     this.showArrowIcon = false;
+    /**
+     * Specifies the arrow icon name when `showArrowIcon` is enabled.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.arrowIcon = 'chevron-down';
     /**
      * Specifies whether the toolbar button in the rich text editor is represented by an icon.
      *
@@ -166,6 +172,27 @@ export class VegaRichTextEditorToolbarButton {
       "reflect": false,
       "defaultValue": "false"
     },
+    "arrowIcon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.93.0"
+          }],
+        "text": "Specifies the arrow icon name when `showArrowIcon` is enabled."
+      },
+      "attribute": "arrow-icon",
+      "reflect": false,
+      "defaultValue": "'chevron-down'"
+    },
     "icon": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -443,7 +443,7 @@ export class VegaRichTextEditor {
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies editable section rows for the rich text editor.\nWhen not set, the editor uses stretching behavior with a default visual height of 5 rows.\nWhen set, the editor height is fixed and content overflow is scrollable.\nThe value accepts integers \u2265 2; for optimal display, values below 2 are internally normalized to 5 rows."
+        "text": "Specifies the number of visible rows for the rich text editor.\n- If not specified, the editor uses a flexible height with a default of 5 rows.\n- If specified, the editor height becomes fixed, and overflowing content is scrollable.\n- Accepts integer values \u2265 2. For optimal display, values below 2 are automatically normalized to 5 rows."
       },
       "attribute": "rows",
       "reflect": false

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-image-editor/vega-rich-text-image-editor.js

@@ -14,7 +14,7 @@ import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-i
 import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
 /**
  * This is an internal used component and shouldn't be used by clients,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  *
  * @vegaVersion 2.34.0
  */

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-link-editor/vega-rich-text-link-editor.js

@@ -14,7 +14,7 @@ import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-i
 import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
 /**
  * This is an internal used component and shouldn't be used by clients,
- *    it doesn't show up in storybook either.
+ *    it is not part of the public component surface.
  *
  * @vegaVersion 2.34.0
  */

package/dist/collection/components/vega-table/slimmers/controllers/dto/column-render-input-model.js

@@ -85,6 +85,38 @@ export class ColumnRenderInputModel {
     });
     return renderInputs;
   }
+  /**
+   * Create a new render input that merges pinned-boundary flags from a set of spanned leaves.
+   *
+   * Used when a body cell with `colSpan > 1` consumes neighboring leaves. The spanning cell
+   * must inherit boundary indicators (`isLeftEndPinned`, `isRightStartPinned`, `isNoPinnedEnd`)
+   * from any consumed leaf that carries them, so the pinned-boundary visual (divider/shadow)
+   * remains visible on the spanning cell.
+   *
+   * @param {ColumnRenderInputModel} base - The render input of the originating (leftmost) leaf.
+   * @param {ColumnRenderInputModel[]} spannedLeaves - All leaves consumed by the span (including base).
+   * @returns {ColumnRenderInputModel} A new instance with OR-merged boundary flags.
+   */
+  static withMergedBoundaries(base, spannedLeaves) {
+    let isLeftEndPinned = base.isLeftEndPinned;
+    let isRightStartPinned = base.isRightStartPinned;
+    let isNoPinnedEnd = base.isNoPinnedEnd;
+    let isViewEnd = base.isViewEnd;
+    for (const leaf of spannedLeaves) {
+      isLeftEndPinned = isLeftEndPinned || leaf.isLeftEndPinned;
+      isRightStartPinned = isRightStartPinned || leaf.isRightStartPinned;
+      isNoPinnedEnd = isNoPinnedEnd || leaf.isNoPinnedEnd;
+      isViewEnd = isViewEnd || leaf.isViewEnd;
+    }
+    // Return the base unchanged when no flags were gained (common fast-path).
+    if (isLeftEndPinned === base.isLeftEndPinned &&
+      isRightStartPinned === base.isRightStartPinned &&
+      isNoPinnedEnd === base.isNoPinnedEnd &&
+      isViewEnd === base.isViewEnd) {
+      return base;
+    }
+    return new ColumnRenderInputModel(base.key, base.label, base.pinned, base.colSpan, base.rowSpan, base.isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, base.headHasGroupColumn, base.headHasPinnedColumn, base.headMaxDepth, base.level, base.columnIndex, base.parent, base.children);
+  }
   /**
    * True when the provided structure model is the last left-pinned sibling in its parent's children.
    * Used to mark boundary nodes for left-pinned groups.

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-body-col-span-controller.js

@@ -0,0 +1,77 @@
+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 { resolveBodyColSpan } from '../renderers/vega-table-body-col-span-resolver';
+/**
+ * Per-row body colspan controller.
+ *
+ * Centralizes the source-data body colSpan computation that was previously scattered across the
+ * cell renderer (cache + per-cell resolve) and the row renderer (imperative `skipCount`). It owns
+ * the once-per-key warning cache and exposes {@link resolveRow}, which computes the colspan result
+ * for every leaf in a row in a single pass so renderers can consume the result declaratively.
+ *
+ * The structural shape (a {@link VegaSlimmer} controller reading component fields) mirrors the
+ * main-branch `VegaTableExpandRowController` paradigm.
+ */
+export class VegaTableBodyColSpanController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.warnedColSpanKeys = new Set();
+    this.lastWarnedColumnsRef = null;
+  }
+  /**
+   * Resolve the effective colspan for every leaf cell in a single source-data row.
+   *
+   * Walks the row left-to-right, resolving each non-consumed leaf's span and marking the leaves
+   * consumed by a span as `null` so the caller can skip them declaratively (no mutable
+   * `skipCount` orchestration). The returned array is index-aligned with `leaves`.
+   *
+   * @param {VegaTableDataSourceItem} record - The row data record.
+   * @param {number} rowIndex - Zero-based index of the row in the current data set.
+   * @param {ColumnRenderInputModel[]} leaves - All leaf render inputs for the table (ordered).
+   * @returns {Array<Nullable<BodyColSpanResult>>} One entry per leaf: a {@link BodyColSpanResult}
+   *   for a cell to render, or `null` for a leaf consumed by a preceding spanning cell.
+   */
+  resolveRow(record, rowIndex, leaves) {
+    // Reset the once-per-key warning cache whenever the column configuration changes,
+    // so clamping conditions introduced by a new `columns` value can warn again.
+    if (this.columns !== this.lastWarnedColumnsRef) {
+      this.warnedColSpanKeys.clear();
+      this.lastWarnedColumnsRef = this.columns;
+    }
+    const results = new Array(leaves.length).fill(null);
+    let skipCount = 0;
+    leaves.forEach((leaf, leafIndex) => {
+      if (skipCount > 0) {
+        // This leaf is consumed by a preceding spanning cell — leave it null (skipped).
+        skipCount--;
+        return;
+      }
+      const column = this.findColumn(leaf);
+      const result = column
+        ? resolveBodyColSpan(column, record, rowIndex, leafIndex, leaves, this.warnedColSpanKeys)
+        : { htmlColspan: 1, skipCount: 0 };
+      results[leafIndex] = result;
+      skipCount = result.skipCount;
+    });
+    return results;
+  }
+  /**
+   * Find the column config that backs a leaf render input.
+   *
+   * @param {ColumnRenderInputModel} renderInput - The leaf render input.
+   * @returns {Nullable<VegaTableColumnConfig>} The matching column config, or `undefined`.
+   */
+  findColumn(renderInput) {
+    return this.columns.find((column) => column.key === renderInput.key ||
+      column.prop === renderInput.key ||
+      column.label === renderInput.key);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaTableBodyColSpanController.prototype, "columns", void 0);

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-body-col-span-resolver.js

@@ -0,0 +1,121 @@
+import { LogUtility } from '../../../../utils/log';
+import { getValueByPath } from '../../../../utils/object';
+const NO_SPAN = { htmlColspan: 1, skipCount: 0 };
+/**
+ * Read the declared span for a column, resolving the function form against the row value.
+ * Returns 1 when the column declares no span (REQ-008: span < 2 means no spanning).
+ *
+ * @param {VegaTableColumnConfig} column - The column configuration to read the span from.
+ * @param {VegaTableDataSourceItem} record - The row data record (passed to the function form).
+ * @param {number} rowIndex - Zero-based index of the row in the current data set.
+ * @returns {number} The declared span (>= 1).
+ */
+function getDeclaredSpan(column, record, rowIndex) {
+  const rawSpan = column === null || column === void 0 ? void 0 : column.colSpan;
+  if (rawSpan == null)
+    return 1;
+  if (typeof rawSpan !== 'function')
+    return normalizeSpan(rawSpan);
+  const value = column.prop ? getValueByPath(record, column.prop) : undefined;
+  return normalizeSpan(rawSpan(value, record, rowIndex));
+}
+/**
+ * Normalize a raw span value to a positive integer. Non-finite values (NaN/Infinity) and values
+ * below 1 collapse to 1 (no spanning); fractional values are floored so the resulting `colspan`
+ * attribute is always a valid integer string.
+ *
+ * @param {number} rawSpan - The raw span value declared by the column (numeric or function result).
+ * @returns {number} A positive integer span (>= 1).
+ */
+function normalizeSpan(rawSpan) {
+  if (!Number.isFinite(rawSpan))
+    return 1;
+  const floored = Math.floor(rawSpan);
+  return floored >= 1 ? floored : 1;
+}
+/**
+ * Walk rightward from the starting leaf to find the widest legal span.
+ *
+ * Stops (and returns a clamp reason) when the span would either run past the end of the
+ * row or cross a pinned ↔ unpinned column boundary (which would break sticky positioning).
+ * Breakpoint-hidden columns are intentionally **not** a stop condition — the span mirrors
+ * across them (matching header group colSpan).
+ *
+ * @param {number} declared - The declared span requested by the column.
+ * @param {number} leafIndex - Index of the starting leaf in the flattened render-input array.
+ * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
+ * @returns {MaxSpan} The widest legal span plus the clamp reason (null when unconstrained).
+ */
+function computeMaxSpan(declared, leafIndex, allLeaves) {
+  var _a, _b;
+  const startPinned = (_a = allLeaves[leafIndex]) === null || _a === void 0 ? void 0 : _a.pinned;
+  let span = 1;
+  for (let offset = 1; offset < declared; offset++) {
+    const nextLeaf = allLeaves[leafIndex + offset];
+    if (!nextLeaf) {
+      return {
+        span,
+        clampReason: `extends past the end of the row (${allLeaves.length} columns total)`,
+      };
+    }
+    // Reject if the next column is in a different pinned group.
+    if (nextLeaf.pinned !== startPinned) {
+      return {
+        span,
+        clampReason: `crosses a pinned-column boundary (pinned="${startPinned !== null && startPinned !== void 0 ? startPinned : 'none'}" → pinned="${(_b = nextLeaf.pinned) !== null && _b !== void 0 ? _b : 'none'}")`,
+      };
+    }
+    span++;
+  }
+  return { span, clampReason: null };
+}
+/**
+ * Emit a clamp warning at most once per column key (per-instance, tracked via {@link warnedKeys}).
+ *
+ * @param {string} colKey - The column key used to dedupe warnings.
+ * @param {number} declared - The originally declared span.
+ * @param {number} effective - The clamped (effective) span actually applied.
+ * @param {string} reason - Human-readable reason the span was clamped.
+ * @param {Set<string>} warnedKeys - Per-instance set tracking already-warned column keys.
+ */
+function warnClampOnce(colKey, declared, effective, reason, warnedKeys) {
+  if (warnedKeys.has(colKey))
+    return;
+  warnedKeys.add(colKey);
+  LogUtility.warn(`[vega-table] colSpan for column "${colKey}" was clamped from ${declared} to ${effective} because it ${reason}.`);
+}
+/**
+ * Resolve the effective body-cell colspan for a single source-data row cell.
+ *
+ * Clamps the declared span so it never runs past the end of the row nor crosses a
+ * pinned ↔ unpinned column boundary. Structural clamps (end-of-row / pinned boundary) emit a
+ * warning once per column key (tracked via the caller-supplied {@link warnedKeys} set).
+ * Breakpoint-hidden columns are **not** clamped — the span mirrors across a `display: none`
+ * column (matching header group colSpan) so the body grid stays column-aligned with the header.
+ *
+ * @param {VegaTableColumnConfig} column - The column configuration for the spanning cell.
+ * @param {VegaTableDataSourceItem} record - The row data record.
+ * @param {number} rowIndex - Zero-based index of the row in the current data set.
+ * @param {number} leafIndex - Index of this column in the flattened leaf render-input array.
+ * @param {ColumnRenderInputModel[]} allLeaves - All leaf render inputs for the table (ordered).
+ * @param {Set<string>} warnedKeys - Per-instance set tracking column keys that have already received a clamping warning.
+ * @returns {BodyColSpanResult} Resolved spanning metadata for the cell.
+ */
+export function resolveBodyColSpan(column, record, rowIndex, leafIndex, allLeaves, warnedKeys) {
+  var _a, _b, _c;
+  const declared = getDeclaredSpan(column, record, rowIndex);
+  if (!declared || declared <= 1)
+    return NO_SPAN;
+  const { span, clampReason } = computeMaxSpan(declared, leafIndex, allLeaves);
+  const effectiveSpan = Math.min(declared, span);
+  if (clampReason && effectiveSpan < declared) {
+    const colKey = (_c = (_b = (_a = column.key) !== null && _a !== void 0 ? _a : column.prop) !== null && _b !== void 0 ? _b : column.label) !== null && _c !== void 0 ? _c : '';
+    warnClampOnce(colKey, declared, effectiveSpan, clampReason, warnedKeys);
+  }
+  if (effectiveSpan <= 1)
+    return NO_SPAN;
+  return {
+    htmlColspan: effectiveSpan,
+    skipCount: effectiveSpan - 1,
+  };
+}

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

@@ -20,10 +20,11 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaTableEditableFieldTypes, } from '../../interface';
 import { getValueByPath } from '../../../../utils/object';
 import { LogUtility } from '../../../../utils/log';
+import { ColumnRenderInputModel } from '../controllers/dto/column-render-input-model';
 export class VegaTableCellRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderTableCellContent = (column, record, index) => {
+    this.renderTableCellContent = (column, record, index, isSpanning) => {
       var _a, _b;
       const value = getValueByPath(record, column.prop);
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
@@ -32,13 +33,14 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         .find((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
       const editing = this.vegaTableEditableController.isEditing(rowKey);
       const rowForm = this.vegaTableEditableController.getRowFormRefMap().get(rowKey);
-      if (editing && rowForm && column.renderFormItem) {
+      // REQ-007: spanning cells are forced read-only — never render editable form items.
+      if (!isSpanning && editing && rowForm && column.renderFormItem) {
         return column.renderFormItem(h, column.prop ? value : rowKey, record, index, {
           rowForm,
           isNewRow,
         });
       }
-      if (editing && rowForm && column.editable) {
+      if (!isSpanning && editing && rowForm && column.editable) {
         const formItemProps = (_a = column.formItemProps) === null || _a === void 0 ? void 0 : _a.call(column, rowForm, {
           record,
           index,
@@ -86,30 +88,50 @@ export class VegaTableCellRenderer extends VegaSlimmer {
         new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
     };
   }
-  render(renderInput, record, index) {
-    const column = this.columns.find((column) => column.key === renderInput.key ||
-      column.prop === renderInput.key ||
-      column.label === renderInput.key);
+  render(renderInput, record, index, colSpanResult) {
+    var _a;
+    const column = this.vegaTableBodyColSpanController.findColumn(renderInput);
+    /* istanbul ignore next -- defensive: colSpanResult is always provided by the caller */
+    const htmlColspan = (_a = colSpanResult === null || colSpanResult === void 0 ? void 0 : colSpanResult.htmlColspan) !== null && _a !== void 0 ? _a : 1;
+    const isSpanning = htmlColspan > 1;
+    // When a cell spans, merge pinned-boundary flags from all consumed leaves so the spanning
+    // cell inherits boundary indicators (e.g. right-divider for pinned-end).
+    const effectiveRenderInput = isSpanning && colSpanResult
+      ? this.getMergedRenderInputForSpan(renderInput, colSpanResult)
+      : renderInput;
     if (column) {
       const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
       const columnKey = `${rowKey}_${column.key || column.prop}`;
-      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
-        } }, this.renderTableCellContent(column, record, index)));
+      return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow, colSpan: isSpanning ? htmlColspan : undefined, ref: (ref) => {
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
+        } }, this.renderTableCellContent(column, record, index, isSpanning)));
     }
     else {
       return (h("vega-table-cell", { key: renderInput.key, ref: (ref) => {
-          this.vegaTableRenderInputController.addCellRenderInputMap(ref, renderInput);
+          this.vegaTableRenderInputController.addCellRenderInputMap(ref, effectiveRenderInput);
         } }));
     }
   }
+  /**
+   * Build a render input with merged boundary flags from all leaves consumed by a body colSpan.
+   *
+   * @param {ColumnRenderInputModel} baseInput - The starting leaf's render input.
+   * @param {BodyColSpanResult} colSpanResult - The resolved span result (provides skipCount).
+   * @returns {ColumnRenderInputModel} A render input with OR-merged boundary flags.
+   */
+  getMergedRenderInputForSpan(baseInput, colSpanResult) {
+    const allLeaves = this.vegaTableRenderInputController.getLeafRenderInputs();
+    const startIndex = allLeaves.indexOf(baseInput);
+    /* istanbul ignore next -- defensive: baseInput should always be in the leaves array */
+    if (startIndex < 0)
+      return baseInput;
+    const spannedLeaves = allLeaves.slice(startIndex + 1, startIndex + 1 + colSpanResult.skipCount);
+    return ColumnRenderInputModel.withMergedBoundaries(baseInput, spannedLeaves);
+  }
 }
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate([
-  MapToComponentField()
-], VegaTableCellRenderer.prototype, "columns", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
@@ -119,3 +141,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableBodyColSpanController", void 0);