@globalpayments/vega 2.35.0 → 2.36.0

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

@@ -219,6 +219,16 @@ export class VegaDropdown {
      * @vegaVersion 2.3.0
      */
     this.isLazyLoading = false;
+    /**
+     * Determines whether the dropdown position is calculated relative to the screen.
+     *
+     * @VegaWarning When enabled (set to true), it overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective.
+     *
+     * @VegaWarning Currently, when set to true, position calculation may be inaccurate if the dropdown is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content).
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.isScreenPosition = false;
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -837,6 +847,33 @@ export class VegaDropdown {
       },
       "attribute": "search-trigger-by",
       "reflect": false
+    },
+    "isScreenPosition": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "VegaWarning",
+            "text": "When enabled (set to true), it overrides the positionRelativeTo and matchContainerHeight properties, rendering them ineffective."
+          }, {
+            "name": "VegaWarning",
+            "text": "Currently, when set to true, position calculation may be inaccurate if the dropdown is placed inside a scrollable container within a shadowRoot (e.g., inside a vega-modal with scrollable content)."
+          }, {
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Determines whether the dropdown position is calculated relative to the screen."
+      },
+      "attribute": "is-screen-position",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-file-uploader/slimmers/controllers/vega-file-uploader-file-limit-controller.js

@@ -0,0 +1,35 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Controller class for managing the file upload limit in the Vega file uploader component.
+ */
+export class VegaFileUploaderFileLimitController extends VegaSlimmer {
+  /**
+   * Determines if the file uploader is in single mode.
+   *
+   * @returns {boolean} `true` if the maximum file count is 1, otherwise `false`.
+   */
+  isSingleMode() {
+    return Number(this.maxCount) === 1;
+  }
+  /**
+   * Checks if the `maxCount` property is valid. If `maxCount` is less than 1 and not `null`, it will be set to `null`.
+   */
+  checkMaxCount() {
+    if (this.maxCount !== null && this.maxCount < 1) {
+      this.maxCount = null;
+    }
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaFileUploaderFileLimitController.prototype, "maxCount", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad'),
+  MapToComponentMethod('watchMaxCount')
+], VegaFileUploaderFileLimitController.prototype, "checkMaxCount", null);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-container-renderer.js

@@ -23,7 +23,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
      */
     this.handleDropAreaClick = (e) => {
       e.stopPropagation();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         this.triggerFileInputClick();
       }
     };
