@globalpayments/vega 2.25.0 → 2.27.0

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-slider-state-controller.js

@@ -5,12 +5,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { SynchronizeTaskQueue } from '../../../../../helpers/queue/synchronize-task-queue';
 /** The `VegaTabGroupSliderStateController` class manages the animation state of a tab group slider component. */
 export class VegaTabGroupSliderStateController extends VegaSlimmer {
   constructor() {
     super(...arguments);
     /* about 2 frames in the browser */
     this.UPDATE_ANIMATION_FLAG_DELAY = 32;
+    this.goToPageTaskQueue = new SynchronizeTaskQueue();
     /**
      * The normal flow:
      * page index change
@@ -37,24 +39,32 @@ export class VegaTabGroupSliderStateController extends VegaSlimmer {
      */
     this.pendingCarouselActionCount = 0;
   }
+  /**
+   * goToPage method should be called after the carousel re-render which waiting for the carousel to render all pages,
+   *    otherwise it may not jump to the current page.
+   */
+  async componentDidRender() {
+    await this.goToPageTaskQueue.runTask();
+  }
   /* istanbul ignore next */
   /**
    * update the page index when component call watchCurrentPageIndexChange method
    *
    *  {@link VegaTabGroup#watchCurrentPageIndexChange}
-   *
-   * @param {number} newIndex the page index
    */
-  async handlePageIndexChange(newIndex) {
+  async handlePageIndexChange() {
     const carouselDom = this.tabListRenderer.getCarouselDomRef();
     if (carouselDom) {
       this.pendingCarouselActionCount += 1;
-      await carouselDom.goToPage(newIndex + 1);
       setTimeout(() => {
         if (this && typeof this.pendingCarouselActionCount === 'number') {
           this.pendingCarouselActionCount -= 1;
         }
       }, this.UPDATE_ANIMATION_FLAG_DELAY);
+      await this.goToPageTaskQueue.enqueue({
+        /** Add task to the queue and run it until component did render */
+        run: async () => await carouselDom.goToPage(this.currentPageIndex + 1),
+      }, false);
     }
   }
   /*
@@ -74,6 +84,12 @@ export class VegaTabGroupSliderStateController extends VegaSlimmer {
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupSliderStateController.prototype, "tabListRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupSliderStateController.prototype, "currentPageIndex", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaTabGroupSliderStateController.prototype, "componentDidRender", null);
 __decorate([
   MapToComponentMethod('watchCurrentPageIndexChange')
 ], VegaTabGroupSliderStateController.prototype, "handlePageIndexChange", null);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-tab-list-renderer.js

@@ -43,7 +43,8 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
             /* eslint-disable-next-line react/jsx-no-bind */
             onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
-            this.renderTabLabelDom(item)),
+            this.renderTabLabelDom(item),
+            this.renderCounterBadgeDom(item)),
           this.closeButtonRenderer.render())));
     })));
   }
@@ -58,6 +59,30 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
         item.label.substring(0, this.TAB_LABEL_MAX_SIZE),
         "..."))) : (item.label);
   }
+  renderCounterBadgeDom(item) {
+    const counterBadge = item.counterBadge;
+    const counterBadgeClass = this.getCounterBadgeClassByCount(counterBadge);
+    return ((counterBadge === null || counterBadge === void 0 ? void 0 : counterBadge.count) !== undefined &&
+      counterBadge.count > 0 && (h("div", { class: `vega-counter-badge ${counterBadgeClass}` },
+      h("vega-counter-badge", { count: counterBadge.count, color: counterBadge.color }))));
+  }
+  getCounterBadgeClassByCount(counterBadge) {
+    if (counterBadge && counterBadge.count) {
+      const digits = counterBadge.count.toString().length;
+      if (digits === 1) {
+        return 'one-digit';
+      }
+      else if (digits === 2) {
+        return 'two-digits';
+      }
+      else {
+        return 'multi-digits';
+      }
+    }
+    else {
+      return '';
+    }
+  }
   handleTabItemClick(dataTarget) {
     this.selectedTargetController.handleTabItemClick(dataTarget);
   }

package/dist/collection/components/vega-tab-group/vega-tab-group-panel/vega-tab-group-panel.js

@@ -13,7 +13,7 @@ import { VegaClick } from '../../../helpers/event-manager/event-id/vega-event-id
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.26.0
+ * @vegaVersion 1.26.0
  */
 export class VegaTabGroupPanel {
   constructor() {
@@ -23,7 +23,7 @@ export class VegaTabGroupPanel {
     /**
      * Controls the visibility of the tab panel within the tab group.
      *
-     * @version 1.26.0
+     * @vegaVersion 1.26.0
      */
     this.isActive = false;
   }
@@ -75,7 +75,7 @@ export class VegaTabGroupPanel {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.26.0"
           }],
         "text": "Controls the visibility of the tab panel within the tab group."

package/dist/collection/components/vega-tab-group/vega-tab-group.css

@@ -88,6 +88,35 @@
   padding-right: 8px;
 }
 
+.vega-tab > div > .label .vega-counter-badge {
+  position: relative;
+  height: 20px;
+  padding-left: 8px;
+}
+.vega-tab > div > .label .vega-counter-badge vega-counter-badge {
+  position: absolute;
+  padding-left: 8px;
+  top: 10px;
+}
+.vega-tab > div > .label .vega-counter-badge.one-digit {
+  width: 20px;
+}
+.vega-tab > div > .label .vega-counter-badge.one-digit vega-counter-badge {
+  left: 10px;
+}
+.vega-tab > div > .label .vega-counter-badge.two-digits {
+  width: 28px;
+}
+.vega-tab > div > .label .vega-counter-badge.two-digits vega-counter-badge {
+  left: 14px;
+}
+.vega-tab > div > .label .vega-counter-badge.multi-digits {
+  width: 32px;
+}
+.vega-tab > div > .label .vega-counter-badge.multi-digits vega-counter-badge {
+  left: 16px;
+}
+
 .vega-tab > div > .label.vega-close-icon-space {
   padding-right: 12px;
 }

package/dist/collection/components/vega-tab-group/vega-tab-group.js

@@ -23,7 +23,7 @@ import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaTabGroupRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-tab-group/runtime-metrics-payload-definition';
 /**
- * @version 1.0.6
+ * @vegaVersion 1.0.6
  */
 export class VegaTabGroup {
   constructor() {
@@ -49,7 +49,7 @@ export class VegaTabGroup {
      * Defines the data target for the selected tab
      *    within the tab group.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.selectedTabDataTarget = '';
@@ -57,14 +57,14 @@ export class VegaTabGroup {
      * Defines the spacing between the tabs in
      *    the tab group.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.gap = 'size-8';
     /**
      * Specifies whether the tabs in the tab group include
      *    a close button for closing the tab.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.showCloseButton = false;
     /**
@@ -74,14 +74,14 @@ export class VegaTabGroup {
      *    initialization and cannot be overridden or
      *    modified dynamically.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.tabItems = [];
     /**
      * Specifies the visual style and prominence of the tab group.
      *
-     * @version 1.39.0
+     * @vegaVersion 1.39.0
      */
     this.variant = 'primary';
   }
@@ -155,7 +155,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Defines the data target for the selected tab\n   within the tab group."
@@ -181,7 +181,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Defines the spacing between the tabs in\n   the tab group."
@@ -202,7 +202,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the tabs in the tab group include\n   a close button for closing the tab."
@@ -228,7 +228,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Defines the tab items that appear within the tab group.\n\nThe `tabItems` property can only be set once during\n   initialization and cannot be overridden or\n   modified dynamically."
@@ -247,7 +247,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Defines the selector of the element that will contain\n   the tab group popup.\n\n- If provided,\n     the popup will be positioned relative to this element.\n- If not provided,\n     the popup will be appended to the body element by default."
@@ -272,7 +272,7 @@ export class VegaTabGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.39.0"
           }],
         "text": "Specifies the visual style and prominence of the tab group."
@@ -295,7 +295,7 @@ export class VegaTabGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.1.0"
           }],
         "text": "An event emitter notifying the click event of a tab\n   in the tab group."
@@ -316,7 +316,7 @@ export class VegaTabGroup {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "An event emitter notifying the click event of a tab\n   in the tab group."

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-expand-row-controller.js

@@ -12,7 +12,7 @@ import { TABLE_EXPAND_ROW } from '../../../../helpers/change-manager/subject/sta
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { findParent } from '../../../../utils/ui';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaInternalTableRowExpand } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * The expand row controller of VegaTable
@@ -157,7 +157,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       this.mutationObserver.disconnect();
     }
     ChangeManager.unregister(TABLE_EXPAND_ROW, this.expandObserver);
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand));
   }
   /**
    * Component lifecycle - componentDidLoad
@@ -184,7 +184,7 @@ export class VegaTableExpandRowController extends VegaSlimmer {
       }
     });
     ChangeManager.register(TABLE_EXPAND_ROW, this.expandObserver);
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowExpand), ({ rowKey, expanded }) => {
       return this.rowExpandEventEmitter.emit({
         record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
         expanded: expanded,

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-row-selection-controller.js

@@ -9,7 +9,7 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { TABLE_ROW_CLICK, TABLE_ROW_SELECTION, TABLE_ROW_SELECTION_ALL, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { findParent } from '../../../../utils/ui';
-import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalTableRowSelect, VegaInternalTableRowSelectAll, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
@@ -159,8 +159,8 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
     ChangeManager.unregister(TABLE_ROW_SELECTION, this.rowSelectionObserver);
     ChangeManager.unregister(TABLE_ROW_SELECTION_ALL, this.rowSelectionAllObserver);
     ChangeManager.unregister(TABLE_ROW_CLICK, this.rowClickObserver);
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
-    staticRemoteInvocationCallRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect));
+    remoteInvocationRegistry.unRegister(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll));
   }
   /**
    * Component lifecycle - componentWillLoad
@@ -294,14 +294,14 @@ export class VegaTableRowSelectionController extends VegaSlimmer {
       this.handleRowSelect(checked, record);
     });
     ChangeManager.register(TABLE_ROW_SELECTION, this.rowSelectionObserver);
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelect), ({ rowKey, checked }) => {
       return this.rowSelectEventEmitter.emit({
         selected: checked,
         record: this.vegaTableDataSourceController.getRecordByKey(rowKey),
         selectedRows: this.getSelectedRecords(),
       });
     });
-    staticRemoteInvocationCallRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
+    remoteInvocationRegistry.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalTableRowSelectAll), ({ checked }) => {
       return this.rowSelectAllEventEmitter.emit({
         selected: checked,
         selectedRows: this.getSelectedRecords(),

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

@@ -27,7 +27,7 @@ export class VegaTableRenderer extends VegaSlimmer {
     };
     this.renderEmpty = () => {
       return (this.vegaTableDataSourceController.isCurrentDataEmpty() &&
-        this.emptyDescription && h("div", { class: "vega-table-empty-description" }, this.emptyDescription));
+        this.emptyDescription && (h("div", { class: "vega-table-empty-description" }, this.translationSlimmer.t(this.emptyDescription))));
     };
   }
   render() {
@@ -85,6 +85,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableRenderer.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTableRenderer.prototype, "vegaTableChildrenController", void 0);

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

@@ -11,7 +11,7 @@ import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/sl
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.44.0
+ * @vegaVersion 1.44.0
  */
 export class VegaTableBody {
   constructor() {

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

@@ -16,7 +16,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { FeatureFlag } from '../../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.44.0
+ * @vegaVersion 1.44.0
  */
 export class VegaTableCell {
   constructor() {
@@ -71,7 +71,7 @@ export class VegaTableCell {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.44.0"
           }],
         "text": "Determines the alignment of text within the cell."
@@ -96,7 +96,7 @@ export class VegaTableCell {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.44.0"
           }],
         "text": "Defines the screen width at which the column becomes hidden.\n   If not set, the column remains visible at all times."
@@ -116,7 +116,7 @@ export class VegaTableCell {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.44.0"
           }],
         "text": "Determines the text overflow behavior within cells.\n`ellipsis`: Replaces overflowed text with ellipsis.\n`scroll`: Enables cell scrolling; scroll bars are displayed only when the content overflows,\n    remaining hidden by default."
@@ -136,7 +136,7 @@ export class VegaTableCell {
       "optional": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.44.0"
           }],
         "text": "Specifies the width of the cell."

