@globalpayments/vega 2.40.0 → 2.42.0

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

@@ -13,9 +13,16 @@ import { VegaPaginationPageSelector } from './internal/vega-pagination-page-sele
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaChange, VegaFormSubmit, VegaPageSizeChange, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { VegaPaginationPageSizeObserverController } from './slimmers/controllers/vega-pagination-page-size-observer-controller';
+import { VegaPaginationCurrentPageObserverController } from './slimmers/controllers/vega-pagination-current-page-observer-controller';
+import { FeatureFlag } from '../../helpers/public-api';
+import { VegaPaginationLayoutController } from './slimmers/controllers/vega-pagination-layout-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -28,12 +35,21 @@ export class VegaPagination {
     this.vegaChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaChange);
     this.vegaPageSizeChangeEventEmitter = createEventEmitSlimmer(VegaPagination, VegaPageSizeChange);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaPaginationPageSizeObserverController = new VegaPaginationPageSizeObserverController();
+    this.vegaPaginationCurrentPageObserverController = new VegaPaginationCurrentPageObserverController();
+    this.breakpointPageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaPaginationLayoutController = new VegaPaginationLayoutController();
     this.vegaPaginationItemTypes = [
       'currentPageLabel',
       'pageSizeSelector',
       'pageSelector',
       'goTo',
+      'pageSelectorMobile',
+      'pageSizeSelectorMobile',
+      'pageSelectorMobile_goTo',
+      'pageSizeSelectorMobile_currentPageLabel',
     ];
+    this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Total number of pages.
      */
