@globalpayments/vega 2.67.0 → 2.68.0

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

@@ -11,6 +11,7 @@ import { CenterAlignToolbarButtonSlimmer } from './center-align-toolbar-button-s
 import { RightAlignToolbarButtonSlimmer } from './right-align-toolbar-button-slimmer';
 import { JustifyAlignToolbarButtonSlimmer } from './justify-align-toolbar-button-slimmer';
 import { VisualModeToolbarButtonSlimmer } from '../visual-mode-toolbar-button-slimmer.abstract';
+import { HorizontalAlignmentAnnotationAction } from '../../../../dto/actions/horizontal-alignment-annotation-action';
 export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -60,7 +61,7 @@ export class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarBu
     return (super.isDisabled() ||
       this.selectionController
         .getSelectedBlocks()
-        .some((block) => block.type === 'code-block'));
+        .some((block) => this.shouldDisabledToolbar(block, HorizontalAlignmentAnnotationAction.name)));
   }
 }
 __decorate([

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

@@ -11,6 +11,7 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { ImageUpdateUrlAction } from '../../../dto/actions/image-update-url-action';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
+import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -56,8 +57,10 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlock = this.selectionController.getSelectedBlocks()[0];
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)));
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
+      this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
 }
 (() => {

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

@@ -10,7 +10,6 @@ import { MapToComponentField } from 'vega-slimmer/core';
 import { ItalicAnnotationAction } from '../../../dto/actions/italic-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -38,9 +37,8 @@ export class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, ItalicAnnotationAction.name);
       }));
   }
 }

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

@@ -9,7 +9,6 @@ import outdent from '../../../assets/outdent';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
 import { IndentAnnotationAction } from '../../../dto/actions/indent-annotation-action';
 import { MapToComponentField } from 'vega-slimmer/core';
-import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -25,10 +24,8 @@ export class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
   }
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof RTEImageNode));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, IndentAnnotationAction.name)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {

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

@@ -10,14 +10,12 @@ 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';
 import { MapToComponentField } from 'vega-slimmer/core';
-import { RTETextNode } from '../../../dto/nodes/text-node';
 import { LinkAnnotationAction } from '../../../dto/actions/link-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 import { generateUUID } from '../../../../../utils/misc';
 import { waitForComponentDidRender } from '../../../../../helpers/common';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
-import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -65,8 +63,7 @@ export class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof RTETextNode &&
-          ActionHandleStrategyRegistry.canHandle(LinkAnnotationAction.name, node)) ||
+        return this.shouldDisabledToolbar(node, LinkAnnotationAction.name) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
           ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));

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

@@ -9,7 +9,6 @@ import indent from '../../../assets/indent';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { IndentAnnotationAction } from '../../../dto/actions/indent-annotation-action';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
-import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -25,10 +24,8 @@ export class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
   }
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof RTEImageNode));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, IndentAnnotationAction.name)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {

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

@@ -10,7 +10,6 @@ import { RTETextNode } from '../../../dto/nodes/text-node';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { StrikethroughAnnotationAction } from '../../../dto/actions/strikethrough-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -41,9 +40,8 @@ export class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSl
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, StrikethroughAnnotationAction.name);
       }));
   }
 }

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

@@ -15,7 +15,6 @@ import { VegaChange, VegaPopoverHide, VegaPopoverShow, } from '../../../../../he
 import { VegaDarkModeStyleController } from '../../../../../helpers/theme/controllers/dark-mode-style-controller';
 import { RTE_TEXT_COLORS } from '../../../constants/constant';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -109,10 +108,9 @@ export class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+          this.shouldDisabledToolbar(node, TextColorAnnotationAction.name);
       }));
   }
 }

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

@@ -12,11 +12,9 @@ import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annot
 import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { TextStyleAnnotation } from '../../../dto/annotations/text-style-annotation';
 import { BoldAnnotation } from '../../../dto/annotations/bold-annotation';
-import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import { BlockAnnotationTypeEnum } from '../../../dto/annotations/block-annotation.abstract';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaDropdownClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -67,10 +65,9 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
     return false;
   }
   isDisabled() {
-    const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, TextStyleAnnotationAction.name)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);

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

