@globalpayments/vega 2.34.0 → 2.35.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/span-img-to-rte-image-block-strategy.js

@@ -0,0 +1,60 @@
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+/** Transform img in span or other inline element to image block DTO */
+export class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0].querySelector('img');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ul-not-li-child-to-rte-list-item-block.js

@@ -0,0 +1,49 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform child element of UL element which are not LI element to list item block DTO */
+export class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/ul-to-rte-list-block-strategy.js

@@ -0,0 +1,50 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEListBlock } from '../../../../dto/blocks/list-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform ul element to list block DTO */
+export class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
+  }
+  /**
+   * Parse to a block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}

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

@@ -0,0 +1,56 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTEImageBlock } from '../../../../dto/blocks/image-block';
+import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+/** Transform vega-rich-text-image-editor element to image block DTO */
+export class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: image.src,
+          annotations: {
+            size: element.size || 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-paste-handler.js

@@ -2,15 +2,15 @@ import { BaseHandler } from './base-handler';
 import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
 import { InsertBlocksAfterAction } from '../../../../dto/actions/insert-blocks-after-block';
 import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
-import { ElementToDTOProcessor } from '../element-to-dto-handler/element-to-dto-processor';
 import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
+import { ElementToDtoStrategyProcessor } from '../element-to-dto-strategy/element-to-dto-strategy-processor';
 /**
  * Handle user paste
  */
 export class InsertPasteHandler extends BaseHandler {
   constructor() {
     super(...arguments);
-    this.elementToDTOProcessor = new ElementToDTOProcessor();
+    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
   }
   /**
    * Update the state value when user paste html elements.
@@ -76,7 +76,11 @@ export class InsertPasteHandler extends BaseHandler {
     const pastedHTML = event.dataTransfer.getData('text/html');
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor.process(tempContainer);
+    return this.elementToDTOProcessor
+      .process(Array.from(tempContainer.childNodes))
+      .filter(Boolean)
+      .map((output) => output.toDto())
+      .filter(Boolean);
   }
   /**
    * Moves the caret to the next block element in a rich text editor.

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

@@ -1,5 +1,3 @@
-import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
-import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 describe('image block', () => {
@@ -64,14 +62,6 @@ describe('image block', () => {
       annotations: { indent: 2 },
     });
   });
-  it('render method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-1');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    imageBlock.nodes = [imageNode];
-    imageNode.apply(new BoldAnnotationAction(true));
-    imageBlock.apply(new HorizontalAlignmentAnnotationAction('right'));
-    expect(imageBlock.render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const imageBlock = new RTEImageBlock('block-1');
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);

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

@@ -1,5 +1,4 @@
 import { RTEListBlock } from '../../../dto/blocks/list-block';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 describe('bullet list', () => {
   it('new RTEBulletListBlock should work as expect', () => {
     expect(new RTEListBlock('1', 'bullet-list')).toBeDefined();
@@ -61,33 +60,6 @@ describe('bullet list', () => {
       ],
     });
   });
-  it('registerRef method should work as expect', () => {
-    const bulletListBlock = new RTEListBlock('1', 'bullet-list');
-    const mockDiv = document.createElement('div');
-    bulletListBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(bulletListBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(bulletListBlock);
-  });
-  it('render method should work as expect', () => {
-    expect(new RTEListBlock('1', 'bullet-list').render()).toBeDefined();
-    expect(RTEListBlock.from({
-      id: '1-1-1',
-      type: 'bullet-list',
-      blocks: [
-        {
-          id: '1-1-1-1',
-          type: 'list-item',
-          nodes: [
-            {
-              id: '1-1-1-1-1',
-              type: 'text',
-              text: 'This is a bullet-list 3-1.',
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const bulletListBlock = RTEListBlock.from({
       id: '1',
@@ -133,26 +105,6 @@ describe('bullet list', () => {
   });
 });
 describe('number list', () => {
-  it('render method should work as expect', () => {
-    expect(new RTEListBlock('1', 'bullet-list').render()).toBeDefined();
-    expect(RTEListBlock.from({
-      id: '1-1-1',
-      type: 'number-list',
-      blocks: [
-        {
-          id: '1-1-1-1',
-          type: 'list-item',
-          nodes: [
-            {
-              id: '1-1-1-1-1',
-              type: 'text',
-              text: 'This is a bullet-list 3-1.',
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
   it('isNotEmpty should work as expect', () => {
     const listBlock = RTEListBlock.from({
       id: '1',

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

@@ -1,6 +1,5 @@
 import { RTEListItemBlock } from '../../../dto/blocks/list-item-block';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 describe('bullet list item', () => {
   it('new RTEBulletListItemBlock should work as expect', () => {
     const bulletListItemBlock = new RTEListItemBlock('1');
@@ -129,45 +128,6 @@ describe('bullet list item', () => {
       ],
     });
   });
-  it('render method should work as expect', () => {
-    expect(RTEListItemBlock.from({
-      id: '1',
-      type: 'list-item',
-      nodes: [
-        {
-          id: '1-1',
-          type: 'text',
-          text: 'This is a bullet-list 1.',
-        },
-      ],
-      children: [
-        {
-          id: '1-1-1',
-          type: 'bullet-list',
-          blocks: [
-            {
-              id: '1-1-1-1',
-              type: 'list-item',
-              nodes: [
-                {
-                  id: '1-1-1-1-1',
-                  type: 'text',
-                  text: 'This is a bullet-list 3-1.',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-    }).render()).toBeDefined();
-  });
-  it('registerRef method should work as expect', () => {
-    const bulletListItemBlock = new RTEListItemBlock('1');
-    const mockDiv = document.createElement('div');
-    bulletListItemBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(bulletListItemBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(bulletListItemBlock);
-  });
   it('getLastNode should work as expect', () => {
     const listItemBlock = RTEListItemBlock.from({
       id: '1',

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

@@ -1,11 +1,6 @@
 import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../dto/nodes/text-node';
-import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annotation-action';
-import domNodesSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRichTextEditorFlushChanges } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
 describe('text block', () => {
   it('new RTETextBlock should work as expect', () => {
@@ -84,35 +79,6 @@ describe('text block', () => {
       },
     });
   });
-  it('render method should work as expect', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textBlock.nodes = [textNode];
-    textNode.apply(new BoldAnnotationAction(true));
-    textBlock.apply(new HorizontalAlignmentAnnotationAction('right'));
-    expect(textBlock.render()).toBeDefined();
-  });
-  it('getBlockTagByType should work as expect', () => {
-    const titleBlock = new RTETextBlock('block-1', 'title');
-    expect(titleBlock['getBlockTagByType'](titleBlock.type)).toEqual('div');
-    const subtitleBlock = new RTETextBlock('block-1', 'subtitle');
-    expect(subtitleBlock['getBlockTagByType'](subtitleBlock.type)).toEqual('div');
-    const heading1Block = new RTETextBlock('block-1', 'heading-1');
-    expect(heading1Block['getBlockTagByType'](heading1Block.type)).toEqual('h1');
-    const heading2Block = new RTETextBlock('block-1', 'heading-2');
-    expect(heading2Block['getBlockTagByType'](heading2Block.type)).toEqual('h2');
-    const heading3Block = new RTETextBlock('block-1', 'heading-3');
-    expect(heading3Block['getBlockTagByType'](heading3Block.type)).toEqual('h3');
-    const paragraphBlock = new RTETextBlock('block-1', 'paragraph');
-    expect(paragraphBlock['getBlockTagByType'](paragraphBlock.type)).toEqual('p');
-  });
-  it('registerRef method should work as expect', () => {
-    const titleBlock = new RTETextBlock('block-1', 'title');
-    const mockDiv = document.createElement('div');
-    titleBlock['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(titleBlock)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(titleBlock);
-  });
   it('apply method should work as expect', () => {
     const titleBlock = new RTETextBlock('block-1', 'title');
     const textNode = new RTETextNode('1', 'This is a text.', titleBlock);
@@ -135,11 +101,6 @@ describe('text block', () => {
     };
     mockDiv.append(mockSpan);
     mockHost.append(mockDiv);
-    titleBlock['registerRef'](mockDiv);
-    textNode['registerRef'](mockSpan);
-    const parentSubject = domNodesSubjectFactory.getSubject(mockHost, VegaInternalRichTextEditorFlushChanges);
-    expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(mockDiv, VegaInternalRichTextEditorFlushChanges)).toEqual(parentSubject);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(titleBlock)).toEqual(mockDiv);
     expect(titleBlock.type).toEqual('title');
     textNode.apply(new SelectionChangeAction(range));
     titleBlock.apply(new TextStyleAnnotationAction('heading-1', true));

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

@@ -1,6 +1,5 @@
 import { RTEImageNode } from '../../../dto/nodes/image-node';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { ImageAnnotationAction } from '../../../dto/actions/image-annotation-action';
 describe('image node', () => {
   it('new RTEImageNode should work as expect', () => {
@@ -8,19 +7,6 @@ describe('image node', () => {
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
     expect(imageNode.toJSON()).toEqual({ id: '1', type: 'image', url: 'mock-url' });
   });
-  it('render method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-id');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    expect(imageNode.render()).toBeDefined();
-  });
-  it('registerRef method should work as expect', () => {
-    const imageBlock = new RTEImageBlock('block-id');
-    const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);
-    const mockImg = document.createElement('img');
-    imageNode['registerRef'](mockImg);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(imageNode)).toEqual(mockImg);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockImg)).toEqual(imageNode);
-  });
   it('apply method should work as expect', () => {
     const imageBlock = new RTEImageBlock('1');
     const imageNode = new RTEImageNode('1', 'mock-url', imageBlock);

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

@@ -15,10 +15,6 @@ import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-actio
 import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
-import domNodesSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRichTextEditorFlushChanges } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { UnderlineAnnotationAction } from '../../../dto/actions/underline-annotation-action';
-import { TextColorAnnotationAction } from '../../../dto/actions/text-color-annotation-action';
 import { DeleteNodeAnnotationAction } from '../../../dto/actions/delete-node-annotation-action';
 describe('text node', () => {
   it('new RTETextNode should work as expect', () => {
@@ -91,24 +87,6 @@ describe('text node', () => {
     expect(id).not.toEqual('1');
     expect(rest).toEqual({ text: 'This is a new text.', type: 'text' });
   });
-  it('render method should work as expect with inline style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new BoldAnnotationAction(true));
-    expect(textNode.render()).toBeDefined();
-  });
-  it('render method should work as expect with class style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new UnderlineAnnotationAction(true));
-    expect(textNode.render()).toBeDefined();
-  });
-  it('render method should work as expect with text color class style', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    textNode.apply(new TextColorAnnotationAction('black'));
-    expect(textNode.render()).toBeDefined();
-  });
   it('getAnnotationByType should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
@@ -118,24 +96,12 @@ describe('text node', () => {
       type: 'BOLD',
     });
   });
-  it('registerRef method should work as expect', () => {
-    const textBlock = new RTETextBlock('block-1', 'paragraph');
-    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
-    const mockDiv = document.createElement('div');
-    textNode['registerRef'](mockDiv);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(textNode)).toEqual(mockDiv);
-    expect(stateEntityRenderingRegistry.getEntityByDOM(mockDiv)).toEqual(textNode);
-  });
   it('apply method should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
     const textNode = new RTETextNode('1', 'This is a text.', textBlock);
     const mockSpan = document.createElement('span');
     const mockHost = document.createElement('div');
     mockHost.append(mockSpan);
-    textNode['registerRef'](mockSpan);
-    const parentSubject = domNodesSubjectFactory.getSubject(mockHost, VegaInternalRichTextEditorFlushChanges);
-    expect(domNodesSubjectFactory.getSubjectFromParentNodeByEventId(mockSpan, VegaInternalRichTextEditorFlushChanges)).toEqual(parentSubject);
-    expect(stateEntityRenderingRegistry.getDOMByEntity(textNode)).toEqual(mockSpan);
     textNode.apply(new BoldAnnotationAction(true));
     expect(textNode.toJSON()).toEqual({
       id: '1',

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-page-index-controller.js

@@ -24,6 +24,28 @@ export class VegaTabGroupPageIndexController extends VegaSlimmer {
   handleSelectedDataTargetChange() {
     this.setCurrentPageIndexBySelectedTab(this.selectedTabDataTarget);
   }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-tab-group-with-click-tab-in-dropdown}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the page index after the tab click
+   *
+   * @param {string} selectedTabDataTarget the tab item property dataTarget
+   */
+  setCurrentPageIndexBySelectedTab(selectedTabDataTarget) {
+    let pageIndex = -1;
+    this.tabPages.forEach((tabPage, index) => {
+      const tabIndex = tabPage.findIndex((tab) => tab.dataTarget === selectedTabDataTarget);
+      if (tabIndex !== -1) {
+        pageIndex = index;
+      }
+    });
+    if (pageIndex >= 0) {
+      this.currentPageIndex = pageIndex;
+    }
+  }
   /* istanbul ignore next */
   /**
    * The `setPageIndex` function sets the current page index to the specified value.
@@ -47,28 +69,6 @@ export class VegaTabGroupPageIndexController extends VegaSlimmer {
       this.currentPageIndex = this.tabPages.length - 1;
     }
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-tab-group-with-click-tab-in-dropdown}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the page index after the tab click
-   *
-   * @param {string} selectedTabDataTarget the tab item property dataTarget
-   */
-  setCurrentPageIndexBySelectedTab(selectedTabDataTarget) {
-    let pageIndex = -1;
-    this.tabPages.forEach((tabPage, index) => {
-      const tabIndex = tabPage.findIndex((tab) => tab.dataTarget === selectedTabDataTarget);
-      if (tabIndex !== -1) {
-        pageIndex = index;
-      }
-    });
-    if (pageIndex >= 0) {
-      this.currentPageIndex = pageIndex;
-    }
-  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-selected-target-controller.js

@@ -23,7 +23,12 @@ export class VegaTabGroupSelectedTargetController extends VegaSlimmer {
   handleTabItemClick(dataTarget) {
     const clickEvent = this.clickEventEmitter.emit(dataTarget);
     if (clickEvent && !clickEvent.defaultPrevented) {
-      this.setSelectedDataTarget(dataTarget);
+      if (dataTarget === this.selectedTabDataTarget) {
+        this.vegaTabGroupPageIndexController.setCurrentPageIndexBySelectedTab(dataTarget);
+      }
+      else {
+        this.setSelectedDataTarget(dataTarget);
+      }
     }
   }
 }
@@ -33,3 +38,6 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSelectedTargetController.prototype, "vegaTabGroupPageIndexController", void 0);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-direction-button-renderer.js

@@ -55,6 +55,9 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       ? this.currentPageIndex === 0
       : this.currentPageIndex + 1 === this.tabPages.length || this.tabPages.length <= 1;
     const icon = direction === 'left' ? 'chevron-backward-rounded' : 'chevron-forward-rounded';
+    const selectedItemKey = source.find((item) => item.key === this.selectedTabDataTarget)
+      ? this.selectedTabDataTarget
+      : '';
     return (h("div", { class: {
         'tab-left-button': direction === 'left',
         'tab-right-button': direction === 'right',
@@ -62,7 +65,7 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       }, 
       /* eslint-disable-next-line react/jsx-no-bind */
       onClick: () => this.onDirectionButtonClick(direction), "aria-label": "No label defined", role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
-      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: this.selectedTabDataTarget, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
+      h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: selectedItemKey, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
           this.dropdownRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
             this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);

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

@@ -97,12 +97,15 @@ th.break-word {
 }
 .vega-table-column.center {
   justify-content: center;
+  text-align: center;
 }
 .vega-table-column.right {
   justify-content: flex-end;
+  text-align: right;
 }
 .vega-table-column.left {
   justify-content: flex-start;
+  text-align: left;
 }
 .vega-table-column .vega-table-column-label {
   min-width: 0px;