@globalpayments/vega 2.23.0 → 2.24.2

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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, Prop, Element, Method, Event, Listen, Watch } from '@stencil/core';
+import { Component, Host, h, Prop, Element, Method, Event, Watch } from '@stencil/core';
 import { EmailFieldRule } from '../../helpers/validator/rules/email-field-rule';
 import { MaxNumberRule } from '../../helpers/validator/rules/max-number-rule';
 import { MaxStringLengthRule } from '../../helpers/validator/rules/max-string-length-rule';
@@ -25,6 +25,9 @@ import { VegaInputPrefixSlotRenderer } from './slimmers/renderers/vega-input-pre
 import { VegaInputMaskConfigController } from './slimmers/controllers/vega-input-mask-config-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input/runtime-metrics-payload-definition';
+/**
+ * @version 1.0.5
+ */
 export class VegaInput {
   constructor() {
     this.globalSlimmers = {};
@@ -77,6 +80,8 @@ export class VegaInput {
      *
      * It provides descriptive text that helps identify the
      *    purpose or content expected in the input field.
+     *
+     * @version 1.0.5
      */
     this.label = '';
     /**
@@ -88,24 +93,41 @@ export class VegaInput {
      *
      * If the value is too long, it may be truncated with
      *    an ellipsis for visual presentation.
+     *
+     * @version 1.0.5
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = '';
+    /**
+     * Specifies when the vegaChange event is triggered.
+     *     It controls whether the event is dispatched
+     *     after typing in the input or after a change event.
+     *
+     * @version 2.24.0
+     */
+    this.valueUpdateTrigger = 'input';
     /**
      * Defines the specific type or category of the input field.
      *
      * It specifies the intended format or purpose of the
      *    data to be entered by the user.
+     *
+     * @version 1.0.9
      */
     this.type = 'text';
     /**
      * Defines the specific name of the input field.
      *
+     *
+     * @version 1.0.5
      */
     this.name = '';
     /**
      * Controls the autofill behavior and specifies whether the
      *    input should receive automated suggestions or
      *    previously entered values.
+     *
+     * @version 1.0.5
      */
     this.autocomplete = 'off';
     /**
@@ -115,64 +137,91 @@ export class VegaInput {
      *    standard email formatting rules.
      *
      * @deprecated Please use `type='email'` instead.
+     * @version 1.0.5
      */
     this.email = false;
     /**
      * Determines whether the input field is required.
+     *
+     * @version 1.0.5
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
     /**
      * Sets the minimum allowable numeric value for the input value.
+     *
+     * @version 1.0.5
      */
     this.min = null;
     /**
      * Sets the maximum allowable numeric value for the input value.
+     *
+     * @version 1.0.5
      */
     this.max = null;
     /**
      * Sets the minimum length requirement for the input value.
+     *
+     * @version 1.0.5
      */
     this.minLength = null;
     /**
      * Sets the maximum length requirement for the input value.
+     *
+     * @version 1.0.5
      */
     this.maxLength = null;
     /**
      * Determines whether the clear icon should be displayed or hidden.
+     *
+     * @version 1.3.0
      */
     this.showClearIcon = true;
     /**
      * Indicates whether the current value in the field is considered valid or
      *    invalid based on the defined validation rules.
+     *
+     * @version 1.3.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.
+     *
+     * @version 1.0.10
      */
     this.autoValidation = true;
     /**
      * Defines custom validation rules for the input field.
+     *
+     * @version 1.0.10
      */
     this.validationRules = [];
     /**
      * Defines the size of the input field,
      *    specifying its width or length.
+     *
+     * @version 1.3.0
      */
     this.size = 'default';
     /**
      * Determines whether the input field is disabled.
+     *
+     * @version 1.3.0
      */
     this.disabled = false;
     /**
      * Provides a supplementary prompt message that assists users in
      *    understanding the expected value for the input field.
+     *
+     * @version 1.3.0
      */
     this.hint = '';
     /**
      * Controls whether copying or pasting is enabled for the input.
+     *
+     * @version 2.1.0
      */
     this.disableCopyPaste = false;
     this.focusInput = () => {
@@ -196,6 +245,28 @@ export class VegaInput {
     this.isClearIconVisible = () => {
       return !this.disabled && Boolean(this.value);
     };
+    /**
+     * Handles input event and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-input}
+     */
+    /* istanbul ignore next */
+    this.onInputHandler = (e) => {
+      if (this.valueUpdateTrigger !== 'change') {
+        this.value = e.target.value;
+      }
+    };
+    /**
+     * Handles input change events and updates the value based on a specified trigger.
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-on-value-change}
+     */
+    /* istanbul ignore next */
+    this.inputChangeHandler = (e) => {
+      if (this.valueUpdateTrigger === 'change') {
+        this.value = e.target.value;
+      }
+    };
   }
   /**
    * The input component is embedded in other components.
@@ -231,22 +302,18 @@ export class VegaInput {
   watchMaskChange() {
     this.maskConfigController.setupStringFormatter(this.inputRef);
   }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-on-value-input}
-   */
-  /* istanbul ignore next */
-  handleValueInput() {
-    this.value = this.inputRef.value;
-  }
   /**
    * Invoke this method to focus the current input.
+   *
+   * @version 1.12.0
    */
   async doFocus() {
     this.focusInput();
   }
   /**
    * Invoke this method to blur the current input.
+   *
+   * @version 1.12.0
    */
   async doBlur() {
     this.inputRef.blur();
@@ -261,7 +328,7 @@ export class VegaInput {
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
-        onFocus: (e) => this.handleInputFocus(e) }, this.copyPasteController.getCopyPasteProps()))));
+        onFocus: (e) => this.handleInputFocus(e), onChange: this.inputChangeHandler, onInput: this.onInputHandler }, this.copyPasteController.getCopyPasteProps()))));
   }
   groupDom() {
     let containerClass = 'vega-input-container';
@@ -312,7 +379,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Specifies the label or title for the input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
       },
       "attribute": "label",
