@globalpayments/vega 1.0.0 → 2.13.0-backfill-beta.0

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

@@ -0,0 +1,387 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const featureFlagController = require('./featureFlagController-da4c779b.js');
+const regex = require('./regex-c1f70fd4.js');
+const requiredFieldRule = require('./requiredFieldRule-56f10b25.js');
+const validCreditCardNumberRule = require('./validCreditCardNumberRule-8721ca05.js');
+const component = require('./component-c3bbaf20.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
+const formFieldControllerSlimmer = require('./formFieldControllerSlimmer-b451c7a5.js');
+const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.js');
+const changeManager = require('./changeManager-7c13d64f.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
+const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
+const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
+const internalIconManager = require('./internal-icon-manager-b21347bf.js');
+require('./index-55e89877.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./number-459031f7.js');
+require('./string-21427167.js');
+require('./ui-fa68545a.js');
+require('./misc-0197689b.js');
+require('./dynamic-slimmer-d5ea4204.js');
+require('./vegaInternalEventId-b27735af.js');
+require('./pageResizeObserverSlimmer-8d417925.js');
+require('./breakpoints-cb3291ba.js');
+require('./ui-077fc009.js');
+require('./mutationObserverFilters-5beee7b8.js');
+require('./array-6e559cde.js');
+require('./internalVegaEventManager-a3672e0c.js');
+require('./iconManager-a9c2209d.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'),
+      },
+    },
+  },
+];
+
+const Icons = {
+  'visa': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#00579F" rx="2"/><path fill="#fff" d="M15.474 15.792h-1.979l1.238-7.653h1.979l-1.238 7.653ZM22.647 8.326A4.877 4.877 0 0 0 20.872 8c-1.954 0-3.33 1.042-3.339 2.532-.016 1.1.986 1.71 1.735 2.076.765.375 1.026.62 1.026.953-.008.513-.619.75-1.189.75-.79 0-1.213-.123-1.857-.408l-.26-.122-.277 1.718c.464.211 1.32.4 2.207.407 2.076 0 3.428-1.026 3.444-2.613.008-.872-.52-1.54-1.66-2.085-.693-.35-1.117-.586-1.117-.944.008-.326.359-.66 1.14-.66a3.362 3.362 0 0 1 1.474.293l.18.082.268-1.653ZM25.279 13.08l.79-2.14c-.008.016.162-.448.26-.733l.138.66s.375 1.831.457 2.214h-1.645ZM27.72 8.14h-1.53c-.472 0-.831.138-1.035.635l-2.94 7.018h2.077l.416-1.148h2.54c.057.269.237 1.148.237 1.148h1.832L27.72 8.14ZM11.842 8.139l-1.938 5.219-.212-1.059c-.358-1.221-1.482-2.548-2.736-3.208l1.775 6.693h2.093l3.11-7.645h-2.092Z"/><path fill="#FAA61A" d="M8.104 8.139H4.92l-.032.154c2.483.635 4.128 2.166 4.804 4.007L9 8.782c-.114-.489-.464-.627-.896-.643Z"/></svg>`,
+    autoSize: true,
+  },
+  'mastercard': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#000" rx="2"/><path fill="#ED0006" fill-rule="evenodd" d="M18.25 17.157a6.75 6.75 0 0 1-4.426 1.649c-3.769 0-6.824-3.09-6.824-6.903C7 8.091 10.055 5 13.824 5a6.75 6.75 0 0 1 4.426 1.649A6.75 6.75 0 0 1 22.676 5c3.769 0 6.824 3.09 6.824 6.903 0 3.812-3.055 6.903-6.824 6.903a6.75 6.75 0 0 1-4.426-1.65Z" clip-rule="evenodd"/><path fill="#F9A000" fill-rule="evenodd" d="M18.25 17.157a6.92 6.92 0 0 0 2.398-5.254 6.92 6.92 0 0 0-2.398-5.254A6.75 6.75 0 0 1 22.676 5c3.769 0 6.824 3.09 6.824 6.903 0 3.812-3.055 6.903-6.824 6.903a6.75 6.75 0 0 1-4.426-1.65Z" clip-rule="evenodd"/><path fill="#FF5E00" fill-rule="evenodd" d="M18.25 6.65a6.92 6.92 0 0 1 2.398 5.253 6.92 6.92 0 0 1-2.398 5.254 6.92 6.92 0 0 1-2.398-5.254A6.92 6.92 0 0 1 18.25 6.65Z" clip-rule="evenodd"/></svg>`,
+    autoSize: true,
+  },
+  'amex': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><g clip-path="url(#a)"><rect width="36" height="24" fill="#016FD0" rx="2"/><path fill="#fff" d="M6.99 18.549v-5.654h5.986l.643.838.663-.838h21.729v5.264s-.569.384-1.226.39H22.754l-.724-.891v.891h-2.373v-1.521s-.325.212-1.025.212h-.808v1.309h-3.593l-.641-.855-.651.855H6.99ZM0 8.634l1.35-3.147h2.334l.767 1.763V5.487h2.902l.456 1.274.442-1.274h13.027v.64s.685-.64 1.81-.64l4.227.015.753 1.74V5.487h2.428l.669 1v-1h2.45v5.654h-2.45l-.64-1.003v1.003h-3.569l-.359-.892h-.959l-.353.892h-2.42c-.968 0-1.587-.628-1.587-.628v.628H17.63l-.725-.892v.892H3.34l-.359-.892h-.956l-.356.892H0V8.634Z"/><path fill="#016FD0" d="M1.827 6.184.006 10.417h1.185l.336-.847H3.48l.335.847h1.211L3.207 6.184h-1.38Zm.673.985.596 1.482H1.903L2.5 7.169ZM5.151 10.416V6.183l1.685.006.98 2.73.956-2.736h1.671v4.233H9.385v-3.12l-1.122 3.12h-.928L6.21 7.296v3.12H5.15ZM11.168 10.416V6.183h3.454v.947h-2.384v.724h2.328v.891h-2.328v.752h2.384v.92h-3.454ZM15.233 6.184v4.233h1.059V8.913h.445l1.27 1.504H19.3l-1.393-1.56a1.29 1.29 0 0 0 1.161-1.3c0-.89-.7-1.373-1.48-1.373h-2.355Zm1.059.947h1.21c.29 0 .5.227.5.446 0 .28-.273.445-.485.445h-1.225v-.891ZM20.582 10.416h-1.08V6.183h1.08v4.233ZM23.144 10.416h-.233c-1.129 0-1.814-.889-1.814-2.1 0-1.24.678-2.133 2.103-2.133h1.17v1.003h-1.213c-.578 0-.988.451-.988 1.141 0 .82.468 1.165 1.142 1.165h.279l-.446.924ZM25.448 6.184l-1.82 4.233h1.185l.336-.847h1.953l.334.847h1.211l-1.819-4.233h-1.38Zm.674.985.595 1.482h-1.192l.597-1.482ZM28.77 10.416V6.183h1.345l1.718 2.66v-2.66h1.059v4.233H31.59l-1.762-2.73v2.73H28.77ZM7.715 17.825v-4.233h3.453v.947H8.784v.724h2.329v.89H8.784v.753h2.384v.919H7.715ZM24.636 17.825v-4.233h3.454v.947h-2.384v.724h2.317v.89h-2.317v.753h2.384v.919h-3.454ZM11.303 17.825l1.681-2.09-1.721-2.143h1.333l1.025 1.324 1.029-1.324h1.281l-1.699 2.116 1.685 2.117h-1.333l-.996-1.304-.971 1.304h-1.314ZM16.041 13.592v4.233h1.086v-1.337h1.114c.943 0 1.658-.5 1.658-1.472 0-.806-.56-1.424-1.52-1.424H16.04Zm1.086.957h1.174c.304 0 .522.187.522.488 0 .282-.217.487-.526.487h-1.17v-.975ZM20.359 13.592v4.233h1.058V16.32h.446l1.269 1.504h1.293l-1.393-1.56a1.29 1.29 0 0 0 1.162-1.3c0-.89-.7-1.373-1.48-1.373h-2.355Zm1.058.947h1.21c.29 0 .501.226.501.445 0 .281-.273.446-.486.446h-1.225v-.891ZM28.58 17.825v-.92H30.7c.313 0 .449-.169.449-.354 0-.178-.136-.358-.45-.358h-.957c-.831 0-1.295-.507-1.295-1.268 0-.679.424-1.333 1.66-1.333h2.062l-.446.952H29.94c-.341 0-.446.179-.446.35 0 .175.13.369.39.369h1.003c.927 0 1.33.526 1.33 1.215 0 .74-.449 1.347-1.38 1.347H28.58ZM32.464 17.825v-.92h2.118c.313 0 .45-.169.45-.354 0-.178-.136-.358-.45-.358h-.957c-.832 0-1.295-.507-1.295-1.268 0-.679.424-1.333 1.66-1.333h2.02l-.404.952h-1.783c-.34 0-.446.179-.446.35 0 .175.13.369.39.369h1.003c.927 0 1.33.526 1.33 1.215 0 .74-.449 1.347-1.38 1.347h-2.256Z"/></g><defs><clipPath id="a"><rect width="36" height="24" fill="#fff" rx="2"/></clipPath></defs></svg>`,
+    autoSize: true,
+  },
+  'discover': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" fill="#232342" rx="2"/><path fill="#fff" fill-rule="evenodd" d="M30.686 9.61c1.086 0 1.684.484 1.684 1.398a1.307 1.307 0 0 1-1.087 1.397l1.467 1.988h-1.14l-1.25-1.935h-.109v1.935h-.924V9.61h1.359Zm-.435 2.204h.272c.597 0 .869-.269.869-.752 0-.43-.272-.699-.87-.699h-.27v1.45Zm-4.129 2.579h2.608v-.806h-1.684v-1.29h1.63v-.806h-1.63v-1.074h1.684V9.61h-2.608v4.781Zm-2.716-1.559-1.25-3.223h-.978l2.01 4.889h.49l2.01-4.89h-.978l-1.304 3.225Zm-11.029-.805c0 1.343 1.087 2.471 2.445 2.471.435 0 .815-.107 1.195-.269v-1.074c-.271.322-.652.537-1.086.537-.87 0-1.576-.645-1.576-1.504v-.108c-.054-.86.652-1.612 1.521-1.665.435 0 .87.215 1.141.537V9.879c-.326-.214-.76-.268-1.14-.268-1.413-.108-2.5 1.02-2.5 2.418Zm-1.684-.591c-.543-.215-.706-.323-.706-.591.054-.323.326-.591.652-.538.271 0 .543.162.76.376l.49-.644c-.381-.323-.87-.538-1.359-.538-.76-.053-1.412.538-1.467 1.29v.054c0 .644.272 1.02 1.141 1.289.217.054.435.161.652.269a.563.563 0 0 1 .272.483c0 .376-.326.699-.652.699h-.055c-.434 0-.814-.269-.977-.645l-.598.59c.326.592.978.914 1.63.914.869.054 1.575-.59 1.63-1.45v-.162c-.055-.644-.326-.967-1.413-1.396Zm-3.15 2.954h.923V9.611h-.924v4.781ZM3.25 9.611H4.88c1.304.054 2.336 1.128 2.282 2.418 0 .698-.326 1.343-.87 1.826-.488.376-1.086.591-1.684.538H3.25V9.61Zm1.195 3.976c.435.053.924-.108 1.25-.376.326-.323.489-.753.489-1.236 0-.43-.163-.86-.49-1.182-.325-.269-.814-.43-1.249-.376h-.271v3.17h.271Z" clip-rule="evenodd"/><path fill="#FD6020" fill-rule="evenodd" d="M18.788 9.5c-1.358 0-2.499 1.075-2.499 2.471 0 1.344 1.087 2.472 2.5 2.526 1.412.053 2.498-1.075 2.553-2.472C21.287 10.628 20.2 9.5 18.788 9.5Z" clip-rule="evenodd"/></svg>`,
+    autoSize: true,
+  },
+  'regular-credit-card': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" fill="none"><rect width="36" height="24" rx="2" style='fill: rgba(var(--v-regular-credit-card-bg, 205, 209, 211, 1))'/><g clip-path="url(#a)"><path style="fill: rgba(var(--v-regular-credit-card-top, 252, 252, 252, 1))" d="M11 5c-1.103 0-2 .897-2 2v1h18V7c0-1.103-.897-2-2-2H11Zm16 6H9v6c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-6Zm-14.5 4h2c.275 0 .5.225.5.5s-.225.5-.5.5h-2a.501.501 0 0 1-.5-.5c0-.275.225-.5.5-.5Zm3.5.5c0-.275.225-.5.5-.5h4c.275 0 .5.225.5.5s-.225.5-.5.5h-4a.501.501 0 0 1-.5-.5Z"/></g><defs><clipPath id="a"><path d="M9 4h18v16H9z" style='fill: rgba(var(--v-regular-credit-card-bottom, 255, 255, 255, 1))'/></clipPath></defs></svg>`,
+    autoSize: true,
+  },
+};
+
+const VegaInputCreditCardRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_TRUE',
+    payloadDescription: "Determines whether the user's input in the credit card field should be automatically validated",
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'true'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === true,
+  },
+  {
+    payloadKey: 'AUTO_VALIDATION_IS_FALSE',
+    payloadDescription: "Determines whether the user's input in the credit card field should be automatically validated",
+    /**
+     * The function checks if the `autoValidation` property of the `host` element is equal to 'false'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.autoValidation === false,
+  },
+];
+
+const vegaInputCreditCardCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}";
+
+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;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaInputCreditCard = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaBlur = index.createEvent(this, "vegaBlur", 7);
+    this.blur = index.createEvent(this, "blur", 7);
+    this.vegaFocus = index.createEvent(this, "vegaFocus", 7);
+    this.focus = index.createEvent(this, "focus", 7);
+    this.globalSlimmers = {};
+    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new requiredFieldRule.RequiredFieldRule() : null),
+        },
+        {
+          propertyName: '',
+          ruleFactory: () => new validCreditCardNumberRule.ValidCreditCardNumberRule(),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerGetter(),
+      touchableAreaGetter: () => this.touchableAreaGetter(),
+    });
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputCreditCard, vegaEventId.VegaChange);
+    this.blurEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputCreditCard, vegaEventId.VegaBlur);
+    this.focusEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaInputCreditCard, vegaEventId.VegaFocus);
+    this.inputCreditCardEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaFocus, vegaEventId.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.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Determines whether the credit card input field is disabled.
+     */
+    this.disabled = false;
+    /**
+     * Defines the label or title for the credit card input field.
+     */
+    this.label = '';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     */
+    this.hint = '';
+    /**
+     * Specifies the size of the credit card input field.
+     */
+    this.size = 'default';
+    /**
+     * Specifies a placeholder string that displays as a temporary hint or
+     *    example inside the credit card input field.
+     *
+     * It indicates the expected format or pattern of the credit card input.
+     */
+    this.placeholder = '';
+    /**
+     * Specifies whether to hide the credit card number when
+     *    users focus out of the input field.
+     *
+     * When set to `true`, the credit card number is partially masked,
+     *    with the first three fields displayed as "x" and
+     *    the last field remaining visible during blur and upon initial loading.
+     */
+    this.hideCardNumberOnBlur = true;
+    /**
+     * Determines whether the user's input in the credit card field should
+     *    be automatically validated.
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies custom validation rules for the credit card input field.
+     */
+    this.validationRules = [];
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Represents a pre-set value for the credit card input field.
+     *
+     * It allows you to initialize the field with a specific value,
+     *    which is displayed to the user when the
+     *    input is initially rendered.
+     */
+    this.value = '';
+    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(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (e) => {
+          this.inputRef = e;
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, vegaEventId.VegaChange, (input) => {
+            this.handleVegaChange(input);
+          });
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, vegaEventId.VegaBlur, () => {
+            this.handleVegaBlur();
+          });
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, vegaEventId.VegaFocus, () => {
+            this.handleVegaFocus();
+          });
+        } }));
+    };
+    this.handleVegaChange = (e) => {
+      this.value = e.detail;
+    };
+    this.handleVegaBlur = () => {
+      this.blurEventEmitter.emit();
+    };
+    this.handleVegaFocus = () => {
+      this.focusEventEmitter.emit();
+    };
+    this.inputContainerGetter = () => this.inputRef.shadowRoot.querySelector('.vega-input-container');
+    this.touchableAreaGetter = () => Array.from(this.inputRef.shadowRoot.querySelectorAll('input'));
+  }
+  watchValidationRules() {
+  }
+  watchValue(value) {
+    this.changeEventEmitter.emit(value);
+    changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: value,
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    if (featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD') &&
+      this.hideCardNumberOnBlur &&
+      this.inputRef.value &&
+      this.value !== this.inputRef.value) {
+      this.value = this.inputRef.value;
+    }
+  }
+  render() {
+    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() {
+    const maskConfig = [];
+    const creditCardType = this.getCreditCardType(this.value);
+    if (creditCardType) {
+      maskConfig.push(creditCardType.maskConfig);
+      if (this.hideCardNumberOnBlur && this.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;
+  }
+  /**
+   * 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);
+    });
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "validationRules": ["watchValidationRules"],
+    "value": ["watchValue"]
+  }; }
+};
+(() => {
+  internalIconManager.VegaInternalIconManager.register(Icons);
+})();
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaInputCreditCard.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "formFieldController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "changeEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "blurEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "focusEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "inputCreditCardEventPrevent", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaInputCreditCard.style = vegaInputCreditCardCss;
+
+exports.vega_input_credit_card = VegaInputCreditCard;