@globalpayments/vega 2.32.0 → 2.34.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -0,0 +1,201 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import stateEntity from './state-entity-rendering-registry';
+import { InsertTextHandler } from './helper/input-event-handler/insert-text-handler';
+import { InsertParagraphHandler } from './helper/input-event-handler/insert-paragraph-handler';
+import { InsertLineBreakHandler } from './helper/input-event-handler/insert-line-break-handler';
+import { DeleteContentHandler } from './helper/input-event-handler/delete-content-handler';
+import { VegaRTEContent } from '../../dto/content-state';
+import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
+import { generateUUID } from '../../../../utils/misc';
+/** Used to monitoring the user input actions by event listener and mutationObserver */
+export class UserInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertTextHandler = new InsertTextHandler();
+    this.insertParagraphHandler = new InsertParagraphHandler();
+    this.insertLineBreakHandler = new InsertLineBreakHandler();
+    this.deleteContentHandler = new DeleteContentHandler();
+    this.insertPasteHandler = new InsertPasteHandler();
+    this.observerOptions = {
+      characterData: true,
+      characterDataOldValue: true,
+      subtree: true,
+      childList: true,
+    };
+    /**
+     * When a user performs an input action within the editable element, this function is triggered.
+     *
+     * @param {InputEvent} e the before input event object
+     */
+    this.handleUserInputAction = (e) => {
+      this.removeObserver();
+      e.preventDefault();
+      this.initValueIfEmpty();
+      let updateFlag = false;
+      switch (e.inputType) {
+        case 'insertParagraph':
+          updateFlag = true;
+          this.insertParagraphHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertText':
+          updateFlag = true;
+          this.insertTextHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertLineBreak':
+          updateFlag = true;
+          this.insertLineBreakHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'deleteContentBackward':
+          updateFlag = true;
+          this.deleteContentHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertFromPaste':
+          updateFlag = true;
+          this.insertPasteHandler.execute(this.value, this.selectionController, e);
+          break;
+      }
+      if (updateFlag) {
+        this.notifyComponentFlushValue();
+      }
+    };
+    /**
+     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
+     *
+     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
+     */
+    this.handleObserver = (records) => {
+      let updateFlag = false;
+      if (records.every((record) => record.type === 'characterData')) {
+        records.forEach((record) => {
+          const { target } = record;
+          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
+            const richTextNode = stateEntity.getEntityByDOM(target.parentElement);
+            if (richTextNode && richTextNode['text'] !== target.textContent) {
+              updateFlag = true;
+              richTextNode['text'] = target.textContent;
+            }
+          }
+        });
+        if (updateFlag) {
+          this.notifyComponentFlushValue();
+        }
+      }
+    };
+  }
+  /**
+   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
+   */
+  initMutationObserver() {
+    if (this.mutationObserver) {
+      const editableElement = this.getEditableElementRef();
+      if (editableElement) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver.observe(editableElement, this.observerOptions);
+      }
+    }
+  }
+  /**
+   * Disconnects the mutation observer if it exists.
+   */
+  removeObserver() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  /**
+   * Adds event listener to an editable HTML element to handle user input actions.
+   */
+  addActionListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.addEventListener('beforeinput', this.handleUserInputAction);
+      editableElement.addEventListener('drop', this.preventDropEvent);
+    }
+    this.mutationObserver = new MutationObserver(this.handleObserver);
+    this.initMutationObserver();
+  }
+  /**
+   * Removes event listener for user input actions from an editable HTML div element.
+   */
+  removeActionListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.removeEventListener('beforeinput', this.handleUserInputAction);
+      editableElement.removeEventListener('drop', this.preventDropEvent);
+    }
+    this.removeObserver();
+  }
+  /**
+   * re-connect the observer after the props change and component did render
+   */
+  reConnectObserver() {
+    this.initMutationObserver();
+  }
+  /**
+   * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
+   *
+   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * Notifies a change manager with the host and value details and logs the current value.
+   */
+  notifyComponentFlushValue() {
+    void this.valueController.flushChanges(this.value);
+  }
+  /**
+   * Prevents the default behavior of a drag event.
+   *
+   * @param {DragEvent} e - drop event object
+   */
+  preventDropEvent(e) {
+    e.preventDefault();
+  }
+  /**
+   * Initializes the value to an empty array if it is currently empty.
+   */
+  initValueIfEmpty() {
+    if (!this.value) {
+      const id = generateUUID();
+      const defaultParagraph = [
+        { id, type: 'paragraph', nodes: [{ id: `${id}1`, type: 'text', text: '' }] },
+      ];
+      void this.valueController.flushChanges(VegaRTEContent.fromJSON(defaultParagraph));
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], UserInputController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], UserInputController.prototype, "addActionListener", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], UserInputController.prototype, "removeActionListener", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], UserInputController.prototype, "reConnectObserver", null);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/value-controller.js

