@globalpayments/vega 2.24.2 → 2.25.0

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

@@ -143,7 +143,7 @@ export class VegaGrid {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<GapType>",
-        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; M?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; L?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; XL?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; default?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: GapType; M?: GapType; L?: GapType; XL?: GapType; default?: GapType; } | { x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

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

@@ -17,7 +17,7 @@ import { ComponentLoadRequired } from '../../decorators/method-decorators/compon
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlaceholder, } from 'vega-slimmer/core';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { VegaInputCopyPasteController } from './slimmers/controllers/vega-input-copy-paste-controller';
@@ -25,6 +25,7 @@ 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';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 /**
  * @version 1.0.5
  */
@@ -74,6 +75,7 @@ export class VegaInput {
     this.changeEventEmitter = createEventEmitSlimmer(VegaInput, VegaChange);
     this.focusEventEmitter = createEventEmitSlimmer(VegaInput, VegaFocus);
     this.blurEventEmitter = createEventEmitSlimmer(VegaInput, VegaBlur);
+    this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaInput, VegaLabelButtonClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the label or title for the input field.
@@ -84,6 +86,15 @@ export class VegaInput {
      * @version 1.0.5
      */
     this.label = '';
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @version 2.25.0
+     */
+    this.labelSuffixButtonProps = null;
     /**
      * Represents a pre-set or default value for the input field.
      *
@@ -267,6 +278,9 @@ export class VegaInput {
         this.value = e.target.value;
       }
     };
+    this.handleLabelButtonClick = () => {
+      this.labelButtonClickEventEmitter.emit();
+    };
   }
   /**
    * The input component is embedded in other components.
@@ -346,7 +360,9 @@ export class VegaInput {
       this.renderHintDom()));
   }
   renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+      } }));
   }
   renderClearIcon() {
     return (h("div", { class: {
@@ -389,6 +405,30 @@ export class VegaInput {
       "reflect": false,
       "defaultValue": "''"
     },
+    "labelSuffixButtonProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "LabelSuffixButtonProps",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "references": {
+          "LabelSuffixButtonProps": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
     "value": {
       "type": "string",
       "mutable": true,
@@ -980,6 +1020,45 @@ export class VegaInput {
         "resolved": "undefined",
         "references": {}
       }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "doFocus": {
@@ -1057,6 +1136,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "labelButtonClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -215,12 +215,14 @@ export class VegaModal {
   }
   /**
    * Invoke this method to show or hide the modal.
+   *
+   * @version 1.0.6
    */
   /* The below method is e2e-test covered in
    * @see{module:vega-modal-toggle-interactive-e2e}
    */
-  /* istanbul ignore next *
-   * @version 1.0.6
+  /* istanbul ignore next
+   *
    */
   async modal(option) {
     switch (option) {
@@ -888,7 +890,10 @@ export class VegaModal {
       },
       "docs": {
         "text": "Invoke this method to show or hide the modal.",
-        "tags": []
+        "tags": [{
+            "name": "version",
+            "text": "1.0.6"
+          }]
       }
     }
   }; }

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -254,6 +254,11 @@
   }
 }
 