@@ -10,7 +10,6 @@ import { RTETextNode } from '../../../dto/nodes/text-node';
 import { MapToComponentField } from 'vega-slimmer/core';
 import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
-import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
 import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-slimmer.abstract';
 export class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
@@ -41,9 +40,8 @@ export class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimme
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return node instanceof RTECodeBlockNode ||
-          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, UnderlineAnnotationAction.name);
       }));
   }
 }

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
 import { MapToComponentField } from 'vega-slimmer/core';
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 /**
  * Abstract class for visual mode toolbar buttons, except for the source edit button.
  */
@@ -31,6 +32,16 @@ export class VisualModeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     return super.isDisabled() && !this.sourceView;
   }
+  /**
+   * Check if the node support text annotation
+   *
+   * @param {Nullable< RTENode| RTEBlock>} node - The RTE node to check
+   * @param {string} annotationActionName - The annotation name to check
+   * @returns {boolean} - True if the node support text annotation, false otherwise
+   */
+  shouldDisabledToolbar(node, annotationActionName) {
+    return node && !ActionHandleStrategyRegistry.canHandle(annotationActionName, node);
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -23,7 +23,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
           'disabled': this.disabled,
           'vega-hidden': this.sourceView,
         }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
-        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
+        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions }),
         this.renderCharacterCounter()));
     };
     this.renderCharacterCounter = () => {
@@ -155,6 +155,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);

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

@@ -1,7 +1,13 @@
 import { LogUtility } from '../../../../../utils/log';
+import { ActionHandlerInterceptorRegistry } from '../../../dto/action-handle-strategies/action-handle-interceptor-registry';
+import { ActionHandlerInterceptor } from '../../../dto/action-handle-strategies/action-handle-interceptor.abstract';
 import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
 import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { AppendChildrenStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/append-children-strategy';
 import { AnnotationAction } from '../../../dto/actions/annotation-action.abstract';
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { ModifyContentActionType, } from '../../../dto/actions/modify-content-action.abstract';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { RTETextNode } from '../../../dto/nodes/text-node';
 class MockAnnotationAction extends AnnotationAction {
@@ -33,9 +39,33 @@ test('ActionHandleStrategyRegistry methods executeTheStrategy should work proper
   expect(strategy.handleAction).toBeCalledWith(action, target);
 });
 test('ActionHandleStrategyRegistry methods executeTheStrategy should log error if the strategy is not exist', () => {
-  spyOn(LogUtility, 'error');
+  spyOn(LogUtility, 'warn');
   const action = new MockAnnotationAction();
   const target = new RTEImageNode('1', 'test url', null);
   ActionHandleStrategyRegistry.executeTheStrategy(action, target);
-  expect(LogUtility.error).toBeCalledWith(`Type MockAnnotationAction action handle strategy is not registered in class RTEImageNode`);
+  expect(LogUtility.warn).toBeCalledWith(`Type MockAnnotationAction action handle strategy is not registered in class RTEImageNode`);
+});
+test('ActionHandleStrategyRegistry methods executeTheStrategy should work properly when interceptor is present', () => {
+  const customAction = new AppendChildrenAction([new RTETextNode('1', 'child', null)]);
+  const block = new RTETextBlock('block1', 'paragraph');
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, RTETextBlock.name, new AppendChildrenStrategy());
+  class CustomInterceptorStrategy extends ActionHandlerInterceptor {
+    canIntercept(_action, target) {
+      return !!target;
+    }
+    intercept() {
+      LogUtility.warn('Interceptor executed');
+    }
+  }
+  const interceptor = new CustomInterceptorStrategy();
+  spyOn(interceptor, 'canIntercept').and.callThrough();
+  spyOn(interceptor, 'intercept').and.callThrough();
+  ActionHandlerInterceptorRegistry.register(ModifyContentActionType.APPEND_CHILDREN, RTETextBlock.name, interceptor);
+  block.apply(customAction);
+  expect(interceptor.intercept).toBeCalledTimes(1);
+  expect(interceptor.intercept).toBeCalledTimes(1);
+  expect(block.children.length).toBe(0);
+  ActionHandlerInterceptorRegistry.unregister(ModifyContentActionType.APPEND_CHILDREN, RTETextBlock.name, interceptor);
+  block.apply(customAction);
+  expect(block.children.length).toBe(1);
 });

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

