@globalpayments/vega 2.70.0 → 2.75.1

package/dist/esm/{element-appender-slimmer-6791c332.js → element-appender-slimmer-35e26b5a.js}

@@ -1,16 +1,16 @@
 import { c as MapToComponentField, I as InjectVegaSlimmer, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
 import { f as findParent, d as isElementVisible, b as isParent } from './ui-bb99c0c2.js';
-import { n as InternalVegaZIndexManager } from './function-extension-8d39db56.js';
+import { n as InternalVegaZIndexManager } from './function-extension-e8c0e43e.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-0bf7fbf3.js';
-import { P as Placements, A as Alignments } from './ui-8424715a.js';
-import { E as isTranslocationType } from './type-guard-12f7654b.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-267935ae.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8744cb44.js';
+import { P as Placements, A as Alignments } from './ui-28fd4193.js';
+import { H as isTranslocationType, a3 as isEATriggerStrategy } from './type-guard-c65a227d.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-28ee2dbd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-52f93124.js';
 import { O as Observer } from './observer-3959f9dd.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dca87b70.js';
-import { u as VegaInternalNestEAHierarchyTreeChange } from './vega-internal-event-id-5c3e5f7f.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-064ee2b2.js';
+import { x as VegaInternalNestEAHierarchyTreeChange } from './vega-internal-event-id-4a06d705.js';
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -767,9 +767,16 @@ class PositionCalculationController extends VegaSlimmer {
    */
   applyPosition(positionBox) {
     const appendableElement = this.showConfig.appendableElement;
+    // TODO: should control position style in element appender but in component level
+    // https://gethired.atlassian.net/browse/VD-7883
     if (this.showConfig.isScreenPosition) {
       appendableElement.style.position = 'fixed';
     }
+    else {
+      if (appendableElement.classList.contains('date-picker-content-box')) {
+        appendableElement.style.position = 'absolute';
+      }
+    }
     appendableElement.style.left = `${positionBox.left}px`;
     appendableElement.style.top = `${positionBox.top}px`;
     appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom');
@@ -871,7 +878,7 @@ class ElementAppender {
    * target for the showConfigCallback.
    */
   constructor(showConfigCallback, showConfigCallbackTarget) {
-    var _a, _b;
+    var _a;
     this.resizeObserverSlimmer = createDynamicSlimmer(ElementAppender, PageResizeObserverSlimmer, [], [
       { mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' },
       { mapFrom: 'disconnectResizeObserver', mapTo: 'disconnectResizeObserver' },
@@ -901,8 +908,8 @@ class ElementAppender {
     this.showConfigCallback = showConfigCallback;
     this.showConfigCallbackTarget = showConfigCallbackTarget;
     const config = this.getShowConfig();
-    (_a = config.appendableElement) === null || _a === void 0 ? void 0 : _a.classList.add('vega-force-hidden');
-    (_b = config.appendableElement) === null || _b === void 0 ? void 0 : _b.classList.add('vega-element-appender-appendable');
+    this.hideElementAppender(config.appendableElement);
+    (_a = config.appendableElement) === null || _a === void 0 ? void 0 : _a.classList.add('vega-element-appender-appendable');
   }
   /**
    * It takes an element and appends it to the DOM, then adjusts its position and size to match the
@@ -981,14 +988,44 @@ class ElementAppender {
    */
   toggleShow(show) {
     if (show) {
-      this.showConfig.appendableElement.classList.remove('vega-force-hidden');
+      this.showElementAppender(this.showConfig.appendableElement);
       this.saveVisibleAppendElement(this.showConfig.appendableElement);
     }
     else {
-      this.showConfig.appendableElement.classList.add('vega-force-hidden');
+      this.hideElementAppender(this.showConfig.appendableElement);
       this.removeVisibleAppendElement(this.showConfig.appendableElement);
     }
   }
+  /**
+   * Show the appendable element by removing hidden styles
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  showElementAppender(appendableElement) {
+    if (appendableElement.classList.contains('date-picker-content-box')) {
+      appendableElement.style.display = 'block';
+    }
+    else {
+      appendableElement.classList.remove('vega-force-hidden');
+    }
+  }
+  /**
+   * Hide the appendable element by adding hidden styles.
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  hideElementAppender(appendableElement) {
+    if (!appendableElement)
+      return;
+    if (appendableElement.classList.contains('date-picker-content-box')) {
+      appendableElement.style.display = 'none';
+    }
+    else {
+      appendableElement.classList.add('vega-force-hidden');
+    }
+  }
   /**
    * Save visible AppendableElement from the container state
    *
@@ -1220,6 +1257,106 @@ __decorate$1([
   MapToComponentMethod('hide')
 ], ElementAppenderHierarchyTreeManager.prototype, "onHide", null);
 
+/**
+ * ClickTriggerStrategy handles 'targetClick' and 'globalMouseDown' events to toggle or hide the appendable element.
+ */
+class ClickTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is 'targetClick' or 'globalMouseDown', otherwise false.
+   */
+  canEvaluate(type) {
+    return type === 'target-click' || type === 'click-outside';
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (context.eventType === 'target-click') {
+      return {
+        nextAction: context.currentState.isVisible ? 'hide' : 'show',
+      };
+    }
+    if (context.eventType === 'click-outside' && context.currentState.isVisible) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    return {};
+  }
+}
+
+/**
+ * HoverTriggerStrategy handles mouse enter and leave events on the target and appendable elements,
+ * as well as global mouse down events to show or hide the appendable element.
+ */
+class HoverTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @param {VegaEAEventType} type - The type of the event.
+   * @returns {boolean} True if the event type is related to hover actions or global mouse down, otherwise false.
+   */
+  canEvaluate(type) {
+    return [
+      'target-mouseenter',
+      'target-mouseleave',
+      'element-mouseenter',
+      'element-mouseleave',
+    ].includes(type);
+  }
+  /**
+   * Evaluates the trigger context and determines whether to show, hide, or toggle the appendable element.
+   *
+   * @param {VegaEATriggerContext} context - The context of the trigger event.
+   * @returns {VegaEATriggerResult} An object indicating whether to show, hide, or toggle the appendable element.
+   */
+  evaluate(context) {
+    if (['target-mouseenter', 'element-mouseenter'].includes(context.eventType)) {
+      return !context.currentState.isVisible
+        ? {
+          nextAction: 'show',
+        }
+        : {};
+    }
+    if (['target-mouseleave', 'element-mouseleave'].includes(context.eventType)) {
+      return {
+        nextAction: 'hide',
+      };
+    }
+    /* istanbul ignore next */
+    return {};
+  }
+}
+
+/**
+ * NoneTriggerStrategy does not respond to any events and always indicates no action.
+ */
+class NoneTriggerStrategy {
+  /**
+   * Determines if the strategy can evaluate the given event type.
+   *
+   * @returns {boolean} Always false as this strategy does not respond to any events.
+   */
+  canEvaluate() {
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Evaluates the trigger context and always indicates no action.
+   *
+   * @returns {VegaEATriggerResult} An object indicating no action (no show, hide, or toggle).
+   */
+  evaluate() {
+    return {};
+  }
+}
+
 var __decorate = (undefined && undefined.__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);
@@ -1251,25 +1388,28 @@ class ElementAppenderSlimmer extends VegaSlimmer {
     };
     /* It's a function that listens to the click event on the dropdown. It checks if the trigger
     property is equal to 'click'. If it is, then it toggles the dropdown. */
-    this.targetClickHandler = () => {
-      if (this.shouldListenerWork('click')) {
-        this.isShowing() ? this.hide() : this.show();
+    this.targetClickHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-click')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-click');
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it clears the timer. */
-    this.targetMouseEnterHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.isShowing() === false && this.show();
+    this.targetMouseEnterHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseenter')) {
+        this.executeTriggerStrategy(triggerStrategy, event, 'target-mouseenter');
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.targetMouseLeaveHandler = () => {
-      if (this.shouldListenerWork('hover')) {
-        this.createDelayHideTimer();
+    this.targetMouseLeaveHandler = (event) => {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('target-mouseleave')) {
+        this.createDelayHideTimer(event, 'target-mouseleave');
       }
     };
     /* istanbul ignore next */
@@ -1277,7 +1417,7 @@ class ElementAppenderSlimmer extends VegaSlimmer {
     this.targetFocusoutHandler = (e) => {
       var _a;
       if (!isParent(e.relatedTarget, (_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.appendableElement)) {
-        this.targetMouseLeaveHandler();
+        this.targetMouseLeaveHandler(e);
       }
     };
     /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
@@ -1285,18 +1425,20 @@ class ElementAppenderSlimmer extends VegaSlimmer {
     this.elementMouseEnterHandler = () => {
       var _a;
       (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseEnterHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseenter') && !this.disableInteractiveGetter()) {
         this.clearDelayHideTimer();
       }
     };
     /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
     property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
     certain amount of time. */
-    this.elementMouseLeaveHandler = () => {
+    this.elementMouseLeaveHandler = (event) => {
       var _a;
-      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler();
-      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
-        this.createDelayHideTimer();
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler(event);
+      const triggerStrategy = this.getTriggerStrategy();
+      if (triggerStrategy.canEvaluate('element-mouseleave') && !this.disableInteractiveGetter()) {
+        this.createDelayHideTimer(event, 'element-mouseleave');
       }
     };
     /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
@@ -1307,14 +1449,15 @@ class ElementAppenderSlimmer extends VegaSlimmer {
       const hasChildShowing = this.hierarchyTreeManager
         .getChildren()
         .some((child) => child.isShowing());
+      const triggerStrategy = this.getTriggerStrategy();
       if (!hasChildShowing &&
-        this.shouldListenerWork('custom') &&
-        this.isShowing() &&
+        triggerStrategy.canEvaluate('click-outside') &&
         this.showConfig &&
         !isParent(currentTarget, this.showConfig.appendableElement) &&
         !isParent(currentTarget, this.showConfig.target) &&
-        findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
-        this.hide();
+        (this.showConfig.isScreenPosition ||
+          findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal'))) {
+        this.executeTriggerStrategy(triggerStrategy, e, 'click-outside');
       }
     };
     /* istanbul ignore next */
@@ -1326,9 +1469,10 @@ class ElementAppenderSlimmer extends VegaSlimmer {
       }
     };
     /* A timer that will hide the dropdown after a certain amount of time. */
-    this.createDelayHideTimer = () => {
+    this.createDelayHideTimer = (event, eventType) => {
+      const triggerStrategy = this.getTriggerStrategy();
       this.delayHideTimer = setTimeout(() => {
-        this.hide();
+        this.executeTriggerStrategy(triggerStrategy, event, eventType);
         clearTimeout(this.delayHideTimer);
       }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
     };
@@ -1336,19 +1480,22 @@ class ElementAppenderSlimmer extends VegaSlimmer {
     this.clearDelayHideTimer = () => {
       this.delayHideTimer && clearTimeout(this.delayHideTimer);
     };
-    /* It's a function that checks if the listener should work or not. */
-    this.shouldListenerWork = (trigger) => {
-      const currentTrigger = this.getTrigger();
-      switch (trigger) {
-        case 'custom':
-          return currentTrigger !== 'none';
-        case 'click':
-          return currentTrigger === 'click';
-        case 'hover':
-          return currentTrigger === 'hover';
+    this.executeTriggerStrategy = (triggerStrategy, event, eventType) => {
+      if (this.showConfig) {
+        const result = triggerStrategy.evaluate({
+          target: this.showConfig.target,
+          appendableElement: this.showConfig.appendableElement,
+          htmlEvent: event,
+          eventType: eventType,
+          currentState: {
+            isVisible: this.isShowing(),
+          },
+        });
+        if (result) {
+          result.nextAction === 'hide' && this.hide();
+          result.nextAction === 'show' && this.show();
+        }
       }
-      /* istanbul ignore next */
-      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
     };
     this.showConfigFactory = showConfigFactory;
     this.getTrigger = getTrigger;
@@ -1450,6 +1597,21 @@ class ElementAppenderSlimmer extends VegaSlimmer {
   removeShadowRootElementScrolling() {
     ChangeManager.unregister(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
   }
+  getTriggerStrategy() {
+    const trigger = this.getTrigger();
+    if (trigger === 'click') {
+      return new ClickTriggerStrategy();
+    }
+    else if (trigger === 'hover') {
+      return new HoverTriggerStrategy();
+    }
+    else if (isEATriggerStrategy(trigger)) {
+      return trigger;
+    }
+    else {
+      return new NoneTriggerStrategy();
+    }
+  }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
 __decorate([

package/dist/esm/{event-emit-slimmer-4e28e9f8.js → event-emit-slimmer-09827cec.js}

@@ -1,8 +1,8 @@
 import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dca87b70.js';
-import { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-516aa721.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-064ee2b2.js';
+import { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-efb6786e.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/esm/{form-field-controller-slimmer-bf071b75.js → form-field-controller-slimmer-5d9dc384.js}

@@ -6,15 +6,15 @@ import { U as UPDATE_TRANSLATION, a as FORM_FIELD_PENDING_VALID_CHANGE, b as FOR
 import { f as findParent, d as isElementVisible } from './ui-bb99c0c2.js';
 import { i as isAsyncFunction, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dca87b70.js';
-import { f as VegaInternalFieldErrorStateChange, d as VegaInternalFormSubmit, g as VegaInternalValid } from './vega-internal-event-id-5c3e5f7f.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-064ee2b2.js';
+import { f as VegaInternalFieldErrorStateChange, d as VegaInternalFormSubmit, g as VegaInternalValid } from './vega-internal-event-id-4a06d705.js';
 import { V as VegaInternalTranslation } from './translation-96e5debd.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-0bf7fbf3.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8744cb44.js';
 import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import { M as MutationObserverSlimmer } from './mutation-observer-slimmer-58ebc13c.js';
 import { A as AttributeOldValueMutationFilter } from './mutation-observer-filters-1a054fb0.js';
 import { i as isArrayEqual } from './array-7888f339.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-3504e2f2.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-202ec7dc.js';
 
 /** The `FormFieldValidationRuleHandler` class is responsible for handling the validation rules for a form field. */
 class FormFieldValidationRuleHandler {

package/dist/esm/{function-extension-8d39db56.js → function-extension-e8c0e43e.js}

@@ -2,16 +2,18 @@ import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlim
 import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-bb99c0c2.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-0bf7fbf3.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8744cb44.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-de88a117.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-516aa721.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-efb6786e.js';
 import { c as convertToNumber } from './number-4398f2e1.js';
-import { R as RTEDTORendererManager, a as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, U as UpdateCursorPositionAction, b as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, c as RTEListItemBlock, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, I as InsertNewParagraphAction, d as RTEImageBlock } from './dto-renderer-manager-d862ae78.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as ModifyContentActionType, d as ActionHandleStrategy, e as RTETextBlock, f as RTEBlock, g as RTEAnnotationStyle, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum } from './code-block-ecb4491b.js';
+import { R as RTEDTORendererManager, a as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, U as UpdateCursorPositionAction, b as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, c as RTEListItemBlock, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, I as InsertNewParagraphAction, d as RTEImageBlock } from './dto-renderer-manager-ee1a5864.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as ModifyContentActionType, d as ActionHandleStrategy, C as CustomAttributeAnnotation, e as RTETextBlock, f as RTEBlock, g as RTEAnnotationStyle, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum } from './code-block-8ee34ab6.js';
+import { i as isNonNullable } from './type-guard-c65a227d.js';
+import './translation-96e5debd.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
-import { i as isNonNullable } from './type-guard-12f7654b.js';
+import { c as cleanObject } from './object-66c37948.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
-import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick } from './dom-node-subject-observer-factory-dca87b70.js';
+import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick } from './dom-node-subject-observer-factory-064ee2b2.js';
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -1876,7 +1878,7 @@ 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>`;
   }
 }
 
@@ -1898,22 +1900,14 @@ 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.
@@ -1943,6 +1937,20 @@ 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;
+  }
 }
 
 /**
@@ -1969,7 +1977,10 @@ 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;
     }
@@ -2013,13 +2024,13 @@ class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
     const annotations = htmlElementToAnnotationGenerator.generate(RTETextNode, element);
     // Exclude customAttribute and customClass from annotations
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
+    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
     return {
       id: generateUUID(),
       type: 'token',
       token: tokenKey,
       text,
-      annotations: Object.assign({}, restAnnotations),
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
     };
   }
   /**
@@ -2033,6 +2044,16 @@ 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);
+  }
 }
 
 const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();

package/dist/esm/{image-annotation-action-d0af138c.js → image-annotation-action-285d432e.js}

@@ -1,10 +1,10 @@
 import { h } from './index-090d31ca.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
 import { c as MapToComponentField, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { A as ActionHandleStrategyRegistry, O as RTE_TEXT_COLORS, b as RTETextNode, $ as TextColorAnnotationAction, y as NodeAnnotationTypeEnum, F as AnnotationAction } from './code-block-ecb4491b.js';
-import { D as DomNodeSubjectObserverFactory, a as VegaClick, R as VegaPopoverShow, S as VegaPopoverHide, f as VegaChange } from './dom-node-subject-observer-factory-dca87b70.js';
+import { A as ActionHandleStrategyRegistry, O as RTE_TEXT_COLORS, b as RTETextNode, $ as TextColorAnnotationAction, y as NodeAnnotationTypeEnum, F as AnnotationAction } from './code-block-8ee34ab6.js';
+import { D as DomNodeSubjectObserverFactory, a as VegaClick, W as VegaPopoverShow, X as VegaPopoverHide, g as VegaChange } from './dom-node-subject-observer-factory-064ee2b2.js';
 import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-de88a117.js';
-import { g as ImageAnnotation } from './dto-renderer-manager-d862ae78.js';
+import { g as ImageAnnotation } from './dto-renderer-manager-ee1a5864.js';
 
 const text = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 96v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V80C0 53.5 21.5 32 48 32H224 400c26.5 0 48 21.5 48 48v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V96H256l0 320h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H144c-17.7 0-32-14.3-32-32s14.3-32 32-32h48l0-320H64z"/></svg>`,

package/dist/esm/index-090d31ca.js

@@ -1569,10 +1569,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './vega-pagination-page-size-selector-mobile.entry.js').then(processMod, consoleError);
-        case 'vega-progress-tracker':
-          return import(
-            /* webpackMode: "lazy" */
-            './vega-progress-tracker.entry.js').then(processMod, consoleError);
         case 'vega-slot-container':
           return import(
             /* webpackMode: "lazy" */
@@ -1677,6 +1673,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './vega-popover_2.entry.js').then(processMod, consoleError);
+        case 'vega-progress-tracker_2':
+          return import(
+            /* webpackMode: "lazy" */
+            './vega-progress-tracker_2.entry.js').then(processMod, consoleError);
         case 'vega-radio_2':
           return import(
             /* webpackMode: "lazy" */

package/dist/esm/{index-c943d263.js → index-51a7da7f.js}

@@ -1,8 +1,8 @@
 import { W as WaitForVega } from './wait-for-vega-handler-c2c07ac3.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-dca87b70.js';
-import { V as VegaInternalComponentDidRender } from './vega-internal-event-id-5c3e5f7f.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-064ee2b2.js';
+import { V as VegaInternalComponentDidRender } from './vega-internal-event-id-4a06d705.js';
 
 /* istanbul ignore next */
 /**