@globalpayments/vega 2.77.0 → 2.78.0

package/dist/esm/vega-input-numeric.entry.js

@@ -3,42 +3,42 @@ import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-82f346e3.js';
-import { f as VegaChange, F as VegaBlur } from './vega-event-id-38aa77a0.js';
+import { f as VegaChange, F as VegaBlur } from './vega-event-id-fdc58a67.js';
 import { n as normalizeNumberByRanger, c as convertToNumber, b as countDecimals } from './number-4398f2e1.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-331312b8.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-ffaecb9a.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-4feabae0.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f879fd58.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-9984d922.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-5817d14d.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-87bf68f1.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9a880420.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-5133f1a8.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-f4b3b0b9.js';
 import { M as MinNumberRule, a as MaxNumberRule } from './min-number-rule-2f1cfbf9.js';
 import './observer-3959f9dd.js';
 import './ui-ee31416b.js';
-import './internal-vega-event-manager-32a3d848.js';
+import './internal-vega-event-manager-3aebbe55.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-30f7b625.js';
 import './index-bfc6dfa2.js';
 import './dynamic-slimmer-90b8af32.js';
 import './try-get-document-bef0f526.js';
-import './keyboard-manager-38934f94.js';
-import './type-guard-f50e34d6.js';
+import './keyboard-manager-4dfc625f.js';
+import './type-guard-f69d2935.js';
 import './breakpoints-d9faf11c.js';
-import './ui-28fd4193.js';
+import './ui-41f725b7.js';
 import './typography-396de03f.js';
-import './internal-translation-controller-911515f9.js';
+import './internal-translation-controller-0787a7a7.js';
 import './string-a953eafc.js';
 import './misc-9fdbcfbb.js';
-import './vega-internal-event-id-799d012e.js';
+import './vega-internal-event-id-12783594.js';
 import './index-3b327f29.js';
