'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-58ea899e.js');
const featureFlagController = require('./feature-flag-controller-9129ef52.js');
const typeGuard = require('./type-guard-2e97fc56.js');
const requiredFieldRule = require('./required-field-rule-d73c1d8c.js');
const validCreditCardNumberRule = require('./valid-credit-card-number-rule-2d7d20ce.js');
const component = require('./component-1e352960.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-4572c5b7.js');
const formFieldControllerSlimmer = require('./form-field-controller-slimmer-595f4138.js');
const staticSubjectTitle = require('./static-subject-title-5829a298.js');
const changeManager = require('./change-manager-a297e4d2.js');
const eventEmitSlimmer = require('./event-emit-slimmer-8ba00d00.js');
const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-f3979a03.js');
const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-ba6a95f3.js');
const vegaEventId = require('./vega-event-id-d9994eb3.js');
const internalIconManager = require('./internal-icon-manager-c989189a.js');
const stringMaskStrategy = require('./string-mask-strategy-524d0f69.js');
require('./index-f054eb5d.js');
require('./breakpoints-ebde4837.js');
require('./ui-32120990.js');
require('./typography-4560e7f1.js');
require('./internal-translation-controller-8360a89c.js');
require('./internal-form-field-validation-rule.abstract-07cdff46.js');
require('./number-4816603d.js');
require('./string-39438062.js');
require('./observer-f49483e8.js');
require('./ui-3727d685.js');
require('./misc-3d30df91.js');
require('./dynamic-slimmer-f31fdfd7.js');
require('./vega-internal-event-id-87014e4f.js');
require('./index-592b4052.js');
require('./try-get-document-c0ebd39a.js');
require('./page-resize-observer-slimmer-273d62ef.js');
require('./breakpoints-1cc2c4c6.js');
require('./mutation-observer-slimmer-749d5020.js');
require('./mutation-observer-filters-38cebc6d.js');
require('./array-249289f2.js');
require('./sub-state-observer-slimmer-ec5ac913.js');
require('./internal-vega-event-manager-7e0d966d.js');
require('./vega-env-manager-23b8b23c.js');
require('./icon-manager-c12c6ea9.js');
require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
require('./string-format-strategy.abstract-b39da0dd.js');

const CARDS_INFO = [
  {
    type: 'visa',
    iconName: 'visa',
    pattern: typeGuard.VisaRegex,
    maskConfig: {
      type: 'custom',
      options: {
        mask: '9999 9999 9999 9999 999',
        slot: '9',
        accept: /\d/,
        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
      },
    },
  },
  {
    type: 'mastercard',
    iconName: 'mastercard',
    pattern: typeGuard.MasterCardRegex,
    maskConfig: {
      type: 'custom',
      options: {
        mask: '9999 9999 9999 9999',
        slot: '9',
        accept: /\d/,
        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
      },
    },
  },
  {
    type: 'amex',
    iconName: 'amex',
    pattern: typeGuard.AmexRegex,
    maskConfig: {
      type: 'custom',
      options: {
        mask: '9999 999999 99999',
        slot: '9',
        accept: /\d/,
        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
      },
    },
  },
  {
    type: 'discover',
    iconName: 'discover',
    pattern: typeGuard.DiscoverRegex,
    maskConfig: {
      type: 'custom',
      options: {
        mask: '9999 9999 9999 9999',
        slot: '9',
        accept: /\d/,
        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
      },
    },
  },
];

