@globalpayments/vega 2.57.0 → 2.58.0

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -22,7 +22,6 @@ import { VegaInternalIconManager } from '../../helpers/icon/internal-icon-manage
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputCreditCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-credit-card/runtime-metrics-payload-definition';
-import { VegaInternalPasteEvent } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.26.0
  */
@@ -51,17 +50,6 @@ export class VegaInputCreditCard {
     this.focusEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaFocus);
     this.inputCreditCardEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaFocus, VegaBlur], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputCreditCardRuntimeMetricsPayloadDefinition);
-    this.maskConfig = {
-      type: 'custom',
-      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',
-    };
     /**
      * Specifies whether a card number must be entered for
      *    this component to pass form validation.
@@ -149,7 +137,7 @@ export class VegaInputCreditCard {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(this.value), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
+      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
             this.handleVegaChange(input);
@@ -160,10 +148,6 @@ export class VegaInputCreditCard {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, () => {
             this.handleVegaFocus();
           });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalPasteEvent, (event) => {
-            const pastedValue = event.clipboardData.getData('text');
-            this.inputRef.maskConfig = this.getMaskConfig(pastedValue); // The mask should be updated before the value changed.
-          });
         } }));
     };
     this.handleVegaChange = (e) => {
@@ -207,41 +191,18 @@ export class VegaInputCreditCard {
   getCreditCardType(value) {
     return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
   }
-  getMaskConfig(value) {
-    const maskConfig = [];
-    const creditCardType = this.getCreditCardType(value);
-    if (creditCardType) {
-      maskConfig.push(creditCardType.maskConfig);
-      if (this.hideCardNumberOnBlur && value.trim().includes(' ')) {
-        this.maskConfig.options.mask = this.generateDynamicMask();
-        maskConfig.push(this.maskConfig);
-      }
-    }
-    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' */
-  generateDynamicMask() {
-    const cardNumberSplit = this.value.trim().split(' ');
-    const cardNumberMask = this.maskCardNumber(cardNumberSplit).join(' ');
-    return cardNumberMask;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
-   */
-  /* istanbul ignore next */
-  maskCardNumber(cardNumberSplit) {
-    // Map through the array and replace each character with 'X' or '9' depending on the index
-    return 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);
-    });
+  getMaskConfig() {
+    return [
+      {
+        type: 'credit-card',
+        trigger: 'input',
+      },
+      {
+        type: 'credit-card',
+        trigger: 'blur',
+        hideCardNumberOnBlur: this.hideCardNumberOnBlur,
+      },
+    ];
   }
   static get is() { return "vega-input-credit-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.css

@@ -15,6 +15,10 @@
   padding-right: 8px;
 }
 
+.vega-input-phone-number-container vega-input-select {
+  white-space: nowrap;
+}
+
 :host .vega-input-phone-number-container.error vega-input::part(input-container) {
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
 }

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -35,7 +35,9 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     };
     this.renderMultipleSelected = () => {
       if (this.value.length > 0) {
-        return (h("span", { class: "vega-input-select-selected" }, this.selectedLabel(this.value)));
+        const selectedLabelStr = this.selectedLabel(this.value);
+        return (h("span", { class: "vega-input-select-selected" },
+          h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -44,7 +46,8 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     this.renderSingleSelected = () => {
       const item = this.sourceController.getItem(this.value);
       if (item) {
-        return (h("span", { class: "vega-input-select-selected", part: "selected-box" }, item.displayName));
+        return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+          h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: item.displayName }, item.displayName)));
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));

package/dist/collection/components/vega-input-select/vega-input-select.css

@@ -132,9 +132,6 @@
   line-height: 24px;
   letter-spacing: 0px;
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: block;
   min-height: 24px;
 }

package/dist/collection/components/vega-selection-tile/slimmers/controllers/vega-selection-tile-state-controller.js

@@ -49,6 +49,10 @@ export class VegaSelectionTileStateController extends SubStateObserverSlimmer {
               : groupValue === this.value);
           },
         },
+        {
+          subStateName: 'distributeEvenly',
+          parentStateName: 'distributeEvenly',
+        },
       ],
     });
   }
@@ -71,3 +75,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileStateController.prototype, "checkedController", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaSelectionTileStateController.prototype, "distributeEvenly", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -47,6 +47,7 @@ export class VegaSelectionTileGroup {
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'selectType', 'watchSelectType');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'disabled', 'watchDisabled');
     this.valueNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'value', 'watchValue');
+    this.distributeEvenlyNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'distributeEvenly', 'watchDistributeEvenly');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Specifies the label or title for the selection tile group.
@@ -56,6 +57,12 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.7.0
      */
     this.label = '';