-import './page-resize-observer-slimmer-d6af0d86.js';
-import './breakpoints-56e5407b.js';
+import './page-resize-observer-slimmer-e0505250.js';
+import './breakpoints-13353e09.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
-import './sub-state-observer-slimmer-478c9f41.js';
+import './sub-state-observer-slimmer-058feaf0.js';
 
 var __decorate$3 = (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;
@@ -307,106 +307,166 @@ const VegaInputNumeric = class {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.isCompactInputWidth = true;
     /**
-     * Defines the prefix for the input numeric field.
-     * It provides additional context or information displayed
-     *    before the numeric value, helping to
-     *    clarify its purpose or usage.
+     * Text displayed before (to the left of) the numeric value inside the input
+     * field. Use this to provide contextual information such as a currency
+     * symbol (e.g., `'$'`) or unit prefix.
      *
+     * @default ''
      * @vegaVersion 2.29.0
      */
     this.prefixText = '';
     /**
-     * Represents a pre-set or default value for the input numeric field.
+     * The current value of the numeric input field, represented as a string.
      *
+     * This property is mutable and will be updated when the user types or uses
+     * keyboard increment/decrement actions. It can also be set externally to
+     * pre-populate or reset the field. When `thousandComma` is enabled, the
+     * display is formatted with separators but the underlying value remains
+     * unformatted. Changes to this property trigger the `vegaChange` event.
+     *
+     * @default ''
      * @vegaVersion 2.29.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = '';
     /**
-     * Defines the size of the input numeric field.
+     * Controls the visual size of the numeric input field.
+     *
+     * - `'medium'` — Standard height, suitable for most form layouts.
+     * - `'small'` — Compact height, useful for dense UIs or inline editing.
      *
+     * @default 'medium'
      * @vegaVersion 2.29.0
      */
     this.size = 'medium';
     /**
-     * Determines whether the numeric input field should format numbers
-     *    with thousand separators (commas) during user input.
+     * When `true`, the numeric input automatically formats the displayed value
+     * with thousand separators (commas) as the user types (e.g., `1,000,000`).
+     * The underlying `value` property remains an unformatted numeric string.
      *
+     * @default false
      * @vegaVersion 2.29.0
      */
     this.thousandComma = false;
     /**
-     * Determines whether the numeric input field should restrict
-     *    input to integers only.
+     * When `true`, restricts user input to whole numbers only — decimal points
+     * and fractional digits are rejected. Useful for fields like quantity,
+     * count, or age.
      *
+     * @default false
      * @vegaVersion 2.29.0
      */
     this.integerOnly = false;
     /**
-     * Determines whether the input numeric field is disabled.
+     * Specifies whether the numeric input field is disabled. When `true`, the
+     * field is non-interactive — the user cannot type, focus, or use keyboard
+     * controls to change the value.
      *
+     * @default false
      * @vegaVersion 2.29.0
      */
     this.disabled = false;
     /**
-     * Specifies the step value for increasing or decreasing the input
-     *    when pressing the ArrowUp or ArrowDown key.
-     *    It controls the finer adjustments in the numeric input.
+     * The step value used when the user presses the `ArrowUp` or `ArrowDown`
+     * key to increment or decrement the value. This controls fine-grained
+     * adjustments to the numeric input.
+     *
+     * For larger jumps, see `majorIncrement` (activated with `Shift` + arrow
+     * keys).
      *
+     * @default 1
      * @vegaVersion 2.29.0
      */
     this.minorIncrement = 1;
     /**
-     * Specifies the step value for increasing or decreasing the input
-     *    when pressing the ArrowUp or ArrowDown key
-     *    while holding the Shift key.
-     *    It controls larger adjustments in the numeric input.
+     * The step value used when the user presses `Shift` + `ArrowUp` or
+     * `Shift` + `ArrowDown` to increment or decrement the value by a larger
+     * amount. This enables quick coarse-grained adjustments.
      *
+     * For smaller steps, see `minorIncrement`.
+     *
+     * @default 10
      * @vegaVersion 2.29.0
      */
     this.majorIncrement = 10;
     /**
-     * Provides a descriptive text or string that serves
-     *    as the label or title for the input numeric.
+     * Specifies the visible label text rendered above the numeric input.
+     * The label identifies the purpose of the field and serves as the
+     * accessible name for screen readers.
      *
+     * @default ''
      * @vegaVersion 2.29.0
      */
     this.label = '';
     /**
-     * Defines custom validation rules for the input numeric field.
+     * An array of custom validation rules applied to the numeric input in
+     * addition to the built-in rules (`RequiredFieldRule`, `MinNumberRule`,
+     * `MaxNumberRule`). Each rule must implement the `FormFieldValidationRule`
+     * interface.
+     *
+     * Rules are evaluated in order when `autoValidation` is enabled or when
+     * validation is triggered programmatically.
      *
+     * @default []
      * @vegaVersion 2.29.0
      */
     this.validationRules = [];
     /**
-     * Specifies the validation status of the input numeric field.
+     * Reflects the current validation status of the numeric input.
      *
+     * - `true` — the field value passes all validation rules.
+     * - `false` — one or more validation rules have failed.
+     * - `null` — the field has not been validated yet (initial state).
+     *
+     * This property is mutable: it is updated automatically when
+     * `autoValidation` is enabled, but can also be set manually to override
+     * the validation state.
+     *
+     * @default null
      * @vegaVersion 2.29.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * Determines whether the input field should undergo automatic validation
-     *    during the user's input.
+     * Determines whether the numeric input should be validated automatically as
+     * the user interacts with it. When `true`, validation rules (including
+     * `required`, `min`, `max`, and custom `validationRules`) are evaluated
+     * and the `isValid` property is updated accordingly.
+     *
+     * Set to `false` to handle validation manually.
      *
+     * @default true
      * @vegaVersion 2.29.0
      */
     this.autoValidation = true;
     /**
-     * Determines whether the clear icon should be displayed or hidden.
+     * Controls whether a clear (×) icon button is shown inside the input field
+     * when a value is present. Clicking the button resets the value to an empty
+     * string and triggers the `vegaChange` event.
      *
+     * @default true
      * @vegaVersion 2.53.0
      */
     this.showClearIcon = true;
     /**
-     * Sets the minimum allowable value for the numeric input.
+     * Sets the minimum allowable value for the numeric input. When set, the
+     * built-in `MinNumberRule` is applied during validation. Values below this
+     * threshold will cause validation to fail.
      *
+     * Set to `null` to remove the lower bound.
+     *
+     * @default null
      * @vegaVersion 2.63.0
      */
     this.min = null;
     /**
-     * Sets the maximum allowable value for the numeric input.
+     * Sets the maximum allowable value for the numeric input. When set, the
+     * built-in `MaxNumberRule` is applied during validation. Values above this
+     * threshold will cause validation to fail.
+     *
+     * Set to `null` to remove the upper bound.
      *
+     * @default null
      * @vegaVersion 2.63.0
      */
     this.max = null;

package/dist/esm/vega-input-passcode.entry.js

@@ -2,41 +2,41 @@ import { h, H as Host, r as registerInstance, c as createEvent, g as getElement
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { E as VegaFocus, F as VegaBlur, f as VegaChange, H as VegaPaste, I as VegaComplete } from './vega-event-id-38aa77a0.js';
+import { E as VegaFocus, F as VegaBlur, f as VegaChange, H as VegaPaste, I as VegaComplete } from './vega-event-id-fdc58a67.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-82f346e3.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-ffaecb9a.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-9984d922.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-331312b8.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-5817d14d.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f879fd58.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-87bf68f1.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-4feabae0.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9a880420.js';
 import { R as RequiredFieldRule } from './required-field-rule-ab4bdc47.js';
 import './observer-3959f9dd.js';
 import './ui-ee31416b.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-32a3d848.js';
+import './internal-vega-event-manager-3aebbe55.js';
 import './try-get-document-bef0f526.js';
-import './keyboard-manager-38934f94.js';
-import './type-guard-f50e34d6.js';
+import './keyboard-manager-4dfc625f.js';
+import './type-guard-f69d2935.js';
 import './breakpoints-d9faf11c.js';
-import './ui-28fd4193.js';
+import './ui-41f725b7.js';
 import './typography-396de03f.js';
-import './internal-translation-controller-911515f9.js';
+import './internal-translation-controller-0787a7a7.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-30f7b625.js';
 import './index-bfc6dfa2.js';
 import './string-a953eafc.js';
 import './misc-9fdbcfbb.js';
-import './vega-internal-event-id-799d012e.js';
+import './vega-internal-event-id-12783594.js';
 import './index-3b327f29.js';
-import './page-resize-observer-slimmer-d6af0d86.js';
-import './breakpoints-56e5407b.js';
+import './page-resize-observer-slimmer-e0505250.js';
+import './breakpoints-13353e09.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-478c9f41.js';
+import './sub-state-observer-slimmer-058feaf0.js';
 
 var __decorate$3 = (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;
@@ -130,7 +130,7 @@ class VegaInputPasscodeRenderer extends VegaSlimmer {
     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', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, "data-tabindex": index !== 0 ? -1 : 0, showClearIcon: false, disabled: this.disabled, "data-aria-hidden": String(!this.isInputAccessibleForScreenReader(index)), "data-aria-label": `Passcode input ${index + 1} of ${this.length}`, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
         this.vegaInputRefs[index] = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
@@ -142,12 +142,40 @@ class VegaInputPasscodeRenderer extends VegaSlimmer {
       } })));
     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),
