@globalpayments/vega 2.34.1 → 2.36.0

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/image-block.test.js

@@ -1,5 +1,3 @@
-import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
-import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 describe('image block', () => {
@@ -64,14 +62,6 @@ describe('image block', () => {
       annotations: { indent: 2 },
     });
   });
-  it('render method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-1');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    imageBlock.nodes = [imageNode];
-    imageNode.apply(new BoldAnnotationAction(true));
-    imageBlock.apply(new HorizontalAlignmentAnnotationAction('right'));
-    expect(imageBlock.render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const imageBlock = new RTEImageBlock('block-1');
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/list-block.test.js

@@ -1,5 +1,4 @@
 import { RTEListBlock } from '../../../dto/blocks/list-block';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 describe('bullet list', () => {
   it('new RTEBulletListBlock should work as expect', () => {
     expect(new RTEListBlock('1', 'bullet-list')).toBeDefined();
@@ -61,33 +60,6 @@ describe('bullet list', () => {
       ],
     });
   });
-  it('registerRef method should work as expect', () => {
-    const bulletListBlock = new RTEListBlock('1', 'bullet-list');
-    const mockDiv = document.createElement('div');
-    bulletListBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(bulletListBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(bulletListBlock);
-  });
-  it('render method should work as expect', () => {
-    expect(new RTEListBlock('1', 'bullet-list').render()).toBeDefined();
-    expect(RTEListBlock.from({
-      id: '1-1-1',
-      type: 'bullet-list',
-      blocks: [
-        {
-          id: '1-1-1-1',
-          type: 'list-item',
-          nodes: [
-            {
-              id: '1-1-1-1-1',
-              type: 'text',
-              text: 'This is a bullet-list 3-1.',
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const bulletListBlock = RTEListBlock.from({
       id: '1',
@@ -133,26 +105,6 @@ describe('bullet list', () => {
   });
 });
 describe('number list', () => {
-  it('render method should work as expect', () => {
-    expect(new RTEListBlock('1', 'bullet-list').render()).toBeDefined();
-    expect(RTEListBlock.from({
-      id: '1-1-1',
-      type: 'number-list',
-      blocks: [
-        {
-          id: '1-1-1-1',
-          type: 'list-item',
-          nodes: [
-            {
-              id: '1-1-1-1-1',
-              type: 'text',
-              text: 'This is a bullet-list 3-1.',
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const listBlock = RTEListBlock.from({
       id: '1',

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/list-item.test.js

@@ -1,6 +1,5 @@
 import { RTEListItemBlock } from '../../../dto/blocks/list-item-block';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 describe('bullet list item', () => {
   it('new RTEBulletListItemBlock should work as expect', () => {
     const bulletListItemBlock = new RTEListItemBlock('1');
@@ -129,45 +128,6 @@ describe('bullet list item', () => {
       ],
     });
   });
-  it('render method should work as expect', () => {
-    expect(RTEListItemBlock.from({
-      id: '1',
-      type: 'list-item',
-      nodes: [
-        {
-          id: '1-1',
-          type: 'text',
-          text: 'This is a bullet-list 1.',
-        },
-      ],
-      children: [
-        {
-          id: '1-1-1',
-          type: 'bullet-list',
-          blocks: [
-            {
-              id: '1-1-1-1',
-              type: 'list-item',
-              nodes: [
-                {
-                  id: '1-1-1-1-1',
-                  type: 'text',
-                  text: 'This is a bullet-list 3-1.',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
-  it('registerRef method should work as expect', () => {
-    const bulletListItemBlock = new RTEListItemBlock('1');
-    const mockDiv = document.createElement('div');
-    bulletListItemBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(bulletListItemBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(bulletListItemBlock);
-  });
   it('getLastNode should work as expect', () => {
     const listItemBlock = RTEListItemBlock.from({
       id: '1',

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/text-block.test.js

@@ -1,11 +1,6 @@
 import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annotation-action';
-import domNodesSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRichTextEditorFlushChanges } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 describe('text block', () => {
   it('new RTETextBlock should work as expect', () => {
@@ -84,35 +79,6 @@ describe('text block', () => {
       },
     });
   });
-  it('render method should work as expect', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textBlock.nodes = [textNode];
-    textNode.apply(new BoldAnnotationAction(true));
-    textBlock.apply(new HorizontalAlignmentAnnotationAction('right'));
-    expect(textBlock.render()).toBeDefined();
-  });
-  it('getBlockTagByType should work as expect', () => {
-    const titleBlock = new RTETextBlock('block-1', 'title');
-    expect(titleBlock['getBlockTagByType'](titleBlock.type)).toEqual('div');
-    const subtitleBlock = new RTETextBlock('block-1', 'subtitle');
-    expect(subtitleBlock['getBlockTagByType'](subtitleBlock.type)).toEqual('div');
-    const heading1Block = new RTETextBlock('block-1', 'heading-1');
-    expect(heading1Block['getBlockTagByType'](heading1Block.type)).toEqual('h1');
-    const heading2Block = new RTETextBlock('block-1', 'heading-2');
-    expect(heading2Block['getBlockTagByType'](heading2Block.type)).toEqual('h2');
-    const heading3Block = new RTETextBlock('block-1', 'heading-3');
-    expect(heading3Block['getBlockTagByType'](heading3Block.type)).toEqual('h3');
-    const paragraphBlock = new RTETextBlock('block-1', 'paragraph');
-    expect(paragraphBlock['getBlockTagByType'](paragraphBlock.type)).toEqual('p');
-  });
-  it('registerRef method should work as expect', () => {
-    const titleBlock = new RTETextBlock('block-1', 'title');
-    const mockDiv = document.createElement('div');
-    titleBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(titleBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(titleBlock);
-  });
   it('apply method should work as expect', () => {
     const titleBlock = new RTETextBlock('block-1', 'title');
     const textNode = new RTETextNode('1', 'This is a text.', titleBlock);
@@ -135,11 +101,6 @@ describe('text block', () => {
     };
     mockDiv.append(mockSpan);
     mockHost.append(mockDiv);
-    titleBlock['registerRef'](mockDiv);
-    textNode['registerRef'](mockSpan);
-    const parentSubject = domNodesSubjectFactory.getSubject(mockHost, VegaInternalRichTextEditorFlushChanges);
-    expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(mockDiv, VegaInternalRichTextEditorFlushChanges)).toEqual(parentSubject);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(titleBlock)).toEqual(mockDiv);
     expect(titleBlock.type).toEqual('title');
     textNode.apply(new SelectionChangeAction(range));
     titleBlock.apply(new TextStyleAnnotationAction('heading-1', true));

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/image-node.test.js

@@ -1,6 +1,5 @@
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { ImageAnnotationAction } from '../../../dto/actions/image-annotation-action';
 describe('image node', () => {
   it('new RTEImageNode should work as expect', () => {
@@ -8,19 +7,6 @@ describe('image node', () => {
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
     expect(imageNode.toJSON()).toEqual({ id: '1', type: 'image', url: 'mock-url' });
   });
-  it('render method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-id');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    expect(imageNode.render()).toBeDefined();
-  });
-  it('registerRef method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-id');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    const mockImg = document.createElement('img');
-    imageNode['registerRef'](mockImg);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(imageNode)).toEqual(mockImg);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockImg)).toEqual(imageNode);
-  });
   it('apply method should work as expect', () => {
     const imageBlock = new RTEImageBlock('1');
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);

package/dist/collection/components/vega-rich-text-editor/test/dto/nodes/text-node.test.js

@@ -15,10 +15,6 @@ import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-actio
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
-import domNodesSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRichTextEditorFlushChanges } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
-import { TextColorAnnotationAction } from '../../../dto/actions/text-color-annotation-action';
 import { DeleteNodeAnnotationAction } from '../../../dto/actions/delete-node-annotation-action';
 describe('text node', () => {
   it('new RTETextNode should work as expect', () => {
@@ -91,24 +87,6 @@ describe('text node', () => {
     expect(id).not.toEqual('1');
     expect(rest).toEqual({ text: 'This is a new text.', type: 'text' });
   });
-  it('render method should work as expect with inline style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.render()).toBeDefined();
-  });
-  it('render method should work as expect with class style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new UnderlineAnnotationAction(true));
-    expect(textNode.render()).toBeDefined();
-  });
-  it('render method should work as expect with text color class style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new TextColorAnnotationAction('black'));
-    expect(textNode.render()).toBeDefined();
-  });
   it('getAnnotationByType should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
@@ -118,24 +96,12 @@ describe('text node', () => {
       type: 'BOLD',
     });
   });
-  it('registerRef method should work as expect', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    const mockDiv = document.createElement('div');
-    textNode['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(textNode)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(textNode);
-  });
   it('apply method should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     const mockSpan = document.createElement('span');
     const mockHost = document.createElement('div');
     mockHost.append(mockSpan);
-    textNode['registerRef'](mockSpan);
-    const parentSubject = domNodesSubjectFactory.getSubject(mockHost, VegaInternalRichTextEditorFlushChanges);
-    expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(mockSpan, VegaInternalRichTextEditorFlushChanges)).toEqual(parentSubject);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(textNode)).toEqual(mockSpan);
     textNode.apply(new BoldAnnotationAction(true));
     expect(textNode.toJSON()).toEqual({
       id: '1',

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.js

@@ -137,7 +137,9 @@ export class VegaRichTextEditor {
      */
     this.rows = 4;
     /**
-     * Specifies the value of the rich text editor
+     * Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.
+     * It is recommended to use the VegaRTEContent type.
+     * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
      *
      * @vegaVersion 2.34.0
      */
@@ -355,7 +357,7 @@ export class VegaRichTextEditor {
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies the value of the rich text editor"
+        "text": "Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.\nIt is recommended to use the VegaRTEContent type.\nOnly in exceptional cases should the original data in the VegaRTEContentBlock type be used."
       },
       "defaultValue": "VegaRTEContent.createEmptyContent()"
     },

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-page-index-controller.js

@@ -24,6 +24,28 @@ export class VegaTabGroupPageIndexController extends VegaSlimmer {
   handleSelectedDataTargetChange() {
     this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-tab-group-with-click-tab-in-dropdown}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the page index after the tab click
+   *
+   * @param {string} selectedTabDataTarget the tab item property dataTarget
+   */
+  setCurrentPageIndexBySelectedTab(selectedTabDataTarget) {
+    let pageIndex = -1;
+    this.tabPages.forEach((tabPage, index) => {
+      const tabIndex = tabPage.findIndex((tab) => tab.dataTarget === selectedTabDataTarget);
+      if (tabIndex !== -1) {
+        pageIndex = index;
+      }
+    });
+    if (pageIndex >= 0) {
+      this.currentPageIndex = pageIndex;
+    }
+  }
   /* istanbul ignore next */
   /**
    * The `setPageIndex` function sets the current page index to the specified value.
@@ -47,28 +69,6 @@ export class VegaTabGroupPageIndexController extends VegaSlimmer {
       this.currentPageIndex = this.tabPages.length - 1;
     }
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-click-tab-in-dropdown}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the page index after the tab click
-   *
-   * @param {string} selectedTabDataTarget the tab item property dataTarget
-   */
-  setCurrentPageIndexBySelectedTab(selectedTabDataTarget) {
-    let pageIndex = -1;
-    this.tabPages.forEach((tabPage, index) => {
-      const tabIndex = tabPage.findIndex((tab) => tab.dataTarget === selectedTabDataTarget);
-      if (tabIndex !== -1) {
-        pageIndex = index;
-      }
-    });
-    if (pageIndex >= 0) {
-      this.currentPageIndex = pageIndex;
-    }
-  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-selected-target-controller.js

@@ -23,7 +23,12 @@ export class VegaTabGroupSelectedTargetController extends VegaSlimmer {
   handleTabItemClick(dataTarget) {
     const clickEvent = this.clickEventEmitter.emit(dataTarget);
     if (clickEvent && !clickEvent.defaultPrevented) {
-      this.setSelectedDataTarget(dataTarget);
+      if (dataTarget === this.selectedTabDataTarget) {
+        this.vegaTabGroupPageIndexController.setCurrentPageIndexBySelectedTab(dataTarget);
+      }
+      else {
+        this.setSelectedDataTarget(dataTarget);
+      }
     }
   }
 }
@@ -33,3 +38,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSelectedTargetController.prototype, "vegaTabGroupPageIndexController", void 0);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-direction-button-renderer.js

@@ -55,6 +55,9 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       ? this.currentPageIndex === 0
       : this.currentPageIndex + 1 === this.tabPages.length || this.tabPages.length <= 1;
     const icon = direction === 'left' ? 'chevron-backward-rounded' : 'chevron-forward-rounded';
+    const selectedItemKey = source.find((item) => item.key === this.selectedTabDataTarget)
+      ? this.selectedTabDataTarget
+      : '';
     return (h("div", { class: {
         'tab-left-button': direction === 'left',
         'tab-right-button': direction === 'right',
@@ -62,7 +65,7 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       }, 
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => this.onDirectionButtonClick(direction), "aria-label": "No label defined", role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: this.selectedTabDataTarget, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
+      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: selectedItemKey, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
           this.dropdownRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
             this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);

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

@@ -33,6 +33,7 @@ export const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID(
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
 export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');
 export const VegaInternalLeftNavGroupExpand = new VegaInternalEventID('leftNavGroupExpand');
+export const VegaInternalDropdownUpdateTarget = new VegaInternalEventID('dropdownUpdateTarget');
 export const VegaInternalRichTextEditorFlushChanges = new VegaInternalEventID('richTextEditorFlushChanges');
 export const VegaInternalRichTextEditorSelectionRangeChange = new VegaInternalEventID('richTextEditorSelectionRangeChange');
 export const VegaInternalRichTextImageClick = new VegaInternalEventID('richTextImageClick');

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

@@ -9,13 +9,19 @@ import { Observer } from '../change-manager/observer/observer';
 import changeManager from '../change-manager/change-manager';
 import { FIELD_ERROR_MESSAGE_CHANGE } from '../change-manager/subject/static-subject/static-subject-title';
 import { FieldErrorUIControllerSlimmer } from './field-error-ui-controller-slimmer';
-/** 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.
+ */
 export 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
      */

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

@@ -4,20 +4,21 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 as MapToClassField, VegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaSlimmer, MapToComponentField as MapToClassField, VegaSlimmer } from 'vega-slimmer/core';
 import ChangeManager from '../change-manager/change-manager';
 import DomNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalFieldErrorStateChange } from '../event-manager/event-id/vega-internal-event-id';
 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';
+import { FormFieldMessageTranslatorSlimmer } from './form-field-message-translator';
 /** 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();
+    this.formFieldMessageTranslatorSlimmer = new FormFieldMessageTranslatorSlimmer();
     this.fieldErrorUiControllerStrategies = [
       new SiblingContainerNestedErrorContainerRetrievalStrategy(),
       new SiblingContainerSelfRetrievalStrategy(),
@@ -37,7 +38,8 @@ export 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), {
@@ -86,18 +88,6 @@ 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
    */
@@ -109,7 +99,8 @@ export 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);
         }
       }
     });
@@ -124,6 +115,9 @@ export class FieldErrorUIControllerSlimmer extends VegaSlimmer {
     return true;
   }
 }
+__decorate([
+  InjectVegaSlimmer()
+], FieldErrorUIControllerSlimmer.prototype, "formFieldMessageTranslatorSlimmer", void 0);
 __decorate([
   MapToClassField()
 ], FieldErrorUIControllerSlimmer.prototype, "host", void 0);

package/dist/collection/helpers/slimmers/form-field-message-translator.js

@@ -0,0 +1,17 @@
+import { VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalTranslation } from '../translation';
+/** The `FormFieldMessageTranslatorSlimmer` class is to get translated message */
+export 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 || []));
+  }
+}

package/dist/collection/helpers/slimmers/form-field-valid-invoke-slimmer.js

@@ -21,9 +21,12 @@ export 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 });
+          }
         }
       }
     };

package/dist/collection/helpers/slimmers/position-calculation/position-calculation-controller.js

@@ -94,7 +94,7 @@ export 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) {

package/dist/collection/helpers/ui/element-appender.js

@@ -208,6 +208,16 @@ export 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)) {
@@ -219,8 +229,6 @@ export 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/collection/helpers/validator/form-field-controller.js

@@ -12,6 +12,7 @@ import { FormFieldValidationRuleHandlerChain, } from './validation-rule-handler/
 import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { FieldErrorUIControllerSlimmer } from '../slimmers/field-error-ui-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
+import { FormFieldMessageTranslatorSlimmer } from '../slimmers/form-field-message-translator';
 /**
  * The FormFieldController class is a class that validates the value of an input elements
  *
@@ -40,6 +41,7 @@ export 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' }], [
       {
@@ -131,7 +133,7 @@ export 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);
@@ -206,8 +208,9 @@ export 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
@@ -432,11 +435,16 @@ export class FormFieldController {
         if (isSubmittedKey)
           event.preventDefault();
         return isSubmittedKey;
+      case 'VEGA-RICH-TEXT-EDITOR':
+        return false;
       default:
         return isEnterKey;
     }
   }
 }
+__decorate([
+  InjectVegaSlimmer()
+], FormFieldController.prototype, "formFieldMessageTranslatorSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], FormFieldController.prototype, "fieldErrorUIController", void 0);