@globalpayments/vega 2.25.0 → 2.27.0

package/dist/esm/{min-string-length-rule-27a8ba07.js → min-string-length-rule-c6a69eeb.js}

@@ -18,7 +18,7 @@ class MaxStringLengthRule {
    * It checks if the input is a string and if it's shorter than the maximum string length
    *
    * @param {string} input - string
-   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    * @throws {Error} if input is unable to evaluate
    */
   evaluate(input) {
@@ -29,7 +29,9 @@ class MaxStringLengthRule {
     const maxStrLength = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.maxStrLength) || Number.MAX_VALUE;
     return {
       isValid: input.length <= maxStrLength,
-      message: input.length <= maxStrLength ? '' : `The maximum input length is ${maxStrLength}`,
+      message: input.length <= maxStrLength
+        ? ''
+        : { key: 'The maximum input length is {0}', args: [maxStrLength] },
     };
   }
   /**
@@ -84,7 +86,7 @@ class MinStringLengthRule {
    * It checks if the input is a string and if it's longer than the minimum string length
    *
    * @param {string} input - string
-   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    * @throws {Error} if input is unable to evaluate
    */
   evaluate(input) {
@@ -95,7 +97,12 @@ class MinStringLengthRule {
     const minStrLength = ((_a = this.config) === null || _a === void 0 ? void 0 : _a.minStrLength) || 0;
     return {
       isValid: input.length >= minStrLength,
-      message: input.length >= minStrLength ? '' : `The minimum input length is ${minStrLength}`,
+      message: input.length >= minStrLength
+        ? ''
+        : {
+          key: 'The minimum input length is {0}',
+          args: [minStrLength],
+        },
     };
   }
   /**

package/dist/esm/observer-3959f9dd.js

@@ -0,0 +1,30 @@
+/**
+ *  An Observer is a class that has a listener method that accepts a value of type T
+ *  and calls the listener method with a value of type T
+ */
+class Observer {
+  /**
+   * It accepts a function that accepts a value and returns a boolean, and a function that accepts a value of the type that
+   * the first function accepts
+   *
+   * @typedef T generic type parameter
+   * @param {(input: unknown) => input is T} accept - A function that indicate if the input is acceptable by the observer
+   * @param {(input: T) => void} listener - A function handle the input for the observer if the input is accepted
+   */
+  constructor(accept, listener) {
+    this.accept = accept;
+    this.listener = listener;
+  }
+  /**
+   * If the input is of the type that this handler is interested in, then call the listener function
+   *
+   * @param {unknown} input - unknown
+   */
+  notify(input) {
+    if (this.accept(input)) {
+      this.listener(input);
+    }
+  }
+}
+
+export { Observer as O };

package/dist/esm/{page-resize-observer-slimmer-8caeb03b.js → page-resize-observer-slimmer-994c1e1b.js}

@@ -1,5 +1,5 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { g as getCurrentBreakpoint } from './breakpoints-e59edf8d.js';
+import { g as getCurrentBreakpoint } from './breakpoints-36a3ed69.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/{static-remote-invocation-call-registry-651b0701.js → remote-invocation-registry-1682b34e.js}

@@ -1,15 +1,15 @@
-import { O as Observer } from './dom-node-subject-observer-factory-926991a9.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { O as Observer } from './observer-3959f9dd.js';
 
 /**
- * The `StaticRemoteInvocationCallRegistry` provides methods for performing remote invocation calls
+ * The `RemoteInvocationRegistry` provides methods for performing remote invocation calls
  * and registering remote invocation handlers.
  */
-class StaticRemoteInvocationCallRegistry {
+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`.
    */
@@ -26,9 +26,9 @@ 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) {
@@ -39,9 +39,9 @@ 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);
@@ -57,6 +57,6 @@ class StaticRemoteInvocationCallRegistry {
     return true;
   }
 }
-const staticRemoteInvocationCallRegistry = new StaticRemoteInvocationCallRegistry();
+const remoteInvocationRegistry = new RemoteInvocationRegistry();
 
-export { staticRemoteInvocationCallRegistry as s };
+export { remoteInvocationRegistry as r };

package/dist/esm/{required-field-rule-f438a73f.js → required-field-rule-5da360cc.js}

@@ -17,7 +17,7 @@ class RequiredFieldRule {
    * If the input is a number or a boolean, return true. If the input is a string, return true if the string is not empty
    *
    * @param {FormFieldValueType | Array<FormFieldValueType>} input - The input to be evaluated.
-   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    */
   evaluate(input) {
     if (!this.isAcceptedInputType(input)) {

package/dist/esm/{responsive-format-facade-e86c7fbb.js → responsive-format-facade-5a1329a7.js}

@@ -1,8 +1,8 @@
-import { u as isResponsiveType, v as isBreakpointsForPrefixType, n as isSpacingTokenType, w as isDirectionalSpacingType, h as Spacing, x as isGridColumnsType, y as isGridRowsType, z as isTranslocationType, A as isFlexDirectionType, D as isFlexAlignItemType, E as isFlexJustifyContentType, G as isFlexWrapType, H as isBoxDisplayType, o as isBorderRadiusTokenType, I as isDirectionalBorderRadiusType, B as BorderRadius, J as isTextAlignType } from './type-guard-4bc3fbf5.js';
+import { u as isResponsiveType, v as isBreakpointsForPrefixType, n as isSpacingTokenType, w as isDirectionalSpacingType, h as Spacing, x as isGridColumnsType, y as isGridRowsType, z as isTranslocationType, A as isFlexDirectionType, D as isFlexAlignItemType, E as isFlexJustifyContentType, G as isFlexWrapType, H as isBoxDisplayType, o as isBorderRadiusTokenType, I as isDirectionalBorderRadiusType, B as BorderRadius, J as isTextAlignType } from './type-guard-63caf78b.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './breakpoints-e59edf8d.js';
+import { g as getCurrentBreakpoint, c as createCompleteResponsiveMap } from './breakpoints-36a3ed69.js';
 import { i as isValidPercentage } from './number-e2519d1c.js';
-import { F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign } from './ui-df46cc20.js';
+import { F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign } from './ui-8424715a.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 
 /**

package/dist/esm/{state-background-color-formatter-0f86292d.js → state-background-color-formatter-0540d006.js}

@@ -1,4 +1,4 @@
-import { K as isStateVariantTokenType, p as isBackgroundColorTokenType, a as BackgroundColors, d as BackgroundColorMap } from './type-guard-4bc3fbf5.js';
+import { K as isStateVariantTokenType, p as isBackgroundColorTokenType, a as BackgroundColors, d as BackgroundColorMap } from './type-guard-63caf78b.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 
 /**

package/dist/esm/{static-subject-title-2e153754.js → static-subject-title-6987a80b.js}

@@ -41,7 +41,6 @@ const RADIO_VALUE_CHANGE = new StaticSubject('RADIO_VALUE_CHANGE');
 const FORM_ELEMENT_VALUE_CHANGE = new StaticSubject('FORM_ELEMENT_VALUE_CHANGE');
 const FORM_ELEMENT_VALIDATE = new StaticSubject('FORM_EMEMENT_VALIDATE');
 const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');
-const DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN');
-const DROPDOWN_SEARCH_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_SEARCH_INTERNAL_OVERRIDEN');
+const UPDATE_TRANSLATION = new StaticSubject('UPDATE_TRANSLATION');
 
-export { ACCORDION_EXPAND_TOPIC as A, CHECKBOX_VALUE_CHANGE as C, DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN as D, FORM_SUBMIT as F, LEFT_NAV_LINK_SELECTED_TOPIC as L, RADIO_VALUE_CHANGE as R, SELECTION_TILE_VALUE_CHANGE as S, TAB_PANEL_ADD_OR_DEL_TO_GROUP as T, FORM_RESET as a, FORM_ELEMENT_VALUE_CHANGE as b, FORM_FIELD_PENDING_VALID_CHANGE as c, FORM_FIELD_ELEMENT_DISCONNECTED as d, FORM_RESET_OPERATION_TRIGGERED as e, FIELD_ERROR_MESSAGE_CHANGE as f, FORM_ELEMENT_VALIDATE as g, DROPDOWN_SEARCH_INTERNAL_OVERRIDEN as h, CHECKBOX_GROUP_DISABLED_CHANGE as i, RADIO_GROUP_DISABLED_CHANGE as j, DROPDOWN_ITEM_CLICK as k, TABLE_EXPAND_ROW as l, TABLE_ROW_SELECTION as m, TABLE_ROW_SELECTION_ALL as n, TABLE_ROW_CLICK as o };
+export { ACCORDION_EXPAND_TOPIC as A, CHECKBOX_VALUE_CHANGE as C, DROPDOWN_ITEM_CLICK as D, FORM_SUBMIT as F, LEFT_NAV_LINK_SELECTED_TOPIC as L, RADIO_VALUE_CHANGE as R, SELECTION_TILE_VALUE_CHANGE as S, TAB_PANEL_ADD_OR_DEL_TO_GROUP as T, UPDATE_TRANSLATION as U, FORM_RESET as a, FORM_ELEMENT_VALUE_CHANGE as b, FORM_FIELD_PENDING_VALID_CHANGE as c, FORM_FIELD_ELEMENT_DISCONNECTED as d, FORM_RESET_OPERATION_TRIGGERED as e, FIELD_ERROR_MESSAGE_CHANGE as f, FORM_ELEMENT_VALIDATE as g, CHECKBOX_GROUP_DISABLED_CHANGE as h, RADIO_GROUP_DISABLED_CHANGE as i, TABLE_EXPAND_ROW as j, TABLE_ROW_SELECTION as k, TABLE_ROW_SELECTION_ALL as l, TABLE_ROW_CLICK as m };

package/dist/esm/{string-input-formatter-slimmer-7170d6b3.js → string-input-formatter-slimmer-bfe3f5e5.js}

@@ -1,4 +1,4 @@
-import { P as isNonNullable } from './type-guard-4bc3fbf5.js';
+import { M as isNonNullable } from './type-guard-63caf78b.js';
 import { c as MapToComponentField, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 
 /**

package/dist/esm/style-formatter-2fa5ce09.js

@@ -0,0 +1,32 @@
+import { M as isNonNullable } from './type-guard-63caf78b.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-5a1329a7.js';
+
+/**
+ * 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
+ */
+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,
+    };
+  }
+}
+
+export { formatFlexStyles as f };

package/dist/esm/{sub-state-observer-slimmer-106273ec.js → sub-state-observer-slimmer-af28076b.js}

@@ -1,9 +1,10 @@
 import { V as VegaSlimmer, c as MapToComponentField, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-926991a9.js';
-import { e as VegaInternalSubStatePull, f as VegaInternalSubStatePush } from './vega-internal-event-id-809b4ec8.js';
-import { f as findParent } from './ui-153f4ae7.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { g as VegaInternalSubStatePull, h as VegaInternalSubStatePush } from './vega-internal-event-id-7e05cf4a.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-9461cd67.js';
+import { f as findParent } from './ui-0132dbb5.js';
 
 /**
  * Sub state notify slimmer

package/dist/esm/synchronize-task-queue-8f5fbbd9.js

@@ -0,0 +1,39 @@
+/**
+ * This queue runs tasks in the order they are added to the queue
+ *
+ * @implements {Queue<Task>}
+ * @property {Task[]} queue used to be stored tasks pending for executing
+ */
+class SynchronizeTaskQueue {
+  constructor() {
+    this.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, immediatelyRun = true) {
+    const shouldRun = immediatelyRun && this.queue.length === 0;
+    this.queue.push(item);
+    if (shouldRun) {
+      await this.runTask();
+    }
+  }
+  /**
+   * Run the first task in the queue, then remove it from the queue and run the next task if there is one
+   */
+  async runTask() {
+    const firstTask = this.queue[0];
+    if (firstTask) {
+      await firstTask.run();
+      this.queue.shift();
+      if (this.queue.length > 0) {
+        await this.runTask();
+      }
+    }
+  }
+}
+
+export { SynchronizeTaskQueue as S };

package/dist/esm/translation-3b437b6d.js

@@ -0,0 +1,272 @@
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { U as UPDATE_TRANSLATION } from './static-subject-title-6987a80b.js';
+import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-928ad7f0.js';
+
+/* eslint-disable @typescript-eslint/naming-convention */
+const staticTranslations = {
+  // Form validation rule
+  'This field is required': 'This field is required',
+  'The minimum input value is {0}': 'The minimum input value is {0}',
+  'The maximum input value is {0}': 'The maximum input value is {0}',
+  'The end value should be greater than the start value': 'The end value should be greater than the start value',
+  'The end date should be later than start date': 'The end date should be later than start date',
+  'Credit card number is invalid': 'Credit card number is invalid',
+  'Please enter the correct email format.': 'Please enter the correct email format.',
+  'The maximum input length is {0}': 'The maximum input length is {0}',
+  'The start date should be later than {0}': 'The start date should be later than {0}',
+  'The start date should be earlier than {0}': 'The start date should be earlier than {0}',
+  'The end date should be earlier than {0}': 'The end date should be earlier than {0}',
+  'The date should be later than {0}': 'The date should be later than {0}',
+  'The date should be earlier than {0}': 'The date should be earlier than {0}',
+  'The minimum input length is {0}': 'The minimum input length is {0}',
+  'The end time should be later than start time': 'The end time should be later than start time',
+  'Phone number is not valid': 'Phone number is not valid',
+  'Phone number is valid but it belongs to country {0}, not country {1}': 'Phone number is valid but it belongs to country {0}, not country {1}',
+  // Component internal text
+  'Viewing': 'Viewing',
+  'Show': 'Show',
+  'Go To': 'Go To',
+  'Viewing {0}-{1} of {2}': 'Viewing {0}-{1} of {2}',
+  'Upload': 'Upload',
+  'Clear': 'Clear',
+  'Today': 'Today',
+  'Day': 'Day',
+  'Week': 'Week',
+  'Month': 'Month',
+  'Sun': 'Sun',
+  'Mon': 'Mon',
+  'Tue': 'Tue',
+  'Wed': 'Wed',
+  'Thu': 'Thu',
+  'Fri': 'Fri',
+  'Sat': 'Sat',
+  'Sun-short': 'S',
+  'Mon-short': 'M',
+  'Tue-short': 'T',
+  'Wed-short': 'W',
+  'Thu-short': 'T',
+  'Fri-short': 'F',
+  'Sat-short': 'S',
+  'January': 'January',
+  'February': 'February',
+  'March': 'March',
+  'April': 'April',
+  'May': 'May',
+  'June': 'June',
+  'July': 'July',
+  'August': 'August',
+  'September': 'September',
+  'October': 'October',
+  'November': 'November',
+  'December': 'December',
+  'All Day': 'All Day',
+  'Select or drop your file here': 'Select or drop your file here',
+  'Please sign here': 'Please sign here',
+  'Clear Signature': 'Clear Signature',
+  'Start Date': 'Start Date',
+  'End Date': 'End Date',
+  'Please select': 'Please select',
+  'No options': 'No options',
+  'No results found': 'No results found',
+  'Minimum': 'Minimum',
+  'Maximum': 'Maximum',
+  'Select Time': 'Select Time',
+  'Start Time': 'Start Time',
+  'End Time': 'End Time',
+  'There is no data to display': 'There is no data to display',
+};
+
+/**
+ * Vega translation controller to control the internal text translation
+ */
+class InternalTranslationController {
+  constructor() {
+    this.resources = { en: staticTranslations };
+    this._currentLanguage = 'en';
+  }
+  /**
+   * Get current language
+   *
+   * @returns {string} current language
+   */
+  get currentLanguage() {
+    return this._currentLanguage;
+  }
+  /**
+   * Initializes the translation controller with provided resources and language.
+   *
+   * @param {VegaTranslationConfig} config - The configuration object containing resources and initial language.
+   */
+  init({ resources, language }) {
+    if (resources && Object.keys(resources).length > 0) {
+      this.resources = resources;
+    }
+    else {
+      LogUtility.warn(`Resources are empty. Falling back to default language "en".`);
+      this.resources = { en: staticTranslations };
+    }
+    if (language && language in this.resources) {
+      this._currentLanguage = language;
+    }
+    else {
+      LogUtility.warn(`Language "${language}" not found in resources. Falling back to default language "en".`);
+      this._currentLanguage = 'en';
+    }
+    ChangeManager.notify(UPDATE_TRANSLATION, {});
+  }
+  /**
+   * Changes the current language if it exists in the resources.
+   *
+   * @param {string} language - The language code to change to.
+   */
+  changeLanguage(language) {
+    if (this.resources[language]) {
+      this._currentLanguage = language;
+      ChangeManager.notify(UPDATE_TRANSLATION, {});
+    }
+    else {
+      LogUtility.warn(`Language "${language}" not found in resources.`);
+    }
+  }
+  /**
+   * 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) {
+    const translation = this.resources[this._currentLanguage][key] || staticTranslations[key] || key;
+    return args.reduce((result, arg, index) => result.replace(new RegExp(`\\{${index}\\}`, 'g'), String(arg)), translation);
+  }
+  /**
+   * Registers a component to the `connectedComponents` map, associating it with the component's tag name.
+   * If the tag already exists, it adds the component to the existing set of components.
+   *
+   * @param {HTMLStencilElement} host - The component instance to register.
+   */
+  registerComponent(host) {
+    const connectedComponents = InternalTranslationController.connectedComponents.get(host.tagName);
+    if (connectedComponents) {
+      connectedComponents.add(host);
+    }
+    else {
+      InternalTranslationController.connectedComponents.set(host.tagName, new Set([host]));
+    }
+  }
+  /**
+   * Unregister a component from the `connectedComponents` map.
+   *
+   * @param {HTMLStencilElement} host - The component instance to unregister.
+   */
+  unRegisterComponent(host) {
+    const connectedComponents = InternalTranslationController.connectedComponents.get(host.tagName);
+    if (connectedComponents) {
+      connectedComponents.delete(host);
+    }
+  }
+  /**
+   * Retrieves the map of connected components, where each entry associates a tag name with a set of components.
+   *
+   * @returns {Map<string, Set<HTMLElement>>} A map of connected components.
+   */
+  getConnectedComponents() {
+    return InternalTranslationController.connectedComponents;
+  }
+}
+InternalTranslationController.connectedComponents = new Map();
+const VegaInternalTranslation = new InternalTranslationController();
+
+const VegaTranslationRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_INIT_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaTranslation.init is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'TranslationController' && methodName === 'init',
+    /**
+     * The function checks if the method name is loaded.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CHANGE_LANGUAGE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaTranslation.changeLanguage is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'TranslationController' && methodName === 'changeLanguage',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate = (undefined && undefined.__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;
+};
+/**
+ * Vega Translation Public API
+ *
+ * @vegaVersion 2.27.0
+ */
+class TranslationController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * Get current language
+   *
+   * @returns {string} current language
+   * @vegaVersion 2.27.0
+   */
+  get currentLanguage() {
+    return VegaInternalTranslation.currentLanguage;
+  }
+  /**
+   * Initializes the translation controller with provided resources and language.
+   *
+   * @param {VegaTranslationConfig} config - Configuration object containing resources and initial language.
+   * @vegaVersion 2.27.0
+   */
+  init(config) {
+    VegaInternalTranslation.init(config);
+  }
+  /**
+   * Changes the current language if it exists in the resources.
+   *
+   * @param {string} language - The language code to change to.
+   * @vegaVersion 2.27.0
+   */
+  changeLanguage(language) {
+    VegaInternalTranslation.changeLanguage(language);
+  }
+}
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], TranslationController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaTranslation = new TranslationController();
+
+export { VegaInternalTranslation as V, VegaTranslation as a, staticTranslations as s };

package/dist/esm/translation-slimmer-c740a5f3.js

@@ -0,0 +1,40 @@
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { V as VegaInternalTranslation } from './translation-3b437b6d.js';
+
+var __decorate = (undefined && undefined.__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;
+};
+/**
+ * Translation slimmer for components to use.
+ * Automatically triggers re-render in components that rely on this utility when the language changes.
+ */
+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);
+
+export { TranslationSlimmer as T };

package/dist/esm/{type-guard-4bc3fbf5.js → type-guard-63caf78b.js}

@@ -1,5 +1,5 @@
-import { B as Breakpoints } from './breakpoints-e59edf8d.js';
-import { a as BorderStyle, F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign, C as CssStates } from './ui-df46cc20.js';
+import { B as Breakpoints } from './breakpoints-36a3ed69.js';
+import { a as BorderStyle, F as FlexDirections, b as FlexAlignItem, c as FlexJustifyContent, d as FlexWrap, e as BoxDisplay, T as TextAlign, C as CssStates } from './ui-8424715a.js';
 import { G as GridColumnsRegex, a as GridRowsRegex } from './regex-dfe11abf.js';
 import { b as TypographyKeys } from './typography-a8fc4764.js';
 
@@ -668,4 +668,4 @@ const isCssStateType = (input) => {
   return typeof input === 'string' && CssStates.includes(input);
 };
 
-export { isFlexDirectionType as A, BorderRadius as B, Colors as C, isFlexAlignItemType as D, isFlexJustifyContentType as E, FillBackgroundColors as F, isFlexWrapType as G, isBoxDisplayType as H, isDirectionalBorderRadiusType as I, isTextAlignType as J, isStateVariantTokenType as K, isAccordionObserverPayload as L, isArrayOfType as M, isDropdownSourceItemType as N, isSelectSourceItemType as O, isNonNullable as P, StrokeBackgroundColors as S, TextColors as T, BackgroundColors as a, BorderColors as b, TextColorMap as c, BackgroundColorMap as d, BorderColorMap as e, Shadows as f, ShadowMap as g, Spacing as h, isBorderColorTokenType as i, isShadowsTokenType as j, isBorderTokenType as k, Borders as l, BorderMap as m, isSpacingTokenType as n, isBorderRadiusTokenType as o, isBackgroundColorTokenType as p, isTextColorTokenType as q, isBreakpointsTokenType as r, isBorderStyleType as s, isTypographyTokenType as t, isResponsiveType as u, isBreakpointsForPrefixType as v, isDirectionalSpacingType as w, isGridColumnsType as x, isGridRowsType as y, isTranslocationType as z };
+export { isFlexDirectionType as A, BorderRadius as B, Colors as C, isFlexAlignItemType as D, isFlexJustifyContentType as E, FillBackgroundColors as F, isFlexWrapType as G, isBoxDisplayType as H, isDirectionalBorderRadiusType as I, isTextAlignType as J, isStateVariantTokenType as K, isAccordionObserverPayload as L, isNonNullable as M, isArrayOfType as N, isDropdownSourceItemType as O, isSelectSourceItemType as P, StrokeBackgroundColors as S, TextColors as T, BackgroundColors as a, BorderColors as b, TextColorMap as c, BackgroundColorMap as d, BorderColorMap as e, Shadows as f, ShadowMap as g, Spacing as h, isBorderColorTokenType as i, isShadowsTokenType as j, isBorderTokenType as k, Borders as l, BorderMap as m, isSpacingTokenType as n, isBorderRadiusTokenType as o, isBackgroundColorTokenType as p, isTextColorTokenType as q, isBreakpointsTokenType as r, isBorderStyleType as s, isTypographyTokenType as t, isResponsiveType as u, isBreakpointsForPrefixType as v, isDirectionalSpacingType as w, isGridColumnsType as x, isGridRowsType as y, isTranslocationType as z };

package/dist/esm/{ui-153f4ae7.js → ui-0132dbb5.js}

@@ -184,4 +184,4 @@ function getDeepActiveElementInShadow(root = document) {
   }
 }
 
-export { DeviceType as D, arrayToClassString as a, getHexFromShorthand as b, isParent as c, getDeepActiveElementInShadow as d, isTextWrapped as e, findParent as f, getDeviceType as g, hexToRGB as h, isElementVisible as i, getElementComputedStyle as j, extractNumberFromString as k, containerScrollToItem as l };
+export { DeviceType as D, arrayToClassString as a, getHexFromShorthand as b, isElementVisible as c, getDeepActiveElementInShadow as d, isTextWrapped as e, findParent as f, getDeviceType as g, hexToRGB as h, isParent as i, getElementComputedStyle as j, extractNumberFromString as k, containerScrollToItem as l };

package/dist/esm/{ui-df46cc20.js → ui-8424715a.js}

@@ -27,7 +27,7 @@ const FlexJustifyContent = [
 // eslint-disable-next-line @typescript-eslint/typedef
 const FlexWrap = ['nowrap', 'wrap', 'wrap-reverse'];
 // eslint-disable-next-line @typescript-eslint/typedef
-const BoxDisplay = ['block', 'none'];
+const BoxDisplay = ['block', 'inline-block', 'none'];
 // eslint-disable-next-line @typescript-eslint/typedef
 const BorderStyle = ['solid', 'dashed', 'dotted', 'double', 'none'];
 // eslint-disable-next-line @typescript-eslint/typedef