@@ -0,0 +1,91 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory 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 { Observer } from '../../../../helpers/change-manager/observer/observer';
+import { debounce } from '../../../../utils/timer';
+import { VegaRTEContent } from '../../dto/content-state';
+import { waitForComponentDidRender } from '../../../../helpers/common';
+/**
+ * The value controller is responsible for updating the value of the rich text editor.
+ */
+export class ValueController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
+   */
+  connectedCallback() {
+    const flushChangesWithDebounce = debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Watches the value of the editor and updates the internal value.
+   */
+  watchValueUpdate() {
+    if (!this.value || this.value.blocks.length === 0) {
+      this.value = VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      changeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
+  }
+  /**
+   * Updates the value of the editor and restore the selection.
+   *
+   * @param {VegaRTEContent} newValue The new value to set.
+   */
+  async flushChanges(newValue) {
+    this.value = newValue.clone();
+    await waitForComponentDidRender(this.host);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptableFlushChange() {
+    return true;
+  }
+}
+ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('watchValueUpdate')
+], ValueController.prototype, "watchValueUpdate", null);

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

@@ -0,0 +1,97 @@
+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';
+export class ToolbarRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.getToolbarBtnRenderer = (type) => {
+      switch (type) {
+        case 'clearStyle':
+          return this.clearStyleToolbarButtonSlimmer;
+        case 'bold':
+          return this.boldToolbarButtonSlimmer;
+        case 'textStyles':
+          return this.textStylesToolbarButtonSlimmer;
+        case 'italic':
+          return this.italicToolbarButtonSlimmer;
+        case 'underline':
+          return this.underlineToolbarButtonSlimmer;
+        case 'textColor':
+          return this.textColorToolbarButtonSlimmer;
+        case 'moreIndent':
+          return this.moreIndentToolbarButtonSlimmer;
+        case 'lessIndent':
+          return this.lessIndentToolbarButtonSlimmer;
+        case 'code':
+          return this.codeToolbarButtonSlimmer;
+        case 'strikethrough':
+          return this.strikethroughToolbarButtonSlimmer;
+        case 'link':
+          return this.linkToolbarButtonSlimmer;
+        case 'image':
+          return this.imageToolbarButtonSlimmer;
+        case 'bulletsNumbers':
+          return this.bulletsNumbersToolbarButtonSlimmer;
+        case 'horizontalAlignment':
+          return this.horizontalAlignmentToolbarButtonSlimmer;
+      }
+    };
+  }
+  render() {
+    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
+      return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+        return this.getToolbarBtnRenderer(item).render();
+      })));
+    })));
+  }
+}
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "toolbarItems", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);

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

@@ -0,0 +1,51 @@
+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 { ToolbarButtonSlimmer } from './toolbar-button-slimmer.abstract';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import bold from '../../../assets/bold';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { BoldAnnotationAction } from '../../../dto/actions/bold-annotation-action';
+import { NodeAnnotationTypeEnum } from '../../../dto/annotations/node-annotation.abstract';
+import { RTETextNode } from '../../../dto/nodes/text-node';
+export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'bold',
+      tooltip: {
+        text: 'Bold',
+      },
+    });
+  }
+  onClick() {
+    const bold = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new BoldAnnotationAction(!bold)));
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ bold });
+})();
+__decorate([
+  MapToComponentField()
+], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);

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

