@globalpayments/vega 2.48.0 → 2.49.1

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

@@ -30,6 +30,7 @@ import { VegaInputCompactWidthController } from './slimmers/controllers/vega-inp
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaInputStateController } from './slimmers/controllers/vega-input-state-controller';
 import { isArrayEqual } from '../../utils/array';
+import { deepEqual } from '../../utils/object';
 /**
  * @vegaVersion 1.0.5
  */
@@ -336,9 +337,8 @@ export class VegaInput {
    */
   /* istanbul ignore next */
   watchMaskChange(newValue, oldValue) {
-    if (Array.isArray(newValue) && Array.isArray(oldValue) && isArrayEqual(newValue, oldValue, true)) {
+    if (this.areMaskConfigsEqual(newValue, oldValue))
       return;
-    }
     this.maskConfigController.setupStringFormatter(this.inputRef);
   }
   /**
@@ -404,6 +404,17 @@ export class VegaInput {
     return this.hint !== '' ? (h("div", { class: "vega-hint" },
       h("label", null, this.hint))) : null;
   }
+  /**
+   * Compares two MaskConfigType objects or arrays for equality.
+   */
+  /* istanbul ignore next */
+  areMaskConfigsEqual(a, b) {
+    const arrA = Array.isArray(a) ? a : [a];
+    const arrB = Array.isArray(b) ? b : [b];
+    return isArrayEqual(arrA, arrB, true, (a, b) => {
+      return deepEqual(a, b) ? 0 : -1;
+    });
+  }
   static get is() { return "vega-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

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

@@ -14,6 +14,7 @@ import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { FeatureFlag } from '../../../../helpers/public-api';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -89,6 +90,7 @@ export class CountrySelectRenderer extends VegaSlimmer {
           id: country.countryCode,
           displayName: `+${country.callingCode}`,
         })), vegaDropdownProps: {
+          isScreenPosition: FeatureFlag.isEnabled('VEGA_INPUT_PHONE_NUMBER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
           matchTargetWidth: false,
           size: this.estimateMaxWidthOfCountries(countries),
         }, size: this.size, prefixIcon: VegaInternalIconManager.getIconKey(this.countryCode), disabled: this.disabled, placeholder: "", ref: (inputSelect) => {

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.css

@@ -60,6 +60,9 @@
 :host .rich-text-content h1,
 :host .rich-text-content h2,
 :host .rich-text-content h3,
+:host .rich-text-content h4,
+:host .rich-text-content h5,
+:host .rich-text-content h6,
 :host .rich-text-content p {
   margin: 0;
 }

package/dist/collection/components/vega-rich-text-editor/dto/annotations/text-style-annotation.js

@@ -62,6 +62,15 @@ export class TextStyleAnnotation extends BlockAnnotation {
       case 'heading-3': {
         return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
       }
+      case 'heading-4': {
+        return { fontFamily: 'Inter', fontSize: '16px', lineHeight: '22px', fontWeight: '500' };
+      }
+      case 'heading-5': {
+        return { fontFamily: 'Inter', fontSize: '14px', lineHeight: '22px', fontWeight: '500' };
+      }
+      case 'heading-6': {
+        return { fontFamily: 'Inter', fontSize: '12px', lineHeight: '22px', fontWeight: '500' };
+      }
     }
   }
 }

package/dist/collection/components/vega-rich-text-editor/dto/blocks/text-block.js

