@globalpayments/vega 2.25.0 → 2.27.0

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

@@ -23,6 +23,7 @@ class VegaEventManager {
    * configuration settings for the event semantics. It may include properties such as the event type,
    * event source, event target, event data, and any other relevant information for setting up the
    * semantics of the event.
+   * @vegaVersion 2.0.0
    */
   setSemantics(config) {
     EventManager.setSemantics(config);
@@ -34,6 +35,7 @@ class VegaEventManager {
    * in the DOM (Document Object Model). It can be any valid HTML element such as a div, span, button,
    * etc.
    * @returns {EventSemantics} an object of type EventSemantics.
+   * @vegaVersion 2.0.0
    */
   getSemantics(host) {
     return EventManager.getSemantics(host);
@@ -44,6 +46,7 @@ class VegaEventManager {
    * @param {VegaComponentName} componentName - The component name,
    * etc.
    * @returns {Nullable<VegaEventID[]>} All eventIds.
+   * @vegaVersion 2.0.0
    */
   getEnabledEventIdsByComponent(componentName) {
     return EventManager.getEnabledEventIdsByComponent(componentName);

package/dist/collection/helpers/feature-control/feature-flag-controller.js

@@ -19,6 +19,7 @@ class FeatureFlagController {
    * This function enables the feature flags with the given keys.
    *
    * @param {FeatureFlagKey[]} featureFlagKeys - The feature flags to enable.
+   * @vegaVersion 1.3.0
    */
   enable(...featureFlagKeys) {
     featureFlagKeys.forEach((featureFlagKey) => {
@@ -32,6 +33,7 @@ class FeatureFlagController {
    * Disable the feature flags with the given keys.
    *
    * @param {FeatureFlagKey[]} featureFlagKeys - The feature flags to disable.
+   * @vegaVersion 1.3.0
    */
   disable(...featureFlagKeys) {
     featureFlagKeys.forEach((featureFlagKey) => {
@@ -46,6 +48,7 @@ class FeatureFlagController {
    *
    * @param {FeatureFlagKey} featureFlagKey - The feature flag key to check.
    * @returns {boolean} - True if the feature flag key is in the set of enabled feature flag keys, otherwise false.
+   * @vegaVersion 1.3.0
    */
   isEnabled(featureFlagKey) {
     return this.enabledFeatureFlagKeySet.has(featureFlagKey);

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/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-box-display-formatter.test.js

@@ -5,15 +5,27 @@ test('should console warn when input not in scope', () => {
   ResponsiveBoxDisplayFormatter.formatToken('non');
   expect(LogUtility.warn).toHaveBeenCalled();
 });
-test('should return format when input in scope', () => {
+test('should return format when input in scope as block', () => {
   const result = ResponsiveBoxDisplayFormatter.formatToken('block');
   expect(result).toEqual('v-block');
 });
-test('should return format when input in scope and with prefix', () => {
+test('should return format when input in scope as block and with prefix', () => {
   const result = ResponsiveBoxDisplayFormatter.formatToken('block', 'S');
   expect(result).toEqual('S:v-block');
 });
-test('should return format when input in scope and with prefix not in scope', () => {
+test('should return format when input in scope as block and with prefix not in scope', () => {
   const result = ResponsiveBoxDisplayFormatter.formatToken('block', 'test');
   expect(result).toEqual('v-block');
 });
+test('should return format when input in scope as inline-block', () => {
+  const result = ResponsiveBoxDisplayFormatter.formatToken('inline-block');
+  expect(result).toEqual('v-inline-block');
+});
+test('should return format when input in scope as inline-block and with prefix', () => {
+  const result = ResponsiveBoxDisplayFormatter.formatToken('inline-block', 'S');
+  expect(result).toEqual('S:v-inline-block');
+});
+test('should return format when input in scope as inline-block and with prefix not in scope', () => {
+  const result = ResponsiveBoxDisplayFormatter.formatToken('inline-block', 'test');
+  expect(result).toEqual('v-inline-block');
+});

package/dist/collection/helpers/formatter/test/style-formatter.test.js

@@ -0,0 +1,16 @@
+import { formatFlexStyles } from '../style-formatter';
+test('formatFlexStyles is working as expected', () => {
+  expect(formatFlexStyles('2 2 10%', 1, 0, '20px')).toEqual({
+    flex: '2 2 10%',
+  });
+  expect(formatFlexStyles(undefined, 1, 0, '20px')).toEqual({
+    flexGrow: '1',
+    flexShrink: '0',
+    flexBasis: '20px',
+  });
+  expect(formatFlexStyles(undefined, 1, undefined, null)).toEqual({
+    flexGrow: '1',
+    flexShrink: undefined,
+    flexBasis: undefined,
+  });
+});

package/dist/collection/helpers/icon/icon-manager.js

@@ -19,6 +19,7 @@ class IconManager {
    * Registers the icons into the map.
    *
    * @param {Record<string, string>} icons - icon records
+   * @vegaVersion 2.13.0
    */
   register(icons) {
     for (const key in icons) {
@@ -32,6 +33,7 @@ class IconManager {
    *
    * @param {string} name - The name of the icon
    * @returns {Nullable<string>} returns the icon svg or null if not found
+   * @vegaVersion 2.13.0
    */
   getIcon(name) {
     return this.icons.get(name);
@@ -41,6 +43,7 @@ class IconManager {
    *
    * @param {string} name - The name of the icon
    * @returns {boolean} returns true if the icon exists
+   * @vegaVersion 2.13.0
    */
   hasIcon(name) {
     return this.icons.has(name);

package/dist/collection/helpers/loading-indicator/vega-loader-controller.js

@@ -22,6 +22,7 @@ class VegaLoaderController {
    *
    * @param {VegaLoaderIndicatorOptions} options - VegaLoaderOptions = {} options of the method
    * @returns {string} The uuid of the loader.
+   * @vegaVersion 1.16.0
    */
   load(options = {}) {
     const containerSelector = options.containerSelector || 'body';
@@ -39,6 +40,7 @@ class VegaLoaderController {
    * Close the loader by id
    *
    * @param {string} id - The id of the loader.
+   * @vegaVersion 1.16.0
    */
   close(id) {
     const loader = this.findLoader(id);

package/dist/collection/helpers/notify/vega-notify-controller.js

@@ -40,6 +40,7 @@ class VegaNotifyController {
    *
    * @param {VegaNotifyOption} options - VegaNotifyProps
    * @returns {string} The ID of the notification.
+   * @vegaVersion 1.17.0
    */
   async open(options) {
     const pageNotification = this.createPageNotification(options);
@@ -48,6 +49,8 @@ class VegaNotifyController {
   }
   /**
    * It closes all notifications
+   *
+   * @vegaVersion 1.17.0
    */
   async closeAll() {
     this.container &&
@@ -59,12 +62,15 @@ class VegaNotifyController {
    * It closes the notification with the given id
    *
    * @param {string} id - The id of the notification to close.
+   * @vegaVersion 1.17.0
    */
   async close(id) {
     await document.getElementById(id).close();
   }
   /**
    * The function "connectResizeObserver" is used to connect a resize observer.
+   *
+   * @vegaVersion 1.17.0
    */
   connectResizeObserver() {
     methodPlaceholder();

package/dist/collection/helpers/public-api.js

@@ -13,3 +13,4 @@ export { VegaIconManager } from './icon/icon-manager';
 export { ValidCreditCardNumberRule } from './validator/rules/valid-credit-card-number-rule';
 export { waitForVega } from './common';
 export { VegaSkeletonLoader } from './skeleton-loader/vega-skeleton-loader-controller';
+export { VegaTranslation, en as VegaTranslationResourceEN } from './translation';

package/dist/collection/helpers/queue/synchronize-task-queue.js

@@ -9,12 +9,13 @@ export class SynchronizeTaskQueue {
     this.queue = [];
   }
   /**
-   * If the queue is empty, run the task immediately. Otherwise, add it to the queue
+   * If immediatelyRun is true, run the task immediately while the queue is empty. Otherwise, add it to the queue.
+   * If immediatelyRun is false, add it to the queue.
    *
    * @param {Task} item - Task - The task to be added to the queue.
    */
-  async enqueue(item) {
-    const shouldRun = this.queue.length === 0;
+  async enqueue(item, immediatelyRun = true) {
+    const shouldRun = immediatelyRun && this.queue.length === 0;
     this.queue.push(item);
     if (shouldRun) {
       await this.runTask();
@@ -25,10 +26,12 @@ export class SynchronizeTaskQueue {
    */
   async runTask() {
     const firstTask = this.queue[0];
-    await firstTask.run();
-    this.queue.shift();
-    if (this.queue.length > 0) {
-      await this.runTask();
+    if (firstTask) {
+      await firstTask.run();
+      this.queue.shift();
+      if (this.queue.length > 0) {
+        await this.runTask();
+      }
     }
   }
 }

package/dist/collection/helpers/queue/test/synchronize-task-queue.test.js

@@ -21,3 +21,28 @@ test('task queue should execute task in order as expected', async () => {
   expect(mockedTaskOne.mock.calls[0][0]).toEqual(0);
   expect(mockedTaskTwo.mock.calls[0][0]).toEqual(1);
 });
+test('task queue should not immediately execute task while immediatelyRun set to false', async () => {
+  const taskQueue = new SynchronizeTaskQueue();
+  const mockedTaskOne = jest.fn();
+  const mockedTaskTwo = jest.fn();
+  let index = 0;
+  await Promise.all([
+    taskQueue.enqueue({
+      run: async () => {
+        mockedTaskOne(index++);
+      },
+    }, false),
+    taskQueue.enqueue({
+      run: async () => {
+        mockedTaskTwo(index++);
+      },
+    }, false),
+  ]);
+  expect(mockedTaskOne).toHaveBeenCalledTimes(0);
+  expect(mockedTaskTwo).toHaveBeenCalledTimes(0);
+  await taskQueue.runTask();
+  expect(mockedTaskOne).toHaveBeenCalledTimes(1);
+  expect(mockedTaskTwo).toHaveBeenCalledTimes(1);
+  expect(mockedTaskOne.mock.calls[0][0]).toEqual(0);
+  expect(mockedTaskTwo.mock.calls[0][0]).toEqual(1);
+});

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

@@ -1,14 +1,14 @@
-import { Observer } from '../../observer/observer';
-import changeManager from '../../change-manager';
+import changeManager from '../change-manager/change-manager';
+import { Observer } from '../change-manager/observer/observer';
 /**
- * The `StaticRemoteInvocationCallRegistry` provides methods for performing remote invocation calls
+ * The `RemoteInvocationRegistry` provides methods for performing remote invocation calls
  * and registering remote invocation handlers.
  */
-export class StaticRemoteInvocationCallRegistry {
+export class RemoteInvocationRegistry {
   /**
-   * This function performs a static remote invocation call and returning the result.
+   * This function performs a remote invocation call and returning the result.
    *
-   * @param {Subject} subject - A static subject.
+   * @param {HTMLElement} subject the dom node subject
    * @param {unknown[]} args - The `args` parameter of specific method.
    * @returns {unknown} The result of call `remoteInvocation`.
    */
@@ -25,9 +25,9 @@ export class StaticRemoteInvocationCallRegistry {
     return result;
   }
   /**
-   * The function registers a static remote invocation handler.
+   * The function registers a remote invocation handler.
    *
-   * @param {Subject} subject - A static subject.
+   * @param {HTMLElement} subject the dom node subject
    * @param {Function}remoteInvocationHandler - The method that is ultimately called.
    */
   register(subject, remoteInvocationHandler) {
@@ -38,9 +38,9 @@ export class StaticRemoteInvocationCallRegistry {
     changeManager.register(subject, observer);
   }
   /**
-   * The function un-registers a static remote invocation call handler.
+   * The function un-registers a remote invocation call handler.
    *
-   * @param {Subject} subject - A static subject.
+   * @param {HTMLElement} subject the dom node subject
    */
   unRegister(subject) {
     changeManager.clearObserversBySubject(subject);
@@ -56,4 +56,4 @@ export class StaticRemoteInvocationCallRegistry {
     return true;
   }
 }
-export default new StaticRemoteInvocationCallRegistry();
+export default new RemoteInvocationRegistry();

package/dist/collection/helpers/remote-invocation/remote-invocation-registry.test.js

@@ -0,0 +1,17 @@
+import { VegaDropdownRenderItemInternalOverridden } from '../event-manager/event-id/vega-internal-event-id';
+import changeManager from '../change-manager/change-manager';
+import RemoteInvocationRegistry from '../remote-invocation/remote-invocation-registry';
+import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+test('RemoteInvocationRegistry', () => {
+  const div = document.createElement('div');
+  const length = changeManager['pubSubMap'].size;
+  const mockFun = jest.fn();
+  const subject = domNodeSubjectFactory.getSubject(div, VegaDropdownRenderItemInternalOverridden);
+  RemoteInvocationRegistry.register(subject, mockFun);
+  expect(changeManager['pubSubMap'].size).toEqual(length + 1);
+  RemoteInvocationRegistry.call(subject, 'a', 'b');
+  expect(mockFun).toBeCalledTimes(1);
+  expect(mockFun).toBeCalledWith('a', 'b');
+  RemoteInvocationRegistry.unRegister(subject);
+  expect(changeManager['pubSubMap'].size).toEqual(length);
+});

package/dist/collection/helpers/skeleton-loader/vega-skeleton-loader-controller.js

@@ -27,6 +27,7 @@ class VegaSkeletonLoaderController {
    * @param {VegaSkeletonLoaderConfig.items} config.items - Configuration for multiple skeleton items.
    * @param {VegaSkeletonLoaderConfig.layout} config.layout - Layout of the skeleton items.
    * @returns { string } - Key of the loaded skeleton items.
+   * @vegaVersion 2.16.0
    */
   load({ target, type = 'text', width, height, items, layout }) {
     const targets = Array.from(document.body.querySelectorAll(target));
@@ -50,6 +51,7 @@ class VegaSkeletonLoaderController {
    * Remove the skeletons from the dom.
    *
    * @param {string} key - The key returned from {@link VegaSkeletonLoaderController.load}.
+   * @vegaVersion 2.16.0
    */
   unLoad(key) {
     if (this.loaderMap.has(key)) {
@@ -59,6 +61,8 @@ class VegaSkeletonLoaderController {
   }
   /**
    * Remove all the skeletons from the dom.
+   *
+   * @vegaVersion 2.16.0
    */
   unLoadAll() {
     for (const items of this.loaderMap.values()) {

package/dist/collection/helpers/slimmers/field-error-ui-controller-slimmer.js

@@ -11,28 +11,33 @@ import { VegaInternalFieldErrorStateChange } from '../event-manager/event-id/veg
 import { SiblingContainerNestedErrorContainerRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-nested-error-container-retrieval-strategy';
 import { SiblingContainerSelfRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-self-retrieval-strategy';
 import { SiblingContainerErrorLabelContainerRetrievalStrategy } from './field-error-ui-controller-strategies/sibling-container-error-label-container-retrieval-strategy';
+import { VegaInternalTranslation } from '../translation';
+import { Observer } from '../change-manager/observer/observer';
+import { UPDATE_TRANSLATION } from '../change-manager/subject/static-subject/static-subject-title';
 /** 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);
+    super();
     this.fieldErrorUiControllerStrategies = [
       new SiblingContainerNestedErrorContainerRetrievalStrategy(),
       new SiblingContainerSelfRetrievalStrategy(),
       new SiblingContainerErrorLabelContainerRetrievalStrategy(),
     ];
+    this.initTranslationObserver();
   }
   /**
    * 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.
    * The ticket is https://gethired.atlassian.net/browse/VD-2508
    *
-   * @param {string} errorMessage - The error message to display.
+   * @param {EvaluateResult['message']} errorMessage - The error message to display.
    */
   applyInputInvalidUI(errorMessage) {
+    this.errorMessage = errorMessage;
     const inputContainer = this.getInputElementContainer();
     if (errorMessage && inputContainer) {
       const errorContainer = this.getErrorContainer(inputContainer);
-      errorContainer.innerHTML = errorMessage;
+      errorContainer.innerHTML = this.getTranslatedMessage(errorMessage);
       errorContainer.classList.remove('vega-hidden');
       inputContainer.classList.add('error');
       ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalFieldErrorStateChange), {
@@ -47,6 +52,7 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
    * The ticket is https://gethired.atlassian.net/browse/VD-2508
    */
   resetInputInvalidUI() {
+    this.errorMessage = '';
     const inputContainer = this.getInputElementContainer();
     if (inputContainer) {
       const errorContainer = this.getErrorContainer(inputContainer);
@@ -80,6 +86,43 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
       }
     }
   }
+  /**
+   * Translates a given message based on its type.
+   *
+   * @param {EvaluateResult['message'] | EvaluateResultTranslation['message']} message - The message to be translated, which can be a string or a TranslationMessage.
+   * @returns {string} The translated message.
+   */
+  getTranslatedMessage(message) {
+    if (typeof message === 'string') {
+      return VegaInternalTranslation.t(message);
+    }
+    return VegaInternalTranslation.t(message.key, ...(message.args || []));
+  }
+  /**
+   * Init translation observer of translation language changes
+   */
+  initTranslationObserver() {
+    const observer = new Observer(this.isAcceptableTranslationObserver.bind(this), () => {
+      if (!this.errorMessage)
+        return;
+      const inputContainer = this.getInputElementContainer();
+      if (inputContainer) {
+        const errorContainer = this.getErrorContainer(inputContainer);
+        if (errorContainer) {
+          errorContainer.innerHTML = this.getTranslatedMessage(this.errorMessage);
+        }
+      }
+    });
+    ChangeManager.register(UPDATE_TRANSLATION, observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptableTranslationObserver() {
+    return true;
+  }
 }
 __decorate([
   MapToClassField()

package/dist/collection/helpers/slimmers/global/vega-translate-observer-slimmer.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { UPDATE_TRANSLATION } from '../../change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../change-manager/change-manager';
+import { Observer } from '../../change-manager/observer/observer';
+import { forceUpdate } from '@stencil/core';
+import { VegaInternalTranslation } from '../../translation';
+/**
+ * Class responsible for observing translation updates and triggering re-renders.
+ */
+export class VegaTranslateObserverSlimmer extends VegaSlimmer {
+  constructor(option) {
+    super();
+    this.component = option.component;
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Registers an observer to watch for translation updates, which triggers a forced update on the component.
+   */
+  connectedCallback() {
+    const observer = new Observer(this.isAcceptable.bind(this), () => {
+      forceUpdate(this.component);
+    });
+    ChangeManager.register(UPDATE_TRANSLATION, observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptable() {
+    var _a;
+    const host = this.component['host'];
+    return (_a = VegaInternalTranslation.getConnectedComponents().get(host.tagName)) === null || _a === void 0 ? void 0 : _a.has(host);
+  }
+}
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaTranslateObserverSlimmer.prototype, "connectedCallback", null);

package/dist/collection/helpers/slimmers/test/translation-slimmer.test.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MockHTMLElement } from '@stencil/core/mock-doc';
+import { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { TranslationSlimmer } from '../translation';
+import { VegaInternalTranslation } from '../../translation';
+import { VegaTranslationResourceEN } from '../../public-api';
+describe('TranslationSlimmer', () => {
+  const connectedCallback = jest.fn();
+  const disconnectedCallback = jest.fn();
+  class MockedComponent {
+    constructor() {
+      this.host = new MockHTMLElement('body', 'mocked-component');
+      this.translationSlimmer = new TranslationSlimmer();
+      this.connectedCallback();
+    }
+    connectedCallback() {
+      connectedCallback();
+    }
+    disconnectedCallback() {
+      disconnectedCallback();
+    }
+    render() {
+      const mockedText = 'Mocked Text';
+      const mockedTextWithArgs = 'Mocked Text {0}';
+      return [
+        this.translationSlimmer.t('This field is required'),
+        this.translationSlimmer.t('The minimum input value is {0}', 10),
+        this.translationSlimmer.t(mockedText),
+        this.translationSlimmer.t(mockedTextWithArgs, 2),
+      ];
+    }
+  }
+  __decorate([
+    InjectVegaSlimmer()
+  ], MockedComponent.prototype, "translationSlimmer", void 0);
+  beforeEach(() => {
+    connectedCallback.mockClear();
+    disconnectedCallback.mockClear();
+    /* eslint-disable @typescript-eslint/naming-convention,spellcheck/spell-checker */
+    const resources = {
+      en: VegaTranslationResourceEN,
+      fr: {
+        'This field is required': 'Ce champ est obligatoire',
+        'The minimum input value is {0}': "La valeur minimale d'entrée est {0}",
+        'Mocked Text': 'Texte moqué',
+        'Mocked Text {0}': 'Texte moqué {0}',
+      },
+    };
+    /* eslint-enable @typescript-eslint/naming-convention,spellcheck/spell-checker */
+    VegaInternalTranslation.init({ resources, language: 'en' });
+  });
+  it('should get translated text as expected', () => {
+    const component1 = new MockedComponent();
+    expect(component1.render()).toEqual([
+      'This field is required',
+      'The minimum input value is 10',
+      'Mocked Text',
+      'Mocked Text 2',
+    ]);
+    VegaInternalTranslation.changeLanguage('fr');
+    /* eslint-disable @typescript-eslint/naming-convention,spellcheck/spell-checker */
+    expect(component1.render()).toEqual([
+      'Ce champ est obligatoire',
+      "La valeur minimale d'entrée est 10",
+      'Texte moqué',
+      'Texte moqué 2',
+    ]);
+    /* eslint-enable @typescript-eslint/naming-convention,spellcheck/spell-checker */
+    expect(VegaInternalTranslation.getConnectedComponents().get('MOCKED-COMPONENT').size).toEqual(1);
+    component1.disconnectedCallback();
+  });
+  it('should work as expected when call disconnectedCallback', () => {
+    const component1 = new MockedComponent();
+    const component2 = new MockedComponent();
+    expect(VegaInternalTranslation.getConnectedComponents().get('MOCKED-COMPONENT').size).toEqual(0);
+    component1.render();
+    expect(VegaInternalTranslation.getConnectedComponents().get('MOCKED-COMPONENT').size).toEqual(1);
+    component2.render();
+    expect(VegaInternalTranslation.getConnectedComponents().get('MOCKED-COMPONENT').size).toEqual(2);
+    component1.disconnectedCallback();
+    expect(disconnectedCallback).toBeCalledTimes(1);
+    expect(VegaInternalTranslation.getConnectedComponents().get('MOCKED-COMPONENT').size).toEqual(1);
+  });
+});

package/dist/collection/helpers/slimmers/translation/index.js

@@ -0,0 +1 @@
+export { TranslationSlimmer } from './translation-slimmer';

package/dist/collection/helpers/slimmers/translation/translation-slimmer.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalTranslation } from '../../translation';
+/**
+ * Translation slimmer for components to use.
+ * Automatically triggers re-render in components that rely on this utility when the language changes.
+ */
+export class TranslationSlimmer extends VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    VegaInternalTranslation.unRegisterComponent(this.host);
+  }
+  /**
+   * Retrieves the translated string for the given key based on the current language.
+   *
+   * @param {string} key - The key for the translation.
+   * @param {unknown[]} args - A list of values to replace in the translation string.
+   * @returns {string} The translated string or the key itself if not found.
+   */
+  t(key, ...args) {
+    VegaInternalTranslation.registerComponent(this.host);
+    return VegaInternalTranslation.t(key, ...args);
+  }
+}
+__decorate([
+  MapToComponentField()
+], TranslationSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], TranslationSlimmer.prototype, "disconnectedCallback", null);