+    /**
+     * Distribute vega-selection-tile components evenly to always cover the entire available width of the vega-selection-tile-group
+     *
+     * @vegaVersion 2.58.0
+     */
+    this.distributeEvenly = false;
     /**
      * Determines the selection method for the tile group. Options are:
      *
@@ -96,6 +103,9 @@ export class VegaSelectionTileGroup {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
   }
+  watchDistributeEvenly() {
+    methodPlaceholder();
+  }
   watchSelectType() {
     methodPlaceholder();
   }
@@ -161,6 +171,27 @@ export class VegaSelectionTileGroup {
       "attribute": "hint",
       "reflect": false
     },
+    "distributeEvenly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.58.0"
+          }],
+        "text": "Distribute vega-selection-tile components evenly to always cover the entire available width of the vega-selection-tile-group"
+      },
+      "attribute": "distribute-evenly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "selectType": {
       "type": "string",
       "mutable": false,
@@ -352,6 +383,9 @@ export class VegaSelectionTileGroup {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "distributeEvenly",
+      "methodName": "watchDistributeEvenly"
+    }, {
       "propName": "selectType",
       "methodName": "watchSelectType"
     }, {
@@ -398,6 +432,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaSelectionTileGroup.prototype, "valueNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionTileGroup.prototype, "distributeEvenlyNotifySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaSelectionTileGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile.css

@@ -3,6 +3,18 @@
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
+:host::not(.distribute-evenly) {
+  display: block;
+}
+
+:host(.distribute-evenly) {
+  display: flex;
+  width: 100%;
+}
+:host(.distribute-evenly) .selection-tile {
+  flex: 1;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/vega-selection-tile/vega-selection-tile.js

@@ -40,6 +40,10 @@ export class VegaSelectionTile {
      * Indicates whether the parent selection tile group shows error message.
      */
     this.showError = false;
+    /**
+     * Distribute vega-selection-tile components evenly to always cover the entire available width of the parent
+     */
+    this.distributeEvenly = false;
     /**
      * Specifies the text content of the title displayed
      *    within the selection tile.
@@ -68,7 +72,7 @@ export class VegaSelectionTile {
     this.selectType = 'radio';
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, { class: { 'distribute-evenly': this.distributeEvenly } }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-selection-tile"; }
   static get encapsulation() { return "shadow"; }
@@ -224,7 +228,8 @@ export class VegaSelectionTile {
     }
   }; }
   static get states() { return {
-    "showError": {}
+    "showError": {},
+    "distributeEvenly": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",

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

@@ -261,7 +261,7 @@ export class VegaTableHeadCell {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "__VERSION__"
+            "text": "2.57.0"
           }],
         "text": "Specifies the pinned type of the head cell."
       },

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

@@ -541,7 +541,7 @@ export class VegaTable {
       "docs": {
         "tags": [{
             "name": "vegaVersion",
-            "text": "__VERSION__"
+            "text": "2.57.0"
           }],
         "text": "Defines how columns can be grouped."
       }

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/calendar/calendar-period/month-period.js

@@ -1,11 +1,12 @@
 import { CalendarPeriod } from './calendar-period.abstract';
 import { CalendarDate } from '../calendar-date';
+import { getWeekdays } from '../utils';
 /**
  * Period of month
  */
 export class MonthPeriod extends CalendarPeriod {
   constructor(current, showWeekends) {
-    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    super(MonthPeriod.DISPLAY_DATE_COUNT, current);
     this._type = 'month';
     this._showWeekends = true;
     this._showWeekends = showWeekends === false ? false : true;
@@ -24,6 +25,19 @@ export class MonthPeriod extends CalendarPeriod {
     const date = calendarDate || CalendarDate.from(new Date());
     return new CalendarDate(date.year, date.month, 1);
   }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const firstDay = MonthPeriod.getMonthFirstDay(date);
+    const cursor = firstDay.toDate();
+    cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
   /**
    * @inheritDoc
    */

package/dist/collection/helpers/calendar/calendar-period/week-period.js

@@ -1,5 +1,4 @@
 import { CalendarPeriod } from './calendar-period.abstract';
-import { getWeekdays } from '../utils';
 import { CalendarDate } from '../calendar-date';
 /**
  * Period of the week
@@ -15,17 +14,17 @@ export class WeekPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   next() {
-    const nextWeekStartDate = this.current.toDate();
-    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
-    return this.createBy(CalendarDate.from(nextWeekStartDate));
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() + 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
    * @inheritDoc
    */
   previous() {
-    const previousWeekStartDate = this.current.toDate();
-    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
-    return this.createBy(CalendarDate.from(previousWeekStartDate));
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() - 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
    * @inheritDoc

package/dist/collection/helpers/calendar/test/calendar-period/month-period.test.js

@@ -12,7 +12,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = new MonthPeriod();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 4, 1),
+      current: new CalendarDate(2020, 4, 3),
       startDate: new CalendarDate(2020, 3, 29),
       endDate: new CalendarDate(2020, 5, 9),
     });
@@ -32,7 +32,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.now();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 4, 1),
+      current: new CalendarDate(2020, 4, 3),
       startDate: new CalendarDate(2020, 3, 29),
       endDate: new CalendarDate(2020, 5, 9),
     });
