@globalpayments/vega 2.26.0 → 2.28.0

package/dist/collection/helpers/calendar/calendar-period/week-period.js

@@ -5,9 +5,11 @@ import { CalendarDate } from '../calendar-date';
  * Period of the week
  */
 export class WeekPeriod extends CalendarPeriod {
-  constructor(current) {
+  constructor(current, showWeekends) {
     super(WeekPeriod.DISPLAY_DATE_COUNT, current);
     this._type = 'week';
+    this._showWeekends = true;
+    this._showWeekends = showWeekends === false ? false : true;
   }
   /**
    * @inheritDoc
@@ -29,7 +31,7 @@ export class WeekPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   createBy(current) {
-    return new WeekPeriod(current);
+    return new WeekPeriod(current, this._showWeekends);
   }
 }
 WeekPeriod.DISPLAY_DATE_COUNT = 7;

package/dist/collection/helpers/calendar/calendar-view-generator/month-view-generator.js

@@ -9,7 +9,8 @@ export class MonthViewGenerator extends CalendarViewGenerator {
    * @inheritDoc
    */
   generate(period) {
-    const calendarDates = [];
+    const showWeekends = period.showWeekends;
+    let calendarDates = [];
     let week = [];
     const dates = this.generateDates(period);
     dates.forEach((date, i) => {
@@ -19,6 +20,11 @@ export class MonthViewGenerator extends CalendarViewGenerator {
       const item = CalendarDate.from(date);
       week.push(item);
     });
-    return new CalendarView(this.generateWeekHead(), calendarDates);
+    let weekDays = this.generateWeekHead();
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      calendarDates = calendarDates.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, calendarDates);
   }
 }

package/dist/collection/helpers/calendar/calendar-view-generator/week-view-generator.js

@@ -10,6 +10,13 @@ export class WeekViewGenerator extends CalendarViewGenerator {
    */
   generate(period) {
     const dates = this.generateDates(period);
-    return new CalendarView(this.generateWeekHead(), [dates.map(CalendarDate.from)]);
+    const showWeekends = period.showWeekends;
+    let weekDays = this.generateWeekHead();
+    let dateItems = [dates.map(CalendarDate.from)];
+    if (showWeekends === false) {
+      weekDays = weekDays.slice(1, 6);
+      dateItems = dateItems.map((items) => items.slice(1, 6));
+    }
+    return new CalendarView(weekDays, dateItems);
   }
 }

package/dist/collection/helpers/calendar/test/calendar-period/day-period.test.js

@@ -62,4 +62,20 @@ describe('day-period', () => {
       endDate: previousDate,
     });
   });
+  it('should go to closet workday when call the now method and the showWeekend set to false', () => {
+    // Sun
+    jest.setSystemTime(new Date(2024, 10, 10));
+    const dayPeriod = new DayPeriod(undefined, false);
+    const { current } = dayPeriod.now();
+    expect(current.date).toEqual(11);
+  });
+  it('should get closet workday when call the method and the showWeekend set to false', () => {
+    //Sat
+    const calendarDate = new CalendarDate(2024, 11, 9);
+    let dayPeriod = new DayPeriod(calendarDate, false);
+    dayPeriod = dayPeriod.next();
+    expect(dayPeriod.current.date).toEqual(11);
+    dayPeriod = dayPeriod.previous();
+    expect(dayPeriod.current.date).toEqual(8);
+  });
 });

package/dist/collection/helpers/calendar/test/calendar-view-generator/month-view-generator.test.js

@@ -70,4 +70,54 @@ describe('month-view-generator', () => {
       _weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     });
   });
+  it('should generate a month view calendar without weekends', () => {
+    const generator = new MonthViewGenerator();
+    expect(generator.generate(new MonthPeriod(undefined, false))).toEqual({
+      _dateItems: [
+        [
+          { _date: 28, _month: 3, _year: 2022 },
+          { _date: 29, _month: 3, _year: 2022 },
+          { _date: 30, _month: 3, _year: 2022 },
+          { _date: 31, _month: 3, _year: 2022 },
+          { _date: 1, _month: 4, _year: 2022 },
+        ],
+        [
+          { _date: 4, _month: 4, _year: 2022 },
+          { _date: 5, _month: 4, _year: 2022 },
+          { _date: 6, _month: 4, _year: 2022 },
+          { _date: 7, _month: 4, _year: 2022 },
+          { _date: 8, _month: 4, _year: 2022 },
+        ],
+        [
+          { _date: 11, _month: 4, _year: 2022 },
+          { _date: 12, _month: 4, _year: 2022 },
+          { _date: 13, _month: 4, _year: 2022 },
+          { _date: 14, _month: 4, _year: 2022 },
+          { _date: 15, _month: 4, _year: 2022 },
+        ],
+        [
+          { _date: 18, _month: 4, _year: 2022 },
+          { _date: 19, _month: 4, _year: 2022 },
+          { _date: 20, _month: 4, _year: 2022 },
+          { _date: 21, _month: 4, _year: 2022 },
+          { _date: 22, _month: 4, _year: 2022 },
+        ],
+        [
+          { _date: 25, _month: 4, _year: 2022 },
+          { _date: 26, _month: 4, _year: 2022 },
+          { _date: 27, _month: 4, _year: 2022 },
+          { _date: 28, _month: 4, _year: 2022 },
+          { _date: 29, _month: 4, _year: 2022 },
+        ],
+        [
+          { _date: 2, _month: 5, _year: 2022 },
+          { _date: 3, _month: 5, _year: 2022 },
+          { _date: 4, _month: 5, _year: 2022 },
+          { _date: 5, _month: 5, _year: 2022 },
+          { _date: 6, _month: 5, _year: 2022 },
+        ],
+      ],
+      _weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    });
+  });
 });