@@ -86,7 +86,17 @@ export class RTETextBlock extends RTEBlock {
    * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
    */
   static isAcceptableTextStyle(type) {
-    return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
+    return [
+      'title',
+      'subtitle',
+      'paragraph',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+    ].includes(type);
   }
   /**
    * Merges RTETextNode nodes based on certain conditions.

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/text-block-renderer.js

@@ -20,6 +20,12 @@ class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
         return `h2`;
       case 'heading-3':
         return `h3`;
+      case 'heading-4':
+        return `h4`;
+      case 'heading-5':
+        return `h5`;
+      case 'heading-6':
+        return `h6`;
       case 'paragraph':
         return 'p';
     }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract.js

@@ -22,7 +22,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    *   </li>
    *
    * @param {HTMLElement[]} elements - Child elements.
-   * @param {HTMLElement[]} annotations - Parent annotations.
+   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} annotations - Parent annotations.
    * @returns {VegaRTETextNode[]} - Text node DTO.
    */
   generateChildNodes(elements, annotations = {}) {
@@ -39,7 +39,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
         });
       }
       else {
-        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child))));
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child, annotations))));
       }
     });
     return childNodes;
@@ -60,27 +60,14 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       annotations.indent = indent;
     return annotations;
   }
-  /**
-   * Check is a invalid text node.
-   *
-   * @param {HTMLElement} element - Current node element.
-   * @returns {boolean} - boolean.
-   */
-  isInvalidTextNode(element) {
-    if (element.nodeValue && element.nodeValue.includes('\t')) {
-      const value = element.nodeValue.replace(/\n|\t/gm, '');
-      if (value.length === 0)
-        return true;
-    }
-    return false;
-  }
   /**
    * Generate annotations map for text node element.
    *
    * @param {HTMLElement} element - current element.
+   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} parentAnnotations - parent annotations
    * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
    */
-  generateTextNodeAnnotations(element) {
+  generateTextNodeAnnotations(element, parentAnnotations = {}) {
     if (this.isCode(element))
       return { code: true };
     const annotations = {
@@ -89,6 +76,10 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       underline: this.isUnderline(element),
       strikethrough: this.isStrikethrough(element),
     };
+    parentAnnotations.bold && (annotations.bold = true);
+    parentAnnotations.underline && (annotations.underline = true);
+    parentAnnotations.italic && (annotations.italic = true);
+    parentAnnotations.strikethrough && (annotations.strikethrough = true);
     const color = this.getColor(element);
     const link = this.getLink(element);
     if (color)
@@ -97,6 +88,20 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       annotations.link = link;
     return annotations;
   }
+  /**
+   * Check is a invalid text node.
+   *
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
+   */
+  isInvalidTextNode(element) {
+    if (element.nodeValue && element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return false;
+  }
   /**
    * Is code element.
    *
@@ -104,7 +109,9 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    * @returns {boolean} - boolean.
    */
   isCode(element) {
-    return element.classList.contains('v-rte--code') || element.nodeName === 'CODE';
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.style.fontFamily === 'monospace');
   }
   /**
    * Is bold element.
@@ -114,6 +121,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    */
   isBold(element) {
     return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
       element.style.fontWeight === 'bold' ||
       element.style.fontWeight === '700');
   }
@@ -135,6 +143,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   isUnderline(element) {
     return (element.style.textDecoration.includes('underline') ||
       element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
       element.classList.contains('v-rte--underline'));
   }
   /**
@@ -146,6 +155,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   isStrikethrough(element) {
     return (element.style.textDecoration.includes('line-through') ||
       element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
       element.classList.contains('v-rte--strikethrough'));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -33,7 +33,7 @@ export class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrateg
    */
   handle(elementsArray) {
     const parent = elementsArray[0].parentElement;
-    const nodes = this.generateChildNodes(elementsArray);
+    const nodes = this.generateChildNodes(elementsArray, this.generateTextNodeAnnotations(parent));
     if (nodes.length === 0)
       return null;
     return RTETextBlock.from({
@@ -68,4 +68,7 @@ ContinueInlineToRTETextBlockStrategy.canHandleTags = [
   'U',
   'A',
   'VEGA-RICH-TEXT-LINK-EDITOR',
+  'B',
+  'INS',
+  'DEL',
 ];

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-block-to-rte-text-block-strategy.js

@@ -11,7 +11,16 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
    * @returns {number} - can be handled element count.
    */
   canHandle(elementsArray, currentIndex) {
-    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(elementsArray[currentIndex]))
+    return [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+      'subtitle',
+    ].includes(this.getElementType(elementsArray[currentIndex]))
       ? 1
       : 0;
   }
@@ -78,6 +87,12 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
         return 'heading-2';
       case 'H3':
         return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
       default:
         return '';
     }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/li-to-rte-list-item-block-strategy.js

@@ -25,7 +25,7 @@ export class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstrac
     return RTEListItemBlock.from({
       id: generateUUID(),
       type: 'list-item',
-      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName))),
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName)), this.generateTextNodeAnnotations(elementsArray[0])),
       annotations: this.generateBlockAnnotations(elementsArray[0]),
     });
   }

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

