@globalpayments/vega 2.64.0 → 2.66.0

package/dist/collection/components/vega-input-passcode/slimmers/controllers/vega-input-passcode-keyboard-controller.js

@@ -0,0 +1,101 @@
+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 { MapToComponentField } from 'vega-slimmer/core';
+import { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboard-manager-slimmer';
+/**
+ * Input passcode keyboard controller
+ */
+export class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer {
+  constructor() {
+    super((target) => [
+      {
+        keyCode: 'Backspace',
+        activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        eventName: 'keydown',
+        callback: 
+        /* istanbul ignore next */
+        /* eslint-disable jsdoc/require-jsdoc */
+        (event) => {
+          target.deletePasscode(event);
+        },
+      },
+      {
+        keyCode: ['ArrowLeft', 'ArrowRight'],
+        activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        callback: 
+        /* istanbul ignore next */
+        /* eslint-disable jsdoc/require-jsdoc */
+        (event) => {
+          target.controlDirectionByKeyboard(event);
+        },
+      },
+    ]);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-input-value-delete}
+     */
+    /* istanbul ignore next */
+    /**
+     * handle logic of delete input passcode values
+     *
+     * @param {KeyboardEvent} event - the keyboard event of delete
+     */
+    this.deletePasscode = (event) => {
+      event.preventDefault();
+      const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
+      if (this.vegaInputValues.get(currentIndex)) {
+        this.vegaInputValues.withMutation((arr) => {
+          for (let index = currentIndex; index < this.length - 1; index++) {
+            arr[index] = arr[index + 1];
+          }
+          arr[this.length - 1] = '';
+        });
+      }
+      else if (!this.vegaInputValues.get(currentIndex) && currentIndex > 0) {
+        this.vegaInputValues.set(currentIndex - 1, '');
+        void this.inputPasscodeRenderer.getVegaInputRefs()[currentIndex - 1].doFocus();
+      }
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-passcode-on-arrow-keyboard-press}
+   */
+  /* istanbul ignore next */
+  /**
+   * handle logic of directions of ArrowLeft and ArrowRight
+   *
+   * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
+   */
+  controlDirectionByKeyboard(event) {
+    const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
+    const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
+    if (event.key === 'ArrowLeft' && currentIndex > 0) {
+      void vegaInputRefs[currentIndex - 1].doFocus();
+    }
+    if (event.key === 'ArrowRight' &&
+      this.vegaInputValues.get(currentIndex) &&
+      currentIndex < this.length - 1) {
+      void vegaInputRefs[currentIndex + 1].doFocus();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeKeyboardController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeKeyboardController.prototype, "length", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeKeyboardController.prototype, "vegaInputValues", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeKeyboardController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeKeyboardController.prototype, "inputPasscodeRenderer", void 0);

package/dist/collection/components/vega-input-passcode/slimmers/controllers/vega-input-passcode-value-controller.js

@@ -0,0 +1,115 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+/**
+ * Input passcode value controller
+ */
+export class VegaInputPasscodeValueController extends VegaSlimmer {
+  /** initialize input values on load */
+  componentWillLoad() {
+    this.setValuesArray(this.value);
+    this.value = this.vegaInputValues.join('');
+  }
+  /**
+   * The `watchValue` function emits a change event with the current value and notifies the
+   * `ChangeManager` about a form element value change.
+   */
+  watchValue() {
+    this.setValuesArray(this.value);
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+    if (this.value.length === this.length) {
+      this.completeEventEmitter.emit(this.value);
+    }
+  }
+  /**
+   * Synchronizes the rendered input elements with the controller's internal passcode values.
+   */
+  watchVegaInputValues() {
+    for (let index = 0; index < this.length; index++) {
+      if (this.inputPasscodeRenderer.getVegaInputRefs()[index]) {
+        this.inputPasscodeRenderer.getVegaInputRefs()[index].value =
+          this.vegaInputValues.get(index) || '';
+      }
+    }
+    this.value = this.vegaInputValues.join('');
+  }
+  /**
+   * initialize input values
+   *
+   * @param {string} value - the value to be initialized
+   */
+  setValuesArray(value) {
+    const newValueArray = this.valueValidationFilter(value).slice(0, this.length).split('');
+    this.vegaInputValues.setAll(newValueArray);
+  }
+  /**
+   * Filters an input value according to the controller's input type.
+   *
+   * @param {string} value - The raw input string to validate and filter.
+   * @returns {string} - The filtered string: white space free in text type, or digits-only otherwise.
+   */
+  valueValidationFilter(value) {
+    return this.inputType === 'text' ? value.replace(/\s/g, '') : value.replace(/\D/g, '');
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-passcode-on-click-empty-input-field}
+   */
+  /* istanbul ignore next */
+  /**
+   * Searches through the input values and returns the index
+   * of the first empty input.
+   * Returns -1 if all inputs are filled.
+   *
+   * @returns {number} - the index of the first empty input field
+   */
+  getFirstEmptyIndex() {
+    var _a;
+    const { length } = this;
+    const values = Array.from({ length }, (_, i) => this.vegaInputValues.get(i) || '');
+    return (_a = values.findIndex((value) => !value || value === '')) !== null && _a !== void 0 ? _a : -1;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputPasscodeValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputPasscodeValueController.prototype, "vegaInputValues", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "length", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "inputType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "inputPasscodeRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeValueController.prototype, "completeEventEmitter", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaInputPasscodeValueController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValue')
+], VegaInputPasscodeValueController.prototype, "watchValue", null);
+__decorate([
+  MapToComponentMethod('watchVegaInputValues')
+], VegaInputPasscodeValueController.prototype, "watchVegaInputValues", null);

package/dist/collection/components/vega-input-passcode/slimmers/renderers/vega-input-passcode-renderer.js

@@ -0,0 +1,166 @@
+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 { h, Host } from '@stencil/core';
+import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { VegaBlur, VegaChange, VegaFocus, VegaPaste, } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+export class VegaInputPasscodeRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.vegaInputRefs = [];
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-label-click}
+     */
+    /* istanbul ignore next */
+    this.focusInputPasscode = () => {
+      this.vegaInputRefs[0] && void this.vegaInputRefs[0].doFocus();
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-input-value-input}
+     */
+    /* istanbul ignore next */
+    this.handleVegaFocus = (index) => () => {
+      if (index !== 0) {
+        this.vegaInputRefs[index].tabIndex = null;
+      }
+      // If the clicked box has a value, focus it. Otherwise focus the first empty box
+      const targetIndex = this.vegaInputValues.get(index)
+        ? index
+        : this.valueController.getFirstEmptyIndex();
+      const finalIndex = targetIndex === -1 ? this.length - 1 : targetIndex;
+      // Focus the target box
+      this.currentIndex = finalIndex;
+      void this.vegaInputRefs[finalIndex].doFocus();
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-input-value-input}
+     */
+    /* istanbul ignore next */
+    this.handleVegaBlur = (index) => () => {
+      if (index !== 0) {
+        this.vegaInputRefs[index].tabIndex = -1;
+      }
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-input-value-input}
+     */
+    /* istanbul ignore next */
+    this.handleVegaChange = (index) => (e) => {
+      var _a;
+      const inputValue = e.detail || '';
+      if (inputValue.length === 2 || (inputValue.length === 1 && !this.vegaInputValues.get(index))) {
+        const newValue = this.generateNewInputValue(index, inputValue);
+        this.vegaInputValues.set(index, newValue);
+        void ((_a = this.vegaInputRefs[index + 1]) === null || _a === void 0 ? void 0 : _a.doFocus());
+      }
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-passcode-on-input-value-input}
+     */
+    /* istanbul ignore next */
+    this.handleVegaPaste = () => (e) => {
+      e.preventDefault();
+      const pastedText = e.detail.getData('text');
+      this.valueController.setValuesArray(pastedText);
+      // Focus the next empty input after pasting, if all boxes are filled, focus the last input
+      const nextEmptyIndex = this.value.length < this.length ? this.value.length : this.length - 1;
+      void this.vegaInputRefs[nextEmptyIndex].doFocus();
+    };
+  }
+  watchLengthAndInputType() {
+    this.valueController.setValuesArray(this.value);
+  }
+  getVegaInputRefs() {
+    return this.vegaInputRefs;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-passcode-on-arrow-keyboard-press}
+   */
+  /* istanbul ignore next */
+  getCurrentIndex() {
+    return this.currentIndex;
+  }
+  getInputPasscodeContainerRef() {
+    return this.inputPasscodeContainerRef;
+  }
+  render() {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', ref: (ref) => {
+        this.vegaInputRefs[index] = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleVegaChange(index));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPaste, this.handleVegaPaste());
+      }, maskConfig: {
+        type: 'custom-formatter',
+        formatter: (value) => this.valueController.valueValidationFilter(value),
+      } })));
+    return (h(Host, null,
+      this.label && this.renderLabel(),
+      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
+      this.hint && h("vega-hint", null, this.hint)));
+  }
+  renderLabel() {
+    return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-passcode-on-input-value-input}
+   */
+  /* istanbul ignore next */
+  generateNewInputValue(index, inputValue) {
+    if (inputValue.length === 2) {
+      for (let i = 0; i < inputValue.length; i++) {
+        if (inputValue[i] !== this.vegaInputValues.get(index)) {
+          return inputValue[i];
+        }
+      }
+      return this.vegaInputValues.get(index);
+    }
+    else {
+      return inputValue;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "length", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "hint", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "vegaInputValues", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentMethod('watchLengthAndInputType')
+], VegaInputPasscodeRenderer.prototype, "watchLengthAndInputType", null);

package/dist/collection/components/vega-input-passcode/vega-input-passcode.css

@@ -0,0 +1,90 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+}
+:host vega-field-label {
+  margin-bottom: 8px;
+}
+:host vega-input::part(input-container) {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+:host vega-input.small {
+  width: 38px;
+  height: 42px;
+  box-sizing: border-box;
+}
+:host vega-input.medium {
+  width: 42px;
+  height: 50px;
+  box-sizing: border-box;
+}
+:host vega-input::part(input) {
+  text-align: center;
+}
+:host vega-input.small::part(input-container) {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+:host vega-input.medium::part(input-container) {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+:host .vega-input-passcode-container.error vega-input::part(input-container) {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+:host .vega-input-passcode-container.error vega-input::part(input-container):hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+:host .vega-input-passcode-container.error vega-input::part(input-container):focus-within {
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+  box-shadow: 0 0 0;
+}
+:host .vega-error {
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 8px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-error, 189, 41, 71, 1));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+:host .vega-hidden {
+  display: none;
+}