@globalpayments/vega 2.24.2 → 2.26.0

package/dist/collection/components/vega-table/vega-table-row/slimmers/controllers/vega-table-row-expand-controller.js

@@ -10,7 +10,7 @@ import { TABLE_EXPAND_ROW } from '../../../../../helpers/change-manager/subject/
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import { isAcceptableTableObserver } from '../../../type-guard';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaInternalTableRowExpand } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The row expand controller for expandable table row.
@@ -32,7 +32,7 @@ export class VegaTableRowExpandController extends VegaSlimmer {
    * The handler for expand icon click event.
    */
   handleExpandIconClick() {
-    const rowExpandEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowExpand), {
+    const rowExpandEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), VegaInternalTableRowExpand), {
       host: this.host,
       rowKey: this.rowKey,
       expanded: !this.expanded,

package/dist/collection/components/vega-table/vega-table-row/slimmers/renderers/vega-table-row-renderer.js

@@ -10,7 +10,7 @@ import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-man
 import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import chevronDown from '../../../../../global/icons/chevron-down';
-import staticRemoteInvocationCallRegistry from '../../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalTableRowSelect } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { findParent } from '../../../../../utils/ui';
@@ -45,7 +45,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
     };
     this.handleClick = (e) => {
       e.stopPropagation();
-      const rowSelectEvent = staticRemoteInvocationCallRegistry.call(domNodeSubjectFactory.getSubject(this.parentTableRef, VegaInternalTableRowSelect), {
+      const rowSelectEvent = remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.parentTableRef, VegaInternalTableRowSelect), {
         host: this.host,
         rowKey: this.rowKey,
         checked: !this.checked,

package/dist/collection/components/vega-text/slimmers/renderers/vega-text-tooltip-renderer.js

@@ -45,6 +45,7 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
           this.tooltipRef.remove();
           this.tooltipRef = null;
         }
+        this.host.style.minWidth = 'auto';
       }
     };
     /**
@@ -73,18 +74,24 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
      * @see{module:vega-text-with-long-text}
      * @see{module:vega-text-with-long-text-change-screen-size}
      * @see{module:vega-text-with-long-text-minimize-screen-size}
+     * @see{module:vega-text-with-long-text-minimize-screen-safari}
      */
     /* istanbul ignore next */
     this.updateTooltipDisplayText = async () => {
       let fontSize = parseFloat(getElementComputedStyle(this.host, 'font-size'));
       fontSize = isNaN(fontSize) ? VegaTextTooltipRenderer.DEFAULT_FONT_SIZE : fontSize;
-      let textLength = Math.floor(this.host.getBoundingClientRect().width / Math.floor(fontSize / 2));
+      const textLength = Math.floor(this.host.getBoundingClientRect().width / Math.floor(fontSize / 2));
       if (isTextWrapped(this.tooltipRef)) {
-        while (isTextWrapped(this.tooltipRef)) {
-          if (textLength > 1) {
-            textLength = textLength - 1;
+        for (let i = textLength; i >= 1; i--) {
+          this.tooltipRef.textContent = this.truncateStringWithEllipsis(i);
+          if (!isTextWrapped(this.tooltipRef)) {
+            break;
+          }
+          if (i <= 1) {
+            // Set min-width to fix the safari wrap issue when the default width is already wrapped.
+            this.insertMinWidthStyle();
+            break;
           }
-          this.tooltipRef.textContent = this.truncateStringWithEllipsis(textLength);
         }
       }
     };
@@ -120,6 +127,23 @@ export class VegaTextTooltipRenderer extends PageResizeObserverSlimmer {
       this.tooltipRef.placement = (_a = this.tooltip) === null || _a === void 0 ? void 0 : _a.placement;
     }
   }
+  /**
+   * Dynamically calculates and sets the minimum width of an element based on the content inside a hidden placeholder element.
+   * The below method is e2e-test covered in
+   * @see{module:vega-text-with-long-text-minimize-screen-safari}
+   */
+  /* istanbul ignore next */
+  insertMinWidthStyle() {
+    let placeholder = this.host.shadowRoot.querySelector('#min-width-placeholder');
+    if (!placeholder) {
+      placeholder = document.createElement('span');
+      placeholder.id = 'min-width-placeholder';
+      placeholder.style.cssText = 'position:absolute; visibility:hidden; word-break:keep-all;';
+      this.host.shadowRoot.appendChild(placeholder);
+    }
+    placeholder.textContent = this.truncateStringWithEllipsis(1);
+    this.host.style.minWidth = placeholder.getBoundingClientRect().width + 'px';
+  }
 }
 VegaTextTooltipRenderer.DEFAULT_FONT_SIZE = 16;
 __decorate([

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/change-manager/subject/dom-node-subject/dom-node-subject-factory.js

@@ -1,8 +1,9 @@
 import { DomNodeSubject } from './dom-node-subject';
+import { isParent } from '../../../../utils/ui';
 /** The `DomNodesSubjectFactory` class is responsible for managing and caching `DomNodeSubject` objects associated with HTML elements. */
 class DomNodeSubjectFactory {
   constructor() {
-    this.cache = new WeakMap();
+    this.cache = new Map();
   }
   /**
    * The function `getSubject` returns the subject associated with a given node and event ID, either from the cache or by setting it if it doesn't exist.
@@ -34,6 +35,23 @@ class DomNodeSubjectFactory {
     }
     return false;
   }
+  /**
+   * The function find if the parent of a given node exists in the cache and if it has a specific event ID.
+   *
+   * @param {HTMLElement} childNode - Child node.
+   * @param {VegaEventIDInterface} eventId - eventId.
+   * @returns {DomNodeSubject} - Parent node subject.
+   */
+  getSubjectFromParentNodeByEventId(childNode, eventId) {
+    let subject;
+    for (const entry of this.cache) {
+      if (isParent(childNode, entry[0]) && entry[1].has(eventId)) {
+        subject = entry[1].get(eventId);
+        break;
+      }
+    }
+    return subject;
+  }
   /**
    * The function `setSubject` creates a new `DomNodeSubject` and associates it with a given `node` and `eventId`, and then returns the created subject.
    *

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -23,5 +23,3 @@ export const FORM_ELEMENT_VALIDATE = new StaticSubject('FORM_EMEMENT_VALIDATE');
 export const FIELD_ERROR_STATE_CHANGE = new StaticSubject('FIELD_ERROR_STATE_CHANGE');
 export const VEGA_VIRTUAL_SCROLL_TO_BOTTOM = new StaticSubject('VEGA_VIRTUAL_SCROLL_TO_BOTTOM');
 export const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');
-export const DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN');
-export const DROPDOWN_SEARCH_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_SEARCH_INTERNAL_OVERRIDEN');

package/dist/collection/helpers/change-manager/test/dom-node-subject-factory.test.js

@@ -12,6 +12,18 @@ test('domNodesSubjectFactory', () => {
   expect(divSubject.getDescription()).toEqual(`, this is a dom nodes subject of ${div.tagName}:${VegaClick.getVegaName()}.(class name:test, id:)`);
   expect(domNodesSubjectFactory['isExist'].call(null, null)).toBeFalsy();
 });
+test('domNodesSubjectFactory getSubjectFromParentNodeByEventId', () => {
+  const parent = document.createElement('div');
+  parent.className = 'parent';
+  const child = document.createElement('div');
+  child.className = 'child';
+  parent.append(child);
+  const parentSubject = domNodesSubjectFactory.getSubject(parent, VegaClick);
+  expect(parentSubject).not.toBeNull();
+  expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(child, VegaClick)).toEqual(parentSubject);
+  const element = document.createElement('div');
+  expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(element, VegaClick)).toEqual(undefined);
+});
 test('addUniqueObserverToNode', () => {
   const div = document.createElement('div');
   const length = changeManager['pubSubMap'].size;

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/event-id/vega-internal-event-id.js

@@ -29,3 +29,5 @@ export const VegaInternalDropdownTemplateItemsChange = new VegaInternalEventID('
 export const VegaInternalTableRowSelect = new VegaInternalEventID('tableRowSelect');
 export const VegaInternalTableRowSelectAll = new VegaInternalEventID('tableRowSelectAll');
 export const VegaInternalTableRowExpand = new VegaInternalEventID('tableRowExpand');
+export const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID('dropdownRenderItemInternalOverridden');
+export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');

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/feature-control/feature-flags-map.js

@@ -175,5 +175,10 @@ const FeatureFlagsMap = {
     createdTimestamp: 1727232497961,
     createdAtVersion: '2.21.0',
   },
+  'VEGA_LEFT_NAV.DISABLE_ANIMATION_ON_LOAD': {
+    description: `Feature flag that disables the transition animation of the left nav.`,
+    createdTimestamp: 1730361348399,
+    createdAtVersion: '2.26.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

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/style-formatter.js

@@ -0,0 +1,29 @@
+import { isNonNullable } from '../../types/type-guard';
+import responsiveFormatFacade from './responsive-map-formatter/responsive-format-facade';
+/**
+ * Fomatter flex styles.
+ *
+ * @param {Nullable<ResponsiveType<FlexType>>} flex - flex
+ * @param {Nullable<ResponsiveType<FlexGrowType>>} flexGrow - flex-grow
+ * @param {Nullable<ResponsiveType<FlexShrinkType>>} flexShrink - flex-shrink
+ * @param {Nullable<ResponsiveType<FlexBasisType>>} flexBasis - flex-basis
+ * @returns {object} - formatted styles
+ */
+export function formatFlexStyles(flex, flexGrow, flexShrink, flexBasis) {
+  if (isNonNullable(flex)) {
+    return { flex: `${responsiveFormatFacade.formatCustom(flex)}` };
+  }
+  else {
+    return {
+      flexGrow: isNonNullable(flexGrow)
+        ? `${responsiveFormatFacade.formatCustom(flexGrow)}`
+        : undefined,
+      flexShrink: isNonNullable(flexShrink)
+        ? `${responsiveFormatFacade.formatCustom(flexShrink)}`
+        : undefined,
+      flexBasis: isNonNullable(flexBasis)
+        ? `${responsiveFormatFacade.formatCustom(flexBasis)}`
+        : undefined,
+    };
+  }
+}

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');
+});