@heartlandone/vega 2.59.1 → 2.61.0

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

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-057d0f70.js';
 import { g as getIconFromToken, I as Icons } from './icons-8627925e.js';
-import { h as Spacing } from './type-guard-84b1f192.js';
+import { h as Spacing } from './type-guard-12f7654b.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { i as formatAndValidTextColor } from './design-token-dbc8c235.js';
+import { i as formatAndValidTextColor } from './design-token-eaa7c221.js';
 import { a as arrayToClassString } from './ui-c20be16d.js';
 import { V as VegaIconManager } from './icon-manager-2ee1c619.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
@@ -10,15 +10,14 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
-import './regex-dfe11abf.js';
 import './typography-396de03f.js';
-import './responsive-format-facade-81b72f39.js';
+import './responsive-format-facade-86b6de3b.js';
 import './page-resize-observer-slimmer-0bf7fbf3.js';
 import './number-4398f2e1.js';
 import './pixel-f32c07ce.js';
 import './array-7888f339.js';
 import './vega-env-manager-8f8dc473.js';
-import './vega-skeleton-loader-controller-38864fcd.js';
+import './vega-skeleton-loader-controller-394a6026.js';
 import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import './dynamic-slimmer-90b8af32.js';
 import './dark-mode-style-controller-3bbb32dc.js';
@@ -26,18 +25,18 @@ import './static-subject-title-633b3474.js';
 import './change-manager-6a7eb88c.js';
 import './observer-3959f9dd.js';
 import './_commonjsHelpers-9943807e.js';
-import './internal-vega-event-manager-526f8ed1.js';
-import './dom-node-subject-factory-202655e7.js';
+import './internal-vega-event-manager-a654cf8a.js';
+import './dom-node-subject-factory-3c2e13f1.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './wait-for-vega-handler-c2c07ac3.js';
 import './translation-833d9ef4.js';
-import './content-state-73900a67.js';
-import './code-block-3d519665.js';
-import './vega-internal-event-id-b7c865de.js';
+import './content-state-fc47457c.js';
+import './code-block-89a4dd13.js';
+import './vega-internal-event-id-5a143cd2.js';
 import './string-a953eafc.js';
 import './object-66c37948.js';
-import './state-background-color-formatter-da5e76e8.js';
+import './state-background-color-formatter-0f01d27a.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/esm/vega-image-uploader.entry.js