+@media screen and (min-width: 320px) and (max-width: 767px) {
+  :host {
+    flex: 1 1 100%;
+  }
+}
 /* vertical css in mobile */
 @media screen and (min-width: 320px) and (max-width: 767px) {
   :host .vega-progress-tracker__container {

package/dist/collection/components/vega-radio/vega-radio-group/vega-radio-group.js

@@ -267,7 +267,7 @@ export class VegaRadioGroup {
       "mutable": false,
       "complexType": {
         "original": "VegaFlexProps",
-        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<\"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\">; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
+        "resolved": "{ direction?: ResponsiveType<\"row\" | \"col\" | \"row-reverse\" | \"col-reverse\">; alignItems?: ResponsiveType<FlexAlignItemType>; gap?: ResponsiveType<GapType>; justifyContent?: ResponsiveType<FlexJustifyContentType>; margin?: ResponsiveType<MarginType>; }",
         "references": {
           "VegaFlexProps": {
             "location": "import",

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.css

@@ -6,6 +6,48 @@
 :host {
   display: inline-block;
 }
+:host .vega-error {
+  display: inline-block;
+  padding-left: 8px;
+  padding-right: 8px;
+  padding-top: 12px;
+  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;
+}
 
 div.vega-container {
   display: flex;

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.js

@@ -9,8 +9,12 @@ import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { ToggleSwitchRequiredRule } from '../../helpers/validator/rules/toggle-switch-required-rule';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../helpers/change-manager/change-manager';
 /**
  * @version 1.3.0
  */
@@ -18,24 +22,72 @@ export class VegaToggleSwitch {
   constructor() {
     this.globalSlimmers = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired ? new ToggleSwitchRequiredRule() : null,
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: false,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.toggleSwitchContainer,
+      touchableAreaGetter: () => [this.toggleSwitchContainer],
+    });
     this.changeEventEmitter = createEventEmitSlimmer(VegaToggleSwitch, VegaChange);
-    /** Specifies whether the toggle switch is in the checked state. *
+    /**
+     * Specifies whether the toggle switch is in the checked state.
+     *
      * @version 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.checked = false;
+    /**
+     * The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.
+     *
+     * @version 2.25.0
+     */
+    this.value = false;
     /**
      * Specifies the size of the toggle switch.
      *
      * @version 1.3.0
      */
     this.size = 'default';
+    /**
+     * Specifies whether the toggle switch must be checked
+     *    to pass form validation.
+     *
+     * @version 2.25.0
+     */
+    this.required = false;
     /**
      * Specifies whether the toggle switch is disabled.
      *
      * @version 1.3.0
      */
     this.disabled = false;
+    /**
+     * Defines custom validation rules for the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    this.validationRules = [];
+    /**
+     * Determines whether automatic validation should be
+     *    implemented for the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the validation status of the toggle switch.
+     *
+     * @version 2.25.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
     /**
      * The below method is e2e-test covered in
      * @see{module:vega-toggle-switch-click-on-label-e2e}
@@ -59,7 +111,21 @@ export class VegaToggleSwitch {
     };
   }
   watchCheckedChange() {
+    this.value = this.checked;
     this.changeEventEmitter.emit(this.checked);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  watchValue(newValue) {
+    this.checked = newValue === true;
+  }
+  watchValidationRules() {
+    methodPlaceholder();
+  }
+  componentWillLoad() {
+    this.value = this.checked;
   }
   render() {
     let divContainerCss = this.checked
@@ -68,7 +134,7 @@ export class VegaToggleSwitch {
     divContainerCss += this.disabled ? ' vega-container-disabled' : '';
     divContainerCss += this.size === 'small' ? ' vega-container-small-size' : '';
     return sanitizeVegaComponent(h(Host, null,
-      h("vega-flex", { gap: "size-8" },
+      h("vega-flex", { gap: "size-8", ref: (node) => (this.toggleSwitchContainer = node) },
         h("div", { class: `${divContainerCss} vega-flex-shrink-0 v-min-w-min` },
           h("input", { type: "checkbox", name: "switch", disabled: this.disabled, checked: this.checked, onChange: this.updateValue, "aria-label": this.label || 'No label defined', role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
           h("span", { class: this.disabled ? 'v-bg-tertiary' : 'v-bg-primary' })),
@@ -76,7 +142,7 @@ export class VegaToggleSwitch {
   }
   renderLabelDom() {
     return this.label ? (h("div", { class: "vega-flex-basis-0 vega-flex-grow" },
-      h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label }))) : null;
+      h("vega-field-label", { onClick: this.toggleSwitch, disabled: this.disabled, label: this.label, isFieldRequired: this.required }))) : null;
   }
   static get is() { return "vega-toggle-switch"; }
   static get encapsulation() { return "shadow"; }
@@ -102,12 +168,33 @@ export class VegaToggleSwitch {
             "name": "version",
             "text": "1.3.0"
           }],
-        "text": "Specifies whether the toggle switch is in the checked state. *"
+        "text": "Specifies whether the toggle switch is in the checked state."
       },
       "attribute": "checked",
       "reflect": true,
       "defaultValue": "false"
     },
+    "value": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked."
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -149,6 +236,27 @@ export class VegaToggleSwitch {
       "attribute": "label",
       "reflect": false
     },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies whether the toggle switch must be checked\n   to pass form validation."
+      },
+      "attribute": "required",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -167,8 +275,74 @@ export class VegaToggleSwitch {
         "text": "Specifies whether the toggle switch is disabled."
       },
       "attribute": "disabled",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
+    },
+    "validationRules": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "FormFieldValidationRule<unknown>[]",
+        "resolved": "FormFieldValidationRule<unknown>[]",
+        "references": {
+          "FormFieldValidationRule": {
+            "location": "import",
+            "path": "../../helpers/validator/rules/form-field-validation-rule"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Defines custom validation rules for the toggle switch."
+      },
+      "defaultValue": "[]"
+    },
+    "autoValidation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Determines whether automatic validation should be\n   implemented for the toggle switch."
+      },
+      "attribute": "auto-validation",
+      "reflect": true,
+      "defaultValue": "true"
+    },
+    "isValid": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "version",
+            "text": "2.25.0"
+          }],
+        "text": "Specifies the validation status of the toggle switch."
+      },
+      "attribute": "is-valid",
+      "reflect": true,
+      "defaultValue": "null"
     }
   }; }
   static get events() { return [{
@@ -215,6 +389,12 @@ export class VegaToggleSwitch {
   static get watchers() { return [{
       "propName": "checked",
       "methodName": "watchCheckedChange"
+    }, {
+      "propName": "value",
+      "methodName": "watchValue"
+    }, {
+      "propName": "validationRules",
+      "methodName": "watchValidationRules"
     }]; }
 }
 __decorate([
@@ -223,6 +403,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaToggleSwitch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaToggleSwitch.prototype, "formFieldController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaToggleSwitch.prototype, "changeEventEmitter", void 0);

package/dist/collection/constants/ui.js

@@ -79,6 +79,7 @@ export const VegaNativeEventName = [
   'retry',
   'selectedFileChange',
   'preview',
+  'labelButtonClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaLabelButtonClick, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
@@ -21,11 +21,11 @@ const entries = [
     [VegaDropdownShow, VegaDropdownHide, VegaDropdownClick, VegaCreate, VegaDropdownSearch],
   ],
   ['vega-dropdown-item', [VegaClick]],
-  ['vega-field-label', [VegaClick]],
+  ['vega-field-label', [VegaClick, VegaLabelButtonClick]],
   ['vega-file-uploader', [VegaChange, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview]],
   ['vega-form', [VegaFormSubmit, VegaFormReset, VegaValidate]],
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
-  ['vega-input', [VegaChange, VegaFocus, VegaBlur]],
+  ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
   ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -96,4 +96,5 @@ export const VegaMoreActionClick = new VegaEventID('vegaMoreActionClick', 'moreA
 export const VegaSelectFileChange = new VegaEventID('vegaSelectedFileChange', 'selectedFileChange');
 export const VegaRetry = new VegaEventID('vegaRetry', 'retry');
 export const VegaPreview = new VegaEventID('vegaPreview', 'preview');
+export const VegaLabelButtonClick = new VegaEventID('vegaLabelButtonClick', 'labelButtonClick');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur];

package/dist/collection/helpers/event-manager/test/component-event-id-map.test.js

@@ -1,8 +1,13 @@
 import { VEGA_COMPONENT_EVENT_MAP } from '../event-id/component-event-id-map';
-import { VegaBlur, VegaChange, VegaFocus } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick } from '../event-id/vega-event-id';
 test('VEGA_COMPONENT_EVENT_MAP size', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.size).not.toEqual(0);
 });
 test('VEGA_COMPONENT_EVENT_MAP vega-input', () => {
-  expect(VEGA_COMPONENT_EVENT_MAP.get('vega-input')).toEqual([VegaChange, VegaFocus, VegaBlur]);
+  expect(VEGA_COMPONENT_EVENT_MAP.get('vega-input')).toEqual([
+    VegaChange,
+    VegaFocus,
+    VegaBlur,
+    VegaLabelButtonClick,
+  ]);
 });

package/dist/collection/helpers/event-manager/test/vega-event-manager.test.js

@@ -1,5 +1,5 @@
 import { VegaEventManager } from '../../public-api';
-import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, } from '../event-id/vega-event-id';
 import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
 import { sleep } from '../../../utils/test-utils';
 describe('VegaEventManager', () => {
@@ -22,6 +22,7 @@ describe('VegaEventManager', () => {
       VegaChange,
       VegaFocus,
       VegaBlur,
+      VegaLabelButtonClick,
     ]);
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-dropdown')).toEqual([
       VegaDropdownShow,

package/dist/collection/helpers/formatter/responsive-map-formatter/responsive-gap-formatter.js

@@ -1,7 +1,11 @@
-import { isSpacingTokenType, isBreakpointsForPrefixType } from '../../../types/type-guard';
+import { isSpacingTokenType, isBreakpointsForPrefixType, isDirectionalSpacingType, } from '../../../types/type-guard';
 import { LogUtility } from '../../../utils/log';
 import { Spacing } from '../../../constants/tokens/spacing';
 import { ResponsiveClassStringFormatter } from './responsive-class-string-formatter';
+const GAP_DIRECTION_CLASS_PARTIAL_MAP = {
+  x: 'gap-col',
+  y: 'gap-row',
+};
 /**
  * A class for format GapType with BreakpointsForPrefixType to CSS class string
  *
@@ -20,6 +24,13 @@ class ResponsiveGapFormatter extends ResponsiveClassStringFormatter {
     if (isSpacingTokenType(input)) {
       return `${prefix}v-gap-${input}`;
     }
+    else if (isDirectionalSpacingType(input)) {
+      return Object.keys(input)
+        .map((direction) => {
+        return `${prefix}v-${GAP_DIRECTION_CLASS_PARTIAL_MAP[direction]}-${input[direction]}`;
+      })
+        .join(' ');
+    }
     else {
       LogUtility.warn(`The gap value ${input} is invalid, it must be a value of: `, Spacing);
       return '';

package/dist/collection/helpers/formatter/test/responsive-map-formatter/responsive-gap-formatter.ts.test.js

@@ -17,3 +17,13 @@ test('should return format when input in scope and with prefix not in scope', ()
   const result = ResponsiveGapFormatter.formatToken('size-4', 'test');
   expect(result).toEqual('v-gap-size-4');
 });
+test('should return format when input in scope and the input is object', () => {
+  let result = ResponsiveGapFormatter.formatToken({ x: 'size-12' });
+  expect(result).toEqual('v-gap-col-size-12');
+  result = ResponsiveGapFormatter.formatToken({ y: 'size-12' });
+  expect(result).toEqual('v-gap-row-size-12');
+  result = ResponsiveGapFormatter.formatToken({ y: 'size-12', x: 'size-24' });
+  expect(result).toEqual('v-gap-row-size-12 v-gap-col-size-24');
+  result = ResponsiveGapFormatter.formatToken({ y: 'size-12', x: 'size-24' }, 'L');
+  expect(result).toEqual('L:v-gap-row-size-12 L:v-gap-col-size-24');
+});