@heartlandone/vega 2.59.1 → 2.61.0

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

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-00ba6623.js');
 const icons = require('./icons-dbc3eb9c.js');
-const typeGuard = require('./type-guard-aa8fdeaf.js');
+const typeGuard = require('./type-guard-f12b5bae.js');
 const component = require('./component-1e352960.js');
-const designToken = require('./design-token-0b1315f2.js');
+const designToken = require('./design-token-16f74439.js');
 const ui = require('./ui-4ce1fa08.js');
 const iconManager = require('./icon-manager-9072356d.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
@@ -14,15 +14,14 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
-require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./responsive-format-facade-d2e03695.js');
+require('./responsive-format-facade-0d22ff78.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
 require('./number-4816603d.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./vega-skeleton-loader-controller-b1971f43.js');
+require('./vega-skeleton-loader-controller-9c54f3aa.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./dark-mode-style-controller-ab0703e1.js');
@@ -30,18 +29,18 @@ require('./static-subject-title-85732e0f.js');
 require('./change-manager-a297e4d2.js');
 require('./observer-f49483e8.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./internal-vega-event-manager-83065493.js');
-require('./dom-node-subject-factory-bad99695.js');
+require('./internal-vega-event-manager-7b87c2f4.js');
+require('./dom-node-subject-factory-4eb1fec2.js');
 require('./feature-flag-controller-ce2162c8.js');
 require('./index-4d7bce1a.js');
 require('./wait-for-vega-handler-5469ff80.js');
 require('./translation-cde4dce3.js');
-require('./content-state-b82b74de.js');
-require('./code-block-4bfae76d.js');
-require('./vega-internal-event-id-ae6e2c13.js');
+require('./content-state-d7b8e70b.js');
+require('./code-block-ecb2df41.js');
+require('./vega-internal-event-id-9647aaf8.js');
 require('./string-39438062.js');
 require('./object-e2e28e3d.js');
-require('./state-background-color-formatter-c57409ea.js');
+require('./state-background-color-formatter-aa5570f6.js');
 
 const vegaIconCss = ":host(.v-text-primary),.v-text-primary{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}:host(.v-text-secondary),.v-text-secondary{color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}:host(.v-text-inverted-primary),.v-text-inverted-primary{color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1))}:host(.v-text-inverted-secondary),.v-text-inverted-secondary{color:rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1))}:host(.v-text-black),.v-text-black{color:rgba(var(--v-text-black, 32, 54, 69, 1))}:host(.v-text-white),.v-text-white{color:rgba(var(--v-text-white, 252, 252, 252, 1))}:host(.v-text-brand),.v-text-brand{color:rgba(var(--v-text-brand, 51, 57, 61, 1))}:host(.v-text-danger-link),.v-text-danger-link{color:rgba(var(--v-text-danger-link, 230, 50, 87, 1))}:host(.v-text-danger-link-hover),.v-text-danger-link-hover{color:rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1))}:host(.v-text-danger-link-active),.v-text-danger-link-active{color:rgba(var(--v-text-danger-link-active, 189, 41, 71, 1))}:host(.v-text-danger-link-focus),.v-text-danger-link-focus{color:rgba(var(--v-text-danger-link-focus, 240, 52, 91, 1))}:host(.v-text-danger-link-visited),.v-text-danger-link-visited{color:rgba(var(--v-text-danger-link-visited, 230, 50, 87, 1))}:host(.v-text-disabled),.v-text-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.v-text-error),.v-text-error{color:rgba(var(--v-text-error, 189, 41, 71, 1))}:host(.v-text-input-disabled),.v-text-input-disabled{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}:host(.v-text-input-placeholder),.v-text-input-placeholder{color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}:host(.v-text-link),.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}:host(.v-text-link-hover),.v-text-link-hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}:host(.v-text-link-active),.v-text-link-active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}:host(.v-text-link-focus),.v-text-link-focus{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}:host(.v-text-link-visited),.v-text-link-visited{color:rgba(var(--v-text-link-visited, 95, 56, 206, 1))}:host(.v-text-on-action),.v-text-on-action{color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}:host(.v-text-on-danger),.v-text-on-danger{color:rgba(var(--v-text-on-danger, 252, 252, 252, 1))}:host(.v-text-on-disabled),.v-text-on-disabled{color:rgba(var(--v-text-on-disabled, 252, 252, 252, 1))}:host(.v-text-sidebar-link),.v-text-sidebar-link{color:rgba(var(--v-text-sidebar-link, 188, 186, 213, 1))}:host(.v-text-sidebar-link-hover),.v-text-sidebar-link-hover{color:rgba(var(--v-text-sidebar-link-hover, 18, 18, 39, 1))}:host(.v-text-sidebar-link-selected),.v-text-sidebar-link-selected{color:rgba(var(--v-text-sidebar-link-selected, 252, 252, 252, 1))}:host(.v-text-site-footer-link),.v-text-site-footer-link{color:rgba(var(--v-text-site-footer-link, 171, 198, 216, 1))}:host(.v-text-site-footer-link-hover),.v-text-site-footer-link-hover{color:rgba(var(--v-text-site-footer-link-hover, 199, 217, 229, 1))}:host(.v-text-site-footer-link-active),.v-text-site-footer-link-active{color:rgba(var(--v-text-site-footer-link-active, 143, 179, 203, 1))}:host(.v-text-success),.v-text-success{color:rgba(var(--v-text-success, 1, 128, 31, 1))}:host(.v-text-inverted-success),.v-text-inverted-success{color:rgba(var(--v-text-inverted-success, 89, 217, 119, 1))}:host(.v-text-accent1-primary),.v-text-accent1-primary{color:rgba(var(--v-text-accent1-primary, 115, 230, 220, 1))}:host(.v-text-accent2-primary),.v-text-accent2-primary{color:rgba(var(--v-text-accent2-primary, 128, 107, 255, 1))}:host(.v-text-accent3-primary),.v-text-accent3-primary{color:rgba(var(--v-text-accent3-primary, 255, 220, 131, 1))}:host(.v-text-accent4-primary),.v-text-accent4-primary{color:rgba(var(--v-text-accent4-primary, 255, 149, 113, 1))}:host(.v-text-accent5-primary),.v-text-accent5-primary{color:rgba(var(--v-text-accent5-primary, 0, 187, 255, 1))}:host(.v-text-accent6-primary),.v-text-accent6-primary{color:rgba(var(--v-text-accent6-primary, 240, 52, 91, 1))}:host(.v-text-accent7-primary),.v-text-accent7-primary{color:rgba(var(--v-text-accent7-primary, 37, 159, 159, 1))}:host(.v-text-accent8-primary),.v-text-accent8-primary{color:rgba(var(--v-text-accent8-primary, 86, 61, 130, 1))}:host(.v-text-accent9-primary),.v-text-accent9-primary{color:rgba(var(--v-text-accent9-primary, 255, 191, 63, 1))}:host(.v-text-accent10-primary),.v-text-accent10-primary{color:rgba(var(--v-text-accent10-primary, 237, 122, 35, 1))}:host(.v-w-0),.v-w-0{width:0px}:host(.v-w-size-0),.v-w-size-0{width:0px}:host(.v-w-size-4),.v-w-size-4{width:4px}:host(.v-w-size-8),.v-w-size-8{width:8px}:host(.v-w-size-12),.v-w-size-12{width:12px}:host(.v-w-size-16),.v-w-size-16{width:16px}:host(.v-w-size-20),.v-w-size-20{width:20px}:host(.v-w-size-24),.v-w-size-24{width:24px}:host(.v-w-size-32),.v-w-size-32{width:32px}:host(.v-w-size-40),.v-w-size-40{width:40px}:host(.v-w-size-48),.v-w-size-48{width:48px}:host(.v-w-size-64),.v-w-size-64{width:64px}:host(.v-w-size-72),.v-w-size-72{width:72px}:host(.v-w-size-80),.v-w-size-80{width:80px}:host(.v-w-size-112),.v-w-size-112{width:112px}:host(.v-w-size-2),.v-w-size-2{width:2px}:host(.v-h-0),.v-h-0{height:0px}:host(.v-h-size-0),.v-h-size-0{height:0px}:host(.v-h-size-4),.v-h-size-4{height:4px}:host(.v-h-size-8),.v-h-size-8{height:8px}:host(.v-h-size-12),.v-h-size-12{height:12px}:host(.v-h-size-16),.v-h-size-16{height:16px}:host(.v-h-size-20),.v-h-size-20{height:20px}:host(.v-h-size-24),.v-h-size-24{height:24px}:host(.v-h-size-32),.v-h-size-32{height:32px}:host(.v-h-size-40),.v-h-size-40{height:40px}:host(.v-h-size-48),.v-h-size-48{height:48px}:host(.v-h-size-64),.v-h-size-64{height:64px}:host(.v-h-size-72),.v-h-size-72{height:72px}:host(.v-h-size-80),.v-h-size-80{height:80px}:host(.v-h-size-112),.v-h-size-112{height:112px}:host(.v-h-size-2),.v-h-size-2{height:2px}:host{display:inline-flex;user-select:none}i{line-height:1}:host(:not(.vega-auto-size)) ::slotted(svg){width:100%;height:100%}";
 

package/dist/cjs/vega-image-uploader.cjs.entry.js

@@ -6,27 +6,26 @@ const index = require('./index-00ba6623.js');
 const component = require('./component-1e352960.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const responsiveFormatFacade = require('./responsive-format-facade-d2e03695.js');
+const responsiveFormatFacade = require('./responsive-format-facade-0d22ff78.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-df6e6df0.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-15130e50.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-4eb1fec2.js');
 const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-b1971f43.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-772d1892.js');
+const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-9c54f3aa.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-dab30e5c.js');
 const ui = require('./ui-4ce1fa08.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-5df43771.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-efc70b94.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-184fe3b2.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-2da7c9d6.js');
 const translationSlimmer = require('./translation-slimmer-af399096.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-17022f93.js');
 const darkModeStyleController = require('./dark-mode-style-controller-ab0703e1.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
-require('./type-guard-aa8fdeaf.js');
+require('./type-guard-f12b5bae.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
-require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
 require('./try-get-document-c0ebd39a.js');
@@ -42,16 +41,16 @@ require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./wait-for-vega-handler-5469ff80.js');
 require('./translation-cde4dce3.js');
-require('./content-state-b82b74de.js');
-require('./code-block-4bfae76d.js');
-require('./vega-internal-event-id-ae6e2c13.js');
+require('./content-state-d7b8e70b.js');
+require('./code-block-ecb2df41.js');
+require('./vega-internal-event-id-9647aaf8.js');
 require('./string-39438062.js');
 require('./object-e2e28e3d.js');
 require('./observer-f49483e8.js');
-require('./internal-vega-event-manager-83065493.js');
+require('./internal-vega-event-manager-7b87c2f4.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-0788232a.js');
+require('./sub-state-observer-slimmer-df7df5bb.js');
 
 var __decorate$b = (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-credit-card.cjs.entry.js

@@ -3,22 +3,27 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-00ba6623.js');
-const cardConfig = require('./card-config-2ee5505e.js');
+const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
+const typeGuard = require('./type-guard-f12b5bae.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
-const validCreditCardNumberRule = require('./valid-credit-card-number-rule-4a1b00b8.js');
+const validCreditCardNumberRule = require('./valid-credit-card-number-rule-ce5c9147.js');
 const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-772d1892.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-dab30e5c.js');
 const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-efc70b94.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-5df43771.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-df6e6df0.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-2da7c9d6.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-184fe3b2.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-15130e50.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-4eb1fec2.js');
 const internalIconManager = require('./internal-icon-manager-f8677abb.js');
-const featureFlagController = require('./feature-flag-controller-ce2162c8.js');
-require('./regex-c1f70fd4.js');
+const stringMaskStrategy = require('./string-mask-strategy-6bdad95e.js');
+require('./index-4d7bce1a.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./breakpoints-ebde4837.js');
+require('./ui-32e69595.js');
+require('./typography-4560e7f1.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./number-4816603d.js');
 require('./string-39438062.js');
@@ -26,21 +31,77 @@ require('./observer-f49483e8.js');
 require('./ui-4ce1fa08.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./vega-internal-event-id-ae6e2c13.js');
+require('./vega-internal-event-id-9647aaf8.js');
 require('./translation-cde4dce3.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
-require('./ui-32e69595.js');
-require('./breakpoints-ebde4837.js');
 require('./try-get-document-c0ebd39a.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
-require('./sub-state-observer-slimmer-0788232a.js');
-require('./internal-vega-event-manager-83065493.js');
+require('./sub-state-observer-slimmer-df7df5bb.js');
+require('./internal-vega-event-manager-7b87c2f4.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./icon-manager-9072356d.js');
-require('./index-4d7bce1a.js');
-require('./_commonjsHelpers-537d719a.js');
+require('./string-format-strategy.abstract-07a95352.js');
+
+const CARDS_INFO = [
+  {
+    type: 'visa',
+    iconName: 'visa',
+    pattern: typeGuard.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: typeGuard.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: typeGuard.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: typeGuard.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'),
+      },
+    },
+  },
+];
 
 const Icons = {
   'visa': {
@@ -92,6 +153,173 @@ const VegaInputCreditCardRuntimeMetricsPayloadDefinition = [
   },
 ];
 
+/**
+ * Credit card mask strategy abstract class
+ */
+class CreditCardMaskStrategy extends stringMaskStrategy.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 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: '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',
+    };
+    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;
+  }
+}
+
 const vegaInputCreditCardCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -274,18 +502,19 @@ const VegaInputCreditCard = class {
     return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderInputContainer()), this.host);
   }
   getCreditCardType(value) {
-    return cardConfig.CARDS_INFO.filter((card) => card.pattern.test(value))[0];
+    return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
   }
   getMaskConfig() {
     return [
       {
-        type: 'credit-card',
+        type: 'custom',
         trigger: 'input',
+        strategy: () => new CreditCardInputMaskStrategy(),
       },
       {
-        type: 'credit-card',
+        type: 'custom',
         trigger: 'blur',
-        hideCardNumberOnBlur: this.hideCardNumberOnBlur,
+        strategy: () => new CreditCardBlurMaskStrategy(this.hideCardNumberOnBlur),
       },
     ];
   }

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

@@ -6,42 +6,41 @@ const index = require('./index-00ba6623.js');
 const component = require('./component-1e352960.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-df6e6df0.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-5df43771.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-efc70b94.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-15130e50.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-4eb1fec2.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-184fe3b2.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-2da7c9d6.js');
 const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-faca2038.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-138a90e5.js');
 const number = require('./number-4816603d.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-772d1892.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-dab30e5c.js');
 const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-943eb7cc.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-9602b5bb.js');
 require('./observer-f49483e8.js');
 require('./ui-4ce1fa08.js');
-require('./internal-vega-event-manager-83065493.js');
+require('./internal-vega-event-manager-7b87c2f4.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-ce2162c8.js');
 require('./index-4d7bce1a.js');
 require('./_commonjsHelpers-537d719a.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./try-get-document-c0ebd39a.js');
-require('./keyboard-manager-6858915b.js');
-require('./type-guard-aa8fdeaf.js');
+require('./keyboard-manager-7f4e1f43.js');
+require('./type-guard-f12b5bae.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32e69595.js');
-require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 require('./string-39438062.js');
 require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-require('./vega-internal-event-id-ae6e2c13.js');
+require('./vega-internal-event-id-9647aaf8.js');
 require('./translation-cde4dce3.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
-require('./sub-state-observer-slimmer-0788232a.js');
+require('./sub-state-observer-slimmer-df7df5bb.js');
 
 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;