@@ -2,27 +2,26 @@ import { h, H as Host, r as registerInstance, c as createEvent, g as getElement
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-81b72f39.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-86b6de3b.js';
 import { m as methodPlaceholder } from './placeholder-bf562081.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-999e21e3.js';
-import { a as VegaClick, f as VegaChange, k as VegaRemove, z as VegaCancel } from './dom-node-subject-factory-202655e7.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-1e456cd4.js';
+import { a as VegaClick, f as VegaChange, l as VegaRemove, B as VegaCancel } from './dom-node-subject-factory-3c2e13f1.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-633b3474.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { c as VegaDialog } from './vega-skeleton-loader-controller-38864fcd.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
+import { c as VegaDialog } from './vega-skeleton-loader-controller-394a6026.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6e69ca4e.js';
 import { f as findParent, e as getDeepActiveElementInShadow } from './ui-c20be16d.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2a3115ae.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-4428ce26.js';
 import { T as TranslationSlimmer } from './translation-slimmer-c83b52c1.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-0c7d1c77.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-3bbb32dc.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
-import './type-guard-84b1f192.js';
+import './type-guard-12f7654b.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
-import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './page-resize-observer-slimmer-0bf7fbf3.js';
 import './try-get-document-bef0f526.js';
@@ -38,16 +37,16 @@ import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import './dynamic-slimmer-90b8af32.js';
 import './wait-for-vega-handler-c2c07ac3.js';
 import './translation-833d9ef4.js';
-import './content-state-73900a67.js';
-import './code-block-3d519665.js';
-import './vega-internal-event-id-b7c865de.js';
+import './content-state-fc47457c.js';
+import './code-block-89a4dd13.js';
+import './vega-internal-event-id-5a143cd2.js';
 import './string-a953eafc.js';
 import './object-66c37948.js';
 import './observer-3959f9dd.js';
-import './internal-vega-event-manager-526f8ed1.js';
+import './internal-vega-event-manager-a654cf8a.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './sub-state-observer-slimmer-c823d69c.js';
+import './sub-state-observer-slimmer-d474634d.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/esm/vega-input-credit-card.entry.js

@@ -1,20 +1,25 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-057d0f70.js';
-import { C as CARDS_INFO } from './card-config-d2ad484e.js';
+import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
+import { V as VisaRegex, M as MasterCardRegex, A as AmexRegex, D as DiscoverRegex, i as isNonNullable } from './type-guard-12f7654b.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
-import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-cc497bec.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-81443274.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6e69ca4e.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-633b3474.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-999e21e3.js';
-import { f as VegaChange, B as VegaBlur, A as VegaFocus } from './dom-node-subject-factory-202655e7.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-4428ce26.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2a3115ae.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-1e456cd4.js';
+import { f as VegaChange, D as VegaBlur, C as VegaFocus } from './dom-node-subject-factory-3c2e13f1.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-7eac52c8.js';
-import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
-import './regex-dfe11abf.js';
+import { S as StringMaskStrategy } from './string-mask-strategy-6232a1c1.js';
+import './index-e9da316f.js';
+import './_commonjsHelpers-9943807e.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './typography-396de03f.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './number-4398f2e1.js';
 import './string-a953eafc.js';
@@ -22,21 +27,77 @@ import './observer-3959f9dd.js';
 import './ui-c20be16d.js';
 import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import './dynamic-slimmer-90b8af32.js';
-import './vega-internal-event-id-b7c865de.js';
+import './vega-internal-event-id-5a143cd2.js';
 import './translation-833d9ef4.js';
 import './page-resize-observer-slimmer-0bf7fbf3.js';
-import './ui-8424715a.js';
-import './breakpoints-d9faf11c.js';
 import './try-get-document-bef0f526.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
-import './sub-state-observer-slimmer-c823d69c.js';
-import './internal-vega-event-manager-526f8ed1.js';
+import './sub-state-observer-slimmer-d474634d.js';
+import './internal-vega-event-manager-a654cf8a.js';
 import './vega-env-manager-8f8dc473.js';
 import './icon-manager-2ee1c619.js';
-import './index-e9da316f.js';
-import './_commonjsHelpers-9943807e.js';
+import './string-format-strategy.abstract-452f4398.js';
+
+const CARDS_INFO = [
+  {
+    type: 'visa',
+    iconName: 'visa',
+    pattern: VisaRegex,
+    maskConfig: {
+      type: 'custom',
+      options: {
+        mask: '9999 9999 9999 9999 999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'mastercard',
+    iconName: 'mastercard',
+    pattern: MasterCardRegex,
+    maskConfig: {
+      type: 'custom',
+      options: {
+        mask: '9999 9999 9999 9999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'amex',
+    iconName: 'amex',
+    pattern: AmexRegex,
+    maskConfig: {
+      type: 'custom',
+      options: {
+        mask: '9999 999999 99999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+  {
+    type: 'discover',
+    iconName: 'discover',
+    pattern: DiscoverRegex,
+    maskConfig: {
+      type: 'custom',
+      options: {
+        mask: '9999 9999 9999 9999',
+        slot: '9',
+        accept: /\d/,
+        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
+      },
+    },
+  },
+];
 
 const Icons = {
   'visa': {
@@ -88,6 +149,173 @@ const VegaInputCreditCardRuntimeMetricsPayloadDefinition = [
   },
 ];
 
+/**
+ * Credit card mask strategy abstract class
+ */
+class CreditCardMaskStrategy extends StringMaskStrategy {
+  /* istanbul ignore next */
+  /**
+   * Get the position of caret
+   *
+   * @param {string} input - The input string
+   * @param {number} caretPosition - The current position of caret
+   * @returns {Nullable<number>} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    if (!isNonNullable(caretPosition))
+      return null;
+    const maskConfigType = this.getCreditCardMaskConfig(input);
+    if (maskConfigType) {
+      if (input.length > this.getLengthLimit()) {
+        const exceededLength = input.length - this.getLengthLimit();
+        return caretPosition - exceededLength;
+      }
+      const startValue = input.substring(0, caretPosition);
+      const maskedStartValue = this.format(startValue);
+      return caretPosition + (maskedStartValue.length - startValue.length);
+    }
+    else {
+      return caretPosition;
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  format(input, inputStatus) {
+    const maskConfigType = this.getCreditCardMaskConfig(input);
+    if (maskConfigType) {
+      this.setMaskConfig(maskConfigType.options);
+      const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
+      if (input.length > this.getLengthLimit() && isNonNullable(caretPosition)) {
+        const rawValueArr = [...input];
+        const exceededLength = input.length - this.getLengthLimit();
+        rawValueArr.splice(caretPosition - exceededLength, exceededLength);
+        return rawValueArr.join('');
+      }
+      return this.replaceMaskWithMatchedInputSlots(input, this.getMatchedInputSlotValue(input));
+    }
+    else {
+      return input;
+    }
+  }
+  /**
+   * get credit card type
+   *
+   * @param {string} value - card number string
+   * @returns {CardConfigType} - card type config
+   */
+  getCreditCardType(value) {
+    return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
+  }
+}
+
+/**
+ * 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: 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: 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: 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) {
@@ -275,13 +503,14 @@ const VegaInputCreditCard = class {
   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/esm/vega-input-numeric.entry.js

@@ -2,42 +2,41 @@ import { h, r as registerInstance, c as createEvent, H as Host, g as getElement
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-999e21e3.js';
-import { f as VegaChange } from './dom-node-subject-factory-202655e7.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-1e456cd4.js';
+import { f as VegaChange } from './dom-node-subject-factory-3c2e13f1.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2a3115ae.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-4428ce26.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-633b3474.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-818050ee.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-cae3a002.js';
 import { c as convertToNumber, b as countDecimals } from './number-4398f2e1.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6e69ca4e.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-b3524c09.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-ee730968.js';
 import './observer-3959f9dd.js';
 import './ui-c20be16d.js';
-import './internal-vega-event-manager-526f8ed1.js';
+import './internal-vega-event-manager-a654cf8a.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './_commonjsHelpers-9943807e.js';
 import './dynamic-slimmer-90b8af32.js';
 import './try-get-document-bef0f526.js';
-import './keyboard-manager-fa6355cb.js';
-import './type-guard-84b1f192.js';
+import './keyboard-manager-ab521d22.js';
+import './type-guard-12f7654b.js';
 import './breakpoints-d9faf11c.js';
 import './ui-8424715a.js';
-import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './string-a953eafc.js';
 import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
-import './vega-internal-event-id-b7c865de.js';
+import './vega-internal-event-id-5a143cd2.js';
 import './translation-833d9ef4.js';
 import './page-resize-observer-slimmer-0bf7fbf3.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
-import './sub-state-observer-slimmer-c823d69c.js';
+import './sub-state-observer-slimmer-d474634d.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;