@@ -52,15 +52,17 @@ export class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
       const primaryMargin = 48;
       const groupWidth = this.host.getBoundingClientRect().width;
       let tabGroupContainerWidth = this.variant === 'secondary' ? groupWidth : groupWidth - primaryMargin;
-      if (startIndex > 0) {
-        tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH + this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE;
-      }
-      const showRightButton = values.length > 0 &&
-        values.slice(startIndex).reduce((prev, current) => prev + current) >
-          tabGroupContainerWidth &&
-        tabGroupContainerWidth > 0;
-      if (showRightButton) {
-        tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
+      if (this.overflow === 'menu') {
+        if (startIndex > 0) {
+          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH + this.TAB_SIDE_BUTTON_AND_CONTENT_SPACE;
+        }
+        const showRightButton = values.length > 0 &&
+          values.slice(startIndex).reduce((prev, current) => prev + current) >
+            tabGroupContainerWidth &&
+          tabGroupContainerWidth > 0;
+        if (showRightButton) {
+          tabGroupContainerWidth -= this.TAB_SIDE_BUTTON_WIDTH;
+        }
       }
       return tabGroupContainerWidth;
     };
@@ -136,9 +138,14 @@ export class VegaTabGroupPagesController extends PageResizeObserverSlimmer {
    */
   initTabPages() {
     if (this.tabItems) {
-      this.tabPages = this.valuePaginator.paginate(this.tabItems, (_input, index) => this.tabWidthArray[index] > 0
-        ? this.tabWidthArray[index] + Number(this.formatAndValidGap(this.gap))
-        : this.tabWidthArray[index], this.getTabContainerSpace);
+      if (this.overflow === 'scroll') {
+        this.tabPages = [[...this.tabItems]];
+      }
+      else {
+        this.tabPages = this.valuePaginator.paginate(this.tabItems, (_input, index) => this.tabWidthArray[index] > 0
+          ? this.tabWidthArray[index] + Number(this.formatAndValidGap(this.gap))
+          : this.tabWidthArray[index], this.getTabContainerSpace);
+      }
     }
   }
   /*
@@ -199,6 +206,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupPagesController.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupPagesController.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupSliderStateController' })
 ], VegaTabGroupPagesController.prototype, "sliderStateController", void 0);

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

@@ -23,10 +23,11 @@ export class VegaTabGroupRenderer extends VegaSlimmer {
           'more-tab': this.tabPages.length > 1,
           'tab-style-secondary': this.variant === 'secondary',
           'tab-style-primary': this.variant !== 'secondary',
+          'swipe-more-tabs': this.overflow === 'scroll',
         }, ref: (node) => (this.tabMenuContainer = node) },
-        this.directionButtonRenderer.render('left'),
+        this.overflow === 'menu' && this.directionButtonRenderer.render('left'),
         this.tabListRenderer.render(),
-        this.directionButtonRenderer.render('right')),
+        this.overflow === 'menu' && this.directionButtonRenderer.render('right')),
       h("div", { class: "horizontal-divider" }),
       this.contentRenderer.render()));
   }
@@ -37,6 +38,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupRenderer.prototype, "variant", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupRenderer.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaTabGroupTabListRenderer' })
 ], VegaTabGroupRenderer.prototype, "tabListRenderer", void 0);

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

@@ -21,10 +21,23 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("div", { class: "tab-list" },
-      h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage) => {
-        return h("div", null, this.renderTabList(tabPage));
-      })) : (h("div", null, this.renderTabList(this.tabItems))))));
+    return (h("div", { class: {
+        'tab-list': true,
+        'menu': this.overflow === 'menu',
+        'scroll': this.overflow === 'scroll',
+      } },
+      this.overflow === 'menu' && this.renderTabListInMenuOverflow(),
+      this.overflow === 'scroll' && this.renderTabListInScrollOverflow()));
+  }
+  renderTabListInMenuOverflow() {
+    return (h("vega-carousel", { showSlider: false, ref: (el) => (this.carouselDom = el) }, this.tabPages.length > 0 ? (this.tabPages.map((tabPage, index) => {
+      return h("div", { key: index }, this.renderTabList(tabPage));
+    })) : (h("div", null, this.renderTabList(this.tabItems)))));
+  }
+  renderTabListInScrollOverflow() {
+    return (h("div", { class: "overflow-scroll" }, this.tabPages.map((tabPage, index) => {
+      return h("div", { key: index }, this.renderTabList(tabPage));
+    })));
   }
   renderTabList(showTabItems) {
     return (h("vega-flex", { gap: this.gap }, showTabItems.map((item) => {
@@ -106,6 +119,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "tabItems", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTabGroupTabListRenderer.prototype, "overflow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTabGroupTabListRenderer.prototype, "positionRelativeTo", void 0);

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

@@ -15,6 +15,22 @@
   background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
 }
 
+.tab-content-container .tab-list.scroll {
+  width: 100%;
+  overflow: hidden;
+}
+.tab-content-container .tab-list.scroll .overflow-scroll > div {
+  display: flex;
+  overflow-x: auto;
+  scroll-behavior: smooth;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+.tab-content-container .tab-list.scroll .overflow-scroll > div::-webkit-scrollbar {
+  display: none;
+}
+
 .tab-content-container.more-tab .vega-tab {
   flex-grow: 1;
 }

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

@@ -84,6 +84,12 @@ export class VegaTabGroup {
      * @vegaVersion 1.39.0
      */
     this.variant = 'primary';
+    /**
+     * Specifies the overflow navigation for many tab items within the tab group.
+     *
+     * @vegaVersion __VERSION__
+     */
+    this.overflow = 'menu';
   }
   /**
    * The below method is e2e-test covered in
@@ -283,6 +289,32 @@ export class VegaTabGroup {
       "attribute": "variant",
       "reflect": false,
       "defaultValue": "'primary'"
+    },
+    "overflow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "TabGroupOverflowType",
+        "resolved": "\"menu\" | \"scroll\"",
+        "references": {
+          "TabGroupOverflowType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "__VERSION__"
+          }],
+        "text": "Specifies the overflow navigation for many tab items within the tab group."
+      },
+      "attribute": "overflow",
+      "reflect": false,
+      "defaultValue": "'menu'"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-toggle-switch/vega-toggle-switch.js

@@ -45,6 +45,7 @@ export class VegaToggleSwitch {
     this.checked = false;
     /**
      * The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.
+     * This property is included for form control compatibility and can be used interchangeably with the checked property.
      *
      * @vegaVersion 2.25.0
      */
