@globalpayments/vega 2.35.0 → 2.37.0

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

@@ -4,8 +4,8 @@ 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 { Component, Element, Method, Prop, State } from '@stencil/core';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { Component, Element, Method, Prop, State, Watch } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text-content-renderer';
@@ -28,6 +28,9 @@ export class VegaRichTextContent {
      */
     this.contentEditable = false;
   }
+  watchValueUpdate() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to focus on rich text content editable div
    *
@@ -54,7 +57,7 @@ export class VegaRichTextContent {
   static get properties() { return {
     "content": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "VegaRTEContent",
         "resolved": "VegaRTEContent",
@@ -72,7 +75,7 @@ export class VegaRichTextContent {
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies the text or formatted information displayed by the rich text content."
+        "text": "Specifies the text or formatted information displayed by the rich text content, 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."
       }
     }
   }; }
@@ -109,6 +112,10 @@ export class VegaRichTextContent {
     }
   }; }
   static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "content",
+      "methodName": "watchValueUpdate"
+    }]; }
 }
 __decorate([
   InjectVegaGlobalSlimmer()

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -34,11 +34,22 @@ export class ValueController extends VegaSlimmer {
   disconnectedCallback() {
     ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+  }
   /**
    * Watches the value of the editor and updates the internal value.
    */
   watchValueUpdate() {
-    if (!this.value || this.value.blocks.length === 0) {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
       this.value = VegaRTEContent.createEmptyContent();
     }
     else {
@@ -86,6 +97,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
 __decorate([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);

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-selection-chip/vega-selection-chip.js

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ alignment?: ElementAppenderAlignmentType; maxWidth?: ResponsiveType<SizeType>; minWidth?: ResponsiveType<SizeType>; placement?: ElementAppenderPlacementType; positionRelativeTo?: string; size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; content?: string; disableInteractive?: boolean; text?: string; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; alignment?: ElementAppenderAlignmentType; placement?: ElementAppenderPlacementType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",
@@ -256,7 +256,7 @@ export class VegaSelectionChip {
             "name": "vegaVersion",
             "text": "2.22.0"
           }],
-        "text": "Specifies the tooltip displayed for the selection chip\n   when it is in a disabled state.\nThis provides additional context or information about the chip's\n   functionality or reason for being disabled."
+        "text": "Specifies the `vega-tooltip` displayed for the selection chip\n   when it is in a disabled state.\nThis provides additional context or information about the chip's\n   functionality or reason for being disabled."
       }
     },
     "swatchColor": {

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

@@ -34,12 +34,12 @@ export class VegaTabGroupCloseButtonRenderer extends VegaSlimmer {
       e.stopPropagation();
     };
   }
-  render() {
+  render(item) {
     const vegaCloseIconCss = this.showCloseButton
       ? 'vega-close-icon'
       : 'vega-close-icon vega-hidden';
     return (this.showCloseButton &&
-      this.tabItems.length > 1 && (h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
+      this.tabItems.length > 1 && (h("div", { class: vegaCloseIconCss, onClick: this.onCloseTab, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), "aria-label": 'Close Button' },
       h("vega-icon", { icon: "close", size: "size-12" }))));
   }
 }

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

@@ -45,6 +45,7 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       source.push({
         key: tabItem.dataTarget,
         label: tabItem.label,
+        disabled: tabItem.disabled,
       });
     });
     const translocation = {

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

@@ -34,6 +34,7 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
           'last-page': this.currentPageIndex + 1 === this.tabPages.length,
           'vega-flex-shrink-0': true,
           'v-min-w-min': true,
+          'disabled': Boolean(item.disabled),
         }, "data-target": item.dataTarget, key: item.dataTarget },
         h("div", { class: "vega-tab-container" },
           h("div", { class: {
@@ -41,11 +42,11 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
               'vega-close-icon-space': this.showCloseButton,
             }, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: item.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
             this.renderTabLabelDom(item),
             this.renderCounterBadgeDom(item)),
-          this.closeButtonRenderer.render())));
+          this.closeButtonRenderer.render(item))));
     })));
   }
   renderPrefixIconDom(item) {

package/dist/collection/components/vega-tab-group/vega-tab-group.css

@@ -140,6 +140,15 @@
   color: rgba(var(--v-text-inverted-secondary, 188, 186, 213, 1));
 }
 
