@globalpayments/vega 2.20.1 → 2.22.0

package/dist/collection/components/vega-table/test/vega-table-sorter.test.js

@@ -0,0 +1,508 @@
+import { VegaTableSortController } from '../slimmers/controllers/vega-table-sort-controller';
+import { VegaTableSorter } from '../slimmers/controllers/vega-table-sorter';
+describe('VegaTableSorter', () => {
+  const sortController = new VegaTableSortController();
+  function sortData(data, sorters) {
+    const updatedSorters = sorters.map((s) => {
+      return new VegaTableSorter(s.prop, s.order, s.sorter);
+    });
+    return sortController.sortData([...data], updatedSorters);
+  }
+  describe('should handle single sorting as expected', () => {
+    it('should sort by amount in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+    it('should sort by balance in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'balance',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['balance'] - b['balance'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+  });
+  describe('should handle multi-sorting sorting as expected', () => {
+    it('should sort by age, then by score and where age is the same, sort by score', () => {
+      const data = [
+        { age: 25, score: 90 },
+        { age: 20, score: 85 },
+        { age: 25, score: 95 },
+        { age: 30, score: 85 },
+        { age: 20, score: 80 },
+        { age: 20, score: 100 },
+        { age: 25, score: 85 },
+        { age: 25, score: 85 },
+        { age: 30, score: 90 },
+        { age: 30, score: 90 },
+        { age: 30, score: 85 },
+      ];
+      const sorters = [
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { age: 20, score: 80 },
+        { age: 20, score: 85 },
+        { age: 20, score: 100 },
+        { age: 25, score: 85 },
+        { age: 25, score: 85 },
+        { age: 25, score: 90 },
+        { age: 25, score: 95 },
+        { age: 30, score: 85 },
+        { age: 30, score: 85 },
+        { age: 30, score: 90 },
+        { age: 30, score: 90 },
+      ]);
+    });
+    it('should sort by name, age and where name is the same, sort by age', () => {
+      const data = [
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Bob', age: 22, score: 90 },
+        { name: 'Charlie', age: 25, score: 82 },
+      ]);
+    });
+    it('should sort by age, score and where age is the same, sort by score', () => {
+      const data = [
+        { age: 25, score: 88 },
+        { age: 22, score: 95 },
+        { age: 25, score: 82 },
+        { age: 28, score: 78 },
+        { age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { age: 22, score: 90 },
+        { age: 22, score: 95 },
+        { age: 25, score: 82 },
+        { age: 25, score: 88 },
+        { age: 28, score: 78 },
+      ]);
+    });
+    it('should sort by name, age, score and where name is the same, sort by age, and where age is the same, sort by score', () => {
+      const data = [
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'age',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['age'] - b['age'];
+          },
+        },
+        {
+          prop: 'score',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a['score'] - b['score'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        { name: 'Alice', age: 25, score: 88 },
+        { name: 'Alice', age: 28, score: 78 },
+        { name: 'Bob', age: 22, score: 90 },
+        { name: 'Bob', age: 22, score: 95 },
+        { name: 'Charlie', age: 25, score: 82 },
+      ]);
+    });
+    it('should primarily sort by amount in desc order and if no tie in amount, secondary sorting of balance should not change sorted amount in desc', () => {
+      const data = [
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+        {
+          prop: 'balance',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['balance'] - b['balance'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          amount: 400,
+          balance: 300,
+          date: '01/03/2022',
+          key: '3',
+          name: 'B',
+          status: 'Not Started',
+        },
+        {
+          amount: 300,
+          balance: 200,
+          date: '01/02/2022',
+          key: '2',
+          name: 'D',
+          status: 'In Progress',
+        },
+        {
+          amount: 200,
+          balance: 400,
+          date: '01/04/2022',
+          key: '4',
+          name: 'C',
+          status: 'Pending',
+        },
+        {
+          amount: 100,
+          balance: 100,
+          date: '01/01/2022',
+          key: '1',
+          name: 'A',
+          status: 'In Progress',
+        },
+      ]);
+    });
+    it('should sort by name A-Z then by amount from largest to smallest', () => {
+      const data = [
+        {
+          key: '1',
+          date: '01/03/2022',
+          name: 'C',
+          amount: 30,
+          amount2: 30,
+          balance: '$300',
+        },
+        {
+          key: '2',
+          date: '01/06/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 20,
+          balance: '$400',
+        },
+        {
+          key: '3',
+          date: '01/05/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 30,
+          balance: '$401',
+        },
+        {
+          key: '4',
+          date: '01/02/2022',
+          name: 'B',
+          amount: 20,
+          amount2: 125,
+          balance: '$200',
+        },
+        {
+          key: '5',
+          date: '01/04/2022',
+          name: 'D',
+          amount: 300,
+          amount2: 130,
+          balance: '$402',
+        },
+      ];
+      const sorters = [
+        {
+          prop: 'name',
+          order: 'asc',
+          sorter: (a, b) => {
+            return a.name.localeCompare(b.name);
+          },
+        },
+        {
+          prop: 'amount',
+          order: 'desc',
+          sorter: (a, b) => {
+            return a['amount'] - b['amount'];
+          },
+        },
+      ];
+      expect(sortData(data, sorters)).toEqual([
+        {
+          key: '4',
+          date: '01/02/2022',
+          name: 'B',
+          amount: 20,
+          amount2: 125,
+          balance: '$200',
+        },
+        {
+          key: '1',
+          date: '01/03/2022',
+          name: 'C',
+          amount: 30,
+          amount2: 30,
+          balance: '$300',
+        },
+        {
+          key: '2',
+          date: '01/06/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 20,
+          balance: '$400',
+        },
+        {
+          key: '3',
+          date: '01/05/2022',
+          name: 'C',
+          amount: 20,
+          amount2: 30,
+          balance: '$401',
+        },
+        {
+          key: '5',
+          date: '01/04/2022',
+          name: 'D',
+          amount: 300,
+          amount2: 130,
+          balance: '$402',
+        },
+      ]);
+    });
+  });
+});

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

