@globalpayments/vega 2.18.0 → 2.19.0

package/dist/collection/components/vega-tab-group/vega-tab-group-panel/vega-tab-group-panel.js

@@ -15,7 +15,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 export class VegaTabGroupPanel {
   constructor() {
     this.globalSlimmers = {};
-    this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
+    this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Controls the visibility of the tab panel within the tab group.

package/dist/collection/components/vega-table/vega-table-head/vega-table-head.js

@@ -10,11 +10,14 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableHeadStateController } from './slimmers/controllers/vega-table-head-state-controller';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaChange } from '../../../helpers/event-manager/eventID/vegaEventId';
 export class VegaTableHead {
   constructor() {
     this.globalSlimmers = {};
     this.vegaTableHeadStateController = new VegaTableHeadStateController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
     /**
      * Indicates whether the table header is fixed.
      */
@@ -61,3 +64,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHead.prototype, "headCellEventPrevent", void 0);

package/dist/collection/components/vega-table/vega-table-head-row/vega-table-head-row.js

@@ -11,7 +11,7 @@ import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableHeadRowController } from './slimmers/controllers/vega-table-head-row-controller';
 import { VegaTableHeadRowStateController } from './slimmers/controllers/vega-table-head-row-state-controller';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
-import { VegaChange, VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/pageResizeObserverSlimmer';
@@ -22,7 +22,7 @@ export class VegaTableHeadRow {
     this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
     this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
     this.vegaTableHeadRowController = new VegaTableHeadRowController();
-    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaChange], () => this.host);
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();

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

@@ -31,8 +31,7 @@ export class VegaTableRowRenderer extends VegaSlimmer {
         h("div", { class: "vega-table-expand-icon-wrapper" },
           h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
     };
-    this.onRowClick = (e) => {
-      e.stopPropagation();
+    this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
     };
     this.onRowSelectionChange = (input) => {

package/dist/collection/components/vega-table/vega-table-row/vega-table-row.js

@@ -13,7 +13,7 @@ import { VegaTableRowClickController } from './slimmers/controllers/vega-table-r
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableRowStateController } from './slimmers/controllers/vega-table-row-state-controller';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/eventEmitSlimmer';
-import { VegaChange, VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaClick } from '../../../helpers/event-manager/eventID/vegaEventId';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
 import { getCurrentBreakpoint } from '../../../utils/breakpoints';
@@ -28,7 +28,7 @@ export class VegaTableRow {
     this.vegaTableRowClickController = new VegaTableRowClickController();
     this.vegaTableRowStateController = new VegaTableRowStateController();
     this.clickEventEmitter = createEventEmitSlimmer(VegaTableRow, VegaClick);
-    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClick], () => this.host);
+    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentBreakpoint = getCurrentBreakpoint();

package/dist/collection/components/vega-textarea/vega-textarea.css

@@ -107,6 +107,13 @@
   }
 }
 
+:host .vega-textarea-container.vega-textarea-not-resizable {
+  resize: none;
+}
+:host .vega-textarea-container.vega-textarea-not-resizable textarea {
+  resize: none;
+}
+
 :host vega-field-label {
   margin-bottom: 8px;
 }

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

