@heartlandone/vega 2.82.0 → 2.83.0

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

@@ -87,6 +87,21 @@ export class VegaCheckbox {
      * @vegaVersion 1.0.7
      */
     this.checked = false;
+    /**
+     * Specifies whether the checkbox is in an indeterminate state.
+     *
+     * The indeterminate state is a visual-only state typically used to represent
+     *    a checkbox whose value is neither fully checked nor fully unchecked,
+     *    such as a "select all" control where only some children are selected.
+     *
+     * Setting this property does not affect the `checked` or `value` properties.
+     *    User interaction (clicking) will clear the indeterminate state and
+     *    toggle `checked` as usual.
+     *
+     * @vegaVersion 2.83.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.indeterminate = false;
     /**
      * Specifies whether the checkbox element is disabled.
      *
@@ -114,11 +129,14 @@ export class VegaCheckbox {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
     /**
-     * The below method is e2e-test covered in
+     * Indeterminate-clearing behavior is unit-tested.
+     * The checked-state side of this method is e2e-test covered in
      * @see{module:vega-checkbox-change}
      */
-    /* istanbul ignore next */
     this.onCheckBoxChange = (e) => {
+      if (this.indeterminate) {
+        this.indeterminate = false;
+      }
       this.checked = e.currentTarget.checked;
     };
     this.onSelectedIconClick = (e) => {
@@ -145,6 +163,7 @@ export class VegaCheckbox {
     if (this.host.innerHTML.trim() === '') {
       this.labelElement.classList.add('vega-hidden');
     }
+    this.syncNativeIndeterminate();
   }
   /**
    * Invoke this method to set the value of the checkbox.
@@ -163,6 +182,7 @@ export class VegaCheckbox {
     return sanitizeVegaComponent(h(Host, { class: {
         'vega-flex-shrink-0 v-min-w-min': isInsideCheckboxGroup,
         'checked': this.checked,
+        'indeterminate': this.indeterminate,
         'disabled': this.isDisabled(),
       } },
       h("label", { class: arrayToClassString([
@@ -170,13 +190,16 @@ export class VegaCheckbox {
           this.showError && 'error',
           this.size && `size-${this.size}`,
         ]), ref: (e) => (this.inputContainerRef = e) },
-        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', disabled: this.isDisabled(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
+        h("input", { ref: (e) => (this.inputRef = e), type: "checkbox", checked: this.checked, value: this.identifier, onChange: this.onCheckBoxChange, "aria-label": this.identifier || 'No label defined', "aria-checked": this.indeterminate ? 'mixed' : undefined, disabled: this.isDisabled(), tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() }),
         h("span", { class: "vega-checkbox-icon", onClick: this.onSelectedIconClick, tabIndex: -1 }, this.renderIconDom()),
         h("div", { class: "vega-checkbox-label-container", ref: (el) => (this.labelElement = el) },
           this.renderLabelDom(),
           this.renderRequireDom()))), this.host);
   }
   renderIconDom() {
+    if (this.indeterminate) {
+      return h("vega-icon", { icon: "minus-sign", size: this.size === 'small' ? 'size-12' : 'size-16' });
+    }
     return this.checked ? (h("vega-icon", { icon: "checkmark", size: this.size === 'small' ? 'size-12' : 'size-16' })) : null;
   }
   renderLabelDom() {
@@ -191,6 +214,16 @@ export class VegaCheckbox {
   initValue() {
     this.value = this.identifier !== '' ? (this.checked ? this.identifier : '') : this.checked;
   }
+  /**
+   * Syncs the indeterminate property to the native input element.
+   * The HTML `indeterminate` attribute can only be set via JavaScript,
+   *    so it must be applied imperatively after each render.
+   */
+  syncNativeIndeterminate() {
+    if (this.inputRef) {
+      this.inputRef.indeterminate = this.indeterminate;
+    }
+  }
   /**
    * indicating whether the component is disabled or not, single checkbox will take the self disabled value and the checkbox in group will take the self disabled and group disabled value
    *
@@ -305,6 +338,27 @@ export class VegaCheckbox {
       "reflect": false,
       "defaultValue": "false"
     },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.83.0"
+          }],
+        "text": "Specifies whether the checkbox is in an indeterminate state.\n\nThe indeterminate state is a visual-only state typically used to represent\n   a checkbox whose value is neither fully checked nor fully unchecked,\n   such as a \"select all\" control where only some children are selected.\n\nSetting this property does not affect the `checked` or `value` properties.\n   User interaction (clicking) will clear the indeterminate state and\n   toggle `checked` as usual."
+      },
+      "attribute": "indeterminate",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-controller.js

@@ -29,18 +29,23 @@ export class VegaModalBackdropController extends VegaSlimmer {
    * Set backdrop of modal.
    */
   setBackdrop() {
+    var _a;
     if (this.backdrop === 'none')
       return;
     // eslint-disable-next-line no-restricted-globals
-    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    let backdrop = document.querySelector(`vega-backdrop.${VegaModalBackdropController.modalBackdropClass}`);
     if (!backdrop) {
       // eslint-disable-next-line no-restricted-globals
       backdrop = document.createElement('vega-backdrop');
-      backdrop.classList.add('modal-backdrop');
+      backdrop.classList.add(VegaModalBackdropController.modalBackdropClass);
       backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
       backdrop.visible = true;
+      // Append backdrop as a sibling of the modal host so it shares the same stacking context.
+      // - When vega-modal is in document.body (normal case), parentElement is document.body.
+      // - When vega-modal is inside a third-party dialog (e.g. Bootstrap modal), parentElement is the dialog container — keeping the backdrop inside the focus-trap root.
+      // - Falls back to document.body when parentElement is null (e.g. VegaDialog creates the vega-modal element before appending it to the DOM).
       // eslint-disable-next-line no-restricted-globals
-      document.querySelector('body').append(backdrop);
+      ((_a = this.host.parentElement) !== null && _a !== void 0 ? _a : document.body).append(backdrop);
     }
     this.backdropRef = backdrop;
   }
@@ -51,6 +56,7 @@ export class VegaModalBackdropController extends VegaSlimmer {
     this.backdropRef && this.backdropRef.remove();
   }
 }
+VegaModalBackdropController.modalBackdropClass = 'vega-modal-backdrop';
 VegaModalBackdropController.backdropColorMap = {
   default: 'bg-backdrop-modal',
   semi: 'bg-backdrop-popover',

package/dist/collection/components/vega-modal/slimmers/controllers/vega-nested-modal-controller.js

@@ -4,11 +4,26 @@ 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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-slimmer';
+import { TagNameMutationFilter } from '../../../../helpers/slimmers/mutation-observer/mutation-observer-filters';
 /**
  * Nested modal controller
  */
-export class VegaNestedModalController extends VegaSlimmer {
+export class VegaNestedModalController extends MutationObserverSlimmer {
+  constructor() {
+    super({
+      mutationFilter: TagNameMutationFilter('VEGA-MODAL'),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: () => {
+        this.appendNestedModalToBody();
+      },
+    });
+  }
   /**
    * Component lifecycle - [connectedCallback]
    */

package/dist/collection/components/vega-pagination/internal/vega-pagination-go-to.js

@@ -21,7 +21,7 @@ export const VegaPaginationGoTo = ({ onChange, pageCount, translationSlimmer, })
       ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, handleChange);
       } },
-      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", showClearIcon: false, style: { width: '60px' }, maskConfig: {
+      h("vega-input", { "data-vega-form": "paginationGoTo", type: "number", size: "small", autocomplete: "on", showClearIcon: false, style: { width: '60px' }, maskConfig: {
           type: 'number',
           options: {
             allowNegative: false,

package/dist/collection/components/vega-pagination/vega-pagination-page-selector-mobile/slimmers/renderers/page-selector-mobile-renderer.js

@@ -42,7 +42,7 @@ export class PageSelectorMobileRenderer extends VegaSlimmer {
       h("vega-form", { ref: (ref) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFormSubmit, this.handleChange);
         } },
-        h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", showClearIcon: false, style: { width: '54px' }, maskConfig: {
+        h("vega-input", { "data-vega-form": "pageSelectorMobile_goTo", size: "small", autocomplete: "on", showClearIcon: false, style: { width: '54px' }, maskConfig: {
             type: 'number',
             options: {
               allowNegative: false,

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

@@ -92,17 +92,16 @@ export class VegaProgressTracker {
      */
     this.canClickStep = true;
     /**
-     * When enabled, allows `current` to be set to `-1` to indicate
-     *    no highlighted/current step (e.g. all steps are pending or
-     *    the workflow has not started).
+     * When enabled, `current = -1` becomes a valid state that indicates
+     *    no highlighted/current step (e.g. all steps are pending or the
+     *    workflow has not started).
      *
-     * Defaults to `false` to preserve backward-compatible behavior:
-     *    `current` is clamped to `[0, steps.length - 1]`.
+     * Two ways to enter this state:
+     * - Set the `current` prop to `-1`.
+     * - Call the `setCurrent(-1)` method.
      *
-     * When enabled, `current = -1` is a valid state. The `prevStep()`
-     *    method still clamps at `0` — reaching `-1` is only possible
-     *    by explicitly setting `current = -1` via the prop or
-     *    `setCurrent(-1)`.
+     * @VegaHint `prevStep()` still clamps at `0` and will not take `current`
+     *    into `-1`.
      *
      * @vegaVersion 2.82.0
      */
@@ -330,10 +329,13 @@ export class VegaProgressTracker {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaHint",
+            "text": "`prevStep()` still clamps at `0` and will not take `current`\ninto `-1`."
+          }, {
             "name": "vegaVersion",
             "text": "2.82.0"
           }],
-        "text": "When enabled, allows `current` to be set to `-1` to indicate\n   no highlighted/current step (e.g. all steps are pending or\n   the workflow has not started).\n\nDefaults to `false` to preserve backward-compatible behavior:\n   `current` is clamped to `[0, steps.length - 1]`.\n\nWhen enabled, `current = -1` is a valid state. The `prevStep()`\n   method still clamps at `0` \u2014 reaching `-1` is only possible\n   by explicitly setting `current = -1` via the prop or\n   `setCurrent(-1)`."
+        "text": "When enabled, `current = -1` becomes a valid state that indicates\n   no highlighted/current step (e.g. all steps are pending or the\n   workflow has not started).\n\nTwo ways to enter this state:\n- Set the `current` prop to `-1`.\n- Call the `setCurrent(-1)` method."
       },
       "attribute": "allow-no-current-step",
       "reflect": false,

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

@@ -49,12 +49,27 @@ export class VegaRTEExtension {
   static registerFilterStylesStrategy(blockOrNodeClassName, strategy) {
     RTEFilterStylesStrategyRegistry.register(blockOrNodeClassName, strategy);
   }
+  /**
+   * Lifecycle hook called by the rich text editor before the first render
+   * (during `componentWillLoad`).  Override this method to perform per-host
+   * pre-render setup — for example, registering a host-specific toolbar button
+   * renderer via {@link registerToolbarButtonRenderer} so that each editor on
+   * the page gets its own isolated renderer instance.
+   *
+   * The default implementation is a no-op; subclasses may override selectively.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The host rich text editor element that is about to load.
+   */
+  prepareBeforeLoad(host) {
+    methodPlaceholder(host);
+  }
   /**
    * Initializes the RTE extension with the provided context.
    *
    * @param {RTEExtensionContext} context - The context of the RTE extension.
    */
-  initialExtension(context) {
+  initialExtensionAfterLoad(context) {
     this.extensionContext = context;
     rteExtensionContextManager.setExtensionContext(context);
   }
@@ -103,12 +118,22 @@ export class VegaRTEExtension {
   }
   /**
    * Register a toolbar button renderer for the extension.
+   * When a `host` element is provided the renderer is registered in the per-host map
+   * (via {@link RTEDTORendererManager#registerRTEToolbarButtonRendererForHost}), giving
+   * that host an isolated renderer instance that takes precedence over the global singleton.
+   * Omit `host` to fall back to the global registration (backwards-compatible default).
    *
    * @param {string} type - The type of the toolbar button.
    * @param {VegaRTEToolbarButtonRenderer} renderer - The renderer to register.
+   * @param {HTMLVegaRichTextEditorElement} [host] - Optional host element for per-host isolation.
    */
-  registerToolbarButtonRenderer(type, renderer) {
-    RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+  registerToolbarButtonRenderer(type, renderer, host) {
+    if (host) {
+      RTEDTORendererManager.registerRTEToolbarButtonRendererForHost(host, type, renderer);
+    }
+    else {
+      RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+    }
   }
   /**
    * This is a helper method that utilizes RTEUtils to register common strategies.

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

@@ -8,6 +8,7 @@ import { RTELanguageToolbarButtonRenderer } from './language-toolbar-button-rend
 export class VegaRTELanguageExtension extends VegaRTEExtension {
   constructor(languageList, languagesState) {
     super();
+    this.languageToolbarButtonRenderer = null;
     this.languageState = {
       selectedLanguage: '',
       contentMap: {},
@@ -25,24 +26,39 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
       this.languageState.selectedLanguage = selectedLanguage;
       this.applyLanguageContent(selectedLanguage, this.languageState.contentMap);
     };
+    this.languageList = languageList;
     if (languagesState) {
       this.languageState = Object.assign(Object.assign({}, this.languageState), languagesState);
     }
     if (!this.languageState.selectedLanguage && languageList.length > 0) {
       this.languageState.selectedLanguage = languageList[0].key;
     }
-    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
-    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer);
+  }
+  /**
+   * Called by the rich text editor during `componentWillLoad` (before the first render).
+   * Creates a fresh {@link RTELanguageToolbarButtonRenderer} instance dedicated to this
+   * host element and registers it in the per-host map inside {@link RTEDTORendererManager}.
+   * This ensures that each editor on the page has its own isolated renderer — no shared
+   * singleton state, no WeakMap indirection.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type of the host rich text editor element.
+   * @param {HTMLVegaRichTextEditorElement} host - The host rich text editor element.
+   */
+  prepareBeforeLoad(host) {
+    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(this.languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
+    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer, host);
   }
   /**
    * Initializes the language extension.
-   * Applies the content for the selected language upon initialization.
    *
    * @param {RTEExtensionContext} context The extension context.
    */
-  initialExtension(context) {
-    super.initialExtension(context);
+  initialExtensionAfterLoad(context) {
+    super.initialExtensionAfterLoad(context);
     const { selectedLanguage, contentMap } = this.languageState;
+    if (this.languageToolbarButtonRenderer) {
+      this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    }
     if (contentMap && contentMap[selectedLanguage]) {
       this.applyLanguageContent(this.languageState.selectedLanguage, this.languageState.contentMap);
     }
@@ -54,7 +70,9 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
    */
   setState(state) {
     const { selectedLanguage, contentMap } = state;
-    this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    if (this.languageToolbarButtonRenderer) {
+      this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    }
     this.languageState.selectedLanguage = selectedLanguage;
     this.languageState.contentMap = Object.assign({}, contentMap);
     this.applyLanguageContent(selectedLanguage, contentMap);

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

@@ -2,30 +2,41 @@ import { methodPlaceholder } from 'vega-slimmer/core';
 import { VegaRTEToolbarButtonRenderer } from '../base-toolbar-button-renderer';
 /**
  * Toolbar button renderer for language selection in Vega Rich Text Editor.
+ *
+ * Each {@link HTMLVegaRichTextEditorElement} that uses a language extension receives its
+ * **own** instance of this renderer, registered in the per-host map inside
+ * {@link RTEDTORendererManager} via {@link VegaRTEExtension#prepareBeforeLoad}.  Because
+ * every editor has a dedicated renderer, all state (label DOM ref, selected language, and
+ * the language-change callback) is held in plain instance fields — no WeakMaps or shared
+ * singletons are required.
  */
 export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  constructor(languageList, languageChangeCallback, selectedLanguage) {
+  constructor(languageList, languageChangeCallback, selectedLanguage = '') {
     super();
     this.languageList = [];
-    this.selectedLanguage = 'Select Language';
+    this.languageChangeCallback = null;
+    this.selectedLanguage = '';
     this.labelRef = null;
     /**
      * Handles the language selection event.
+     * Because each editor has its own renderer instance, the language-change callback
+     * is stored directly on this instance — no indirect context lookup is needed.
      *
      * @param {string} itemKey - The key of the selected language item.
      */
     this.handleDropdownClick = (itemKey) => {
       this.setSelectedLanguage(itemKey);
       if (typeof this.languageChangeCallback === 'function') {
-        this.languageChangeCallback(this.selectedLanguage);
+        this.languageChangeCallback(itemKey);
       }
     };
     this.languageList = languageList;
-    this.selectedLanguage = selectedLanguage;
     this.languageChangeCallback = languageChangeCallback;
+    this.selectedLanguage = selectedLanguage;
   }
   /**
-   * Public method to set the selected language.
+   * Updates the selected language and refreshes the button label text in-place,
+   * without requiring a full re-render of the toolbar.
    *
    * @param {string} language The language key to set as selected.
    */
@@ -55,7 +66,8 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
     ]);
   }
   /**
-   * Override to render the button label with custom behavior.
+   * Override to capture the rendered label element ref so that
+   * {@link setSelectedLanguage} can update the button text without a full re-render.
    *
    * @inheritDoc
    */
@@ -65,7 +77,9 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
       variant: 'font-field-label-sm',
       color: isDisabled ? 'text-disabled' : 'text-primary',
       // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (el) => (this.labelRef = el),
+      ref: (el) => {
+        this.labelRef = el;
+      },
     }, label);
   }
   /* istanbul ignore next */
@@ -84,7 +98,8 @@ export class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRender
    * @returns {string} The label of the language, or the key if not found.
    */
   getLanguageLabelByKey(key) {
+    var _a;
     const language = this.getListItemByKey(this.languageList, key);
-    return language.label;
+    return (_a = language === null || language === void 0 ? void 0 : language.label) !== null && _a !== void 0 ? _a : 'Select Language';
   }
 }

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

@@ -129,10 +129,10 @@ export class VegaRTETableExtension extends VegaRTEExtension {
    *
    * @param {RTEExtensionContext} context - extension context
    */
-  initialExtension(context) {
+  initialExtensionAfterLoad(context) {
     this.tableSelection.init(context);
     const tableExtensionContext = Object.assign(Object.assign({}, context), { tableSelection: this.tableSelection });
-    super.initialExtension(tableExtensionContext);
+    super.initialExtensionAfterLoad(tableExtensionContext);
   }
   /**
    * @inheritDoc

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

@@ -46,6 +46,19 @@ export class RTEExtensionController extends VegaSlimmer {
       return this.selectionController.getSelectedNodes();
     };
   }
+  /**
+   * Prepares all registered extensions before the first render.
+   * This method is called during `componentWillLoad` so that extensions can perform
+   * host-specific setup (e.g. registering per-host toolbar button renderers) before
+   * Stencil renders the component for the first time.
+   */
+  prepareExtensionsBeforeLoad() {
+    if (this.extensions && this.host) {
+      for (const extension of this.extensions) {
+        extension.prepareBeforeLoad(this.host);
+      }
+    }
+  }
   /**
    * Initializes the extension context for all registered extensions.
    * This method is called when the component is connected and whenever the extensions property changes.
@@ -54,7 +67,7 @@ export class RTEExtensionController extends VegaSlimmer {
     if (this.extensions && this.host) {
       const extensionContext = this.generateExtensionContext();
       for (const extension of this.extensions) {
-        extension.initialExtension(extensionContext);
+        extension.initialExtensionAfterLoad(extensionContext);
       }
     }
   }
@@ -81,6 +94,7 @@ export class RTEExtensionController extends VegaSlimmer {
       }
     }
     if (!isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
+      this.prepareExtensionsBeforeLoad();
       this.initialExtensionContext();
     }
   }
@@ -115,6 +129,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], RTEExtensionController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], RTEExtensionController.prototype, "prepareExtensionsBeforeLoad", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);

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

@@ -70,7 +70,7 @@ export class ToolbarRenderer extends VegaSlimmer {
       const groupElement = group
         .map((item) => {
         const presetRenderer = this.getToolbarBtnRenderer(item);
-        const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+        const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item, this.host);
         if (presetRenderer) {
           if (!presetRenderer.isHidden()) {
             totalVisibleCount++;

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

@@ -14,7 +14,6 @@ import { VisualModeToolbarButtonSlimmer } from './visual-mode-toolbar-button-sli
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 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 { tryGetDocument } from '../../../../../utils/try-get-document';
 export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
@@ -27,7 +26,6 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       await this.insertURLModalRef.modal('hide');
     };
     this.handleDropdownItemClick = async (payload) => {
-      const safeDocument = tryGetDocument();
       switch (payload.detail) {
         case 'upload':
           this.uploadInputRef.click();
@@ -36,7 +34,8 @@ export class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
           this.currentRange = this.selectionController.getCurrentRange();
           this.currentSelectedNodes = this.selectionController.getSelectedNodes();
           this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
-          safeDocument && safeDocument.body.append(this.insertURLModalRef);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          this.host.parentElement.append(this.insertURLModalRef);
           this.insertURLInputRef.value = '';
           await this.insertURLModalRef.modal('show');
           await this.insertURLInputRef.doFocus();
@@ -167,6 +166,9 @@ ImageToolbarButtonSlimmer.items = [
     label: 'Insert via URL',
   },
 ];
+__decorate([
+  MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);

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

@@ -23,8 +23,9 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
       tooltip: { text: 'Text Styles' },
     });
     this.handleDropdownItemClick = (payload) => {
+      var _a, _b;
       const selectedType = payload.detail;
-      const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
+      const boldByDefault = (_b = (_a = TextStylesToolbarButtonSlimmer.allItems.find((item) => item.key === selectedType)) === null || _a === void 0 ? void 0 : _a.bold) !== null && _b !== void 0 ? _b : false;
       const selectedTextBlocks = this.selectionController
         .getSelectedBlocks()
         .filter((block) => block instanceof RTETextBlock);
@@ -53,7 +54,8 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
       h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())));
   }
   renderDropdownContent() {
-    return (h(Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
+    const visibleItems = TextStylesToolbarButtonSlimmer.allItems.filter((item) => this.textStyleItems.some((config) => config.key === item.key));
+    return (h(Fragment, null, visibleItems.map((item) => {
       const textStyleAnnotation = new TextStyleAnnotation(item.key);
       const boldAnnotation = new BoldAnnotation(item.bold);
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key },
@@ -91,7 +93,7 @@ export class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimm
     'text-size': textSize,
   });
 })();
-TextStylesToolbarButtonSlimmer.items = [
+TextStylesToolbarButtonSlimmer.allItems = [
   {
     key: 'title',
     label: 'Title',
@@ -127,3 +129,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
+__decorate([
+  MapToComponentField()
+], TextStylesToolbarButtonSlimmer.prototype, "textStyleItems", void 0);

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

@@ -204,6 +204,26 @@ export class VegaRichTextEditor {
      * @vegaVersion 2.34.0
      */
     this.validationRules = [];
+    /**
+     * Specifies which text style items appear in the Text Styles toolbar dropdown.
+     *
+     * Use this to control which heading levels and text styles are available to users.
+     * For example, omit `{ key: 'heading-1' }` to prevent users from applying H1
+     * (which is typically reserved for the page title).
+     *
+     * Items are displayed in a fixed internal order regardless of the order in this array.
+     *
+     * @vegaVersion 2.83.0
+     * @defaultValue [{ key: 'title' }, { key: 'subtitle' }, { key: 'heading-1' }, { key: 'heading-2' }, { key: 'heading-3' }, { key: 'paragraph' }]
+     */
+    this.textStyleItems = [
+      { key: 'title' },
+      { key: 'subtitle' },
+      { key: 'heading-1' },
+      { key: 'heading-2' },
+      { key: 'heading-3' },
+      { key: 'paragraph' },
+    ];
     /**
      * Specifies the configuration for the rich text editor extensions.
      *
@@ -532,6 +552,33 @@ export class VegaRichTextEditor {
       },
       "defaultValue": "[]"
     },
+    "textStyleItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaRTETextStyleItem[]",
+        "resolved": "VegaRTETextStyleItem[]",
+        "references": {
+          "VegaRTETextStyleItem": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.83.0"
+          }, {
+            "name": "defaultValue",
+            "text": "[{ key: 'title' }, { key: 'subtitle' }, { key: 'heading-1' }, { key: 'heading-2' }, { key: 'heading-3' }, { key: 'paragraph' }]"
+          }],
+        "text": "Specifies which text style items appear in the Text Styles toolbar dropdown.\n\nUse this to control which heading levels and text styles are available to users.\nFor example, omit `{ key: 'heading-1' }` to prevent users from applying H1\n(which is typically reserved for the page title).\n\nItems are displayed in a fixed internal order regardless of the order in this array."
+      },
+      "defaultValue": "[\n\t\t{ key: 'title' },\n\t\t{ key: 'subtitle' },\n\t\t{ key: 'heading-1' },\n\t\t{ key: 'heading-2' },\n\t\t{ key: 'heading-3' },\n\t\t{ key: 'paragraph' },\n\t]"
+    },
     "extensions": {
       "type": "unknown",
       "mutable": false,