@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

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

@@ -0,0 +1,549 @@
+import { r as registerInstance, e as createEvent, h, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { F as FeatureFlag } from './feature-flag-controller-24b9f956.js';
+import { V as VisaRegex, M as MasterCardRegex, A as AmexRegex, D as DiscoverRegex, i as isNonNullable } from './type-guard-09acedc9.js';
+import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-04b032a6.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-316ebdb1.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-6fdf8c8b.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { h as VegaChange, G as VegaBlur, F as VegaFocus } from './vega-event-id-61c8bd9f.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { S as StringMaskStrategy } from './string-mask-strategy-9cd2a273.js';
+import './index-1f9eab8f.js';
+import './_commonjsHelpers-2088bffa.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
+import './number-4398f2e1.js';
+import './string-a953eafc.js';
+import './observer-3959f9dd.js';
+import './ui-5f775fd9.js';
+import './dom-node-subject-factory-5798693b.js';
+import './vega-internal-event-id-b65a01a3.js';
+import './page-resize-observer-slimmer-ee8774a6.js';
+import './try-get-document-bef0f526.js';
+import './mutation-observer-slimmer-7065c745.js';
+import './mutation-observer-filters-6c515793.js';
+import './array-a1d98264.js';
+import './sub-state-observer-slimmer-4fc8b3da.js';
+import './internal-vega-event-manager-826279b7.js';
+import './vega-env-manager-8f8dc473.js';
+import './string-format-strategy.abstract-2d2ce51e.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': {
+    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" fill='rgba(var(--v-regular-credit-card-bg, 205, 209, 211, 1))'/><g clip-path="url(#a)"><path 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" 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,
+  },
+];
+
+/**
+ * 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) {
+  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) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaBlur = createEvent(this, "vegaBlur", 7);
+    this.blur = createEvent(this, "blur", 7);
+    this.vegaFocus = createEvent(this, "vegaFocus", 7);
+    this.focus = createEvent(this, "focus", 7);
+    this.globalSlimmers = {};
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => (isRequired ? new RequiredFieldRule() : null),
+        },
+        {
+          propertyName: '',
+          ruleFactory: () => new ValidCreditCardNumberRule(),
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: '',
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.inputContainerGetter(),
+      touchableAreaGetter: () => this.touchableAreaGetter(),
+    });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaChange);
+    this.blurEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaBlur);
+    this.focusEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaFocus);
+    this.inputCreditCardEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaFocus, VegaBlur], () => this.host, true);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputCreditCardRuntimeMetricsPayloadDefinition);
+    /**
+     * Specifies whether a card number must be entered for
+     *    this component to pass form validation.
+     *
+     * @vegaVersion 1.26.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.required = false;
+    /**
+     * Determines whether the credit card input field is disabled.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.disabled = false;
+    /**
+     * Defines the label or title for the credit card input field.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.label = '';
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value for the input field.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.hint = '';
+    /**
+     * Specifies the size of the credit card input field.
+     *
+     * @vegaVersion 1.26.0
+     */
+    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.
+     *
+     * @vegaVersion 1.26.0
+     */
+    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.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.hideCardNumberOnBlur = true;
+    /**
+     * Determines whether the user's input in the credit card field should
+     *    be automatically validated.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies custom validation rules for the credit card input field.
+     *
+     * @vegaVersion 1.26.0
+     */
+    this.validationRules = [];
+    /**
+     * Indicates whether the current value in the field is considered valid
+     *    based on the defined validation rules.
+     *
+     * @vegaVersion 1.26.0
+     */
+    /* 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.
+     *
+     * @vegaVersion 1.26.0
+     */
+    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 (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
+          this.inputRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
+            this.handleVegaChange(input);
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, () => {
+            this.handleVegaBlur();
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, 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() {
+    methodPlaceholder();
+  }
+  watchValue(value) {
+    this.changeEventEmitter.emit(value);
+    ChangeManager.notify(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 (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 sanitizeVegaComponent(h(Host, null, this.renderInputContainer()), this.host);
+  }
+  getCreditCardType(value) {
+    return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
+  }
+  getMaskConfig() {
+    return [
+      {
+        type: 'custom',
+        trigger: 'input',
+        strategy: () => new CreditCardInputMaskStrategy(),
+      },
+      {
+        type: 'custom',
+        trigger: 'blur',
+        strategy: () => new CreditCardBlurMaskStrategy(this.hideCardNumberOnBlur),
+      },
+    ];
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "validationRules": ["watchValidationRules"],
+    "value": ["watchValue"]
+  }; }
+};
+(() => {
+  VegaInternalIconManager.register(Icons);
+})();
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaInputCreditCard.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "changeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "focusEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "inputCreditCardEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputCreditCard.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaInputCreditCard.style = vegaInputCreditCardCss;
+
+export { VegaInputCreditCard as vega_input_credit_card };