package/dist/collection/helpers/calendar/test/calendar-view-generator/week-view-generator.test.js

@@ -25,4 +25,19 @@ describe('week-view-generator', () => {
       _weekdays: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
     });
   });
+  it('should generate a week view calendar without weekends', () => {
+    const generator = new WeekViewGenerator();
+    expect(generator.generate(new WeekPeriod(undefined, false))).toEqual({
+      _dateItems: [
+        [
+          { _date: 4, _month: 4, _year: 2022 },
+          { _date: 5, _month: 4, _year: 2022 },
+          { _date: 6, _month: 4, _year: 2022 },
+          { _date: 7, _month: 4, _year: 2022 },
+          { _date: 8, _month: 4, _year: 2022 },
+        ],
+      ],
+      _weekdays: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    });
+  });
 });

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.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 UPDATE_TRANSLATION = new StaticSubject('UPDATE_TRANSLATION');

package/dist/collection/helpers/common/wait-for-vega-handler.js

@@ -19,6 +19,8 @@ class WaitForVegaHandler {
    * Wait for all vega elements to be ready.
    *
    * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+   *
+   * @vegaVersion 2.8.0
    */
   async handle() {
     return await Promise.all(Array.from(document.querySelectorAll('*:not(.hydrated)'))

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

@@ -32,6 +32,7 @@ class VegaDialogController {
    *
    * @param {VegaDialogOption} options - VegaDialogOption
    * @returns {HTMLElement} The dialog reference.
+   * @vegaVersion 1.24.0
    */
   open(options) {
     const dialog = document.createElement('vega-dialog');

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/formatter/string-formatter/number-mask-strategy.js

@@ -1,3 +1,4 @@
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * A class for formatting number with the given mask format
  */
@@ -34,11 +35,12 @@ export class NumberMaskStrategy {
    * @returns {string} The formatted number string.
    */
   format(input) {
-    if (this.skipFormat(input)) {
-      return input;
+    const redressedInput = this.redressAbnormalNumber(input);
+    if (this.skipFormat(redressedInput)) {
+      return redressedInput;
     }
-    const resultStringBuilder = [...input];
-    for (let i = input.length - 1; i >= 0; i--) {
+    const resultStringBuilder = [...redressedInput];
+    for (let i = redressedInput.length - 1; i >= 0; i--) {
       const value = resultStringBuilder.join('');
       if (this.inputNeedFormat(value)) {
         resultStringBuilder.pop();
@@ -46,6 +48,19 @@ export class NumberMaskStrategy {
     }
     return resultStringBuilder.join('');
   }
+  /**
+   * Get the position of caret
+   *
+   * @param {string} input - input number
+   * @param {number} caretPosition - The current caret position
+   * @returns {number} The new position of caret
+   */
+  calculateCaretPosition(input, caretPosition) {
+    if (isNonNullable(caretPosition)) {
+      const redressedInput = this.redressAbnormalNumber(input);
+      return caretPosition - (input.length - redressedInput.length);
+    }
+  }
   /**
    * Whether the input string need delete the latest char
    *
@@ -55,6 +70,23 @@ export class NumberMaskStrategy {
   inputNeedFormat(value) {
     return !this.mask.test(value);
   }
+  /**
+   * Remove zero of beginning, example:
+   *    00012 -> 12
+   *    000.12 -> 0.12
+   *    00123,456 -> 123,456
+   *    .12 -> 0.12
+   *
+   * @param {string} input - the input value
+   * @returns {string} - redressed Number
+   */
+  redressAbnormalNumber(input) {
+    let removedZeroBeginning = input.replace(/^0+(?!$)/, '');
+    if (removedZeroBeginning.startsWith('.')) {
+      removedZeroBeginning = `0${removedZeroBeginning}`;
+    }
+    return removedZeroBeginning;
+  }
   /**
    * Get the number RegExp
    *

package/dist/collection/helpers/formatter/string-formatter/number-thousand-comma-strategy.js

@@ -18,11 +18,12 @@ export class NumberThousandCommaStrategy extends NumberMaskStrategy {
    * @returns {string} The input string, but with commas as thousands separator.
    */
   format(input) {
-    if (this.skipFormat(input)) {
-      return input;
+    const redressedInput = this.redressAbnormalNumber(input);
+    if (this.skipFormat(redressedInput)) {
+      return redressedInput;
     }
-    const resultStringBuilder = [...input];
-    for (let i = input.length - 1; i >= 0; i--) {
+    const resultStringBuilder = [...redressedInput];
+    for (let i = redressedInput.length - 1; i >= 0; i--) {
       const value = resultStringBuilder.join('');
       if (this.inputNeedFormat(value.replace(/,/g, ''))) {
         resultStringBuilder.pop();
@@ -38,12 +39,13 @@ export class NumberThousandCommaStrategy extends NumberMaskStrategy {
    * @returns {number} The new position of caret
    */
   calculateCaretPosition(input, caretPosition) {
-    const formatInput = this.format(input);
+    const redressedInput = this.redressAbnormalNumber(input);
+    const formattedInput = this.format(input);
     const oldFrontInput = input.substring(0, caretPosition);
-    const newFrontInput = formatInput.substring(0, caretPosition);
+    const newFrontInput = formattedInput.substring(0, caretPosition);
     const oldFrontCommaCount = (oldFrontInput.match(/,/g) || []).length;
     const newFrontCommaCount = (newFrontInput.match(/,/g) || []).length;
-    return caretPosition + (newFrontCommaCount - oldFrontCommaCount);
+    return (caretPosition + (newFrontCommaCount - oldFrontCommaCount) - (input.length - redressedInput.length));
   }
   /**
    * The function `thousandCommaFormat` takes a string input, removes non-numeric characters, formats the number with thousand commas, and returns the result.

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/string-formatter/number-mask-strategy.test.js

@@ -18,7 +18,9 @@ describe('numberStrategy', () => {
     expect(numberStrategy.format('-0.1')).toBe('-0.1');
     expect(numberStrategy.format('1q')).toBe('1');
     expect(numberStrategy.format('1e')).toBe('1');
-    expect(numberStrategy.format('.')).toBe('');
+    expect(numberStrategy.format('.12')).toBe('0.12');
+    expect(numberStrategy.format('0012')).toBe('12');
+    expect(numberStrategy.format('00.12')).toBe('0.12');
   });
   it('format input allow 2 decimal places', () => {
     const numberStrategy = new NumberMaskStrategy({ precision: 2 });
@@ -47,7 +49,7 @@ describe('numberStrategy', () => {
     expect(numberStrategy.format('-123.456.1.1')).toBe('-123.45');
     expect(numberStrategy.format('-123.4=')).toBe('-123.4');
     expect(numberStrategy.format('-123.4')).toBe('-123.4');
-    expect(numberStrategy.format('.')).toBe('');
+    expect(numberStrategy.format('.12')).toBe('0.12');
   });
   it('format input allow 1 decimal places', () => {
     const numberStrategy = new NumberMaskStrategy({ precision: 1 });
@@ -80,4 +82,11 @@ describe('numberStrategy', () => {
     expect(numberStrategy.format('0')).toBe('0');
     expect(numberStrategy.format('0.1')).toBe('0');
   });
+  it('calculateCaretPosition work proper', () => {
+    const numberStrategy = new NumberMaskStrategy();
+    expect(numberStrategy.calculateCaretPosition('123', 3)).toBe(3);
+    expect(numberStrategy.calculateCaretPosition('00123', 5)).toBe(3);
+    expect(numberStrategy.calculateCaretPosition('00.123', 6)).toBe(5);
+    expect(numberStrategy.calculateCaretPosition('00.123', undefined)).toBe(undefined);
+  });
 });

package/dist/collection/helpers/formatter/test/string-formatter/number-thousand-comma-mask-strategy.test.js

@@ -17,6 +17,8 @@ describe('NumberThousandCommaStrategy', () => {
     expect(numberStrategy.format('a')).toBe('');
     expect(numberStrategy.format(',')).toBe('');
     expect(numberStrategy.format('9007199254740992')).toBe('9007199254740992');
+    expect(numberStrategy.format('0012')).toBe('12');
+    expect(numberStrategy.format('00123456')).toBe('123,456');
   });
   it('should method calculateCaretPosition run as expect', () => {
     const numberStrategy = new NumberThousandCommaStrategy({

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/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);