@heartlandone/vega-sandbox-pr-1474-a64385b416d2e92ec0fb6cf2ef83219880562cb4 2.26.0

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -0,0 +1,635 @@
+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, Host, h, Element, Prop, Event, 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 { VegaChange, VegaFocus, VegaBlur } 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';
+/**
+ * @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);
+    this.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',
+    };
+    /**
+     * 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: (e) => {
+          this.inputRef = e;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaChange, (input) => {
+            this.handleVegaChange(input);
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaBlur, () => {
+            this.handleVegaBlur();
+          });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, 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() {
+    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);
+    });
+  }
+  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);