@@ -330,13 +400,42 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Represents a pre-set or default value for the input field.\n\nIt allows you to initialize the field with a specific value,\n   which is displayed to the user when the input is\n   initially rendered.\n\nIf the value is too long, it may be truncated with\n   an ellipsis for visual presentation."
       },
       "attribute": "value",
       "reflect": true,
       "defaultValue": "''"
     },
+    "valueUpdateTrigger": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "InputValueUpdateTriggeredBy",
+        "resolved": "\"change\" | \"input\"",
+        "references": {
+          "InputValueUpdateTriggeredBy": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.24.0"
+          }],
+        "text": "Specifies when the vegaChange event is triggered.\n    It controls whether the event is dispatched\n    after typing in the input or after a change event."
+      },
+      "attribute": "value-update-trigger",
+      "reflect": false,
+      "defaultValue": "'input'"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -348,7 +447,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.9"
+          }],
         "text": "Defines the specific type or category of the input field.\n\nIt specifies the intended format or purpose of the\n   data to be entered by the user."
       },
       "attribute": "type",
@@ -366,7 +468,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Defines the specific name of the input field."
       },
       "attribute": "name",
@@ -384,7 +489,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Controls the autofill behavior and specifies whether the\n   input should receive automated suggestions or\n   previously entered values."
       },
       "attribute": "autocomplete",
@@ -402,7 +510,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Specifies an icon or symbol that appears before the input field,\n   providing visual context or enhancing the aesthetic appearance\n   of the input."
       },
       "attribute": "prefix-icon",
@@ -422,6 +533,9 @@ export class VegaInput {
         "tags": [{
             "name": "deprecated",
             "text": "Please use `type='email'` instead."
+          }, {
+            "name": "version",
+            "text": "1.0.5"
           }],
         "text": "Enforces proper email format validation for the input field.\n\nIt ensures that the user enters a valid email address according to\n   standard email formatting rules."
       },
