@heartlandone/vega 2.57.0 → 2.57.1

package/dist/cjs/card-config-2ee5505e.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
+const regex = require('./regex-c1f70fd4.js');
+
+const CARDS_INFO = [
+  {
+    type: 'visa',
+    iconName: 'visa',
+    pattern: regex.VisaRegex,
+    maskConfig: {
+      type: 'credit-card',
+      options: {
+        mask: '9999 9999 9999 9999 999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'mastercard',
+    iconName: 'mastercard',
+    pattern: regex.MasterCardRegex,
+    maskConfig: {
+      type: 'credit-card',
+      options: {
+        mask: '9999 9999 9999 9999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'amex',
+    iconName: 'amex',
+    pattern: regex.AmexRegex,
+    maskConfig: {
+      type: 'credit-card',
+      options: {
+        mask: '9999 999999 99999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'discover',
+    iconName: 'discover',
+    pattern: regex.DiscoverRegex,
+    maskConfig: {
+      type: 'credit-card',
+      options: {
+        mask: '9999 9999 9999 9999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+];
+
+exports.CARDS_INFO = CARDS_INFO;

package/dist/cjs/{string-input-formatter-slimmer-92ab034f.js → string-input-formatter-slimmer-dc1747ad.js}

@@ -20,7 +20,7 @@ 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' && typeGuard.isNonNullable(inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.isBlurred)) {
         return false;
       }
@@ -31,6 +31,9 @@ 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;
@@ -89,6 +92,14 @@ class StringMaskStrategy extends StringFormatStrategy {
     this.acceptRegex = new RegExp(maskConfig.accept, 'g');
     this.insertMode = maskConfig.insertMode === false ? false : true;
   }
+  /**
+   * Set the mask config
+   *
+   * @param {MaskConfig} maskConfig - MaskConfig
+   */
+  setMaskConfig(maskConfig) {
+    this.maskConfig = maskConfig;
+  }
   /**
    * @inheritDoc
    */
@@ -326,6 +337,14 @@ class StringInputFormatterSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       }
     }
   }
+  /**
+   * Format string and update input field
+   */
+  formatValueAfterValueChange() {
+    void index.waitForComponentDidRender(this.host).then(() => {
+      this.formatValue(this.inputElement.value, 'change');
+    });
+  }
   /**
    * Format the value by input strategy and blur strategy when formatter config change.
    */

package/dist/cjs/vega-date-picker_2.cjs.entry.js

@@ -20,7 +20,7 @@ const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
 const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-d534f5a1.js');
 const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-92ab034f.js');
+const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-dc1747ad.js');
 const elementAppenderSlimmer = require('./element-appender-slimmer-7f98d16b.js');
 require('./vega-env-manager-23b8b23c.js');
 const featureFlagController = require('./feature-flag-controller-ce2162c8.js');

package/dist/cjs/vega-env-manager-23b8b23c.js

@@ -11,9 +11,9 @@ exports.FrameworkEnum = void 0;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.57.0` will be replaced to a version string when running publish script.
+    // The `2.57.1` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.57.0';
+    this.vegaVersion = '2.57.1';
     this.framework = exports.FrameworkEnum.VanillaJs;
   }
   /**

package/dist/cjs/vega-input-credit-card.cjs.entry.js

@@ -3,8 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7700600c.js');
-const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
-const regex = require('./regex-c1f70fd4.js');
+const cardConfig = require('./card-config-2ee5505e.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const validCreditCardNumberRule = require('./valid-credit-card-number-rule-4a1b00b8.js');
 const component = require('./component-1e352960.js');
@@ -18,9 +17,8 @@ const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimm
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5aa4cc83.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
 const internalIconManager = require('./internal-icon-manager-f8677abb.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda08efa.js');
-require('./index-4d7bce1a.js');
-require('./_commonjsHelpers-537d719a.js');
+const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
+require('./regex-c1f70fd4.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./number-4816603d.js');
 require('./string-21427167.js');
@@ -28,6 +26,7 @@ require('./observer-f49483e8.js');
 require('./ui-6c069604.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
+require('./vega-internal-event-id-bda08efa.js');
 require('./translation-de7e351e.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
 require('./ui-32e69595.js');
@@ -40,65 +39,8 @@ require('./sub-state-observer-slimmer-93d0a609.js');
 require('./internal-vega-event-manager-e98944ac.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./icon-manager-9072356d.js');
-
-const CARDS_INFO = [
-  {
-    type: 'visa',
-    iconName: 'visa',
-    pattern: regex.VisaRegex,
-    maskConfig: {
-      type: 'custom',
-      options: {
-        mask: '9999 9999 9999 9999 999',
-        slot: '9',
-        accept: /\d/,
-        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
-      },
-    },
-  },
-  {
-    type: 'mastercard',
-    iconName: 'mastercard',
-    pattern: regex.MasterCardRegex,
-    maskConfig: {
-      type: 'custom',
-      options: {
-        mask: '9999 9999 9999 9999',
-        slot: '9',
-        accept: /\d/,
-        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
-      },
-    },
-  },
-  {
-    type: 'amex',
-    iconName: 'amex',
-    pattern: regex.AmexRegex,
-    maskConfig: {
-      type: 'custom',
-      options: {
-        mask: '9999 999999 99999',
-        slot: '9',
-        accept: /\d/,
-        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
-      },
-    },
-  },
-  {
-    type: 'discover',
-    iconName: 'discover',
-    pattern: regex.DiscoverRegex,
-    maskConfig: {
-      type: 'custom',
-      options: {
-        mask: '9999 9999 9999 9999',
-        slot: '9',
-        accept: /\d/,
-        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
-      },
-    },
-  },
-];
+require('./index-4d7bce1a.js');
+require('./_commonjsHelpers-537d719a.js');
 
 const Icons = {
   'visa': {
@@ -194,17 +136,6 @@ const VegaInputCreditCard = class {
     this.focusEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputCreditCard, domNodeSubjectFactory.VegaFocus);
     this.inputCreditCardEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange, domNodeSubjectFactory.VegaFocus, domNodeSubjectFactory.VegaBlur], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaInputCreditCardRuntimeMetricsPayloadDefinition);
-    this.maskConfig = {
-      type: 'custom',
-      options: {
-        mask: '',
-        slot: '9',
-        accept: /[\d\s]/,
-        insertMode: false,
-        triggerAtInit: featureFlagController.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.
@@ -292,7 +223,7 @@ const VegaInputCreditCard = class {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (index.h("vega-input", { label: this.label, type: "number", prefixIcon: internalIconManager.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 (index.h("vega-input", { label: this.label, type: "number", prefixIcon: internalIconManager.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, (input) => {
             this.handleVegaChange(input);
@@ -303,10 +234,6 @@ const VegaInputCreditCard = class {
           domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaFocus, () => {
             this.handleVegaFocus();
           });
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaInternalEventId.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) => {
@@ -347,43 +274,20 @@ const VegaInputCreditCard = class {
     return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderInputContainer()), this.host);
   }
   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;
+    return cardConfig.CARDS_INFO.filter((card) => card.pattern.test(value))[0];
   }
-  /**
-   * 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,
+      },
+    ];
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {

package/dist/cjs/vega-input.cjs.entry.js

@@ -18,8 +18,10 @@ const eventEmitSlimmer = require('./event-emit-slimmer-6154c759.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
 const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-92ab034f.js');
+const stringInputFormatterSlimmer = require('./string-input-formatter-slimmer-dc1747ad.js');
 const typeGuard = require('./type-guard-aa8fdeaf.js');
+const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
+const cardConfig = require('./card-config-2ee5505e.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5aa4cc83.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-11937d6f.js');
 const subStateObserverSlimmer = require('./sub-state-observer-slimmer-93d0a609.js');
@@ -43,6 +45,8 @@ require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
+require('./index-4d7bce1a.js');
+require('./_commonjsHelpers-537d719a.js');
 
 /**
  * This email regex from https://stackoverflow.com/a/201378
@@ -465,6 +469,173 @@ class NumberThousandCommaStrategy extends NumberMaskStrategy {
   }
 }
 
+/**
+ * Credit card mask strategy abstract class
+ */
+class CreditCardMaskStrategy extends stringInputFormatterSlimmer.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 (!typeGuard.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() && typeGuard.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 cardConfig.CARDS_INFO.filter((card) => card.pattern.test(value))[0];
+  }
+}
+
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+class CreditCardInputMaskStrategy extends CreditCardMaskStrategy {
+  /**
+   * It creates a new instance of the Mask class.
+   */
+  constructor() {
+    super({
+      mask: '',
+      slot: '9',
+      accept: /\d/,
+      triggerAtInit: featureFlagController.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;
+  }
+}
+
+/**
+ * A class for formatting string with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+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: featureFlagController.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: featureFlagController.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;
+  }
+}
+
 var __decorate$3 = (undefined && undefined.__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);
@@ -500,6 +671,17 @@ class VegaInputMaskConfigController extends stringInputFormatterSlimmer.StringIn
       return this.generateMaskStrategy('blur');
     };
   }
+  /**
+   * Detect value change and initialize mask formatting
+   *
+   * @param {string} newValue The new value
+   * @param {string} oldValue The new value
+   */
+  watchValue(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.formatValueAfterValueChange();
+    }
+  }
   /**
    * The function `setupStringFormatter` sets up a string formatter for an input element based on provided mask configurations.
    *
@@ -555,6 +737,12 @@ class VegaInputMaskConfigController extends stringInputFormatterSlimmer.StringIn
       case 'number':
         stringFormatStrategy = this.getNumberTypeMaskStrategy(maskConfig.options);
         break;
+      case 'credit-card':
+        stringFormatStrategy =
+          maskTrigger === 'input'
+            ? new CreditCardInputMaskStrategy()
+            : new CreditCardBlurMaskStrategy(maskConfig.hideCardNumberOnBlur);
+        break;
       case 'custom':
         stringFormatStrategy = new stringInputFormatterSlimmer.StringMaskStrategy(maskConfig.options);
         break;
@@ -589,7 +777,8 @@ class VegaInputMaskConfigController extends stringInputFormatterSlimmer.StringIn
    * 'custom' and a trigger of 'blur'.
    */
   isBlurModeMaskConfig(maskConfig) {
-    return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
+    return ((maskConfig.type === 'custom' || maskConfig.type === 'credit-card') &&
+      maskConfig.trigger === 'blur');
   }
 }
 __decorate$3([
@@ -601,6 +790,9 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "type", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentMethod('watchValue')
+], VegaInputMaskConfigController.prototype, "watchValue", null);
 
 const VegaInputRuntimeMetricsPayloadDefinition = [
   {

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-mask-config-controller.js

@@ -4,13 +4,15 @@ 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 { MapToComponentField } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { StringMaskStrategy, } from '../../../../helpers/formatter/string-formatter/string-mask-strategy';
 import { ThousandCommaStrategy } from '../../../../helpers/formatter/string-formatter/thousand-comma-strategy';
 import { NumberMaskStrategy, } from '../../../../helpers/formatter/string-formatter/number-mask-strategy';
 import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/string-input-formatter-slimmer';
 import { CustomFormatterStrategy } from '../../../../helpers/formatter/string-formatter/custom-formatter-strategy';
 import { NumberThousandCommaStrategy } from '../../../../helpers/formatter/string-formatter/number-thousand-comma-strategy';
+import { CreditCardInputMaskStrategy } from '../../../../helpers/formatter/string-formatter/credit-card-input-mask-strategy';
+import { CreditCardBlurMaskStrategy } from '../../../../helpers/formatter/string-formatter/credit-card-blur-mask-strategy';
 /** The `VegaInputMaskConfigController` class in TypeScript manages input mask configuration and string formatting for an input element within a component's shadow root. */
 export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
   constructor() {
@@ -40,6 +42,17 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
       return this.generateMaskStrategy('blur');
     };
   }
+  /**
+   * Detect value change and initialize mask formatting
+   *
+   * @param {string} newValue The new value
+   * @param {string} oldValue The new value
+   */
+  watchValue(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      this.formatValueAfterValueChange();
+    }
+  }
   /**
    * The function `setupStringFormatter` sets up a string formatter for an input element based on provided mask configurations.
    *
@@ -95,6 +108,12 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
       case 'number':
         stringFormatStrategy = this.getNumberTypeMaskStrategy(maskConfig.options);
         break;
+      case 'credit-card':
+        stringFormatStrategy =
+          maskTrigger === 'input'
+            ? new CreditCardInputMaskStrategy()
+            : new CreditCardBlurMaskStrategy(maskConfig.hideCardNumberOnBlur);
+        break;
       case 'custom':
         stringFormatStrategy = new StringMaskStrategy(maskConfig.options);
         break;
@@ -129,7 +148,8 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
    * 'custom' and a trigger of 'blur'.
    */
   isBlurModeMaskConfig(maskConfig) {
-    return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
+    return ((maskConfig.type === 'custom' || maskConfig.type === 'credit-card') &&
+      maskConfig.trigger === 'blur');
   }
 }
 __decorate([
@@ -141,3 +161,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputMaskConfigController.prototype, "type", void 0);
+__decorate([
+  MapToComponentMethod('watchValue')
+], VegaInputMaskConfigController.prototype, "watchValue", null);

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

@@ -924,7 +924,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "MaskConfigType | MaskConfigType[]",
-        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; })",
+        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\" | \"credit-card\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; hideCardNumberOnBlur?: boolean; })",
         "references": {
           "MaskConfigType": {
             "location": "import",