@@ -125,7 +126,12 @@ export class VegaToggleSwitch {
     methodPlaceholder();
   }
   componentWillLoad() {
-    this.value = this.checked;
+    if (!this.checked && this.value === true) {
+      this.checked = true;
+    }
+    else {
+      this.value = this.checked;
+    }
   }
   render() {
     let divContainerCss = this.checked
@@ -189,7 +195,7 @@ export class VegaToggleSwitch {
             "name": "vegaVersion",
             "text": "2.25.0"
           }],
-        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked."
+        "text": "The `value` property returns `true` when the toggle switch is checked, and `false` when it is unchecked.\nThis property is included for form control compatibility and can be used interchangeably with the checked property."
       },
       "attribute": "value",
       "reflect": true,

package/dist/collection/helpers/feature-control/feature-flags-map.js

@@ -203,5 +203,11 @@ const FeatureFlagsMap = {
     createdAtVersion: '2.41.0',
     disabledByDefault: true,
   },
+  'VEGA_INPUT_PHONE_NUMBER.ENABLE_CALCULATION_POSITION_BY_SCREEN': {
+    description: `Feature flag that enable use screen to calculation position.`,
+    createdTimestamp: 1750317683577,
+    createdAtVersion: '2.48.1',
+    disabledByDefault: true,
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

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

@@ -84,7 +84,9 @@ export class FormFieldControllerSlimmer extends VegaSlimmer {
    * @param {FormFieldValidationRule<unknown>[]} oldRules the component property validationRules old value
    */
   watchValidationRulesByFormControllerSlimmer(newRules, oldRules) {
-    if (!isArrayEqual(newRules, oldRules)) {
+    if (!isArrayEqual(newRules, oldRules, false, (a, b) => {
+      return a === b ? 0 : -1;
+    })) {
       this.setAdditionalRules();
       this.internalValidate();
     }

package/dist/collection/utils/array.js

@@ -11,35 +11,38 @@ export const flattenChildren = (arr, children = 'children') => {
   return arr.reduce((result, item) => result.concat(item[children] ? flattenChildren(item[children], children) : item), []);
 };
 /**
- * The function checks if two arrays are equal, either in order or ignoring order.
+ * The function checks if two arrays are equal, either in order or ignoring order with specific comparator.
  *
- * @param {T[]} first - An array of type T, which is the first array to compare.
- * @param {T[]} second - `second` is the second array that is being compared for equality with the
- * first array (`first`).
+ * @param {T[]} array1 - An array of type T, which is the first array to compare.
+ * @param {T[]} array2 - `array2` is the second array that is being compared for equality with the
+ * first array (`array1`).
  * @param {boolean} [ignoreOrder=false] - The `ignoreOrder` parameter is a boolean flag that determines
  * whether the order of elements in the arrays should be taken into account when comparing them. If
  * `ignoreOrder` is set to `true`, the function will return `true` if the two arrays contain the same
  * elements, regardless of their order
+ * @param {boolean} [comparator=(a: T, b: T) => number] - The `comparator` parameter is the specific custom method used to compare the two arrays.
  * @returns {boolean} The function `isArrayEqual` returns a boolean value indicating whether the two input arrays
  * are equal or not. If the arrays are equal, it returns `true`, otherwise it returns `false`. The
  * equality of the arrays can be determined either by comparing the elements in the same order or by
  * ignoring the order of the elements.
  */
-export const isArrayEqual = (first, second, ignoreOrder = false) => {
-  if (!Array.isArray(first) || !Array.isArray(second) || first.length != second.length)
+export const isArrayEqual = (array1, array2, ignoreOrder = false, comparator = (a, b) => {
+  if (a < b)
+    return -1;
+  if (a > b)
+    return 1;
+  return 0;
+}) => {
+  if (!Array.isArray(array1) || !Array.isArray(array2) || array1.length != array2.length)
     return false;
   if (ignoreOrder) {
-    const firstSet = new Set(first);
-    const secondSet = new Set(second);
-    return first.every((item) => secondSet.has(item)) && second.every((item) => firstSet.has(item));
+    // Create copies to avoid mutating the original arrays
+    const sortedArray1 = [...array1].sort(comparator);
+    const sortedArray2 = [...array2].sort(comparator);
+    return sortedArray1.every((element, index) => comparator(element, sortedArray2[index]) === 0);
   }
   else {
-    for (let i = 0; i < first.length; i++) {
-      if (first[i] !== second[i]) {
-        return false;
-      }
-    }
-    return true;
+    return array1.every((element, index) => comparator(element, array2[index]) === 0);
   }
 };
 /**