@@ -67,9 +83,27 @@ export class VegaPagination {
      * It refers to additional elements or components that can be added to
      *    enhance the functionality or appearance of each pagination item.
      *
+     * @VegaWarning Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{
+          default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+          M: [['pageSelector']],
+        }`, please enable the feature flag.
      * @vegaVersion 1.25.0
+     * @defaultValue [['pageSelector']]
      */
-    this.extensions = [['pageSelector']];
+    this.extensions = FeatureFlag.isEnabled('VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE')
+      ? {
+        default: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],
+        M: [['pageSelector']],
+      }
+      : [['pageSelector']];
+    /**
+     * Specifies the layout of the elements.
+     *
+     * It determines how the pagination elements are arranged, with options such as 'horizontal' for a horizontal layout or other defined layouts.
+     *
+     * @vegaVersion 2.42.0
+     */
+    this.layout = 'horizontal';
     /**
      * Specifies the options available for the page size selector
      *    in the pagination component.
@@ -79,7 +113,7 @@ export class VegaPagination {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.pageSizeSelectorOptions = [10, 20, 50, 100];
     this.renderPaginationItemsWrapper = (extensionArr) => {
-      return (h("vega-flex", { gap: "size-24", alignItems: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
+      return (h("vega-flex", { gap: { default: 'size-4', M: 'size-24' }, flexWrap: "wrap", alignItems: "center", justifyContent: "center", key: this.generateWrapperKey(extensionArr) }, extensionArr.map((item) => {
         return h("div", { key: item }, this.renderPaginationItem(item));
       })));
     };
@@ -97,6 +131,12 @@ export class VegaPagination {
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':
           return (h(VegaPaginationGoTo, { onChange: this.handlePaginationGoToChange, pageCount: this.pageCount, translationSlimmer: this.translationSlimmer }));
+        case 'pageSelectorMobile':
+        case 'pageSelectorMobile_goTo':
+          return (h("vega-pagination-page-selector-mobile", { type: item, pageCount: this.pageCount, current: this.current, total: this.total }));
+        case 'pageSizeSelectorMobile':
+        case 'pageSizeSelectorMobile_currentPageLabel':
+          return (h("vega-pagination-page-size-selector-mobile", { type: item, pageSize: this.pageSize, current: this.current, total: this.total, pageSizeSelectorOptions: this.pageSizeSelectorOptions, dropdownProps: this.dropdownProps }));
       }
     };
     this.handlePaginationGoToChange = (page) => {
@@ -147,6 +187,14 @@ export class VegaPagination {
       }
     };
   }
+  /*
+   * The next line is covered in e2e-test
+   * @see{should-render-layout-properly-when-set-responsive-prop-layout}
+   */
+  /* istanbul ignore next */
+  watchCurrentBreakpoint() {
+    methodPlaceholder();
+  }
   watchPageCount() {
     this.currentValueGuard();
   }
@@ -161,6 +209,9 @@ export class VegaPagination {
     this.vegaPageSizeChangeEventEmitter.emit(this.pageSize);
     this.pageCount = this.calculatePages();
   }
+  watchLayout() {
+    methodPlaceholder();
+  }
   componentWillLoad() {
     this.pageCount = this.calculatePages();
     this.currentValueGuard();
@@ -169,7 +220,8 @@ export class VegaPagination {
     }
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.removeDuplicateItems(this.extensions).map(this.renderPaginationItemsWrapper)), this.host);
+    const currentExtensions = ResponsiveFormatFacade.formatCustom(this.extensions);
+    return sanitizeVegaComponent(h(Host, null, this.removeDuplicateItems(currentExtensions).map(this.renderPaginationItemsWrapper)), this.host);
   }
   static get is() { return "vega-pagination"; }
   static get encapsulation() { return "shadow"; }
@@ -247,9 +299,13 @@ export class VegaPagination {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "VegaPaginationItemType[][]",
-        "resolved": "VegaPaginationItemType[][]",
+        "original": "ResponsiveType<VegaPaginationItemType[][]>",
+        "resolved": "VegaPaginationItemType[][] | { S?: VegaPaginationItemType[][]; M?: VegaPaginationItemType[][]; L?: VegaPaginationItemType[][]; XL?: VegaPaginationItemType[][]; default?: VegaPaginationItemType[][]; }",
         "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
           "VegaPaginationItemType": {
             "location": "import",
             "path": "./types"
@@ -260,12 +316,48 @@ export class VegaPagination {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "Note: The default value is controlled by feature flag `VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE`, which is disabled by default. To enable the new responsive default value `{\ndefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\nM: [['pageSelector']],\n}`, please enable the feature flag."
+          }, {
             "name": "vegaVersion",
             "text": "1.25.0"
+          }, {
+            "name": "defaultValue",
+            "text": "[['pageSelector']]"
           }],
         "text": "Specifies the extensions associated with the pagination items\n   in the pagination component.\n\nIt refers to additional elements or components that can be added to\n   enhance the functionality or appearance of each pagination item."
       },
-      "defaultValue": "[['pageSelector']]"
+      "defaultValue": "FeatureFlag.isEnabled(\n\t\t'VEGA_PAGINATION.ENABLE_EXTENSIONS_RESPONSIVE_DEFAULT_VALUE',\n\t)\n\t\t? {\n\t\t\t\tdefault: [['pageSizeSelectorMobile_currentPageLabel'], ['pageSelectorMobile_goTo']],\n\t\t\t\tM: [['pageSelector']],\n\t\t  }\n\t\t: [['pageSelector']]"
+    },
+    "layout": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<VegaPaginationLayoutType>",
+        "resolved": "\"horizontal\" | \"vertical\" | { S?: VegaPaginationLayoutType; M?: VegaPaginationLayoutType; L?: VegaPaginationLayoutType; XL?: VegaPaginationLayoutType; default?: VegaPaginationLayoutType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "VegaPaginationLayoutType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.42.0"
+          }],
+        "text": "Specifies the layout of the elements.\n\nIt determines how the pagination elements are arranged, with options such as 'horizontal' for a horizontal layout or other defined layouts."
+      },
+      "attribute": "layout",
+      "reflect": false,
+      "defaultValue": "'horizontal'"
     },
     "pageSizeSelectorOptions": {
       "type": "unknown",
@@ -311,6 +403,7 @@ export class VegaPagination {
     }
   }; }
   static get states() { return {
+    "currentBreakpoint": {},
     "pageCount": {}
   }; }
   static get events() { return [{
@@ -394,6 +487,9 @@ export class VegaPagination {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "currentBreakpoint",
+      "methodName": "watchCurrentBreakpoint"
+    }, {
       "propName": "pageCount",
       "methodName": "watchPageCount"
     }, {
@@ -405,6 +501,9 @@ export class VegaPagination {
     }, {
       "propName": "pageSize",
       "methodName": "watchPageSize"
+    }, {
+      "propName": "layout",
+      "methodName": "watchLayout"
     }]; }
 }
 __decorate([
@@ -428,3 +527,15 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaPagination.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationPageSizeObserverController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationCurrentPageObserverController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "breakpointPageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaPagination.prototype, "vegaPaginationLayoutController", void 0);

package/dist/collection/components/vega-popover/slimmers/controllers/vega-popover-appender-controller.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
-import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender-slimmer';
+import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalPopoverUpdateTarget } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';

package/dist/collection/components/vega-popover/slimmers/renderers/vega-popover-appender-renderer.js

@@ -20,7 +20,7 @@ export class VegaPopoverAppenderRenderer extends VegaSlimmer {
   /**
    * The function returns the HTML element representing the Vega Popover Content Box.
    *
-   * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement is being returned.
+   * @returns {HTMLVegaPopoverContentBoxElement} An HTMLVegaPopoverContentBoxElement is being returned.
    */
   getPopoverContentBox() {
     return this.popoverContentBox;
@@ -28,7 +28,7 @@ export class VegaPopoverAppenderRenderer extends VegaSlimmer {
   /**
    * The `render` function returns a JSX element for a `vega-popover-content-box` component with a ref assigned to `this.popoverContentBox`.
    *
-   * @returns {HTMLElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
+   * @returns {HTMLVegaPopoverContentBoxElement} An HTMLVegaPopoverContentBoxElement element wrapped in a vega-popover-content-box component is being returned.
    */
   render() {
     return (h("vega-popover-content-box", { ref: (el) => (this.popoverContentBox = el), showArrow: this.showArrow }));

package/dist/collection/components/vega-radio/vega-radio-group/slimmers/controllers/vega-radio-group-keyboard-controller.js

@@ -85,7 +85,7 @@ export class VegaRadioGroupKeyboardController extends KeyboardManagerSlimmer {
   /**
    * filter out disabled elements.
    *
-   * @returns {Nullable<HTMLElement[]>} radios element
+   * @returns {Nullable<HTMLVegaRadioElement[]> } radios element
    */
   getNotDisabledRadioArray() {
     const radios = Array.from(this.host.querySelectorAll('vega-radio'));

package/dist/collection/components/vega-radio/vega-radio-group/slimmers/controllers/vega-radio-group-radio-items-controller.js

@@ -52,7 +52,7 @@ export class VegaRadioGroupRadioItemsController extends VegaSlimmer {
   /**
    * The function returns an array of HTMLVegaRadioElement objects.
    *
-   * @returns {HTMLElement[]} An array of HTMLVegaRadioElement objects is being returned.
+   * @returns {HTMLVegaRadioElement[]} An array of HTMLVegaRadioElement objects is being returned.
    */
   getRadioItemsArray() {
     return this.vegaRadioArray;

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

@@ -21,9 +21,12 @@ export class ActionHandleStrategyRegistry {
   /**
    * Get the special strategy that handle the action logic.
    *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @typedef R generic type
    * @param {string} actionType - The special action type or the action class name.
    * @param {string} targetClass - The rich text node class name.
-   * @returns {Nullable<ActionHandleStrategy>} - The action handle strategy instance if defined.
+   * @returns {Nullable<ActionHandleStrategy<T, target, R>>} - The action handle strategy instance if defined.
    */
   static get(actionType, targetClass) {
     const strategyMap = this.registry.get(targetClass);
@@ -34,9 +37,10 @@ export class ActionHandleStrategyRegistry {
   /**
    * Get the special strategy from the registry and run the strategy execute method.
    *
+   * @typedef R generic type
    * @param {ModifyContentAction | AnnotationAction} action - The update node action instance.
    * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
-   * @returns {unknown} The return value of the strategy method execute invoke result.
+   * @returns {R | undefined} The return value of the strategy method execute invoke result.
    */
   static executeTheStrategy(action, RTEInstance) {
     const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;

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

@@ -6,9 +6,10 @@ export class ActionHandleStrategy {
   /**
    * Public method to invoke the handle logic.
    *
+   * @typedef R generic type
    * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
    * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
-   * @returns {unknown} - The invoke result in special strategy.
+   * @returns {R} - The invoke result in special strategy.
    */
   execute(action, target) {
     LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/node-split-text-strategy.js

@@ -81,7 +81,7 @@ export class NodeSplitTextStrategy extends ActionHandleStrategy {
    *
    * @param {Range} range - Selection range
    * @param {RTETextNode} target - RTETextNode
-   * @returns {RTETextNode[] | this} RTETextNode array
+   * @returns {RTETextNode[] | RTETextNode} RTETextNode array
    */
   splitTextNode(range, target) {
     const { startContainer, endContainer, startOffset } = range;

package/dist/collection/components/vega-rich-text-editor/dto/actions/clear-formatting-annotation-action.js

@@ -11,7 +11,7 @@ export class ClearFormattingAnnotationAction extends TextSplittableAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {ClearFormattingAnnotation} the annotation
+   * @returns {Annotation} the annotation
    */
   toAnnotation() {
     return new ClearFormattingAnnotation();

package/dist/collection/components/vega-rich-text-editor/dto/actions/indent-annotation-action.js

@@ -12,7 +12,7 @@ export class IndentAnnotationAction extends AnnotationAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {IndentAnnotation} The annotation
+   * @returns {Annotation} The annotation
    */
   toAnnotation() {
     return new IndentAnnotation(this.indent);

package/dist/collection/components/vega-rich-text-editor/dto/actions/link-group-annotation-action.js

@@ -13,7 +13,7 @@ export class LinkGroupAnnotationAction extends AnnotationAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {LinkGroupAnnotation} The annotation
+   * @returns {Annotation} The annotation
    */
   toAnnotation() {
     return new LinkGroupAnnotation(this.groupKey);

package/dist/collection/components/vega-rich-text-editor/dto/actions/strikethrough-annotation-action.js

@@ -12,7 +12,7 @@ export class StrikethroughAnnotationAction extends TextSplittableAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {StrikethroughAnnotation} the annotation
+   * @returns {Annotation} the annotation
    */
   toAnnotation() {
     return new StrikethroughAnnotation(this.strikethrough);

package/dist/collection/components/vega-rich-text-editor/dto/actions/text-color-annotation-action.js

@@ -12,7 +12,7 @@ export class TextColorAnnotationAction extends TextSplittableAction {
   /**
    * Converts the action into a text color annotation.
    *
-   * @returns {TextColorAnnotation} the annotation
+   * @returns {Annotation} the annotation
    */
   toAnnotation() {
     return new TextColorAnnotation(this.textColor);

package/dist/collection/components/vega-rich-text-editor/dto/actions/underline-annotation-action.js

@@ -12,7 +12,7 @@ export class UnderlineAnnotationAction extends TextSplittableAction {
   /**
    * Converts the action to an annotation
    *
-   * @returns {UnderlineAnnotation} the annotation
+   * @returns {Annotation} the annotation
    */
   toAnnotation() {
     return new UnderlineAnnotation(this.underline);

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

@@ -20,7 +20,7 @@ export class IndentAnnotation extends BlockAnnotation {
   /**
    * Generate the JSON item of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
    */
   toJSON() {
     return this.indent > 0 ? { indent: this.indent } : null;

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

@@ -12,7 +12,7 @@ export class ItalicAnnotation extends NodeAnnotation {
    * Generate the map item for the annotation
    *
    * @param {boolean} italic - Italic annotation
-   * @returns {Nullable<[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]>} Map item for the annotation
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
    */
   static from(italic) {
     return [NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];

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

@@ -23,7 +23,7 @@ export class LinkAnnotation extends NodeAnnotation {
   /**
    * Generate the JSON representation of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
    */
   toJSON() {
     return { link: { href: this.link.href, groupKey: this.link.groupKey } };

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

@@ -51,8 +51,9 @@ export class RTEBlock {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
-   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

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

@@ -32,7 +32,7 @@ export class RTEListItemBlock extends RTETextBlock {
    * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
    *
    * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListItemBlock`
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
    */
   static from(block) {
     const listItemBlock = new RTEListItemBlock(block.id);

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

@@ -25,7 +25,7 @@ export class VegaRTEContent {
    * Converts a JSON array of blocks to a class array of RTEContentBlock.
    *
    * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {RTEContentBlock[]} The converted array of RTEContentBlock.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
    */
   static fromJSON(value) {
     const blocks = value.map((block) => {

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

@@ -22,7 +22,7 @@ export class RTEImageNode extends RTENode {
    *
    * @param {VegaRTEImageNode} node - The node to be converted.
    * @param {RTEImageBlock} parentBlock - The parent block
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
    */
   static from(node, parentBlock) {
     const imageNode = new RTEImageNode(node.id, node.url, parentBlock);

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

@@ -22,8 +22,9 @@ export class RTENode {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {RTENodeAnnotationMapKey} type - Annotation type
-   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

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

@@ -24,7 +24,7 @@ export class RTEBlockRenderer {
    * Get classes from annotations
    *
    * @param {RTEBlock} block - RTE block entity
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(block) {
     return Array.from(block.annotationMap.values())

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

@@ -9,6 +9,7 @@ import { LinkAnnotationAction } from '../../actions/link-annotation-action';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 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 stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
@@ -84,6 +85,7 @@ export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
     return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
         if (ref) {
           linkWrapperRef = ref;
+          stateEntityRenderingRegistry.removeDirtyDomRef(ref);
         }
       } },
       this.renderLink(linkNodes, linkAnnotation),

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

@@ -23,7 +23,7 @@ export class RTENodeRenderer {
    * Get classes from annotations
    *
    * @param {RTENode} node - The DTO node
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(node) {
     return Array.from(node.annotationMap.values())

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

@@ -180,7 +180,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
   /**
    * 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.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

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

@@ -191,6 +191,8 @@ export class SelectionController extends VegaSlimmer {
    * Get selected rich text
    */
   handleSelectionChange() {
+    if (this.disabled)
+      return;
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
       return;
@@ -279,6 +281,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "disabled", void 0);
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry.js

@@ -34,5 +34,14 @@ class StateEntityRenderingRegistry {
   getDOMByEntity(entity) {
     return this.entityToDOM.get(entity);
   }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
 }
 export default new StateEntityRenderingRegistry();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/text-node-rendering-registry.js

@@ -17,7 +17,7 @@ class TextNodeRenderingRegistry {
   /**
    * Retrieves the text node elements.
    *
-   * @returns {HTMLElement[]} The text node elements, or empty array.
+   * @returns {Map<HTMLElement, TextColorAnnotation>} The text node elements, or empty array.
    */
   getTextNodeElements() {
     return this.textNodeElements;

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

@@ -86,7 +86,7 @@ export class UserInputController extends VegaSlimmer {
   /**
    * 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.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

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

@@ -36,11 +36,12 @@ export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   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);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

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

@@ -47,7 +47,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
 }
 (() => {

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

@@ -34,7 +34,7 @@ export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&

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

@@ -32,7 +32,7 @@ export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&