package/dist/collection/components/vega-table/vega-table-expand-row/vega-table-expand-row.js

@@ -16,7 +16,7 @@ import { VegaTableExpandRowColSpanController } from './slimmers/controllers/vega
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 1.44.0
+ * @vegaVersion 1.44.0
  */
 export class VegaTableExpandRow {
   constructor() {
@@ -74,7 +74,7 @@ export class VegaTableExpandRow {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.44.0"
           }],
         "text": "Defines a unique key for the expandable row within the table."

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

@@ -13,7 +13,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaChange } from '../../../helpers/event-manager/event-id/vega-event-id';
 /**
- * @version 1.44.0
+ * @vegaVersion 1.44.0
  */
 export class VegaTableHead {
   constructor() {

package/dist/collection/components/vega-table/vega-table-head-cell/slimmers/renderers/sort-icon-renderer.js

@@ -0,0 +1,38 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { h } from '@stencil/core';
+export class SortIconRenderer extends VegaSlimmer {
+  render() {
+    if (!this.sorter)
+      return;
+    const { icon, color } = SortIconRenderer.SORT_ICON_MAP[this.sortOrder || 'default'];
+    return (h("span", { class: "vega-table-column-sorter" },
+      h("vega-icon", { color: color, icon: VegaInternalIconManager.getIconKey(icon), size: "size-12" })));
+  }
+}
+SortIconRenderer.SORT_ICON_MAP = {
+  asc: {
+    icon: 'circle-arrow-up',
+    color: 'text-link',
+  },
+  desc: {
+    icon: 'circle-arrow-down',
+    color: 'text-link',
+  },
+  default: {
+    icon: 'arrow-up-arrow-down',
+    color: 'text-secondary',
+  },
+};
+__decorate([
+  MapToComponentField()
+], SortIconRenderer.prototype, "sorter", void 0);
+__decorate([
+  MapToComponentField()
+], SortIconRenderer.prototype, "sortOrder", void 0);

package/dist/collection/components/vega-table/vega-table-head-cell/vega-table-head-cell.css

@@ -41,6 +41,18 @@
   vertical-align: middle;
 }
 
+:host(.sortable) {
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+:host(.sortable:hover) {
+  background-color: rgba(var(--v-bg-table-row-hover, 241, 248, 251, 1));
+}
+
 th {
   display: block;
   padding: 0px;
@@ -78,47 +90,31 @@ th {
 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.center {
+  justify-content: center;
 }
-.vega-table-column-sorter span {
-  display: inline-flex;
+.vega-table-column.right {
+  justify-content: flex-end;
 }
-.vega-table-column-sorter span.v-text-link {
-  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+.vega-table-column.left {
+  justify-content: flex-start;
 }
-
-.vega-table-column-label {
-  flex-grow: 1;
+.vega-table-column .vega-table-column-label {
   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;
+.vega-table-column .vega-table-column-sorter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  margin-left: 8px;
+  cursor: pointer;
+  outline: none;
 }
 
 :host(.density-default) .vega-table-cell {