var __decorate = (this && this.__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;
};
import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
import { CARDS_INFO } from '../../constants/card-config';
import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/valid-credit-card-number-rule';
import { sanitizeVegaComponent } from '../../utils/component';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
import ChangeManager from '../../helpers/change-manager/change-manager';
import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/event-id/vega-event-id';
import { Icons } from './assets/icons';
import { VegaInternalIconManager } from '../../helpers/icon/internal-icon-manager';
import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
import { VegaInputCreditCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-credit-card/runtime-metrics-payload-definition';
import { CreditCardInputMaskStrategy } from '../../helpers/formatter/string-formatter/credit-card-input-mask-strategy';
import { CreditCardBlurMaskStrategy } from '../../helpers/formatter/string-formatter/credit-card-blur-mask-strategy';
/**
 * @vegaVersion 1.26.0
 */
export class VegaInputCreditCard {
  constructor() {
    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();
          });
        }, "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() {
    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),
      },
    ];
  }
  static get is() { return "vega-input-credit-card"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-input-credit-card.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-input-credit-card.css"]
  }; }
  static get properties() { return {
    "required": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Specifies whether a card number must be entered for\n   this component to pass form validation."
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Determines whether the credit card input field is disabled."
      },
      "attribute": "disabled",
      "reflect": true,
      "defaultValue": "false"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Defines the label or title for the credit card input field."
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "''"
    },
    "hint": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
      },
      "attribute": "hint",
      "reflect": false,
      "defaultValue": "''"
    },
    "size": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'small'",
        "resolved": "\"default\" | \"small\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Specifies the size of the credit card input field."
      },
      "attribute": "size",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Specifies a placeholder string that displays as a temporary hint or\n   example inside the credit card input field.\n\nIt indicates the expected format or pattern of the credit card input."
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "''"
    },
    "hideCardNumberOnBlur": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Specifies whether to hide the credit card number when\n   users focus out of the input field.\n\nWhen set to `true`, the credit card number is partially masked,\n   with the first three fields displayed as \"x\" and\n   the last field remaining visible during blur and upon initial loading."
      },
      "attribute": "hide-card-number-on-blur",
      "reflect": false,
      "defaultValue": "true"
    },
    "autoValidation": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Determines whether the user's input in the credit card field should\n   be automatically validated."
      },
      "attribute": "auto-validation",
      "reflect": true,
      "defaultValue": "true"
    },
    "validationRules": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "FormFieldValidationRule<unknown>[]",
        "resolved": "FormFieldValidationRule<unknown>[]",
        "references": {
          "FormFieldValidationRule": {
            "location": "import",
            "path": "../../helpers/validator/rules/form-field-validation-rule"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Specifies custom validation rules for the credit card input field."
      },
      "defaultValue": "[]"
    },
    "isValid": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Indicates whether the current value in the field is considered valid\n   based on the defined validation rules."
      },
      "attribute": "is-valid",
      "reflect": true,
      "defaultValue": "null"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "Represents a pre-set value for the credit card input field.\n\nIt allows you to initialize the field with a specific value,\n   which is displayed to the user when the\n   input is initially rendered."
      },
      "attribute": "value",
      "reflect": true,
      "defaultValue": "''"
    }
  }; }
  static get events() { return [{
      "method": "vegaChange",
      "name": "vegaChange",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "An event emitter notifying a value change."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "change",
      "name": "change",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "A native change event emitter notifying a value change."
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "vegaBlur",
      "name": "vegaBlur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "An event emitter notifying the blur event of the credit card element."
      },
      "complexType": {
        "original": "undefined",
        "resolved": "undefined",
        "references": {}
      }
    }, {
      "method": "blur",
      "name": "blur",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "An event emitter notifying the blur event of the credit card element."
      },
      "complexType": {
        "original": "undefined",
        "resolved": "undefined",
        "references": {}
      }
    }, {
      "method": "vegaFocus",
      "name": "vegaFocus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.26.0"
          }],
        "text": "An event emitter notifying the focus of the credit card element."
      },
      "complexType": {
        "original": "undefined",
        "resolved": "undefined",
        "references": {}
      }
    }, {
      "method": "focus",
      "name": "focus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [{
            "name": "eventSemantics",
            "text": "namespace:native"
          }, {
            "name": "vegaVersion",
            "text": "2.0.0"
          }],
        "text": "An event emitter notifying the focus of the credit card element."
      },
      "complexType": {
        "original": "undefined",
        "resolved": "undefined",
        "references": {}
      }
    }]; }
  static get elementRef() { return "host"; }
  static get watchers() { return [{
      "propName": "validationRules",
      "methodName": "watchValidationRules"
    }, {
      "propName": "value",
      "methodName": "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);