@@ -42,7 +42,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.next();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 5, 1),
+      current: new CalendarDate(2020, 5, 3),
       startDate: new CalendarDate(2020, 4, 26),
       endDate: new CalendarDate(2020, 6, 6),
     });
@@ -52,9 +52,17 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.previous();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 3, 1),
+      current: new CalendarDate(2020, 3, 3),
       startDate: new CalendarDate(2020, 3, 1),
       endDate: new CalendarDate(2020, 4, 11),
     });
   });
+  it('should work when get month first day', () => {
+    const { year, month, date } = MonthPeriod.getMonthFirstDay();
+    expect({ year, month, date }).toEqual({
+      year: 2020,
+      month: 4,
+      date: 1,
+    });
+  });
 });

package/dist/collection/helpers/calendar/test/calendar-period/week-period.test.js

@@ -42,7 +42,7 @@ describe('week-period', () => {
     const { current, count, startDate, endDate } = weekPeriod.next();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 7,
-      current: new CalendarDate(2020, 4, 5),
+      current: new CalendarDate(2020, 4, 10),
       startDate: new CalendarDate(2020, 4, 5),
       endDate: new CalendarDate(2020, 4, 11),
     });
@@ -52,7 +52,7 @@ describe('week-period', () => {
     const { current, count, startDate, endDate } = weekPeriod.previous();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 7,
-      current: new CalendarDate(2020, 3, 22),
+      current: new CalendarDate(2020, 3, 27),
       startDate: new CalendarDate(2020, 3, 22),
       endDate: new CalendarDate(2020, 3, 28),
     });

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;
+  }
+}

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

@@ -0,0 +1,34 @@
+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 CreditCardInputMaskStrategy extends CreditCardMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   */
+  constructor() {
+    super({
+      mask: '',
+      slot: '9',
+      accept: /\d/,
+      triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+    });
+  }
+  /**
+   * get credit card mask config
+   *
+   * @param {string} value - card number string
+   * @returns {Nullable<MaskConfigType>} - mask config type
+   */
+  getCreditCardMaskConfig(value) {
+    let maskConfig;
+    const creditCardType = this.getCreditCardType(value);
+    if (creditCardType) {
+      maskConfig = creditCardType.maskConfig;
+    }
+    return maskConfig;
+  }
+}

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

@@ -0,0 +1,63 @@
+import { CARDS_INFO } from '../../../constants/card-config';
+import { isNonNullable } from '../../../types/type-guard';
+import { StringMaskStrategy } from './string-mask-strategy';
+/**
+ * Credit card mask strategy abstract class
+ */
+export class CreditCardMaskStrategy extends StringMaskStrategy {
+  /* istanbul ignore next */
+  /**
+   * Get the position of caret
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current position of caret
+   * @returns {Nullable<number>} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    if (!isNonNullable(caretPosition))
+      return null;
+    const maskConfigType = this.getCreditCardMaskConfig(input);
+    if (maskConfigType) {
+      if (input.length > this.getLengthLimit()) {
+        const exceededLength = input.length - this.getLengthLimit();
+        return caretPosition - exceededLength;
+      }
+      const startValue = input.substring(0, caretPosition);
+      const maskedStartValue = this.format(startValue);
+      return caretPosition + (maskedStartValue.length - startValue.length);
+    }
+    else {
+      return caretPosition;
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  format(input, inputStatus) {
+    const maskConfigType = this.getCreditCardMaskConfig(input);
+    if (maskConfigType) {
+      this.setMaskConfig(maskConfigType.options);
+      const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
+      if (input.length > this.getLengthLimit() && isNonNullable(caretPosition)) {
+        const rawValueArr = [...input];
+        const exceededLength = input.length - this.getLengthLimit();
+        rawValueArr.splice(caretPosition - exceededLength, exceededLength);
+        return rawValueArr.join('');
+      }
+      return this.replaceMaskWithMatchedInputSlots(input, this.getMatchedInputSlotValue(input));
+    }
+    else {
+      return input;
+    }
+  }
+  /**
+   * get credit card type
+   *
+   * @param {string} value - card number string
+   * @returns {CardConfigType} - card type config
+   */
+  getCreditCardType(value) {
+    return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
+  }
+}

package/dist/collection/helpers/formatter/string-formatter/string-format-strategy.abstract.js

@@ -12,7 +12,7 @@ export class StringFormatStrategy {
    * @returns {boolean} - Whether the format should be applied
    */
   canFormat(triggeredBy, target, inputStatus) {
-    if (triggeredBy === 'init') {
+    if (triggeredBy === 'init' || triggeredBy === 'change') {
       if (target === 'component' && isNonNullable(inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.isBlurred)) {
         return false;
       }
@@ -23,6 +23,9 @@ export class StringFormatStrategy {
     if (triggeredBy === 'input' && target === 'native-input') {
       return true;
     }
+    if (triggeredBy === 'change' && (target === 'component' || target === 'native-input')) {
+      return true;
+    }
     if (triggeredBy === 'blur' && (inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.isBlurred)) {
       if (target === 'component' && this.shouldOverrideComponentValueAfterBlur()) {
         return true;