@globalpayments/vega 2.87.0-beta.1 → 2.88.0

package/dist/collection/components/vega-rich-text-editor/helpers/extension-context-manager.js

@@ -12,9 +12,15 @@ class RTEExtensionContextManager {
    *
    * @param {RTEExtensionContext} context - The extension context to store.
    */
-  setExtensionContext(context) {
+  updateExtensionContext(context) {
     if (context && context.host) {
-      this.extensionContextMap.set(context.host, context);
+      let newContext = context;
+      const existingContext = this.extensionContextMap.get(context.host);
+      // If there is already an existing context for the host, merge the new context with the existing one to avoid overwriting any properties that are not included in the new context.
+      if (existingContext) {
+        newContext = Object.assign(Object.assign({}, existingContext), context);
+      }
+      this.extensionContextMap.set(context.host, newContext);
     }
   }
   /**

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

@@ -19,6 +19,9 @@ export { RTELanguageToolbarButtonRenderer } from './extensions/languages/languag
 export { VegaRTELanguageExtension } from './extensions/languages/language-extension';
 export { VegaRTEFunctionExtension } from './extensions/functions/function-extension';
 export { VegaRTETableExtension } from './extensions/table/table-extension';
+export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
+export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
+export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';
@@ -44,5 +47,6 @@ export { BlockToRTEBlockStrategyAbstract } from './slimmers/controllers/helper/e
 export { htmlElementToAnnotationGenerator };
 // preset toolbar buttons
 export { VegaRTEDefaultTextStyleItems, VegaRTEPresetToolbarItems } from './constants/constant';
+export { VegaRTEDefaultLineHeightOptions } from './extensions/line-height/constants';
 // filter styles strategy
 export { RTEFilterStylesStrategy } from './dto/filter-styles-strategies/filter-styles-strategy.abstract';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/bold-annotaion-handler.js

@@ -6,7 +6,7 @@ export class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/code-annotation-handler.js

@@ -5,7 +5,7 @@ export class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/color-annotation-handler.js

@@ -7,7 +7,7 @@ export class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator.js

@@ -62,11 +62,11 @@ class HtmlElementToAnnotationGenerator {
    */
   generate(targetDto, element, options = { autoMatchFormat: true }) {
     if (options && options.filterInlineStyles) {
-      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.name, element);
+      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.dtoName, element);
     }
     // Guard against <a> wrapping block content (e.g. <a><video></a>), which is processed as an
     // html-block (targetDto !== RTETextNode) — link-only mode should not apply in that case.
-    const isLinkElement = Predicate.isLinkElement(element) && targetDto.name === 'RTETextNode';
+    const isLinkElement = Predicate.isLinkElement(element) && targetDto.dtoName === 'RTETextNode';
     const annotations = this.handlers
       .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
       .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
@@ -79,7 +79,7 @@ class HtmlElementToAnnotationGenerator {
       return Object.assign(Object.assign({}, annotations), result);
     }, {});
     this.removeTextStyleDefaultsFromCustomStyle(annotations);