@@ -0,0 +1,69 @@
+import { BlockDeleteNodeContentStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-delete-node-content-strategy';
+import { VegaRTEContent } from '../../../dto/content-state';
+class MockDeleteStrategy extends BlockDeleteNodeContentStrategy {
+  getPreviousBlockMethod(currentBlock) {
+    return super['getPreviousBlock'](currentBlock);
+  }
+  handleAction() {
+    throw new Error('Method not implemented.');
+  }
+}
+const strategy = new MockDeleteStrategy();
+test('BlockDeleteNodeContentStrategy#getPreviousBlock should work properly', () => {
+  const content = VegaRTEContent.fromJSON([
+    {
+      id: '1',
+      type: 'paragraph',
+      nodes: [
+        { id: '1-1', type: 'text', text: 'A' },
+        { id: '1-1', type: 'text', text: 'B' },
+      ],
+    },
+    {
+      id: '2',
+      type: 'paragraph',
+      nodes: [],
+    },
+    {
+      id: '2',
+      type: 'html-block',
+      children: [
+        {
+          id: '2-1',
+          type: 'paragraph',
+          nodes: [],
+        },
+        {
+          id: '2-2',
+          type: 'paragraph',
+          nodes: [],
+        },
+      ],
+    },
+    {
+      id: '3',
+      type: 'number-list',
+      blocks: [
+        {
+          id: '3-1',
+          type: 'list-item',
+          nodes: [],
+        },
+        {
+          id: '3-2',
+          type: 'list-item',
+          nodes: [],
+        },
+      ],
+    },
+  ]);
+  const htmlBlock = content.children[2];
+  const list = content.children[3];
+  expect(strategy.getPreviousBlockMethod(content.children[0])).toBeUndefined();
+  expect(strategy.getPreviousBlockMethod(content.children[1])).toEqual(content.children[0]);
+  expect(strategy.getPreviousBlockMethod(htmlBlock)).toEqual(content.children[1]);
+  expect(strategy.getPreviousBlockMethod(htmlBlock.children[0])).toEqual(content.children[1]);
+  expect(strategy.getPreviousBlockMethod(htmlBlock.children[1])).toEqual(htmlBlock.children[0]);
+  expect(strategy.getPreviousBlockMethod(list.children[0])).toEqual(htmlBlock);
+  expect(strategy.getPreviousBlockMethod(list.children[1])).toEqual(list.children[0]);
+});

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

@@ -0,0 +1,70 @@
+import { RTEAnnotationStyle } from '../../dto/annotations/annotation-style';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import '../../dto/setup';
+describe('annotation-style', () => {
+  it('toCssText', () => {
+    const textBlock = RTETextBlock.from({
+      id: '1',
+      type: 'paragraph',
+      annotations: {
+        textAlign: 'center',
+        customStyle: {
+          color: 'red',
+          fontSize: '16px',
+        },
+      },
+      nodes: [],
+    });
+    const blockAnnotationStyle = new RTEAnnotationStyle(textBlock);
+    expect(blockAnnotationStyle.toCssText()).toEqual('color: red;font-size: 16px;');
+    expect(blockAnnotationStyle.toCssText({ standalone: true })).toEqual('font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: center;color: red;');
+    expect(blockAnnotationStyle.toCssText(null, null, {})).toEqual('');
+    expect(blockAnnotationStyle.toCssText(null, null, { color: 'red' })).toEqual('color: red;');
+    expect(blockAnnotationStyle.toCssText(null, null, { backgroundColor: 'blue', fontWeight: 'bold' })).toEqual('background-color: blue;font-weight: bold;');
+  });
+  it('toJSON', () => {
+    const textBlock = RTETextBlock.from({
+      id: '1',
+      type: 'paragraph',
+      annotations: {
+        textAlign: 'center',
+        customStyle: {
+          color: 'red',
+          fontSize: '16px',
+        },
+      },
+      nodes: [
+        {
+          id: 'n1',
+          type: 'text',
+          text: 'Sample text',
+          annotations: {
+            bold: true,
+            italic: false,
+            underline: true,
+            customStyle: {
+              textDecoration: 'line-through',
+            },
+          },
+        },
+      ],
+    });
+    const blockAnnotationStyle = new RTEAnnotationStyle(textBlock);
+    expect(blockAnnotationStyle.toJSON({ standalone: true })).toEqual({
+      color: 'red',
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      fontWeight: '500',
+      lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
+      textAlign: 'center',
+    });
+    const nodeAnnotationStyle = new RTEAnnotationStyle(textBlock.children[0]);
+    expect(nodeAnnotationStyle.toJSON()).toEqual({ textDecoration: 'line-through' });
+    expect(nodeAnnotationStyle.toJSON({ standalone: true }, ['textDecoration'])).toEqual({
+      fontWeight: '700',
+      textDecoration: 'underline line-through',
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor-toolbar-button/vega-rich-text-editor-toolbar-button.css

@@ -6,6 +6,9 @@
 :host {
   display: inline-block;
 }
+:host ::slotted(vega-font.v-font-field-label-sm) {
+  line-height: 16px;
+}
 
 .rich-text-editor-toolbar-btn {
   display: flex;

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; alignment?: ElementAppenderAlignmentType; placement?: ElementAppenderPlacementType; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",

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

@@ -59,7 +59,8 @@ table.v-table-fixed {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.vega-table-scrollable-container.scrolled vega-table-head.fixed-header {
+.vega-table-scrollable-container.scrolled vega-table-head.fixed-header,
+.vega-table-scrollable-container.scrolled ::slotted(vega-table-head.fixed-header) {
   box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.1); /* TODO: wait design token upgrade */
 }
 

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

@@ -14,10 +14,11 @@ import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-co
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaBlur, VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaLabelButtonClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTextareaRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-textarea/runtime-metrics-payload-definition';
+import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 /**
  * @vegaVersion 1.11.0
  */
@@ -47,6 +48,7 @@ export class VegaTextarea {
     });
     this.changeEventEmitter = createEventEmitSlimmer(VegaTextarea, VegaChange);
     this.blurEventEmitter = createEventEmitSlimmer(VegaTextarea, VegaBlur);
+    this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaTextarea, VegaLabelButtonClick);
     this.textareaEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.inputContainerRef);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTextareaRuntimeMetricsPayloadDefinition);
     this.currentCharCount = 0;
@@ -82,6 +84,15 @@ export class VegaTextarea {
      * @vegaVersion 1.11.0
      */
     this.label = '';
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @vegaVersion __VERSION__
+     */
+    this.labelSuffixButtonConfig = null;
     /**
      * Determines whether to display a character counter
      *    for the textarea.
@@ -192,6 +203,9 @@ export class VegaTextarea {
     this.isExceedMaxLength = (value, maxLength) => {
       return maxLength != null ? value.length > maxLength : false;
     };
+    this.handleLabelButtonClick = () => {
+      this.labelButtonClickEventEmitter.emit();
+    };
   }
   watchValue(value) {
     this.changeEventEmitter.emit(value);
@@ -230,7 +244,9 @@ 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 }));
+    return (h("vega-field-label", { onClick: this.inputFocus, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+      } }));
   }
   static get is() { return "vega-textarea"; }
   static get encapsulation() { return "shadow"; }
@@ -325,6 +341,34 @@ export class VegaTextarea {
       "reflect": false,
       "defaultValue": "''"
     },
+    "labelSuffixButtonConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Nullable<LabelSuffixButtonConfig>",
+        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "references": {
+          "Nullable": {
+            "location": "import",
+            "path": "../../types/general"
+          },
+          "LabelSuffixButtonConfig": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "__VERSION__"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
     "showCounter": {
       "type": "boolean",
       "mutable": false,
@@ -620,6 +664,45 @@ export class VegaTextarea {
         "resolved": "undefined",
         "references": {}
       }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -649,6 +732,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTextarea.prototype, "blurEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTextarea.prototype, "labelButtonClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaTextarea.prototype, "textareaEventPrevent", void 0);