@@ -41,7 +41,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.inputChangeHandler = (e) => {
       e.stopPropagation();
       const files = this.getVegaFilesFromFileList(e.target.files);
-      this.selectFileChangeEventEmitHandler(files);
+      this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       this.inputElementRef.value = '';
     };
     /**
@@ -52,9 +52,9 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     this.dropHandler = (e) => {
       var _a;
       e.preventDefault();
-      if (!this.disabled) {
+      if (!this.shouldDisableUploadButton()) {
         const files = this.getVegaFilesFromFileList(this.dropFileFilterController.process((_a = e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files));
-        this.selectFileChangeEventEmitHandler(files);
+        this.selectFileChangeEventEmitHandler(this.filterExceedLimitFiles(files));
       }
     };
   }
@@ -72,7 +72,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    */
   render() {
     return (h("div", { class: "vega-file-uploader-container", ref: (ref) => (this.uploaderContainerRef = ref) },
-      h("input", { onChange: this.inputChangeHandler, type: "file", multiple: true, accept: this.accept, style: { display: 'none' }, ref: (node) => (this.inputElementRef = node) }),
+      h("input", { onChange: this.inputChangeHandler, type: "file", multiple: !this.fileLimitController.isSingleMode(), accept: this.accept, style: { display: 'none' }, ref: (node) => (this.inputElementRef = node) }),
       this.variant === 'uploadButton' ? this.renderUploadButton() : this.renderUploadDropArea()));
   }
   /**
@@ -81,7 +81,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
    * @returns {HTMLElement} html element
    */
   renderUploadButton() {
-    return (h("vega-button", { label: "Upload Document", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line'), variant: "secondary", size: "small", disabled: this.disabled, ref: (button) => {
+    return (h("vega-button", { label: "Upload Document", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line'), variant: "secondary", size: "small", disabled: this.shouldDisableUploadButton(), ref: (button) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.triggerFileInputClick);
       } }));
   }
@@ -93,7 +93,7 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
   renderUploadDropArea() {
     return (h("vega-box", { class: {
         'vega-file-upload-area': true,
-        'disabled': this.disabled,
+        'disabled': this.shouldDisableUploadButton(),
       }, padding: "size-24", border: "border-input-field", borderStyle: "dashed", backgroundColor: "bg-tertiary", corners: "rounded-8", tabIndex: 0, onDrop: this.dropHandler, onDragEnter: this.preventDefaultBehavior, onDragOver: this.preventDefaultBehavior, onClick: this.handleDropAreaClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       h("vega-flex", { gap: "size-8", alignItems: "center", justifyContent: "center" },
         h("vega-icon", { color: "text-link", icon: VegaInternalIconManager.getIconKey('arrow-up-from-line') }),
@@ -141,6 +141,29 @@ export class VegaFileUploaderContainerRenderer extends VegaSlimmer {
     }
     return result;
   }
+  /**
+   * Determines if the upload button should be disabled based on the component's state.
+   *
+   * @returns {boolean} True if the upload button should be disabled, otherwise false.
+   */
+  shouldDisableUploadButton() {
+    return this.disabled || !!(this.value && this.maxCount && this.value.length >= this.maxCount);
+  }
+  /**
+   * Filters the selected files to ensure the total number of files does not exceed the maximum count.
+   *
+   * @param {VegaFileUploaderFile[]} selectedFiles - The files selected by the user.
+   * @returns {VegaFileUploaderFile[]} The filtered list of files that do not exceed the maximum count.
+   */
+  filterExceedLimitFiles(selectedFiles) {
+    const maxCount = Number(this.maxCount);
+    if (!isNaN(maxCount) && maxCount && selectedFiles.length) {
+      const existFileCount = this.value ? this.value.length : 0;
+      const availableFileCount = Math.max(0, maxCount - existFileCount);
+      return selectedFiles.slice(0, availableFileCount);
+    }
+    return selectedFiles;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ 'arrow-up-from-line': arrowUpFromLine });
@@ -169,3 +192,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderContainerRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "fileLimitController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderContainerRenderer.prototype, "maxCount", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -19,6 +19,7 @@ import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-co
 import { ObjectArrayRequiredRule } from '../../helpers/validator/rules/object-array-required-rule';
 import { VegaFileUploaderDropFileFilterController } from './slimmers/controllers/vega-file-uploader-drop-file-filter-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaFileUploaderFileLimitController } from './slimmers/controllers/vega-file-uploader-file-limit-controller';
 /**
  * @vegaVersion 2.25.0
  */
@@ -46,6 +47,7 @@ export class VegaFileUploader {
     this.vegaFileUploaderFileStatusRenderer = new VegaFileUploaderFileStatusRenderer();
     this.vegaFileUploaderValueController = new VegaFileUploaderValueController();
     this.dropFileFilterController = new VegaFileUploaderDropFileFilterController();
+    this.fileLimitController = new VegaFileUploaderFileLimitController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaChange);
     this.selectFileChangeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaSelectFileChange);
     this.removeEventEmitter = createEventEmitSlimmer(VegaFileUploader, VegaRemove);
@@ -89,6 +91,12 @@ export class VegaFileUploader {
      * @vegaVersion 2.25.0
      */
     this.disabled = false;
+    /**
+     * Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer.
+     *
+     * @vegaVersion 2.36.0
+     */
+    this.maxCount = null;
     /**
      * Specifies whether uploading a file is mandatory.
      *
@@ -124,6 +132,12 @@ export class VegaFileUploader {
   watchValue(newValue) {
     methodPlaceholder(newValue);
   }
+  /**
+   * Watches the maxCount change.
+   */
+  watchMaxCount() {
+    methodPlaceholder();
+  }
   watchValidationRules() {
     methodPlaceholder();
   }
@@ -252,6 +266,27 @@ export class VegaFileUploader {
       "reflect": false,
       "defaultValue": "false"
     },
+    "maxCount": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number | null",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Specifies the maximum number of files that can be uploaded using the File Uploader. The value must be a positive integer."
+      },
+      "attribute": "max-count",
+      "reflect": false,
+      "defaultValue": "null"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,
@@ -613,6 +648,9 @@ export class VegaFileUploader {
   static get watchers() { return [{
       "propName": "value",
       "methodName": "watchValue"
+    }, {
+      "propName": "maxCount",
+      "methodName": "watchMaxCount"
     }, {
       "propName": "validationRules",
       "methodName": "watchValidationRules"
@@ -648,6 +686,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "dropFileFilterController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFileUploader.prototype, "fileLimitController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaFileUploader.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-font/slimmers/renderers/vega-font-renderer.js

@@ -10,7 +10,14 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaFontRenderer extends VegaSlimmer {
   render(hostClasses) {
     const tagName = this.asController.getTagNameFromPropAs();
-    return tagName ? h(tagName, { className: hostClasses }, [h("slot", null)]) : h("slot", null);
+    if (tagName) {
+      const Tag = tagName;
+      return (h(Tag, { class: hostClasses },
+        h("slot", null)));
+    }
+    else {
+      return h("slot", null);
+    }
   }
 }
 __decorate([

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -516,7 +516,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
+        "resolved": "{ caseSensitive?: boolean; isScreenPosition?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

package/dist/collection/components/vega-pagination/internal/vega-pagination-page-size-selector.js

@@ -1,7 +1,7 @@
 import { h } from '@stencil/core';
 import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
-export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, onChange, translationSlimmer, }) => {
+export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptions, dropdownProps, onChange, translationSlimmer, }) => {
   const mergedPageSizeOptions = pageSizeSelectorOptions.sort((a, b) => a - b);
   const handleChange = (input) => {
     // Because input-select use single mode, so the detail is always a string type
@@ -14,7 +14,7 @@ export const VegaPaginationPageSizeSelector = ({ pageSize, pageSizeSelectorOptio
       h("vega-input-select", { size: "small", source: mergedPageSizeOptions.map((option) => ({
           id: option.toString(),
           displayName: option.toString(),
-        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: { matchTargetWidth: false, searchable: false }, 
+        })), value: pageSize.toString(), placeholder: "Page Size", vegaDropdownProps: Object.assign({ matchTargetWidth: false, searchable: false }, dropdownProps), 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);

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

@@ -91,7 +91,7 @@ export class VegaPagination {
           const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
             ? this.pageSizeSelectorOptions
             : [...this.pageSizeSelectorOptions, this.pageSize];
-          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, dropdownProps: this.dropdownProps, onChange: this.onPageSizeSelectorChange, translationSlimmer: this.translationSlimmer }));
         }
         case 'pageSelector':
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
@@ -285,6 +285,29 @@ export class VegaPagination {
         "text": "Specifies the options available for the page size selector\n   in the pagination component."
       },
       "defaultValue": "[10, 20, 50, 100]"
+    },
+    "dropdownProps": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DropdownPropsForPagination",
+        "resolved": "{ isScreenPosition?: boolean; }",
+        "references": {
+          "DropdownPropsForPagination": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.36.0"
+          }],
+        "text": "Specifies the properties of the vega-dropdown component\n   used to configure the dropdown for the\n   page size selector in pagination."
+      }
     }
   }; }
   static get states() { return {

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

@@ -4,13 +4,14 @@ 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 { h, Host } from '@stencil/core';
 import { VegaDarkModeStyleController } from '../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer';
 import RTETextBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/text-block-renderer';
 import RTEImageBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/image-block-renderer';
 import RTEListBlockRenderer from '../../../vega-rich-text-editor/dto/renderers/blocks/list-block-renderer';
+import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
@@ -21,6 +22,12 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     ];
     VegaDarkModeStyleController.registerCustomDarkModeColor(TextColorToolbarButtonSlimmer.formatDarkModeColor());
   }
+  componentWillLoad() {
+    this.setRTEContent();
+  }
+  watchValueUpdate() {
+    this.setRTEContent();
+  }
   /**
    * Get the rich text content element
    *
@@ -32,6 +39,11 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   render() {
     return h(Host, null, this.renderRichTextContent());
   }
+  setRTEContent() {
+    if (this.content && !(this.content instanceof VegaRTEContent)) {
+      this.content = VegaRTEContent.fromJSON(this.content);
+    }
+  }
   renderRichTextContent() {
     const showPlaceholder = this.shouldShowPlaceholder();
     return (h("div", { ref: (el) => (this.richTextContentRef = el), class: { 'showPlaceholder': showPlaceholder, 'rich-text-content': true }, "data-placeholder": this.placeholder, contenteditable: this.contentEditable }, this.renderContent()));
@@ -74,3 +86,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaRichTextContentRenderer.prototype, "content", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaRichTextContentRenderer.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchValueUpdate')
+], VegaRichTextContentRenderer.prototype, "watchValueUpdate", null);

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

@@ -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',