@globalpayments/vega 2.77.1 → 2.78.0

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

@@ -47,79 +47,122 @@ export class VegaInputPasscode {
       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 */
@@ -161,10 +204,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Specifies the label or title for the input passcode.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input passcode."
+        "text": "Specifies the visible label text rendered above the passcode input.\nThe label identifies the purpose of the field (e.g., \"Enter verification\ncode\") and serves as the accessible name for screen readers."
       },
       "attribute": "label",
       "reflect": false,
@@ -182,10 +228,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Determines whether the input passcode is disabled."
+        "text": "Specifies whether the passcode input is disabled. When `true`, all\nindividual input boxes become non-interactive \u2014 the user cannot type,\npaste, or focus any box."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -203,10 +252,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "'medium'"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Defines the size of the input passcode,\n   specifying its width or length."
+        "text": "Controls the visual size of the passcode input boxes.\n\n- `'medium'` \u2014 Standard height, suitable for most form layouts.\n- `'small'` \u2014 Compact height, useful for dense UIs."
       },
       "attribute": "size",
       "reflect": false,
@@ -224,10 +276,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input passcode."
+        "text": "Supplementary helper message displayed below the passcode input that\nassists users in understanding the expected input. For example,\n`'Enter the 4-digit code sent to your email'`."
       },
       "attribute": "hint",
       "reflect": false,
@@ -245,10 +300,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "4"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Specifies the number of input boxes to display."
+        "text": "Specifies the number of individual input boxes rendered for the passcode.\nEach box accepts a single character. Common values are `4` for a PIN and\n`6` for a two-factor authentication code."
       },
       "attribute": "length",
       "reflect": false,
@@ -266,10 +324,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "'numeric'"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Specifies the input type of the input passcode\n   Numeric type: only 0-9 are accepted\n   Text type: any non-space character is accepted\n   Spaces are rejected for all types"
+        "text": "Specifies the type of characters accepted by each passcode box.\n\n- `'numeric'` \u2014 Only digits `0`\u2013`9` are accepted.\n- `'text'` \u2014 Any non-space character is accepted.\n\nSpaces are always rejected regardless of the selected type."
       },
       "attribute": "input-type",
       "reflect": false,
@@ -287,10 +348,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Specifies the value of the input passcode."
+        "text": "The current value of the passcode input, represented as a concatenated\nstring of all box values (e.g., `'1234'` for a 4-digit passcode).\n\nThis property is mutable and reflected to the host element attribute.\nIt updates as the user types into the boxes and can be set externally\nto pre-populate or reset the field."
       },
       "attribute": "value",
       "reflect": true,
@@ -308,10 +372,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Determines whether the input passcode field is required."
+        "text": "Determines whether the passcode field must have a value before the form\ncan be submitted. When `true`, the built-in `RequiredFieldRule` is\napplied during validation and a required indicator is shown on the label."
       },
       "attribute": "required",
       "reflect": true,
@@ -334,10 +401,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "[]"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Defines custom validation rules for the input passcode."
+        "text": "An array of custom validation rules applied to the passcode input in\naddition to the built-in `RequiredFieldRule`. Each rule must implement\nthe `FormFieldValidationRule` interface.\n\nRules are evaluated in order when `autoValidation` is enabled or when\nvalidation is triggered programmatically."
       },
       "defaultValue": "[]"
     },
@@ -353,10 +423,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "true"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Determines whether the input passcode should undergo automatic validation\n   during the user's input."
+        "text": "Determines whether the passcode input should be validated automatically\nas the user types. When `true`, validation rules (including `required`\nand custom `validationRules`) are evaluated and the `isValid` property\nis updated accordingly.\n\nSet to `false` to handle validation manually."
       },
       "attribute": "auto-validation",
       "reflect": true,
@@ -374,10 +447,13 @@ export class VegaInputPasscode {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "null"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "Specifies the validation status of the input passcode."
+        "text": "Reflects the current validation status of the passcode input.\n\n- `true` \u2014 the field value passes all validation rules.\n- `false` \u2014 one or more validation rules have failed.\n- `null` \u2014 the field has not been validated yet (initial state).\n\nThis property is mutable: it is updated automatically when\n`autoValidation` is enabled, but can also be set manually to override\nthe validation state."
       },
       "attribute": "is-valid",
       "reflect": true,
@@ -395,10 +471,13 @@ export class VegaInputPasscode {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "An event emitter notifying the change of the value in the input passcode,\n   whether triggered programmatically or through user interaction."
+        "text": "Fires whenever the passcode value changes \u2014 each time a character is\nentered, deleted, or pasted into any box. The event detail contains the\nconcatenated string of all box values at the time of the change."
       },
       "complexType": {
         "original": "string",
@@ -413,13 +492,16 @@ export class VegaInputPasscode {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "An event emitter notifying the change of the value in the input passcode,\n   whether triggered programmatically or through user interaction."
+        "text": "Native-equivalent mirror of `vegaChange`. Fires with the same payload\nand at the same time, allowing consumers to listen using the standard\n`change` event name."
       },
       "complexType": {
         "original": "string",
@@ -434,10 +516,13 @@ export class VegaInputPasscode {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "An event emitter notifying the completion of all input passcode boxes.\n   whether triggered programmatically or through user interaction."
+        "text": "Fires when all passcode boxes have been filled (i.e., the value length\nequals the configured `length`). The event detail contains the complete\npasscode string. Useful for triggering auto-submit or verification\nworkflows."
       },
       "complexType": {
         "original": "string",
@@ -452,13 +537,16 @@ export class VegaInputPasscode {
       "composed": true,
       "docs": {
         "tags": [{
+            "name": "eventDetail",
+            "text": "string"
+          }, {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
             "name": "vegaVersion",
             "text": "2.66.0"
           }],
-        "text": "An event emitter notifying the completion of all input passcode boxes.\n   whether triggered programmatically or through user interaction."
+        "text": "Native-equivalent mirror of `vegaComplete`. Fires with the same payload\nand at the same time, allowing consumers to listen using the standard\n`complete` event name."
       },
       "complexType": {
         "original": "string",