const Icons = {
  'visa': {
    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.StringMaskStrategy {
  /* istanbul ignore next */
  /**
   * Get the position of caret
   *
   * @param {string} input - The input string
   * @param {number} caretPosition - The current position of caret
   * @returns {Nullable<number>} The new position of caret
   */
  calculateCaretPosition(input, caretPosition) {
    if (!typeGuard.isNonNullable(caretPosition))
      return null;
    const maskConfigType = this.getCreditCardMaskConfig(input);
    if (maskConfigType) {
      if (input.length > this.getLengthLimit()) {
        const exceededLength = input.length - this.getLengthLimit();
        return caretPosition - exceededLength;
      }
      const startValue = input.substring(0, caretPosition);
      const maskedStartValue = this.format(startValue);
      return caretPosition + (maskedStartValue.length - startValue.length);
    }
    else {
      return caretPosition;
    }
  }
  /* istanbul ignore next */
  /**
   * @inheritDoc
   */
  format(input, inputStatus) {
    const maskConfigType = this.getCreditCardMaskConfig(input);
    if (maskConfigType) {
      this.setMaskConfig(maskConfigType.options);
      const caretPosition = inputStatus === null || inputStatus === void 0 ? void 0 : inputStatus.caretPosition;
      if (input.length > this.getLengthLimit() && typeGuard.isNonNullable(caretPosition)) {
        const rawValueArr = [...input];
        const exceededLength = input.length - this.getLengthLimit();
        rawValueArr.splice(caretPosition - exceededLength, exceededLength);
        return rawValueArr.join('');
      }
      return this.replaceMaskWithMatchedInputSlots(input, this.getMatchedInputSlotValue(input));
    }
    else {
      return input;
    }
  }
  /**
   * get credit card type
   *
   * @param {string} value - card number string
   * @returns {CardConfigType} - card type config
   */
  getCreditCardType(value) {
    return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
  }
}

/**
 * A class for formatting string with the given mask format
 *
 * @augments StringFormatStrategy
 */
class CreditCardInputMaskStrategy extends CreditCardMaskStrategy {
  /**
   * It creates a new instance of the Mask class.
   */
  constructor() {
    super({
      mask: '',
      slot: '9',
      accept: /\d/,
      triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
    });
  }
  /**
   * get credit card mask config
   *
   * @param {string} value - card number string
   * @returns {Nullable<MaskConfigType>} - mask config type
   */
  getCreditCardMaskConfig(value) {
    let maskConfig;
    const creditCardType = this.getCreditCardType(value);
    if (creditCardType) {
      maskConfig = creditCardType.maskConfig;
    }
    return maskConfig;
  }
}

/**
 * A class for formatting string with the given mask format
 *
 * @augments StringFormatStrategy
 */
class CreditCardBlurMaskStrategy extends CreditCardMaskStrategy {
  /**
   * It creates a new instance of the Mask class.
   *
   * @param {boolean} hideCardNumberOnBlur - boolean
   */
  constructor(hideCardNumberOnBlur) {
    super({
      mask: '',
      slot: '9',
      accept: /[\d\s]/,
      insertMode: false,
      triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
    });
    this.hideCardNumberOnBlur = hideCardNumberOnBlur;
  }
  /**
   * @inheritDoc
   */
  getCreditCardMaskConfig(value) {
    let maskConfig;
    const creditCardType = this.getCreditCardType(value);
    if (creditCardType) {
      if (this.hideCardNumberOnBlur && value.trim().includes(' ')) {
        maskConfig = this.generateDynamicMask(value);
      }
    }
    return maskConfig;
  }
  /*
   * The below method is e2e-test covered in
   *
   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
   */
  /* istanbul ignore next */
  /**
   * Transform the input card number with dynamic card number mask, for example: '4111 2222 3333 44' will be transformed to 'XXXX XXXX XXXX 99'
   *
   * @param {string} value - card number string
   * @returns {MaskConfigType} - mask config type
   */
  generateDynamicMask(value) {
    const maskConfig = {
      type: 'custom',
      options: {
        mask: '',
        slot: '9',
        accept: /[\d\s]/,
        insertMode: false,
        triggerAtInit: featureFlagController.FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
      },
      trigger: 'blur',
    };
    const cardNumberSplit = value.trim().split(' ');
    const cardNumberMask = 
    // Map through the array and replace each character with 'X' or '9' depending on the index
    cardNumberSplit
      .map((element, index) => {
      // Replace each character in the string with 'X' except the last element, which uses '9'
      const replacementChar = index === cardNumberSplit.length - 1 ? '9' : 'X';
      return replacementChar.repeat(element.length);
    })
      .join(' ');
    maskConfig.options.mask = cardNumberMask;
    return maskConfig;
  }
}

const vegaInputCreditCardCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}";

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
  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);
    /**
     * 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 (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: (ref) => {
          this.inputRef = ref;
          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaChange, (input) => {
            this.handleVegaChange(input);
          });
          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaBlur, () => {
            this.handleVegaBlur();
          });
          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaFocus, () => {
            this.handleVegaFocus();
          });
        }, "data-aria-label": this.label || 'Input credit card' }));
    };
    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() {
    return [
      {
        type: 'custom',
        trigger: 'input',
        strategy: () => new CreditCardInputMaskStrategy(),
      },
      {
        type: 'custom',
        trigger: 'blur',
        strategy: () => new CreditCardBlurMaskStrategy(this.hideCardNumberOnBlur),
      },
    ];
  }
  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;