@@ -440,7 +554,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Determines whether the input field is required."
       },
       "attribute": "required",
@@ -458,7 +575,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Sets the minimum allowable numeric value for the input value."
       },
       "attribute": "min",
@@ -476,7 +596,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Sets the maximum allowable numeric value for the input value."
       },
       "attribute": "max",
@@ -494,7 +617,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Sets the minimum length requirement for the input value."
       },
       "attribute": "min-length",
@@ -512,7 +638,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.5"
+          }],
         "text": "Sets the maximum length requirement for the input value."
       },
       "attribute": "max-length",
@@ -530,7 +659,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Determines whether the clear icon should be displayed or hidden."
       },
       "attribute": "show-clear-icon",
@@ -548,7 +680,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Indicates whether the current value in the field is considered valid or\n   invalid based on the defined validation rules."
       },
       "attribute": "is-valid",
@@ -566,7 +701,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
         "text": "Determines whether the input field should undergo automatic validation\n   during the user's input."
       },
       "attribute": "auto-validation",
@@ -589,7 +727,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
         "text": "Defines custom validation rules for the input field."
       },
       "defaultValue": "[]"
@@ -605,7 +746,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Defines the size of the input field,\n   specifying its width or length."
       },
       "attribute": "size",
@@ -623,7 +767,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies a placeholder string that displays as a temporary hint\n   or example inside the input field.\n\nIt indicates the expected format or pattern of the input."
       },
       "attribute": "placeholder",
@@ -640,7 +787,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Determines whether the input field is disabled."
       },
       "attribute": "disabled",
@@ -658,7 +808,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Provides a supplementary prompt message that assists users in\n   understanding the expected value for the input field."
       },
       "attribute": "hint",
@@ -681,7 +834,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "Specifies the configuration for applying a mask to the input field.\n\nIt provides a way to define a specific format or pattern for the input value,\n   restricting and guiding the user's input accordingly."
       }
     },
@@ -696,7 +852,10 @@ export class VegaInput {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "2.1.0"
+          }],
         "text": "Controls whether copying or pasting is enabled for the input."
       },
       "attribute": "disable-copy-paste",
@@ -711,7 +870,10 @@ export class VegaInput {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.0.10"
+          }],
         "text": "An event emitter notifying a value change."
       },
       "complexType": {
@@ -729,6 +891,9 @@ export class VegaInput {
         "tags": [{
             "name": "eventSemantics",
             "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
           }],
         "text": "An event emitter notifying a value change."
       },
@@ -744,7 +909,10 @@ export class VegaInput {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.3.0"
+          }],
         "text": "An event emitter notifying the blur of the inner input element."
       },
       "complexType": {
@@ -762,6 +930,9 @@ export class VegaInput {
         "tags": [{
             "name": "eventSemantics",
             "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
           }],
         "text": "An event emitter notifying the blur of the inner input element."
       },
@@ -777,7 +948,10 @@ export class VegaInput {
       "cancelable": true,
       "composed": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }],
         "text": "An event emitter notifying the focus of the inner input element."
       },
       "complexType": {
@@ -795,6 +969,9 @@ export class VegaInput {
         "tags": [{
             "name": "eventSemantics",
             "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.0.0"
           }],
         "text": "An event emitter notifying the focus of the inner input element."
       },
@@ -818,7 +995,10 @@ export class VegaInput {
       },
       "docs": {
         "text": "Invoke this method to focus the current input.",
-        "tags": []
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }]
       }
     },
     "doBlur": {
@@ -834,7 +1014,10 @@ export class VegaInput {
       },
       "docs": {
         "text": "Invoke this method to blur the current input.",
-        "tags": []
+        "tags": [{
+            "name": "version",
+            "text": "1.12.0"
+          }]
       }
     }
   }; }
@@ -849,13 +1032,6 @@ export class VegaInput {
       "propName": "maskConfig",
       "methodName": "watchMaskChange"
     }]; }
-  static get listeners() { return [{
-      "name": "input",
-      "method": "handleValueInput",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()