@globalpayments/vega 2.13.0 → 2.50.0

package/dist/cjs/vega-table_8.cjs.entry.js

@@ -2,43 +2,56 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1299d729.js');
-const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const index = require('./index-7700600c.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
-const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-0fbcd33f.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
 const object = require('./object-bbd4ed7f.js');
-const changeManager = require('./changeManager-7c13d64f.js');
-const staticSubjectTitle = require('./staticSubjectTitle-380a1e34.js');
-const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
-const ui = require('./ui-fa68545a.js');
-const vegaEventId = require('./vegaEventId-1a0eb6b5.js');
-const typeGuard = require('./typeGuard-b1a74545.js');
-const responsiveFormatFacade = require('./responsiveFormatFacade-12dd896d.js');
-const component = require('./component-c3bbaf20.js');
-const misc = require('./misc-0197689b.js');
-const breakpoints = require('./breakpoints-cb3291ba.js');
-const mutationObserverFilters = require('./mutationObserverFilters-5beee7b8.js');
-const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-8d417925.js');
-const subStateObserverSlimmer = require('./subStateObserverSlimmer-e61bda94.js');
-const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-29128c2a.js');
-const eventEmitSlimmer = require('./eventEmitSlimmer-da0b3b8b.js');
-const immutableMap = require('./immutableMap-2ead6c23.js');
-const featureFlagController = require('./featureFlagController-da4c779b.js');
-const zIndexManager = require('./zIndexManager-48482b9d.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const observer = require('./observer-f49483e8.js');
+const ui = require('./ui-13b42af0.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a7a3b196.js');
+const responsiveFormatFacade = require('./responsive-format-facade-325d3d90.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const component = require('./component-73a88c4e.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
+const mutationObserverSlimmer = require('./mutation-observer-slimmer-895b3d3e.js');
+const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-06e0a8db.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-26ecfb15.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-ee7a8c06.js');
+const immutableMap = require('./immutable-map-edf24b54.js');
+const translationSlimmer = require('./translation-slimmer-127a0f83.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-66f3038c.js');
+const featureFlagController = require('./feature-flag-controller-5e58aae4.js');
+const breakpoints = require('./breakpoints-ebde4837.js');
+const vegaSkeletonLoaderController = require('./vega-skeleton-loader-controller-83e05b6c.js');
 const accessibility = require('./accessibility-bfa227f6.js');
-const internalIconManager = require('./internal-icon-manager-b21347bf.js');
-const chevronDown = require('./chevron-down-ca2fa88e.js');
-require('./ui-077fc009.js');
+const internalIconManager = require('./internal-icon-manager-00f49470.js');
+const chevronUp = require('./chevron-up-21465cf7.js');
+const chevronDown = require('./chevron-down-9847bf78.js');
+require('./number-4816603d.js');
+require('./ui-32e69595.js');
+require('./pixel-98f2a10c.js');
+require('./array-249289f2.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./icon-manager-9a47399c.js');
+require('./wait-for-vega-handler-0a0738ac.js');
+require('./translation-e5003a00.js');
+require('./content-state-d2f6a5ac.js');
+require('./code-block-d0b98262.js');
+require('./dark-mode-style-controller-4adb7fb2.js');
+require('./_commonjsHelpers-537d719a.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
-require('./number-459031f7.js');
-require('./array-6e559cde.js');
-require('./dynamic-slimmer-d5ea4204.js');
-require('./vegaInternalEventId-b27735af.js');
-require('./internalVegaEventManager-a3672e0c.js');
-require('./index-55e89877.js');
-require('./_commonjsHelpers-537d719a.js');
-require('./iconManager-a9c2209d.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./internal-vega-event-manager-58afcde7.js');
+require('./index-8b247c17.js');
 
 /**
  * Immutable Set cannot be changed once created
@@ -147,7 +160,7 @@ const VegaTableEditableFieldTypes = [
   'time-picker',
 ];
 
-var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$F = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -236,17 +249,17 @@ class VegaTableCellRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return (index.h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow }, this.renderTableCellContent(column, record, index$1)));
   }
 }
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "rowKey", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$D([
+__decorate$F([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
 
-var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$E = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -395,6 +408,7 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
       this.mutationObserver.disconnect();
     }
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_EXPAND_ROW, this.expandObserver);
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowExpand));
   }
   /**
    * Component lifecycle - componentDidLoad
@@ -412,7 +426,7 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
    * Initializes row expand observer
    */
   initRowExpandObserver() {
-    this.expandObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableTableRowObserver.bind({ host: this.host }), (payload) => {
+    this.expandObserver = new observer.Observer(this.isAcceptableTableRowObserver.bind({ host: this.host }), (payload) => {
       if (payload.expanded) {
         this.expandedRowKeySet.add(payload.rowKey);
       }
@@ -421,6 +435,12 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
       }
     });
     changeManager.ChangeManager.register(staticSubjectTitle.TABLE_EXPAND_ROW, this.expandObserver);
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
+      return this.rowExpandEventEmitter.emit({
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        expanded: expanded,
+      });
+    });
   }
   /**
    * The function checks if the input is an acceptable row observer.
@@ -434,44 +454,47 @@ class VegaTableExpandRowController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "host", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
-__decorate$C([
+__decorate$E([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableExpandRowController.prototype, "rowExpandEventEmitter", void 0);
+__decorate$E([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowController.prototype, "connectedCallback", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableExpandRowController.prototype, "componentDidLoad", null);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('toggleExpandRow')
 ], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('openExpandRow')
 ], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('closeExpandRow')
 ], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('closeAllExpandRow')
 ], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
-__decorate$C([
+__decorate$E([
   globalSlimmerRegistry.MapToComponentMethod('watchRowExpandable')
 ], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
 
-var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -515,7 +538,7 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
     /**
      * Get the row selection type
      *
-     * @returns {'multiple' | 'single'} Return the type of the row selection
+     * @returns {Nullable<'multiple' | 'single'>} Return the type of the row selection
      */
     this.getRowSelectionType = () => {
       if (!this.rowSelection)
@@ -613,7 +636,7 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
    * Component lifecycle - connectedCallback
    */
   connectedCallback() {
-    this.initRowSelectionObserver();
+    this.initRowSelection();
     this.initRowClickObserver();
     this.initRowSelectionAllObserver();
   }
@@ -624,6 +647,8 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_ROW_SELECTION, this.rowSelectionObserver);
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_ROW_CLICK, this.rowClickObserver);
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowSelect));
+    remoteInvocationRegistry.remoteInvocationRegistry.unRegister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowSelectAll));
   }
   /**
    * Component lifecycle - componentWillLoad
@@ -748,21 +773,39 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
     }
   }
   /**
-   * The function initializes a row selection observer.
+   * The function initializes a row selection.
    */
-  initRowSelectionObserver() {
-    this.rowSelectionObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableRowSelectionObserver.bind(this), (payload) => {
+  initRowSelection() {
+    this.rowSelectionObserver = new observer.Observer(this.isAcceptableRowSelectionObserver.bind(this), (payload) => {
       const { rowKey, checked } = payload;
       const record = this.vegaTableDataSourceController.getRecordByKey(rowKey);
       this.handleRowSelect(checked, record);
     });
     changeManager.ChangeManager.register(staticSubjectTitle.TABLE_ROW_SELECTION, this.rowSelectionObserver);
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowSelect), ({ rowKey, checked }) => {
+      return this.rowSelectEventEmitter.emit({
+        selected: checked,
+        record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
+        selectedRows: this.getSelectedRecords(),
+      });
+    });
+    remoteInvocationRegistry.remoteInvocationRegistry.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalTableRowSelectAll), ({ checked }) => {
+      return this.rowSelectAllEventEmitter.emit({
+        selected: checked,
+        selectedRows: this.getSelectedRecords(),
+        changedRows: checked
+          ? this.vegaTableDataSourceController
+            .getCurrentData()
+            .filter((record) => !this.selectedRowKeySet.has(record.key))
+          : this.getSelectedRecords(),
+      });
+    });
   }
   /**
    * The function initializes an observer for row selection all in a table
    */
   initRowSelectionAllObserver() {
-    this.rowSelectionAllObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableRowSelectionAllObserver.bind(this), (payload) => {
+    this.rowSelectionAllObserver = new observer.Observer(this.isAcceptableRowSelectionAllObserver.bind(this), (payload) => {
       this.handleSelectAll(payload.checked);
     });
     changeManager.ChangeManager.register(staticSubjectTitle.TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
@@ -771,7 +814,7 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
    * The function initializes a row click observer that handles row selection in a table.
    */
   initRowClickObserver() {
-    this.rowClickObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableRowClickObserver.bind(this), (payload) => {
+    this.rowClickObserver = new observer.Observer(this.isAcceptableRowClickObserver.bind(this), (payload) => {
       if (this.getRowSelectionType() === 'single') {
         const record = this.vegaTableDataSourceController.getRecordByKey(payload.rowKey);
         this.handleSingleRowSelect(record);
@@ -790,62 +833,68 @@ class VegaTableRowSelectionController$1 extends globalSlimmerRegistry.VegaSlimme
       this.host === ui.findParent(input['host'], 'vega-table'));
   }
 }
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "host", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
-__decorate$B([
+__decorate$D([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "rowSelectEventEmitter", void 0);
+__decorate$D([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "rowSelectAllEventEmitter", void 0);
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('watchRowSelection')
 ], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('setSelection')
 ], VegaTableRowSelectionController$1.prototype, "setSelection", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentData')
 ], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('getSelection')
 ], VegaTableRowSelectionController$1.prototype, "getSelection", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedRowKeySet')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
-__decorate$B([
+__decorate$D([
   globalSlimmerRegistry.MapToComponentMethod('watchSelectedAll')
 ], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -978,50 +1027,48 @@ class VegaTableDataSourceController extends globalSlimmerRegistry.VegaSlimmer {
       ? this.columns.filter((column) => column.sorter && column.sorter !== 'event' && this.sortersMap.has(column.prop))
       : [];
     if (sortedColumns.length > 0) {
-      const sortProp = sortedColumns[sortedColumns.length - 1].prop;
-      const sortedOrder = this.sortersMap.get(sortProp).order;
-      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, sortProp, sortedOrder));
+      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, Array.from(this.sortersMap.values())));
     }
     else {
       this.setCurrentData(this.dataSource);
     }
   }
 }
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "rowKey", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "currentData", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableDataSourceController.prototype, "dataSource", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "columns", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "sortersMap", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableDataSourceController.prototype, "componentWillLoad", null);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('watchSortersMap')
 ], VegaTableDataSourceController.prototype, "watchSortersMap", null);
-__decorate$A([
+__decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableDataSourceController.prototype, "watchDataSource", null);
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$B = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1058,35 +1105,35 @@ class VegaTableBodyRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
   }
 }
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "striped", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "columns", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$z([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1097,10 +1144,11 @@ class VegaTableHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
     super(...arguments);
     this.renderHeaderColumnCells = () => {
       return this.columns.map((column) => {
-        return (index.h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: column.sortOrder, breakpoint: column.breakpoint, 
+        var _a;
+        return (index.h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), sortConfig: this.sortConfig, breakpoint: column.breakpoint, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, (input) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, (input) => {
               const sortOrder = input.detail.sortOrder;
               this.vegaTableSortController.handleHeadSortClick(column, sortOrder);
             });
@@ -1114,23 +1162,29 @@ class VegaTableHeaderRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll }, this.renderHeaderColumnCells()))));
   }
 }
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
-__decorate$y([
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortConfig", void 0);
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1151,8 +1205,8 @@ class VegaTablePaginationRenderer extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
     this.paginationRefCallback = (ref) => {
-      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaChange, this.handlePaginationChange);
-      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaPageSizeChange, this.handlePaginationPageSizeChange);
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handlePaginationChange);
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaPageSizeChange, this.handlePaginationPageSizeChange);
     };
     /**
      * handle the pagination page change after observer the notify
@@ -1179,9 +1233,9 @@ class VegaTablePaginationRenderer extends globalSlimmerRegistry.VegaSlimmer {
       (_b = (_a = this.pagination).vegaPageSizeChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
     };
     this.getPaginationConfig = () => {
-      var _a;
-      const _b = this.pagination, { position } = _b, otherProps = __rest(_b, ["position"]);
-      return Object.assign(Object.assign({}, otherProps), { position: ((_a = this.pagination.extensions) === null || _a === void 0 ? void 0 : _a.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
+      const _a = this.pagination, { position } = _a, otherProps = __rest(_a, ["position"]);
+      const currentExtensions = responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.pagination.extensions);
+      return Object.assign(Object.assign({}, otherProps), { position: (currentExtensions === null || currentExtensions === void 0 ? void 0 : currentExtensions.length) > 1 ? undefined : position || 'bottom-center', pageSize: this.pageSize });
     };
   }
   render() {
@@ -1196,23 +1250,23 @@ class VegaTablePaginationRenderer extends globalSlimmerRegistry.VegaSlimmer {
         ref: this.paginationRefCallback }))));
   }
 }
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pagination", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
 
-const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
+const VegaTableScrollableContainer = ({ scrollConfig = {}, ref, onScroll }, children) => {
   const { maxHeight } = scrollConfig;
   const isVerticalScrollable = typeGuard.isNonNullable(maxHeight);
   const handleVerticalScroll = (e) => {
@@ -1226,6 +1280,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
     if (target.scrollTop > 0 && !target.classList.contains('scrolled')) {
       target.classList.add('scrolled');
     }
+    onScroll(e);
   };
   return (index.h("div", { class: "vega-table-scrollable-container", style: {
       maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
@@ -1234,7 +1289,7 @@ const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
     onScroll: handleVerticalScroll }, children));
 };
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1248,25 +1303,39 @@ class VegaTableScrollContainerRenderer extends globalSlimmerRegistry.VegaSlimmer
         this.tableScrollContainerRef.scrollTop = 0;
       }
     };
+    this.notifyContentScrolling = () => {
+      this.isTemplateRenderMode &&
+        changeManager.ChangeManager.notify(staticSubjectTitle.SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.host,
+        });
+    };
   }
   watchCurrentPage() {
     this.scrollContainerToTop();
   }
   render(children) {
-    return (index.h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref) }, children));
+    return (index.h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref), 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onScroll: () => this.notifyContentScrolling() }, children));
   }
   setTableScrollContainerRef(ref) {
     this.tableScrollContainerRef = ref;
   }
 }
-__decorate$w([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
-__decorate$w([
+__decorate$y([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "host", void 0);
+__decorate$y([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$y([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPage')
 ], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1285,12 +1354,13 @@ class VegaTableRenderer extends globalSlimmerRegistry.VegaSlimmer {
           this.vegaTableColGroupRenderer.render(),
           this.vegaTableHeaderRenderer.render(),
         ],
-        this.dataSource.length > 0 && this.vegaTableBodyRenderer.render(),
+        (this.dataSource.length > 0 || this.editingRows.size > 0) &&
+          this.vegaTableBodyRenderer.render(),
         this.isTemplateRenderMode && index.h("slot", null)));
     };
     this.renderEmpty = () => {
       return (this.vegaTableDataSourceController.isCurrentDataEmpty() &&
-        this.emptyDescription && index.h("div", { class: "vega-table-empty-description" }, this.emptyDescription));
+        this.emptyDescription && (index.h("div", { class: "vega-table-empty-description" }, this.translationSlimmer.t(this.emptyDescription))));
     };
   }
   render() {
@@ -1306,56 +1376,62 @@ class VegaTableRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderEmpty()), this.host);
   }
 }
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "host", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columns", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "emptyDescription", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "rowDivider", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "columnDivider", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "density", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "dataSource", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "striped", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
-__decorate$v([
+__decorate$x([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRenderer.prototype, "translationSlimmer", void 0);
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$x([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRenderer.prototype, "editingRows", void 0);
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1419,23 +1495,23 @@ class VegaTablePaginationController extends globalSlimmerRegistry.VegaSlimmer {
     return index >= start && index < end;
   }
 }
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTablePaginationController.prototype, "pagination", void 0);
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "pageSize", void 0);
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTablePaginationController.prototype, "currentPage", void 0);
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTablePaginationController.prototype, "componentWillLoad", null);
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentMethod('watchPagination')
 ], VegaTablePaginationController.prototype, "watchPagination", null);
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1452,7 +1528,7 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
   /**
    * Get the map of the row form refs
    *
-   * @returns {Map} The map of row form refs
+   * @returns {Map<string, HTMLVegaFormElement>} The map of row form refs
    */
   getRowFormRefMap() {
     return this.rowFormRefMap;
@@ -1461,6 +1537,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * The callback to handle [saveAllEditRows]{@link VegaTable.saveAllEditRows}
    */
   async saveAllEditRows() {
+    if (!this.canMethodBeInvokedInCurrentState('saveAllEditRows')) {
+      return;
+    }
     const currentData = this.vegaTableDataSourceController
       .getCurrentData()
       .slice();
@@ -1478,6 +1557,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * The callback to handle [stopAllRowEditMode]{@link VegaTable.stopAllRowEditMode}
    */
   stopAllRowEditMode() {
+    if (!this.canMethodBeInvokedInCurrentState('stopAllRowEditMode')) {
+      return;
+    }
     this.editingRows.clear();
   }
   /**
@@ -1486,11 +1568,13 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {VegaTableDataSourceItem[]} newValue - The new data source
    */
   watchDataSource(newValue) {
-    this.getEditingRowsKey().forEach((rowKey) => {
-      if (!newValue.find((item) => item.key === rowKey)) {
-        this.stopRowEditMode(rowKey);
-      }
-    });
+    if (this.isEditableTable()) {
+      this.getEditingRowsKey().forEach((rowKey) => {
+        if (!newValue.find((item) => item.key === rowKey)) {
+          this.stopRowEditMode(rowKey);
+        }
+      });
+    }
   }
   /**
    * The callback to handle [saveEditRow]{@link VegaTable.saveEditRow}
@@ -1498,6 +1582,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   async saveEditRow(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('saveEditRow')) {
+      return;
+    }
     const rowData = await this.getRowData(rowKey);
     const currentData = this.vegaTableDataSourceController
       .getCurrentData()
@@ -1515,6 +1602,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   stopRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('stopRowEditMode')) {
+      return;
+    }
     this.editingRows.delete(rowKey);
   }
   /**
@@ -1523,6 +1613,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   removeRow(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('removeRow')) {
+      return;
+    }
     this.vegaTableDataSourceController.setDataSource(this.vegaTableDataSourceController
       .getCurrentData()
       .filter((item) => this.vegaTableDataSourceController.getRecordKey(item) !== rowKey));
@@ -1533,6 +1626,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {string} rowKey - The key of the row's record
    */
   startRowEditMode(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('startRowEditMode')) {
+      return;
+    }
     this.editingRows.add(rowKey);
   }
   /**
@@ -1543,7 +1639,10 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    */
   addNewRow(record = {}) {
     var _a;
-    const rowKey = ((_a = record[this.rowKey]) === null || _a === void 0 ? void 0 : _a.toString()) || misc.generateUUID();
+    if (!this.canMethodBeInvokedInCurrentState('addNewRow')) {
+      return;
+    }
+    const rowKey = ((_a = record[this.rowKey]) === null || _a === void 0 ? void 0 : _a.toString()) || createPublicApiRuntimeMetricsSlimmer.generateUUID();
     const newRowItem = Object.assign({}, record);
     newRowItem[this.rowKey] = rowKey;
     this.vegaTableDataSourceController.setCurrentData([
@@ -1557,9 +1656,11 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * The callback to handle [getRowsData]{@link VegaTable.getRowsData}
    */
   async getRowsData() {
-    const formValues = await this.vegaTableBodyRenderer
-      .getTableFormRef()
-      .getValue();
+    if (!this.canMethodBeInvokedInCurrentState('getRowsData')) {
+      return;
+    }
+    const tableFormRef = this.vegaTableBodyRenderer.getTableFormRef();
+    const formValues = tableFormRef ? await tableFormRef.getValue() : [];
     return [
       ...this.vegaTableDataSourceController.getCurrentData().map((record) => {
         const value = formValues[`${VegaTableEditableController.rowFormKeyPrefix}${this.vegaTableDataSourceController.getRecordKey(record)}`];
@@ -1573,15 +1674,21 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {string[]} The key of the rows which is editing
    */
   getEditingRowsKey() {
+    if (!this.canMethodBeInvokedInCurrentState('getEditingRowsKey')) {
+      return;
+    }
     return this.editingRows.toArray();
   }
   /**
    * The callback to handle [getFormRef]{@link VegaTable.getFormRef}
    *
    * @param {string} rowKey - The key of the row's record
-   * @returns {HTMLElement} The form ref of the row
+   * @returns {HTMLVegaFormElement} The form ref of the row
    */
   getFormRef(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('getFormRef')) {
+      return;
+    }
     return rowKey ? this.rowFormRefMap.get(rowKey) : this.vegaTableBodyRenderer.getTableFormRef();
   }
   /**
@@ -1591,6 +1698,9 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {Promise<VegaTableDataSourceItem>} The promise of the row data
    */
   async getRowData(rowKey) {
+    if (!this.canMethodBeInvokedInCurrentState('getRowData')) {
+      return;
+    }
     const formValue = await this.rowFormRefMap.get(rowKey).getValue();
     return Object.assign(Object.assign({}, this.vegaTableDataSourceController.getRecordByKey(rowKey)), formValue);
   }
@@ -1603,58 +1713,128 @@ class VegaTableEditableController extends globalSlimmerRegistry.VegaSlimmer {
   isEditing(rowKey) {
     return this.editingRows.has(rowKey);
   }
+  /**
+   * The function `isEditableTable` checks if any column in a table is editable.
+   *
+   * @returns {boolean} The `isEditableTable` method is returning a boolean value. It checks if any of the columns
+   * in the `columns` array have the `editable` property set to true. If at least one column is editable,
+   * the method returns `true`, otherwise it returns `false`.
+   */
+  isEditableTable() {
+    return this.columns.some((item) => item.editable);
+  }
+  /**
+   * The function `canMethodBeInvokedInCurrentState` checks if the table is editable and logs a warning message if not.
+   *
+   * @param {string} methodName - The `methodName` parameter is a string that represents the name of the
+   * method being processed in the `canMethodBeInvokedInCurrentState` function.
+   * @returns {boolean} The method `canMethodBeInvokedInCurrentState` is returning a boolean value. If the table is not editable,
+   * it will log a warning message and return `false`. Otherwise, it will return `true`.
+   */
+  canMethodBeInvokedInCurrentState(methodName) {
+    if (!this.isEditableTable()) {
+      globalSlimmerRegistry.LogUtility.warn(`Method ${methodName} only works with editable tables`);
+      return false;
+    }
+    return true;
+  }
 }
 VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "editingRows", void 0);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "rowKey", void 0);
-__decorate$t([
+__decorate$v([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableEditableController.prototype, "columns", void 0);
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('saveAllEditRows')
 ], VegaTableEditableController.prototype, "saveAllEditRows", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('stopAllRowEditMode')
 ], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('watchDataSource')
 ], VegaTableEditableController.prototype, "watchDataSource", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('saveEditRow')
 ], VegaTableEditableController.prototype, "saveEditRow", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('stopRowEditMode')
 ], VegaTableEditableController.prototype, "stopRowEditMode", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('removeRow')
 ], VegaTableEditableController.prototype, "removeRow", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('startRowEditMode')
 ], VegaTableEditableController.prototype, "startRowEditMode", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('addNewRow')
 ], VegaTableEditableController.prototype, "addNewRow", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('getRowsData')
 ], VegaTableEditableController.prototype, "getRowsData", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('getEditingRowsKey')
 ], VegaTableEditableController.prototype, "getEditingRowsKey", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('getFormRef')
 ], VegaTableEditableController.prototype, "getFormRef", null);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentMethod('getRowData')
 ], VegaTableEditableController.prototype, "getRowData", null);
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * Vega Table Sorter
+ * This is a helper class for sorting table data based on defined columns to be sorted
+ * Supports multi-column sorting
+ */
+class VegaTableSorter {
+  constructor(prop, order, sorter) {
+    this.prop = prop;
+    this.order = order;
+    this.sorter = sorter;
+  }
+  /**
+   * Sort utility
+   *
+   * @param {VegaTableDataSourceItem} a column value
+   * @param {VegaTableDataSourceItem} b column value
+   * @returns {Nullable<number>} compare result
+   */
+  sort(a, b) {
+    const compareResult = this.sorter(a, b);
+    if (compareResult !== 0) {
+      return this.order === 'asc' ? compareResult : -compareResult;
+    }
+  }
+  /**
+   * Get params from sorter object for external use
+   *
+   * @returns {VegaTableSorterType} sorter prop and order
+   */
+  toExternalFormat() {
+    return { prop: this.prop, order: this.order };
+  }
+  /**
+   * Get sorter order value
+   *
+   * @returns {VegaTableSortOrderType} sorter order
+   */
+  getSortOrder() {
+    return this.order;
+  }
+}
+
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1664,28 +1844,6 @@ var __decorate$s = (undefined && undefined.__decorate) || function (decorators,
  * The sort controller for the vega-table
  */
 class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * The method to sort the data by sorter which include prop name and order
-     *
-     * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
-     * @param {string} sortProp - The prop name of which prop you want to sort by
-     * @param {VegaTableSortOrderType} sortOrder - The order of the sorter
-     * @returns {VegaTableDataSourceItem[]} The sorted data source
-     */
-    this.sortData = (data, sortProp, sortOrder) => {
-      const sorter = this.columns.find((column) => typeof column.sorter === 'function' && column.prop === sortProp).sorter;
-      const cloneData = data.slice();
-      if (!sortOrder) {
-        return cloneData;
-      }
-      return cloneData.sort((a, b) => {
-        const compareResult = sorter(a, b);
-        return sortOrder === 'asc' ? compareResult : -compareResult;
-      });
-    };
-  }
   /**
    * The callback of [watchColumns]{@link VegaTable.watchColumns}
    */
@@ -1699,16 +1857,23 @@ class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
    */
   handleHeadSortClick(column, nextSortOrder) {
-    if (this.sortersMap.has(column.prop)) {
-      this.sortersMap.delete(column.prop);
+    if (this.sortConfig.type === 'single') {
+      this.sortersMap.clear();
+    }
+    if (!nextSortOrder) {
+      if (this.sortersMap.has(column.prop)) {
+        this.sortersMap.delete(column.prop);
+      }
     }
-    if (nextSortOrder) {
-      this.sortersMap.set(column.prop, { order: nextSortOrder, prop: column.prop });
+    else {
+      this.sortersMap.set(column.prop, new VegaTableSorter(column.prop, nextSortOrder, column.sorter));
     }
     if (column.sorter !== 'event') {
-      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), column.prop, nextSortOrder));
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), Array.from(this.sortersMap.values())));
     }
-    this.changeEventEmitter.emit({ sorters: [...this.sortersMap.values()] });
+    this.changeEventEmitter.emit({
+      sorters: Array.from(this.sortersMap.values()).map((s) => s.toExternalFormat()),
+    });
   }
   /**
    * Sync the default sort order from the columns
@@ -1717,27 +1882,48 @@ class VegaTableSortController extends globalSlimmerRegistry.VegaSlimmer {
     this.columns
       .filter((column) => typeGuard.isNonNullable(column.sorter) && typeGuard.isNonNullable(column.sortOrder))
       .forEach((item) => {
-      this.sortersMap.set(item.prop, { order: item.sortOrder, prop: item.prop });
+      this.sortersMap.set(item.prop, new VegaTableSorter(item.prop, item.sortOrder, item.sorter));
+    });
+  }
+  /**
+   * The method to sort the data by sorter which include prop name and order
+   *
+   * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
+   * @param {VegaTableSorter[]} sorters - array of sorters ordered by sequence of columns to be sorted
+   * @returns {VegaTableDataSourceItem[]} The sorted data source
+   */
+  sortData(data, sorters) {
+    return [...data].sort((a, b) => {
+      for (const sorter of sorters) {
+        const result = sorter.sort(a, b);
+        if (typeGuard.isNonNullable(result)) {
+          return result;
+        }
+      }
+      return 0;
     });
   }
 }
-__decorate$s([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableSortController.prototype, "sortersMap", void 0);
-__decorate$s([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "columns", void 0);
-__decorate$s([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "changeEventEmitter", void 0);
-__decorate$s([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$s([
+__decorate$u([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableSortController.prototype, "sortConfig", void 0);
+__decorate$u([
   globalSlimmerRegistry.MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1764,20 +1950,20 @@ class VegaTableColGroupRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
   }
 }
-__decorate$r([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
-__decorate$r([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "columns", void 0);
-__decorate$r([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
-__decorate$r([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1789,11 +1975,15 @@ var __decorate$q = (undefined && undefined.__decorate) || function (decorators,
 class VegaTableChildrenController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.currentDataObserver = new mutationObserverFilters.MutationObserverSlimmer({
+    this.currentDataObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
       // eslint-disable-next-line jsdoc/require-jsdoc
       target: () => this.host,
       options: { childList: true, subtree: true },
-      mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-TABLE-ROW'),
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-rows-and-not-show-empty-message-when-lazy-render-table-body-with-table-rows}
+       */
+      mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-TABLE-BODY', 'VEGA-TABLE-ROW'),
       callback: 
       /*
        * The below method is e2e-test covered in
@@ -1806,11 +1996,15 @@ class VegaTableChildrenController extends globalSlimmerRegistry.VegaSlimmer {
         this.syncUpTableHeadRowProps();
       },
     });
-    this.rowStripedObserver = new mutationObserverFilters.MutationObserverSlimmer({
+    this.rowStripedObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
       // eslint-disable-next-line jsdoc/require-jsdoc
       target: () => this.host,
       options: { childList: true, subtree: true },
-      mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-TABLE-ROW', 'VEGA-TABLE-EXPAND-ROW'),
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-rows-and-not-show-empty-message-when-lazy-render-table-body-with-table-rows}
+       */
+      mutationFilter: mutationObserverFilters.TagNameMutationFilter('VEGA-TABLE-BODY', 'VEGA-TABLE-ROW', 'VEGA-TABLE-EXPAND-ROW'),
       callback: 
       /*
        * The below method is e2e-test covered in
@@ -1924,59 +2118,59 @@ class VegaTableChildrenController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "host", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "columns", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "dataSource", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "currentData", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "rowSelection", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "striped", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableChildrenController.prototype, "connectedCallback", null);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableChildrenController.prototype, "disconnectedCallback", null);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableChildrenController.prototype, "componentWillLoad", null);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableChildrenController.prototype, "componentDidLoad", null);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('clearSelection')
 ], VegaTableChildrenController.prototype, "clearSelection", null);
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentMethod('watchStriped')
 ], VegaTableChildrenController.prototype, "watchStriped", null);
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -1992,7 +2186,7 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
         }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
         /* eslint-disable-next-line react/jsx-no-bind */
         ref: (ref) => {
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaClick, () => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaClick, () => {
             this.rowClickEventEmitter.emit({ record: record, index: index$1 });
           });
         }, "data-striped": this.striped && index$1 % 2 === 1 ? 'striped' : undefined }, this.columns.map((column) => {
@@ -2005,23 +2199,23 @@ class VegaTableRowRenderer$1 extends globalSlimmerRegistry.VegaSlimmer {
     return editable ? (index.h("vega-form", { key: `vega-table-row-form-${rowKey}`, "data-vega-form": `${VegaTableEditableController.rowFormKeyPrefix}${rowKey}`, ref: (ref) => this.vegaTableEditableController.getRowFormRefMap().set(rowKey, ref) }, this.renderTableRowComponent(rowProps))) : (this.renderTableRowComponent(rowProps));
   }
 }
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "columns", void 0);
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer$1.prototype, "striped", void 0);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2033,7 +2227,7 @@ var __decorate$o = (undefined && undefined.__decorate) || function (decorators,
 class VegaTableRenderModeController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.currentDataObserver = new mutationObserverFilters.MutationObserverSlimmer({
+    this.currentDataObserver = new mutationObserverSlimmer.MutationObserverSlimmer({
       // eslint-disable-next-line jsdoc/require-jsdoc
       target: () => this.host,
       options: { childList: true, subtree: true },
@@ -2052,7 +2246,7 @@ class VegaTableRenderModeController extends globalSlimmerRegistry.VegaSlimmer {
      * @returns {boolean} return true if the mode is template, otherwise false
      */
     this.checkIsTemplateRenderMode = (tableRef) => {
-      return (Array.from(tableRef.children).filter((el) => { var _a; return !((_a = el.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.startsWith('vega-table-expand-row-')); }).length > 0);
+      return Array.from(tableRef.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
     };
   }
   /**
@@ -2077,31 +2271,31 @@ class VegaTableRenderModeController extends globalSlimmerRegistry.VegaSlimmer {
   componentDidLoad() {
   }
 }
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRenderModeController.prototype, "host", void 0);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRenderModeController.prototype, "connectedCallback", null);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableRenderModeController.prototype, "componentWillLoad", null);
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaTableRenderModeController.prototype, "componentDidLoad", null);
 
 const VegaTableRuntimeMetricsPayloadDefinition = [
   {
-    payloadKey: 'DATA_SOURCE_IS_EMPTY',
+    payloadKey: 'IS_USING_TEMPLATE',
     payloadDescription: 'Contains the data records to be rendered and displayed within the table',
     /**
      * The function checks if the length `dataSource` property of the `host` element is equal to '0'.
@@ -2113,7 +2307,7 @@ const VegaTableRuntimeMetricsPayloadDefinition = [
     payloadValue: (host) => host.dataSource.length === 0,
   },
   {
-    payloadKey: 'DATA_SOURCE_IS_NOT_EMPTY',
+    payloadKey: 'IS_USING_DATA_SOURCE',
     payloadDescription: 'Contains the data records to be rendered and displayed within the table',
     /**
      * The function checks if the length `dataSource` property of the `host` element is not equal to '0'.
@@ -2128,7 +2322,7 @@ const VegaTableRuntimeMetricsPayloadDefinition = [
 
 const vegaTableCss = ":host{display:block}table{width:100%;border-spacing:0}.vega-table-empty-description{text-align:center;padding:24px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-empty-description{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}table.v-table-fixed{table-layout:fixed}.vega-table-scrollable-container{overflow:auto}.vega-table-scrollable-container vega-table-head{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.vega-table-scrollable-container.scrolled vega-table-head.fixed-header{box-shadow:0px 4px 0px rgba(0, 0, 0, 0.1);}vega-form{display:contents}*::part(field-error-message){display:none !important}.vega-table-pagination-container{margin-top:24px}.vega-table-pagination-container.bottom-center{display:flex;justify-content:center}.vega-table-pagination-container.bottom-right{display:flex;justify-content:flex-end}.vega-table-pagination-container.bottom-left{display:flex;justify-content:flex-start}col.v-hidden{display:none}@media (min-width: 320px){col.S\\:v-table-column{display:table-column}}@media (min-width: 768px){col.M\\:v-table-column{display:table-column}}@media (min-width: 1024px){col.L\\:v-table-column{display:table-column}}@media (min-width: 1440px){col.XL\\:v-table-column{display:table-column}}";
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2145,11 +2339,18 @@ const VegaTable = class {
     this.change = index.createEvent(this, "change", 7);
     this.vegaRowClick = index.createEvent(this, "vegaRowClick", 7);
     this.rowClick = index.createEvent(this, "rowClick", 7);
+    this.vegaRowExpand = index.createEvent(this, "vegaRowExpand", 7);
+    this.rowExpand = index.createEvent(this, "rowExpand", 7);
     this.vegaSelectChange = index.createEvent(this, "vegaSelectChange", 7);
     this.selectChange = index.createEvent(this, "selectChange", 7);
     this.vegaSelectAllChange = index.createEvent(this, "vegaSelectAllChange", 7);
     this.selectAllChange = index.createEvent(this, "selectAllChange", 7);
+    this.vegaRowSelect = index.createEvent(this, "vegaRowSelect", 7);
+    this.rowSelect = index.createEvent(this, "rowSelect", 7);
+    this.vegaRowSelectAll = index.createEvent(this, "vegaRowSelectAll", 7);
+    this.rowSelectAll = index.createEvent(this, "rowSelectAll", 7);
     this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaTableRenderModeController = new VegaTableRenderModeController();
     this.vegaTableRenderer = new VegaTableRenderer();
     this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
@@ -2171,29 +2372,32 @@ const VegaTable = class {
      * @see{module:should-render-responsive-columns-with-expandable-row-and-current-breakpoint-is-smaller-than-S}
      */
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
-    this.rowSelectionNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
-    this.rowExpandableNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
-    this.paddingXNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
-    this.rowClickableNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
-    this.scrollConfigNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
-    this.paginationEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaPageSizeChange], () => this.host);
-    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaChange);
-    this.selectChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaSelectChange);
-    this.selectAllChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaSelectAllChange);
-    this.rowClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, vegaEventId.VegaRowClick);
-    this.rowDividerNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
-    this.columnDividerNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
-    this.densityNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
-    this.isTemplateRenderModeNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
-    this.currentDataNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
+    this.rowSelectionNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
+    this.rowExpandableNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
+    this.paddingXNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
+    this.rowClickableNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
+    this.scrollConfigNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
+    this.eventsPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange, domNodeSubjectFactory.VegaPageSizeChange, domNodeSubjectFactory.VegaExpand], () => this.host);
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaChange);
+    this.selectChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaSelectChange);
+    this.selectAllChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaSelectAllChange);
+    this.rowClickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaRowClick);
+    this.rowExpandEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaRowExpand);
+    this.rowDividerNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
+    this.columnDividerNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
+    this.densityNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
+    this.isTemplateRenderModeNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
+    this.currentDataNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer(VegaTableRuntimeMetricsPayloadDefinition);
+    this.rowSelectEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaRowSelect);
+    this.rowSelectAllEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTable, domNodeSubjectFactory.VegaRowSelectAll);
     this.selectedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
       this.selectedRowKeySet = newSet;
     });
     this.expandedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
       this.expandedRowKeySet = newSet;
     });
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     /** Current running sorters */
     this.sortersMap = new immutableMap.ImmutableMap(new Map(), (newMap) => {
       this.sortersMap = newMap;
@@ -2212,13 +2416,17 @@ const VegaTable = class {
     this.isSelectedAll = false;
     /**
      * Defines the columns of the table.
+     *
+     * @vegaVersion 1.3.0
      */
     this.columns = [];
     /**
      * Contains the data records to be rendered and
      *    displayed within the table.
+     *
+     * @vegaVersion 1.3.0
      */
-    // eslint-disable-next-line @stencil/strict-mutable
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.dataSource = [];
     /**
      * Defines the behavior and options related to
@@ -2226,8 +2434,10 @@ const VegaTable = class {
      *
      * It allows users to select one or more rows in
      *    the table for further actions or processing.
+     *
+     * @vegaVersion 1.3.0
      */
-    // eslint-disable-next-line @stencil/strict-mutable
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.rowSelection = null;
     /**
      * Specifies whether rows in the table can be expanded
@@ -2235,54 +2445,84 @@ const VegaTable = class {
      */
     /**
      * Indicates whether the row is expandable.
+     *
+     * @vegaVersion 1.3.0
      */
     this.rowExpandable = false;
     /**
      * Specifies whether rows in the table can be clicked.
      *    If enabled, a `vegaRowClick` event will be
      *    dispatched when a row is clicked.
+     *
+     * @vegaVersion 1.3.0
      */
     this.rowClickable = false;
     /**
      * Specifies whether dividers should be displayed
      *    between rows in the table.
+     *
+     * @vegaVersion 1.3.0
      */
     this.rowDivider = false;
     /**
      * Specifies whether dividers should be displayed
      *    between columns in the table.
+     *
+     * @vegaVersion 1.3.0
      */
     this.columnDivider = false;
     /**
      * Specifies whether alternate colors should be applied
      *    to the rows of the table.
+     *
+     * @vegaVersion 1.3.0
      */
     this.striped = true;
     /**
      * Specifies the negative space within the table's cells.
+     *
+     * @vegaVersion 1.3.0
      */
     this.density = 'default';
     /**
      * Controls the amount of horizontal padding applied to the table.
+     *
+     * @vegaVersion 1.3.0
      */
     this.paddingX = ['8px', '8px'];
     /**
      * Specifies whether the table header should be displayed.
+     *
+     * @vegaVersion 1.3.0
      */
     this.showHeader = true;
     /**
      * Specifies the pagination configuration.
+     *
+     * @vegaVersion 1.5.0
      */
     this.pagination = null;
     /**
      * Provides a customized message or description that is
      *    shown when the table's data source is empty.
+     *
+     * @vegaVersion 1.7.0
      */
     this.emptyDescription = 'There is no data to display';
     /**
      * Defines a unique key for each row in the table.
+     *
+     * @vegaVersion 1.9.2
      */
     this.rowKey = 'key';
+    /**
+     * Defines the column sorting options
+     * Has optional property type: single | multiple
+     * If not specified, it defaults to multiple column sorting
+     *
+     * @vegaVersion 2.22.0
+     */
+    this.sortConfig = { type: 'multiple' };
   }
   watchSelectedRowKeySet() {
   }
@@ -2325,6 +2565,7 @@ const VegaTable = class {
    *    revealing additional content.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async openExpandRow(rowKey) {
   }
@@ -2332,11 +2573,14 @@ const VegaTable = class {
    * Invoke this method to close the expanded row with the specified `rowKey`.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async closeExpandRow(rowKey) {
   }
   /**
    * Invoke this method to close all expanded rows.
+   *
+   * @vegaVersion 1.3.0
    */
   async closeAllExpandRow() {
   }
@@ -2346,12 +2590,15 @@ const VegaTable = class {
    *    collapsed and collapsing it if it is currently expanded.
    *
    * @param rowKey
+   * @vegaVersion 1.3.0
    */
   async toggleExpandRow(rowKey) {
   }
   /**
    * Invoke this method to clear the selected row keys,
    *    removing any current selection.
+   *
+   * @vegaVersion 1.3.0
    */
   async clearSelection() {
   }
@@ -2359,6 +2606,8 @@ const VegaTable = class {
    * Invoke this method to retrieve the selected row keys,
    *    provided an array or list of the keys representing
    *    the currently selected rows.
+   *
+   * @vegaVersion 1.3.0
    */
   async getSelection() {
     return placeholder.methodPlaceholder();
@@ -2369,18 +2618,27 @@ const VegaTable = class {
    *    the desired selected rows.
    *
    * @param {string[]} keys - Row keys to be set as selected.
+   * @vegaVersion 1.3.0
    */
   async setSelection(keys) {
   }
   /**
    * Invoke this method to start the edit mode for the row
    *    with the specified `rowKey`.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async startRowEditMode(rowKey) {
   }
   /**
    * Invoke this method to stop the edit mode for the row
    *    with the specified `rowKey`.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async stopRowEditMode(rowKey) {
   }
@@ -2388,6 +2646,10 @@ const VegaTable = class {
    * Invoke this method to stop the edit mode for all rows,
    *    exiting the edit mode for each row currently
    *    in the editing state.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async stopAllRowEditMode() {
   }
@@ -2397,6 +2659,10 @@ const VegaTable = class {
    *    information associated with that row.
    *
    * @param rowKey The row's unique key.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async getRowData(rowKey) {
     return placeholder.methodPlaceholder(rowKey);
@@ -2405,6 +2671,10 @@ const VegaTable = class {
    * Invoke this method to retrieve all rows of data,
    *    obtaining the complete set of information
    *    associated with each row.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async getRowsData() {
     return placeholder.methodPlaceholder();
@@ -2417,6 +2687,10 @@ const VegaTable = class {
    *    reference to the table form.
    *
    * @param optional rowKey
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async getFormRef(rowKey) {
     return placeholder.methodPlaceholder(rowKey);
@@ -2426,6 +2700,10 @@ const VegaTable = class {
    *
    * @param record the default record of the new row
    * @returns {Promise<string>} the rowKey of the new row
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async addNewRow(record = {}) {
     return placeholder.methodPlaceholder(record);
@@ -2436,6 +2714,10 @@ const VegaTable = class {
    *    for that row.
    *
    * This action will not affect the editing mode of other rows.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async saveEditRow(rowKey) {
     return placeholder.methodPlaceholder(rowKey);
@@ -2444,12 +2726,20 @@ const VegaTable = class {
    * Invoke this method to save the data of all edited rows to
    *    the `currentData` and stop the edit mode for
    *    all rows in the table.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async saveAllEditRows() {
   }
   /**
    * Invoke this method to obtain the keys of the rows currently
    *    in the editing mode in the table.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async getEditingRowsKey() {
     return placeholder.methodPlaceholder();
@@ -2459,6 +2749,10 @@ const VegaTable = class {
    *    based on the specified `rowKey` in the table.
    *
    * @param rowKey The rowKey of the row to remove.
+   *
+   * @VegaWarning Note: This method only works with editable tables.
+   *
+   * @vegaVersion 1.19.0
    */
   async removeRow(rowKey) {
   }
@@ -2488,113 +2782,125 @@ const VegaTable = class {
     "scrollConfig": ["watchScrollConfig"]
   }; }
 };
-__decorate$n([
+__decorate$p([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTable.prototype, "globalSlimmers", void 0);
-__decorate$n([
+__decorate$p([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "translationSlimmer", void 0);
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderModeController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableCellRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableExpandRowController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableDataSourceController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTablePaginationController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableEditableController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableSortController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaTableChildrenController", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaTable.prototype, "paginationEventPrevent", void 0);
-__decorate$n([
+], VegaTable.prototype, "eventsPrevent", void 0);
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "changeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "selectChangeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
-__decorate$n([
+__decorate$p([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickEventEmitter", void 0);
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaTable.prototype, "rowClickEventEmitter", void 0);
-__decorate$n([
+], VegaTable.prototype, "rowExpandEventEmitter", void 0);
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "densityNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$p([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectEventEmitter", void 0);
+__decorate$p([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectAllEventEmitter", void 0);
 VegaTable.style = vegaTableCss;
 
 const vegaTableBodyCss = ":host{display:contents}";
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2608,7 +2914,7 @@ const VegaTableBody = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.globalSlimmers = {};
-    this.childChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.host);
+    this.childChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {
@@ -2616,13 +2922,13 @@ const VegaTableBody = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$m([
+__decorate$o([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableBody.prototype, "globalSlimmers", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableBody.style = vegaTableBodyCss;
@@ -2671,7 +2977,7 @@ const generateColSpan = (columnLength, withMultipleSelection) => {
   return columnLength + (withMultipleSelection ? 2 : 1);
 };
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2694,13 +3000,13 @@ class VegaTableCellStateController extends subStateObserverSlimmer.SubStateObser
     });
   }
 }
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableCellStateController.prototype, "density", void 0);
 
 const vegaTableCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}.vega-table-cell{padding:12px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-table-cell{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.vega-table-cell.break-word{word-break:break-word}td{display:block;padding:0px}td.v-text-center{text-align:center}td.v-text-left{text-align:left}td.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}.vega-table-cell-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all}.vega-table-cell-scroll{overflow:auto}";
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -2717,7 +3023,7 @@ const VegaTableCell = class {
     this.vegaTableCellStateController = new VegaTableCellStateController();
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     this.getCellOverflowClass = () => {
       switch (this.overflow) {
         case 'ellipsis':
@@ -2742,21 +3048,21 @@ const VegaTableCell = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$k([
+__decorate$m([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableCell.prototype, "globalSlimmers", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableCell.style = vegaTableCellCss;
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2775,20 +3081,20 @@ class VegaTableExpandRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("td", null)));
   }
 }
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "expanded", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "checked", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2802,7 +3108,7 @@ class VegaTableExpandRowExpandController extends globalSlimmerRegistry.VegaSlimm
    * Component lifecycle - [connectedCallback]{@link VegaTableExpandRow.connectedCallback}
    */
   connectedCallback() {
-    this.expandObserver = new domNodeSubjectObserverFactory.Observer(this.isAcceptableTableExpandRowObserver.bind(this), (payload) => {
+    this.expandObserver = new observer.Observer(this.isAcceptableTableExpandRowObserver.bind(this), (payload) => {
       if (payload.rowKey === this.rowKey) {
         this.expanded = payload.expanded;
       }
@@ -2831,19 +3137,19 @@ class VegaTableExpandRowExpandController extends globalSlimmerRegistry.VegaSlimm
     }
   }
 }
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "host", void 0);
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowExpandController.prototype, "rowKey", void 0);
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowExpandController.prototype, "expanded", void 0);
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "connectedCallback", null);
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowExpandController.prototype, "disconnectedCallback", null);
 
@@ -2867,7 +3173,7 @@ function isAcceptableTableObserver(input) {
   return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === ui.findParent(this.host, 'vega-table');
 }
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2881,7 +3187,7 @@ class VegaTableExpandRowSelectionController extends globalSlimmerRegistry.VegaSl
    * Component lifecycle - [connectedCallback]{@link VegaTableExpandRow.connectedCallback}
    */
   connectedCallback() {
-    this.rowSelectionObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
+    this.rowSelectionObserver = new observer.Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
       if (payload.rowKey === this.rowKey) {
         this.checked = payload.checked;
       }
@@ -2895,23 +3201,23 @@ class VegaTableExpandRowSelectionController extends globalSlimmerRegistry.VegaSl
     changeManager.ChangeManager.unregister(staticSubjectTitle.TABLE_ROW_SELECTION, this.rowSelectionObserver);
   }
 }
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowSelectionController.prototype, "checked", void 0);
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "host", void 0);
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowSelectionController.prototype, "rowKey", void 0);
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "connectedCallback", null);
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], VegaTableExpandRowSelectionController.prototype, "disconnectedCallback", null);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -2944,17 +3250,17 @@ class VegaTableExpandRowStateController extends subStateObserverSlimmer.SubState
     });
   }
 }
-__decorate$g([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "host", void 0);
-__decorate$g([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
-__decorate$g([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -3004,7 +3310,7 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
    */
   getVisibleColumnsNumber() {
     const table = ui.findParent(this.host, 'vega-table');
-    const currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    const currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     const isTemplateRenderMode = table.children &&
       Array.from(table.children).filter((item) => { var _a; return !((_a = item.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.startsWith('vega-table-expand-row-')); }).length > 0;
     const cells = isTemplateRenderMode
@@ -3019,28 +3325,28 @@ class VegaTableExpandRowColSpanController extends globalSlimmerRegistry.VegaSlim
     }).length;
   }
 }
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "host", void 0);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableExpandRowColSpanController.prototype, "colSpan", void 0);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentBreakpoint')
 ], VegaTableExpandRowColSpanController.prototype, "watchCurrentBreakpoint", null);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('watchWithMultipleSelection')
 ], VegaTableExpandRowColSpanController.prototype, "watchWithMultipleSelection", null);
 
 const vegaTableExpandRowCss = ":host{display:contents}:host([data-striped=striped]) .vega-table-expanded-row:not(.checked) td{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}:host(.v-hidden){display:none}.vega-table-expanded-row{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-table-expanded-row:not(.expanded){display:none}.vega-table-expanded-row.expanded td{border-bottom-width:1px;border-top-width:0px;border-right-width:0px;border-left-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1));padding:0px;vertical-align:middle}.vega-table-expanded-row.expanded td:first-of-type{border-left-width:1px;border-bottom-width:1px;border-top-left-radius:12px;border-bottom-left-radius:12px;border-top-left-radius:0px}.vega-table-expanded-row.expanded td:last-of-type{border-right-width:1px;border-bottom-width:1px;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-right-radius:0px}.vega-table-expanded-row.expanded td.vega-table-expanded-row-slot-container{border-top-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}.vega-table-expanded-row.expanded.checked{background-color:rgba(var(--v-bg-table-row-selected-expanded, 229, 239, 255, 1))}";
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -3061,7 +3367,7 @@ const VegaTableExpandRow = class {
     this.vegaTableExpandRowColSpanController = new VegaTableExpandRowColSpanController();
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     /**
      * Indicates whether the row is expanded.
      */
@@ -3090,33 +3396,33 @@ const VegaTableExpandRow = class {
     "withMultipleSelection": ["watchWithMultipleSelection"]
   }; }
 };
-__decorate$e([
+__decorate$g([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableExpandRow.prototype, "globalSlimmers", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowRenderer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowExpandController", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowSelectionController", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowStateController", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaTableExpandRowColSpanController", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
 VegaTableExpandRow.style = vegaTableExpandRowCss;
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -3144,16 +3450,16 @@ class VegaTableHeadStateController extends subStateObserverSlimmer.SubStateObser
     });
   }
 }
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableHeadStateController.prototype, "host", void 0);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadStateController.prototype, "fixed", void 0);
 
 const vegaTableHeadCss = ":host{display:table-header-group;border-top-right-radius:12px;border-bottom-right-radius:12px;border-top-left-radius:12px;border-bottom-left-radius:12px}:host thead{display:contents}:host(.fixed-header){position:sticky;top:0px}";
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
     r = Reflect.decorate(decorators, target, key, desc);
@@ -3169,22 +3475,23 @@ const VegaTableHead = class {
     this.globalSlimmers = {};
     this.vegaTableHeadStateController = new VegaTableHeadStateController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.headCellEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.host);
     /**
      * Indicates whether the table header is fixed.
      */
     this.fixed = false;
     this.handleTableHeadRefChange = (ref) => {
       if (this.tableHeadRef) {
-        zIndexManager.ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+        vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
       }
       if (this.fixed) {
-        zIndexManager.ZIndexManager.setZIndex(ref, 'base');
+        vegaSkeletonLoaderController.InternalVegaZIndexManager.setZIndex(ref, 'base');
       }
       this.tableHeadRef = ref;
     };
   }
   disconnectedCallback() {
-    zIndexManager.ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+    vegaSkeletonLoaderController.InternalVegaZIndexManager.removeZIndex(this.tableHeadRef, 'base');
   }
   render() {
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
@@ -3193,18 +3500,21 @@ const VegaTableHead = class {
   }
   get host() { return index.getElement(this); }
 };
-__decorate$c([
+__decorate$e([
   componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
 ], VegaTableHead.prototype, "globalSlimmers", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaTableHeadStateController", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$e([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableHead.prototype, "headCellEventPrevent", void 0);
 VegaTableHead.style = vegaTableHeadCss;
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   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;
@@ -3227,11 +3537,144 @@ class VegaTableHeadCellStateController extends subStateObserverSlimmer.SubStateO
     });
   }
 }
-__decorate$b([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableHeadCellStateController.prototype, "density", void 0);
 
-const vegaTableHeadCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}th{display:block;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}th.vega-table-cell.sortable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vega-table-column{display:flex;align-items:center;justify-content:space-between}.vega-table-column-sorter{display:flex;flex-direction:column;gap:4px;margin-left:4px;cursor:pointer;outline:none}.vega-table-column-sorter span{display:inline-flex}.vega-table-column-sorter span.v-text-link{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.vega-table-column-label{flex-grow:1;min-width:0px}.vega-table-column-label.v-text-center{text-align:center}.vega-table-column-label.v-text-left{text-align:left}.vega-table-column-label.v-text-right{text-align:right}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}";
+const arrowUpArrowDown = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M489 377c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-55 55V56c0-13.3-10.7-24-24-24s-24 10.7-24 24V398.1l-55-55c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l96 96c9.4 9.4 24.6 9.4 33.9 0l96-96zM137 39c-9.4-9.4-24.6-9.4-33.9 0L7 135c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l55-55V456c0 13.3 10.7 24 24 24s24-10.7 24-24V113.9l55 55c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9L137 39z"/></svg>`,
+};
+
+const circleArrowDown = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 0a256 256 0 1 0 0 512A256 256 0 1 0 256 0zM127 281c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l71 71L232 136c0-13.3 10.7-24 24-24s24 10.7 24 24l0 182.1 71-71c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L273 393c-9.4 9.4-24.6 9.4-33.9 0L127 281z"/></svg>`,
+};
+
+const circleArrowUp = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM385 231c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-71-71V376c0 13.3-10.7 24-24 24s-24-10.7-24-24V193.9l-71 71c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 119c9.4-9.4 24.6-9.4 33.9 0L385 231z"/></svg>`,
+};
+
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+class SortIconRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  render() {
+    if (!this.sorter)
+      return;
+    const { icon, color } = SortIconRenderer.SORT_ICON_MAP[this.sortOrder || 'default'];
+    return (index.h("span", { class: "vega-table-column-sorter" },
+      index.h("vega-icon", { color: color, icon: internalIconManager.VegaInternalIconManager.getIconKey(icon), size: "size-12" })));
+  }
+}
+SortIconRenderer.SORT_ICON_MAP = {
+  asc: {
+    icon: 'circle-arrow-up',
+    color: 'text-link',
+  },
+  desc: {
+    icon: 'circle-arrow-down',
+    color: 'text-link',
+  },
+  default: {
+    icon: 'arrow-up-arrow-down',
+    color: 'text-secondary',
+  },
+};
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], SortIconRenderer.prototype, "sorter", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], SortIconRenderer.prototype, "sortOrder", void 0);
+
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+/**
+ * Controller for the table head cell sort configuration
+ */
+class VegaTableHeadCellSortConfigController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    const parent = ui.findParent(this.host, 'vega-table-head');
+    if (parent) {
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(parent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), this.observer);
+    }
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]
+   */
+  componentWillLoad() {
+    const topParent = ui.findParent(this.host, 'vega-table-head');
+    if (topParent) {
+      this.hostTable = ui.findParent(topParent, 'vega-table');
+      this.isTemplateRenderMode = this.checkIsTemplateRenderMode();
+      this.observer = new observer.Observer(this.isAcceptableObserver.bind(this), this.observerListener.bind(this));
+      changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(topParent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), this.observer);
+    }
+  }
+  /**
+   * Notify other table head cells on click sort
+   */
+  notifyOtherHeadCellOnClickSort() {
+    const parent = ui.findParent(this.host, 'vega-table-head');
+    if (parent) {
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(parent, vegaInternalEventId.VegaInternalTableHeadCellSortEvent), { host: this.host });
+    }
+  }
+  /**
+   * The function isAcceptableObserver checks if the input host matches a specified vega table head cell.
+   *
+   * @param {TableHeadCellObserverPayload} input - The `input` parameter is of type `TableHeadCellObserverPayload`
+   * @returns {boolean} The `isAcceptableObserver` function is returns `true`.
+   */
+  isAcceptableObserver(input) {
+    return input['host'] !== this.host;
+  }
+  /**
+   * The function checks if table is in template render mode and if sortConfig is of type single
+   */
+  observerListener() {
+    var _a;
+    if (this.isTemplateRenderMode) {
+      if (((_a = this.hostTable.sortConfig) === null || _a === void 0 ? void 0 : _a.type) === 'single') {
+        this.sortOrder = undefined;
+      }
+    }
+  }
+  /**
+   * Check whether render mode is template render
+   *
+   * @returns {boolean} return true if the mode is template, otherwise false
+   */
+  checkIsTemplateRenderMode() {
+    return Array.from(this.hostTable.children).some((el) => el.tagName.startsWith('VEGA-TABLE-'));
+  }
+}
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadCellSortConfigController.prototype, "host", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaTableHeadCellSortConfigController.prototype, "sortOrder", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableHeadCellSortConfigController.prototype, "sortConfig", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadCellSortConfigController.prototype, "disconnectedCallback", null);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaTableHeadCellSortConfigController.prototype, "componentWillLoad", null);
+
+const vegaTableHeadCellCss = ":host(.v-hidden){display:none}@media (min-width: 320px){:host(.S\\:v-table-cell){display:table-cell}}@media (min-width: 768px){:host(.M\\:v-table-cell){display:table-cell}}@media (min-width: 1024px){:host(.L\\:v-table-cell){display:table-cell}}@media (min-width: 1440px){:host(.XL\\:v-table-cell){display:table-cell}}:host{display:table-cell;background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));color:rgba(var(--v-text-primary, 32, 54, 69, 1));text-align:left;vertical-align:middle}:host(.sortable){cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host(.sortable:hover){background-color:rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1))}th{display:block;padding:0px;padding:12px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;overflow-wrap:break-word}@media screen and (min-width: 768px) and (max-width: 1023px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){th{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}th.break-word{word-break:break-word}.vega-table-column{display:flex;align-items:center}.vega-table-column.center{justify-content:center;text-align:center}.vega-table-column.right{justify-content:flex-end;text-align:right}.vega-table-column.left{justify-content:flex-start;text-align:left}.vega-table-column .vega-table-column-label{min-width:0px}.vega-table-column .vega-table-column-sorter{display:flex;align-items:center;justify-content:center;padding:2px;margin-left:8px;cursor:pointer;outline:none}:host(.density-default) .vega-table-cell{padding:12px}:host(.density-compact) .vega-table-cell{padding:4px}:host(.density-relaxed) .vega-table-cell{padding:16px}";
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3249,22 +3692,17 @@ const VegaTableHeadCell = class {
     this.vegaClick = index.createEvent(this, "vegaClick", 7);
     this.click = index.createEvent(this, "click", 7);
     this.globalSlimmers = {};
-    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTableHeadCell, vegaEventId.VegaClick);
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTableHeadCell, domNodeSubjectFactory.VegaClick);
     this.vegaTableHeadCellStateController = new VegaTableHeadCellStateController();
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.sortIconRenderer = new SortIconRenderer();
+    this.vegaTableHeadCellSortConfigController = new VegaTableHeadCellSortConfigController();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     this.handleSort = (e) => {
       this.sortOrder = this.getNextSortOrder(this.sortOrder);
       this.clickEventEmitter.emit({ sortOrder: this.sortOrder }, e);
-    };
-    this.renderSortIconButton = () => {
-      if (!this.sorter)
-        return;
-      return (index.h("div", { class: "vega-table-column-sorter" }, index.h("span", { class: this.isSortActive('asc') ? 'v-text-link' : '' }, index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-up'), size: "size-8" })), index.h("span", { class: this.isSortActive('desc') ? 'v-text-link' : '' }, index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down'), size: "size-8" }))));
-    };
-    this.isSortActive = (order) => {
-      return this.sortOrder === order;
+      this.vegaTableHeadCellSortConfigController.notifyOtherHeadCellOnClickSort();
     };
     /**
      * Get the next sorter order
@@ -3273,23 +3711,18 @@ const VegaTableHeadCell = class {
      * @returns {Nullable<'desc' | 'asc'>} Return the next sorter order
      */
     this.getNextSortOrder = (sortOrder) => {
-      let nextSortOrder;
-      switch (sortOrder) {
-        case 'desc':
-          nextSortOrder = 'asc';
-          break;
-        case 'asc':
-          nextSortOrder = null;
-          break;
-        default:
-          nextSortOrder = 'desc';
-          break;
-      }
-      return nextSortOrder;
+      var _a;
+      const isReverseSortOrder = featureFlagController.FeatureFlag.isEnabled('VEGA_TABLE.REVERSE_SORT_ORDER');
+      const baseOrderSequence = isReverseSortOrder
+        ? ['asc', 'desc']
+        : ['desc', 'asc'];
+      const orderSequence = ((_a = this.sortConfig) === null || _a === void 0 ? void 0 : _a.disableUnsorted)
+        ? baseOrderSequence
+        : [...baseOrderSequence, null];
+      return orderSequence[(orderSequence.indexOf(sortOrder) + 1) % orderSequence.length];
     };
   }
   render() {
-    const labelAlignClassName = generateTextAlignClass(this.textAlign);
     const sortableConfig = this.sorter
       ? {
         role: 'button',
@@ -3298,21 +3731,25 @@ const VegaTableHeadCell = class {
         onClick: (e) => this.handleSort(e),
       }
       : null;
-    const cellClassNames = ['vega-table-cell', this.sorter ? 'sortable' : null];
+    const cellClassNames = ['vega-table-cell'];
     if (!featureFlagController.FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
       cellClassNames.push('break-word');
     }
     return component.sanitizeVegaComponent(index.h(index.Host, { class: {
         [`density-${responsiveFormatFacade.ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+        sortable: !!this.sorter,
         [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
-      }, style: { width: this.width } }, index.h("th", Object.assign({ class: ui.arrayToClassString(cellClassNames) }, sortableConfig), index.h("div", { class: "vega-table-column" }, index.h("span", { class: `vega-table-column-label ${labelAlignClassName}` }, index.h("slot", null)), this.renderSortIconButton()))), this.host);
+      }, style: { width: this.width } }, index.h("th", Object.assign({ class: ui.arrayToClassString(cellClassNames) }, sortableConfig), index.h("div", { class: ui.arrayToClassString(['vega-table-column', this.textAlign]) }, index.h("span", { class: "vega-table-column-label" }, index.h("slot", null)), this.sortIconRenderer.render()))), this.host);
   }
   get host() { return index.getElement(this); }
 };
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'chevron-up': chevronDown.chevronUp,
+    'chevron-up': chevronUp.chevronUp,
     'chevron-down': chevronDown.chevronDown,
+    'arrow-up-arrow-down': arrowUpArrowDown,
+    'circle-arrow-down': circleArrowDown,
+    'circle-arrow-up': circleArrowUp,
   });
 })();
 __decorate$a([
@@ -3330,6 +3767,12 @@ __decorate$a([
 __decorate$a([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableHeadCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$a([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "sortIconRenderer", void 0);
+__decorate$a([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellSortConfigController", void 0);
 VegaTableHeadCell.style = vegaTableHeadCellCss;
 
 var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3345,10 +3788,10 @@ class VegaTableHeadRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
       if (this.selectionType !== 'multiple')
         return;
       return (index.h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (index.h("div", { class: "vega-table-checkbox-wrapper" },
-        index.h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, 
+        index.h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, onClick: this.handleClick, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
-            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaChange, this.handleSelectAll);
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.handleSelectAll);
           } })))));
     };
     this.handleSelectAll = (input) => {
@@ -3365,6 +3808,16 @@ class VegaTableHeadRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.renderHeaderExpandableCell = () => {
       return this.expandable && index.h("th", { class: "vega-table-expand-action-column" });
     };
+    this.handleClick = (e) => {
+      e.stopPropagation();
+      const event = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(ui.findParent(this.host, 'vega-table'), vegaInternalEventId.VegaInternalTableRowSelectAll), {
+        host: this.host,
+        checked: !this.checkedAll,
+      });
+      if (event.defaultPrevented) {
+        e.preventDefault();
+      }
+    };
   }
   /**
    * Used by {@link currentDataObserver}
@@ -3454,7 +3907,7 @@ class VegaTableHeadRowController extends globalSlimmerRegistry.VegaSlimmer {
    * Initialize the row selection all observer.
    */
   initRowSelectionAllObserver() {
-    this.rowSelectionAllObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
+    this.rowSelectionAllObserver = new observer.Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
       if (!payload.noneChecked && payload.checked === false) {
         this.checkedAll = null; // indeterminate status
       }
@@ -3598,10 +4051,10 @@ const VegaTableHeadRow = class {
     this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
     this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
     this.vegaTableHeadRowController = new VegaTableHeadRowController();
-    this.headCellEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick, vegaEventId.VegaChange], () => this.host);
+    this.headCellEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
     /**
      * Indicates whether the row is expandable.
      */
@@ -3655,10 +4108,10 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         index.h("div", { class: "vega-table-checkbox-wrapper" },
           index.h("vega-checkbox", { size: "small", checked: this.checked, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: this.stopRowSelectionPropagation, 
+            onClick: this.handleClick, 
             /* eslint-disable-next-line react/jsx-no-bind */
             ref: (ref) => {
-              domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaChange, this.onRowSelectionChange);
+              domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectFactory.VegaChange, this.onRowSelectionChange);
             } }))));
     };
     this.renderExpandIcon = () => {
@@ -3666,8 +4119,7 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         index.h("div", { class: "vega-table-expand-icon-wrapper" },
           index.h("vega-icon", { icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
     };
-    this.onRowClick = (e) => {
-      e.stopPropagation();
+    this.onRowClick = () => {
       this.vegaTableRowClickController.handleRowClick();
     };
     this.onRowSelectionChange = (input) => {
@@ -3675,14 +4127,34 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
         this.vegaTableRowSelectionController.handleRowSelect(input.detail);
       }
     };
-    this.stopRowSelectionPropagation = (e) => {
+    this.handleClick = (e) => {
       e.stopPropagation();
+      const rowSelectEvent = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.parentTableRef, vegaInternalEventId.VegaInternalTableRowSelect), {
+        host: this.host,
+        rowKey: this.rowKey,
+        checked: !this.checked,
+      });
+      if (rowSelectEvent.defaultPrevented) {
+        e.preventDefault();
+      }
     };
     this.onExpandIconClick = async (e) => {
       e.stopPropagation();
-      this.vegaTableRowExpandController.handleExpandIconClick();
+      const expandEvent = this.expandEventEmitter.emit({
+        expanded: !this.expanded,
+        rowKey: this.rowKey,
+      });
+      if (expandEvent && !expandEvent.defaultPrevented) {
+        this.vegaTableRowExpandController.handleExpandIconClick();
+      }
     };
   }
+  connectedCallback() {
+    this.setParentTableRef();
+  }
+  getParentTableRef() {
+    return this.parentTableRef;
+  }
   render() {
     var _a, _b;
     return (index.h(index.Fragment, null,
@@ -3705,6 +4177,9 @@ class VegaTableRowRenderer extends globalSlimmerRegistry.VegaSlimmer {
   renderExpandRowSpace(rowKey) {
     return (this.expandable && (index.h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
   }
+  setParentTableRef() {
+    this.parentTableRef = ui.findParent(this.host, 'vega-table');
+  }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'chevron-down': chevronDown.chevronDown });
@@ -3748,6 +4223,12 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowRenderer.prototype, "vegaTableRowClickController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowRenderer.prototype, "expandEventEmitter", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaTableRowRenderer.prototype, "connectedCallback", null);
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -3800,13 +4281,13 @@ class VegaTableRowSelectionController extends globalSlimmerRegistry.VegaSlimmer
    * Initialize the row selection observer.
    */
   initRowSelectionObserver() {
-    this.rowSelectionAllObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableObserver.bind(this), (payload) => {
+    this.rowSelectionAllObserver = new observer.Observer(isAcceptableTableObserver.bind(this), (payload) => {
       if (payload.checked || (payload.checked === false && payload.noneChecked)) {
         this.checked = payload.checked;
       }
     });
     changeManager.ChangeManager.register(staticSubjectTitle.TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
-    this.rowSelectionObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableObserver.bind(this), (payload) => {
+    this.rowSelectionObserver = new observer.Observer(isAcceptableTableObserver.bind(this), (payload) => {
       if (payload.rowKey === this.rowKey) {
         this.checked = payload.checked;
       }
@@ -3859,18 +4340,25 @@ class VegaTableRowExpandController extends globalSlimmerRegistry.VegaSlimmer {
    * The handler for expand icon click event.
    */
   handleExpandIconClick() {
-    this.expanded = !this.expanded;
-    changeManager.ChangeManager.notify(staticSubjectTitle.TABLE_EXPAND_ROW, {
+    const rowExpandEvent = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), vegaInternalEventId.VegaInternalTableRowExpand), {
       host: this.host,
       rowKey: this.rowKey,
-      expanded: this.expanded,
+      expanded: !this.expanded,
     });
+    if (!rowExpandEvent.defaultPrevented) {
+      this.expanded = !this.expanded;
+      changeManager.ChangeManager.notify(staticSubjectTitle.TABLE_EXPAND_ROW, {
+        host: this.host,
+        rowKey: this.rowKey,
+        expanded: this.expanded,
+      });
+    }
   }
   /**
    * Initialize the row expand observer.
    */
   initRowExpandObserver() {
-    this.rowExpandObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
+    this.rowExpandObserver = new observer.Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
       if (payload.rowKey === this.rowKey) {
         this.expanded = payload.expanded;
       }
@@ -3890,6 +4378,9 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaTableRowExpandController.prototype, "expanded", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowExpandController.prototype, "vegaTableRowRenderer", void 0);
 __decorate$3([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowExpandController.prototype, "connectedCallback", null);
@@ -3923,20 +4414,29 @@ class VegaTableRowClickController extends globalSlimmerRegistry.VegaSlimmer {
    * Row click handler
    */
   handleRowClick() {
-    changeManager.ChangeManager.notify(staticSubjectTitle.TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
-    this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    const rowSelectEvent = remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.vegaTableRowRenderer.getParentTableRef(), vegaInternalEventId.VegaInternalTableRowSelect), {
+      host: this.host,
+      rowKey: this.rowKey,
+      checked: !this.checked,
+    });
+    if (!rowSelectEvent.defaultPrevented) {
+      changeManager.ChangeManager.notify(staticSubjectTitle.TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
+      this.clickEventEmitter.emit({ rowKey: this.rowKey });
+    }
   }
   /**
    * Initialize row click observer
    */
   initRowClickObserver() {
-    this.rowClickObserver = new domNodeSubjectObserverFactory.Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
+    this.rowClickObserver = new observer.Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
       this.clicked = payload.host === this.host;
-      if (this.selectionType === 'single' && payload.host === this.host) {
-        this.vegaTableRowSelectionController.setChecked(!this.checked);
-      }
-      else {
-        this.vegaTableRowSelectionController.setChecked(false);
+      if (this.selectionType === 'single') {
+        if (payload.host === this.host) {
+          this.vegaTableRowSelectionController.setChecked(!this.checked);
+        }
+        else {
+          this.vegaTableRowSelectionController.setChecked(false);
+        }
       }
     });
     changeManager.ChangeManager.register(staticSubjectTitle.TABLE_ROW_CLICK, this.rowClickObserver);
@@ -3966,6 +4466,9 @@ __decorate$2([
 __decorate$2([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaTableRowClickController.prototype, "clickEventEmitter", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaTableRowClickController.prototype, "vegaTableRowRenderer", void 0);
 __decorate$2([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], VegaTableRowClickController.prototype, "connectedCallback", null);
@@ -4107,17 +4610,20 @@ const VegaTableRow = class {
     index.registerInstance(this, hostRef);
     this.vegaClick = index.createEvent(this, "vegaClick", 7);
     this.click = index.createEvent(this, "click", 7);
+    this.vegaExpand = index.createEvent(this, "vegaExpand", 7);
+    this.expand = index.createEvent(this, "expand", 7);
     this.globalSlimmers = {};
     this.vegaTableRowRenderer = new VegaTableRowRenderer();
     this.vegaTableRowSelectionController = new VegaTableRowSelectionController();
     this.vegaTableRowExpandController = new VegaTableRowExpandController();
     this.vegaTableRowClickController = new VegaTableRowClickController();
     this.vegaTableRowStateController = new VegaTableRowStateController();
-    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTableRow, vegaEventId.VegaClick);
-    this.checkboxValueChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange, vegaEventId.VegaClick], () => this.host);
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTableRow, domNodeSubjectFactory.VegaClick);
+    this.expandEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaTableRow, domNodeSubjectFactory.VegaExpand);
+    this.checkboxValueChangeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaClick], () => this.host, undefined, true);
     this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.currentBreakpoint = breakpoints.getCurrentBreakpoint();
+    this.currentBreakpoint = pageResizeObserverSlimmer.getCurrentBreakpoint();
   }
   watchSelectionType() {
   }
@@ -4155,6 +4661,9 @@ __decorate([
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRow.prototype, "clickEventEmitter", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaTableRow.prototype, "expandEventEmitter", void 0);
 __decorate([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaTableRow.prototype, "checkboxValueChangeEventPrevent", void 0);