@globalpayments/vega 2.87.0-beta.1 → 2.88.0

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/vega-input-phone-number-renderer.js

@@ -24,7 +24,7 @@ export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
    * @returns {HTMLVegaFieldLabelElement} An HTMLVegaFieldLabelElement is being returned.
    */
   renderLabel() {
-    return (h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, optional: this.optional, label: this.label }));
   }
   /**
    * The function `renderHint` returns a label element with a hint text if the `hint` property is provided.
@@ -43,6 +43,9 @@ export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaInputPhoneNumberRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputPhoneNumberRenderer.prototype, "label", void 0);

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -99,6 +99,16 @@ export class VegaInputPhoneNumber {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     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 whether the phone number input field is disabled. When `true`,
      * both the country selector and the phone number text field become
@@ -309,6 +319,30 @@ export class VegaInputPhoneNumber {
       "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"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 424c0 13.3-10.7 24-24 24S0 437.3 0 424l0-96c0-53 43-96 96-96l334.1 0-95-95c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 239c4.5 4.5 7 10.6 7 17s-2.5 12.5-7 17L369 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l95-95-334.1 0c-26.5 0-48 21.5-48 48l0 96z"/></svg>`,
+};

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 424c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-53-43-96-96-96l-334.1 0 95-95c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-4.5 4.5-7 10.6-7 17s2.5 12.5 7 17L143 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-95-95 334.1 0c26.5 0 48 21.5 48 48l0 96z"/></svg>`,
+};

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/action-handle-strategy.abstract.js

@@ -58,7 +58,7 @@ export class ActionHandleStrategy {
   getRootContent(child) {
     const parent = child.parent;
     if (parent) {
-      if (parent.constructor.name === 'VegaRTEContent') {
+      if (parent.dtoName === 'VegaRTEContent') {
         return parent;
       }
       else {

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-node-content-strategy.js

@@ -135,6 +135,6 @@ export class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
    * @returns {boolean} True if the block is not the root content block, false otherwise.
    */
   isRTEBlock(block) {
-    return block && block.constructor.name !== 'VegaRTEContent';
+    return block && block.dtoName !== 'VegaRTEContent';
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/annotation-style.js

@@ -9,7 +9,7 @@ import { NodeAnnotation } from './node-annotation.abstract';
  */
 export class RTEAnnotationStyle {
   constructor(dto) {
-    this.dtoType = dto instanceof RTEBlock ? 'block' : 'node';
+    this.dtoName = dto instanceof RTEBlock ? 'block' : 'node';
     this.annotationMap = dto.annotationMap;
   }
   /**
@@ -52,7 +52,7 @@ export class RTEAnnotationStyle {
    * @returns {boolean} - True if the annotation matches the DTO type, false otherwise.
    */
   filterAnnotation(annotation) {
-    return this.dtoType === 'block'
+    return this.dtoName === 'block'
       ? annotation instanceof BlockAnnotation
       : annotation instanceof NodeAnnotation;
   }

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

@@ -23,6 +23,11 @@ import { RTEFilterStylesStrategyRegistry } from '../filter-styles-strategies/fil
 export class RTEBlock {
   constructor(id) {
     this.annotationMap = new Map();
+    /**
+     * Minimize-safe type discriminator. Each concrete sub-class declares its own
+     * `static readonly dtoName = 'ClassName'`.
+     */
+    this.dtoName = this.constructor.name;
     this.id = id;
   }
   /**

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

@@ -20,6 +20,7 @@ import { CodeBlockFilterStylesStrategy } from '../filter-styles-strategies/code-
 export class RTECodeBlock extends RTEBlock {
   constructor(id, content, language) {
     super(id);
+    this.dtoName = RTECodeBlock.dtoName;
     this.type = 'code-block';
     this.annotationMap = new Map([CustomStyleAnnotation.from(CodeBlockFilterStylesStrategy.STYLES)]);
     this.children = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
@@ -108,3 +109,4 @@ export class RTECodeBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
 })();
 RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
+RTECodeBlock.dtoName = 'RTECodeBlock';

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

@@ -6,6 +6,7 @@ import { HTML_VOID_TAGS } from '../../constants/constant';
 export class RTEHtmlBlock extends RTEBlock {
   constructor(id, htmlTag) {
     super(id);
+    this.dtoName = RTEHtmlBlock.dtoName;
     this.type = 'html-block';
     this.children = [];
     this.htmlTag = htmlTag;
@@ -76,3 +77,4 @@ export class RTEHtmlBlock extends RTEBlock {
     return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
   }
 }
+RTEHtmlBlock.dtoName = 'RTEHtmlBlock';

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

@@ -17,6 +17,7 @@ import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strateg
 export class RTEImageBlock extends RTEBlock {
   constructor(id) {
     super(id);
+    this.dtoName = RTEImageBlock.dtoName;
     this.type = 'image';
     this.children = [];
   }
@@ -92,3 +93,4 @@ export class RTEImageBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
   ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
 })();
+RTEImageBlock.dtoName = 'RTEImageBlock';

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

@@ -17,6 +17,7 @@ import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 export class RTEListBlock extends RTEBlock {
   constructor(id, type, options) {
     super(id);
+    this.dtoName = RTEListBlock.dtoName;
     this.type = 'bullet-list';
     this.children = [];
     this.type = type;
@@ -126,3 +127,4 @@ export class RTEListBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
 })();
+RTEListBlock.dtoName = 'RTEListBlock';

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

@@ -24,6 +24,7 @@ import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strateg
 export class RTEListItemBlock extends RTETextBlock {
   constructor(id, nestList, options) {
     super(id, 'list-item', options);
+    this.dtoName = RTEListItemBlock.dtoName;
     /**
      * TODO: Refactor the list item properties children and nestList, merge two properties together.
      *
@@ -127,3 +128,4 @@ export class RTEListItemBlock extends RTETextBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
 })();
+RTEListItemBlock.dtoName = 'RTEListItemBlock';

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

@@ -31,6 +31,7 @@ import { BlockUnlinkLinkGroupStrategy } from '../action-handle-strategies/modify
 export class RTETextBlock extends RTEBlock {
   constructor(id, type, options) {
     super(id);
+    this.dtoName = RTETextBlock.dtoName;
     this.children = [];
     this.type = type;
     const { autoMatchFormat } = options || { autoMatchFormat: true };
@@ -320,3 +321,4 @@ export class RTETextBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTETextBlock.name, new BlockTransformToListStrategy());
 })();
+RTETextBlock.dtoName = 'RTETextBlock';

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

@@ -28,6 +28,7 @@ import { RTEFilterStylesStrategyRegistry } from './filter-styles-strategies/filt
  */
 export class VegaRTEContent {
   constructor(blocks) {
+    this.dtoName = VegaRTEContent.dtoName;
     blocks.forEach((block) => {
       block.parent = this;
     });
@@ -259,3 +260,5 @@ export class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
 })();
+/** Minimize-safe type discriminator for VegaRTEContent. */
+VegaRTEContent.dtoName = 'VegaRTEContent';

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/code-block/code-block-filter-styles-strategy.js

@@ -13,7 +13,7 @@ export class CodeBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return Predicate.isCodeBlock(blockOrNodeInstance.constructor.name);
+    return Predicate.isCodeBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * The code block styles is preset and will convert to vega-code-block element so we don't need to to refill styles back to element.

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/filter-styles-strategy-registry.js

@@ -41,7 +41,7 @@ export class RTEFilterStylesStrategyRegistry {
    * @returns {RTEFilterInlineStylesResult} The result of filtering, including the remaining styles and class names.
    */
   static executeTheStrategyFilterAction(blockOrNodeInstance, styles, classNames) {
-    const dtoClassName = blockOrNodeInstance.constructor.name;
+    const dtoClassName = blockOrNodeInstance.dtoName;
     const strategies = this.getStrategies(dtoClassName);
     const matchedStrategies = strategies.filter((strategy) => {
       return strategy.canFilter(blockOrNodeInstance);

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/list-block/list-block-filter-styles-strategy.js

@@ -15,7 +15,7 @@ export class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return Predicate.isListBlock(blockOrNodeInstance.constructor.name);
+    return Predicate.isListBlock(blockOrNodeInstance.dtoName);
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/list-block/list-heading-item-block-filter-styles-strategy.js

@@ -15,7 +15,7 @@ export class ListHeadingItemBlockFilterStylesStrategy extends HeadingFilterStyle
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return (Predicate.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+    return (Predicate.isListItemBlock(blockOrNodeInstance.dtoName) &&
       this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/list-block/list-item-block-filter-styles-strategy.js

@@ -22,7 +22,7 @@ export class ListItemBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
     const styles = blockOrNodeInstance.getStyles();
     const isDefaultStyles = !styles.fontSize ||
       this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']);
-    return Predicate.isListItemBlock(blockOrNodeInstance.constructor.name) && isDefaultStyles;
+    return Predicate.isListItemBlock(blockOrNodeInstance.dtoName) && isDefaultStyles;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/list-block/list-title-item-block-filter-styles-strategy.js

@@ -15,7 +15,7 @@ export class ListTitleItemBlockFilterStylesStrategy extends TitleFilterStylesStr
    * @inheritDoc
    */
   canFilter(blockOrNodeInstance) {
-    return (Predicate.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+    return (Predicate.isListItemBlock(blockOrNodeInstance.dtoName) &&
       this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/predicate.js

@@ -55,7 +55,7 @@ export class Predicate {
    * @returns {boolean} True if the block or node instance is a text node and has a link annotation, false otherwise.
    */
   static isLinkNode(blockOrNodeInstance) {
-    return (this.isTextNode(blockOrNodeInstance.constructor.name) &&
+    return (this.isTextNode(blockOrNodeInstance.dtoName) &&
       !!blockOrNodeInstance.getAnnotationByType(NodeAnnotationTypeEnum.LINK));
   }
   /**
@@ -65,7 +65,7 @@ export class Predicate {
    * @returns {boolean} True if the block or node instance is a code node, false otherwise.
    */
   static isCodeNode(blockOrNodeInstance) {
-    if (this.isTextNode(blockOrNodeInstance.constructor.name)) {
+    if (this.isTextNode(blockOrNodeInstance.dtoName)) {
       const codeAnnotation = blockOrNodeInstance.getAnnotationByType(NodeAnnotationTypeEnum.CODE);
       return !!codeAnnotation && codeAnnotation.code;
     }
@@ -78,7 +78,7 @@ export class Predicate {
    * @returns {boolean} True if the block or node instance is an image node, false otherwise.
    */
   static isImageNode(blockOrNodeInstance) {
-    return blockOrNodeInstance.constructor.name === 'RTEImageNode';
+    return blockOrNodeInstance.dtoName === 'RTEImageNode';
   }
   /**
    * Check if the given block or node instance is a code block node, which is defined as an instance of RTECodeBlockNode.
@@ -87,7 +87,7 @@ export class Predicate {
    * @returns {boolean} True if the block or node instance is a code block node, false otherwise.
    */
   static isCodeBlockNode(blockOrNodeInstance) {
-    return blockOrNodeInstance.constructor.name === 'RTECodeBlockNode';
+    return blockOrNodeInstance.dtoName === 'RTECodeBlockNode';
   }
 }
 Predicate.RTE_TEXT_NODE_CLASS_NAME = 'RTETextNode';

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-block/paragraph-filter-styles-strategy.js

@@ -27,8 +27,7 @@ export class ParagraphFilterStylesStrategy extends RTEFilterStylesStrategy {
    * @returns {boolean} - True if the instance is a text block with the same type as the strategy, false otherwise.
    */
   canFilter(blockOrNodeInstance) {
-    return (Predicate.isTextBlock(blockOrNodeInstance.constructor.name) &&
-      blockOrNodeInstance.type === this.type);
+    return Predicate.isTextBlock(blockOrNodeInstance.dtoName) && blockOrNodeInstance.type === this.type;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/dto/filter-styles-strategies/text-node/title-heading-node-filter-styles-strategy.js

@@ -36,7 +36,7 @@ export class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrateg
    * @returns {boolean} - True if the instance is a text node and its parent block is a heading or title, false otherwise.
    */
   canFilter(blockOrNodeInstance) {
-    return (Predicate.isTextNode(blockOrNodeInstance.constructor.name) &&
+    return (Predicate.isTextNode(blockOrNodeInstance.dtoName) &&
       this.parentBlockIsHeadingOrTitle(blockOrNodeInstance));
   }
   /**

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

@@ -14,6 +14,7 @@ import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstr
 export class RTECodeBlockNode extends RTEDecoratorNode {
   constructor(id, content, language, parentBlock) {
     super(id);
+    this.dtoName = RTECodeBlockNode.dtoName;
     this.type = NodeTypeEnum.CODE_BLOCK_NODE;
     this.text = '';
     this.annotationMap = new Map();
@@ -61,3 +62,4 @@ export class RTECodeBlockNode extends RTEDecoratorNode {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
   ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
 })();
+RTECodeBlockNode.dtoName = 'RTECodeBlockNode';

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

@@ -26,6 +26,7 @@ import { RTEDecoratorNode } from './decorator-node';
 export class RTEImageNode extends RTEDecoratorNode {
   constructor(id, url, parentBlock, annotationMap) {
     super(id, annotationMap);
+    this.dtoName = RTEImageNode.dtoName;
     this.type = NodeTypeEnum.IMAGE;
     this.url = url;
     this.parent = parentBlock;
@@ -104,3 +105,4 @@ export class RTEImageNode extends RTEDecoratorNode {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
   ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
 })();
+RTEImageNode.dtoName = 'RTEImageNode';

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

@@ -24,6 +24,11 @@ export var NodeTypeEnum;
 export class RTENode {
   constructor(id, annotationMap) {
     this.annotationMap = new Map();
+    /**
+     * Minimize-safe type discriminator. Each concrete sub-class declares its own
+     * `static readonly dtoName = 'ClassName'`.
+     */
+    this.dtoName = this.constructor.name;
     this.id = id;
     if (annotationMap) {
       this.annotationMap = annotationMap;

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

@@ -45,6 +45,7 @@ import { CodeAnnotationAction } from '../actions/code-annotation-action';
 export class RTETextNode extends RTENode {
   constructor(id, text, parentBlock, annotationMap) {
     super(id, annotationMap);
+    this.dtoName = RTETextNode.dtoName;
     this.type = NodeTypeEnum.TEXT;
     this.parent = parentBlock;
     this.text = text;
@@ -440,3 +441,4 @@ export class RTETextNode extends RTENode {
 }
 RTETextNode.registerActionStrategyStatus = {};
 RTETextNode.htmlTag = 'span';
+RTETextNode.dtoName = 'RTETextNode';

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

@@ -86,32 +86,32 @@ ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBloc
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
 ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());
 // Register filter styles strategies (remove redundant default styles during HTML → DTO conversion)
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new AlignmentFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new AlignmentFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new AlignmentFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TextFormatFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new ParagraphFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(1));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(2));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(3));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(4));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(5));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(6));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('title'));
-RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('subtitle'));
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TitleHeadingNodeFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new CodeFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTECodeBlock.name, new CodeBlockFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTECodeBlockNode.name, new CodeBlockNodeFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(1));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(2));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(3));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(4));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(5));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(6));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('title'));
-RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('subtitle'));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.dtoName, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.dtoName, new TextFormatFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new ParagraphFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new HeadingFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new TitleFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.dtoName, new TitleFilterStylesStrategy('subtitle'));
+RTEFilterStylesStrategyRegistry.register(RTETextNode.dtoName, new TitleHeadingNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.dtoName, new CodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.dtoName, new LinkFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEImageNode.dtoName, new ImageFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlock.dtoName, new CodeBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlockNode.dtoName, new CodeBlockNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.dtoName, new ListBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListItemBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListHeadingItemBlockFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListTitleItemBlockFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.dtoName, new ListTitleItemBlockFilterStylesStrategy('subtitle'));

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -16,6 +16,11 @@ import { vegaNonceManager } from '../../../helpers/csp/vega-nonce-manager';
  * Override the methods to customize the rendering and behavior of the button.
  */
 export class VegaRTEToolbarButtonRenderer {
+  constructor() {
+    this.dropdownEl = null;
+    this.itemsContainerEl = null;
+    this.buttonEl = null;
+  }
   /**
    * Checks if the button should be hidden.
    *
@@ -48,6 +53,7 @@ export class VegaRTEToolbarButtonRenderer {
     return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
+        this.dropdownEl = el;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => {
           const payload = input;
           this.handleDropdownClick(payload.detail, editorContext);
@@ -65,6 +71,12 @@ export class VegaRTEToolbarButtonRenderer {
     return h('div', {
       slot: 'items',
       onMouseDown: this.preventDefault,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onKeyDown: (e) => this.handleItemsKeyDown(e),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => {
+        this.itemsContainerEl = el;
+      },
       class: 'rte-dropdown-list',
     }, [
       h('style', { nonce: vegaNonceManager.nonce }, '.rte-dropdown-list vega-dropdown-group vega-dropdown-group { padding-left: 4px }'),
@@ -128,9 +140,12 @@ export class VegaRTEToolbarButtonRenderer {
       selected: this.isSelected(editorContext),
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
+        this.buttonEl = el;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => this.handleButtonClick(editorContext));
       },
       onMouseDown: this.preventDefault,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      onKeyDown: (e) => this.handleButtonKeyDown(e),
     }, [
       this.renderButtonLabel(h, editorContext, label),
       showArrowIcon
@@ -143,7 +158,7 @@ export class VegaRTEToolbarButtonRenderer {
         : null,
     ].filter(isNonNullable));
     if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) {
-      return h('vega-tooltip', { text: tooltip.text, placement: ['bottom', 'top'] }, [button]);
+      return h('vega-tooltip', { text: editorContext.translation.t(tooltip.text), placement: ['bottom', 'top'] }, [button]);
     }
     return button;
   }
@@ -213,4 +228,93 @@ export class VegaRTEToolbarButtonRenderer {
     }
     return null;
   }
+  /**
+   * Handles keyboard events on the toolbar button to support dropdown keyboard accessibility.
+   * - Enter / Space: Toggles the dropdown open/closed.
+   * - ArrowDown / ArrowUp: Opens the dropdown and focuses the first/last item.
+   *
+   * @param {KeyboardEvent} e The keyboard event.
+   */
+  handleButtonKeyDown(e) {
+    if (!this.dropdownEl) {
+      return;
+    }
+    if (e.code === 'Enter' || e.code === 'Space') {
+      e.preventDefault();
+      e.stopPropagation();
+      this.dropdownEl.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    }
+    else if (e.code === 'ArrowDown' || e.code === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+      void this.dropdownEl.show().then(() => {
+        this.focusDropdownItem(e.code === 'ArrowDown' ? 'first' : 'last');
+      });
+    }
+  }
+  /**
+   * Handles keyboard navigation within the dropdown items container.
+   * - ArrowDown/ArrowUp: Moves focus to the next/previous non-disabled item.
+   * - Escape: Closes the dropdown and returns focus to the toolbar button.
+   *
+   * @param {KeyboardEvent} e The keyboard event.
+   */
+  handleItemsKeyDown(e) {
+    var _a, _b, _c;
+    if (e.code === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      if (this.dropdownEl) {
+        void this.dropdownEl.hide();
+      }
+      (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+      return;
+    }
+    if (e.code !== 'ArrowDown' && e.code !== 'ArrowUp') {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    const items = this.getDropdownItems();
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex = items.findIndex((item) => { var _a, _b; return ((_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === ((_b = item.shadowRoot) === null || _b === void 0 ? void 0 : _b.activeElement); });
+    const direction = e.code === 'ArrowDown' ? 1 : -1;
+    const startIndex = currentIndex === -1 ? (e.code === 'ArrowDown' ? 0 : items.length - 1) : currentIndex + direction;
+    for (let offset = 0; offset < items.length; offset++) {
+      const index = (startIndex + offset * direction + items.length) % items.length;
+      if (!items[index].disabled) {
+        (_c = (_b = items[index].shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('li')) === null || _c === void 0 ? void 0 : _c.focus();
+        return;
+      }
+    }
+  }
+  /**
+   * Focuses the first or last non-disabled dropdown item.
+   *
+   * @param {'first' | 'last'} position Whether to focus the first or last item.
+   */
+  focusDropdownItem(position) {
+    var _a, _b;
+    const items = this.getDropdownItems();
+    const orderedItems = position === 'first' ? items : [...items].reverse();
+    for (const item of orderedItems) {
+      if (!item.disabled) {
+        (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('li')) === null || _b === void 0 ? void 0 : _b.focus();
+        return;
+      }
+    }
+  }
+  /**
+   * Gets all dropdown items from the items container.
+   *
+   * @returns {HTMLVegaDropdownItemElement[]} Array of dropdown item elements.
+   */
+  getDropdownItems() {
+    if (!this.itemsContainerEl) {
+      return [];
+    }
+    return Array.from(this.itemsContainerEl.querySelectorAll('vega-dropdown-item'));
+  }
 }