@globalpayments/vega 2.59.0 → 2.60.0

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

@@ -1,7 +1,8 @@
 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';
@@ -13,8 +14,12 @@ import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-
 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 { 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';
@@ -25,8 +30,6 @@ import './dynamic-slimmer-90b8af32.js';
 import './vega-internal-event-id-b7c865de.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';
@@ -35,8 +38,66 @@ import './sub-state-observer-slimmer-c823d69c.js';
 import './internal-vega-event-manager-526f8ed1.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

@@ -8,7 +8,7 @@ import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.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 { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
@@ -22,11 +22,10 @@ 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';

package/dist/esm/vega-input-phone-number.entry.js

@@ -13,7 +13,9 @@ import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
 import './icon-manager-2ee1c619.js';
 import './wait-for-vega-handler-c2c07ac3.js';
 import './translation-833d9ef4.js';
-import './content-state-100d1efd.js';
+import './content-state-460f6254.js';
+import { S as StringFormatStrategy } from './string-format-strategy.abstract-452f4398.js';
+import { i as isNonNullable } from './type-guard-12f7654b.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-633b3474.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
@@ -34,12 +36,10 @@ import './_commonjsHelpers-9943807e.js';
 import './internal-vega-event-manager-526f8ed1.js';
 import './number-4398f2e1.js';
 import './index-e9da316f.js';
-import './code-block-3d519665.js';
+import './code-block-055cae13.js';
 import './string-a953eafc.js';
-import './type-guard-84b1f192.js';
-import './regex-dfe11abf.js';
-import './typography-396de03f.js';
 import './object-66c37948.js';
+import './typography-396de03f.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
@@ -6201,6 +6201,109 @@ __decorate$4([
   MapToComponentMethod('watchCountryCode')
 ], CountrySelectRenderer.prototype, "watchCountryCode", null);
 
+/**
+ * A class for formatting phone number with the given mask format
+ *
+ * @augments StringFormatStrategy
+ */
+class VegaPhoneNumberInputStrategy extends StringFormatStrategy {
+  constructor(formatter) {
+    super();
+    this.formatter = formatter;
+  }
+  /**
+   * @inheritDoc
+   */
+  format(input) {
+    return this.formatter(input);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * module: Should show normal when phone number with same country code
+   */
+  /* istanbul ignore next */
+  /**
+   * Get the position of
+   *
+   * @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)) {
+      const startValue = input.substring(0, caretPosition);
+      const numberCount = this.countNumbers(startValue);
+      const maskedInputValue = this.format(input);
+      const maskedStartValue = this.truncateToNumberCount(maskedInputValue, numberCount);
+      if (maskedStartValue.length !== startValue.length &&
+        !(maskedStartValue.endsWith(')') && maskedStartValue.slice(0, -1) === startValue)) {
+        return caretPosition + (maskedStartValue.length - startValue.length);
+      }
+      else {
+        return caretPosition;
+      }
+    }
+  }
+  /**
+   * Trigger the formatter at init
+   *
+   * @returns {boolean} true or false
+   */
+  shouldTriggerAtInit() {
+    return true;
+  }
+  /**
+   * Count the numbers in a given string
+   *
+   * @param {string} value - given string
+   * @returns {number} count
+   */
+  countNumbers(value) {
+    let count = 0;
+    for (let i = 0; i < value.length; i++) {
+      const char = value[i];
+      if (!isNaN(parseInt(char, 10)) && char !== ' ') {
+        count++;
+      }
+    }
+    return count;
+  }
+  /**
+   * The below method is e2e-test covered in
+   *
+   * module:vega-input-phone-number-input-delete
+   */
+  /* istanbul ignore next */
+  /**
+   *
+   * @param {string} value - a given string
+   * @param {number} count - count of numbers
+   * @returns {string} the return string
+   */
+  truncateToNumberCount(value, count) {
+    let numberCount = 0;
+    let result = '';
+    if (count <= 0)
+      return '';
+    for (let i = 0; i < value.length; i++) {
+      const char = value[i];
+      if (/^\d$/.test(char)) {
+        if (numberCount >= count) {
+          break;
+        }
+        numberCount++;
+        result += char;
+      }
+      else {
+        if (numberCount < count || char === ')') {
+          result += char;
+        }
+      }
+    }
+    return result;
+  }
+}
+
 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);
@@ -6212,19 +6315,6 @@ class PhoneNumberInputRenderer extends VegaSlimmer {
     super(...arguments);
     this.phoneNumberMaskFormatter = (rawValue) => {
       const newValue = parseIncompletePhoneNumber(rawValue);
-      /*
-       * The below method is e2e-test covered in
-       * @see{module:vega-input-phone-number-input-delete}
-       */
-      /* istanbul ignore next */
-      /**
-       * work around for keyboard press Backspace
-       * (123) -> (123
-       */
-      if (newValue === parseIncompletePhoneNumber(this.phoneNumberInputValue) &&
-        this.phoneNumberInputValue.length > rawValue.length) {
-        return this.phoneNumberInputValue.slice(0, -1);
-      }
       return this.valueController.formatNationalNumber(newValue);
     };
   }
@@ -6250,9 +6340,8 @@ class PhoneNumberInputRenderer extends VegaSlimmer {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleInputChange.bind(this));
         }, value: this.phoneNumberInputValue, maskConfig: {
-          type: 'custom-formatter',
-          formatter: this.phoneNumberMaskFormatter,
-          resetCaretPosition: true,
+          type: 'custom',
+          strategy: () => new VegaPhoneNumberInputStrategy(this.phoneNumberMaskFormatter),
         } })));
   }
   /**

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

@@ -4,7 +4,7 @@ import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { P as PageResizeObserverSlimmer, g as getCurrentBreakpoint } from './page-resize-observer-slimmer-0bf7fbf3.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { a as arrayToClassString } from './ui-c20be16d.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-4bf60125.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-dbeffcd6.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 { n as VegaDropdownShow, o as VegaDropdownHide, b as VegaDropdownClick, q as VegaDropdownSearch, r as VegaSearchTrigger, p as VegaReset, d as domNodeSubjectFactory, f as VegaChange, m as VegaSearch, D as VegaShow, E as VegaHide } from './dom-node-subject-factory-202655e7.js';
@@ -19,7 +19,7 @@ import { V as VegaInternalIconManager } from './internal-icon-manager-7eac52c8.j
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
 import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
-import { N as isArrayOfType, P as isSelectSourceItemType } from './type-guard-84b1f192.js';
+import { Q as isArrayOfType, U as isSelectSourceItemType } from './type-guard-12f7654b.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { T as TagNameMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import { T as TranslationSlimmer } from './translation-slimmer-c83b52c1.js';
@@ -43,12 +43,11 @@ import './index-e9da316f.js';
 import './icon-manager-2ee1c619.js';
 import './wait-for-vega-handler-c2c07ac3.js';
 import './translation-833d9ef4.js';
-import './content-state-100d1efd.js';
-import './code-block-3d519665.js';
+import './content-state-460f6254.js';
+import './code-block-055cae13.js';
 import './string-a953eafc.js';
 import './object-66c37948.js';
 import './sub-state-observer-slimmer-c823d69c.js';
-import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 
 var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {