@globalpayments/vega 2.20.0 → 2.21.0

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

@@ -57,6 +57,7 @@ export class VegaCalendar {
     this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
     this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
@@ -68,6 +69,10 @@ export class VegaCalendar {
      * Specifies the time format of the calendar.
      */
     this.timeFormat = '24-hour';
+    /**
+     * Controls the visibility of the calendar's event color bar.
+     */
+    this.showEventColorBar = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -102,6 +107,14 @@ export class VegaCalendar {
   watchTimeFormat(newValue) {
     methodPlaceholder(newValue);
   }
+  /**
+   * Monitors changes in the visibility of the calendar's event color bar.
+   *
+   * @param {boolean} newValue
+   */
+  watchShowEventColorBar(newValue) {
+    methodPlaceholder(newValue);
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
@@ -199,6 +212,24 @@ export class VegaCalendar {
         "tags": [],
         "text": "Defines the configuration options for the more action button's dropdown menu."
       }
+    },
+    "showEventColorBar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Controls the visibility of the calendar's event color bar."
+      },
+      "attribute": "show-event-color-bar",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -383,6 +414,9 @@ export class VegaCalendar {
     }, {
       "propName": "timeFormat",
       "methodName": "watchTimeFormat"
+    }, {
+      "propName": "showEventColorBar",
+      "methodName": "watchShowEventColorBar"
     }]; }
 }
 __decorate([
@@ -460,3 +494,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "showEventColorBarNotifySlimmer", void 0);

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-search-controller.js

@@ -5,6 +5,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { DROPDOWN_SEARCH_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 /**
  * The `VegaDropdownSearchController` class is a TypeScript class that provides methods for searching
  * and filtering dropdown items based on a search string.
@@ -46,6 +48,10 @@ export class VegaDropdownSearchController extends VegaSlimmer {
    * @returns {VegaDropdownSourceItem[]} an array of VegaDropdownSourceItem objects.
    */
   searchSource(source, result) {
+    const searchResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_SEARCH_INTERNAL_OVERRIDEN, source, this.searchString, this.caseSensitive);
+    if (searchResult) {
+      return searchResult;
+    }
     source.forEach((item) => {
       if (item['children']) {
         const filtered = this.searchSource(item['children'], []);

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-item-level-renderer.js

@@ -6,14 +6,29 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 export class VegaDropdownItemLevelRenderer extends VegaSlimmer {
   render(item, fixHeight) {
+    const renderResult = staticRemoteInvocationCallRegistry.call(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, item, fixHeight);
+    if (renderResult) {
+      return renderResult;
+    }
     return (h("vega-dropdown-item", Object.assign({}, item, { itemKey: item.key, height: fixHeight, prefixIcon: item.prefixIcon })));
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectType", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "caseSensitive", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownItemLevelRenderer.prototype, "searchString", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownItemLevelRenderer.prototype, "selectedController", void 0);

package/dist/collection/components/vega-hint/vega-hint.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 { Component, Host, h, Element } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { sanitizeVegaComponent } from '../../utils/component';
+/**
+ * @VegaInternalComponent
+ */
+/**
+ * This is an internal used component and shouldn't be used by client,
+ *    it doesn't show up in storybook either.
+ */
+export class VegaHint {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("vega-box", { padding: { x: 'size-8', top: 'size-4' } },
+        h("vega-font", { variant: "font-footnote1-short", color: "text-secondary" },
+          h("slot", null)))), this.host);
+  }
+  static get is() { return "vega-hint"; }
+  static get encapsulation() { return "shadow"; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaHint.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaHint.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-input/slimmers/controllers/vega-input-mask-config-controller.js

@@ -98,7 +98,7 @@ export class VegaInputMaskConfigController extends StringInputFormatterSlimmer {
         stringFormatStrategy = new StringMaskStrategy(maskConfig.options);
         break;
       case 'custom-formatter':
-        stringFormatStrategy = new CustomFormatterStrategy(maskConfig.formatter);
+        stringFormatStrategy = new CustomFormatterStrategy(maskConfig.formatter, maskConfig.resetCaretPosition);
         break;
     }
     if (this.type === 'number' && maskTrigger === 'input' && !maskConfig) {

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

@@ -670,7 +670,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "MaskConfigType | MaskConfigType[]",
-        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; })",
+        "resolved": "MaskConfigType[] | ({ type: \"number\" | \"phone\" | \"zipcode\" | \"taxId\" | \"custom\" | \"thousand-comma\" | \"custom-formatter\"; options?: MaskConfig | NumberMaskConfig; trigger?: \"blur\" | \"input\"; formatter?: (value: string) => string; resetCaretPosition?: boolean; })",
         "references": {
           "MaskConfigType": {
             "location": "import",

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/country-select-controller.js

@@ -6,19 +6,31 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { getCountries } from 'libphonenumber-js';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { DROPDOWN_SEARCH_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { COUNTRIES } from '../../assets/countries';
 /**
  * The `CountrySelectController` class in TypeScript includes methods to set the search string and
  * countryCode properties.
  */
 export class CountrySelectController extends VegaSlimmer {
   /**
-   * The setCountryCodeSearchString function in TypeScript sets the value of the countryCodeSearchString property.
+   * Registers a remote invocation call for a dropdown search.
+   */
+  static registerRemoteDropdownSearch() {
+    staticRemoteInvocationCallRegistry.register(DROPDOWN_SEARCH_INTERNAL_OVERRIDEN, this.filterDropdownSourcesBySearchString.bind(this));
+  }
+  /**
+   * Remote invocation call for a dropdown search.
    *
-   * @param {string} value - The `value` parameter in the `setCountryCodeSearchString` method is of type `string`
-   * and represents the new search string that will be set for the object.
+   * @param {DropdownSourceItem[]} source - Source of dropdown.
+   * @param {string} searchString - Searching string of dropdown.
+   * @returns  {DropdownSourceItem[]}  The searched source.
    */
-  setCountryCodeSearchString(value) {
-    this.countryCodeSearchString = value;
+  static filterDropdownSourcesBySearchString(source, searchString) {
+    return source.filter((item) => `${COUNTRIES[item.key].toLowerCase()} +${item.label}`
+      .toLowerCase()
+      .includes(searchString.toLowerCase()));
   }
   /**
    * The function `setCountryCode` sets the countryCode property of an object to the specified VegaCountryCode value.
@@ -32,9 +44,7 @@ export class CountrySelectController extends VegaSlimmer {
 }
 CountrySelectController.defaultCountryCode = 'US';
 CountrySelectController.defaultAllowedCountryCodes = getCountries();
-__decorate([
-  MapToComponentField({ writable: true })
-], CountrySelectController.prototype, "countryCodeSearchString", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], CountrySelectController.prototype, "countryCode", void 0);
+CountrySelectController.registerRemoteDropdownSearch();

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -7,11 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange, VegaSearch } from '../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
 import { CountryFlags } from '../../assets/country-flags';
 import { getCountryCallingCode } from 'libphonenumber-js';
 import { COUNTRIES } from '../../assets/countries';
+import staticRemoteInvocationCallRegistry from '../../../../helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry';
+import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -24,31 +26,15 @@ export class CountrySelectRenderer extends VegaSlimmer {
       void this.inputSelectRef.doOpen();
     };
     /**
-     * This `renderOption` function is responsible for rendering a dropdown item for a specific country in
+     * This `renderDropdownItem` function is responsible for rendering a dropdown item for a specific country in
      * the `VegaInputPhoneNumberCountryCodeRenderer` component.
      */
-    this.renderOption = (countryType) => {
-      const { callingCode, countryCode, name } = countryType;
-      const callingCodeWithPrefix = `+${callingCode}`;
-      return (h("vega-dropdown-item", { label: callingCodeWithPrefix, itemKey: countryCode, key: countryCode },
+    this.renderDropdownItem = (item, fixHeight) => {
+      return (h("vega-dropdown-item", { height: fixHeight, label: item.label, itemKey: item.key, key: item.key },
         h("vega-flex", { alignItems: "center", gap: "size-12" },
-          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(countryCode), size: "size-16" }),
-          h("vega-font", { variant: "font-field-value", color: "text-primary" }, name),
-          h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${callingCodeWithPrefix})`))));
-    };
-    /**
-     * The `private countrySearchFilter` function is a filter function defined within the
-     * `CountrySelectController` class. It takes a `VegaCountryType` object as input and returns a boolean
-     * value based on whether the country matches the search criteria specified by the `countryCodeSearchString`
-     * property of the class.
-     *
-     * @param {VegaCountryType} country - the country to be searched
-     * @returns {boolean} the boolean return value
-     */
-    this.countrySearchFilter = (country) => {
-      return this.countryCodeSearchString
-        ? `${country.name.toLowerCase()} +${country.callingCode}`.includes(this.countryCodeSearchString.toLowerCase())
-        : true;
+          h("vega-icon", { icon: VegaInternalIconManager.getIconKey(item.key), size: "size-16" }),
+          h("vega-font", { variant: "font-field-value", color: "text-primary" }, COUNTRIES[item.key]),
+          h("vega-font", { variant: "font-field-value", color: "text-primary" }, `(${item.label})`))));
     };
     /**
      * The `private customCountriesFilter` function is a custom filter function used to filter out
@@ -82,8 +68,15 @@ export class CountrySelectRenderer extends VegaSlimmer {
    * rendering the JSX structure of the component. Here's a breakdown of what it is doing:
    */
   render() {
+    const countries = this.getCountrySelectOptions();
     return (h("vega-box", null,
-      h("vega-input-select", { vegaDropdownProps: { matchTargetWidth: false }, size: this.size, prefixIcon: VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
+      h("vega-input-select", { source: countries.map((country) => ({
+          id: country.countryCode,
+          displayName: `+${country.callingCode}`,
+        })), vegaDropdownProps: {
+          matchTargetWidth: false,
+          size: this.estimateMaxWidthOfCountries(countries),
+        }, size: this.size, prefixIcon: VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {
           this.inputSelectRef = inputSelect;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, VegaChange, 
           /*
@@ -94,12 +87,8 @@ export class CountrySelectRenderer extends VegaSlimmer {
           (e) => {
             this.handleCountrySelectChange(e.detail);
           });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(inputSelect, VegaSearch, (e) => {
-            this.countrySelectController.setCountryCodeSearchString(e.detail);
-          });
-        }, value: this.countryCode },
-        h("div", { slot: "items" },
-          h("div", null, this.getCountrySelectOptions().map((country) => this.renderOption(country)))))));
+          staticRemoteInvocationCallRegistry.register(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, this.renderDropdownItem.bind(this));
+        }, value: this.countryCode })));
   }
   /*
    * The below method is e2e-test covered in
@@ -123,9 +112,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
    * `countrySearchFilter` filters.
    */
   getCountrySelectOptions() {
-    return this.constructCountryArray(CountrySelectRenderer.allCountries)
-      .filter(this.customCountriesFilter)
-      .filter(this.countrySearchFilter);
+    return this.constructCountryArray(CountrySelectRenderer.allCountries).filter(this.customCountriesFilter);
   }
   /**
    * The function constructCountryArray takes a list of country names and returns an array of country
@@ -146,6 +133,12 @@ export class CountrySelectRenderer extends VegaSlimmer {
       name: countries[country],
     }));
   }
+  estimateMaxWidthOfCountries(countries) {
+    const maxLength = Math.max(...countries.map((country) => country.name.length));
+    // 162 is extra element width in dropdown-item, includes checked icon, country icon, country calling code,
+    //   and gap of item, padding of item.
+    return maxLength * 8.5 + 162;
+  }
 }
 (() => {
   VegaInternalIconManager.register(CountryFlags);
@@ -163,9 +156,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], CountrySelectRenderer.prototype, "allowedCountryCodes", void 0);
-__decorate([
-  MapToComponentField()
-], CountrySelectRenderer.prototype, "countryCodeSearchString", void 0);
 __decorate([
   MapToComponentField()
 ], CountrySelectRenderer.prototype, "countrySelectController", void 0);

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/phone-number-input-renderer.js

@@ -54,6 +54,7 @@ export class PhoneNumberInputRenderer extends VegaSlimmer {
         }, value: this.phoneNumberInputValue, maskConfig: {
           type: 'custom-formatter',
           formatter: this.phoneNumberMaskFormatter,
+          resetCaretPosition: true,
         } })));
   }
   /**

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -55,7 +55,6 @@ export class VegaInputPhoneNumber {
       inputContainerGetter: () => this.inputPhoneNumberRenderer.getInputPhoneNumberContainerRef(),
       touchableAreaGetter: () => [this.phoneNumberInputRenderer.getInputRef()],
     });
-    this.countryCodeSearchString = '';
     this.phoneNumberInputValue = '';
     /**
      * Specifies the label or title for the phone number input field.
@@ -363,7 +362,6 @@ export class VegaInputPhoneNumber {
     }
   }; }
   static get states() { return {
-    "countryCodeSearchString": {},
     "phoneNumberInputValue": {}
   }; }
   static get events() { return [{

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -437,7 +437,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; useDefaultFilter?: boolean; }",
+        "resolved": "{ caseSensitive?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",

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

@@ -69,8 +69,12 @@ export class VegaPagination {
       switch (item) {
         case 'currentPageLabel':
           return (h(VegaPaginationCurrentPageLabel, { total: this.total, current: this.current, pageSize: this.pageSize }));
-        case 'pageSizeSelector':
-          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: this.pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange }));
+        case 'pageSizeSelector': {
+          const pageSizeSelectorOptions = this.pageSizeSelectorOptions.includes(this.pageSize)
+            ? this.pageSizeSelectorOptions
+            : [...this.pageSizeSelectorOptions, this.pageSize];
+          return (h(VegaPaginationPageSizeSelector, { pageSize: this.pageSize, pageSizeSelectorOptions: pageSizeSelectorOptions, onChange: this.onPageSizeSelectorChange }));
+        }
         case 'pageSelector':
           return (h(VegaPaginationPageSelector, { current: this.current, total: this.total, onChange: this.onPageSelectorChange, pageCount: this.pageCount }));
         case 'goTo':

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-data-source-controller.js

@@ -133,9 +133,7 @@ export class VegaTableDataSourceController extends VegaSlimmer {
       ? this.columns.filter((column) => column.sorter && column.sorter !== 'event' && this.sortersMap.has(column.prop))
       : [];
     if (sortedColumns.length > 0) {
-      const sortProp = sortedColumns[sortedColumns.length - 1].prop;
-      const sortedOrder = this.sortersMap.get(sortProp).order;
-      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, sortProp, sortedOrder));
+      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, Array.from(this.sortersMap.values())));
     }
     else {
       this.setCurrentData(this.dataSource);

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

@@ -6,32 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isNonNullable } from '../../../../types/type-guard';
+import { VegaTableSorter } from './vega-table-sorter';
 /**
  * The sort controller for the vega-table
  */
 export 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}
    */
@@ -45,16 +24,20 @@ export class VegaTableSortController extends VegaSlimmer {
    * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
    */
   handleHeadSortClick(column, nextSortOrder) {
-    if (this.sortersMap.has(column.prop)) {
-      this.sortersMap.delete(column.prop);
+    if (!nextSortOrder) {
+      if (this.sortersMap.has(column.prop)) {
+        this.sortersMap.delete(column.prop);
+      }
     }
-    if (nextSortOrder) {
-      this.sortersMap.set(column.prop, { order: nextSortOrder, prop: column.prop });
+    else {
+      this.sortersMap.set(column.prop, new VegaTableSorter(column.prop, nextSortOrder, column.sorter));
     }
     if (column.sorter !== 'event') {
-      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), column.prop, nextSortOrder));
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), Array.from(this.sortersMap.values())));
     }
-    this.changeEventEmitter.emit({ sorters: [...this.sortersMap.values()] });
+    this.changeEventEmitter.emit({
+      sorters: Array.from(this.sortersMap.values()).map((s) => s.toExternalFormat()),
+    });
   }
   /**
    * Sync the default sort order from the columns
@@ -63,7 +46,25 @@ export class VegaTableSortController extends VegaSlimmer {
     this.columns
       .filter((column) => isNonNullable(column.sorter) && isNonNullable(column.sortOrder))
       .forEach((item) => {
-      this.sortersMap.set(item.prop, { order: item.sortOrder, prop: item.prop });
+      this.sortersMap.set(item.prop, new VegaTableSorter(item.prop, item.sortOrder, item.sorter));
+    });
+  }
+  /**
+   * The method to sort the data by sorter which include prop name and order
+   *
+   * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
+   * @param {VegaTableSorter[]} sorters - array of sorters ordered by sequence of columns to be sorted
+   * @returns {VegaTableDataSourceItem[]} The sorted data source
+   */
+  sortData(data, sorters) {
+    return [...data].sort((a, b) => {
+      for (const sorter of sorters) {
+        const result = sorter.sort(a, b);
+        if (isNonNullable(result)) {
+          return result;
+        }
+      }
+      return 0;
     });
   }
 }

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-sorter.js

@@ -0,0 +1,33 @@
+/**
+ * Vega Table Sorter
+ * This is a helper class for sorting table data based on defined columns to be sorted
+ * Supports multi-column sorting
+ */
+export class VegaTableSorter {
+  constructor(prop, order, sorter) {
+    this.prop = prop;
+    this.order = order;
+    this.sorter = sorter;
+  }
+  /**
+   * Sort utility
+   *
+   * @param {VegaTableDataSourceItem} a column value
+   * @param {VegaTableDataSourceItem} b column value
+   * @returns {Nullable<number>} compare result
+   */
+  sort(a, b) {
+    const compareResult = this.sorter(a, b);
+    if (compareResult !== 0) {
+      return this.order === 'asc' ? compareResult : -compareResult;
+    }
+  }
+  /**
+   * Get params from sorter object for external use
+   *
+   * @returns {{VegaTableSorterType}} sorter prop and order
+   */
+  toExternalFormat() {
+    return { prop: this.prop, order: this.order };
+  }
+}