@globalpayments/vega 2.34.1 → 2.36.0

package/dist/esm/{create-public-api-runtime-metrics-slimmer-14cb4599.js → create-public-api-runtime-metrics-slimmer-9ab05523.js}

@@ -1,5 +1,5 @@
-import { C as ConsumerSlimmers, S as SlimmerConsumedBy, a as SlimmerMappedMethod, c as CurrentlyInvokedMethodName, V as VegaSlimmer, L as LogUtility } from './global-slimmer-registry-6887a59f.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-85746483.js';
+import { C as ConsumerSlimmers, S as SlimmerConsumedBy, a as SlimmerMappedMethod, b as CurrentlyInvokedMethodName, V as VegaSlimmer, L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 
 /**
  * returns a string that is a random UUID

package/dist/esm/{date-655c0af8.js → date-732bc749.js}

@@ -1,4 +1,4 @@
-import { L as LogUtility } from './global-slimmer-registry-6887a59f.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 
 /**
  * It returns true if the input is a valid date string, and false otherwise

package/dist/esm/{deprecated-property-slimmer-9ea5019c.js → deprecated-property-slimmer-43d184b3.js}

@@ -1,5 +1,5 @@
-import { V as VegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-85746483.js';
+import { V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { g as getValueByPath, d as deepEqual } from './object-261e7344.js';
 
 /** DeprecatedPropertySlimmer compares new property with default value, if they are different, return new property; otherwise, return old property */

package/dist/esm/{design-token-20fdba82.js → design-token-d06bc718.js}

@@ -1,9 +1,9 @@
 import { j as isBorderColorTokenType, b as BorderColors, e as BorderColorMap, k as isShadowsTokenType, f as Shadows, g as ShadowMap, l as isBorderTokenType, m as Borders, n as BorderMap, o as isSpacingTokenType, p as isBorderRadiusTokenType, q as isBackgroundColorTokenType, r as isTextColorTokenType, s as isBreakpointsTokenType, h as Spacing, t as isBorderStyleType, B as BorderRadius, C as Colors, u as isTypographyTokenType } from './type-guard-158f6d7a.js';
 import { B as Breakpoints } from './breakpoints-d9faf11c.js';
-import { L as LogUtility } from './global-slimmer-registry-6887a59f.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-559ec469.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
 import { a as TypographyKeys } from './typography-396de03f.js';
-import { S as StateVariantFormatter, s as stateBackgroundColorFormatter } from './state-background-color-formatter-16031a43.js';
+import { S as StateVariantFormatter, s as stateBackgroundColorFormatter } from './state-background-color-formatter-121ae7d3.js';
 import { a as BorderStyle } from './ui-8424715a.js';
 
 /**

package/dist/esm/{dom-node-subject-observer-factory-80358591.js → dom-node-subject-factory-5831cdd4.js}

@@ -1,5 +1,4 @@
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { i as isParent } from './ui-5600b48f.js';
+import { i as isParent } from './ui-62e4be97.js';
 
 /**
  *  An Observer is a class that has a listener method that accepts a value of type T
@@ -228,42 +227,4 @@ class DomNodeSubjectFactory {
 }
 const domNodeSubjectFactory = new DomNodeSubjectFactory();
 
-/**
- * The function `domAcceptableHandle` always returns `true`.
- *
- * @returns {boolean} true
- */
-const domAcceptableHandle = () => {
-  return true;
-};
-/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
-class DomNodeSubjectObserverFactory {
-  /**
-   * add observer to a given HTML element node
-   *
-   * @param {HTMLElement} node the node ref
-   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
-   * @param {(input?: unknown) => void} callback the callback handle
-   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
-   */
-  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
-    if (node) {
-      const domNodesObserver = new Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
-      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
-      ChangeManager.register(domNodeSubjectFactory.getSubject(node, eventId), domNodesObserver);
-    }
-  }
-  /**
-   * The function removes observers from a given HTML element node.
-   *
-   * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
-   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
-   */
-  static removeUniqueObserverFromNode(node, eventId) {
-    if (domNodeSubjectFactory.isExist(node, eventId)) {
-      ChangeManager.clearObserversBySubject(domNodeSubjectFactory.getSubject(node, eventId));
-    }
-  }
-}
-
-export { VegaBlur as A, VegaCountryChange as B, VegaShow as C, DomNodeSubjectObserverFactory as D, VegaHide as E, VegaToggleStatus as F, VegaOpen as G, VegaStateUpdate as H, VegaGroupClick as I, VegaMenuClick as J, VegaActionClick as K, VegaPageSizeChange as L, VegaPopoverShow as M, VegaPopoverHide as N, Observer as O, VegaCurrentStepUpdate as P, VegaImageInserted as Q, VegaSelectChange as R, VegaSelectAllChange as S, VegaRowClick as T, VegaRowExpand as U, VegaChange as V, VegaRowSelect as W, VegaRowSelectAll as X, VegaExpand as a, VegaClick as b, VegaDropdownClick as c, domNodeSubjectFactory as d, VegaClose as e, VegaActionButtonClick as f, VegaEventClick as g, VegaDateDblClick as h, VegaMoreActionClick as i, VegaPageUpdate as j, VegaCreate as k, VegaSearch as l, VegaDropdownShow as m, VegaDropdownHide as n, VegaDropdownSearch as o, VegaSearchTrigger as p, VegaLabelButtonClick as q, VegaSelectFileChange as r, VegaRemove as s, VegaRetry as t, VegaPreview as u, VegaFormSubmit as v, VegaFormReset as w, VegaValidate as x, VegaCancel as y, VegaFocus as z };
+export { VegaBlur as A, VegaCountryChange as B, VegaShow as C, VegaHide as D, VegaToggleStatus as E, VegaOpen as F, VegaStateUpdate as G, VegaGroupClick as H, VegaMenuClick as I, VegaActionClick as J, VegaPageSizeChange as K, VegaPopoverShow as L, VegaPopoverHide as M, VegaCurrentStepUpdate as N, Observer as O, VegaImageInserted as P, VegaSelectChange as Q, VegaSelectAllChange as R, VegaRowClick as S, VegaRowExpand as T, VegaRowSelect as U, VegaExpand as V, VegaRowSelectAll as W, VegaClick as a, VegaDropdownClick as b, VegaClose as c, domNodeSubjectFactory as d, VegaActionButtonClick as e, VegaChange as f, VegaEventClick as g, VegaDateDblClick as h, VegaMoreActionClick as i, VegaPageUpdate as j, VegaCreate as k, VegaSearch as l, VegaDropdownShow as m, VegaDropdownHide as n, VegaDropdownSearch as o, VegaSearchTrigger as p, VegaLabelButtonClick as q, VegaSelectFileChange as r, VegaRemove as s, VegaRetry as t, VegaPreview as u, VegaFormSubmit as v, VegaFormReset as w, VegaValidate as x, VegaCancel as y, VegaFocus as z };