+.vega-tab.disabled {
+  pointer-events: none;
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+.vega-tab.disabled .label,
+.vega-tab.disabled vega-icon {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
 :host {
   display: block;
   width: 100%;

package/dist/collection/components/vega-table/internal/vega-table-scrollable-container.js

@@ -1,6 +1,6 @@
 import { h } from '@stencil/core';
 import { isNonNullable } from '../../../types/type-guard';
-export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
+export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, children) => {
   const { maxHeight } = scrollConfig;
   const isVerticalScrollable = isNonNullable(maxHeight);
   const handleVerticalScroll = (e) => {
@@ -14,6 +14,7 @@ export const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, childre
     if (target.scrollTop > 0 && !target.classList.contains('scrolled')) {
       target.classList.add('scrolled');
     }
+    onScroll(e);
   };
   return (h("div", { class: "vega-table-scrollable-container", style: {
       maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-scroll-container-renderer.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaTableScrollableContainer } from '../../internal/vega-table-scrollable-container';
 import { h } from '@stencil/core';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 export class VegaTableScrollContainerRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -15,12 +17,20 @@ export class VegaTableScrollContainerRenderer extends VegaSlimmer {
         this.tableScrollContainerRef.scrollTop = 0;
       }
     };
+    this.notifyContentScrolling = () => {
+      this.isTemplateRenderMode &&
+        ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.host,
+        });
+    };
   }
   watchCurrentPage() {
     this.scrollContainerToTop();
   }
   render(children) {
-    return (h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref) }, children));
+    return (h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref), 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onScroll: () => this.notifyContentScrolling() }, children));
   }
   setTableScrollContainerRef(ref) {
     this.tableScrollContainerRef = ref;
@@ -29,6 +39,12 @@ export class VegaTableScrollContainerRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
 __decorate([
   MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);

package/dist/collection/components/vega-table/vega-table.js

@@ -739,7 +739,7 @@ export class VegaTable {
       "mutable": false,
       "complexType": {
         "original": "VegaTablePagination",
-        "resolved": "{ position?: VegaTablePaginationPosition; vegaChange?: (e: CustomEvent<number>) => void; vegaPageSizeChange?: (e: CustomEvent<number>) => void; } & Partial<Pick<VegaComponentInterface<HTMLVegaPaginationElement>, \"current\" | \"extensions\" | \"pageSize\" | \"pageSizeSelectorOptions\">>",
+        "resolved": "{ position?: VegaTablePaginationPosition; vegaChange?: (e: CustomEvent<number>) => void; vegaPageSizeChange?: (e: CustomEvent<number>) => void; } & Partial<Pick<HTMLVegaPaginationElement, \"pageSize\" | \"current\" | \"extensions\" | \"pageSizeSelectorOptions\">>",
         "references": {
           "VegaTablePagination": {
             "location": "import",

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -25,3 +25,4 @@ export const VEGA_VIRTUAL_SCROLL_TO_BOTTOM = new StaticSubject('VEGA_VIRTUAL_SCR
 export const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');
 export const UPDATE_TRANSLATION = new StaticSubject('UPDATE_TRANSLATION');
 export const DARK_MODE_CHANGE = new StaticSubject('DARK_MODE_CHANGE');
+export const SHADOW_ROOT_ELEMENT_SCROLLING = new StaticSubject('SHADOW_ROOT_ELEMENT_SCROLLING');

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/element-appender-slimmer.js

@@ -7,6 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { ElementAppender } from '../ui/element-appender';
 import { findParent, isParent } from '../../utils/ui';
+import ChangeManager from '../change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../change-manager/subject/static-subject/static-subject-title';
+import { Observer } from '../change-manager/observer/observer';
 export class ElementAppenderSlimmer extends VegaSlimmer {
   constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
     super();
@@ -26,6 +29,7 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
       }
       window.addEventListener('mousedown', this.globalMouseDownHandler);
       document.addEventListener('scroll', this.globalScrollHandler, { capture: true });
+      this.listenShadowRootElementScrolling();
     };
     /* It's a function that listens to the click event on the dropdown. It checks if the trigger
     property is equal to 'click'. If it is, then it toggles the dropdown. */
@@ -189,6 +193,29 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     }
     window.removeEventListener('mousedown', this.globalMouseDownHandler);
     document.removeEventListener('scroll', this.globalScrollHandler);
+    this.removeShadowRootElementScrolling();
+  }
+  /**
+   * Sets up an observer to handle scroll events in a shadow root element.
+   */
+  listenShadowRootElementScrolling() {
+    this.shadowRootElementScrollingObserver = new Observer(this.canAcceptShadowRootScrollEvent.bind(this), this.globalScrollHandler.bind(this));
+    ChangeManager.register(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
+  }
+  /**
+   * Checks if the host element is a parent of the target element.
+   *
+   * @param {ShadowRootElementScrollingPayload} payload - payload.
+   * @returns {boolean} - Can accept.
+   */
+  canAcceptShadowRootScrollEvent(payload) {
+    return Boolean(this.showConfig && isParent(this.showConfig.target, payload.host));
+  }
+  /**
+   * Remove observer for scrolling in a shadow root element.
+   */
+  removeShadowRootElementScrolling() {
+    ChangeManager.unregister(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
   }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;

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/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/slimmers/string-input-formatter-slimmer.js

@@ -4,14 +4,16 @@ 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, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isNonNullable } from '../../types/type-guard';
+import ChangeManager from '../change-manager/change-manager';
+import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalComponentDidRender } from '../event-manager/event-id/vega-internal-event-id';
+import { waitForComponentDidRender } from '../common';
 /** The `StringInputFormatterSlimmer` class in TypeScript is used to format input values based on specified strategies and handle events like keydown, blur, and focus. */
 export class StringInputFormatterSlimmer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.inputFlag = true;
-    this.blurFlag = true;
     /**
      * restore input value
      *
@@ -33,7 +35,6 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
      * @param {InputEvent} e - blur event
      */
     this.onBlur = (e) => {
-      this.blurFlag = false;
       if (this.blurFormatStrategy) {
         const target = e.target;
         const rawValue = target.value;
@@ -52,12 +53,11 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
      * @param {InputEvent} e - input event
      */
     this.onKeyDown = (e) => {
-      this.inputFlag = false;
       const target = e.target;
       const rawValue = target.value;
       const caretPosition = target.selectionStart; // selectionStart is nullable, link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#dom-textarea/input-selectionstart
       if (this.inputFormatStrategy) {
-        const maskedValue = this.inputFormatStrategy.format(rawValue, 
+        const maskedValue = this.inputFormatStrategy.format(rawValue.replace(/\s/g, ''), 
         // Paste input is difference with type input, it can set much characters at one time,
         // so we should make caretPosition as undefined to format all value.
         e.inputType === 'insertFromPaste' ? null : caretPosition);
@@ -76,6 +76,12 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       }
     };
   }
+  /**
+   * Component lifecycle - componentDidRender
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
   /**
    * The setup function initializes input element event listeners based on input and blur format strategies.
    */
@@ -86,7 +92,7 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement = inputElement;
       this.inputFormatStrategy = this.getInputModeStrategy();
       this.blurFormatStrategy = this.getBlurModeStrategy();
-      this.onInit();
+      this.formatValueAfterSetup();
       if (this.inputFormatStrategy) {
         this.inputElement.addEventListener('input', this.onKeyDown, { capture: true });
         this.inputElement.addEventListener('paste', this.onPaste, { capture: true });
@@ -113,19 +119,20 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
     }
   }
   /**
-   * The `onInit` function checks for specific feature flags and conditions to format input values
-   * accordingly.
+   * Format the value by input strategy and blur strategy when formatter config change.
    */
-  onInit() {
-    var _a, _b, _c, _d;
-    if (((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) && !this.isOnFocus() && this.inputFlag) {
-      this.inputFlag = false;
-      this.updateInputValueOnInit('input');
-    }
-    if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus() && this.blurFlag) {
-      this.blurFlag = false;
-      this.updateInputValueOnInit('blur');
-    }
+  formatValueAfterSetup() {
+    void waitForComponentDidRender(this.host).then(() => {
+      var _a, _b, _c, _d;
+      const rawValue = this.inputElement.value;
+      if ((_b = (_a = this.inputFormatStrategy) === null || _a === void 0 ? void 0 : _a.shouldTriggerAtInit) === null || _b === void 0 ? void 0 : _b.call(_a)) {
+        this.host['value'] = this.inputFormatStrategy.format(rawValue);
+      }
+      if (((_d = (_c = this.blurFormatStrategy) === null || _c === void 0 ? void 0 : _c.shouldTriggerAtInit) === null || _d === void 0 ? void 0 : _d.call(_c)) && !this.isOnFocus()) {
+        const maskedValue = this.blurFormatStrategy.format(rawValue);
+        this.updateInputValue(rawValue, maskedValue);
+      }
+    });
   }
   /*
    * The below method is e2e-test covered in
@@ -170,24 +177,10 @@ export class StringInputFormatterSlimmer extends VegaSlimmer {
       this.inputElement.setSelectionRange(newCaretPosition, newCaretPosition);
     }
   }
-  /**
-   * The function `updateInputValueOnInit` updates the input value based on a specified strategy.
-   *
-   * @param {string} strategy - The `strategy` parameter is a string that determines which formatting
-   * strategy to use when updating the input value. It can have two possible values: 'input' or any other
-   * value.
-   */
-  updateInputValueOnInit(strategy) {
-    const rawValue = this.inputElement.value;
-    const maskedValue = strategy === 'input'
-      ? // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.inputFormatStrategy.format(rawValue)
-      : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.blurFormatStrategy.format(rawValue);
-    this.updateInputValue(rawValue, maskedValue);
-    strategy === 'input' && (this.host['value'] = maskedValue);
-  }
 }
 __decorate([
   MapToComponentField()
 ], StringInputFormatterSlimmer.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], StringInputFormatterSlimmer.prototype, "componentDidRender", null);

package/dist/collection/helpers/slimmers/test/element-appender-slimmer.test.js

@@ -10,6 +10,8 @@ import '../../../polyfill/test-polyfill/unit/index';
 import { InjectVegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../element-appender-slimmer';
 import { LogUtility } from '../../../utils/log';
+import ChangeManager from '../../change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../change-manager/subject/static-subject/static-subject-title';
 describe('ElementAppender slimmer test suite', () => {
   const mockedComponentDidLoadMethod = jest.fn();
   const mockedComponentDisconnectedCallbackMethod = jest.fn();
@@ -17,6 +19,7 @@ describe('ElementAppender slimmer test suite', () => {
   class MockedComponent {
     constructor() {
       this.isDropdownShow = false;
+      this.isScreenPosition = false;
       this.appenderController = new MockedAppenderController();
     }
     connectedCallback() {
@@ -49,6 +52,7 @@ describe('ElementAppender slimmer test suite', () => {
       super(() => ({
         target: this.target,
         appendableElement: this.appendableElement,
+        isScreenPosition: this.isScreenPosition,
       }), () => this.trigger, 'isDropdownShow');
     }
   }
@@ -64,6 +68,9 @@ describe('ElementAppender slimmer test suite', () => {
   __decorate([
     MapToComponentField()
   ], MockedAppenderController.prototype, "appendableElement", void 0);
+  __decorate([
+    MapToComponentField()
+  ], MockedAppenderController.prototype, "isScreenPosition", void 0);
   beforeEach(() => {
     mockedComponentDidLoadMethod.mockClear();
     mockedComponentDisconnectedCallbackMethod.mockClear();
@@ -306,5 +313,24 @@ describe('ElementAppender slimmer test suite', () => {
       expect(appendableElement).toHaveClass('vega-force-hidden');
       jest.useRealTimers();
     });
+    test('should re-calculate position while target container is scrolling', () => {
+      const mockedComponent = new MockedComponent();
+      const target = document.createElement('div');
+      const element = new MockHTMLElement('body', 'div');
+      const container = document.createElement('div');
+      container.attachShadow({ mode: 'open' });
+      container.appendChild(target);
+      mockedComponent.target = target;
+      element.classList.add('vega-force-hidden');
+      mockedComponent.appendableElement = element;
+      mockedComponent.isScreenPosition = true;
+      mockedComponent.componentDidLoad();
+      mockedComponent.show();
+      jest.spyOn(mockedComponent.getElementAppender(), 'onScroll');
+      ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+        host: container,
+      });
+      expect(mockedComponent.getElementAppender().onScroll).toBeCalledTimes(1);
+    });
   });
 });

package/dist/collection/helpers/slimmers/test/string-input-formatter-slimmer.test.js

@@ -62,8 +62,9 @@ describe('StringInputFormatterSlimmer test suite', () => {
   });
   test('should format value as expected with thousandCommaStrategy', () => {
     const mockedComponent = new MockedComponent();
+    mockedComponent.host = createMockedInput();
     const thousandCommaStrategy = new ThousandCommaStrategy();
-    const inputEl = createMockedInput();
+    const inputEl = mockedComponent.host;
     inputEl.value = '1234';
     inputEl.selectionStart = inputEl.value.length; // mock browser focus input caret position
     mockedComponent['stringFormatter']['inputRef'] = inputEl;

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

@@ -435,6 +435,8 @@ export class FormFieldController {
         if (isSubmittedKey)
           event.preventDefault();
         return isSubmittedKey;
+      case 'VEGA-RICH-TEXT-EDITOR':
+        return false;
       default:
         return isEnterKey;
     }

package/dist/collection/helpers/validator/rules/rich-text-editor-required-rule.js

@@ -1,6 +1,6 @@
 import { VegaRTEContent } from '../../../components/vega-rich-text-editor/dto/content-state';
 /**
- * A rule that checks if input range is empty or not
+ * A rule that checks if the input range is empty or not
  *
  * @implements {FormFieldValidationRule<string[]>}
  */
@@ -12,11 +12,12 @@ export class RichTextEditorRequiredRule {
    * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
    */
   evaluate(input) {
-    var _a;
+    var _a, _b;
     if (!this.isAcceptedInputType(input)) {
       throw new Error(`Invalid value ${input} for rich text editor`);
     }
-    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 0 && input.blocks.some((block) => block.isNotEmpty());
+    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 1 || // isValid: true when the length is greater than 1 to keep the same behavior as vega-textarea
+      (((_b = input === null || input === void 0 ? void 0 : input.blocks) === null || _b === void 0 ? void 0 : _b.length) === 1 && input.blocks.some((block) => block.isNotEmpty()));
     return {
       isValid,
       message: isValid ? '' : 'This field is required',