@globalpayments/vega 2.56.0 → 2.57.1

package/dist/collection/components/vega-table/vega-table-head-cell/vega-table-head-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-table-header, 240, 243, 247, 1));
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  text-align: left;
-  vertical-align: middle;
+  display: contents;
 }
 
 :host(.sortable) {
@@ -54,7 +50,10 @@
 }
 
 th {
-  display: block;
+  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  text-align: left;
+  vertical-align: middle;
   padding: 0px;
   padding: 12px;
   font-family: "Inter", sans-serif;
@@ -130,4 +129,36 @@ th.break-word {
 
 :host(.density-relaxed) .vega-table-cell {
   padding: 16px;
+}
+
+: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 .vega-table-cell.is-group-cell {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-right-style: solid;
+  border-bottom-style: solid;
+}
+:host .vega-table-cell.hide-right-border {
+  border-right-width: 0px;
+}
+:host .vega-table-cell.bottom-border {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-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;
 }

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, Host, h, Prop, Element, Event, State } from '@stencil/core';
-import { arrayToClassString } from '../../../utils/ui';
+import { arrayToClassString, findParent } from '../../../utils/ui';
 import { generateResponsiveClass } from '../utils';
 import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../../utils/component';
@@ -26,6 +26,9 @@ 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 RemoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalColumnHeadCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.44.0
  */
@@ -71,16 +74,23 @@ export class VegaTableHeadCell {
         onClick: (e) => this.handleSort(e),
       }
       : null;
-    const cellClassNames = ['vega-table-cell'];
-    if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
-      cellClassNames.push('break-word');
-    }
+    const table = findParent(this.host, 'vega-table');
+    const renderInput = table &&
+      RemoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnHeadCellRenderInputRIC), this.host);
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
-        sortable: !!this.sorter,
-        [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+        'sortable': !!this.sorter,
+        'column-divider': this.columnDivider,
       }, style: { width: this.width } },
-      h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig),
+      h("th", Object.assign({ class: {
+          'vega-table-cell': true,
+          'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
+          'is-group-cell': renderInput === null || renderInput === void 0 ? void 0 : renderInput.headHasGroupColumn,
+          'hide-right-border': (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isViewEnd) || (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd),
+          'right-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned,
+          'left-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned,
+          [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+        } }, sortableConfig, { colSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.rowSpan }),
         h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
           h("span", { class: "vega-table-column-label" },
             h("slot", null)),
@@ -232,11 +242,37 @@ export class VegaTableHeadCell {
           }],
         "text": "Specifies the sorting configuration for the table header cell."
       }
