@globalpayments/vega 2.33.0 → 2.34.0

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

@@ -0,0 +1,433 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+import { RTETextNode } from '../../../dto/nodes/text-node';
+import { RTETextBlock } from '../../../dto/blocks/text-block';
+import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
+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', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textBlock.nodes = [textNode];
+    expect(textNode.toJSON()).toEqual({ id: '1', text: 'This is a text.', type: 'text' });
+    expect(textNode.parentBlock).toBe(textBlock);
+  });
+  it('from method should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    expect(RTETextNode.from({ id: '2', type: 'text', text: `This is a text 2` }, textBlock) instanceof
+      RTETextNode).toBe(true);
+    expect(RTETextNode.from({
+      id: '2',
+      type: 'text',
+      text: `This is a text 2`,
+      annotations: {
+        bold: true,
+        italic: true,
+        underline: true,
+        strikethrough: true,
+        textColor: 'green',
+      },
+    }, textBlock) instanceof RTETextNode).toBe(true);
+  });
+  it('toJSON method should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    expect(RTETextNode.from({ id: '2', type: 'text', text: `This is a text 2` }, textBlock).toJSON()).toEqual({ id: '2', text: 'This is a text 2', type: 'text' });
+    expect(RTETextNode.from({
+      id: '2',
+      type: 'text',
+      text: `This is a text 2`,
+      annotations: {
+        bold: true,
+        italic: true,
+        underline: true,
+        strikethrough: true,
+        textColor: 'green',
+      },
+    }, textBlock).toJSON()).toEqual({
+      id: '2',
+      text: 'This is a text 2',
+      type: 'text',
+      annotations: {
+        bold: true,
+        italic: true,
+        underline: true,
+        strikethrough: true,
+        textColor: 'green',
+      },
+    });
+    expect(RTETextNode.from({ id: '2', type: 'text', text: `This is a text 2`, annotations: { code: true } }, textBlock).toJSON()).toEqual({ id: '2', text: 'This is a text 2', type: 'text', annotations: { code: true } });
+    expect(RTETextNode.from({
+      id: '2',
+      type: 'text',
+      text: `This is a text 2`,
+      annotations: { link: { href: 'www.google.com', groupKey: '123' } },
+    }, textBlock).toJSON()).toEqual({
+      id: '2',
+      text: 'This is a text 2',
+      type: 'text',
+      annotations: { link: { href: 'www.google.com', groupKey: '123' } },
+    });
+  });
+  it('cloneWithText method should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const _a = textNode.cloneWithText('This is a new text.').toJSON(), { id } = _a, rest = __rest(_a, ["id"]);
+    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);
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+      bold: true,
+      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',
+      text: 'This is a text.',
+      type: 'text',
+      annotations: { bold: true },
+    });
+  });
+  it('should not split the text when apply action to full line', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan = document.createElement('span');
+    mockSpan.innerText = 'This is a text.';
+    mockDiv.append(mockSpan);
+    const range = {
+      startContainer: mockSpan.firstChild,
+      endContainer: mockSpan.firstChild,
+      startOffset: 0,
+      endOffset: 15,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', 'This is a text 2.', textBlock);
+    textBlock.nodes = [textNode, textNode2];
+    stateEntityRenderingRegistry.register(mockSpan, textNode);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: '1', text: 'This is a text.', type: 'text', annotations: { bold: true } },
+        { id: '2', text: 'This is a text 2.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(false));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: '1', text: 'This is a text.', type: 'text', annotations: { bold: false } },
+        { id: '2', text: 'This is a text 2.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('should split the text when apply action to partial start line', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan = document.createElement('span');
+    mockSpan.innerText = 'This is a text.';
+    mockDiv.append(mockSpan);
+    const range = {
+      startContainer: mockSpan.firstChild,
+      endContainer: mockSpan.firstChild,
+      startOffset: 5,
+      endOffset: 15,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', 'This is a text 2.', textBlock);
+    textBlock.nodes = [textNode, textNode2];
+    stateEntityRenderingRegistry.register(mockSpan, textNode);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: expect.anything(), text: 'This ', type: 'text' },
+        { id: expect.anything(), text: 'is a text.', type: 'text', annotations: { bold: true } },
+        { id: '2', text: 'This is a text 2.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('should split the text when apply action to partial end line', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan = document.createElement('span');
+    mockSpan.innerText = 'This is a text.';
+    mockDiv.append(mockSpan);
+    const range = {
+      startContainer: mockSpan.firstChild,
+      endContainer: mockSpan.firstChild,
+      startOffset: 0,
+      endOffset: 5,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', 'This is a text 2.', textBlock);
+    textBlock.nodes = [textNode, textNode2];
+    stateEntityRenderingRegistry.register(mockSpan, textNode);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: expect.anything(), text: 'This ', type: 'text', annotations: { bold: true } },
+        { id: expect.anything(), text: 'is a text.', type: 'text' },
+        { id: '2', text: 'This is a text 2.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('should split the text when apply action to end of line but endContainer textContent is null', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan = document.createElement('span');
+    const mockSpan2 = document.createElement('span');
+    mockSpan.innerText = 'This is a text.';
+    mockSpan2.innerText = '';
+    mockDiv.append(mockSpan);
+    mockDiv.append(mockSpan2);
+    const range = {
+      startContainer: mockSpan.firstChild,
+      endContainer: mockSpan2,
+      startOffset: 5,
+      endOffset: 0,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', '', textBlock);
+    textBlock.nodes = [textNode, textNode2];
+    stateEntityRenderingRegistry.register(mockSpan, textNode);
+    stateEntityRenderingRegistry.register(mockSpan2, textNode2);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: expect.anything(), text: 'This ', type: 'text' },
+        { id: expect.anything(), text: 'is a text.', type: 'text', annotations: { bold: true } },
+        { id: '2', text: '', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('apply & splitTextNode method should work as expect', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan = document.createElement('span');
+    mockSpan.innerText = 'This is a text.';
+    mockDiv.append(mockSpan);
+    const range = {
+      startContainer: mockSpan.firstChild,
+      endContainer: mockSpan.firstChild,
+      startOffset: 0,
+      endOffset: 2,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', 'This is a text 2.', textBlock);
+    textBlock.nodes = [textNode, textNode2];
+    stateEntityRenderingRegistry.register(mockSpan, textNode);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textNode.apply(new SelectionChangeAction(range));
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { annotations: { bold: true }, id: expect.anything(), text: 'Th', type: 'text' },
+        { id: expect.anything(), text: 'is is a text.', type: 'text' },
+        { id: '2', text: 'This is a text 2.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('apply annotation to multiple nodes', () => {
+    const mockDiv = document.createElement('div');
+    const mockSpan1 = document.createElement('span');
+    const mockSpan2 = document.createElement('span');
+    const mockSpan3 = document.createElement('span');
+    mockSpan1.innerText = 'This is a text.';
+    mockSpan2.innerText = 'This is a text 2.';
+    mockSpan3.innerText = 'This is a text 3.';
+    mockDiv.append(mockSpan1);
+    mockDiv.append(mockSpan2);
+    const range = {
+      startContainer: mockSpan1.firstChild,
+      endContainer: mockSpan3.firstChild,
+      startOffset: 2,
+      endOffset: 5,
+      setStart: jest.fn(),
+      setEnd: jest.fn(),
+      collapse: jest.fn(),
+      selectNodeContents: jest.fn(),
+      deleteContents: jest.fn(),
+      extractContents: jest.fn(),
+      insertNode: jest.fn(),
+    };
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    const textNode2 = new RTETextNode('2', 'This is a text 2.', textBlock);
+    const textNode3 = new RTETextNode('3', 'This is a text 3.', textBlock);
+    textBlock.nodes = [textNode, textNode2, textNode3];
+    stateEntityRenderingRegistry.register(mockSpan1, textNode);
+    stateEntityRenderingRegistry.register(mockSpan2, textNode2);
+    stateEntityRenderingRegistry.register(mockSpan3, textNode3);
+    stateEntityRenderingRegistry.register(mockDiv, textBlock);
+    textBlock.nodes.forEach((node) => {
+      node.apply(new SelectionChangeAction(range));
+      node.apply(new BoldAnnotationAction(true));
+    });
+    expect(textBlock.toJSON()).toEqual({
+      id: 'block-1',
+      nodes: [
+        { id: expect.anything(), text: 'Th', type: 'text' },
+        { annotations: { bold: true }, id: expect.anything(), text: 'is is a text.', type: 'text' },
+        { annotations: { bold: true }, id: '2', text: 'This is a text 2.', type: 'text' },
+        { annotations: { bold: true }, id: expect.anything(), text: 'This ', type: 'text' },
+        { id: expect.anything(), text: 'is a text 3.', type: 'text' },
+      ],
+      type: 'paragraph',
+      annotations: {
+        textStyle: 'paragraph',
+      },
+    });
+  });
+  it('deleteAnnotationByType should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual({
+      bold: true,
+      type: 'BOLD',
+    });
+    textNode.deleteAnnotationByType(NodeAnnotationTypeEnum.BOLD);
+    expect(textNode.annotationMap.has(NodeAnnotationTypeEnum.BOLD)).toEqual(false);
+  });
+  it('apply a DeleteNodeAnnotationAction on RTETextNode should work as expect', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    expect(textNode.toJSON()).toEqual({
+      id: '1',
+      type: 'text',
+      text: 'This is a text.',
+      annotations: { bold: true },
+    });
+    textNode.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
+    expect(textNode.toJSON()).toEqual({ id: '1', type: 'text', text: 'This is a text.' });
+  });
+});

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

@@ -0,0 +1,53 @@
+import '../../../../polyfill/test-polyfill/unit/index';
+import { RTETextNode } from '../../dto/nodes/text-node';
+import { RTERange } from '../../dto/range';
+import stateEntityRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { mockRange } from '../../../../polyfill/test-polyfill/unit/range';
+describe('rte-range', () => {
+  it('rte-range should work properly', () => {
+    const rteRange = new RTERange();
+    expect(rteRange.startContainer).toBeUndefined();
+    expect(rteRange.endContainer).toBeUndefined();
+    expect(rteRange.startOffset).toEqual(0);
+    expect(rteRange.endOffset).toEqual(0);
+    expect(rteRange.startNode).toBeUndefined();
+    expect(rteRange.endNode).toBeUndefined();
+    const node = document.createElement('span');
+    rteRange.updateRTERange({ startNode: node, endNode: node, startOffset: 0, endOffset: 0 });
+    expect(rteRange.startContainer).toEqual(node);
+    expect(rteRange.endContainer).toEqual(node);
+    expect(rteRange.startOffset).toEqual(0);
+    expect(rteRange.endOffset).toEqual(0);
+  });
+  it('rte-range public method updateRTERange should work properly', () => {
+    const rteRange = new RTERange();
+    const container = document.createElement('span');
+    rteRange.updateRTERange({ startNode: container, endNode: container, startOffset: 0, endOffset: 1 }, mockRange);
+    expect(rteRange.startContainer).toEqual(container);
+    expect(rteRange.endContainer).toEqual(container);
+    expect(rteRange.startOffset).toEqual(0);
+    expect(rteRange.endOffset).toEqual(1);
+    expect(rteRange.toNativeRange()).toEqual(mockRange);
+    const node = new RTETextNode('1', 'test', null);
+    rteRange.updateRTERange({ startNode: node, endNode: node, startOffset: 1, endOffset: 3 });
+    expect(rteRange.startNode).toEqual(node);
+    expect(rteRange.endNode).toEqual(node);
+    expect(rteRange.startOffset).toEqual(1);
+    expect(rteRange.endOffset).toEqual(3);
+  });
+  it('rte-range public method toNativeRange should work properly', () => {
+    spyOn(mockRange, 'setStart');
+    spyOn(mockRange, 'setEnd');
+    const container = document.createElement('span');
+    spyOn(stateEntityRegistry, 'getDOMByEntity').and.returnValue(container);
+    const rteRange = new RTERange();
+    const node = new RTETextNode('1', 'test', null);
+    rteRange.updateRTERange({ startNode: node, endNode: node, startOffset: 1, endOffset: 3 });
+    expect(rteRange.toNativeRange()).not.toBeDefined();
+    container.innerHTML = 'Test';
+    const range = rteRange.toNativeRange();
+    expect(range).toBeDefined();
+    expect(mockRange.setStart).toBeCalledWith(container.firstChild, 1);
+    expect(mockRange.setEnd).toBeCalledWith(container.firstChild, 3);
+  });
+});

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

@@ -0,0 +1,57 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import chevronDown from '../../../../../global/icons/chevron-down';
+export class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        this.clickEventEmitter.emit(undefined, e);
+      }
+    };
+  }
+  render() {
+    return (h("button", { part: "rich-text-editor-toolbar-button", class: {
+        'rich-text-editor-toolbar-btn': true,
+        'rich-text-editor-toolbar-button-disabled': this.disabled,
+        'rich-text-editor-toolbar-button-selected': this.selected,
+      }, onClick: this.handleClick, disabled: this.disabled },
+      h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
+        h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) }),
+        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
+      h("slot", null)));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-down': chevronDown,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "iconColor", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "clickEventEmitter", void 0);

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

@@ -0,0 +1,50 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: inline-block;
+}
+
+.rich-text-editor-toolbar-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  cursor: pointer;
+  position: relative;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+}
+.rich-text-editor-toolbar-btn:hover {
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
+  z-index: 1;
+}
+.rich-text-editor-toolbar-btn:active {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  z-index: 1;
+}
+.rich-text-editor-toolbar-btn:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: -1px;
+  z-index: 2;
+}
+.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-selected {
+  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  z-index: 1;
+}
+.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled {
+  background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
+  border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
+}
+.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}