@heartlandone/vega 2.76.0 → 2.77.1

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

@@ -72,7 +72,7 @@ export class VegaInputInputRenderer extends VegaSlimmer {
   }
   render() {
     return (h("div", { class: "vega-input-input" },
-      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, "aria-label": this.label || 'No label defined', minLength: this.minLength, maxLength: this.maxLength, 
+      h("input", Object.assign({ part: "input", name: this.name, type: this.getInputType(), autoComplete: this.autocomplete, inputmode: this.inputmode, value: this.value, ref: this.setInputRef, placeholder: this.placeholder, disabled: this.disabled, minLength: this.minLength, maxLength: this.maxLength, 
         /* eslint-disable-next-line react/jsx-no-bind */
         onBlur: (e) => this.handleInputBlur(e), 
         /* eslint-disable-next-line react/jsx-no-bind */
@@ -128,9 +128,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "type", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputInputRenderer.prototype, "label", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputInputRenderer.prototype, "name", void 0);

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-suggestions-renderer.js

@@ -97,12 +97,15 @@ export class VegaInputInputSuggestionsRenderer extends VegaSlimmer {
     return null;
   }
   async showSuggestions() {
-    if (this.renderModeController.isSource() || this.renderModeController.isTemplate()) {
+    if (this.dropdownRef &&
+      (this.renderModeController.isSource() || this.renderModeController.isTemplate())) {
       await this.dropdownRef.show();
     }
   }
   async searchSuggestions() {
-    if (this.renderModeController.isSource() && this.suggestionsDropdownSource.length > 0) {
+    if (this.dropdownRef &&
+      this.renderModeController.isSource() &&
+      this.suggestionsDropdownSource.length > 0) {
       await this.dropdownRef.search(this.value);
     }
   }

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

@@ -32,12 +32,29 @@ import { VegaInputRenderer } from './slimmers/renderers/vega-input-renderer';
 import { VegaInputValueController } from './slimmers/controllers/vega-input-value-controller';
 import { VegaInputInputSuggestionsRenderer } from './slimmers/renderers/vega-input-input-suggestions-renderer';
 import { VegaInputRenderModeController } from './slimmers/controllers/vega-input-render-mode-controller';
+import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-observer/aria-attributes-value-mapper';
+import { DataTabIndexValueMapper } from '../../helpers/slimmers/mutation-observer/data-tab-index-value-mapper';
 /**
  * @vegaVersion 1.0.5
  */
 export class VegaInput {
   constructor() {
     this.globalSlimmers = {};
+    this.ariaAttributesValueMapper = new AriaAttributesValueMapper(() => {
+      return this.host.shadowRoot.querySelector('input');
+    }, {
+      'aria-label': {
+        dependency: ['data-aria-label', 'label'],
+        defaultValue: 'No label defined',
+      },
+      'aria-hidden': {
+        dependency: ['data-aria-hidden'],
+        defaultValue: null,
+      },
+    });
+    this.dataTabIndexValueMapper = new DataTabIndexValueMapper(() => {
+      return this.host.shadowRoot.querySelector('input');
+    });
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -376,7 +393,7 @@ export class VegaInput {
         "text": "Specifies the label or title for the input field.\n\nIt provides descriptive text that helps identify the\n   purpose or content expected in the input field."
       },
       "attribute": "label",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "''"
     },
     "labelSuffixButtonProps": {
@@ -1375,6 +1392,12 @@ export class VegaInput {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaInput.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "ariaAttributesValueMapper", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInput.prototype, "dataTabIndexValueMapper", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInput.prototype, "formFieldController", void 0);

package/dist/collection/components/vega-input-passcode/slimmers/controllers/vega-input-passcode-keyboard-controller.js

@@ -26,6 +26,7 @@ export class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer
       {
         keyCode: ['ArrowLeft', 'ArrowRight'],
         activeElementInScope: [this.inputPasscodeRenderer.getInputPasscodeContainerRef()],
+        eventName: 'keydown',
         callback: 
         /* istanbul ignore next */
         /* eslint-disable jsdoc/require-jsdoc */
@@ -72,6 +73,7 @@ export class VegaInputPasscodeKeyboardController extends KeyboardManagerSlimmer
    * @param {KeyboardEvent} event - the keyboard event of ArrowLeft and ArrowRight
    */
   controlDirectionByKeyboard(event) {
+    event.preventDefault();
     const currentIndex = this.inputPasscodeRenderer.getCurrentIndex();
     const vegaInputRefs = this.inputPasscodeRenderer.getVegaInputRefs();
     if (event.key === 'ArrowLeft' && currentIndex > 0) {

package/dist/collection/components/vega-input-passcode/slimmers/renderers/vega-input-passcode-renderer.js

@@ -94,7 +94,7 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
     return this.inputPasscodeContainerRef;
   }
   render() {
-    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, tabIndex: index !== 0 ? -1 : null, showClearIcon: false, disabled: this.disabled, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
+    const vegaInputBoxes = Array.from({ length: this.length }).map((_, index) => (h("vega-input", { class: this.size === 'small' ? 'small' : 'medium', key: index, "data-tabindex": index !== 0 ? -1 : 0, showClearIcon: false, disabled: this.disabled, "data-aria-hidden": String(!this.isInputAccessibleForScreenReader(index)), "data-aria-label": `Passcode input ${index + 1} of ${this.length}`, value: this.vegaInputValues.get(index) || '', autocomplete: index === 0 ? 'one-time-code' : 'off', inputmode: this.inputType === 'text' ? 'text' : 'numeric', ref: (ref) => {
         this.vegaInputRefs[index] = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, this.handleVegaFocus(index));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, this.handleVegaBlur(index));
@@ -106,12 +106,40 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
       } })));
     return (h(Host, null,
       this.label && this.renderLabel(),
-      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
+      h("vega-flex", { class: "vega-input-passcode-container", direction: "row", gap: "size-8", role: "group", "aria-label": this.label || 'One-time password input', ref: (dom) => (this.inputPasscodeContainerRef = dom) }, vegaInputBoxes),
       this.hint && h("vega-hint", null, this.hint)));
   }
   renderLabel() {
     return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
   }
+  /**
+   * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
+   *
+   * @param {number} inputLength - the input length of the passcode, which is also the number of input boxes to render
+   * @returns {number} - the index of the first empty input box, or -1 if all boxes are filled
+   */
+  getFirstEmptyIndexForRender(inputLength) {
+    for (let index = 0; index < inputLength; index++) {
+      const currentValue = this.vegaInputValues.get(index);
+      if (!currentValue) {
+        return index;
+      }
+    }
+    return -1;
+  }
+  /**
+   * Determine whether the input box at the given index should be accessible to screen readers. Only the boxes up to and including the first empty box should be accessible, as screen readers will read out all accessible boxes and we don't want them to read out empty boxes that come before filled boxes.
+   *
+   * @param {number} index - the index of the input box to check
+   * @returns {boolean} - true if the input box should be accessible to screen readers, false otherwise
+   */
+  isInputAccessibleForScreenReader(index) {
+    const firstEmptyIndexForRender = this.getFirstEmptyIndexForRender(this.length);
+    if (firstEmptyIndexForRender === -1) {
+      return true;
+    }
+    return index <= firstEmptyIndexForRender;
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-input-passcode-on-input-value-input}

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/country-select-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, VegaSlimmer } from 'vega-slimmer/core';
-import { getCountries } from 'libphonenumber-js';
+import { getCountries } from '../../../../polyfill/libphonenumber';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { COUNTRIES } from '../../assets/countries';
 import { VegaDropdownSearchInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/vega-input-phone-number-value-controller.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
-import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, } from 'libphonenumber-js';
+import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, } from '../../../../polyfill/libphonenumber';
 import { CountrySelectController } from './country-select-controller';
 /**
  * The `VegaInputPhoneNumberValueController` class in TypeScript manages input phone number values and

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -9,7 +9,7 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 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 { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { getCountryCallingCode } from 'libphonenumber-js';
+import { getCountryCallingCode } from '../../../../polyfill/libphonenumber';
 import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/phone-number-input-renderer.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 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 { parseIncompletePhoneNumber } from 'libphonenumber-js';
+import { parseIncompletePhoneNumber } from '../../../../polyfill/libphonenumber';
 import { VegaPhoneNumberInputStrategy } from '../../../../helpers/formatter/string-formatter/vega-phone-number-input-strategy';
 export class PhoneNumberInputRenderer extends VegaSlimmer {
   constructor() {

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -10,7 +10,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaInputPhoneNumberRenderer } from './slimmers/renderers/vega-input-phone-number-renderer';
 import { CountrySelectRenderer } from './slimmers/renderers/country-select-renderer';
 import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-input-renderer';
-import { getCountryCallingCode } from 'libphonenumber-js';
+import { getCountryCallingCode } from '../../polyfill/libphonenumber';
 import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
@@ -298,7 +298,7 @@ export class VegaInputPhoneNumber {
       "mutable": false,
       "complexType": {
         "original": "VegaCountryCode[]",
-        "resolved": "CountryCode[]",
+        "resolved": "VegaCountryCode[]",
         "references": {
           "VegaCountryCode": {
             "location": "import",
@@ -533,7 +533,7 @@ export class VegaInputPhoneNumber {
       },
       "complexType": {
         "original": "VegaCountryType",
-        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "resolved": "{ callingCode: string; countryCode: VegaCountryCode; name: string; }",
         "references": {
           "VegaCountryType": {
             "location": "import",
@@ -559,7 +559,7 @@ export class VegaInputPhoneNumber {
       },
       "complexType": {
         "original": "VegaCountryType",
-        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "resolved": "{ callingCode: string; countryCode: VegaCountryCode; name: string; }",
         "references": {
           "VegaCountryType": {
             "location": "import",

package/dist/collection/components/vega-nav/vega-left-nav-link/slimmers/renderers/vega-left-nav-link-renderer.js

@@ -28,7 +28,6 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
     };
   }
   render() {
-    var _a;
     const url = this.url || 'javascript:void(0);';
     const classList = this.selected === true ? 'selected' : '';
     return (h(Host, { class: classList, "data-key": this.itemKey },
@@ -38,8 +37,8 @@ export class VegaLeftNavLinkRenderer extends VegaSlimmer {
             h("vega-icon", { icon: this.icon, size: "size-16" })))),
         h("span", { class: "vega-links-name" },
           h("slot", null)),
-        h("div", { class: "vega-counter-badge" },
-          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: (_a = this.counterBadge) === null || _a === void 0 ? void 0 : _a.color })))));
+        !!this.deprecatedPropertySlimmer.getValue() && (h("div", { class: "vega-counter-badge" },
+          h("vega-counter-badge", { count: this.deprecatedPropertySlimmer.getValue(), color: this.counterBadge.color }))))));
   }
   notifyVegaLeftNav() {
     const vegaLeftNav = findParent(this.host, 'vega-left-nav');

package/dist/collection/components/vega-popover/vega-popover-content-box/vega-popover-content-box.css

@@ -2559,6 +2559,11 @@
   border-bottom-color: transparent;
 }
 
+:host(.vega-no-suitable-placement) .vega-arrow,
+:host(.vega-no-suitable-alignment) .vega-arrow {
+  display: none;
+}
+
 :host(.vega-placement-left) .vega-arrow {
   transform: rotate(144deg);
   right: -9px;

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

@@ -11,6 +11,7 @@ import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/sl
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 import RTEBlockRendererFactory from '../../../vega-rich-text-editor/dto/renderers/renderer-factory';
 import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
+import stateEntityRenderingRegistry from '../../../vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
@@ -47,6 +48,7 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   renderContent() {
     var _a;
     const renderContext = { editable: this.contentEditable };
+    this.injectRTERefIntoContext(renderContext);
     return (_a = this.content) === null || _a === void 0 ? void 0 : _a.children.map((block) => {
       const blockRenderer = RTEBlockRendererFactory.getBlockRenderer(block.type);
       if (blockRenderer) {
@@ -69,6 +71,19 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     }
     return true;
   }
+  /**
+   * Inject the reference of rich text editor into render context for the usage of extensions.
+   *
+   * @param {RTERenderContext} renderContext - The render context which may contain the host reference.
+   */
+  injectRTERefIntoContext(renderContext) {
+    const content = this.content;
+    if (content) {
+      const ref = stateEntityRenderingRegistry.getDOMByEntity(content);
+      // The ref will be null if the content is not rendered by VegaRichTextEditor, in that case we will not inject the ref into context to avoid potential error on extensions which use the ref.
+      ref && (renderContext.host = ref);
+    }
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -57,7 +57,13 @@ class RTEImageNodeRenderer extends RTENodeRenderer {
   renderImage(imageAnnotation, node, renderContext) {
     var _a;
     return (h("img", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render({ filterAttributes: ['width', 'height'] }), { class: this.getClassesForImageNode(node, renderContext.editable), style: renderContext.editable
-        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node) })));
+        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node), 
+      // eslint-disable-next-line react/jsx-no-bind
+      onError: (e) => {
+        const img = e.target;
+        img.style.width = '16px';
+        img.style.height = '16px';
+      } })));
   }
   /**
    * Get the custom class string of the current RTEImageNode.

package/dist/collection/components/vega-rich-text-editor/extensions/base-extension-renderer.js

@@ -1,4 +1,5 @@
 import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { isNonNullable } from '../../../types/type-guard';
 import { VegaRTEBaseRenderer } from '../dto/renderers/base-renderer';
 import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
@@ -52,6 +53,16 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
   getDTORenderer(key) {
     return RTEDTORendererManager.getRTERenderer(key);
   }
+  /**
+   * Get the extension context for the given rich text editor host element.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return rteExtensionContextManager.getExtensionContext(el);
+  }
   /**
    * Auto render the block children if the block element is not exist
    *

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -1,6 +1,7 @@
 import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClick, VegaDropdownClick } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../helpers/icon/internal-icon-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { isNonNullable } from '../../../types/type-guard';
 /**
  * Base class for rendering extension toolbar button in the rich text editor.
@@ -23,6 +24,16 @@ export class VegaRTEToolbarButtonRenderer {
   isHidden(editorContext) {
     return editorContext.sourceEditMode;
   }
+  /**
+   * Get the extension context for the given rich text editor host element.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return rteExtensionContextManager.getExtensionContext(el);
+  }
   /**
    * Renders a dropdown component with the specified properties and children.
    *
@@ -36,7 +47,10 @@ export class VegaRTEToolbarButtonRenderer {
     return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => {
+          const payload = input;
+          this.handleDropdownClick(payload.detail, editorContext);
+        });
       } }, dropdownProps), children);
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/extension.abstract.js

@@ -2,6 +2,7 @@ import RTEDTOClassManager from '../../../helpers/rte-manager/dto-class-manager';
 import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
 import RTEDTOActionStrategyManager from '../../../helpers/rte-manager/dto-action-strategy-manager';
 import ElementToDTOClassStrategyManager from '../../../helpers/rte-manager/element-dto-class-strategy-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { ActionHandleStrategyRegistry } from '../dto/action-handle-strategies/action-handle-strategy-registry';
 import { VegaRTEExtensionRenderer } from './base-extension-renderer';
 import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategies/action-handle-interceptor-registry';
@@ -43,6 +44,7 @@ export class VegaRTEExtension {
    */
   initialExtension(context) {
     this.extensionContext = context;
+    rteExtensionContextManager.setExtensionContext(context);
   }
   /**
    * Collect custom styles for the extension renderers.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/function-extension.js

@@ -40,17 +40,6 @@ export class VegaRTEFunctionExtension extends VegaRTEExtension {
     this.registerElementToBlockDTOClassStrategy(convertFunctionContentStrategy);
     this.registerElementToBlockDTOClassStrategy(convertFunctionBlockStrategy);
   }
-  /**
-   * Initializes the extension with the given context
-   *
-   * @param {RTEExtensionContext} context - extension context
-   */
-  initialExtension(context) {
-    super.initialExtension(context);
-    if (this.toolbarButtonRenderer) {
-      this.toolbarButtonRenderer.injectExtensionContext(context);
-    }
-  }
   /**
    * Remove the appen children strategies to prevent default insert new paragraph logic in function block
    */

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

@@ -6,14 +6,6 @@ import { INSERT_FUNCTION_BLOCK, InsertFunctionBlockAction, } from '../actions/in
  * Function toolbar button renderer class.
  */
 export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  /**
-   * Injects the extension context
-   *
-   * @param {RTEExtensionContext} context - extension context
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * @inheritDoc
    */
@@ -29,11 +21,13 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
   /**
    * Overrides the isDisabled method to determine if the button should be disabled.
    *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    * @returns {boolean} - true if the button should be disabled, false otherwise.
    */
-  isDisabled() {
-    if (this.extensionContext) {
-      const { host, getSelectedNodes } = this.extensionContext;
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
       const focusNode = getSelectedNodes()[0];
       let enableInsert = true;
       if (focusNode) {
@@ -52,19 +46,25 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
    * Handles dropdown click event
    *
    * @param {RTEExtensionFunctionType} itemKey - key of the clicked item
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    */
-  handleDropdownClick(itemKey) {
-    const { host, getSelectedNodes } = this.extensionContext;
-    const focusNode = getSelectedNodes()[0];
-    const action = new InsertFunctionBlockAction(itemKey);
-    if (!focusNode) {
-      host.value.apply(action);
-    }
-    else if (focusNode.parent) {
-      focusNode.parent.apply(action);
-    }
-    if (action.nextFocusNode) {
-      host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+  handleDropdownClick(itemKey, editorContext) {
+    if (editorContext) {
+      const context = this.getExtensionContext(editorContext.host);
+      if (context) {
+        const { host, getSelectedNodes } = context;
+        const focusNode = getSelectedNodes()[0];
+        const action = new InsertFunctionBlockAction(itemKey);
+        if (!focusNode) {
+          host.value.apply(action);
+        }
+        else if (focusNode.parent) {
+          focusNode.parent.apply(action);
+        }
+        if (action.nextFocusNode) {
+          host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+        }
+      }
     }
   }
 }

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

@@ -20,16 +20,6 @@ export class VegaRTETokenExtension extends VegaRTEExtension {
     this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
     this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
   }
-  /**
-   * @inheritDoc
-   */
-  initialExtension(context) {
-    super.initialExtension(context);
-    this.tokenRenderer.injectExtensionContext(context);
-    if (this.tokenToolbarButtonRenderer) {
-      this.tokenToolbarButtonRenderer.injectExtensionContext(context);
-    }
-  }
 }
 (() => {
   const insertTokenNodeStrategy = new InsertTokenNodeStrategy();

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

@@ -1,13 +1,9 @@
-import { UpdateCursorPositionAction } from '../../public-api';
+import { UpdateCursorPositionAction } from '../../dto/actions/update-cursor-position-action';
 import { VegaRTEExtensionRenderer } from '../base-extension-renderer';
 /**
  * Token node renderer for the rich text editor.
  */
 export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
-  constructor() {
-    super(...arguments);
-    this.extensionContext = null;
-  }
   /**
    * Renders the token node as a DOM element.
    *
@@ -23,18 +19,10 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       'onClick': (event) => {
         event.preventDefault();
         if (editorContent && editorContent.editable !== false) {
-          this.handleTokenElementClick(event, node);
+          this.handleTokenElementClick(event, node, editorContent.host);
         }
       } }), node.text);
   }
-  /**
-   * Sets the RTE extension context.
-   *
-   * @param {RTEExtensionContext} context - The context of the RTE extension.
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * Override to inject RTE scope styles for the token node.
    *
@@ -46,13 +34,15 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
   /**
    * Handle the click event on the token element.
    *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
    * @param {MouseEvent} event - The click event.
    * @param {RTETokenNode} node - The token node that was clicked.
+   * @param {HTMLVegaRichTextEditorElement} [richTextEditor] - The rich text editor host element.
    */
-  handleTokenElementClick(event, node) {
+  handleTokenElementClick(event, node, richTextEditor) {
     event.preventDefault();
-    if (this.extensionContext) {
-      this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
+    if (richTextEditor) {
+      richTextEditor.value.apply(new UpdateCursorPositionAction(node, undefined, true));
     }
   }
   /**

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

@@ -9,17 +9,8 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
   constructor(tokenList) {
     super();
     this.tokenList = [];
-    this.extensionContext = null;
     this.tokenList = tokenList;
   }
-  /**
-   * Sets the RTE extension context.
-   *
-   * @param {RTEExtensionContext} context - The context of the RTE extension.
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * Renders the token toolbar button.
    *
@@ -36,11 +27,13 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
   /**
    * Checks if the token toolbar button is disabled.
    *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    * @returns {boolean} True if the button is disabled, false otherwise.
    */
-  isDisabled() {
-    if (this.extensionContext) {
-      const { host, getSelectedNodes } = this.extensionContext;
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
       const [startNode] = getSelectedNodes();
       return startNode
         ? host.disabled ||
@@ -72,16 +65,19 @@ export class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
       const action = new InsertTokenNodeAction(rteRange, token);
       startNode.parent.apply(action);
       if (action.actionHandleResult) {
-        this.flushEditorUI();
+        this.flushEditorUI(editorContext);
       }
     }
   }
   /**
    * Refreshes the editor UI.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    */
-  flushEditorUI() {
-    if (this.extensionContext) {
-      const { host, flushValue } = this.extensionContext;
+  flushEditorUI(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, flushValue } = context;
       flushValue(host.value);
     }
   }