@globalpayments/vega 2.57.0 → 2.58.0

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-dropdown_5.cjs.entry.js

@@ -2227,6 +2227,14 @@ var __decorate$9 = (undefined && undefined.__decorate) || function (decorators,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.setLabelRef = (ref) => {
+      if (ref) {
+        this.labelRef = ref;
+      }
+    };
+  }
   render() {
     return (index.h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
         'vega-dropdown-item-selected': this.selected,
@@ -2242,7 +2250,7 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
       } },
       this.renderSelectIcon(),
       this.renderPrefixIcon(),
-      this.renderLabel(),
+      this.itemDisplayRule === 'ellipsis' ? this.renderLabelWithTooltip() : this.renderLabel(),
       this.renderCounter()));
   }
   renderSelectIcon() {
@@ -2266,12 +2274,12 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
     // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
     // such as input select selected item display
     if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
-      return (index.h("span", { class: "vega-dropdown-item-label" },
+      return (index.h("span", { class: "vega-dropdown-item-label", ref: this.setLabelRef },
         index.h("slot", null)));
     }
     else {
       return (index.h(index.Fragment, null,
-        index.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        index.h("span", { innerHTML: this.label, class: "vega-dropdown-item-label", ref: this.setLabelRef }),
         index.h("span", { class: "v-hidden" },
           index.h("slot", null))));
     }
@@ -2283,6 +2291,22 @@ class VegaDropdownItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
   }
+  renderLabelWithTooltip() {
+    if (!this.label) {
+      return this.renderLabel();
+    }
+    return (index.h("vega-tooltip", { ref: (ref) => {
+        if (ref) {
+          this.tooltipRef = ref;
+        }
+      }, text: this.label.replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onMouseEnter: (e) => {
+        e.preventDefault();
+        const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;
+        this.tooltipRef.trigger = isTextTruncated ? 'hover' : 'none';
+      } }, this.renderLabel()));
+  }
 }
 __decorate$9([
   globalSlimmerRegistry.MapToComponentField()
@@ -2434,7 +2458,7 @@ __decorate$7([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaDropdownItemClickController.prototype, "clickEventEmitter", void 0);
 
-const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));pointer-events:none}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .v-hidden{display:none}";
+const vegaDropdownItemCss = ":host{display:block}:host li{padding-top:8px;padding-bottom:8px;padding-left:16px;padding-right:16px;margin-left:4px;margin-right:4px;cursor:pointer;display:flex;align-items:center;gap:8px}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));outline:0}:host li,:host li a{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;text-decoration:none}@media screen and (min-width: 768px) and (max-width: 1023px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host li,:host li a{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host li:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li:focus{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}:host li.vega-dropdown-item-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));pointer-events:none}:host li.vega-dropdown-item-disabled .item-prefix,:host li.vega-dropdown-item-disabled .selected-prefix{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host li.danger .item-prefix,:host li.danger .vega-dropdown-item-label{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host li .item-prefix{display:flex;width:16px;height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:1}:host li .selected-prefix{color:rgba(var(--v-text-link, 19, 98, 226, 1));width:16px;height:16px;display:flex;align-items:center;min-width:16px}:host li .item-counter{width:20px;height:20px}:host .vega-dropdown-item-label{flex-grow:1}:host .vega-dropdown-item-display-newline .vega-dropdown-item-label{overflow-wrap:break-word}:host .vega-dropdown-item-display-ellipsis .vega-dropdown-item-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}:host .vega-dropdown-item-display-ellipsis vega-tooltip{flex-grow:1;display:block;overflow:hidden}:host .v-hidden{display:none}";
 
 var __decorate$6 = (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;

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.58.0` 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.58.0';
     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-phone-number.cjs.entry.js

@@ -6660,7 +6660,7 @@ class ValidPhoneNumberRule extends internalFormFieldValidationRule_abstract.Inte
   }
 }
 
-const vegaInputPhoneNumberCss = ":host{display:inline-block;width:100%}:host .vega-input-phone-number-hint{display:inline-block;padding-top:12px;padding-left:8px;padding-right:8px}: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))}:host .vega-input-phone-number-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));box-shadow:0 0 0}:host vega-field-label{margin-bottom:8px}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-phone-number-dropdown-item{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}.vega-input-phone-number-dropdown-icon{text-align:center;font-size:0px}";
+const vegaInputPhoneNumberCss = ":host{display:inline-block;width:100%}:host .vega-input-phone-number-hint{display:inline-block;padding-top:12px;padding-left:8px;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))}:host .vega-input-phone-number-container.error vega-input::part(input-container):hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));box-shadow:0 0 0}:host vega-field-label{margin-bottom:8px}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-top:12px;padding-right:8px;padding-left:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-phone-number-dropdown-item{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}.vega-input-phone-number-dropdown-icon{text-align:center;font-size:0px}";
 
 var __decorate = (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;

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

@@ -327,7 +327,9 @@ class VegaInputSelectDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer
     };
     this.renderMultipleSelected = () => {
       if (this.value.length > 0) {
-        return (index.h("span", { class: "vega-input-select-selected" }, this.selectedLabel(this.value)));
+        const selectedLabelStr = this.selectedLabel(this.value);
+        return (index.h("span", { class: "vega-input-select-selected" },
+          index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
       else {
         return (index.h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -336,7 +338,8 @@ class VegaInputSelectDropdownRenderer extends globalSlimmerRegistry.VegaSlimmer
     this.renderSingleSelected = () => {
       const item = this.sourceController.getItem(this.value);
       if (item) {
-        return (index.h("span", { class: "vega-input-select-selected", part: "selected-box" }, item.displayName));
+        return (index.h("span", { class: "vega-input-select-selected", part: "selected-box" },
+          index.h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: item.displayName }, item.displayName)));
       }
       else {
         return (index.h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -708,7 +711,7 @@ __decorate$1([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaInputSelectPrefixIconRenderer.prototype, "connectedCallback", null);
 
-const vegaInputSelectCss = ":host{display:inline-block;width:100%;min-width:0px;text-align:left;line-height:normal}:host(.default) .vega-input-select-container{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px}:host(.small) .vega-input-select-container{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));padding-bottom:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-input-select-label .vega-input-select-required{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}:host .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:8px;gap:8px;display:block;display:flex;align-items:center;cursor:pointer}:host .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-input-select-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .error .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .error .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .error .vega-input-select-container:focus{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host(.vega-input-select-disabled) .vega-input-select-label{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.vega-input-select-disabled) vega-dropdown{pointer-events:none}:host(.vega-input-select-disabled) .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host(.vega-input-select-disabled) .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.vega-input-select-disabled) vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host .vega-input-select-select-container{flex-grow:1;min-width:0px}:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;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}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.vega-input-select-disabled) .vega-input-select-selected{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-input-select-prefix-icon{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}:host .vega-input-select-toggle-icon{width:16px;height:16px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}:host .vega-input-select-hint{padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host vega-dropdown{display:block}";
+const vegaInputSelectCss = ":host{display:inline-block;width:100%;min-width:0px;text-align:left;line-height:normal}:host(.default) .vega-input-select-container{padding-left:16px;padding-right:16px;padding-top:12px;padding-bottom:12px}:host(.small) .vega-input-select-container{padding-left:12px;padding-right:12px;padding-top:8px;padding-bottom:8px}:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));padding-bottom:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-label{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}:host .vega-input-select-label .vega-input-select-required{color:rgba(var(--v-text-error, 189, 41, 71, 1));margin-left:4px}:host .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:8px;gap:8px;display:block;display:flex;align-items:center;cursor:pointer}:host .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-input-select-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .error .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .error .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .error .vega-input-select-container:focus{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host(.vega-input-select-disabled) .vega-input-select-label{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.vega-input-select-disabled) vega-dropdown{pointer-events:none}:host(.vega-input-select-disabled) .vega-input-select-container{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));--tw-shadow:0 0 #0000;box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px}:host(.vega-input-select-disabled) .vega-input-select-container:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.vega-input-select-disabled) vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host .vega-input-select-select-container{flex-grow:1;min-width:0px}:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));display:block;min-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-selected{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.vega-input-select-disabled) .vega-input-select-selected{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-height:24px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-input-select-prefix-icon{text-align:center;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-size:0px}:host .vega-input-select-toggle-icon{width:16px;height:16px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host .vega-error{display:inline-block;padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}:host .vega-input-select-hint{padding-left:8px;padding-right:8px;padding-top:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-select-hint{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host vega-dropdown{display:block}";
 
 var __decorate = (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;

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 = [
   {