@heartlandone/vega 2.81.0 → 2.83.0

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,

package/dist/collection/components/vega-stepper/vega-stepper.css

@@ -110,4 +110,16 @@
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 3px;
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
+}
+
+.aria-announcement {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
 }

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

@@ -191,7 +191,8 @@ export class VegaStepper {
           }, "data-aria-label": this.label || 'stepper' }),
         h("vega-button-circle", { label: "Increase", showTooltip: false, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => this.onIncrease());
-          }, icon: "plus-sign", disabled: this.value >= this.max || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' }))), this.host);
+          }, icon: "plus-sign", disabled: this.value >= this.max || this.disabled, size: "small", variant: this.buttonVariant == 'secondary' ? 'secondary' : 'primary' })),
+      h("div", { class: "aria-announcement", "aria-live": "polite", "aria-atomic": "true" }, `${this.label || 'stepper'}: ${this.value}`)), this.host);
   }
   renderLabelDom() {
     return this.label ? (h("label", { class: "v-text-center v-text-medium-typeset-1", htmlFor: this.stepperId }, this.label)) : null;

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-render-input-controller.js

@@ -6,8 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalColumnBodyCellRenderInputRIC, VegaInternalColumnHeadCellRenderInputRIC, VegaInternalColumnHeadRowRenderInputRIC, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalVegaTableRenderInputChange, VegaInternalColumnBodyCellRenderInputRIC, VegaInternalColumnHeadCellRenderInputRIC, VegaInternalColumnHeadRowRenderInputRIC, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
+import changeManager from '../../../../helpers/change-manager/change-manager';
+import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
 import { ColumnRenderInputModel } from './dto/column-render-input-model';
 /**
  * VegaTableRenderInputController
@@ -24,6 +26,7 @@ export class VegaTableRenderInputController extends VegaSlimmer {
     this.headRowRenderInputMap = new Map();
     this.headCellRenderInputMap = new Map();
     this.pinnedColumnBodyCellRenderInputMap = new Map();
+    this.cellRenderInputChangeTaskQueue = new SynchronizeTaskQueue();
   }
   /**
    * Register remote invocation observers when controller is connected.
@@ -46,12 +49,29 @@ export class VegaTableRenderInputController extends VegaSlimmer {
   componentWillLoad() {
     this.setRenderInputModel();
   }
+  /**
+   * Notify body cells about render input changes after the table has re-rendered.
+   * This ensures ref callbacks have fired and the pinnedColumnBodyCellRenderInputMap is up-to-date.
+   * Called via component lifecycle mapping.
+   */
+  async componentDidRender() {
+    await this.cellRenderInputChangeTaskQueue.runTask();
+  }
   /**
    * Recompute head context when the column structure model changes.
    * Called via watch mapping.
    */
-  watchColumnStructureModel() {
+  async watchColumnStructureModel() {
     this.setRenderInputModel();
+    this.pinnedColumnBodyCellRenderInputMap.clear();
+    await this.cellRenderInputChangeTaskQueue.enqueue({
+      /**
+       * Notify body-cell render-input changes after render completes.
+       */
+      run: async () => {
+        changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalVegaTableRenderInputChange), {});
+      },
+    }, false);
   }
   /**
    * Return render input models for table body (flattened leaves).
@@ -166,6 +186,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderInputController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTableRenderInputController.prototype, "componentDidRender", null);
 __decorate([
   MapToComponentMethod('watchColumnStructureModel')
 ], VegaTableRenderInputController.prototype, "watchColumnStructureModel", null);

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

@@ -8,6 +8,7 @@ import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, methodPla
 import { isNonNullable } from '../../../../types/type-guard';
 import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
 import { extractNumberFromString } from '../../../../utils/ui';
+import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
 export class VegaTablePinnedRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -26,14 +27,24 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
         });
       },
     });
+    this.previouslyStyledCells = new Set();
+    this.clearPinnedPositionsTaskQueue = new SynchronizeTaskQueue(1);
   }
   componentDidLoad() {
     methodPlaceholder;
   }
-  componentDidRender() {
+  async componentDidRender() {
+    await this.clearPinnedPositionsTaskQueue.runTask();
     this.updateTableRowPinnedPosition();
     this.updateTableCellPinnedPosition();
   }
+  watchColumnStructureModel() {
+    void this.clearPinnedPositionsTaskQueue.enqueue({
+      run: async () => {
+        this.clearAllPinnedPositions();
+      },
+    }, false);
+  }
   updateTableCellPinnedPosition() {
     if (!this.columnStructureModel.hasLeftPinnedColumn() &&
       !this.columnStructureModel.hasRightPinnedColumn())
@@ -144,12 +155,25 @@ export class VegaTablePinnedRenderer extends VegaSlimmer {
       }
     });
   }
+  clearAllPinnedPositions() {
+    this.previouslyStyledCells.forEach((cell) => {
+      cell.style.position = '';
+      cell.style.zIndex = '';
+      cell.style.left = '';
+      cell.style.right = '';
+      if (cell.classList.contains('expanded-row-slot-inner')) {
+        cell.style.width = '';
+      }
+    });
+    this.previouslyStyledCells.clear();
+  }
   updatePinnedPosition(cell, type, position) {
     if (!cell)
       return;
     cell.style.position = 'sticky';
     cell.style.zIndex = '1';
     cell.style[type] = `${position}px`;
+    this.previouslyStyledCells.add(cell);
   }
 }
 __decorate([
@@ -173,3 +197,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaTablePinnedRenderer.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('watchColumnStructureModel')
+], VegaTablePinnedRenderer.prototype, "watchColumnStructureModel", null);

package/dist/collection/components/vega-table/vega-table-cell/vega-table-cell.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 import { generateResponsiveClass, generateTextAlignClass } from '../utils';
-import { arrayToClassString, findParent } from '../../../utils/ui';
+import { arrayToClassString } from '../../../utils/ui';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaTableCellStateController } from './slimmers/controllers/vega-table-cell-state-controller';
 import ResponsiveFormatFacade from '../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
@@ -16,9 +16,8 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTableRowStateSubscriber } from './slimmers/controllers/vega-table-row-state-subscriber';
-import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
 import { VegaInternalColumnBodyCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
-import remoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
 /**
  * @vegaVersion 1.44.0
  */
