@globalpayments/vega 2.70.0 → 2.72.0

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -255,74 +255,76 @@
   }
 }
 
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host {
-    flex: 1 1 100%;
-  }
-}
 /* vertical css in mobile */
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host .vega-progress-tracker__container {
-    padding-top: 16px;
-    padding-bottom: 16px;
-  }
-  :host .vega-progress-tracker__slot {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0px;
-  }
-  :host .vega-progress-step {
-    display: flex;
-    flex-grow: 1;
-    flex-basis: 0;
-  }
-  :host .vega-progress-step .vega-progress-step-icon-divider {
-    display: flex;
-    flex-direction: row;
-    gap: 4px;
-    width: 100%;
-  }
-  :host .vega-progress-step .vega-progress-step__icon {
-    height: 16px;
-    width: 16px;
-    min-width: 16px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon {
-    line-height: 16px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon vega-icon {
-    height: 8px;
-    width: 8px;
-  }
-  :host .vega-progress-step .vega-progress-step__icon span {
-    display: none;
-  }
-  :host .vega-progress-step .vega-progress-step__divider {
-    height: 1px;
-    flex-grow: 1;
-  }
-  :host .vega-progress-step .vega-progress-step__divider.left {
-    display: block;
-  }
-  :host .vega-progress-step .vega-progress-step__divider.left.background {
-    background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
-  }
-  :host .vega-progress-step .vega-progress-step__divider.right {
-    display: block;
-  }
-  :host .vega-progress-step .vega-progress-step__title {
-    display: none;
-  }
-  :host .vega-progress-step:first-child .vega-progress-step__divider.left {
-    opacity: 0;
-  }
-  :host .vega-progress-step:last-child .vega-progress-step__divider.right {
-    display: block;
-    opacity: 0;
-  }
+:host(.horizontal-compact) {
+  flex: 1 1 100%;
+  padding-top: 0px;
+}
+:host(.horizontal-compact) .vega-progress-tracker__container {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+:host(.horizontal-compact) .vega-progress-tracker__slot {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0px;
+}
+:host(.horizontal-compact) .vega-progress-step {
+  display: flex;
+  flex-grow: 1;
+  flex-basis: 0;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step-icon-divider {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  width: 100%;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon {
+  height: 16px;
+  width: 16px;
+  min-width: 16px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon {
+  line-height: 16px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon vega-icon {
+  height: 8px;
+  width: 8px;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__icon span {
+  display: none;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider {
+  height: 1px;
+  flex-grow: 1;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left {
+  display: block;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.left.background {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__divider.right {
+  display: block;
+}
+:host(.horizontal-compact) .vega-progress-step .vega-progress-step__title {
+  display: none;
+}
+:host(.horizontal-compact) .vega-progress-step:first-child .vega-progress-step__divider.left {
+  opacity: 0;
+}
+:host(.horizontal-compact) .vega-progress-step:last-child .vega-progress-step__divider.right {
+  display: block;
+  opacity: 0;
 }
+
+:host(:not(.horizontal-compact)) .vega-progress-tracker__box {
+  display: none;
+}
+
 /* horizontal css */
 :host(.horizontal) {
   display: block;
@@ -373,12 +375,6 @@
   opacity: 0;
 }
 
-/* horizontal css in mobile */
-@media screen and (min-width: 320px) and (max-width: 767px) {
-  :host(.horizontal) {
-    padding-top: 0px;
-  }
-}
 /* common mobile css */
 :host vega-carousel .subTitle {
   font-family: "Inter", sans-serif;
@@ -420,11 +416,6 @@
   display: flex;
   align-items: center;
 }
-@media (min-width: 768px) {
-  :host .vega-progress-tracker__box {
-    display: none;
-  }
-}
 :host .vega-progress-tracker__box vega-carousel {
   width: 100%;
   text-align: center;

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -4,32 +4,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, h, Prop, Element, Method, Watch, Event, Host } from '@stencil/core';
-import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaPageUpdate, VegaCurrentStepUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
-import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
+import { Component, h, Prop, Element, Method, Watch, Event, Host, State } from '@stencil/core';
+import { VegaCurrentStepUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
 import { sanitizeVegaComponent } from '../../utils/component';
-import { normalizeNumberByRanger } from '../../utils/number';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/deprecated-property-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaProgressTrackerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-progress-tracker/runtime-metrics-payload-definition';
-var ProgressStepStatus;
-(function (ProgressStepStatus) {
-  ProgressStepStatus["DEFAULT"] = "default";
-  ProgressStepStatus["IN_PROGRESS"] = "inProgress";
-  ProgressStepStatus["COMPLETE"] = "complete";
-})(ProgressStepStatus || (ProgressStepStatus = {}));
+import { VegaProgressTrackerRenderer } from './slimmers/renderers/vega-progress-tracker-renderer';
+import { VegaProgressTrackerCurrentStepController } from './slimmers/controllers/vega-progress-tracker-current-step-controller';
+import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { isResponsiveType } from '../../types/type-guard';
 /**
  * @vegaVersion 1.0.7
  */
 export class VegaProgressTracker {
   constructor() {
     this.globalSlimmers = {};
+    this.currentStepController = new VegaProgressTrackerCurrentStepController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      /**
+       * The below method is e2e-test covered in
+       * @see{module:vega-progress-tracker-resize-e2e}
+       */
+      callback: /* istanbul ignore next */ async () => {
+        this.currentBreakpoint = getCurrentBreakpoint();
+        await this.renderer.gotoCarouselPage();
+      },
+    });
+    this.renderer = new VegaProgressTrackerRenderer();
     this.currentStepUpdateEventEmitter = createEventEmitSlimmer(VegaProgressTracker, VegaCurrentStepUpdate);
     this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaProgressTracker, 'completedSteps', 'completedStepArray', []);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaProgressTrackerRuntimeMetricsPayloadDefinition);
+    this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Indicates the current step or stage in a
      *    sequential process or workflow,
@@ -37,6 +47,7 @@ export class VegaProgressTracker {
      *
      * @vegaVersion 1.0.7
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.current = 0;
     /**
      * Specifies the direction of the Progress Tracker component.
@@ -45,6 +56,7 @@ export class VegaProgressTracker {
      *    In the horizontal direction, the tracker is divided into
      *    panes with navigable arrows. In the vertical direction,
      *    it is displayed as a single pane.
+     * It also can be set as ResponsiveType for responsive direction.
      *
      * @vegaVersion 1.0.7
      */
@@ -85,63 +97,20 @@ export class VegaProgressTracker {
      * @vegaVersion 1.5.0
      */
     this.canClickStep = true;
-    this.getStepState = (index) => {
-      if (this.deprecatedPropertySlimmer.getValue().includes(this.steps[index])) {
-        return ProgressStepStatus.COMPLETE;
-      }
-      else if (index === this.current) {
-        return ProgressStepStatus.IN_PROGRESS;
-      }
-      else {
-        return ProgressStepStatus.DEFAULT;
-      }
-    };
-    this.onStepIconClick = async (e) => {
-      const index = Number(e.currentTarget.getAttribute('data-index'));
-      await this.setCurrent(index);
-    };
-    this.renderStepIcon = (index, progressStepStatus) => {
-      return (h("div", { class: "vega-progress-step-icon-container" },
-        h("div", { class: "vega-progress-step__icon" }, progressStepStatus == ProgressStepStatus.COMPLETE ? (h("vega-icon", { icon: "checkmark-rounded", size: "size-16" })) : (h("span", null, index + 1)))));
-    };
-    this.renderSteps = (subTitle, index) => {
-      const progressStepStatus = this.getStepState(index);
-      const prevStepCompleteStatus = this.deprecatedPropertySlimmer
-        .getValue()
-        .includes(this.steps[index - 1]);
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${progressStepStatus} ${index === this.current ? 'current' : ''}`, "data-index": index, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": subTitle },
-        h("div", { class: "vega-progress-step-icon-divider" },
-          h("div", { class: `vega-progress-step__divider left ${prevStepCompleteStatus ? 'background' : ''}` }),
-          this.renderStepIcon(index, progressStepStatus),
-          h("div", { class: `vega-progress-step__divider right ${this.deprecatedPropertySlimmer.getValue().includes(subTitle)
-              ? 'complete'
-              : 'default'}` })),
-        h("div", { class: "vega-progress-step__title" }, subTitle)));
-    };
-    this.updateCurrent = (current, min, max) => {
-      this.current = normalizeNumberByRanger(current, min, max);
-    };
-    this.isElementVisible = () => {
-      return this.carouselDom.parentElement.getBoundingClientRect().width > 0;
-    };
   }
   /**
    * The below method is e2e-test covered in
    * @see{module:vega-progress-tracker-e2e-change-current-mobile}
    */
   /* istanbul ignore next */
-  async watchCurrentChange(newCurrent) {
-    this.updateCurrent(newCurrent, 0, this.steps.length - 1);
-    this.currentStepUpdateEventEmitter.emit(this.steps[this.current]);
-    if (this.isElementVisible()) {
-      await this.carouselDom.goToPage(this.current + 1);
-    }
+  async watchCurrentChange() {
+    methodPlaceholder();
   }
-  watchSteps() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  async watchDirection() {
+    methodPlaceholder();
   }
-  componentDidLoad() {
-    this.updateCurrent(this.current, 0, this.steps.length - 1);
+  watchSteps() {
+    methodPlaceholder();
   }
   /**
    * Invoke this method to change the tracker's current step
@@ -150,7 +119,7 @@ export class VegaProgressTracker {
    * @vegaVersion 1.5.0
    */
   async nextStep() {
-    this.updateCurrent(++this.current, null, this.steps.length - 1);
+    methodPlaceholder();
   }
   /**
    * Invoke this method to change the tracker's current step
@@ -159,7 +128,7 @@ export class VegaProgressTracker {
    * @vegaVersion 1.5.0
    */
   async prevStep() {
-    this.updateCurrent(--this.current, 0, null);
+    methodPlaceholder();
   }
   /**
    * Invoke this method to set the current step of the tracker.
@@ -167,7 +136,7 @@ export class VegaProgressTracker {
    * @vegaVersion 1.0.7
    */
   async setCurrent(step) {
-    this.updateCurrent(step, 0, this.steps.length - 1);
+    methodPlaceholder(step);
   }
   /**
    * Invoke this method to retrieve the tracker's current step.
@@ -178,23 +147,15 @@ export class VegaProgressTracker {
     return this.current;
   }
   render() {
-    return sanitizeVegaComponent(h(Host, { class: `vega-progress-tracker ${this.direction}${!this.canClickStep ? ' click-step-disabled' : ''}` },
-      h("div", { class: "vega-progress-tracker__container" },
-        h("div", { class: "vega-progress-tracker__slot" }, this.steps.map((subTitle, index) => this.renderSteps(subTitle, index)))),
-      h("div", { class: "vega-progress-tracker__box" },
-        h("vega-carousel", { showSlider: false, itemsPerPage: 1, canSwipe: this.canClickStep, ref: (el) => {
-            /**
-             * The below method is e2e-test covered in
-             * @see{module:vega-progress-tracker-with-touch-event-mobile}
-             */
-            /* istanbul ignore next */
-            DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaPageUpdate, (input) => this.updateCurrent(input.detail - 1, 0, this.steps.length - 1));
-            return (this.carouselDom = el);
-          } }, this.steps.map((subTitle, index) => (h("div", { class: {
-            subTitle: true,
-            completed: this.getStepState(index) === ProgressStepStatus.COMPLETE,
-            inProgress: this.current === index,
-          } }, subTitle)))))), this.host);
+    let direction = ResponsiveFormatFacade.formatCustom(this.direction) || 'vertical';
+    if (['default', 'S'].includes(this.currentBreakpoint) && !isResponsiveType(this.direction)) {
+      direction = 'horizontal-compact';
+    }
+    return sanitizeVegaComponent(h(Host, { class: {
+        'vega-progress-tracker': true,
+        [direction]: true,
+        'click-step-disabled': !this.canClickStep,
+      } }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-progress-tracker"; }
   static get encapsulation() { return "shadow"; }
@@ -207,7 +168,7 @@ export class VegaProgressTracker {
   static get properties() { return {
     "current": {
       "type": "number",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "number",
         "resolved": "number",
@@ -230,9 +191,18 @@ export class VegaProgressTracker {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'vertical' | 'horizontal'",
-        "resolved": "\"horizontal\" | \"vertical\"",
-        "references": {}
+        "original": "ResponsiveType<VegaProgressTrackerDirectionType>",
+        "resolved": "\"horizontal\" | \"horizontal-compact\" | \"vertical\" | { S?: VegaProgressTrackerDirectionType; M?: VegaProgressTrackerDirectionType; L?: VegaProgressTrackerDirectionType; XL?: VegaProgressTrackerDirectionType; default?: VegaProgressTrackerDirectionType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "VegaProgressTrackerDirectionType": {
+            "location": "import",
+            "path": "./type"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -241,7 +211,7 @@ export class VegaProgressTracker {
             "name": "vegaVersion",
             "text": "1.0.7"
           }],
-        "text": "Specifies the direction of the Progress Tracker component.\n\nIt can be set to either horizontal or vertical.\n   In the horizontal direction, the tracker is divided into\n   panes with navigable arrows. In the vertical direction,\n   it is displayed as a single pane."
+        "text": "Specifies the direction of the Progress Tracker component.\n\nIt can be set to either horizontal or vertical.\n   In the horizontal direction, the tracker is divided into\n   panes with navigable arrows. In the vertical direction,\n   it is displayed as a single pane.\nIt also can be set as ResponsiveType for responsive direction."
       },
       "attribute": "direction",
       "reflect": false,
@@ -329,6 +299,9 @@ export class VegaProgressTracker {
       "defaultValue": "true"
     }
   }; }
+  static get states() { return {
+    "currentBreakpoint": {}
+  }; }
   static get events() { return [{
       "method": "vegaCurrentStepUpdate",
       "name": "vegaCurrentStepUpdate",
@@ -454,6 +427,9 @@ export class VegaProgressTracker {
   static get watchers() { return [{
       "propName": "current",
       "methodName": "watchCurrentChange"
+    }, {
+      "propName": "direction",
+      "methodName": "watchDirection"
     }, {
       "propName": "steps",
       "methodName": "watchSteps"
@@ -462,6 +438,15 @@ export class VegaProgressTracker {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaProgressTracker.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "currentStepController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaProgressTracker.prototype, "renderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaProgressTracker.prototype, "currentStepUpdateEventEmitter", void 0);

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

@@ -45,93 +45,41 @@ export class TextStyleAnnotation extends BlockAnnotation {
   renderStyle(options) {
     if (!(options === null || options === void 0 ? void 0 : options.standalone))
       return null;
-    const paragraphStyle = {
+    const textStyleBase = {
       fontFamily: 'Inter',
       fontSize: '16px',
       lineHeight: '22px',
+      minHeight: '22px',
       fontWeight: '500',
-      marginTop: '0px',
-      marginBottom: '0px',
     };
+    const paragraphStyle = Object.assign(Object.assign({}, textStyleBase), { marginTop: '0px', marginBottom: '0px' });
     switch (this.textStyle) {
       case 'paragraph': {
         return paragraphStyle;
       }
       case 'title': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '36px',
-          lineHeight: '40px',
-          fontWeight: '500',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' });
       }
       case 'subtitle': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '28px',
-          lineHeight: '32px',
-          fontWeight: '500',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' });
       }
       case 'heading-1': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '22px',
-          lineHeight: '24px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '22px', lineHeight: '24px', minHeight: '24px', marginTop: '0px', marginBottom: '0px' });
       }
       case 'heading-2': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '20px',
-          lineHeight: '24px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '20px', lineHeight: '24px', minHeight: '24px', marginTop: '0px', marginBottom: '0px' });
       }
       case 'heading-3': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '18px',
-          lineHeight: '22px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '18px', lineHeight: '22px', minHeight: '22px', marginTop: '0px', marginBottom: '0px' });
       }
       case 'heading-4': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '16px',
-          lineHeight: '22px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '16px', lineHeight: '22px', minHeight: '22px', marginTop: '0px', marginBottom: '0px' });
       }
       case 'heading-5': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '14px',
-          lineHeight: '22px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '14px', lineHeight: '22px', minHeight: '22px', marginTop: '0px', marginBottom: '0px' });
       }
       case 'heading-6': {
-        return {
-          fontFamily: 'Inter',
-          fontSize: '12px',
-          lineHeight: '22px',
-          fontWeight: '500',
-          marginTop: '0px',
-          marginBottom: '0px',
-        };
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '12px', lineHeight: '22px', minHeight: '22px', marginTop: '0px', marginBottom: '0px' });
       }
     }
   }

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/insert-token-node-strategy.js

@@ -1,6 +1,7 @@
 import { generateUUID } from '../../../../utils/misc';
 import { ActionHandleStrategy } from '../../dto/action-handle-strategies/action-handle-strategy.abstract';
 import { InsertNodeToNearestRootAction } from '../../dto/actions/insert-node-to-nearest-root-action';
+import { CustomAttributeAnnotation } from '../../dto/annotations/custom-attribute-annotation';
 import { RTETokenNode } from './token-node';
 /**
  * Strategy to handle the insertion of a token node into the nearest root block.
@@ -12,7 +13,10 @@ export class InsertTokenNodeStrategy extends ActionHandleStrategy {
   handleAction(action, block) {
     const { rteRange, token } = action;
     if (rteRange && rteRange.startNode) {
-      const tokenNode = new RTETokenNode(generateUUID(), token.key, token.label, block);
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { key, label, customAttrs = { wrapped: 'true' } } = token;
+      const tokenNode = new RTETokenNode(generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new CustomAttributeAnnotation(customAttrs));
       block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
       action.actionHandleResult = true;
     }

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/span-to-token-node-strategy.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { generateUUID } from '../../../../utils/misc';
+import { cleanObject } from '../../../../utils/object';
 import { RTETextNode } from '../../dto/nodes/text-node';
 import htmlElementToAnnotationGenerator from '../../slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator';
 import { ElementToDTOStrategy } from '../../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract';
@@ -45,7 +46,7 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign({}, restAnnotations),
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**
@@ -59,4 +60,14 @@ export class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
   shouldProceedToElementChildren() {
     return false;
   }
+  /**
+   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   *
+   * @param {Record<string, string>} customAttribute - The custom attribute object
+   * @returns {Record<string, string>} The processed custom attributes
+   */
+  createCustomAttrs(customAttribute) {
+    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
+    return cleanObject(result);
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-node-renderer.js

@@ -18,22 +18,14 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
    */
   doRender(createElement, node, editorContent) {
     const { id, token } = node;
-    return createElement('span', {
-      'key': id,
-      'template-token-key': token,
-      'token-key': token,
-      'contenteditable': 'false',
-      'style': node.getStyles(),
-      'class': `token ${node.getClasses()}`,
-      'ref': this.useRef(node),
+    return createElement('span', Object.assign(Object.assign({ 'key': id, 'template-token-key': token, 'token-key': token, 'contenteditable': 'false', 'style': node.getStyles(), 'class': `token ${node.getClasses()}` }, this.additionalAttributes(node)), { 'ref': this.useRef(node), 
       // eslint-disable-next-line jsdoc/require-jsdoc
       'onClick': (event) => {
         event.preventDefault();
         if (editorContent && editorContent.editable !== false) {
           this.handleTokenElementClick(event, node);
         }
-      },
-    }, node.text);
+      } }), node.text);
   }
   /**
    * Sets the RTE extension context.
@@ -63,4 +55,18 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
     }
   }
+  /**
+   * Additional attributes for the token node.
+   *
+   * @param {RTETokenNode} node - The token node.
+   * @returns {Record<string, string>} Additional attributes
+   */
+  additionalAttributes(node) {
+    const annotation = node.getCustomAttributesAnnotation();
+    let result = { wrapped: 'true' };
+    if (annotation) {
+      result = Object.assign(Object.assign({}, result), annotation.render());
+    }
+    return result;
+  }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-node.js

@@ -51,6 +51,6 @@ export class RTETokenNode extends RTETextNode {
    * @returns {string} - The HTML representation of the token node.
    */
   toHtml() {
-    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}" ${super.generateAttributeString()}>${this.text}</span>`;
+    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
   }
 }