@@ -168,6 +168,12 @@ export class VegaTable {
      * Defines a unique key for each row in the table.
      */
     this.rowKey = 'key';
+    /**
+     * Defines the column sorting options
+     * Has optional property type: single | multiple
+     * If not specified, it defaults to multiple column sorting
+     */
+    this.sortConfig = { type: 'multiple' };
   }
   watchSelectedRowKeySet() {
     methodPlaceholder();
@@ -701,6 +707,27 @@ export class VegaTable {
         "tags": [],
         "text": "Customizes the behavior and appearance of the\n   scrollable container that wraps the table."
       }
+    },
+    "sortConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaTableSortConfig",
+        "resolved": "{ type: \"single\" | \"multiple\"; }",
+        "references": {
+          "VegaTableSortConfig": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Defines the column sorting options\nHas optional property type: single | multiple\nIf not specified, it defaults to multiple column sorting"
+      },
+      "defaultValue": "{ type: 'multiple' }"
     }
   }; }
   static get states() { return {

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -41,6 +41,8 @@ const entries = [
   ['vega-radio', [VegaChange, VegaFocus, VegaBlur]],
   ['vega-radio-group', [VegaChange]],
   ['vega-segment-control', [VegaChange]],
+  ['vega-selection-chip', [VegaChange]],
+  ['vega-selection-chip-group', [VegaChange]],
   ['vega-selection-tile', [VegaChange]],
   ['vega-selection-tile-group', [VegaChange]],
   ['vega-signature-capture', [VegaChange]],

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -1,3 +1,4 @@
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * Used to format a string using a custom formatter.
  */
@@ -10,9 +11,12 @@ export class CustomFormatterStrategy {
    * string formatter class that you are passing to the constructor of the class. This custom string
    * formatter class likely contains methods or properties related to formatting strings in a specific
    * way according to your requirements.
+   * @param {boolean} resetCaretPosition - The caret position should update to the last or keep the current position after format
    */
-  constructor(formatter) {
+  constructor(formatter, resetCaretPosition = false) {
+    this.resetCaretPositionFlag = false;
     this.formatter = formatter;
+    this.resetCaretPositionFlag = resetCaretPosition;
   }
   /**
    * The format function in TypeScript takes a string input and returns the formatted output using a
@@ -31,16 +35,24 @@ export class CustomFormatterStrategy {
    *
    * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
    * that represents the text input where you want to calculate the caret position.
+   * @param {number} caretPosition - The current position of caret
    * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
    * string.
    */
-  calculateCaretPosition(input) {
-    return this.format(input).length;
+  calculateCaretPosition(input, caretPosition) {
+    if (this.resetCaretPositionFlag === true) {
+      return this.format(input).length;
+    }
+    else if (isNonNullable(caretPosition)) {
+      const startValue = input.substring(0, caretPosition);
+      const maskedStartValue = this.format(startValue);
+      return caretPosition + (maskedStartValue.length - startValue.length);
+    }
   }
   /**
    * Trigger the formatter at init
    *
-   * @returns {boolean} true
+   * @returns {boolean} true or false
    */
   shouldTriggerAtInit() {
     return true;

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -1,7 +1,12 @@
 import { CustomFormatterStrategy } from '../../string-formatter/custom-formatter-strategy';
 test('custom formatter strategy is working as expected', () => {
-  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase(), true);
   expect(customFormatterStrategy.format('test')).toBe('TEST');
-  expect(customFormatterStrategy.calculateCaretPosition('test')).toBe(4);
+  expect(customFormatterStrategy.calculateCaretPosition('test', null)).toBe(4);
   expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
 });
+test('custom formatter strategy method calculateCaretPosition is working as expected', () => {
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  expect(customFormatterStrategy.calculateCaretPosition('test', null)).toBe(undefined);
+  expect(customFormatterStrategy.calculateCaretPosition('test', 3)).toBe(3);
+});

package/dist/collection/helpers/slimmers/mutation-observer/mutation-observer-filters.js

@@ -37,3 +37,15 @@ export const AttributeOldValueMutationFilter = () => {
     return (mutations.find((mutation) => mutation.attributeName && mutation.oldValue !== host.getAttribute(mutation.attributeName)) !== undefined);
   };
 };
+/**
+ * Filters mutations based on specified tag names or attribute changes.
+ *
+ * @param {string[]} tagNames - The tagName of need listened child.
+ * @returns {Function} - Filter function.
+ */
+export const TagNameAndAttributeMutationFilter = (...tagNames) => {
+  return (mutations) => {
+    return (TagNameMutationFilter(...tagNames)(mutations) ||
+      mutations.find((mutation) => mutation.attributeName && tagNames.includes(mutation.target.tagName)) !== undefined);
+  };
+};

package/dist/collection/helpers/slimmers/mutation-observer/mutation-observer-slimmer.js

@@ -51,7 +51,7 @@ export class MutationObserverSlimmer extends VegaSlimmer {
     this.mutationObserver = new MutationObserver(async (mutations) => {
       if (!this.observerEntry.mutationFilter ||
         this.observerEntry.mutationFilter(mutations, this.host)) {
-        this.observerEntry.callback();
+        this.observerEntry.callback(mutations);
       }
     });
   }