+      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", role: "group", "aria-label": this.label || 'One-time password input', 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 }));
   }
+  /**
+   * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
+   *
+   * @param {number} inputLength - the input length of the passcode, which is also the number of input boxes to render
+   * @returns {number} - the index of the first empty input box, or -1 if all boxes are filled
+   */
+  getFirstEmptyIndexForRender(inputLength) {
+    for (let index = 0; index < inputLength; index++) {
+      const currentValue = this.vegaInputValues.get(index);
+      if (!currentValue) {
+        return index;
+      }
+    }
+    return -1;
+  }
+  /**
+   * Determine whether the input box at the given index should be accessible to screen readers. Only the boxes up to and including the first empty box should be accessible, as screen readers will read out all accessible boxes and we don't want them to read out empty boxes that come before filled boxes.
+   *
+   * @param {number} index - the index of the input box to check
+   * @returns {boolean} - true if the input box should be accessible to screen readers, false otherwise
+   */
+  isInputAccessibleForScreenReader(index) {
+    const firstEmptyIndexForRender = this.getFirstEmptyIndexForRender(this.length);
+    if (firstEmptyIndexForRender === -1) {
+      return true;
+    }
+    return index <= firstEmptyIndexForRender;
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-passcode-on-input-value-input}
@@ -343,6 +371,7 @@ class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer {
       {
         keyCode: ['ArrowLeft', 'ArrowRight'],
         activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        eventName: 'keydown',
         callback: 
         /* istanbul ignore next */
         /* eslint-disable jsdoc/require-jsdoc */
@@ -389,6 +418,7 @@ class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer {
    * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
    */
   controlDirectionByKeyboard(event) {
+    event.preventDefault();
     const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
     const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
     if (event.key === 'ArrowLeft' && currentIndex > 0) {
@@ -595,79 +625,122 @@ const VegaInputPasscode = class {
       this.vegaInputValues = newArr;
     });
     /**
-     * Specifies the label or title for the input passcode.
-     *
-     * It provides descriptive text that helps identify the
-     *    purpose or content expected in the input passcode.
+     * Specifies the visible label text rendered above the passcode input.
+     * The label identifies the purpose of the field (e.g., "Enter verification
+     * code") and serves as the accessible name for screen readers.
      *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     this.label = '';
     /**
-     * Determines whether the input passcode is disabled.
+     * Specifies whether the passcode input is disabled. When `true`, all
+     * individual input boxes become non-interactive — the user cannot type,
+     * paste, or focus any box.
      *
+     * @default false
      * @vegaVersion 2.66.0
      */
     this.disabled = false;
     /**
-     * Defines the size of the input passcode,
-     *    specifying its width or length.
+     * Controls the visual size of the passcode input boxes.
+     *
+     * - `'medium'` — Standard height, suitable for most form layouts.
+     * - `'small'` — Compact height, useful for dense UIs.
      *
+     * @default 'medium'
      * @vegaVersion 2.66.0
      */
     this.size = 'medium';
     /**
-     * Provides a supplementary prompt message that assists users in
-     *    understanding the expected value for the input passcode.
+     * Supplementary helper message displayed below the passcode input that
+     * assists users in understanding the expected input. For example,
+     * `'Enter the 4-digit code sent to your email'`.
      *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     this.hint = '';
     /**
-     * Specifies the number of input boxes to display.
+     * Specifies the number of individual input boxes rendered for the passcode.
+     * Each box accepts a single character. Common values are `4` for a PIN and
+     * `6` for a two-factor authentication code.
      *
+     * @default 4
      * @vegaVersion 2.66.0
      */
     this.length = 4;
     /**
-     * Specifies the input type of the input passcode
-     *    Numeric type: only 0-9 are accepted
-     *    Text type: any non-space character is accepted
-     *    Spaces are rejected for all types
+     * Specifies the type of characters accepted by each passcode box.
+     *
+     * - `'numeric'` — Only digits `0`–`9` are accepted.
+     * - `'text'` — Any non-space character is accepted.
+     *
+     * Spaces are always rejected regardless of the selected type.
      *
+     * @default 'numeric'
      * @vegaVersion 2.66.0
      */
     this.inputType = 'numeric';
     /**
-     * Specifies the value of the input passcode.
+     * The current value of the passcode input, represented as a concatenated
+     * string of all box values (e.g., `'1234'` for a 4-digit passcode).
      *
+     * This property is mutable and reflected to the host element attribute.
+     * It updates as the user types into the boxes and can be set externally
+     * to pre-populate or reset the field.
+     *
+     * @default ''
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = '';
     /**
-     * Determines whether the input passcode field is required.
+     * Determines whether the passcode field must have a value before the form
+     * can be submitted. When `true`, the built-in `RequiredFieldRule` is
+     * applied during validation and a required indicator is shown on the label.
      *
+     * @default false
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
     /**
-     * Defines custom validation rules for the input passcode.
+     * An array of custom validation rules applied to the passcode input in
+     * addition to the built-in `RequiredFieldRule`. Each rule must implement
+     * the `FormFieldValidationRule` interface.
+     *
+     * Rules are evaluated in order when `autoValidation` is enabled or when
+     * validation is triggered programmatically.
      *
+     * @default []
      * @vegaVersion 2.66.0
      */
     this.validationRules = [];
     /**
-     * Determines whether the input passcode should undergo automatic validation
-     *    during the user's input.
+     * Determines whether the passcode input should be validated automatically
+     * as the user types. When `true`, validation rules (including `required`
+     * and custom `validationRules`) are evaluated and the `isValid` property
+     * is updated accordingly.
+     *
+     * Set to `false` to handle validation manually.
      *
+     * @default true
      * @vegaVersion 2.66.0
      */
     this.autoValidation = true;
     /**
-     * Specifies the validation status of the input passcode.
+     * Reflects the current validation status of the passcode input.
+     *
+     * - `true` — the field value passes all validation rules.
+     * - `false` — one or more validation rules have failed.
+     * - `null` — the field has not been validated yet (initial state).
+     *
+     * This property is mutable: it is updated automatically when
+     * `autoValidation` is enabled, but can also be set manually to override
+     * the validation state.
      *
+     * @default null
      * @vegaVersion 2.66.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */