@globalpayments/vega 1.0.0 → 2.13.0-backfill-beta.0

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

@@ -0,0 +1,4165 @@
+import { h, f as forceUpdate, F as Fragment, H as Host, r as registerInstance, c as createEvent, g as getElement } from './index-c3505689.js';
+import { a as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
+import { m as methodPlaceholder, s as slotPlaceholder } from './placeholder-bf562081.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-6bc153ea.js';
+import { g as getValueByPath } from './object-261e7344.js';
+import { C as ChangeManager } from './changeManager-d60d98c8.js';
+import { j as TABLE_EXPAND_ROW, k as TABLE_ROW_SELECTION, l as TABLE_ROW_SELECTION_ALL, m as TABLE_ROW_CLICK } from './staticSubjectTitle-3b88939a.js';
+import { O as Observer, D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
+import { f as findParent, a as arrayToClassString } from './ui-28499aab.js';
+import { a as VegaClick, e as VegaChange, x as VegaPageSizeChange, B as VegaSelectChange, C as VegaSelectAllChange, D as VegaRowClick } from './vegaEventId-c0384a6f.js';
+import { P as isNonNullable, s as isBreakpointsTokenType } from './typeGuard-ebc62114.js';
+import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-7665557d.js';
+import { s as sanitizeVegaComponent } from './component-40be4402.js';
+import { g as generateUUID } from './misc-c21a85c9.js';
+import { g as getCurrentBreakpoint, B as Breakpoints } from './breakpoints-e59edf8d.js';
+import { M as MutationObserverSlimmer, T as TagNameMutationFilter } from './mutationObserverFilters-17327079.js';
+import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
+import { c as createSubStateNotifySlimmer, S as SubStateObserverSlimmer } from './subStateObserverSlimmer-71b39ca0.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-86a1593c.js';
+import { c as createEventEmitSlimmer } from './eventEmitSlimmer-d5b8d8d7.js';
+import { I as ImmutableMap } from './immutableMap-af49ae98.js';
+import { F as FeatureFlag } from './featureFlagController-fdb8cf0e.js';
+import { Z as ZIndexManager } from './zIndexManager-522f477e.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-a52b1c10.js';
+import { c as chevronUp, a as chevronDown } from './chevron-down-4303bddb.js';
+import './ui-df46cc20.js';
+import './regex-dfe11abf.js';
+import './typography-a8fc4764.js';
+import './number-e2519d1c.js';
+import './array-8c82516c.js';
+import './dynamic-slimmer-ef83e258.js';
+import './vegaInternalEventId-ba0b5623.js';
+import './internalVegaEventManager-501f9eb9.js';
+import './index-1d242e89.js';
+import './_commonjsHelpers-9943807e.js';
+import './iconManager-48bebc43.js';
+
+/**
+ * Immutable Set cannot be changed once created
+ */
+class ImmutableSet {
+  /**
+   * The constructor of ImmutableSet
+   *
+   * @typedef T generic type parameter
+   * @param {Set<T>} initialSet - The initial set to use. If not provided, the set will be empty.
+   * @param {() => void} onMutate - A callback function that will be called whenever the set is mutated.
+   */
+  constructor(initialSet, onMutate) {
+    this.size = 0;
+    this.set = new Set();
+    if (initialSet) {
+      this.set = initialSet;
+      this.size = initialSet.size;
+    }
+    if (onMutate) {
+      this.onMutate = onMutate;
+    }
+  }
+  /**
+   * The function is called when the set is mutated
+   *
+   * @param {Immutable<Set<T>>} _newSet - The new set that was created.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMutate(_newSet) {
+    return;
+  }
+  /**
+   * Add new items to the set, and then call the onMutate with the new ImmutableSet
+   *
+   * @typedef T generic type parameter
+   * @param {T[]} value  - The items to add to the set.
+   * @returns {ImmutableSet<T>} A new ImmutableSet with the new items added.
+   */
+  add(...value) {
+    return this.withMutation((set) => {
+      value.forEach((value) => set.add(value));
+    });
+  }
+  /**
+   * clear the set values
+   *
+   * @typedef T generic type parameter
+   */
+  clear() {
+    this.withMutation((set) => set.clear());
+  }
+  /**
+   * delete item from set
+   *
+   * @typedef T generic type parameter
+   * @param {T} value - The key to delete from the set.
+   * @returns {ImmutableSet<T>} A new ImmutableSet
+   */
+  delete(value) {
+    return this.withMutation((set) => {
+      set.delete(value);
+    });
+  }
+  /**
+   * It takes a function that mutates a set, and returns a new immutable set that is the result of that mutation
+   *
+   * @param {(set: Set<T>) => void} fn - (set: Set<T>) => void
+   * @returns {ImmutableSet<T>} A new ImmutableSet
+   */
+  withMutation(fn) {
+    const newSet = new Set(this.set);
+    fn(newSet);
+    const newImmutableSet = new ImmutableSet(newSet, this.onMutate);
+    this.onMutate(newImmutableSet);
+    return newImmutableSet;
+  }
+  /**
+   * It returns true if the value is in the set, and false otherwise
+   *
+   * @typedef T generic type parameter
+   * @param {T} value - The value to check for.
+   * @returns {boolean} A boolean value.
+   */
+  has(value) {
+    return this.set.has(value);
+  }
+  /**
+   * It returns an array of the values in the set
+   *
+   * @returns {T[]} An array of the values in the set.
+   */
+  toArray() {
+    return [...this.set];
+  }
+}
+
+const VegaTableEditableFieldTypes = [
+  'input',
+  'input-select',
+  'stepper',
+  'checkbox',
+  'textarea',
+  'combo-box',
+  'date-picker',
+  'time-picker',
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+class VegaTableCellRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableCellContent = (column, record, index) => {
+      var _a, _b;
+      const value = getValueByPath(record, column.prop);
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      const isNewRow = !this.vegaTableDataSourceController
+        .getDataSource()
+        .find((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+      const editing = this.vegaTableEditableController.isEditing(rowKey);
+      const rowForm = this.vegaTableEditableController.getRowFormRefMap().get(rowKey);
+      if (editing && rowForm && column.renderFormItem) {
+        return column.renderFormItem(h, column.prop ? value : rowKey, record, index, {
+          rowForm,
+          isNewRow,
+        });
+      }
+      if (editing && rowForm && column.editable) {
+        const formItemProps = (_a = column.formItemProps) === null || _a === void 0 ? void 0 : _a.call(column, rowForm, {
+          record,
+          index,
+        });
+        const mergedProps = Object.assign({ dataVegaForm: (formItemProps === null || formItemProps === void 0 ? void 0 : formItemProps.dataVegaForm) || column.prop, size: 'small', value: value }, (_b = column.formItemProps) === null || _b === void 0 ? void 0 : _b.call(column, rowForm, { record, index }));
+        return this.generateEditComponentByType(column.formItemType, mergedProps);
+      }
+      if (column.render) {
+        return column.render(h, column.prop ? value : rowKey, record, index);
+      }
+      if (typeof value === 'string' || typeof value === 'number') {
+        return String(value);
+      }
+      else if (typeof value === 'undefined' || value === null) {
+        return '';
+      }
+      else {
+        LogUtility.error(`Column ${column.prop}'s value has a wrong type(${typeof record[column.prop]}) in table cell. Only 'VegaTableNode | string | number' can be rendered in table cell`);
+      }
+    };
+    /**
+     * Generate edit component by
+     *
+     * @param {VegaTableFormItemType} type - The type of the vega components
+     * @param {VegaTableEditComponentProps} props - The component props
+     * @returns {VegaTableNode} The node of VegaTable
+     */
+    this.generateEditComponentByType = (type = 'input', props) => {
+      const tagName = `vega-${type}`;
+      const { dataVegaForm } = props, componentProps = __rest$1(props, ["dataVegaForm"]);
+      if (!this.isVegaTableEditableFieldType(tagName)) {
+        LogUtility.error(`Type must be one of the form field types. [${VegaTableEditableFieldTypes.join(',')}]`);
+        return;
+      }
+      return h(tagName, Object.assign(Object.assign({}, componentProps), { 'data-vega-form': dataVegaForm }));
+    };
+    /**
+     * Verify the tagName is editable field type
+     *
+     * @param {string} tagName The component tag name
+     * @returns {boolean} return true if the tagName is editable field in VegaTable
+     */
+    this.isVegaTableEditableFieldType = (tagName) => {
+      return (tagName.toUpperCase().startsWith('VEGA') &&
+        new RegExp(VegaTableEditableFieldTypes.join('|'), 'i').test(tagName));
+    };
+  }
+  render(column, record, index) {
+    const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+    const columnKey = `${rowKey}_${column.key || column.prop}`;
+    return (h("vega-table-cell", { key: columnKey, textAlign: column.align, breakpoint: column.breakpoint, overflow: column.overflow }, this.renderTableCellContent(column, record, index)));
+  }
+}
+__decorate$D([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "rowKey", void 0);
+__decorate$D([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$D([
+  MapToComponentField()
+], VegaTableCellRenderer.prototype, "vegaTableEditableController", void 0);
+
+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;
+};
+/**
+ * The expand row controller of VegaTable
+ */
+class VegaTableExpandRowController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Toggle expandable row by rowKey
+     *
+     * @param {string} rowKey - The row key of the row
+     */
+    this.toggleExpandRow = (rowKey) => {
+      this.rowExpandable && this.handleToggleExpandRow(rowKey, !this.isExpanded(rowKey));
+    };
+    /**
+     * Open expandable row by rowKey
+     *
+     * @param {string} rowKey - The row key of the row
+     */
+    this.openExpandRow = (rowKey) => {
+      this.rowExpandable && this.handleToggleExpandRow(rowKey, true);
+    };
+    /**
+     * Close expanded row by rowKey
+     *
+     * @param {string} rowKey - The row key of the row
+     */
+    this.closeExpandRow = (rowKey) => {
+      this.rowExpandable && this.handleToggleExpandRow(rowKey, false);
+    };
+    /**
+     * Close all expanded row
+     */
+    this.closeAllExpandRow = () => {
+      this.rowExpandable && this.handleCloseAllExpandRow();
+    };
+    /**
+     * Whether the row is expandable
+     *
+     * @param {string} rowKey - The row key of the row
+     * @returns {boolean} Return true if the row is expandable
+     */
+    this.isExpanded = (rowKey) => {
+      return this.expandedRowKeySet.has(rowKey);
+    };
+    /**
+     * Close all expand row
+     */
+    this.handleCloseAllExpandRow = () => {
+      this.expandedRowKeySet.toArray().forEach((rowKey) => {
+        ChangeManager.notify(TABLE_EXPAND_ROW, {
+          host: this.host,
+          rowKey: rowKey,
+          expanded: false,
+        });
+      });
+      this.expandedRowKeySet.clear();
+    };
+    /**
+     * Toggle expand row
+     *
+     * @param {string} rowKey - The row key of the row
+     * @param {boolean} open - set open true if you want to open the expand row, otherwise false
+     */
+    this.handleToggleExpandRow = (rowKey, open) => {
+      if (open) {
+        this.expandedRowKeySet.add(rowKey);
+      }
+      else {
+        this.expandedRowKeySet.delete(rowKey);
+      }
+      ChangeManager.notify(TABLE_EXPAND_ROW, {
+        host: this.host,
+        rowKey: rowKey,
+        expanded: open,
+      });
+    };
+    /*
+     * The below method is e2e-test covered in
+     *
+     * @see{module:vega-table-new-slot-content-change}
+     * @see{module:vega-table-wrong-slot-content-change}
+     */
+    /* istanbul ignore next */
+    /**
+     * Init the mutation observer of expand row slot
+     */
+    this.initMutationObserver = () => {
+      this.mutationObserver = new MutationObserver(async (mutations) => {
+        const needForceUpdate = this.expandRowSlotGuard(mutations);
+        if (needForceUpdate) {
+          forceUpdate(this.host);
+        }
+      });
+      this.mutationObserver.observe(this.host, { childList: true, subtree: true });
+    };
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-table-new-slot-content-change}
+     * @see{module:vega-table-wrong-slot-content-change}
+     */
+    /* istanbul ignore next */
+    /**
+     * Monitoring the slot children used for expanded row
+     *
+     * @param {MutationRecord[]} mutations - The mutations of the observer
+     * @returns {boolean} return true if it needs force update
+     */
+    this.expandRowSlotGuard = (mutations) => {
+      const expectSlotNames = this.vegaTableDataSourceController
+        .getCurrentData()
+        .map((item) => `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.vegaTableDataSourceController.getRecordKey(item)}`);
+      const expandRowSlotList = [];
+      for (let i = 0; i < mutations.length; i++) {
+        const slotNodes = Array.from(mutations[i].addedNodes).filter((item) => item instanceof HTMLElement && item.getAttribute('slot'));
+        slotNodes.forEach((item) => {
+          item.removeAttribute('hidden'); // node doesn't have a slot home to go to, so will be hidden  https://github.com/ionic-team/stencil/blob/main/src/runtime/vdom/vdom-render.ts#L964
+          const slotName = item.getAttribute('slot');
+          if (expectSlotNames.includes(slotName)) {
+            expandRowSlotList.push(item);
+          }
+          else {
+            LogUtility.warn(`The vega-table expand row slot name '${slotName}' is not as expected, it must be like: vega-table-expand-row-[rowKey]`);
+          }
+        });
+      }
+      return expandRowSlotList.length > 0;
+    };
+  }
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.initRowExpandObserver();
+  }
+  /**
+   * Component lifecycle - disconnectedCallback
+   */
+  disconnectedCallback() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+    ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
+  }
+  /**
+   * Component lifecycle - componentDidLoad
+   */
+  componentDidLoad() {
+    this.initMutationObserver();
+  }
+  /**
+   * The callback to handle [watchRowExpandable]{@link VegaTable.watchRowExpandable}
+   */
+  watchRowExpandable() {
+    this.handleCloseAllExpandRow();
+  }
+  /**
+   * Initializes row expand observer
+   */
+  initRowExpandObserver() {
+    this.expandObserver = new Observer(this.isAcceptableTableRowObserver.bind({ host: this.host }), (payload) => {
+      if (payload.expanded) {
+        this.expandedRowKeySet.add(payload.rowKey);
+      }
+      else {
+        this.expandedRowKeySet.delete(payload.rowKey);
+      }
+    });
+    ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
+  }
+  /**
+   * The function checks if the input is an acceptable row observer.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  isAcceptableTableRowObserver(input) {
+    return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
+      this.host === findParent(input['host'], 'vega-table'));
+  }
+}
+VegaTableExpandRowController.expandRowSlotNamePrefix = 'vega-table-expand-row-';
+__decorate$C([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "host", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "expandedRowKeySet", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "rowExpandable", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaTableExpandRowController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$C([
+  MapToComponentMethod('connectedCallback')
+], VegaTableExpandRowController.prototype, "connectedCallback", null);
+__decorate$C([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableExpandRowController.prototype, "disconnectedCallback", null);
+__decorate$C([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableExpandRowController.prototype, "componentDidLoad", null);
+__decorate$C([
+  MapToComponentMethod('toggleExpandRow')
+], VegaTableExpandRowController.prototype, "toggleExpandRow", void 0);
+__decorate$C([
+  MapToComponentMethod('openExpandRow')
+], VegaTableExpandRowController.prototype, "openExpandRow", void 0);
+__decorate$C([
+  MapToComponentMethod('closeExpandRow')
+], VegaTableExpandRowController.prototype, "closeExpandRow", void 0);
+__decorate$C([
+  MapToComponentMethod('closeAllExpandRow')
+], VegaTableExpandRowController.prototype, "closeAllExpandRow", void 0);
+__decorate$C([
+  MapToComponentMethod('watchRowExpandable')
+], VegaTableExpandRowController.prototype, "watchRowExpandable", null);
+
+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;
+};
+/**
+ *
+ */
+class VegaTableRowSelectionController$1 extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The method for handling row selection change
+     *
+     * @param {boolean} checked - true: the row is selected, otherwise not selected
+     * @param {VegaTableDataSourceItem} record - The record of the changed row
+     */
+    this.handleRowSelect = (checked, record) => {
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      let isChanged = false;
+      if (checked) {
+        if (!this.selectedRowKeySet.has(rowKey)) {
+          this.selectedRowKeySet.add(rowKey);
+          isChanged = true;
+        }
+      }
+      else {
+        if (this.selectedRowKeySet.has(rowKey)) {
+          this.selectedRowKeySet.delete(rowKey);
+          isChanged = true;
+        }
+      }
+      if (isChanged) {
+        this.selectChangeEventEmitter.emit({
+          selected: checked,
+          record: record,
+          selectedRows: this.getSelectedRecords(),
+        });
+      }
+    };
+    /**
+     * Get the row selection type
+     *
+     * @returns {'multiple' | 'single'} Return the type of the row selection
+     */
+    this.getRowSelectionType = () => {
+      if (!this.rowSelection)
+        return;
+      return this.rowSelection.type || 'multiple';
+    };
+    /**
+     * The method for handing the single row selection
+     *
+     * @param {VegaTableDataSourceItem} record - The record of the single selected row
+     */
+    this.handleSingleRowSelect = (record) => {
+      const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+      if (this.isChecked(rowKey)) {
+        this.handleRowSelect(false, record);
+      }
+      else {
+        this.selectedRowKeySet.clear();
+        this.handleRowSelect(true, record);
+      }
+    };
+    /**
+     * Verify the row is checked or not for row selection
+     *
+     * @param {string} key - The row key of the row
+     * @returns {boolean} Return true if the row is selected, otherwise false
+     */
+    this.isChecked = (key) => {
+      return this.selectedRowKeySet.has(key);
+    };
+    /**
+     * The method to handling select all rows
+     *
+     * @param {boolean} checkedAll - true: all rows are selected; false: not selected all rows
+     */
+    this.handleSelectAll = (checkedAll) => {
+      if (checkedAll) {
+        const recordKeys = this.vegaTableDataSourceController.getAllRecordKeys();
+        this.selectedRowKeySet.add(...recordKeys.filter((key) => !this.selectedRowKeySet.has(key)));
+      }
+      else {
+        if (this.isCheckedAll()) {
+          this.selectedRowKeySet.clear();
+        }
+      }
+    };
+    /**
+     * Verify if all rows are selected
+     *
+     * @returns {boolean} return true if all rows are selected, otherwise false
+     */
+    this.isCheckedAll = () => {
+      return (this.selectedRowKeySet.size > 0 &&
+        this.vegaTableDataSourceController
+          .getCurrentData()
+          .every((record) => this.selectedRowKeySet.has(this.vegaTableDataSourceController.getRecordKey(record))));
+    };
+    /**
+     * Set up the row selection config
+     *
+     * @param {VegaTableRowSelectionConfig} config - The config of the row selection
+     */
+    this.setupRowSelection = (config) => {
+      this.rowSelection = Object.assign({ hideSelectAll: false, type: 'multiple' }, config);
+    };
+    /**
+     * Get the selected rows records array
+     *
+     * @returns {VegaTableDataSourceItem[]} The array of the all selected row's records
+     */
+    this.getSelectedRecords = () => {
+      return this.selectedRowKeySet
+        .toArray()
+        .map(this.vegaTableDataSourceController.getRecordByKey)
+        .filter(Boolean);
+    };
+    /**
+     * Sync up the selected row's key when current data changed
+     *
+     * @param {VegaTableDataSourceItem[]} currentData - The current data of the source
+     */
+    this.syncUpSelectedKeySetWithCurrentData = (currentData) => {
+      this.selectedRowKeySet.withMutation((set) => {
+        set.clear();
+        currentData.forEach((item) => {
+          const rowKey = this.vegaTableDataSourceController.getRecordKey(item);
+          if (this.selectedRowKeySet.has(rowKey)) {
+            set.add(rowKey);
+          }
+        });
+      });
+    };
+  }
+  /**
+   * Component lifecycle - connectedCallback
+   */
+  connectedCallback() {
+    this.initRowSelectionObserver();
+    this.initRowClickObserver();
+    this.initRowSelectionAllObserver();
+  }
+  /**
+   *
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+    ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+    ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    if (this.rowSelection) {
+      this.setupRowSelection(this.rowSelection);
+    }
+  }
+  /**
+   * The callback to handle [watchRowSelection]{@link VegaTable.watchRowSelection}
+   *
+   * @param {VegaTableRowSelectionConfig} newValue - The changed value of rowSelection
+   * @param {VegaTableRowSelectionConfig} oldValue - The value of rowSelection before changing
+   */
+  watchRowSelection(newValue, oldValue) {
+    if ((oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) !== (newValue === null || newValue === void 0 ? void 0 : newValue.type)) {
+      void this.clearSelection();
+    }
+  }
+  /**
+   * The callback to handle [setSelection]{@link VegaTable.setSelection}
+   *
+   * @param {string[]} keys - The keys array of which you want to select
+   */
+  setSelection(keys) {
+    if (this.getRowSelectionType() === 'single') {
+      keys.splice(1);
+    }
+    this.selectedRowKeySet.toArray().forEach((key) => {
+      ChangeManager.notify(TABLE_ROW_SELECTION, {
+        host: this.host,
+        rowKey: key,
+        checked: false,
+      });
+    });
+    this.selectedRowKeySet.clear();
+    keys.forEach((key) => {
+      if (this.vegaTableDataSourceController.getRecordByKey(key)) {
+        this.selectedRowKeySet.add(key);
+        ChangeManager.notify(TABLE_ROW_SELECTION, {
+          host: this.host,
+          rowKey: key,
+          checked: true,
+        });
+      }
+    });
+  }
+  /**
+   * The callback to handle [watchCurrentData]{@link VegaTable.watchCurrentData}
+   *
+   * @param {VegaTableDataSourceItem} currentData - The changed value of currentData
+   */
+  watchCurrentData(currentData) {
+    this.syncUpSelectedKeySetWithCurrentData(currentData);
+  }
+  /**
+   * The callback to handle [clearSelection]{@link VegaTable.clearSelection}
+   */
+  clearSelection() {
+    this.selectedRowKeySet.clear();
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: false,
+      noneChecked: this.selectedRowKeySet.size === 0,
+    });
+  }
+  /**
+   * The callback to handle [getSelection]{@link VegaTable.getSelection}
+   *
+   * @returns {string[]} The selected row keys array
+   */
+  getSelection() {
+    return this.selectedRowKeySet.toArray();
+  }
+  /**
+   *
+   */
+  watchSelectedRowKeySet() {
+    this.isSelectedAll = this.isCheckedAll();
+  }
+  /**
+   *
+   */
+  watchSelectedAll() {
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: this.isCheckedAll(),
+      noneChecked: this.selectedRowKeySet.size === 0,
+    });
+    this.selectAllChangeEventEmitter.emit({
+      selected: this.isCheckedAll(),
+      selectedRows: this.getSelectedRecords(),
+    });
+  }
+  /**
+   * The function checks if the input is an acceptable table row observer by verifying its host tag name and ensuring it is a child of a vega-table element.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean} boolean value indicating whether the input is of type T and satisfies certain conditions.
+   */
+  isAcceptableRowSelectionObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-TABLE') {
+      return this.host === input['host'];
+    }
+    if (input['host']['tagName'] === 'VEGA-TABLE-ROW') {
+      return this.host === findParent(input['host'], 'vega-table');
+    }
+  }
+  /**
+   * The function checks if the input is an acceptable observer for a table head row in a Vega table.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean}  boolean value.
+   */
+  isAcceptableRowSelectionAllObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-TABLE') {
+      return this.host === input['host'];
+    }
+    if (input['host']['tagName'] === 'VEGA-TABLE-HEAD-ROW') {
+      return this.host === findParent(input['host'], 'vega-table');
+    }
+  }
+  /**
+   * The function initializes a row selection observer.
+   */
+  initRowSelectionObserver() {
+    this.rowSelectionObserver = new Observer(this.isAcceptableRowSelectionObserver.bind(this), (payload) => {
+      const { rowKey, checked } = payload;
+      const record = this.vegaTableDataSourceController.getRecordByKey(rowKey);
+      this.handleRowSelect(checked, record);
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+  }
+  /**
+   * The function initializes an observer for row selection all in a table
+   */
+  initRowSelectionAllObserver() {
+    this.rowSelectionAllObserver = new Observer(this.isAcceptableRowSelectionAllObserver.bind(this), (payload) => {
+      this.handleSelectAll(payload.checked);
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+  /**
+   * The function initializes a row click observer that handles row selection in a table.
+   */
+  initRowClickObserver() {
+    this.rowClickObserver = new Observer(this.isAcceptableRowClickObserver.bind(this), (payload) => {
+      if (this.getRowSelectionType() === 'single') {
+        const record = this.vegaTableDataSourceController.getRecordByKey(payload.rowKey);
+        this.handleSingleRowSelect(record);
+      }
+    });
+    ChangeManager.register(TABLE_ROW_CLICK, this.rowClickObserver);
+  }
+  /**
+   * The function checks if the input is an acceptable row click observer.
+   *
+   * @param {unknown} input - The input parameter is of type unknown, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   */
+  isAcceptableRowClickObserver(input) {
+    return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
+      this.host === findParent(input['host'], 'vega-table'));
+  }
+}
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "host", void 0);
+__decorate$B([
+  MapToComponentField({ writable: true })
+], VegaTableRowSelectionController$1.prototype, "isSelectedAll", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "selectedRowKeySet", void 0);
+__decorate$B([
+  MapToComponentField({ writable: true })
+], VegaTableRowSelectionController$1.prototype, "rowSelection", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "rowKey", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "selectChangeEventEmitter", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "selectAllChangeEventEmitter", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaTableRowSelectionController$1.prototype, "vegaTableDataSourceController", void 0);
+__decorate$B([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowSelectionController$1.prototype, "connectedCallback", null);
+__decorate$B([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowSelectionController$1.prototype, "disconnectedCallback", null);
+__decorate$B([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRowSelectionController$1.prototype, "componentWillLoad", null);
+__decorate$B([
+  MapToComponentMethod('watchRowSelection')
+], VegaTableRowSelectionController$1.prototype, "watchRowSelection", null);
+__decorate$B([
+  MapToComponentMethod('setSelection')
+], VegaTableRowSelectionController$1.prototype, "setSelection", null);
+__decorate$B([
+  MapToComponentMethod('watchCurrentData')
+], VegaTableRowSelectionController$1.prototype, "watchCurrentData", null);
+__decorate$B([
+  MapToComponentMethod('clearSelection')
+], VegaTableRowSelectionController$1.prototype, "clearSelection", null);
+__decorate$B([
+  MapToComponentMethod('getSelection')
+], VegaTableRowSelectionController$1.prototype, "getSelection", null);
+__decorate$B([
+  MapToComponentMethod('watchSelectedRowKeySet')
+], VegaTableRowSelectionController$1.prototype, "watchSelectedRowKeySet", null);
+__decorate$B([
+  MapToComponentMethod('watchSelectedAll')
+], VegaTableRowSelectionController$1.prototype, "watchSelectedAll", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The dataSource controller for the vega-table
+ */
+class VegaTableDataSourceController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Get the key of the record
+     *
+     * @param {VegaTableDataSourceItem} record - The record of the dataSource
+     * @returns {string} The key of the record
+     */
+    this.getRecordKey = (record) => {
+      if (record[this.rowKey] !== undefined && record[this.rowKey] !== null) {
+        return String(record[this.rowKey]);
+      }
+      else {
+        return '';
+      }
+    };
+    /**
+     * Get the record from [currentData]{@link currentData} by key
+     *
+     * @param {string} key - The key of the record
+     * @returns {VegaTableDataSourceItem} The record of the [currentData]{@link currentData}
+     */
+    this.getRecordByKey = (key) => {
+      return this.currentData.find((record) => this.getRecordKey(record) === key);
+    };
+    /**
+     * Update the [currentData]{@link currentData} by new data source
+     *
+     * @param {VegaTableDataSourceItem[]} data - New data source
+     */
+    this.setCurrentData = (data) => {
+      if (this.tableDataValidation(data)) {
+        this.currentData = data;
+      }
+      else {
+        this.currentData = [];
+      }
+    };
+  }
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    this.vegaTableSortController.syncSortOrder();
+    this.syncCurrentData();
+  }
+  /**
+   * The callback of [watchSortersMap]{@link VegaTable.watchSortersMap}
+   */
+  watchSortersMap() {
+    this.syncCurrentData();
+  }
+  /**
+   * The callback of watchDataSource
+   */
+  watchDataSource() {
+    this.syncCurrentData();
+  }
+  /**
+   * Get currentData item keys
+   *
+   * @returns {string[]} The key array of currentData
+   */
+  getAllRecordKeys() {
+    return this.currentData.map(this.getRecordKey);
+  }
+  /**
+   * The getter of dataSource
+   *
+   * @returns {VegaTableDataSourceItem[]} The value of dataSource
+   */
+  getDataSource() {
+    return this.dataSource;
+  }
+  /**
+   * The setter of [dataSource]{@link dataSource}
+   *
+   * @param {VegaTableDataSourceItem[]} data - The new data source
+   */
+  setDataSource(data) {
+    this.dataSource = data;
+  }
+  /**
+   * The getter of [currentData]{@link currentData}
+   *
+   * @returns {VegaTableDataSourceItem[]} the value of currentData
+   */
+  getCurrentData() {
+    return this.currentData;
+  }
+  /**
+   * Check whether the currentData is empty
+   *
+   * @returns {boolean} return true if the currentData is empty
+   */
+  isCurrentDataEmpty() {
+    return this.currentData.length === 0;
+  }
+  /**
+   * Verify whether the data is valid
+   *
+   * @param {VegaTableDataSourceItem[]} data - The data source
+   * @returns {boolean} Return true if the data is valid, otherwise false
+   */
+  tableDataValidation(data) {
+    if (data.some((item) => !this.getRecordKey(item))) {
+      LogUtility.error('Each item in dataSource should have a unique "key" prop.', ' Otherwise, you should specify the primary key of dataSource item via rowKey.', ' For more details, please refer to: https://heartlandpayments.github.io/Vega/?path=/docs/components-table-v2--basic-table#rowkey');
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Update the currentData with sorted data if there is sorted status.
+   * Otherwise, update with the dataSource directly
+   */
+  syncCurrentData() {
+    if (this.isTemplateRenderMode) {
+      return;
+    }
+    const sortedColumns = this.sortersMap.size > 0
+      ? 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));
+    }
+    else {
+      this.setCurrentData(this.dataSource);
+    }
+  }
+}
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "rowKey", void 0);
+__decorate$A([
+  MapToComponentField({ writable: true })
+], VegaTableDataSourceController.prototype, "currentData", void 0);
+__decorate$A([
+  MapToComponentField({ writable: true })
+], VegaTableDataSourceController.prototype, "dataSource", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "columns", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "sortersMap", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "vegaTableSortController", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "vegaTableRenderer", void 0);
+__decorate$A([
+  MapToComponentField()
+], VegaTableDataSourceController.prototype, "isTemplateRenderMode", void 0);
+__decorate$A([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableDataSourceController.prototype, "componentWillLoad", null);
+__decorate$A([
+  MapToComponentMethod('watchSortersMap')
+], VegaTableDataSourceController.prototype, "watchSortersMap", null);
+__decorate$A([
+  MapToComponentMethod('watchDataSource')
+], VegaTableDataSourceController.prototype, "watchDataSource", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableBodyRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableBody = (editable) => {
+      return (h("vega-table-body", null, this.vegaTableDataSourceController
+        .getCurrentData()
+        .map((record, index) => {
+        const rowKey = this.vegaTableDataSourceController.getRecordKey(record);
+        const isVisibleInCurrentPage = this.vegaTablePaginationController.isRowVisible(index);
+        return (h(Fragment, null,
+          this.vegaTableRowRenderer.render({
+            rowKey,
+            index,
+            record,
+            isVisibleInCurrentPage,
+          }, editable),
+          this.rowExpandable && (h("vega-table-expand-row", { class: {
+              'v-hidden': !isVisibleInCurrentPage,
+            }, key: `vega-table-expanded-row-${rowKey}`, rowKey: rowKey, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined },
+            h("slot", { name: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${rowKey}` })))));
+      })));
+    };
+  }
+  getTableFormRef() {
+    return this.tableFormRef;
+  }
+  render() {
+    const editable = this.columns.some((item) => item.editable);
+    return editable ? (h("vega-form", { ref: (ref) => (this.tableFormRef = ref) }, this.renderTableBody(editable))) : (this.renderTableBody(false));
+  }
+}
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "striped", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "columns", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "currentBreakpoint", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowExpandable", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "rowClickable", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTablePaginationController", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableRowSelectionController", void 0);
+__decorate$z([
+  MapToComponentField()
+], VegaTableBodyRenderer.prototype, "vegaTableRowRenderer", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableHeaderRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderHeaderColumnCells = () => {
+      return this.columns.map((column) => {
+        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: column.sortOrder, breakpoint: column.breakpoint, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
+              const sortOrder = input.detail.sortOrder;
+              this.vegaTableSortController.handleHeadSortClick(column, sortOrder);
+            });
+          } }, column.label));
+      });
+    };
+  }
+  render() {
+    var _a;
+    return (this.showHeader && (h("vega-table-head", null,
+      h("vega-table-head-row", { hideSelectAll: (_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll }, this.renderHeaderColumnCells()))));
+  }
+}
+__decorate$y([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "columns", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "rowSelection", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableSortController", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "vegaTableDataSourceController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+class VegaTablePaginationRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.paginationRefCallback = (ref) => {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handlePaginationChange);
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPageSizeChange, this.handlePaginationPageSizeChange);
+    };
+    /**
+     * handle the pagination page change after observer the notify
+     *
+     * @param {NotifyObserverPayload<number>} input payload message, detail is the current page index
+     */
+    this.handlePaginationChange = (input) => {
+      var _a, _b;
+      this.vegaTablePaginationController.setCurrentPage(input.detail);
+      const event = new CustomEvent('vegaChange', { detail: input.detail });
+      (_b = (_a = this.pagination).vegaChange) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    };
+    /**
+     * handle the pagination page size change after observer the notify
+     *
+     * @param {NotifyObserverPayload<number>} input payload message, detail is the current page size
+     */
+    this.handlePaginationPageSizeChange = (input) => {
+      var _a, _b;
+      this.vegaTablePaginationController.setPageSize(input.detail);
+      const event = new CustomEvent('vegaPageSizeChange', {
+        detail: input.detail,
+      });
+      (_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 });
+    };
+  }
+  render() {
+    if (!this.pagination)
+      return;
+    const { pageSize, position, extensions, pageSizeSelectorOptions } = this.getPaginationConfig();
+    const paginationWrapperClasses = ['vega-table-pagination-container', position];
+    const total = this.vegaTableDataSourceController.getCurrentData().length;
+    return (total > 0 && (h("div", { class: arrayToClassString(paginationWrapperClasses) },
+      h("vega-pagination", { total: total, pageSize: pageSize, current: this.currentPage, extensions: extensions, pageSizeSelectorOptions: pageSizeSelectorOptions, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: this.paginationRefCallback }))));
+  }
+}
+__decorate$x([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "pagination", void 0);
+__decorate$x([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "pageSize", void 0);
+__decorate$x([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "currentPage", void 0);
+__decorate$x([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "vegaTablePaginationController", void 0);
+__decorate$x([
+  MapToComponentField()
+], VegaTablePaginationRenderer.prototype, "vegaTableDataSourceController", void 0);
+
+const VegaTableScrollableContainer = ({ scrollConfig = {}, ref }, children) => {
+  const { maxHeight } = scrollConfig;
+  const isVerticalScrollable = isNonNullable(maxHeight);
+  const handleVerticalScroll = (e) => {
+    if (!isVerticalScrollable)
+      return;
+    const target = e.target;
+    if (target.scrollTop === 0) {
+      target.classList.remove('scrolled');
+      return;
+    }
+    if (target.scrollTop > 0 && !target.classList.contains('scrolled')) {
+      target.classList.add('scrolled');
+    }
+  };
+  return (h("div", { class: "vega-table-scrollable-container", style: {
+      maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,
+    }, ref: ref, 
+    /* eslint-disable-next-line react/jsx-no-bind */
+    onScroll: handleVerticalScroll }, children));
+};
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableScrollContainerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.scrollContainerToTop = () => {
+      if (this.tableScrollContainerRef) {
+        this.tableScrollContainerRef.scrollTop = 0;
+      }
+    };
+  }
+  watchCurrentPage() {
+    this.scrollContainerToTop();
+  }
+  render(children) {
+    return (h(VegaTableScrollableContainer, { scrollConfig: this.scrollConfig, ref: (ref) => this.setTableScrollContainerRef(ref) }, children));
+  }
+  setTableScrollContainerRef(ref) {
+    this.tableScrollContainerRef = ref;
+  }
+}
+__decorate$w([
+  MapToComponentField()
+], VegaTableScrollContainerRenderer.prototype, "scrollConfig", void 0);
+__decorate$w([
+  MapToComponentMethod('watchCurrentPage')
+], VegaTableScrollContainerRenderer.prototype, "watchCurrentPage", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderInternalTable = () => {
+      const tableLayoutFixed = this.columns.some((column) => column.overflow) ||
+        Array.from(this.host.querySelectorAll('vega-table-cell')).some((cell) => cell.overflow);
+      return (h("table", { class: {
+          'v-table-fixed': tableLayoutFixed,
+        } },
+        this.columns.length > 0 && [
+          this.vegaTableColGroupRenderer.render(),
+          this.vegaTableHeaderRenderer.render(),
+        ],
+        this.dataSource.length > 0 && this.vegaTableBodyRenderer.render(),
+        this.isTemplateRenderMode && h("slot", null)));
+    };
+    this.renderEmpty = () => {
+      return (this.vegaTableDataSourceController.isCurrentDataEmpty() &&
+        this.emptyDescription && h("div", { class: "vega-table-empty-description" }, this.emptyDescription));
+    };
+  }
+  render() {
+    const hostClasses = arrayToClassString([
+      this.rowDivider && 'row-divider',
+      this.columnDivider && 'column-divider',
+      `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
+      this.striped && 'striped',
+    ]);
+    return sanitizeVegaComponent(h(Host, { class: hostClasses },
+      this.vegaTableScrollContainerRenderer.render(this.renderInternalTable()),
+      this.vegaTablePaginationRenderer.render(),
+      this.renderEmpty()), this.host);
+  }
+}
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "host", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columns", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "emptyDescription", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "rowDivider", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "columnDivider", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "density", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "dataSource", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "striped", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableHeaderRenderer", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableScrollContainerRenderer", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTablePaginationRenderer", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate$v([
+  MapToComponentField({ writable: true })
+], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);
+__decorate$v([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "isTemplateRenderMode", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The table pagination of VegaTable
+ */
+class VegaTablePaginationController extends VegaSlimmer {
+  /**
+   * Component lifecycle - componentWillLoad
+   */
+  componentWillLoad() {
+    var _a, _b;
+    this.currentPage = ((_a = this.pagination) === null || _a === void 0 ? void 0 : _a.current) || 1;
+    this.pageSize = ((_b = this.pagination) === null || _b === void 0 ? void 0 : _b.pageSize) || 10;
+  }
+  /**
+   *
+   */
+  watchPagination() {
+    if (this.pagination) {
+      const { pageSize, current } = this.pagination;
+      if (pageSize > 0) {
+        this.pageSize = pageSize;
+      }
+      if (current > 0) {
+        this.currentPage = current;
+      }
+    }
+  }
+  /**
+   * Set pageSize value
+   *
+   * @param {number} pageSize - New value for pageSize
+   */
+  setPageSize(pageSize) {
+    this.pageSize = pageSize;
+  }
+  /**
+   * Set currentPage value
+   *
+   * @param {number} currentPage - New value for currentPage
+   */
+  setCurrentPage(currentPage) {
+    this.currentPage = currentPage;
+  }
+  /**
+   * Whether the row is visible in current page
+   *
+   * @param {number} index - The record index of the currentData
+   * @returns {boolean} Return true if the row is visible
+   */
+  isRowVisible(index) {
+    if (!this.pagination)
+      return true;
+    const pageSize = this.pageSize;
+    const current = this.currentPage;
+    const start = (current - 1) * pageSize;
+    const end = current * pageSize;
+    return index >= start && index < end;
+  }
+}
+__decorate$u([
+  MapToComponentField()
+], VegaTablePaginationController.prototype, "pagination", void 0);
+__decorate$u([
+  MapToComponentField({ writable: true })
+], VegaTablePaginationController.prototype, "pageSize", void 0);
+__decorate$u([
+  MapToComponentField({ writable: true })
+], VegaTablePaginationController.prototype, "currentPage", void 0);
+__decorate$u([
+  MapToComponentMethod('componentWillLoad')
+], VegaTablePaginationController.prototype, "componentWillLoad", null);
+__decorate$u([
+  MapToComponentMethod('watchPagination')
+], VegaTablePaginationController.prototype, "watchPagination", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Edit table controller
+ */
+class VegaTableEditableController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.rowFormRefMap = new Map();
+  }
+  /**
+   * Get the map of the row form refs
+   *
+   * @returns {Map} The map of row form refs
+   */
+  getRowFormRefMap() {
+    return this.rowFormRefMap;
+  }
+  /**
+   * The callback to handle [saveAllEditRows]{@link VegaTable.saveAllEditRows}
+   */
+  async saveAllEditRows() {
+    const currentData = this.vegaTableDataSourceController
+      .getCurrentData()
+      .slice();
+    for (const rowKey of this.editingRows.toArray()) {
+      const rowData = await this.getRowData(rowKey);
+      const index = currentData.findIndex((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+      if (index > -1) {
+        currentData.splice(index, 1, rowData);
+      }
+    }
+    this.vegaTableDataSourceController.setDataSource([...currentData]);
+    void this.stopAllRowEditMode();
+  }
+  /**
+   * The callback to handle [stopAllRowEditMode]{@link VegaTable.stopAllRowEditMode}
+   */
+  stopAllRowEditMode() {
+    this.editingRows.clear();
+  }
+  /**
+   * Stop the removed editing row when the data source changed
+   *
+   * @param {VegaTableDataSourceItem[]} newValue - The new data source
+   */
+  watchDataSource(newValue) {
+    this.getEditingRowsKey().forEach((rowKey) => {
+      if (!newValue.find((item) => item.key === rowKey)) {
+        this.stopRowEditMode(rowKey);
+      }
+    });
+  }
+  /**
+   * The callback to handle [saveEditRow]{@link VegaTable.saveEditRow}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  async saveEditRow(rowKey) {
+    const rowData = await this.getRowData(rowKey);
+    const currentData = this.vegaTableDataSourceController
+      .getCurrentData()
+      .slice();
+    const index = currentData.findIndex((item) => this.vegaTableDataSourceController.getRecordKey(item) === rowKey);
+    if (index > -1) {
+      currentData.splice(index, 1, rowData);
+      this.vegaTableDataSourceController.setDataSource([...currentData]);
+    }
+    void this.stopRowEditMode(rowKey);
+  }
+  /**
+   * The callback to handle [stopRowEditMode]{@link VegaTable.stopRowEditMode}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  stopRowEditMode(rowKey) {
+    this.editingRows.delete(rowKey);
+  }
+  /**
+   * The callback to handle [removeRow]{@link VegaTable.removeRow}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  removeRow(rowKey) {
+    this.vegaTableDataSourceController.setDataSource(this.vegaTableDataSourceController
+      .getCurrentData()
+      .filter((item) => this.vegaTableDataSourceController.getRecordKey(item) !== rowKey));
+  }
+  /**
+   * The callback to handle [startRowEditMode]{@link VegaTable.startRowEditMode}
+   *
+   * @param {string} rowKey - The key of the row's record
+   */
+  startRowEditMode(rowKey) {
+    this.editingRows.add(rowKey);
+  }
+  /**
+   * The callback to handle [addNewRow]{@link VegaTable.addNewRow}
+   *
+   * @param {VegaTableDataSourceItem} record - The record for adding
+   * @returns {string} The rowKey of the new added row record
+   */
+  addNewRow(record = {}) {
+    var _a;
+    const rowKey = ((_a = record[this.rowKey]) === null || _a === void 0 ? void 0 : _a.toString()) || generateUUID();
+    const newRowItem = Object.assign({}, record);
+    newRowItem[this.rowKey] = rowKey;
+    this.vegaTableDataSourceController.setCurrentData([
+      ...this.vegaTableDataSourceController.getCurrentData(),
+      newRowItem,
+    ]);
+    this.editingRows.add(rowKey);
+    return rowKey;
+  }
+  /**
+   * The callback to handle [getRowsData]{@link VegaTable.getRowsData}
+   */
+  async getRowsData() {
+    const formValues = await this.vegaTableBodyRenderer
+      .getTableFormRef()
+      .getValue();
+    return [
+      ...this.vegaTableDataSourceController.getCurrentData().map((record) => {
+        const value = formValues[`${VegaTableEditableController.rowFormKeyPrefix}${this.vegaTableDataSourceController.getRecordKey(record)}`];
+        return Object.assign(Object.assign({}, record), value);
+      }),
+    ];
+  }
+  /**
+   * The callback to handle [getEditingRowsKey]{@link VegaTable.getEditingRowsKey}
+   *
+   * @returns {string[]} The key of the rows which is editing
+   */
+  getEditingRowsKey() {
+    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
+   */
+  getFormRef(rowKey) {
+    return rowKey ? this.rowFormRefMap.get(rowKey) : this.vegaTableBodyRenderer.getTableFormRef();
+  }
+  /**
+   * The callback to handle [getRowData]{@link VegaTable.getRowData}
+   *
+   * @param {string} rowKey - The key of the row's record
+   * @returns {Promise<VegaTableDataSourceItem>} The promise of the row data
+   */
+  async getRowData(rowKey) {
+    const formValue = await this.rowFormRefMap.get(rowKey).getValue();
+    return Object.assign(Object.assign({}, this.vegaTableDataSourceController.getRecordByKey(rowKey)), formValue);
+  }
+  /**
+   * Whether the row is in editing status
+   *
+   * @param {string} rowKey - The key of the row's record
+   * @returns {boolean} return true if the row is in editing status, otherwise false
+   */
+  isEditing(rowKey) {
+    return this.editingRows.has(rowKey);
+  }
+}
+VegaTableEditableController.rowFormKeyPrefix = 'vega-table-row-form-';
+__decorate$t([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "editingRows", void 0);
+__decorate$t([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "rowKey", void 0);
+__decorate$t([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$t([
+  MapToComponentField()
+], VegaTableEditableController.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$t([
+  MapToComponentMethod('saveAllEditRows')
+], VegaTableEditableController.prototype, "saveAllEditRows", null);
+__decorate$t([
+  MapToComponentMethod('stopAllRowEditMode')
+], VegaTableEditableController.prototype, "stopAllRowEditMode", null);
+__decorate$t([
+  MapToComponentMethod('watchDataSource')
+], VegaTableEditableController.prototype, "watchDataSource", null);
+__decorate$t([
+  MapToComponentMethod('saveEditRow')
+], VegaTableEditableController.prototype, "saveEditRow", null);
+__decorate$t([
+  MapToComponentMethod('stopRowEditMode')
+], VegaTableEditableController.prototype, "stopRowEditMode", null);
+__decorate$t([
+  MapToComponentMethod('removeRow')
+], VegaTableEditableController.prototype, "removeRow", null);
+__decorate$t([
+  MapToComponentMethod('startRowEditMode')
+], VegaTableEditableController.prototype, "startRowEditMode", null);
+__decorate$t([
+  MapToComponentMethod('addNewRow')
+], VegaTableEditableController.prototype, "addNewRow", null);
+__decorate$t([
+  MapToComponentMethod('getRowsData')
+], VegaTableEditableController.prototype, "getRowsData", null);
+__decorate$t([
+  MapToComponentMethod('getEditingRowsKey')
+], VegaTableEditableController.prototype, "getEditingRowsKey", null);
+__decorate$t([
+  MapToComponentMethod('getFormRef')
+], VegaTableEditableController.prototype, "getFormRef", null);
+__decorate$t([
+  MapToComponentMethod('getRowData')
+], VegaTableEditableController.prototype, "getRowData", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The sort controller for the vega-table
+ */
+class VegaTableSortController extends 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}
+   */
+  watchColumns() {
+    this.syncSortOrder();
+  }
+  /**
+   * The method for header cell sort click
+   *
+   * @param {VegaTableColumnConfig} column - The column for sorting
+   * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
+   */
+  handleHeadSortClick(column, nextSortOrder) {
+    if (this.sortersMap.has(column.prop)) {
+      this.sortersMap.delete(column.prop);
+    }
+    if (nextSortOrder) {
+      this.sortersMap.set(column.prop, { order: nextSortOrder, prop: column.prop });
+    }
+    if (column.sorter !== 'event') {
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), column.prop, nextSortOrder));
+    }
+    this.changeEventEmitter.emit({ sorters: [...this.sortersMap.values()] });
+  }
+  /**
+   * Sync the default sort order from the columns
+   */
+  syncSortOrder() {
+    this.columns
+      .filter((column) => isNonNullable(column.sorter) && isNonNullable(column.sortOrder))
+      .forEach((item) => {
+      this.sortersMap.set(item.prop, { order: item.sortOrder, prop: item.prop });
+    });
+  }
+}
+__decorate$s([
+  MapToComponentField({ writable: true })
+], VegaTableSortController.prototype, "sortersMap", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaTableSortController.prototype, "columns", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaTableSortController.prototype, "changeEventEmitter", void 0);
+__decorate$s([
+  MapToComponentField()
+], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$s([
+  MapToComponentMethod('watchColumns')
+], VegaTableSortController.prototype, "watchColumns", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableColGroupRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.getColResponsiveClass = (column) => {
+      return column.breakpoint && isBreakpointsTokenType(column.breakpoint)
+        ? `v-hidden ${column.breakpoint}:v-table-column`
+        : '';
+    };
+  }
+  render() {
+    return (h("colgroup", null,
+      h("col", { style: { minWidth: this.paddingX[0], width: this.paddingX[0] } }),
+      this.vegaTableRowSelectionController.getRowSelectionType() === 'multiple' && (h("col", { style: { minWidth: '40px', width: '40px' } })),
+      this.columns.map((column) => {
+        const responsiveClass = this.getColResponsiveClass(column);
+        return (h("col", { class: responsiveClass, style: { width: column.width ? column.width : null } }));
+      }),
+      this.rowExpandable && h("col", { style: { minWidth: '40px', width: '40px' } }),
+      h("col", { style: { minWidth: this.paddingX[1], width: this.paddingX[1] } })));
+  }
+}
+__decorate$r([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "paddingX", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "columns", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "rowExpandable", void 0);
+__decorate$r([
+  MapToComponentField()
+], VegaTableColGroupRenderer.prototype, "vegaTableRowSelectionController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The controller for the table children components.
+ */
+class VegaTableChildrenController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.currentDataObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW'),
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-not-render-empty-message-when-async-render-table-rows}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.syncUpTableCurrentData();
+        this.syncUpTableHeadRowProps();
+      },
+    });
+    this.rowStripedObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW', 'VEGA-TABLE-EXPAND-ROW'),
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:should-render-striped-row-when-async-render-table-rows}
+       * @see{module:should-render-striped-row-and-expanded-row-when-async-render-table-rows}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.syncRowStriped();
+      },
+    });
+    /**
+     * Syncs up the properties of vega-table-row
+     */
+    this.syncUpTableCurrentData = () => {
+      if (!this.isTemplateRenderMode)
+        return;
+      const currentData = Array.from(this.host.querySelectorAll('vega-table-row')).map((row) => {
+        return { key: row.rowKey };
+      });
+      this.vegaTableDataSourceController.setCurrentData(currentData);
+    };
+    /**
+     * Sync up the properties of vega-table-expand-row
+     */
+    this.syncRowStriped = () => {
+      this.host
+        .querySelectorAll('vega-table-row')
+        .forEach((row, index) => {
+        this.updateRowStriped(row, index);
+      });
+      this.host
+        .querySelectorAll('vega-table-expand-row')
+        .forEach((row, index) => {
+        this.updateRowStriped(row, index);
+      });
+    };
+    /**
+     * Syncs up the properties of vega-table-head-row
+     */
+    this.syncUpTableHeadRowProps = () => {
+      var _a;
+      if (!this.isTemplateRenderMode)
+        return;
+      const headRow = this.host.querySelector('vega-table-head-row');
+      if (headRow) {
+        headRow.hideSelectAll = headRow.hideSelectAll || ((_a = this.rowSelection) === null || _a === void 0 ? void 0 : _a.hideSelectAll);
+      }
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see module:should-render-striped-row-as-expected-when-component-re-attached
+   */
+  /**
+   * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
+   */
+  connectedCallback() {
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see module:should-render-striped-row-as-expected-when-component-re-attached
+   */
+  /**
+   * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
+   */
+  disconnectedCallback() {
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaTable.componentWillLoad}
+   */
+  componentWillLoad() {
+    this.syncUpTableCurrentData();
+    this.syncUpTableHeadRowProps();
+    this.syncRowStriped();
+  }
+  /**
+   * Used by rowStripedObserver{@link rowStripedObserver} and currentDataObserver{@link currentDataObserver}
+   */
+  componentDidLoad() {
+  }
+  /**
+   * The callback to handle [clearSelection]{@link VegaTable.clearSelection}
+   */
+  clearSelection() {
+    ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+      host: this.host,
+      checked: false,
+      noneChecked: true,
+    });
+  }
+  /**
+   * {@link VegaTable.watchStriped}
+   */
+  watchStriped() {
+    this.syncRowStriped();
+  }
+  /**
+   * Update the row striped attr
+   *
+   * @param {HTMLElement} row - row or expand row element
+   * @param {number} index - index of the row
+   */
+  updateRowStriped(row, index) {
+    if (this.striped && index % 2 === 1) {
+      row.dataset['striped'] = 'striped';
+    }
+    else {
+      delete row.dataset['striped'];
+    }
+  }
+}
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "host", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "columns", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "dataSource", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "currentData", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "rowSelection", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "striped", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "vegaTableDataSourceController", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "vegaTableRenderer", void 0);
+__decorate$q([
+  MapToComponentField()
+], VegaTableChildrenController.prototype, "isTemplateRenderMode", void 0);
+__decorate$q([
+  InjectVegaSlimmer()
+], VegaTableChildrenController.prototype, "currentDataObserver", void 0);
+__decorate$q([
+  InjectVegaSlimmer()
+], VegaTableChildrenController.prototype, "rowStripedObserver", void 0);
+__decorate$q([
+  MapToComponentMethod('connectedCallback')
+], VegaTableChildrenController.prototype, "connectedCallback", null);
+__decorate$q([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableChildrenController.prototype, "disconnectedCallback", null);
+__decorate$q([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableChildrenController.prototype, "componentWillLoad", null);
+__decorate$q([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableChildrenController.prototype, "componentDidLoad", null);
+__decorate$q([
+  MapToComponentMethod('clearSelection')
+], VegaTableChildrenController.prototype, "clearSelection", null);
+__decorate$q([
+  MapToComponentMethod('watchStriped')
+], VegaTableChildrenController.prototype, "watchStriped", null);
+
+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);
+  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 VegaTableRowRenderer$1 extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderTableRowComponent = (rowProps) => {
+      const { rowKey, index, record, isVisibleInCurrentPage } = rowProps;
+      return (h("vega-table-row", { class: {
+          'v-hidden': !isVisibleInCurrentPage,
+        }, key: `vega-table-row-${rowKey}`, rowKey: rowKey, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.rowClickEventEmitter.emit({ record: record, index: index });
+          });
+        }, "data-striped": this.striped && index % 2 === 1 ? 'striped' : undefined }, this.columns.map((column) => {
+        return this.vegaTableCellRenderer.render(column, record, index);
+      })));
+    };
+  }
+  render(rowProps, editable) {
+    const { rowKey } = rowProps;
+    return editable ? (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([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "columns", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "rowClickEventEmitter", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "vegaTableEditableController", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "vegaTableCellRenderer", void 0);
+__decorate$p([
+  MapToComponentField()
+], VegaTableRowRenderer$1.prototype, "striped", void 0);
+
+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);
+  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;
+};
+/**
+ * The render mode controller of the table
+ */
+class VegaTableRenderModeController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.currentDataObserver = new MutationObserverSlimmer({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: () => this.host,
+      options: { childList: true, subtree: true },
+      mutationFilter: TagNameMutationFilter('VEGA-TABLE-ROW'),
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.isTemplateRenderMode = this.checkIsTemplateRenderMode(this.host);
+      },
+    });
+    /**
+     * Check whether render mode is template render
+     *
+     * @param {HTMLElement} tableRef - VegaTable ref
+     * @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);
+    };
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  connectedCallback() {
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  disconnectedCallback() {
+  }
+  /**
+   * init the isTemplateRenderMode value
+   */
+  componentWillLoad() {
+    this.isTemplateRenderMode = this.checkIsTemplateRenderMode(this.host);
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  componentDidLoad() {
+  }
+}
+__decorate$o([
+  MapToComponentField()
+], VegaTableRenderModeController.prototype, "host", void 0);
+__decorate$o([
+  MapToComponentField({ writable: true })
+], VegaTableRenderModeController.prototype, "isTemplateRenderMode", void 0);
+__decorate$o([
+  InjectVegaSlimmer()
+], VegaTableRenderModeController.prototype, "currentDataObserver", void 0);
+__decorate$o([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRenderModeController.prototype, "connectedCallback", null);
+__decorate$o([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRenderModeController.prototype, "disconnectedCallback", null);
+__decorate$o([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRenderModeController.prototype, "componentWillLoad", null);
+__decorate$o([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableRenderModeController.prototype, "componentDidLoad", null);
+
+const VegaTableRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'DATA_SOURCE_IS_EMPTY',
+    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'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length === 0,
+  },
+  {
+    payloadKey: 'DATA_SOURCE_IS_NOT_EMPTY',
+    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'.
+     * If it is, the function will return `true`.
+     *
+     * @param {HTMLElement} host - The element to check
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (host) => host.dataSource.length > 0,
+  },
+];
+
+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 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;
+};
+const VegaTable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaRowClick = createEvent(this, "vegaRowClick", 7);
+    this.rowClick = createEvent(this, "rowClick", 7);
+    this.vegaSelectChange = createEvent(this, "vegaSelectChange", 7);
+    this.selectChange = createEvent(this, "selectChange", 7);
+    this.vegaSelectAllChange = createEvent(this, "vegaSelectAllChange", 7);
+    this.selectAllChange = createEvent(this, "selectAllChange", 7);
+    this.globalSlimmers = {};
+    this.vegaTableRenderModeController = new VegaTableRenderModeController();
+    this.vegaTableRenderer = new VegaTableRenderer();
+    this.vegaTableHeaderRenderer = new VegaTableHeaderRenderer();
+    this.vegaTableBodyRenderer = new VegaTableBodyRenderer();
+    this.vegaTableRowRenderer = new VegaTableRowRenderer$1();
+    this.vegaTableCellRenderer = new VegaTableCellRenderer();
+    this.vegaTablePaginationRenderer = new VegaTablePaginationRenderer();
+    this.vegaTableScrollContainerRenderer = new VegaTableScrollContainerRenderer();
+    this.vegaTableExpandRowController = new VegaTableExpandRowController();
+    this.vegaTableRowSelectionController = new VegaTableRowSelectionController$1();
+    this.vegaTableDataSourceController = new VegaTableDataSourceController();
+    this.vegaTablePaginationController = new VegaTablePaginationController();
+    this.vegaTableEditableController = new VegaTableEditableController();
+    this.vegaTableSortController = new VegaTableSortController();
+    this.vegaTableColGroupRenderer = new VegaTableColGroupRenderer();
+    this.vegaTableChildrenController = new VegaTableChildrenController();
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:should-render-responsive-columns-with-expandable-row-and-current-breakpoint-is-smaller-than-S}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.rowSelectionNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowSelection', 'watchRowSelection');
+    this.rowExpandableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowExpandable', 'watchRowExpandable');
+    this.paddingXNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'paddingX', 'watchPaddingX');
+    this.rowClickableNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowClickable', 'watchRowClickable');
+    this.scrollConfigNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'scrollConfig', 'watchScrollConfig');
+    this.paginationEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaPageSizeChange], () => this.host);
+    this.changeEventEmitter = createEventEmitSlimmer(VegaTable, VegaChange);
+    this.selectChangeEventEmitter = createEventEmitSlimmer(VegaTable, VegaSelectChange);
+    this.selectAllChangeEventEmitter = createEventEmitSlimmer(VegaTable, VegaSelectAllChange);
+    this.rowClickEventEmitter = createEventEmitSlimmer(VegaTable, VegaRowClick);
+    this.rowDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'rowDivider', 'watchRowDivider');
+    this.columnDividerNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'columnDivider', 'watchColumnDivider');
+    this.densityNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'density', 'watchDensity');
+    this.isTemplateRenderModeNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'isTemplateRenderMode', 'watchTemplateRenderMode');
+    this.currentDataNotifySlimmer = createSubStateNotifySlimmer(VegaTable, 'currentData', 'watchCurrentData');
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaTableRuntimeMetricsPayloadDefinition);
+    this.selectedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
+      this.selectedRowKeySet = newSet;
+    });
+    this.expandedRowKeySet = new ImmutableSet(new Set(), (newSet) => {
+      this.expandedRowKeySet = newSet;
+    });
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /** Current running sorters */
+    this.sortersMap = new ImmutableMap(new Map(), (newMap) => {
+      this.sortersMap = newMap;
+    });
+    /** The data for vega-table to render */
+    this.currentData = [];
+    /** Current page number of the table pagination */
+    this.currentPage = 1;
+    /**
+     * The page size of the table pagination
+     */
+    this.pageSize = 10;
+    this.editingRows = new ImmutableSet(new Set(), (newSet) => {
+      this.editingRows = newSet;
+    });
+    this.isSelectedAll = false;
+    /**
+     * Defines the columns of the table.
+     */
+    this.columns = [];
+    /**
+     * Contains the data records to be rendered and
+     *    displayed within the table.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.dataSource = [];
+    /**
+     * Defines the behavior and options related to
+     *    row selection in the table.
+     *
+     * It allows users to select one or more rows in
+     *    the table for further actions or processing.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.rowSelection = null;
+    /**
+     * Specifies whether rows in the table can be expanded
+     *    to show additional content or details.
+     */
+    /**
+     * Indicates whether the row is expandable.
+     */
+    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.
+     */
+    this.rowClickable = false;
+    /**
+     * Specifies whether dividers should be displayed
+     *    between rows in the table.
+     */
+    this.rowDivider = false;
+    /**
+     * Specifies whether dividers should be displayed
+     *    between columns in the table.
+     */
+    this.columnDivider = false;
+    /**
+     * Specifies whether alternate colors should be applied
+     *    to the rows of the table.
+     */
+    this.striped = true;
+    /**
+     * Specifies the negative space within the table's cells.
+     */
+    this.density = 'default';
+    /**
+     * Controls the amount of horizontal padding applied to the table.
+     */
+    this.paddingX = ['8px', '8px'];
+    /**
+     * Specifies whether the table header should be displayed.
+     */
+    this.showHeader = true;
+    /**
+     * Specifies the pagination configuration.
+     */
+    this.pagination = null;
+    /**
+     * Provides a customized message or description that is
+     *    shown when the table's data source is empty.
+     */
+    this.emptyDescription = 'There is no data to display';
+    /**
+     * Defines a unique key for each row in the table.
+     */
+    this.rowKey = 'key';
+  }
+  watchSelectedRowKeySet() {
+  }
+  watchSortersMap() {
+  }
+  watchCurrentData(newValue, oldValue) {
+  }
+  watchCurrentPage() {
+  }
+  watchSelectedAll() {
+  }
+  watchTemplateRenderMode() {
+  }
+  watchColumns() {
+  }
+  watchDataSource() {
+  }
+  watchRowSelection() {
+  }
+  watchRowExpandable() {
+  }
+  watchRowClickable() {
+  }
+  watchRowDivider() {
+  }
+  watchColumnDivider() {
+  }
+  watchStriped() {
+  }
+  watchDensity() {
+  }
+  watchPaddingX() {
+  }
+  watchPagination() {
+  }
+  watchScrollConfig() {
+  }
+  /**
+   * Invoke this method to expand the row with the specified `rowKey`,
+   *    revealing additional content.
+   *
+   * @param rowKey
+   */
+  async openExpandRow(rowKey) {
+  }
+  /**
+   * Invoke this method to close the expanded row with the specified `rowKey`.
+   *
+   * @param rowKey
+   */
+  async closeExpandRow(rowKey) {
+  }
+  /**
+   * Invoke this method to close all expanded rows.
+   */
+  async closeAllExpandRow() {
+  }
+  /**
+   * Invoke this method to toggle the expandable row with the
+   *    specified `rowKey`, expanding it if it is currently
+   *    collapsed and collapsing it if it is currently expanded.
+   *
+   * @param rowKey
+   */
+  async toggleExpandRow(rowKey) {
+  }
+  /**
+   * Invoke this method to clear the selected row keys,
+   *    removing any current selection.
+   */
+  async clearSelection() {
+  }
+  /**
+   * Invoke this method to retrieve the selected row keys,
+   *    provided an array or list of the keys representing
+   *    the currently selected rows.
+   */
+  async getSelection() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to set the selected row keys,
+   *    specifying an array or list of keys to represent
+   *    the desired selected rows.
+   *
+   * @param {string[]} keys - Row keys to be set as selected.
+   */
+  async setSelection(keys) {
+  }
+  /**
+   * Invoke this method to start the edit mode for the row
+   *    with the specified `rowKey`.
+   */
+  async startRowEditMode(rowKey) {
+  }
+  /**
+   * Invoke this method to stop the edit mode for the row
+   *    with the specified `rowKey`.
+   */
+  async stopRowEditMode(rowKey) {
+  }
+  /**
+   * Invoke this method to stop the edit mode for all rows,
+   *    exiting the edit mode for each row currently
+   *    in the editing state.
+   */
+  async stopAllRowEditMode() {
+  }
+  /**
+   * Invoke this method to retrieve the data of the row with
+   *    the specified `rowKey`, obtaining the complete set of
+   *    information associated with that row.
+   *
+   * @param rowKey The row's unique key.
+   */
+  async getRowData(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to retrieve all rows of data,
+   *    obtaining the complete set of information
+   *    associated with each row.
+   */
+  async getRowsData() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to retrieve the table row reference
+   *    based on the provided `rowKey`.
+   *
+   * If the `rowKey` is empty, this method will return the
+   *    reference to the table form.
+   *
+   * @param optional rowKey
+   */
+  async getFormRef(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * Invoke this method to add a new row to the editable table.
+   *
+   * @param record the default record of the new row
+   * @returns {Promise<string>} the rowKey of the new row
+   */
+  async addNewRow(record = {}) {
+    return methodPlaceholder(record);
+  }
+  /**
+   * Invoke this method to save the edited row data to
+   *    the `currentData` and stop the edit mode
+   *    for that row.
+   *
+   * This action will not affect the editing mode of other rows.
+   */
+  async saveEditRow(rowKey) {
+    return methodPlaceholder(rowKey);
+  }
+  /**
+   * 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.
+   */
+  async saveAllEditRows() {
+  }
+  /**
+   * Invoke this method to obtain the keys of the rows currently
+   *    in the editing mode in the table.
+   */
+  async getEditingRowsKey() {
+    return methodPlaceholder();
+  }
+  /**
+   * Invoke this method to remove a row from the `currentData`
+   *    based on the specified `rowKey` in the table.
+   *
+   * @param rowKey The rowKey of the row to remove.
+   */
+  async removeRow(rowKey) {
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return this.vegaTableRenderer.render();
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "selectedRowKeySet": ["watchSelectedRowKeySet"],
+    "sortersMap": ["watchSortersMap"],
+    "currentData": ["watchCurrentData"],
+    "currentPage": ["watchCurrentPage"],
+    "isSelectedAll": ["watchSelectedAll"],
+    "isTemplateRenderMode": ["watchTemplateRenderMode"],
+    "columns": ["watchColumns"],
+    "dataSource": ["watchDataSource"],
+    "rowSelection": ["watchRowSelection"],
+    "rowExpandable": ["watchRowExpandable"],
+    "rowClickable": ["watchRowClickable"],
+    "rowDivider": ["watchRowDivider"],
+    "columnDivider": ["watchColumnDivider"],
+    "striped": ["watchStriped"],
+    "density": ["watchDensity"],
+    "paddingX": ["watchPaddingX"],
+    "pagination": ["watchPagination"],
+    "scrollConfig": ["watchScrollConfig"]
+  }; }
+};
+__decorate$n([
+  InjectVegaGlobalSlimmer()
+], VegaTable.prototype, "globalSlimmers", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderModeController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableHeaderRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableBodyRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableCellRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePaginationRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableScrollContainerRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableExpandRowController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableRowSelectionController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableDataSourceController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTablePaginationController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableEditableController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableSortController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableColGroupRenderer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaTableChildrenController", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowSelectionNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowExpandableNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "paddingXNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickableNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "scrollConfigNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "paginationEventPrevent", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "changeEventEmitter", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "selectChangeEventEmitter", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "selectAllChangeEventEmitter", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowClickEventEmitter", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "rowDividerNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "columnDividerNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "densityNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "isTemplateRenderModeNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "currentDataNotifySlimmer", void 0);
+__decorate$n([
+  InjectVegaSlimmer()
+], VegaTable.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTable.style = vegaTableCss;
+
+const vegaTableBodyCss = ":host{display:contents}";
+
+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);
+  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;
+};
+const VegaTableBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.childChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.host);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, h("tbody", null, h("slot", null))), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$m([
+  InjectVegaGlobalSlimmer()
+], VegaTableBody.prototype, "globalSlimmers", void 0);
+__decorate$m([
+  InjectVegaSlimmer()
+], VegaTableBody.prototype, "childChangeEventPrevent", void 0);
+__decorate$m([
+  InjectVegaSlimmer()
+], VegaTableBody.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableBody.style = vegaTableBodyCss;
+
+/**
+ * Input a breakpoint, return the responsive style classes of the breakpoint
+ *
+ * @param {BreakpointsTokenType} breakpoint - The breakpoint as an input
+ * @param {string} className - The input class that will be formatted to responsive classes
+ * @returns {string} The style classes for the breakpoint
+ */
+const generateResponsiveClass = (breakpoint, className) => {
+  return breakpoint && isBreakpointsTokenType(breakpoint) ? `v-hidden ${breakpoint}:${className}` : '';
+};
+/**
+ * Input an align, return the style class of the alignment
+ *
+ * @param {ColumnAlignType} align - The align type
+ * @returns {string} The alignment style classes
+ */
+const generateTextAlignClass = (align) => {
+  let alignClass;
+  switch (align) {
+    case 'center':
+      alignClass = 'v-text-center';
+      break;
+    case 'left':
+      alignClass = 'v-text-left';
+      break;
+    case 'right':
+      alignClass = 'v-text-right';
+      break;
+    default:
+      alignClass = '';
+  }
+  return alignClass;
+};
+/**
+ * The function `generateColSpan` calculates the column span based on the length of columns and whether multiple selection is enabled.
+ *
+ * @param {number} columnLength - The number of columns in a table or grid.
+ * @param {boolean} withMultipleSelection - A boolean value indicating whether the table has a column for multiple selection.
+ * @returns {number} the value of `columnLength` plus 2 if `withMultipleSelection` is true, or plus 1 if `withMultipleSelection` is false.
+ */
+const generateColSpan = (columnLength, withMultipleSelection) => {
+  return columnLength + (withMultipleSelection ? 2 : 1);
+};
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the table row states
+ */
+class VegaTableCellStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
+      ],
+    });
+  }
+}
+__decorate$l([
+  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 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;
+};
+const VegaTableCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaTableCellStateController = new VegaTableCellStateController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    this.getCellOverflowClass = () => {
+      switch (this.overflow) {
+        case 'ellipsis':
+          return 'vega-table-cell-ellipsis';
+        case 'scroll':
+          return 'vega-table-cell-scroll';
+      }
+    };
+  }
+  render() {
+    const responsiveClass = generateResponsiveClass(this.breakpoint, 'v-table-cell');
+    const columnAlignClass = generateTextAlignClass(this.textAlign);
+    const overflowClass = this.getCellOverflowClass();
+    const columnClasses = [columnAlignClass, 'vega-table-cell'];
+    if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
+      columnClasses.push('break-word');
+    }
+    return sanitizeVegaComponent(h(Host, { class: arrayToClassString([
+        `density-${ResponsiveFormatFacade.formatCustom(this.density)}`,
+        responsiveClass,
+      ]), style: { width: this.width } }, h("td", { class: arrayToClassString(columnClasses), part: "cell" }, h("div", { class: overflowClass }, h("slot", null)))), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$k([
+  InjectVegaGlobalSlimmer()
+], VegaTableCell.prototype, "globalSlimmers", void 0);
+__decorate$k([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaTableCellStateController", void 0);
+__decorate$k([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$k([
+  InjectVegaSlimmer()
+], VegaTableCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableCell.style = vegaTableCellCss;
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaTableExpandRowRenderer extends VegaSlimmer {
+  render() {
+    return (h("tr", { class: {
+        'vega-table-expanded-row': true,
+        'expanded': this.expanded,
+        'checked': this.checked,
+      }, key: `vega-table-expanded-row-${this.rowKey}`, "data-expanded-row-key": this.rowKey },
+      h("td", null),
+      h("td", { colSpan: this.colSpan, key: `${VegaTableExpandRowController.expandRowSlotNamePrefix}${this.rowKey}`, class: "vega-table-expanded-row-slot-container" },
+        h("slot", null)),
+      h("td", null)));
+  }
+}
+__decorate$j([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "rowKey", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "expanded", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "checked", void 0);
+__decorate$j([
+  MapToComponentField()
+], VegaTableExpandRowRenderer.prototype, "colSpan", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The controller for expand row.
+ */
+class VegaTableExpandRowExpandController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableExpandRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.expandObserver = new Observer(this.isAcceptableTableExpandRowObserver.bind(this), (payload) => {
+      if (payload.rowKey === this.rowKey) {
+        this.expanded = payload.expanded;
+      }
+    });
+    ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableExpandRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
+  }
+  /**
+   * The function checks if the input is an acceptable payload for a VegaTableExpandRowObserver.
+   *
+   * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+   * @returns {boolean} a boolean value indicating whether the input is of type VegaTableExpandRowObserverPayload.
+   */
+  isAcceptableTableExpandRowObserver(input) {
+    if (input['host']['tagName'] === 'VEGA-TABLE') {
+      return (input['host']['tagName'] === 'VEGA-TABLE' &&
+        input['host'] === findParent(this.host, 'vega-table'));
+    }
+    if (input['host']['tagName'] === 'VEGA-TABLE-ROW') {
+      return findParent(this.host, 'vega-table') === findParent(input['host'], 'vega-table');
+    }
+  }
+}
+__decorate$i([
+  MapToComponentField()
+], VegaTableExpandRowExpandController.prototype, "host", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaTableExpandRowExpandController.prototype, "rowKey", void 0);
+__decorate$i([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowExpandController.prototype, "expanded", void 0);
+__decorate$i([
+  MapToComponentMethod('connectedCallback')
+], VegaTableExpandRowExpandController.prototype, "connectedCallback", null);
+__decorate$i([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableExpandRowExpandController.prototype, "disconnectedCallback", null);
+
+/**
+ * The function checks if the input is an acceptable table row observer by comparing the host tag name and finding the parent vega-table element.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+ * @returns {boolean} a boolean value.
+ */
+function isAcceptableTableRowObserver(input) {
+  return (input['host']['tagName'] === 'VEGA-TABLE-ROW' &&
+    findParent(this.host, 'vega-table') === findParent(input['host'], 'vega-table'));
+}
+/**
+ * The function checks if the input is an acceptable table observer by verifying if it has a host with a tagName of 'VEGA-TABLE' and if the host is the parent of the current host.
+ *
+ * @param {unknown} input - The `input` parameter is of type `unknown`, which means it can be any type.
+ * @returns {boolean} a boolean value indicating whether the input is an acceptable table observer.
+ */
+function isAcceptableTableObserver(input) {
+  return input['host']['tagName'] === 'VEGA-TABLE' && input['host'] === findParent(this.host, 'vega-table');
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The row selection controller for the expand row.
+ */
+class VegaTableExpandRowSelectionController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableExpandRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.rowSelectionObserver = new Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
+      if (payload.rowKey === this.rowKey) {
+        this.checked = payload.checked;
+      }
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableExpandRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+  }
+}
+__decorate$h([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowSelectionController.prototype, "checked", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableExpandRowSelectionController.prototype, "host", void 0);
+__decorate$h([
+  MapToComponentField()
+], VegaTableExpandRowSelectionController.prototype, "rowKey", void 0);
+__decorate$h([
+  MapToComponentMethod('connectedCallback')
+], VegaTableExpandRowSelectionController.prototype, "connectedCallback", null);
+__decorate$h([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableExpandRowSelectionController.prototype, "disconnectedCallback", null);
+
+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);
+  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 expand row state
+ */
+class VegaTableExpandRowStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'withMultipleSelection',
+          parentStateName: 'rowSelection',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (rowSelection) => {
+            if (rowSelection) {
+              const { type = 'multiple' } = rowSelection;
+              this.withMultipleSelection = type === 'multiple';
+            }
+            else {
+              this.withMultipleSelection = false;
+            }
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate$g([
+  MapToComponentField()
+], VegaTableExpandRowStateController.prototype, "host", void 0);
+__decorate$g([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowStateController.prototype, "withMultipleSelection", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaTableExpandRowStateController.prototype, "vegaTableExpandRowColSpanController", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/*
+ * The next line is covered in e2e-test
+ * @see{should-render-responsive-columns-with-expandable-row-and-current-breakpoint-is-smaller-than-S}
+ * @see{should-render-responsive-columns-with-expandable-row-and-current-breakpoint-changed}
+ */
+/* istanbul ignore next */
+/**
+ * The controller for expand row col span.
+ */
+class VegaTableExpandRowColSpanController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Update state colSpan
+     */
+    this.updateColSpan = () => {
+      this.colSpan = generateColSpan(this.getVisibleColumnsNumber(), this.withMultipleSelection);
+    };
+  }
+  /**
+   * Update the expand row content col span when component will load
+   */
+  componentWillLoad() {
+    this.updateColSpan();
+  }
+  /**
+   * Update the expand row content col span when current breakpoint changed
+   */
+  watchCurrentBreakpoint() {
+    this.updateColSpan();
+  }
+  /**
+   * Update the expand row content col span when selection type changed
+   */
+  watchWithMultipleSelection() {
+    this.updateColSpan();
+  }
+  /**
+   * Get visual columns number, it will be changed by the breakpoints
+   *
+   * @returns {number} The visible columns number
+   */
+  getVisibleColumnsNumber() {
+    const table = findParent(this.host, 'vega-table');
+    const currentBreakpoint = 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
+      ? table.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell')
+      : table.shadowRoot.querySelectorAll('vega-table-row:nth-of-type(1) vega-table-cell');
+    return Array.from(cells).filter((cell) => {
+      if (!cell.breakpoint)
+        return true;
+      if (currentBreakpoint === 'default')
+        return false;
+      return Breakpoints[currentBreakpoint] >= Breakpoints[cell.breakpoint];
+    }).length;
+  }
+}
+__decorate$f([
+  MapToComponentField()
+], VegaTableExpandRowColSpanController.prototype, "host", void 0);
+__decorate$f([
+  MapToComponentField({ writable: true })
+], VegaTableExpandRowColSpanController.prototype, "colSpan", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaTableExpandRowColSpanController.prototype, "withMultipleSelection", void 0);
+__decorate$f([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableExpandRowColSpanController.prototype, "componentWillLoad", null);
+__decorate$f([
+  MapToComponentMethod('watchCurrentBreakpoint')
+], VegaTableExpandRowColSpanController.prototype, "watchCurrentBreakpoint", null);
+__decorate$f([
+  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 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;
+};
+const VegaTableExpandRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaTableExpandRowRenderer = new VegaTableExpandRowRenderer();
+    this.vegaTableExpandRowExpandController = new VegaTableExpandRowExpandController();
+    this.vegaTableExpandRowSelectionController = new VegaTableExpandRowSelectionController();
+    this.vegaTableExpandRowStateController = new VegaTableExpandRowStateController();
+    this.vegaTableExpandRowColSpanController = new VegaTableExpandRowColSpanController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Indicates whether the row is expanded.
+     */
+    this.expanded = false;
+    /**
+     * Indicates whether the row's checkbox is checked.
+     */
+    this.checked = false;
+  }
+  /*
+   * The next line is covered in e2e-test
+   * @see{should-render-responsive-columns-with-expandable-row-and-current-breakpoint-changed}
+   */
+  /* istanbul ignore next */
+  watchCurrentBreakpoint() {
+  }
+  watchWithMultipleSelection() {
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, null, this.vegaTableExpandRowRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "currentBreakpoint": ["watchCurrentBreakpoint"],
+    "withMultipleSelection": ["watchWithMultipleSelection"]
+  }; }
+};
+__decorate$e([
+  InjectVegaGlobalSlimmer()
+], VegaTableExpandRow.prototype, "globalSlimmers", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableExpandRowRenderer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableExpandRowExpandController", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableExpandRowSelectionController", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableExpandRowStateController", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaTableExpandRowColSpanController", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], VegaTableExpandRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableExpandRow.style = vegaTableExpandRowCss;
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Controller for the table head states.
+ */
+class VegaTableHeadStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'fixed',
+          parentStateName: 'scrollConfig',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (scrollConfig) => {
+            this.fixed =
+              scrollConfig && scrollConfig.maxHeight && scrollConfig.fixedHeader !== false;
+          },
+        },
+      ],
+    });
+  }
+}
+__decorate$d([
+  MapToComponentField()
+], VegaTableHeadStateController.prototype, "host", void 0);
+__decorate$d([
+  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 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;
+};
+const VegaTableHead = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaTableHeadStateController = new VegaTableHeadStateController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    /**
+     * Indicates whether the table header is fixed.
+     */
+    this.fixed = false;
+    this.handleTableHeadRefChange = (ref) => {
+      if (this.tableHeadRef) {
+        ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+      }
+      if (this.fixed) {
+        ZIndexManager.setZIndex(ref, 'base');
+      }
+      this.tableHeadRef = ref;
+    };
+  }
+  disconnectedCallback() {
+    ZIndexManager.removeZIndex(this.tableHeadRef, 'base');
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        'fixed-header': this.fixed,
+      }, ref: (ref) => this.handleTableHeadRefChange(ref) }, h("thead", null, h("slot", null))), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$c([
+  InjectVegaGlobalSlimmer()
+], VegaTableHead.prototype, "globalSlimmers", void 0);
+__decorate$c([
+  InjectVegaSlimmer()
+], VegaTableHead.prototype, "vegaTableHeadStateController", void 0);
+__decorate$c([
+  InjectVegaSlimmer()
+], VegaTableHead.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableHead.style = vegaTableHeadCss;
+
+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 row states
+ */
+class VegaTableHeadCellStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
+      ],
+    });
+  }
+}
+__decorate$b([
+  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}";
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaTableHeadCell = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.clickEventEmitter = createEventEmitSlimmer(VegaTableHeadCell, VegaClick);
+    this.vegaTableHeadCellStateController = new VegaTableHeadCellStateController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    this.handleSort = (e) => {
+      this.sortOrder = this.getNextSortOrder(this.sortOrder);
+      this.clickEventEmitter.emit({ sortOrder: this.sortOrder }, e);
+    };
+    this.renderSortIconButton = () => {
+      if (!this.sorter)
+        return;
+      return (h("div", { class: "vega-table-column-sorter" }, h("span", { class: this.isSortActive('asc') ? 'v-text-link' : '' }, h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-up'), size: "size-8" })), h("span", { class: this.isSortActive('desc') ? 'v-text-link' : '' }, h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), size: "size-8" }))));
+    };
+    this.isSortActive = (order) => {
+      return this.sortOrder === order;
+    };
+    /**
+     * Get the next sorter order
+     *
+     * @param {string} sortOrder - The prop name of which sorter is sorted by
+     * @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;
+    };
+  }
+  render() {
+    const labelAlignClassName = generateTextAlignClass(this.textAlign);
+    const sortableConfig = this.sorter
+      ? {
+        role: 'button',
+        onKeyDown: createEnterKeyHandlerToTriggerClick(),
+        tabIndex: 0,
+        onClick: (e) => this.handleSort(e),
+      }
+      : null;
+    const cellClassNames = ['vega-table-cell', this.sorter ? 'sortable' : null];
+    if (!FeatureFlag.isEnabled('VEGA_TABLE.ENABLE_NEW_CELL_BREAK_WORDS_STYLE')) {
+      cellClassNames.push('break-word');
+    }
+    return sanitizeVegaComponent(h(Host, { class: {
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+        [generateResponsiveClass(this.breakpoint, 'v-table-cell')]: true,
+      }, style: { width: this.width } }, h("th", Object.assign({ class: arrayToClassString(cellClassNames) }, sortableConfig), h("div", { class: "vega-table-column" }, h("span", { class: `vega-table-column-label ${labelAlignClassName}` }, h("slot", null)), this.renderSortIconButton()))), this.host);
+  }
+  get host() { return getElement(this); }
+};
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-up': chevronUp,
+    'chevron-down': chevronDown,
+  });
+})();
+__decorate$a([
+  InjectVegaGlobalSlimmer()
+], VegaTableHeadCell.prototype, "globalSlimmers", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "clickEventEmitter", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaTableHeadCellStateController", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaTableHeadCell.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableHeadCell.style = vegaTableHeadCellCss;
+
+var __decorate$9 = (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 VegaTableHeadRowRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderHeaderSelectionCell = () => {
+      if (this.selectionType !== 'multiple')
+        return;
+      return (h("th", { class: "vega-table-selection-column" }, !this.hideSelectAll && (h("div", { class: "vega-table-checkbox-wrapper" },
+        h("vega-checkbox", { size: "small", disabled: this.isEmptyTable || this.selectAllDisabled, checked: this.checkedAll, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleSelectAll);
+          } })))));
+    };
+    this.handleSelectAll = (input) => {
+      if (input.eventName === 'vegaChange') {
+        const checked = input.detail;
+        if (isNonNullable(checked) && checked !== this.checkedAll) {
+          ChangeManager.notify(TABLE_ROW_SELECTION_ALL, {
+            host: this.host,
+            checked: checked,
+          });
+        }
+      }
+    };
+    this.renderHeaderExpandableCell = () => {
+      return this.expandable && h("th", { class: "vega-table-expand-action-column" });
+    };
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  connectedCallback() {
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  disconnectedCallback() {
+  }
+  /**
+   * Used by {@link currentDataObserver}
+   */
+  componentDidLoad() {
+  }
+  render() {
+    var _a, _b;
+    return (h("tr", null,
+      h("th", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+      this.renderHeaderSelectionCell(),
+      h("slot", null),
+      this.renderHeaderExpandableCell(),
+      h("th", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } })));
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "paddingX", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "selectionType", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "hideSelectAll", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "selectAllDisabled", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "checkedAll", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "expandable", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "isEmptyTable", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaTableHeadRowRenderer.prototype, "isTemplateRenderMode", void 0);
+__decorate$9([
+  MapToComponentMethod('connectedCallback')
+], VegaTableHeadRowRenderer.prototype, "connectedCallback", null);
+__decorate$9([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadRowRenderer.prototype, "disconnectedCallback", null);
+__decorate$9([
+  MapToComponentMethod('componentDidLoad')
+], VegaTableHeadRowRenderer.prototype, "componentDidLoad", null);
+
+var __decorate$8 = (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 VegaTableHeadRowController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableHeadRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.initRowSelectionAllObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableHeadRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+  /**
+   * Initialize the row selection all observer.
+   */
+  initRowSelectionAllObserver() {
+    this.rowSelectionAllObserver = new Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
+      if (!payload.noneChecked && payload.checked === false) {
+        this.checkedAll = null; // indeterminate status
+      }
+      else {
+        this.checkedAll = payload.checked;
+      }
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaTableHeadRowController.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowController.prototype, "checkedAll", void 0);
+__decorate$8([
+  MapToComponentMethod('connectedCallback')
+], VegaTableHeadRowController.prototype, "connectedCallback", null);
+__decorate$8([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableHeadRowController.prototype, "disconnectedCallback", null);
+
+var __decorate$7 = (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 row
+ */
+class VegaTableHeadRowStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'expandable',
+          parentStateName: 'rowExpandable',
+        },
+        {
+          subStateName: 'paddingX',
+          parentStateName: 'paddingX',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            const table = findParent(this.host, 'vega-table');
+            if (table.dataSource.length === 0 || table.columns.length === 0) {
+              this.paddingX = value;
+            }
+          },
+        },
+        {
+          subStateName: 'selectionType',
+          parentStateName: 'rowSelection',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (rowSelection) => {
+            this.updateSelectionType(rowSelection);
+          },
+        },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+        },
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
+        {
+          subStateName: 'isTemplateRenderMode',
+          parentStateName: 'isTemplateRenderMode',
+        },
+        {
+          subStateName: 'isEmptyTable',
+          parentStateName: 'currentData',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (currentData) => {
+            this.isEmptyTable = currentData.length === 0;
+          },
+        },
+      ],
+    });
+    /**
+     * Update the selection config with the new config
+     *
+     * @param {VegaTableRowSelectionConfig} rowSelection - The updated row selection config.
+     */
+    this.updateSelectionType = (rowSelection) => {
+      if (rowSelection) {
+        const { type = 'multiple' } = rowSelection;
+        this.selectionType = type;
+      }
+      else {
+        this.selectionType = null;
+      }
+    };
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaTableHeadRowStateController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "expandable", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "selectionType", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "paddingX", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "columnDivider", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "density", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "isTemplateRenderMode", void 0);
+__decorate$7([
+  MapToComponentField({ writable: true })
+], VegaTableHeadRowStateController.prototype, "isEmptyTable", void 0);
+
+const vegaTableHeadRowCss = ":host{display:table-row}:host tr{display:contents}th{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1));padding:0px;vertical-align:middle}th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.column-divider) ::slotted(vega-table-head-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}:host(.density-default) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-compact) th:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) th:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-relaxed) th:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) th:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+
+var __decorate$6 = (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;
+};
+const VegaTableHeadRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaTableHeadRowStateController = new VegaTableHeadRowStateController();
+    this.vegaTableHeadRowRenderer = new VegaTableHeadRowRenderer();
+    this.vegaTableHeadRowController = new VegaTableHeadRowController();
+    this.headCellEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick, VegaChange], () => this.host);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Indicates whether the row is expandable.
+     */
+    this.expandable = false;
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, { class: {
+        'column-divider': this.columnDivider,
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      } }, this.vegaTableHeadRowRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$6([
+  InjectVegaGlobalSlimmer()
+], VegaTableHeadRow.prototype, "globalSlimmers", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "vegaTableHeadRowStateController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "vegaTableHeadRowRenderer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "vegaTableHeadRowController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "headCellEventPrevent", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaTableHeadRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableHeadRow.style = vegaTableHeadRowCss;
+
+var __decorate$5 = (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 VegaTableRowRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderRowSelection = () => {
+      if (this.selectionType !== 'multiple')
+        return;
+      return (h("td", { class: "vega-table-selection-column" },
+        h("div", { class: "vega-table-checkbox-wrapper" },
+          h("vega-checkbox", { size: "small", checked: this.checked, 
+            /* eslint-disable-next-line react/jsx-no-bind */
+            onClick: this.stopRowSelectionPropagation, 
+            /* eslint-disable-next-line react/jsx-no-bind */
+            ref: (ref) => {
+              DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.onRowSelectionChange);
+            } }))));
+    };
+    this.renderExpandIcon = () => {
+      return (this.expandable && (h("td", { class: "vega-table-expand-action-column" },
+        h("div", { class: "vega-table-expand-icon-wrapper" },
+          h("vega-icon", { icon: VegaInternalIconManager.getIconKey('chevron-down'), color: "text-link", onClick: this.onExpandIconClick })))));
+    };
+    this.onRowClick = (e) => {
+      e.stopPropagation();
+      this.vegaTableRowClickController.handleRowClick();
+    };
+    this.onRowSelectionChange = (input) => {
+      if (input.eventName === 'vegaChange') {
+        this.vegaTableRowSelectionController.handleRowSelect(input.detail);
+      }
+    };
+    this.stopRowSelectionPropagation = (e) => {
+      e.stopPropagation();
+    };
+    this.onExpandIconClick = async (e) => {
+      e.stopPropagation();
+      this.vegaTableRowExpandController.handleExpandIconClick();
+    };
+  }
+  render() {
+    var _a, _b;
+    return (h(Fragment, null,
+      this.renderExpandRowSpace(this.rowKey),
+      h("tr", { class: {
+          'vega-table-row': true,
+          'checked': this.checked,
+          'clickable': this.clickable,
+          'current-clicked-row': this.clicked,
+          'expand-row': this.expanded,
+        }, 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onClick: this.clickable ? this.onRowClick : null },
+        h("td", { style: { width: (_a = this.paddingX) === null || _a === void 0 ? void 0 : _a[0] } }),
+        this.renderRowSelection(),
+        h("slot", null),
+        this.renderExpandIcon(),
+        h("td", { style: { width: (_b = this.paddingX) === null || _b === void 0 ? void 0 : _b[1] } }))));
+  }
+  renderExpandRowSpace(rowKey) {
+    return (this.expandable && (h("tr", { key: `vega-table-expand-row-space-${rowKey}`, class: "expand-row-space" })));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'chevron-down': chevronDown });
+})();
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "host", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "rowKey", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "checked", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "clickable", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "clicked", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "expanded", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "paddingX", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "expandable", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaClick", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "selectionType", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRowSelectionController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRowExpandController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaTableRowRenderer.prototype, "vegaTableRowClickController", void 0);
+
+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;
+  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;
+};
+/**
+ * The row selection controller for the table row
+ */
+class VegaTableRowSelectionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handles the row selection event.
+     *
+     * @param {boolean} checked - The "checked" parameter is a boolean value that indicates whether an item is checked or not.
+     */
+    this.handleRowSelect = (checked) => {
+      this.checked = checked;
+      ChangeManager.notify(TABLE_ROW_SELECTION, {
+        host: this.host,
+        checked: checked,
+        rowKey: this.rowKey,
+      });
+    };
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.initRowSelectionObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+    ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+  }
+  /**
+   * The function sets the value of the "checked" property to the provided boolean value.
+   *
+   * @param {boolean} checked - The "checked" parameter is a boolean value that indicates whether an item is checked or not.
+   */
+  setChecked(checked) {
+    this.checked = checked;
+  }
+  /**
+   * Initialize the row selection observer.
+   */
+  initRowSelectionObserver() {
+    this.rowSelectionAllObserver = new Observer(isAcceptableTableObserver.bind(this), (payload) => {
+      if (payload.checked || (payload.checked === false && payload.noneChecked)) {
+        this.checked = payload.checked;
+      }
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
+    this.rowSelectionObserver = new Observer(isAcceptableTableObserver.bind(this), (payload) => {
+      if (payload.rowKey === this.rowKey) {
+        this.checked = payload.checked;
+      }
+    });
+    ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "host", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "selectionType", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaTableRowSelectionController.prototype, "rowKey", void 0);
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaTableRowSelectionController.prototype, "checked", void 0);
+__decorate$4([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowSelectionController.prototype, "connectedCallback", null);
+__decorate$4([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowSelectionController.prototype, "disconnectedCallback", null);
+
+var __decorate$3 = (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;
+};
+/**
+ * The row expand controller for expandable table row.
+ */
+class VegaTableRowExpandController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.initRowExpandObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_EXPAND_ROW, this.rowExpandObserver);
+  }
+  /**
+   * The handler for expand icon click event.
+   */
+  handleExpandIconClick() {
+    this.expanded = !this.expanded;
+    ChangeManager.notify(TABLE_EXPAND_ROW, {
+      host: this.host,
+      rowKey: this.rowKey,
+      expanded: this.expanded,
+    });
+  }
+  /**
+   * Initialize the row expand observer.
+   */
+  initRowExpandObserver() {
+    this.rowExpandObserver = new Observer(isAcceptableTableObserver.bind({ host: this.host }), (payload) => {
+      if (payload.rowKey === this.rowKey) {
+        this.expanded = payload.expanded;
+      }
+    });
+    ChangeManager.register(TABLE_EXPAND_ROW, this.rowExpandObserver);
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaTableRowExpandController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTableRowExpandController.prototype, "rowKey", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaTableRowExpandController.prototype, "expandable", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaTableRowExpandController.prototype, "expanded", void 0);
+__decorate$3([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowExpandController.prototype, "connectedCallback", null);
+__decorate$3([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowExpandController.prototype, "disconnectedCallback", null);
+
+var __decorate$2 = (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;
+};
+/**
+ * The row click controller for table row
+ */
+class VegaTableRowClickController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaTableRow.connectedCallback}
+   */
+  connectedCallback() {
+    this.initRowClickObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaTableRow.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
+  }
+  /**
+   * Row click handler
+   */
+  handleRowClick() {
+    ChangeManager.notify(TABLE_ROW_CLICK, { host: this.host, rowKey: this.rowKey });
+    this.clickEventEmitter.emit({ rowKey: this.rowKey });
+  }
+  /**
+   * Initialize row click observer
+   */
+  initRowClickObserver() {
+    this.rowClickObserver = new 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);
+      }
+    });
+    ChangeManager.register(TABLE_ROW_CLICK, this.rowClickObserver);
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "host", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "rowKey", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaTableRowClickController.prototype, "clicked", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "checked", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "selectionType", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "vegaClick", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "vegaTableRowSelectionController", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaTableRowClickController.prototype, "clickEventEmitter", void 0);
+__decorate$2([
+  MapToComponentMethod('connectedCallback')
+], VegaTableRowClickController.prototype, "connectedCallback", null);
+__decorate$2([
+  MapToComponentMethod('disconnectedCallback')
+], VegaTableRowClickController.prototype, "disconnectedCallback", null);
+
+var __decorate$1 = (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 row states
+ */
+class VegaTableRowStateController extends SubStateObserverSlimmer {
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  constructor() {
+    super({
+      parent: 'vega-table',
+      subStates: [
+        {
+          subStateName: 'expandable',
+          parentStateName: 'rowExpandable',
+        },
+        {
+          subStateName: 'clickable',
+          parentStateName: 'rowClickable',
+        },
+        {
+          subStateName: 'paddingX',
+          parentStateName: 'paddingX',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            const table = findParent(this.host, 'vega-table');
+            if (table.dataSource.length === 0 || table.columns.length === 0) {
+              this.paddingX = value;
+            }
+          },
+        },
+        {
+          subStateName: 'selectionType',
+          parentStateName: 'rowSelection',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (value) => {
+            if (value) {
+              const { type = 'multiple' } = value;
+              this.selectionType = type;
+            }
+            else {
+              this.selectionType = null;
+            }
+          },
+        },
+        {
+          subStateName: 'rowDivider',
+          parentStateName: 'rowDivider',
+        },
+        {
+          subStateName: 'columnDivider',
+          parentStateName: 'columnDivider',
+        },
+        {
+          subStateName: 'density',
+          parentStateName: 'density',
+        },
+      ],
+    });
+  }
+  /**
+   * Component watch method - [watchRowSelection]{@link VegaTableRow.watchSelectionType}
+   */
+  watchSelectionType() {
+    this.updateClickable();
+  }
+  /**
+   * The `@MapToComponentMethod('componentWillLoad')` decorator is used to map the `handleComponentWillLoad` method
+   * to the `componentWillLoad` lifecycle hook of the component.
+   */
+  handleComponentWillLoad() {
+    this.updateClickable();
+  }
+  /**
+   * The function updates the value of the "clickable" property based on the value of the
+   * "selectionType" property.
+   */
+  updateClickable() {
+    if (this.selectionType) {
+      this.clickable = this.selectionType === 'single' || this.clickable;
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaTableRowStateController.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "expandable", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "clickable", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "paddingX", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "selectionType", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "rowDivider", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "columnDivider", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaTableRowStateController.prototype, "density", void 0);
+__decorate$1([
+  MapToComponentMethod('watchSelectionType')
+], VegaTableRowStateController.prototype, "watchSelectionType", null);
+__decorate$1([
+  MapToComponentMethod('componentWillLoad')
+], VegaTableRowStateController.prototype, "handleComponentWillLoad", null);
+
+const vegaTableRowCss = ":host{display:contents}:host(.v-hidden){display:none}td{padding:0px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));vertical-align:middle}td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) td,:host([data-striped=striped]) .vega-table-row:not(.checked):not(.clickable:hover) ::slotted(vega-table-cell){background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.checked td,.checked ::slotted(vega-table-cell){background-color:rgba(var(--v-bg-table-selected-row, 204, 223, 255, 1))}:not(.checked).clickable:hover{cursor:pointer}:not(.checked).clickable:hover td,:not(.checked).clickable:hover ::slotted(vega-table-cell){background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1))}.vega-table-checkbox-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper{display:flex;align-items:center;justify-content:center}.vega-table-row .vega-table-expand-icon-wrapper vega-icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;cursor:pointer}.vega-table-row.expand-row .vega-table-expand-icon-wrapper vega-icon{transform:rotate(180deg)}:host tr.expand-row td,:host tr.expand-row ::slotted(vega-table-cell){border-top-width:1px;border-left-width:0px;border-right-width:0px;border-bottom-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-input-field, 171, 198, 216, 1))}:host tr.expand-row td:first-of-type{border-left-width:1px;border-top-width:1px;border-bottom-left-radius:0px}:host tr.expand-row td:last-of-type{border-right-width:1px;border-top-width:1px;border-bottom-right-radius:0px}tr.expand-row-space{display:block;padding-top:8px}:host(.row-divider:not(:last-of-type)) td,:host(.row-divider:not(:last-of-type)) ::slotted(vega-table-cell){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-bottom-width:1px;border-bottom-style:solid}:host(.row-divider:not(:last-of-type)) td:first-of-type,:host(.row-divider:not(:last-of-type)) td:last-of-type{border-radius:0px}:host(.column-divider) ::slotted(vega-table-cell:not(:last-of-type)){border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));border-right-width:1px;border-right-style:solid}:host(.density-default) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-default) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-default) tr.expand-row-space{display:block;padding-top:8px}:host(.density-compact) td:first-of-type{border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.density-compact) td:last-of-type{border-top-right-radius:4px;border-bottom-right-radius:4px}:host(.density-compact) tr.expand-row-space{display:block;padding-top:4px}:host(.density-relaxed) td:first-of-type{border-top-left-radius:12px;border-bottom-left-radius:12px}:host(.density-relaxed) td:last-of-type{border-top-right-radius:12px;border-bottom-right-radius:12px}:host(.density-relaxed) tr.expand-row-space{display:block;padding-top:12px}.vega-table-expand-action-column{width:40px;min-width:40px}.vega-table-selection-column{width:40px;min-width:40px}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  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;
+};
+const VegaTableRow = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 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 = createEventEmitSlimmer(VegaTableRow, VegaClick);
+    this.checkboxValueChangeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClick], () => this.host);
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.currentBreakpoint = getCurrentBreakpoint();
+  }
+  watchSelectionType() {
+  }
+  render() {
+    slotPlaceholder(h("slot", null));
+    return sanitizeVegaComponent(h(Host, { class: {
+        'row-divider': this.rowDivider,
+        'column-divider': this.columnDivider,
+        [`density-${ResponsiveFormatFacade.formatCustom(this.density)}`]: true,
+      } }, this.vegaTableRowRenderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "selectionType": ["watchSelectionType"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaTableRow.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRowRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRowSelectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRowExpandController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRowClickController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaTableRowStateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "clickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "checkboxValueChangeEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaTableRow.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+VegaTableRow.style = vegaTableRowCss;
+
+export { VegaTable as vega_table, VegaTableBody as vega_table_body, VegaTableCell as vega_table_cell, VegaTableExpandRow as vega_table_expand_row, VegaTableHead as vega_table_head, VegaTableHeadCell as vega_table_head_cell, VegaTableHeadRow as vega_table_head_row, VegaTableRow as vega_table_row };