package/dist/esm/dom-node-subject-observer-factory-dc486a8b.js

@@ -0,0 +1,42 @@
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
+
+/**
+ * The function `domAcceptableHandle` always returns `true`.
+ *
+ * @returns {boolean} true
+ */
+const domAcceptableHandle = () => {
+  return true;
+};
+/** The `DomNodeSubjectObserverFactory` class provides methods to add and remove observers to HTML element nodes. */
+class DomNodeSubjectObserverFactory {
+  /**
+   * add observer to a given HTML element node
+   *
+   * @param {HTMLElement} node the node ref
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   * @param {(input?: unknown) => void} callback the callback handle
+   * @param {(input?: unknown) => boolean} acceptableHandle the acceptable handle
+   */
+  static addUniqueObserverToNode(node, eventId, callback, acceptableHandle) {
+    if (node) {
+      const domNodesObserver = new Observer(typeof acceptableHandle === 'function' ? acceptableHandle.bind(null) : domAcceptableHandle, callback);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(node, eventId);
+      ChangeManager.register(domNodeSubjectFactory.getSubject(node, eventId), domNodesObserver);
+    }
+  }
+  /**
+   * The function removes observers from a given HTML element node.
+   *
+   * @param {HTMLElement} node - The `node` parameter is an `HTMLElement` object representing an HTML element in the DOM (Document Object Model).
+   * @param {VegaEventIDInterface} eventId The `eventId` parameter is of type `VegaEventIDInterface`. It represents the ID of a Vega event.
+   */
+  static removeUniqueObserverFromNode(node, eventId) {
+    if (domNodeSubjectFactory.isExist(node, eventId)) {
+      ChangeManager.clearObserversBySubject(domNodeSubjectFactory.getSubject(node, eventId));
+    }
+  }
+}
+
+export { DomNodeSubjectObserverFactory as D };

package/dist/esm/{dynamic-slimmer-85746483.js → dynamic-slimmer-90b8af32.js}

@@ -1,4 +1,4 @@
-import { d as MapToComponentField, M as MapToComponentMethod } from './global-slimmer-registry-6887a59f.js';
+import { c as MapToComponentField, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
 
 /**
  * The `createDynamicSlimmer` function creates an instance of a dynamically generated class based on

package/dist/esm/{element-appender-slimmer-4dfa326d.js → element-appender-slimmer-f3eceb79.js}

@@ -1,11 +1,11 @@
-import { d as MapToComponentField, I as InjectVegaSlimmer, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod } from './global-slimmer-registry-6887a59f.js';
-import { f as findParent, c as isElementVisible, i as isParent } from './ui-5600b48f.js';
-import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-89e8b6f5.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-85746483.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8589ebc8.js';
+import { c as MapToComponentField, I as InjectVegaSlimmer, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
+import { f as findParent, c as isElementVisible, i as isParent } from './ui-62e4be97.js';
+import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
 import { P as Placements, A as Alignments } from './ui-8424715a.js';
 import { A as isTranslocationType } from './type-guard-158f6d7a.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-559ec469.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-c2ab9c87.js';
 
 var __decorate$9 = (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;
@@ -811,7 +811,7 @@ class PositionCalculationController extends VegaSlimmer {
    * @returns {void}
    */
   adjustHeight() {
-    if (this.showConfig.matchContainerHeight) {
+    if (this.showConfig.matchContainerHeight && !this.showConfig.isScreenPosition) {
       const { height: targetHeight } = this.showConfig.target.getBoundingClientRect();
       let maxHeight = this.container.scrollHeight - this.showConfig.target.offsetTop - targetHeight;
       if (this.showConfig.maxHeight) {
@@ -1038,6 +1038,16 @@ class ElementAppender {
   prepareShow() {
     // Add relative position to the container while the container is static,
     // https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning
+    if (!this.showConfig.isScreenPosition) {
+      this.initVisibleAppendElement();
+    }
+    this.showConfig.appendableElement.style.boxSizing = 'border-box';
+    this.positionCalculationController.setCalculationStrategy();
+  }
+  /**
+   * init visible append element.
+   */
+  initVisibleAppendElement() {
     const containerStyle = window.getComputedStyle(this.container);
     const originContainerPosition = containerStyle.position;
     if (!ElementAppender.containerMap.has(this.container)) {
@@ -1049,8 +1059,6 @@ class ElementAppender {
     if (originContainerPosition === 'static') {
       this.container.style.position = 'relative';
     }
-    this.showConfig.appendableElement.style.boxSizing = 'border-box';
-    this.positionCalculationController.setCalculationStrategy();
   }
   /**
    * A function that takes no parameters and returns nothing. It sets the position of the appendable element.

package/dist/esm/{event-emit-slimmer-c03cf145.js → event-emit-slimmer-f285e3ac.js}

@@ -1,8 +1,9 @@
-import { d as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-6887a59f.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-85746483.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-80358591.js';
-import { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-3a3815d3.js';
+import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } 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 { d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-07e1b3d9.js';
 
 var __decorate$3 = (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/{feature-flag-controller-dfde0cfa.js → feature-flag-controller-4b3fe6f8.js}

@@ -1,4 +1,4 @@
-import { L as LogUtility } from './global-slimmer-registry-6887a59f.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
 import B from './index-44c794b4.js';
 
 /**

package/dist/esm/{form-field-controller-slimmer-de5fe574.js → form-field-controller-slimmer-6ef5641b.js}

@@ -1,15 +1,16 @@
-import { d as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer, M as MapToComponentMethod } from './global-slimmer-registry-6887a59f.js';
+import { V as VegaSlimmer, I as InjectVegaSlimmer, c as MapToComponentField, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
 import { c as camelToDashCase } from './string-be824360.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { d as domNodeSubjectFactory, O as Observer, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-80358591.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory, O as Observer } from './dom-node-subject-factory-5831cdd4.js';
 import { U as UPDATE_TRANSLATION, c as FORM_FIELD_PENDING_VALID_CHANGE, d as FORM_FIELD_ELEMENT_DISCONNECTED, b as FORM_ELEMENT_VALUE_CHANGE, e as FORM_RESET_OPERATION_TRIGGERED, F as FORM_SUBMIT, f as FIELD_ERROR_MESSAGE_CHANGE, g as FORM_ELEMENT_VALIDATE } from './static-subject-title-e06a3840.js';
-import { f as findParent, c as isElementVisible } from './ui-5600b48f.js';
-import { i as isAsyncFunction, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
-import { c as createDynamicSlimmer } from './dynamic-slimmer-85746483.js';
-import { c as VegaInternalFieldErrorStateChange, d as VegaInternalValid } from './vega-internal-event-id-4af5c6e9.js';
-import { V as VegaInternalTranslation } from './translation-b3fe8e74.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8589ebc8.js';
-import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-ca2cb2e8.js';
+import { f as findParent, c as isElementVisible } from './ui-62e4be97.js';
+import { i as isAsyncFunction, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
+import { c as VegaInternalFieldErrorStateChange, d as VegaInternalValid } from './vega-internal-event-id-458939b6.js';
+import { V as VegaInternalTranslation } from './translation-a98970d8.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
+import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-6cef9549.js';
 import { A as AttributeOldValueMutationFilter } from './mutation-observer-filters-1035b064.js';
 import { i as isArrayEqual } from './array-b668466e.js';
 
@@ -123,7 +124,7 @@ class FormFieldValidationRuleHandlerChain {
    * @param {(keyof FormFieldStatusMeta)[]} triggerStatus - These keys represent the fields that have triggered a change in status.
    * @param {boolean | 'rule'} showError - A boolean or string rule form method call, It's a param of callback.
    * @param {ValidationCallBack} callback - The method should be call when validation result is not valid.
-   * @returns {Promise<boolean>} validate result.
+   * @returns {Promise<EvaluateResult>} validate result.
    */
   async process(input, status, triggerStatus, showError, callback) {
     const UUID = this.preProcess();
@@ -152,7 +153,12 @@ class FormFieldValidationRuleHandlerChain {
       }
     }
     this.postProcess(UUID, showError, result, callback);
-    return result ? false : true;
+    if (result) {
+      return { isValid: false, message: result.message };
+    }
+    else {
+      return { isValid: true, message: '' };
+    }
   }
   /**
    * sets the processId to the UUID
@@ -249,6 +255,22 @@ class SiblingContainerErrorLabelContainerRetrievalStrategy {
   }
 }
 
+/** The `FormFieldMessageTranslatorSlimmer` class is to get translated message */
+class FormFieldMessageTranslatorSlimmer 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 || []));
+  }
+}
+
 var __decorate$4 = (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);
@@ -259,6 +281,7 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
 class FieldErrorUIControllerSlimmer extends VegaSlimmer {
   constructor() {
     super();
+    this.formFieldMessageTranslatorSlimmer = new FormFieldMessageTranslatorSlimmer();
     this.fieldErrorUiControllerStrategies = [
       new SiblingContainerNestedErrorContainerRetrievalStrategy(),
       new SiblingContainerSelfRetrievalStrategy(),
@@ -278,7 +301,8 @@ class FieldErrorUIControllerSlimmer extends VegaSlimmer {
     const inputContainer = this.getInputElementContainer();
     if (errorMessage && inputContainer) {
       const errorContainer = this.getErrorContainer(inputContainer);
-      errorContainer.innerHTML = this.getTranslatedMessage(errorMessage);
+      errorContainer.innerHTML =
+        this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(errorMessage);
       errorContainer.classList.remove('vega-hidden');
       inputContainer.classList.add('error');
       ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalFieldErrorStateChange), {
@@ -327,18 +351,6 @@ 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
    */
@@ -350,7 +362,8 @@ class FieldErrorUIControllerSlimmer extends VegaSlimmer {
       if (inputContainer) {
         const errorContainer = this.getErrorContainer(inputContainer);
         if (errorContainer) {
-          errorContainer.innerHTML = this.getTranslatedMessage(this.errorMessage);
+          errorContainer.innerHTML =
+            this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(this.errorMessage);
         }
       }
     });
@@ -365,6 +378,9 @@ class FieldErrorUIControllerSlimmer extends VegaSlimmer {
     return true;
   }
 }
+__decorate$4([
+  InjectVegaSlimmer()
+], FieldErrorUIControllerSlimmer.prototype, "formFieldMessageTranslatorSlimmer", void 0);
 __decorate$4([
   MapToComponentField()
 ], FieldErrorUIControllerSlimmer.prototype, "host", void 0);
@@ -406,6 +422,7 @@ class FormFieldController {
    */
   constructor(defaultRules, hostElement, defaultValue, options) {
     var _a, _b;
+    this.formFieldMessageTranslatorSlimmer = new FormFieldMessageTranslatorSlimmer();
     this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
     this.resizeObserverSlimmer = createDynamicSlimmer(FormFieldController, PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
       {
@@ -497,7 +514,7 @@ class FormFieldController {
    * It validates the input against the rules and returns a boolean indicating whether the input is valid or not
    *
    * @param {boolean} showError whether the validation result should be reflected in UI
-   * @returns {boolean} A boolean value.
+   * @returns {Promise<EvaluateResultBase>} A promise value.
    */
   async validate(showError) {
     return await this.valid([], showError);
@@ -571,8 +588,9 @@ class FormFieldController {
     if (hasAsyncRules) {
       ChangeManager.notify(FORM_FIELD_PENDING_VALID_CHANGE, { host: this.host, detail: null });
     }
-    const isValid = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
-    return isValid;
+    const { isValid, message } = await this.formFieldValidationRuleHandlerChain.process(input, status, triggerStatus, showError, this.handleValidationResult);
+    const translatedMessage = this.formFieldMessageTranslatorSlimmer.getTranslatedMessage(message);
+    return { isValid, message: translatedMessage };
   }
   /**
    * Invoke all listeners with the given isValid value
@@ -797,11 +815,16 @@ class FormFieldController {
         if (isSubmittedKey)
           event.preventDefault();
         return isSubmittedKey;
+      case 'VEGA-RICH-TEXT-EDITOR':
+        return false;
       default:
         return isEnterKey;
     }
   }
 }
+__decorate$3([
+  InjectVegaSlimmer()
+], FormFieldController.prototype, "formFieldMessageTranslatorSlimmer", void 0);
 __decorate$3([
   InjectVegaSlimmer()
 ], FormFieldController.prototype, "fieldErrorUIController", void 0);
@@ -815,13 +838,19 @@ var __decorate$2 = (undefined && undefined.__decorate) || function (decorators,
   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;
 };
-/** The `FieldBoxControllerSlimmer` class is a TypeScript class that extends the `VegaSlimmer` class and provides methods for handling error UI in a field error component. */
+/**
+ * The current class is used to manually control the form element error message.
+ * The component `vega-field-error` is used to control the error messages for form fields. to implement the error message display, we needs to know the form field error message container, field element, and other necessary options,
+ * the `form-field-controller-slimmer` has the required options and will inject to the all form fields, so we create current slimmer class and inject to the `form-field-controller-slimmer` to get all options.
+ * When the property `message` of the vega-field-error component changed, the target form field will receive the special subject and update the error message.
+ */
 class FieldErrorControllerSlimmer extends VegaSlimmer {
   constructor() {
     super(...arguments);
+    // The host element field error UI controller.
     this.fieldErrorUIController = new FieldErrorUIControllerSlimmer();
     /**
-     * call the method when observer trigger
+     * This method called mean that the current form field element nest in a vega-field-error component and the parent component property `message` changed, we need to show or hide the error message.
      *
      * @param {FieldErrorEventPayload} payload payload param
      */
@@ -899,9 +928,12 @@ class FormFieldValidInvokeSlimmer extends VegaSlimmer {
         if (payload.timerId !== undefined) {
           clearTimeout(payload.timerId);
         }
-        const isValid = await this.validator.validate(payload.message);
-        if (typeof payload.promiseResolve === 'function') {
-          payload.promiseResolve(isValid);
+        const validationResult = await this.validator.validate(payload.message);
+        if (validationResult) {
+          const { isValid, message } = validationResult;
+          if (typeof payload.promiseResolve === 'function') {
+            payload.promiseResolve({ isValid, message });
+          }
         }
       }
     };