+    },
+    "pinned": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTablePinnedType",
+        "resolved": "\"left\" | \"right\"",
+        "references": {
+          "VegaTablePinnedType": {
+            "location": "import",
+            "path": "../interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.57.0"
+          }],
+        "text": "Specifies the pinned type of the head cell."
+      },
+      "attribute": "pinned",
+      "reflect": false
     }
   }; }
   static get states() { return {
     "currentBreakpoint": {},
-    "density": {}
+    "density": {},
+    "columnDivider": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",

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

@@ -14,14 +14,17 @@ import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-e
 import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { findParent } from '../../../../../utils/ui';
-import { VegaInternalTableRowSelectAll } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalColumnHeadRowRenderInputRIC, VegaInternalTableRowSelectAll, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 export class VegaTableHeadRowRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderHeaderSelectionCell = () => {
+    this.renderHeaderSelectionCell = (renderInput) => {
       if (this.selectionType !== 'multiple')
         return;
-      return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
+      return (h("th", { rowSpan: renderInput.startRowSpan, class: {
+          'vega-table-selection-column': true,
+          'hidden': renderInput.isStartHidden,
+        } }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
         h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
@@ -39,8 +42,11 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
         }
       }
     };
-    this.renderHeaderExpandableCell = () => {
-      return this.expandable && h("th", { class: "vega-table-expand-action-column" });
+    this.renderHeaderExpandableCell = (renderInput) => {
+      return (this.expandable && (h("th", { rowSpan: renderInput.endRowSpan, class: {
+          'vega-table-expand-action-column': true,
+          'hidden': renderInput.isEndHidden,
+        } })));
     };
     this.handleClick = (e) => {
       e.stopPropagation();
@@ -73,12 +79,49 @@ export class VegaTableHeadRowRenderer extends VegaSlimmer {
   }
   render() {
     var _a, _b;
-    return (h("tr", null,
-      h("th", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
-      this.renderHeaderSelectionCell(),
+    const renderInput = this.getRowRenderInput();
+    return (h("tr", { class: {
+        'is-group-row': renderInput.headHasGroupColumn,
+        'is-pinned-row': renderInput.headHasPinnedColumn,
+      } },
+      h("th", { style: {
+          width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0],
+        }, rowSpan: renderInput.startRowSpan, class: {
+          hidden: renderInput.isStartHidden,
+        } }),
+      this.renderHeaderSelectionCell(renderInput),
       h("slot", null),
-      this.renderHeaderExpandableCell(),
-      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } })));
+      this.renderHeaderExpandableCell(renderInput),
+      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] }, rowSpan: renderInput.endRowSpan, class: {
+          hidden: renderInput.isEndHidden,
+        } })));
+  }
+  getRowRenderInput() {
+    const renderInput = {};
+    const table = findParent(this.host, 'vega-table');
+    const renderInputs = table &&
+      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnHeadRowRenderInputRIC), this.host);
+    const startRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[0];
+    const endRenderInput = renderInputs === null || renderInputs === void 0 ? void 0 : renderInputs[renderInputs.length - 1];
+    if (startRenderInput) {
+      renderInput.headHasGroupColumn = startRenderInput.headHasGroupColumn;
+      renderInput.headHasPinnedColumn = startRenderInput.headHasPinnedColumn;
+      if (renderInput.headHasGroupColumn) {
+        renderInput.startRowSpan =
+          this.selectionType === 'multiple' && startRenderInput.level === 0
+            ? startRenderInput.headMaxDepth
+            : startRenderInput.rowSpan;
+        renderInput.isStartHidden =
+          startRenderInput.headHasGroupColumn &&
+            ((this.selectionType === 'multiple' && startRenderInput.level > 0) ||
+              !startRenderInput.isViewStart);
+      }
+    }
+    if (endRenderInput && endRenderInput.headHasGroupColumn) {
+      renderInput.endRowSpan = endRenderInput.rowSpan;
+      renderInput.isEndHidden = startRenderInput.headHasGroupColumn && !endRenderInput.isViewEnd;
+    }
+    return renderInput;
   }
 }
 __decorate([

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

@@ -71,4 +71,41 @@ th:last-of-type {
 .vega-table-selection-column {
   width: 40px;
   min-width: 40px;
+}
+
+:host tr.is-group-row th {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+}
+:host tr.is-group-row th.hidden {
+  display: none;
+}
+:host tr.is-group-row th.vega-table-selection-column {
+  border-right-width: 1px;
+  border-right-style: solid;
+}
+:host tr.is-group-row th:first-of-type {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+:host tr.is-group-row th:last-of-type {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+:host tr.is-pinned-row th {
+  position: sticky;
+  z-index: 1;
+}
+:host tr.is-pinned-row th:first-of-type {
+  left: 0px;
+}
+:host tr.is-pinned-row th.vega-table-selection-column {
+  left: 8px;
+}
+:host tr.is-pinned-row th.vega-table-expand-action-column {
+  right: 8px;
+}
+:host tr.is-pinned-row th:last-of-type {
+  right: 0px;
 }

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

@@ -25,21 +25,18 @@ td:last-of-type {
   border-bottom-right-radius: 12px;
 }
 
-:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td,
-:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) ::slotted(vega-table-cell) {
+:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td {
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
 }
 
-.checked td,
-.checked ::slotted(vega-table-cell) {
+.checked td {
   background-color: rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1));
 }
 
 :not(.checked).clickable:hover {
   cursor: pointer;
 }
-:not(.checked).clickable:hover td,
-:not(.checked).clickable:hover ::slotted(vega-table-cell) {
+:not(.checked).clickable:hover td {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }
 
@@ -64,8 +61,7 @@ td:last-of-type {
   transform: rotate(180deg);
 }
 
-:host tr.expand-row td,
-:host tr.expand-row ::slotted(vega-table-cell) {
+:host tr.expand-row td {
   border-top-width: 1px;
   border-left-width: 0px;
   border-right-width: 0px;
@@ -89,8 +85,7 @@ tr.expand-row-space {
   padding-top: 8px;
 }
 
-:host(.row-divider:not(:last-of-type)) td,
-:host(.row-divider:not(:last-of-type)) ::slotted(vega-table-cell) {
+:host(.row-divider:not(:last-of-type)) td {
   border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
   border-bottom-width: 1px;
   border-bottom-style: solid;
@@ -100,12 +95,6 @@ tr.expand-row-space {
   border-radius: 0px;
 }
 
-:host(.column-divider) ::slotted(vega-table-cell:not(:last-of-type)) {
-  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
-  border-right-width: 1px;
-  border-right-style: solid;
-}
-
 :host(.density-default) td:first-of-type {
   border-top-left-radius: 12px;
   border-bottom-left-radius: 12px;

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

@@ -19,6 +19,7 @@ import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-fo
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { createSubStateNotifySlimmer } from '../../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 /**
  * @vegaVersion 1.44.0
  */
@@ -35,11 +36,19 @@ export class VegaTableRow {
     this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.checkedNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'checked', 'watchChecked');
+    this.expandedNotifySlimmer = createSubStateNotifySlimmer(VegaTableRow, 'expanded', 'watchExpanded');
     this.currentBreakpoint = getCurrentBreakpoint();
   }
   watchSelectionType() {
     methodPlaceholder();
   }
+  watchChecked() {
+    methodPlaceholder();
+  }
+  watchExpanded() {
+    methodPlaceholder();
+  }
   render() {
     slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, { class: {
@@ -194,6 +203,12 @@ export class VegaTableRow {
   static get watchers() { return [{
       "propName": "selectionType",
       "methodName": "watchSelectionType"
+    }, {
+      "propName": "checked",
+      "methodName": "watchChecked"
+    }, {
+      "propName": "expanded",
+      "methodName": "watchExpanded"
     }]; }
 }
 __decorate([
@@ -229,3 +244,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "checkedNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "expandedNotifySlimmer", void 0);

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

@@ -111,4 +111,26 @@ col.v-hidden {
   col.XL\:v-table-column {
     display: table-column;
   }
+}
+
+:host(.is-group-table) .vega-table-scrollable-container {
+  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  border-width: 1px;
+  border-style: solid;
+}
+
+:host(.is-group-table.density-relaxed) .vega-table-scrollable-container {
+  border-radius: 12px;
+}
+
+:host(.is-group-table.density-default) .vega-table-scrollable-container {
+  border-radius: 12px;
+}
+
+:host(.is-group-table.density-compact) .vega-table-scrollable-container {
+  border-radius: 4px;
+}
+
+:host(.is-pinned-table) table {
+  min-width: max-content;
 }

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

@@ -33,6 +33,9 @@ import { VegaTableRenderModeController } from './slimmers/controllers/vega-table
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTableRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-table/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaTableColumnStructureModelController } from './slimmers/controllers/vega-table-column-structure-model-controller';
+import { VegaTableRenderInputController } from './slimmers/controllers/vega-table-render-input-controller';
+import { VegaTablePinnedRenderer } from './slimmers/renderers/vega-table-pinned-renderer';
 /**
  * @vegaVersion 1.3.0
  */
@@ -41,6 +44,9 @@ export class VegaTable {
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableColumnStructureModelController = new VegaTableColumnStructureModelController();
+    this.vegaTableRenderInputController = new VegaTableRenderInputController();
+    this.vegaTablePinnedRenderer = new VegaTablePinnedRenderer();
     this.vegaTableRenderer = new VegaTableRenderer();
     this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
     this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
@@ -231,9 +237,15 @@ export class VegaTable {
   watchTemplateRenderMode() {
     methodPlaceholder();
   }
+  watchColumnStructureModel() {
+    methodPlaceholder();
+  }
   watchColumns() {
     methodPlaceholder();
   }
+  watchGroupColumns() {
+    methodPlaceholder();
+  }
   watchDataSource() {
     methodPlaceholder();
   }
@@ -511,6 +523,29 @@ export class VegaTable {
       },
       "defaultValue": "[]"
     },
+    "groupColumns": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTableGroupColumnConfig[]",
+        "resolved": "VegaTableGroupColumnConfig[]",
+        "references": {
+          "VegaTableGroupColumnConfig": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.57.0"
+          }],
+        "text": "Defines how columns can be grouped."
+      }
+    },
     "dataSource": {
       "type": "unknown",
       "mutable": true,
@@ -859,7 +894,8 @@ export class VegaTable {
     "pageSize": {},
     "editingRows": {},
     "isSelectedAll": {},
-    "isTemplateRenderMode": {}
+    "isTemplateRenderMode": {},
+    "columnStructureModel": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",
@@ -1697,9 +1733,15 @@ export class VegaTable {
     }, {
       "propName": "isTemplateRenderMode",
       "methodName": "watchTemplateRenderMode"
+    }, {
+      "propName": "columnStructureModel",
+      "methodName": "watchColumnStructureModel"
     }, {
       "propName": "columns",
       "methodName": "watchColumns"
+    }, {
+      "propName": "groupColumns",
+      "methodName": "watchGroupColumns"
     }, {
       "propName": "dataSource",
       "methodName": "watchDataSource"
@@ -1744,6 +1786,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableColumnStructureModelController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderInputController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePinnedRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);

package/dist/collection/constants/card-config.js

@@ -6,7 +6,7 @@ export const CARDS_INFO = [
     iconName: 'visa',
     pattern: VisaRegex,
     maskConfig: {
-      type: 'custom',
+      type: 'credit-card',
       options: {
         mask: '9999 9999 9999 9999 999',
         slot: '9',
@@ -20,7 +20,7 @@ export const CARDS_INFO = [
     iconName: 'mastercard',
     pattern: MasterCardRegex,
     maskConfig: {
-      type: 'custom',
+      type: 'credit-card',
       options: {
         mask: '9999 9999 9999 9999',
         slot: '9',
@@ -34,7 +34,7 @@ export const CARDS_INFO = [
     iconName: 'amex',
     pattern: AmexRegex,
     maskConfig: {
-      type: 'custom',
+      type: 'credit-card',
       options: {
         mask: '9999 999999 99999',
         slot: '9',
@@ -48,7 +48,7 @@ export const CARDS_INFO = [
     iconName: 'discover',
     pattern: DiscoverRegex,
     maskConfig: {
-      type: 'custom',
+      type: 'credit-card',
       options: {
         mask: '9999 9999 9999 9999',
         slot: '9',

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -50,3 +50,6 @@ export const VegaInternalPasteEvent = new VegaInternalEventID('pasteEvent');
 export const VegaInternalNestEAHierarchyTreeChange = new VegaInternalEventID('nestEAHierarchyTreeChange');
 export const VegaInternalTableHeadCellSortEvent = new VegaInternalEventID('tableHeadCellSortEvent');
 export const VegaInternalCodeBlockSelectionChange = new VegaInternalEventID('nestEAHierarchyTreeChange');
+export const VegaInternalColumnHeadRowRenderInputRIC = new VegaInternalEventID('tableHeadRowRenderInputRIC');
+export const VegaInternalColumnHeadCellRenderInputRIC = new VegaInternalEventID('tableHeadCellRenderInputRIC');
+export const VegaInternalColumnBodyCellRenderInputRIC = new VegaInternalEventID('tableCellRenderInputRIC');

package/dist/collection/helpers/formatter/string-formatter/credit-card-blur-mask-strategy.js

@@ -0,0 +1,74 @@
+import { FeatureFlag } from '../../feature-control/feature-flag-controller';
+import { CreditCardMaskStrategy } from './credit-card-mask-strategy.abstract';
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+export class CreditCardBlurMaskStrategy extends CreditCardMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   *
+   * @param {boolean} hideCardNumberOnBlur - boolean
+   */
+  constructor(hideCardNumberOnBlur) {
+    super({
+      mask: '',
+      slot: '9',
+      accept: /[\d\s]/,
+      insertMode: false,
+      triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+    });
+    this.hideCardNumberOnBlur = hideCardNumberOnBlur;
+  }
+  /**
+   * @inheritDoc
+   */
+  getCreditCardMaskConfig(value) {
+    let maskConfig;
+    const creditCardType = this.getCreditCardType(value);
+    if (creditCardType) {
+      if (this.hideCardNumberOnBlur && value.trim().includes(' ')) {
+        maskConfig = this.generateDynamicMask(value);
+      }
+    }
+    return maskConfig;
+  }
+  /*
+   * The below method is e2e-test covered in
+   *
+   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Transform the input card number with dynamic card number mask, for example: '4111 2222 3333 44' will be transformed to 'XXXX XXXX XXXX 99'
+   *
+   * @param {string} value - card number string
+   * @returns {MaskConfigType} - mask config type
+   */
+  generateDynamicMask(value) {
+    const maskConfig = {
+      type: 'credit-card',
+      options: {
+        mask: '',
+        slot: '9',
+        accept: /[\d\s]/,
+        insertMode: false,
+        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+      trigger: 'blur',
+    };
+    const cardNumberSplit = value.trim().split(' ');
+    const cardNumberMask = 
+    // Map through the array and replace each character with 'X' or '9' depending on the index
+    cardNumberSplit
+      .map((element, index) => {
+      // Replace each character in the string with 'X' except the last element, which uses '9'
+      const replacementChar = index === cardNumberSplit.length - 1 ? '9' : 'X';
+      return replacementChar.repeat(element.length);
+    })
+      .join(' ');
+    maskConfig.options.mask = cardNumberMask;
+    return maskConfig;
+  }
+}