@globalpayments/vega 2.20.0 → 2.21.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/constants/ui.js

@@ -72,6 +72,7 @@ export const VegaNativeEventName = [
   'countryChange',
   'actionButtonClick',
   'moreActionClick',
+  'expand',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/change-manager/subject/static-remote-invocation-subject/static-remote-invocation-call-registry.js

@@ -12,7 +12,7 @@ export class StaticRemoteInvocationCallRegistry {
    * @param {unknown[]} args - The `args` parameter of specific method.
    * @returns {unknown} The result of call `remoteInvocation`.
    */
-  staticRemoteInvocationCall(subject, ...args) {
+  call(subject, ...args) {
     let result = null;
     changeManager.notify(subject, {
       args,
@@ -30,7 +30,7 @@ export class StaticRemoteInvocationCallRegistry {
    * @param {Subject} subject - A static subject.
    * @param {Function}remoteInvocationHandler - The method that is ultimately called.
    */
-  staticRegisterRemoteInvocationCallHandler(subject, remoteInvocationHandler) {
+  register(subject, remoteInvocationHandler) {
     const observer = new Observer(this.isAcceptableObserver.bind(this), (payload) => {
       const result = remoteInvocationHandler(...payload.args);
       payload.resultCallback(result);
@@ -42,7 +42,7 @@ export class StaticRemoteInvocationCallRegistry {
    *
    * @param {Subject} subject - A static subject.
    */
-  unRegisterRemoteInvocationCallHandler(subject) {
+  unRegister(subject) {
     changeManager.clearObserversBySubject(subject);
   }
   /**

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -24,3 +24,4 @@ export const FIELD_ERROR_STATE_CHANGE = new StaticSubject('FIELD_ERROR_STATE_CHA
 export const VEGA_VIRTUAL_SCROLL_TO_BOTTOM = new StaticSubject('VEGA_VIRTUAL_SCROLL_TO_BOTTOM');
 export const SELECTION_TILE_VALUE_CHANGE = new StaticSubject('SELECTION_TILE_VALUE_CHANGE');
 export const DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN');
+export const DROPDOWN_SEARCH_INTERNAL_OVERRIDEN = new StaticSubject('DROPDOWN_SEARCH_INTERNAL_OVERRIDEN');

package/dist/collection/helpers/change-manager/test/static-remote-invocation-subject.test.js

@@ -4,11 +4,11 @@ import { DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN } from '../subject/static-subje
 test('StaticRemoteInvocationCallRegistry', () => {
   const length = changeManager['pubSubMap'].size;
   const mockFun = jest.fn();
-  RemoteInvocationCallRegistry.staticRegisterRemoteInvocationCallHandler(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, mockFun);
+  RemoteInvocationCallRegistry.register(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, mockFun);
   expect(changeManager['pubSubMap'].size).toEqual(length + 1);
-  RemoteInvocationCallRegistry.staticRemoteInvocationCall(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, 'a', 'b');
+  RemoteInvocationCallRegistry.call(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN, 'a', 'b');
   expect(mockFun).toBeCalledTimes(1);
   expect(mockFun).toBeCalledWith('a', 'b');
-  RemoteInvocationCallRegistry.unRegisterRemoteInvocationCallHandler(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN);
+  RemoteInvocationCallRegistry.unRegister(DROPDOWN_RENDER_ITEM_INTERNAL_OVERRIDEN);
   expect(changeManager['pubSubMap'].size).toEqual(length);
 });

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -80,7 +80,7 @@ export const VegaToggleStatus = new VegaEventID('vegaToggleStatus', 'toggleStatu
 export const VegaStateUpdate = new VegaEventID('vegaStateUpdate', 'stateUpdate');
 export const VegaGroupClick = new VegaEventID('vegaGroupClick', 'groupClick');
 export const VegaMenuClick = new VegaEventID('vegaMenuClick', 'menuClick');
-export const VegaExpand = new VegaEventID('vegaExpand', 'accordionExpand');
+export const VegaExpand = new VegaEventID('vegaExpand', 'expand');
 export const VegaDropdownShow = new VegaEventID('vegaShow', 'dropdownShow');
 export const VegaDropdownHide = new VegaEventID('vegaHide', 'dropdownHide');
 export const VegaDropdownSearch = new VegaEventID('vegaSearch', 'dropdownSearch');

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/form-field-controller-slimmer.js

@@ -13,6 +13,7 @@ import { FORM_ELEMENT_VALIDATE } from '../change-manager/subject/static-subject/
 import { FormFieldValidInvokeSlimmer } from './form-field-valid-invoke-slimmer';
 import { MutationObserverSlimmer } from './mutation-observer/mutation-observer-slimmer';
 import { AttributeOldValueMutationFilter } from './mutation-observer/mutation-observer-filters';
+import { isArrayEqual } from '../../utils/array';
 /**
  * The `FormFieldControllerSlimmer` class is a TypeScript class that extends `VegaSlimmer` and provides functionality for managing form field components.
  * TODO:
@@ -76,10 +77,15 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
   /**
    * watch the prop validationRules and call the valid method
    * some components has not a prop validationRules
+   *
+   * @param {FormFieldValidationRule<unknown>[]} newRules the component property validationRules new value
+   * @param {FormFieldValidationRule<unknown>[]} oldRules the component property validationRules old value
    */
-  watchValidationRulesByFormControllerSlimmer() {
-    this.setAdditionalRules();
-    this.internalValidate();
+  watchValidationRulesByFormControllerSlimmer(newRules, oldRules) {
+    if (!isArrayEqual(newRules, oldRules)) {
+      this.setAdditionalRules();
+      this.internalValidate();
+    }
   }
   /**
    * inject form file help when componentWillLoad method call

package/dist/collection/helpers/slimmers/test/form-field-controller-slimmer.test.js

@@ -247,6 +247,23 @@ describe('FormFieldControllerSlimmer test suite', () => {
       mockedComponent['formFieldController']['getPropertyRules']();
       expect(mockRule).toBeCalledWith(false, true);
     });
+    test('should invoke validate method correct when validationRules change', () => {
+      const mockedComponent = new MockedComponent();
+      const internalValidate = jest.fn();
+      mockedComponent['formFieldController']['internalValidate'] = internalValidate;
+      const mockRule = {
+        evaluate: jest.fn(),
+        canEvaluate: jest.fn(),
+        shouldShowError: jest.fn(),
+      };
+      const mockRules = [mockRule];
+      mockedComponent['formFieldController']['watchValidationRulesByFormControllerSlimmer'](mockRules, mockRules);
+      expect(internalValidate).toBeCalledTimes(0);
+      mockedComponent['formFieldController']['watchValidationRulesByFormControllerSlimmer']([mockRule], [mockRule]);
+      expect(internalValidate).toBeCalledTimes(0);
+      mockedComponent['formFieldController']['watchValidationRulesByFormControllerSlimmer']([Object.assign({}, mockRule)], [mockRule]);
+      expect(internalValidate).toBeCalledTimes(1);
+    });
   });
 });
 describe('FormFieldControllerSlimmer#isValidFormField', () => {