-    const strategies = RTEFilterStylesStrategyRegistry.getStrategies(targetDto.name);
+    const strategies = RTEFilterStylesStrategyRegistry.getStrategies(targetDto.dtoName);
     for (const strategy of strategies) {
       if (options.autoMatchFormat || strategy.alwaysFilter) {
         strategy.filterAnnotations(annotations);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-alt-annotation-handler.js

@@ -5,7 +5,7 @@ export class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstra
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
+    return targetDto.dtoName === 'RTEImageNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-size-annotation-handler.js

@@ -5,7 +5,7 @@ export class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
+    return targetDto.dtoName === 'RTEImageNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/indent-annotation-handler.js

@@ -5,7 +5,7 @@ export class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.dtoName);
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/inline-html-annotation-handler.js

@@ -19,7 +19,7 @@ export class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbst
    * @inheritDoc
    */
   canHandle(targetDto, options) {
-    return targetDto.name === 'RTETextNode' && options.autoMatchFormat === false;
+    return targetDto.dtoName === 'RTETextNode' && options.autoMatchFormat === false;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/italic-annotation-handler.js

@@ -6,7 +6,7 @@ export class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/link-annotation-handler.js

@@ -21,7 +21,7 @@ export class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @returns {boolean} - .
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/strike-through-annotation-handler.js

@@ -6,7 +6,7 @@ export class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyA
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/text-align-annotation-handler.js

@@ -8,7 +8,7 @@ export class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @returns {boolean} - .
    */
   canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.dtoName);
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/text-style-annotation-handler.js

@@ -9,7 +9,7 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @returns {boolean} - .
    */
   canHandle(targetDto, options) {
-    return !!options.autoMatchFormat && targetDto.name === 'RTETextBlock';
+    return !!options.autoMatchFormat && targetDto.dtoName === 'RTETextBlock';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/underline-annotation-handler.js

@@ -6,7 +6,7 @@ export class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+    return targetDto.dtoName === 'RTETextNode';
   }
   /**
    * Handle annotation.

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

@@ -48,6 +48,7 @@ export class HistoryController extends ComponentValueHistoryControllerSlimmer {
    * Restores the previous state from the undo stack.
    */
   async undo() {
+    this.hasPendingHistory = false;
     if (this.undoStack.length > 1) {
       const clonedState = this.undoStack.pop().clone();
       this.redoStack.push(clonedState);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry.js

@@ -76,7 +76,7 @@ class StateEntityRenderingRegistry {
    * @returns {entity is VegaRTEContent} - True if the entity is a VegaRTEContent instance, false otherwise.
    */
   isVegaRTEContent(entity) {
-    return entity && entity.constructor.name === 'VegaRTEContent';
+    return entity && entity.dtoName === 'VegaRTEContent';
   }
 }
 export default new StateEntityRenderingRegistry();

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

@@ -43,6 +43,10 @@ export class ToolbarRenderer extends VegaSlimmer {
           return this.horizontalAlignmentToolbarButtonSlimmer;
         case 'codeBlock':
           return this.codeBlockToolbarButtonSlimmer;
+        case 'undo':
+          return this.undoToolbarButtonSlimmer;
+        case 'redo':
+          return this.redoToolbarButtonSlimmer;
       }
     };
   }
@@ -83,6 +87,7 @@ export class ToolbarRenderer extends VegaSlimmer {
             sourceEditMode: this.sourceView,
             host: this.host,
             rteRange: this.selectionController.getCurrentRange(),
+            translation: this.translationSlimmer,
           };
           if (!customRenderer.isHidden(renderContext)) {
             totalVisibleCount++;
@@ -152,12 +157,21 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "undoToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "redoToolbarButtonSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceView", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/redo-toolbar-button-slimmer.js

@@ -0,0 +1,36 @@
+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 { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import redoIcon from '../../../assets/redo';
+export class RedoToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'arrow-turn-right',
+      tooltip: {
+        text: 'Redo',
+      },
+      autoFocusOnClick: false,
+    });
+  }
+  onClick() {
+    void this.historyController.redo();
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return super.isDisabled() || !this.historyController.canRedo();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'arrow-turn-right': redoIcon });
+})();
+__decorate([
+  MapToComponentField()
+], RedoToolbarButtonSlimmer.prototype, "historyController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/undo-toolbar-button-slimmer.js

@@ -0,0 +1,36 @@
+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 { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import undoIcon from '../../../assets/undo';
+export class UndoToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'arrow-turn-left',
+      tooltip: {
+        text: 'Undo',
+      },
+      autoFocusOnClick: false,
+    });
+  }
+  onClick() {
+    void this.historyController.undo();
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return super.isDisabled() || !this.historyController.canUndo();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'arrow-turn-left': undoIcon });
+})();
+__decorate([
+  MapToComponentField()
+], UndoToolbarButtonSlimmer.prototype, "historyController", void 0);

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

@@ -92,7 +92,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       this.renderErrorMessage()));
   }
   renderLabel() {
-    return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+    return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, optional: this.optional, label: this.label })));
   }
   renderContent() {
     return (h(Fragment, null,
@@ -112,6 +112,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);

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

@@ -44,6 +44,8 @@ import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
 import { HistoryController } from './slimmers/controllers/history-controller';
 import { CodeBlockToolbarButtonSlimmer } from './slimmers/renderers/tools/code-block-toolbar-button-slimmer';
+import { UndoToolbarButtonSlimmer } from './slimmers/renderers/tools/undo-toolbar-button-slimmer';
+import { RedoToolbarButtonSlimmer } from './slimmers/renderers/tools/redo-toolbar-button-slimmer';
 import { InternalCodeBlockSelectionController } from './slimmers/controllers/internal-code-block-selection-controller';
 import { SourceEditToolbarButtonSlimmer } from './slimmers/renderers/tools/source-edit-toolbar-button-slimmer';
 import { RTEExtensionController } from './slimmers/controllers/extension-controller';
@@ -92,6 +94,8 @@ export class VegaRichTextEditor {
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
     this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.undoToolbarButtonSlimmer = new UndoToolbarButtonSlimmer();
+    this.redoToolbarButtonSlimmer = new RedoToolbarButtonSlimmer();
     this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
@@ -126,6 +130,16 @@ export class VegaRichTextEditor {
      * @vegaVersion 2.34.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * Specifies a placeholder string that displays as a
      *    temporary hint or example within the rich text editor.
@@ -299,6 +313,30 @@ export class VegaRichTextEditor {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "placeholder": {
       "type": "string",
       "mutable": false,
@@ -840,6 +878,12 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "undoToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "redoToolbarButtonSlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);

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

@@ -8,7 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 export class VegaSectionTitleRenderer extends VegaSlimmer {
   render() {
-    return (h("vega-flex", { "align-items": "start", "justify-content": "start", gap: "size-8", class: this.size === 'small' ? 'section-title-small' : undefined },
+    return (h("vega-flex", { "aria-hidden": "true", "align-items": "start", "justify-content": "start", gap: "size-8", class: this.size === 'small' ? 'section-title-small' : undefined },
       this.renderPrefixIcon(),
       this.renderText()));
   }

package/dist/collection/components/vega-section-title/vega-section-title.js

@@ -45,7 +45,8 @@ export class VegaSectionTitle {
     this.size = 'default';
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    const ariaLabel = [this.titleText, this.description].filter(Boolean).join(', ');
+    return sanitizeVegaComponent(h(Host, { role: ariaLabel ? 'group' : undefined, "aria-label": ariaLabel || undefined }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-section-title"; }
   static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,7 @@ export class VegaTableRenderer extends VegaSlimmer {
         Array.from(this.host.querySelectorAll('vega-table-cell')).some((cell) => cell.overflow);
       return (h("table", { class: {
           'v-table-fixed': tableLayoutFixed,
+          'show-edit-error': this.showEditError,
         } },
         this.columns.length > 0 && [
           this.vegaTableColGroupRenderer.render(),
@@ -75,6 +76,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "columnStructureModel", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "showEditError", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);

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

@@ -79,7 +79,7 @@ vega-form {
   display: contents;
 }
 
-*::part(field-error-message) {
+table:not(.show-edit-error) *::part(field-error-message) {
   display: none !important;
 }
 

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

@@ -235,6 +235,13 @@ export class VegaTable {
      * @vegaVersion 2.22.0
      */
     this.sortConfig = { type: 'multiple' };
+    /**
+     * Indicates whether to show the form field error message in editing state.
+     *   When set to true, the error message will be shown below the form field, otherwise the error message will be hidden.
+     *
+     * @vegaVersion 2.87.0
+     */
+    this.showEditError = false;
   }
   watchSelectedRowKeySet() {
     methodPlaceholder();
@@ -933,6 +940,27 @@ export class VegaTable {
         "text": "Defines the column sorting options\nHas optional property type: single | multiple\nIf not specified, it defaults to multiple column sorting"
       },
       "defaultValue": "{ type: 'multiple' }"
+    },
+    "showEditError": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.87.0"
+          }],
+        "text": "Indicates whether to show the form field error message in editing state.\n  When set to true, the error message will be shown below the form field, otherwise the error message will be hidden."
+      },
+      "attribute": "show-edit-error",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -200,6 +200,16 @@ export class VegaTextarea {
      * @vegaVersion 1.11.0
      */
     this.minLength = null;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * Determines whether the user can vertically resize the text area by
      * dragging its bottom-right corner. When `false`, the resize handle is
@@ -312,7 +322,7 @@ export class VegaTextarea {
       this.hint && this.renderHintMessage()), this.host);
   }
   renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+    return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label, optional: this.optional, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
       } }));
   }
@@ -620,6 +630,30 @@ export class VegaTextarea {
       "reflect": true,
       "defaultValue": "null"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "resizable": {
       "type": "boolean",
       "mutable": false,