@globalpayments/vega 1.0.1 → 2.13.0-backfill-beta.0

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-copy-paste-controller.js

@@ -0,0 +1,43 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+/** The `VegaInputCopyPasteController` class extends `VegaSlimmer` and provides methods to handle copy, cut, and paste events based on the `disableCopyPaste` property of a `VegaInput` component. */
+export class VegaInputCopyPasteController extends VegaSlimmer {
+  /**
+   * The function `getCopyPasteProps` returns an object with event handlers that prevent default behavior for copy, cut, and paste events if `disableCopyPaste` is true.
+   *
+   * @returns {Record<string, (e: ClipboardEvent) => void>} If `this.disableCopyPaste` is true, an object with `onCopy`, `onCut`, and `onPaste`
+   * properties is being returned. Each property is a function that takes a `ClipboardEvent` parameter
+   * and prevents the default behavior of the event. If `this.disableCopyPaste` is false, an empty
+   * object is being returned.
+   */
+  getCopyPasteProps() {
+    if (this.disableCopyPaste) {
+      return {
+        onCopy: this.preventDefault,
+        onCut: this.preventDefault,
+        onPaste: this.preventDefault,
+      };
+    }
+    else {
+      return {};
+    }
+  }
+  /**
+   * The `preventDefault` function in TypeScript prevents the default behavior of a ClipboardEvent.
+   *
+   * @param {ClipboardEvent} e - The parameter "e" in the function "preventDefault" is of type
+   * ClipboardEvent. This parameter represents the event object that is passed to the function when it
+   * is called.
+   */
+  preventDefault(e) {
+    e.preventDefault();
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputCopyPasteController.prototype, "disableCopyPaste", void 0);

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-mask-config-controller.js

@@ -0,0 +1,121 @@
+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 { StringMaskStrategy, } from '../../../../helpers/formatter/string-formatter/stringMaskStrategy';
+import { ThousandCommaStrategy } from '../../../../helpers/formatter/string-formatter/thousandCommaStrategy';
+import { NumberMaskStrategy, } from '../../../../helpers/formatter/string-formatter/numberMaskStrategy';
+import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/stringInputFormatterSlimmer';
+/** The `VegaInputMaskConfigController` class in TypeScript manages input mask configuration and string formatting for an input element within a component's shadow root. */
+export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the input element which will add mask
+     *
+     * @returns {Nullable<HTMLInputElement>} the input element
+     */
+    this.getInputElementRef = () => {
+      return this.inputRef;
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'input'.
+     *
+     * @returns {Nullable<StringFormatStrategy>} the input mode mask strategy
+     */
+    this.getInputModeStrategy = () => {
+      return this.generateMaskStrategy('input');
+    };
+    /**
+     * Determining the string format strategy to be applied when the input field trigger is set to 'blur'.
+     *
+     * @returns {Nullable<StringFormatStrategy>} the blur mode mask strategy
+     */
+    this.getBlurModeStrategy = () => {
+      return this.generateMaskStrategy('blur');
+    };
+  }
+  /**
+   * The function `setupStringFormatter` sets up a string formatter for an input element based on provided mask configurations.
+   *
+   * @param {HTMLInputElement|null} inputRef - The `inputRef` parameter in the `setupStringFormatter` function is a reference to
+   * an HTML input element. This function sets up a string formatter for the input element based on the
+   * provided configurations. It first assigns the input element reference to `this.inputRef`.
+   */
+  setupStringFormatter(inputRef) {
+    this.inputRef = inputRef;
+    this.setup();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-input-mask-type-thousand-comma-e2e}
+   * @see{module:vega-input-mask-type-zipcode-e2e}
+   * @see{module:vega-input-mask-type-taxId-e2e}
+   * @see{module:vega-input-mask-type-phone-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * This TypeScript function generates a string format strategy based on the provided mask configuration and trigger type.
+   *
+   * @param {'blur' | 'input'} maskTrigger - The `maskTrigger` parameter in the `generateMaskStrategy` function determines when the mask should be applied to the input field. It can have two possible values:
+   * @returns {StringFormatStrategy|null} The function `generateMaskStrategy` returns a nullable `StringFormatStrategy` based on the provided `maskConfig` and `maskTrigger` parameters.
+   */
+  generateMaskStrategy(maskTrigger) {
+    let maskConfig = null;
+    if (Array.isArray(this.maskConfig)) {
+      maskConfig = this.maskConfig.find((item) => maskTrigger === 'blur' ? this.isBlurModeMaskConfig(item) : !this.isBlurModeMaskConfig(item));
+    }
+    else if (this.maskConfig) {
+      if (maskTrigger === 'blur' && this.isBlurModeMaskConfig(this.maskConfig)) {
+        maskConfig = this.maskConfig;
+      }
+      else if (maskTrigger === 'input' && !this.isBlurModeMaskConfig(this.maskConfig)) {
+        maskConfig = this.maskConfig;
+      }
+    }
+    let stringFormatStrategy = null;
+    switch (maskConfig === null || maskConfig === void 0 ? void 0 : maskConfig.type) {
+      case 'phone':
+        stringFormatStrategy = StringMaskStrategy.PHONE_MASK;
+        break;
+      case 'taxId':
+        stringFormatStrategy = StringMaskStrategy.TAX_ID_MASK;
+        break;
+      case 'zipcode':
+        stringFormatStrategy = StringMaskStrategy.ZIPCODE_MASK;
+        break;
+      case 'thousand-comma':
+        stringFormatStrategy = new ThousandCommaStrategy();
+        break;
+      case 'number':
+        stringFormatStrategy = new NumberMaskStrategy(maskConfig.options);
+        break;
+      case 'custom':
+        stringFormatStrategy = new StringMaskStrategy(maskConfig.options);
+        break;
+    }
+    if (this.type === 'number' && maskTrigger === 'input' && !maskConfig) {
+      stringFormatStrategy = new NumberMaskStrategy();
+    }
+    return stringFormatStrategy;
+  }
+  /**
+   * The function `isBlurModeMaskConfig` checks if a given `maskConfig` is of type 'custom' and has a trigger of 'blur'.
+   *
+   * @param {MaskConfigType} maskConfig - MaskConfigType
+   * @returns {boolean} a boolean value, which indicates whether the provided `maskConfig` object has a type of
+   * 'custom' and a trigger of 'blur'.
+   */
+  isBlurModeMaskConfig(maskConfig) {
+    return maskConfig.type === 'custom' && maskConfig.trigger === 'blur';
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "maskConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputMaskConfigController.prototype, "type", void 0);

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

@@ -0,0 +1,37 @@
+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 } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** The `VegaInputPrefixSlotRenderer` class in TypeScript React renders a prefix icon for a VegaInput component, checking for the existence of a specific slot named "prefix-icon" in the host element. */
+export class VegaInputPrefixSlotRenderer extends VegaSlimmer {
+  render() {
+    const hasSlotContent = this.hasPrefixSlot();
+    if (this.prefixIcon || hasSlotContent) {
+      return (h("div", { class: {
+          'vega-input-prefix': true,
+          'vega-input-prefix-slot': hasSlotContent,
+        }, part: "prefix-icon-container" },
+        this.prefixIcon && !hasSlotContent ? (h("vega-icon", { icon: this.prefixIcon, size: "size-16" })) : null,
+        h("slot", { name: "prefix-icon" })));
+    }
+  }
+  /**
+   * The function checks if a specific slot named "prefix-icon" exists in the host element.
+   *
+   * @returns {boolean} The `hasPrefixSlot()` method returns a boolean value - `true` if the host element has a
+   * child element with the slot attribute set to "prefix-icon", and `false` otherwise.
+   */
+  hasPrefixSlot() {
+    return this.host.querySelector('[slot="prefix-icon"]') ? true : false;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaInputPrefixSlotRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPrefixSlotRenderer.prototype, "prefixIcon", void 0);

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

@@ -0,0 +1,267 @@
+/* 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 {
+  cursor: text;
+  display: block;
+  text-align: left;
+  line-height: normal;
+}
+
+:host(.vega-input-inline-block) {
+  display: inline-block;
+  width: 100%;
+}
+
+vega-field-label {
+  margin-bottom: 8px;
+}
+
+.vega-input-container {
+  display: flex;
+  align-items: center;
+  border-radius: 8px;
+  gap: 8px;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+}
+
+.vega-input-container:hover {
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+}
+
+.vega-input-container.vega-input-disabled {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+
+.vega-input-container.vega-input-disabled:hover {
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+
+.vega-input-container.vega-input-disabled input {
+  color: rgba(var(--v-text-input-disabled, 107, 116, 125, 1));
+}
+
+.vega-input-container.with-value {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 8px;
+}
+
+.vega-input-container:focus-within {
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+}
+
+.vega-input-container.error {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+}
+
+.vega-input-container.error:hover {
+  border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
+}
+
+.vega-input-container.error:focus-within {
+  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
+  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+}
+
+.vega-input-prefix {
+  text-align: center;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+  font-size: 0px;
+}
+
+.vega-input-prefix.vega-input-prefix-slot {
+  height: 24px;
+  overflow: hidden;
+}
+
+.vega-input-input {
+  flex: 1 1 0%;
+  position: relative;
+}
+
+.vega-input-input input {
+  width: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  border-style: none;
+  height: 24px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-input-input input {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .vega-input-input input {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .vega-input-input input {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-input-input input::placeholder {
+  color: rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));
+}
+
+.vega-input-size-small {
+  padding-top: 8px;
+  padding-right: 12px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+}
+
+.vega-input-size-default {
+  padding-top: 12px;
+  padding-right: 16px;
+  padding-bottom: 12px;
+  padding-left: 16px;
+}
+
+.vega-input-input input:disabled {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+}
+
+.vega-hint {
+  padding-top: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
+.vega-hint > label {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .vega-hint > label {
+    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) {
+  .vega-hint > label {
+    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) {
+  .vega-hint > label {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-error {
+  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));
+  display: block;
+  padding-top: 12px;
+  padding-right: 8px;
+  padding-left: 8px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .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) {
+  .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) {
+  .vega-error {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0px;
+  }
+}
+
+.vega-hidden {
+  display: none;
+}
+
+.vega-input-clear-icon {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+}
+
+.vega-input-clear-icon.invisible {
+  visibility: hidden;
+}
+
+.vega-input-clear-icon vega-icon {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  flex-shrink: 0;
+}
+
+input[type=number]::-webkit-outer-spin-button,
+input[type=number]::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type=number] {
+  -moz-appearance: textfield;
+}