@@ -29,6 +28,7 @@ export class VegaTableCell {
     this.vegaTableRowStateSubscriber = new VegaTableRowStateSubscriber();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnBodyCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     this.getCellOverflowClass = () => {
       switch (this.overflow) {
@@ -40,6 +40,7 @@ export class VegaTableCell {
     };
   }
   render() {
+    var _a, _b, _c;
     const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
     const columnAlignClass = generateTextAlignClass(this.textAlign);
     const overflowClass = this.getCellOverflowClass();
@@ -47,16 +48,13 @@ export class VegaTableCell {
     if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       columnClasses.push('break-word');
     }
-    const table = findParent(this.host, 'vega-table');
-    const renderInput = table &&
-      remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnBodyCellRenderInputRIC), this.host);
-    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned) {
+    if ((_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.isRightStartPinned) {
       columnClasses.push('left-divider');
     }
-    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned) {
+    if ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isLeftEndPinned) {
       columnClasses.push('right-divider');
     }
-    if (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd) {
+    if ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd) {
       columnClasses.push('hide-right-border');
     }
     return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
@@ -187,7 +185,8 @@ export class VegaTableCell {
     "clickable": {},
     "checked": {},
     "striped": {},
-    "expanded": {}
+    "expanded": {},
+    "renderInput": {}
   }; }
   static get elementRef() { return "host"; }
 }
@@ -206,3 +205,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);

package/dist/collection/components/vega-table/vega-table-head-cell/vega-table-head-cell.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 { Component, Host, h, Prop, Element, Event, State } from '@stencil/core';
-import { arrayToClassString, findParent } from '../../../utils/ui';
+import { arrayToClassString } from '../../../utils/ui';
 import { generateResponsiveClass } from '../utils';
 import { createEnterKeyHandlerToTriggerClick } from '../../../utils/accessibility';
 import { sanitizeVegaComponent } from '../../../utils/component';
@@ -26,9 +26,8 @@ import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-contr
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { SortIconRenderer } from './slimmers/renderers/sort-icon-renderer';
 import { VegaTableHeadCellSortConfigController } from './slimmers/controllers/vega-table-head-cell-sort-config-controller';
-import RemoteInvocationRegistry from '../../../helpers/remote-invocation/remote-invocation-registry';
-import domNodeSubjectFactory from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalColumnHeadCellRenderInputRIC } from '../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaTableChildRenderInputConsumerSlimmer } from '../../../helpers/slimmers/vega-table-child-render-input-consumer-slimmer';
 /**
  * @vegaVersion 1.44.0
  */
@@ -41,6 +40,7 @@ export class VegaTableHeadCell {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.sortIconRenderer = new SortIconRenderer();
     this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
+    this.vegaTableRenderInputConsumerSlimmer = new VegaTableChildRenderInputConsumerSlimmer(VegaInternalColumnHeadCellRenderInputRIC);
     this.currentBreakpoint = getCurrentBreakpoint();
     this.handleSort = (e) => {
       this.sortOrder = this.getNextSortOrder(this.sortOrder);
@@ -66,6 +66,7 @@ export class VegaTableHeadCell {
     };
   }
   render() {
+    var _a, _b, _c, _d, _e, _f, _g;
     const sortableConfig = this.sorter
       ? {
         role: 'button',
@@ -74,9 +75,6 @@ export class VegaTableHeadCell {
         onClick: (e) => this.handleSort(e),
       }
       : null;
-    const table = findParent(this.host, 'vega-table');
-    const renderInput = table &&
-      RemoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(table, VegaInternalColumnHeadCellRenderInputRIC), this.host);
     return sanitizeVegaComponent(h(Host, { class: {
         [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
         'sortable': !!this.sorter,
@@ -85,12 +83,12 @@ export class VegaTableHeadCell {
       h("th", Object.assign({ class: {
           'vega-table-cell': true,
           'break-word': !FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE'),
-          'is-group-cell': renderInput === null || renderInput === void 0 ? void 0 : renderInput.headHasGroupColumn,
-          'hide-right-border': (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isViewEnd) || (renderInput === null || renderInput === void 0 ? void 0 : renderInput.isNoPinnedEnd),
-          'right-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isLeftEndPinned,
-          'left-divider': renderInput === null || renderInput === void 0 ? void 0 : renderInput.isRightStartPinned,
+          'is-group-cell': (_a = this.renderInput) === null || _a === void 0 ? void 0 : _a.headHasGroupColumn,
+          'hide-right-border': ((_b = this.renderInput) === null || _b === void 0 ? void 0 : _b.isViewEnd) || ((_c = this.renderInput) === null || _c === void 0 ? void 0 : _c.isNoPinnedEnd),
+          'right-divider': (_d = this.renderInput) === null || _d === void 0 ? void 0 : _d.isLeftEndPinned,
+          'left-divider': (_e = this.renderInput) === null || _e === void 0 ? void 0 : _e.isRightStartPinned,
           [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-        } }, sortableConfig, { colSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.colSpan, rowSpan: renderInput === null || renderInput === void 0 ? void 0 : renderInput.rowSpan }),
+        } }, sortableConfig, { colSpan: (_f = this.renderInput) === null || _f === void 0 ? void 0 : _f.colSpan, rowSpan: (_g = this.renderInput) === null || _g === void 0 ? void 0 : _g.rowSpan }),
         h("div", { class: arrayToClassString(['vega-table-column', this.textAlign]) },
           h("span", { class: "vega-table-column-label" },
             h("slot", null)),
@@ -272,7 +270,8 @@ export class VegaTableHeadCell {
   static get states() { return {
     "currentBreakpoint": {},
     "density": {},
-    "columnDivider": {}
+    "columnDivider": {},
+    "renderInput": {}
   }; }
   static get events() { return [{
       "method": "vegaClick",
@@ -356,3 +355,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableRenderInputConsumerSlimmer", void 0);