@globalpayments/vega 2.87.0 → 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-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,

package/dist/collection/constants/runtime-metrics-payload-definition/public-api/ThemeManager/runtime-metrics-payload-definition.js

@@ -3,7 +3,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
     payloadKey: 'IS_OVERRIDECOLORS_METHOD_CALLED',
     payloadDescription: 'Indicate if the method overrideColors of public API ThemeManager is called',
     /**
-     * Indicate whether the method is collected when the method been called .
+     * Indicate whether the method is collected when the method has been called.
      *
      * @param {string} scope - The class name of public api
      * @param {string} methodName - The method name called by the public api
@@ -11,7 +11,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
      */
     canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'overrideColors',
     /**
-     * The function checks if the method is be called.
+     * The function checks if the method has been called.
      *
      * @returns {boolean} A boolean value
      */
@@ -23,7 +23,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
     payloadKey: 'IS_RESET_METHOD_CALLED',
     payloadDescription: 'Indicate if the method reset of public API ThemeManager is called',
     /**
-     * Indicate whether the method is collected when the method been called .
+     * Indicate whether the method is collected when the method has been called.
      *
      * @param {string} scope - The class name of public api
      * @param {string} methodName - The method name called by the public api
@@ -31,7 +31,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
      */
     canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'reset',
     /**
-     * The function checks if the method is be called.
+     * The function checks if the method has been called.
      *
      * @returns {boolean} A boolean value
      */
@@ -43,7 +43,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
     payloadKey: 'IS_TOGGLEDARKMODE_METHOD_CALLED',
     payloadDescription: 'Indicate if the method toggleDarkMode of public API ThemeManager is called',
     /**
-     * Indicate whether the method is collected when the method been called .
+     * Indicate whether the method is collected when the method has been called.
      *
      * @param {string} scope - The class name of public api
      * @param {string} methodName - The method name called by the public api
@@ -51,7 +51,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
      */
     canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'toggleDarkMode',
     /**
-     * The function checks if the method is be called.
+     * The function checks if the method has been called.
      *
      * @returns {boolean} A boolean value
      */
@@ -63,7 +63,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
     payloadKey: 'IS_ISDARKMODE_METHOD_CALLED',
     payloadDescription: 'Indicate if the method isDarkMode of public API ThemeManager is called',
     /**
-     * Indicate whether the method is collected when the method been called .
+     * Indicate whether the method is collected when the method has been called.
      *
      * @param {string} scope - The class name of public api
      * @param {string} methodName - The method name called by the public api
@@ -71,7 +71,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
      */
     canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'isDarkMode',
     /**
-     * The function checks if the method is be called.
+     * The function checks if the method has been called.
      *
      * @returns {boolean} A boolean value
      */
@@ -83,7 +83,7 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
     payloadKey: 'IS_APPLY_BRANDING_METHOD_CALLED',
     payloadDescription: 'Indicate if the method applyBranding of public API ThemeManager is called',
     /**
-     * Indicate whether the method is collected when the method been called .
+     * Indicate whether the method is collected when the method has been called.
      *
      * @param {string} scope - The class name of public api
      * @param {string} methodName - The method name called by the public api
@@ -91,7 +91,27 @@ export const ThemeManagerRuntimeMetricsPayloadDefinition = [
      */
     canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'applyBranding',
     /**
-     * The function checks if the method is be called.
+     * The function checks if the method has been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_VALIDATECOLORACCESSIBILITY_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method validateColorAccessibility of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method has been called.
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'validateColorAccessibility',
+    /**
+     * The function checks if the method has been called.
      *
      * @returns {boolean} A boolean value
      */

package/dist/collection/constants/ui.js

@@ -105,6 +105,7 @@ export const VegaNativeEventName = [
   'sourceCodeChange',
   'rowDragDrop',
   'eventEdit',
+  'todayClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];