@@ -107,12 +107,16 @@ export class VegaTextarea {
      *    that the user must enter in the text area.
      */
     this.minLength = null;
+    /**
+     * Determines whether the text area is vertically resizable.
+     */
+    this.resizable = true;
     /**
      * Specifies custom validation rules for the text area.
      */
     this.validationRules = [];
     this.renderTextareaContainer = () => {
-      return (h("div", { class: "vega-textarea-container", ref: (e) => (this.inputContainerRef = e) },
+      return (h("div", { class: { 'vega-textarea-container': true, 'vega-textarea-not-resizable': !this.resizable }, ref: (e) => (this.inputContainerRef = e) },
         h("textarea", { rows: 4, placeholder: this.placeholder, disabled: this.disabled, required: this.required, ref: this.setTextareaRef, maxLength: this.maxLength, minLength: this.minLength, value: this.value, onBlur: this.handleTextareaBlur, "aria-label": this.label || 'No label defined' }),
         this.showCounter && this.renderCharacterCounter()));
     };
@@ -398,6 +402,24 @@ export class VegaTextarea {
       "reflect": true,
       "defaultValue": "null"
     },
+    "resizable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the text area is vertically resizable."
+      },
+      "attribute": "resizable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-time-picker/vega-time-picker.css

@@ -67,7 +67,7 @@ vega-input::part(field-error-message) {
 }
 
 .vega-time-picker-input-container.error vega-input::part(input-container):focus-within {
-  box-shadow: 0 0 0 0;
+  outline: none;
 }
 
 .vega-time-picker-input-container.error {
@@ -80,8 +80,9 @@ vega-input::part(field-error-message) {
 }
 
 .vega-time-picker-input-container.error:focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 .vega-hidden {
@@ -135,7 +136,9 @@ vega-input::part(field-error-message) {
 
 .range-mode:not(.error) .time-picker-input-start vega-input::part(input-container):focus-within,
 .range-mode:not(.error) .time-picker-input-end vega-input::part(input-container):focus-within {
-  @apply v-border-input-field-focus;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   margin: -1px;
 }
 

package/dist/collection/constants/runtime-metrics-payload-definition/vega-input-select/runtime-metrics-payload-definition.js

@@ -23,4 +23,28 @@ export const VegaInputSelectRuntimeMetricsPayloadDefinition = [
      */
     payloadValue: (host) => host.autoValidation === false,
   },
+  {
+    payloadKey: 'IS_USING_TEMPLATE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the input select',
+    /**
+     * The function checks if the length `source` property of the `host` element is equal to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length === 0,
+  },
+  {
+    payloadKey: 'IS_USING_DATA_SOURCE',
+    payloadDescription: 'Contains the data records to be rendered and displayed within the input select',
+    /**
+     * The function checks if the length `source` property of the `host` element is greater than to '0'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.source.length > 0,
+  },
 ];

package/dist/collection/helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry.js

@@ -0,0 +1,59 @@
+import { Observer } from '../../observer/observer';
+import changeManager from '../../changeManager';
+/**
+ * The `StaticRemoteInvocationCallRegistry` provides methods for performing remote invocation calls
+ * and registering remote invocation handlers.
+ */
+export class StaticRemoteInvocationCallRegistry {
+  /**
+   * This function performs a static remote invocation call and returning the result.
+   *
+   * @param {Subject} subject - A static subject.
+   * @param {unknown[]} args - The `args` parameter of specific method.
+   * @returns {unknown} The result of call `remoteInvocation`.
+   */
+  staticRemoteInvocationCall(subject, ...args) {
+    let result = null;
+    changeManager.notify(subject, {
+      args,
+      resultCallback: 
+      /* eslint-disable jsdoc/require-jsdoc */
+      (response) => {
+        result = response;
+      },
+    });
+    return result;
+  }
+  /**
+   * The function registers a static remote invocation handler.
+   *
+   * @param {Subject} subject - A static subject.
+   * @param {Function}remoteInvocationHandler - The method that is ultimately called.
+   */
+  staticRegisterRemoteInvocationCallHandler(subject, remoteInvocationHandler) {
+    const observer = new Observer(this.isAcceptableObserver.bind(this), (payload) => {
+      const result = remoteInvocationHandler(...payload.args);
+      payload.resultCallback(result);
+    });
+    changeManager.register(subject, observer);
+  }
+  /**
+   * The function un-registers a static remote invocation call handler.
+   *
+   * @param {Subject} subject - A static subject.
+   */
+  unRegisterRemoteInvocationCallHandler(subject) {
+    changeManager.clearObserversBySubject(subject);
+  }
+  /**
+   * The function isAcceptableObserver checks if the input matches a specified type T.
+   *
+   * @param {unknown} _input - The `_input` parameter is of type `unknown`, which means it can hold any
+   * value.
+   * @returns {boolean} The `isAcceptableObserver` function is returning `true`.
+   */
+  isAcceptableObserver(_input) {
+    return true;
+  }
+}
+export default new StaticRemoteInvocationCallRegistry();

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

@@ -23,3 +23,4 @@ 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');

package/dist/collection/helpers/change-manager/test/static-remote-invocation-subject.test.js

@@ -0,0 +1,14 @@
+import changeManager from '../changeManager';
+import RemoteInvocationCallRegistry from '../subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../subject/static-subject/staticSubjectTitle';
+test('StaticRemoteInvocationCallRegistry', () => {
+  const length = changeManager['pubSubMap'].size;
+  const mockFun = jest.fn();
+  RemoteInvocationCallRegistry.staticRegisterRemoteInvocationCallHandler(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, mockFun);
+  expect(changeManager['pubSubMap'].size).toEqual(length + 1);
+  RemoteInvocationCallRegistry.staticRemoteInvocationCall(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, 'a', 'b');
+  expect(mockFun).toBeCalledTimes(1);
+  expect(mockFun).toBeCalledWith('a', 'b');
+  RemoteInvocationCallRegistry.unRegisterRemoteInvocationCallHandler(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN);
+  expect(changeManager['pubSubMap'].size).toEqual(length);
+});

package/dist/collection/helpers/event-manager/eventID/componentEventIdMap.js

@@ -43,6 +43,7 @@ const entries = [
   ['vega-segment-control', [VegaChange]],
   ['vega-selection-tile', [VegaChange]],
   ['vega-selection-tile-group', [VegaChange]],
+  ['vega-signature-capture', [VegaChange]],
   ['vega-stepper', [VegaChange]],
   ['vega-tab-group', [VegaClick]],
   ['vega-table', [VegaChange, VegaSelectChange, VegaSelectAllChange, VegaRowClick]],

package/dist/collection/helpers/event-manager/slimmers/childNodesEventPreventSlimmer.js

@@ -8,6 +8,8 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import InternalVegaEventManager from '../internalVegaEventManager';
 import jqueryDelegatedStrategyController from '../event-delegated/jqueryDelegatedStrategyController';
 import internalVegaEventManager from '../internalVegaEventManager';
+import vegaEnvManager from '../../vega-telemetry-helper/vegaEnvManager';
+import { FeatureFlag } from '../../feature-control/featureFlagController';
 /** The ChildNodesEventPreventSlimmer class prevents specified events from propagating to parent elements. */
 export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   /**
@@ -16,13 +18,15 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
    * @param {VegaEventID[]} eventIds - The eventNames parameter is an array of VegaEventID that represents the names of the events that will be handled by the constructor.
    * @param {HTMLElement} getHostElement - The `getHostElement` parameter is a function that returns an `HTMLElement`. It is used to get the parent element where the events will be attached.
    * @param {boolean | EventPreventOptions} options - add event listener in capture or bubbles.
+   * @param {boolean | EventPreventOptions} needSkipByDefault - should skip event prevent by default
    */
-  constructor(eventIds, getHostElement, options) {
+  constructor(eventIds, getHostElement, options, needSkipByDefault) {
     super();
     // the event names need prevent from child nodes
     this.eventIds = [];
     this.useCapture = false;
     this.isEventListenerAdded = false;
+    this.disabled = false;
     /**
      * prevent the child event
      *
@@ -53,6 +57,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
       this.useCapture = useCapture;
       this.customPreventHandle = customPreventHandle;
     }
+    this.disabled = needSkipByDefault === true ? true : false;
   }
   /**
    * add event listener when component connected, we can call the method manually if the host element not ready when connectedCallback
@@ -67,6 +72,7 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
     if (!this.isEventListenerAdded) {
       this.setup();
     }
+    this.setSkipEventPreventFlag();
   }
   /**
    * remove the event listener when component disconnect
@@ -74,6 +80,19 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
   destroy() {
     this.addOrRemoveEventListener('remove');
   }
+  /**
+   * The function `setSkipEventPreventFlag` sets a flag on a host element to skip event prevention under certain conditions.
+   */
+  setSkipEventPreventFlag() {
+    if (FeatureFlag.isEnabled('VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT') &&
+      this.disabled &&
+      this.host &&
+      vegaEnvManager.getVegaEnv().framework === 'react' &&
+      internalVegaEventManager.getSemantics(this.host).namespace === 'native') {
+      const el = this.getHostElement();
+      el.setAttribute('data-vega-no-event-prevent', 'true');
+    }
+  }
   /**
    * add or remove the event from the parent element
    *

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

@@ -9,6 +9,9 @@ import { InjectVegaSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { ChildNodesEventPreventSlimmer } from '../slimmers/childNodesEventPreventSlimmer';
 import { VegaChange, VegaClick, VegaValidate } from '../eventID/vegaEventId';
 import InternalVegaEventManager from '../internalVegaEventManager';
+import internalVegaEventManager from '../internalVegaEventManager';
+import vegaEnvManager from '../../vega-telemetry-helper/vegaEnvManager';
+import { FeatureFlag } from '../../publicApi';
 describe('ChildNodesEventPreventSlimmer', () => {
   class MockedSlimmer {
     constructor() {
@@ -27,6 +30,23 @@ describe('ChildNodesEventPreventSlimmer', () => {
   __decorate([
     InjectVegaSlimmer()
   ], MockedSlimmer.prototype, "slimmer", void 0);
+  class TestComponent {
+    constructor() {
+      this.slimmer = new ChildNodesEventPreventSlimmer([VegaClick], () => this.parentElement, true, true);
+    }
+    connectedCallback() {
+      methodPlaceholder();
+    }
+    disconnectedCallback() {
+      methodPlaceholder();
+    }
+    componentDidLoad() {
+      methodPlaceholder();
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], TestComponent.prototype, "slimmer", void 0);
   class MockedComponent {
     constructor() {
       this.slimmer = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
@@ -121,6 +141,23 @@ describe('ChildNodesEventPreventSlimmer', () => {
     host.querySelector('span').dispatchEvent(new CustomEvent('vegaClick', { bubbles: true, cancelable: true }));
     expect(mockListener).toBeCalledTimes(2);
   });
+  test('should set skip flag when framework is react and event namespace is native', () => {
+    const mockedComponent = new TestComponent();
+    const host = document.createElement('div');
+    mockedComponent.host = host;
+    host.innerHTML = `<p><span></span></p>`;
+    mockedComponent.parentElement = host.querySelector('p');
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    spyOn(internalVegaEventManager, 'getSemantics').and.returnValue({ namespace: 'native' });
+    spyOn(vegaEnvManager, 'getVegaEnv').and.returnValue({ framework: 'react' });
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.hasAttribute('data-vega-no-event-prevent')).toBeFalsy();
+    FeatureFlag.enable('VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT');
+    mockedComponent.componentDidLoad();
+    expect(mockedComponent.parentElement.getAttribute('data-vega-no-event-prevent')).toEqual('true');
+  });
 });
 describe('shadow dom', () => {
   class MockedShadowComponent {

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -162,7 +162,13 @@ const FeatureFlagsMap = {
   'VEGA_BANNER_DEPRECATED_ACTION_BUTTON_PROP_VEGA_CLICK': {
     description: `Feature flag to deprecated the vega-banner component property actionButtons property vegaClick`,
     createdTimestamp: 1723449433833,
-    createdAtVersion: '2.20.0',
+    createdAtVersion: '2.18.0',
+  },
+  'VEGA_REACT.SKIP_NATIVE_EVENT_PREVENT_BY_DEFAULT': {
+    description: `Feature flag to skip the native event prevent logic in default`,
+    createdTimestamp: 1723996800000,
+    createdAtVersion: '2.18.1',
+    disabledByDefault: true,
   },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/slimmers/fieldErrorUiControllerSlimmer.js

@@ -8,8 +8,19 @@ import { MapToComponentField as MapToClassField, VegaSlimmer } from 'vega-slimme
 import ChangeManager from '../change-manager/changeManager';
 import DomNodeSubjectFactory from '../change-manager/subject/dom-node-subject/domNodeSubjectFactory';
 import { VegaInternalFieldErrorStateChange } from '../event-manager/eventID/vegaInternalEventId';
+import { SiblingContainerNestedErrorContainerRetrievalStrategy } from './fieldErrorUiControllerStrategies/siblingContainerNestedErrorContainerRetrievalStrategy';
+import { SiblingContainerSelfRetrievalStrategy } from './fieldErrorUiControllerStrategies/siblingContainerSelfRetrievalStrategy';
+import { SiblingContainerErrorLabelContainerRetrievalStrategy } from './fieldErrorUiControllerStrategies/siblingContainerErrorLabelContainerRetrievalStrategy';
 /** The `FieldErrorUIControllerSlimmer` class is responsible for displaying error messages and managing the invalid UI state of a form field. */
 export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.fieldErrorUiControllerStrategies = [
+      new SiblingContainerNestedErrorContainerRetrievalStrategy(),
+      new SiblingContainerSelfRetrievalStrategy(),
+      new SiblingContainerErrorLabelContainerRetrievalStrategy(),
+    ];
+  }
   /**
    * It takes an error message and displays it in the error container.
    * TODO: Each component displays the error message and puts it in the code of the respective component.
@@ -62,16 +73,12 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
    * @returns {HTMLElement} The error container.
    */
   getErrorContainer(inputContainer) {
-    var _a;
-    let siblingContainer = inputContainer.nextSibling;
-    if (!siblingContainer || !((_a = siblingContainer.classList) === null || _a === void 0 ? void 0 : _a.contains('vega-error'))) {
-      siblingContainer = document.createElement('label');
-      siblingContainer.classList.add('vega-error');
-      // vega-table needs to hide error content.
-      siblingContainer.setAttribute('part', 'field-error-message');
-      inputContainer.after(siblingContainer);
+    for (const strategy of this.fieldErrorUiControllerStrategies) {
+      const errorContainer = strategy.run(inputContainer);
+      if (errorContainer) {
+        return errorContainer;
+      }
     }
-    return siblingContainer;
   }
 }
 __decorate([

package/dist/collection/helpers/slimmers/fieldErrorUiControllerStrategies/siblingContainerErrorLabelContainerRetrievalStrategy.js

@@ -0,0 +1,25 @@
+/** This class defines a strategy for retrieving or creating a sibling container element. */
+export class SiblingContainerErrorLabelContainerRetrievalStrategy {
+  /**
+   * The function creates a sibling container element next to the input container if it doesn't
+   * already exist.
+   *
+   * @param {HTMLElement} inputContainer - This function retrieves the next sibling element of the
+   * `inputContainer` element. If the next sibling element does not exist, it creates a new `<label>`
+   * element with the class `vega-error`,
+   * @returns {HTMLElement} the `siblingContainer` element, which is either the next sibling element of the
+   * `inputContainer` or a newly created `<label>` element with the class `vega-error` and the
+   * attribute `part="field-error-message"` if no sibling element exists.
+   */
+  run(inputContainer) {
+    let siblingContainer = inputContainer.nextElementSibling;
+    if (!siblingContainer) {
+      siblingContainer = document.createElement('label');
+      siblingContainer.classList.add('vega-error');
+      // vega-table needs to hide error content.
+      siblingContainer.setAttribute('part', 'field-error-message');
+      inputContainer.after(siblingContainer);
+    }
+    return siblingContainer;
+  }
+}

package/dist/collection/helpers/slimmers/fieldErrorUiControllerStrategies/siblingContainerNestedErrorContainerRetrievalStrategy.js

@@ -0,0 +1,19 @@
+/** This class retrieves a specific error container element nested within a sibling container of a given input element. */
+export class SiblingContainerNestedErrorContainerRetrievalStrategy {
+  /**
+   * The function searches for an element with the class 'vega-error' in the next sibling of the
+   * inputContainer and returns it if found.
+   *
+   * @param {HTMLElement} inputContainer - The `inputContainer` parameter is an HTMLElement that
+   * represents the container element containing some input element.
+   * @returns { Nullable<HTMLElement>} An HTMLElement with the class 'vega-error' that is a sibling of the inputContainer, if
+   * it exists. Otherwise, null is returned.
+   */
+  run(inputContainer) {
+    const siblingContainer = inputContainer.nextElementSibling;
+    if (siblingContainer && siblingContainer.querySelector('.vega-error')) {
+      return siblingContainer.querySelector('.vega-error');
+    }
+    return null;
+  }
+}

package/dist/collection/helpers/slimmers/fieldErrorUiControllerStrategies/siblingContainerSelfRetrievalStrategy.js

@@ -0,0 +1,23 @@
+/** The class retrieves the next sibling element of an input container and creates a new error label if it does not already exist. */
+export class SiblingContainerSelfRetrievalStrategy {
+  /**
+   * The function adds an error message container next to the input container if it doesn't already exist.
+   *
+   * @param {HTMLElement} inputContainer - The `inputContainer` parameter is an HTMLElement that
+   * represents the container element of an input field in the HTML document.
+   * @returns {HTMLElement} the `siblingContainer` HTMLElement that was either found as the next sibling of the
+   * `inputContainer` or created as a new `label` element with the class `vega-error` if it didn't
+   * exist before.
+   */
+  run(inputContainer) {
+    let siblingContainer = inputContainer.nextElementSibling;
+    if (siblingContainer && !siblingContainer.classList.contains('vega-error')) {
+      siblingContainer = document.createElement('label');
+      siblingContainer.classList.add('vega-error');
+      // vega-table needs to hide error content.
+      siblingContainer.setAttribute('part', 'field-error-message');
+      inputContainer.after(siblingContainer);
+    }
+    return siblingContainer;
+  }
+}

package/dist/collection/helpers/slimmers/test/componentUsageRuntimeMetrics.test.js

@@ -55,20 +55,22 @@ describe('VegaComponentUsageRuntimeMetricsSlimmer', () => {
     jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
     const component = new MockedComponentTwo();
     component.componentDidRender();
-    await sleep(100);
-    expect(VegaTelemetryRuntimeMetricsManager.emit).not.toBeCalled();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).not.toBeCalled();
+    });
   });
   it('should send component usage to telemetry', async () => {
     jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
     const component = new MockedComponent();
     component.componentDidRender();
-    await sleep(100);
-    expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('componentUsage', {
-      componentName: 'MOCKED-COMPONENT',
-      data: {
-        COMPONENT_USED: true,
-        VARIANT_IS_PRIMARY: false,
-      },
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('componentUsage', {
+        componentName: 'MOCKED-COMPONENT',
+        data: {
+          COMPONENT_USED: true,
+          VARIANT_IS_PRIMARY: false,
+        },
+      });
     });
   });
 });

package/dist/collection/helpers/validator/test/validator/formFieldController.test.js

@@ -115,12 +115,12 @@ test('should call notify times as expect when has async validation rule', async
   const mockHandleNotify = jest.fn();
   const fieldPendingValidObserver = new Observer(mockCanAcceptNotify.bind(null), mockHandleNotify);
   changeManager.register(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
-  void valid.validate(true);
-  await valid.validate(true);
-  expect(mockHandleNotify).toBeCalledTimes(3);
-  expect(mockHandleNotify).toHaveBeenCalledWith({ detail: null, host: container });
-  expect(mockHandleNotify).toHaveBeenCalledWith({ detail: false, host: container });
-  changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+  void Promise.resolve(valid.validate(true)).then(async () => {
+    expect(mockHandleNotify).toBeCalledTimes(3);
+    expect(mockHandleNotify).toHaveBeenCalledWith({ detail: null, host: container });
+    expect(mockHandleNotify).toHaveBeenCalledWith({ detail: false, host: container });
+    changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+  });
 });
 test('should get expect result when async validation success', async () => {
   const container = document.createElement('div');
@@ -156,9 +156,10 @@ test('should get expect result when async validation success', async () => {
   const mockHandleNotify = jest.fn();
   const fieldPendingValidObserver = new Observer(mockCanAcceptNotify.bind(null), mockHandleNotify);
   changeManager.register(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
-  await valid.validate(true);
-  expect(mockHandleNotify).toHaveBeenCalledWith({ detail: true, host: container });
-  changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+  void Promise.resolve(valid.validate(true)).then(async () => {
+    expect(mockHandleNotify).toHaveBeenCalledWith({ detail: true, host: container });
+    changeManager.unregister(FORM_FIELD_PENDING_VALID_CHANGE, fieldPendingValidObserver);
+  });
 });
 test('validation should return true when options set undefined and validation set empty', async () => {
   const container = document.createElement('vega-input');

package/dist/collection/helpers/vega-telemetry-helper/test/vegaEnvManager.test.js

@@ -4,7 +4,7 @@ test('should return the correct vega environment parameters', () => {
   const vegaEnv = VegaEnvManager.getVegaEnv();
   expect(vegaEnv).toEqual({
     framework: 'vanilla-js',
-    version: '2.18.0',
+    version: '2.19.0',
   });
 });
 test('should return the correct vega framework', () => {

package/dist/collection/helpers/vega-telemetry-helper/vegaEnvManager.js

@@ -9,9 +9,9 @@ export var FrameworkEnum;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.18.0` will be replaced to a version string when running publish script.
+    // The `2.19.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.18.0';
+    this.vegaVersion = '2.19.0';
     this.framework = FrameworkEnum.VanillaJs;
   }
   /**