@@ -0,0 +1,70 @@
+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 { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
+import { h } from '@stencil/core';
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../../../helpers/icon/internal-icon-manager';
+import ListUL from '../../../../assets/list-ul';
+import ListOL from '../../../../assets/list-ol';
+import { BulletsToolbarButtonSlimmer } from './bullets-toolbar-button-slimmer';
+import { NumbersToolbarButtonSlimmer } from './numbers-toolbar-button-slimmer';
+import { RTEImageNode } from '../../../../dto/nodes/image-node';
+export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ul',
+      tooltip: {
+        text: 'Bullets',
+      },
+    });
+    this.bulletsToolbarButtonSlimmer = new BulletsToolbarButtonSlimmer();
+    this.numbersToolbarButtonSlimmer = new NumbersToolbarButtonSlimmer();
+  }
+  componentWillRender() {
+    if (this.numbersToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('list-ol');
+    }
+    else {
+      super.setIcon('list-ul');
+    }
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+      h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      h("div", { slot: "popover" }, this.renderContent())));
+  }
+  renderContent() {
+    return (h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      h("div", null, this.bulletsToolbarButtonSlimmer.render()),
+      h("div", null, this.numbersToolbarButtonSlimmer.render())));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'list-ul': ListUL,
+    'list-ol': ListOL,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('componentWillRender')
+], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);

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

@@ -0,0 +1,70 @@
+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 { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
+import { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
+import { RTEImageNode } from '../../../../dto/nodes/image-node';
+import { TransformListAction } from '../../../../dto/actions/transform-list-action';
+import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
+export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ul',
+      tooltip: {
+        text: 'Bullets',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return this.isListType(selectedBlocks);
+  }
+  onClick() {
+    if (this.isSelected()) {
+      this.deselectBulletList();
+    }
+    else {
+      this.selectBulletList();
+    }
+    void this.popoverRef.hide();
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+  isListType(selectedBlocks, type = 'bullet-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof RTEListItemBlock && block.parent.type === type));
+  }
+  /**
+   * Deselect bullet list item to convert it to default paragraph
+   */
+  deselectBulletList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      selectedBlocks[0].parent.apply(new TransformParagraphAction(selectedBlocks));
+    }
+  }
+  /**
+   * Select texts or list items or texts and list items to convert it to bullet list
+   */
+  selectBulletList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      const selectedFirstBlock = selectedBlocks[0].type === 'list-item'
+        ? selectedBlocks[0].parent
+        : selectedBlocks[0];
+      selectedFirstBlock.apply(new TransformListAction('bullet-list', selectedBlocks));
+    }
+  }
+}
+__decorate([
+  MapToSlimmerField()
+], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  MapToSlimmerField()
+], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);

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

@@ -0,0 +1,68 @@
+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 { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
+import { ToolbarButtonSlimmer } from '../toolbar-button-slimmer.abstract';
+import { RTEListItemBlock } from '../../../../dto/blocks/list-item-block';
+import { RTEImageNode } from '../../../../dto/nodes/image-node';
+import { TransformListAction } from '../../../../dto/actions/transform-list-action';
+import { TransformParagraphAction } from '../../../../dto/actions/transform-paragraph-action';
+export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ol',
+      tooltip: { text: 'Numbers' },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return this.isListType(selectedBlocks);
+  }
+  onClick() {
+    if (this.isSelected()) {
+      this.deselectNumberList();
+    }
+    else {
+      this.selectNumberList();
+    }
+    void this.popoverRef.hide();
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+  isListType(selectedBlocks, type = 'number-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof RTEListItemBlock && block.parent.type === type));
+  }
+  /**
+   * Deselect bullet list item to convert it to default paragraph
+   */
+  deselectNumberList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      selectedBlocks[0].parent.apply(new TransformParagraphAction(selectedBlocks));
+    }
+  }
+  /**
+   * Select texts or list items or texts and list items to convert it to bullet list
+   */
+  selectNumberList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      const selectedFirstBlock = selectedBlocks[0].type === 'list-item'
+        ? selectedBlocks[0].parent
+        : selectedBlocks[0];
+      selectedFirstBlock.apply(new TransformListAction('number-list', selectedBlocks));
+    }
+  }
+}
+__decorate([
+  MapToSlimmerField()
+], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate([
+  MapToSlimmerField()
+], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);