@globalpayments/vega 2.28.1 → 2.30.0

package/dist/collection/helpers/ui/element-appender.js

@@ -4,14 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { getPositionBox } from '../../utils/position';
-import ResponsiveFormatFacade from '../formatter/responsive-map-formatter/responsive-format-facade';
 import { isElementVisible } from '../../utils/ui';
 import InternalVegaZIndexManager from '../zindex/internal-vega-z-index-manager';
 import { LogUtility } from '../../utils/log';
 import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
 import { ElementAppenderContainerController } from '../slimmers/element-appender-container/element-appender-container-controller';
+import { PositionCalculationController } from '../slimmers/position-calculation/position-calculation-controller';
 /**
  * This class is responsible for attaching the appendable element to the host element and adjusting its position
  *
@@ -50,8 +49,6 @@ export class ElementAppender {
           // https://gethired.atlassian.net/browse/VD-1087
           if (isElementVisible(this.showConfig.target) &&
             isElementVisible(this.showConfig.appendableElement)) {
-            this.adjustWidth();
-            this.adjustHeight();
             this.adjustPosition();
           }
         },
@@ -60,6 +57,7 @@ export class ElementAppender {
       },
     ]);
     this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.positionCalculationController = new PositionCalculationController();
     this.showConfigCallback = showConfigCallback;
     this.showConfigCallbackTarget = showConfigCallbackTarget;
     const config = this.getShowConfig();
@@ -84,8 +82,6 @@ export class ElementAppender {
     /* A function that takes no parameters and returns nothing. It sets the position of the appendable
     element. */
     this.prepareShow();
-    this.adjustWidth();
-    this.adjustHeight();
     this.adjustPosition();
     this.setZIndex();
     this.toggleShow(true);
@@ -101,6 +97,18 @@ export class ElementAppender {
     this.resetContainerPosition();
     InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
   }
+  /**
+   * Update position while window scroll.
+   */
+  onScroll() {
+    var _a;
+    const currentTargetRect = this.showConfig.target.getBoundingClientRect();
+    if (this.showConfig.isScreenPosition &&
+      (currentTargetRect.left !== ((_a = this.previousTargetRect) === null || _a === void 0 ? void 0 : _a.left) ||
+        currentTargetRect.top !== this.previousTargetRect.top)) {
+      this.adjustPosition(true);
+    }
+  }
   /* istanbul ignore next */
   /**
    * It removes the z-index from the appendable element, removes the appendable element from the DOM, and
@@ -212,76 +220,16 @@ export class ElementAppender {
       this.container.style.position = 'relative';
     }
     this.showConfig.appendableElement.style.boxSizing = 'border-box';
-  }
-  /**
-   * It sets the width of the appendable element to the width of the target element if the
-   * matchTargetWidth property is true, otherwise it sets the width of the appendable element to the
-   * size property
-   *
-   * @returns {void}
-   */
-  adjustWidth() {
-    if (this.showConfig.matchTargetWidth) {
-      const { width: hostWidth } = this.showConfig.target.getBoundingClientRect();
-      this.setRelatedWidth('width', hostWidth);
-    }
-    else {
-      this.setRelatedWidth('width', this.showConfig.size);
-      this.setRelatedWidth('minWidth', this.showConfig.minWidth);
-      this.setRelatedWidth('maxWidth', this.showConfig.maxWidth);
-    }
-  }
-  /**
-   * It takes a name and a value, formats the value, and then sets the style of the element
-   *
-   * @param {'width' | 'maxWidth' | 'minWidth'} name - 'width' | 'maxWidth' | 'minWidth'
-   * @param {ResponsiveType<SizeType>} value - ResponsiveType<SizeType>
-   * @returns {void}
-   */
-  setRelatedWidth(name, value) {
-    if (!value)
-      return;
-    const formattedValue = ResponsiveFormatFacade.format(value, 'size');
-    if (formattedValue) {
-      this.showConfig.appendableElement.style[name] =
-        typeof formattedValue === 'number' ? `${formattedValue}px` : formattedValue;
-    }
-  }
-  /**
-   * > If the `matchContainerHeight` property is set to `true`, then the maximum height of the dropdown
-   * is set to the height of the container minus the height of the target minus the top offset of the
-   * target
-   *
-   * @returns {void}
-   */
-  adjustHeight() {
-    if (this.showConfig.matchContainerHeight) {
-      const { height: targetHeight } = this.showConfig.target.getBoundingClientRect();
-      let maxHeight = this.container.scrollHeight - this.showConfig.target.offsetTop - targetHeight;
-      if (this.showConfig.maxHeight) {
-        maxHeight = Math.min(maxHeight, this.showConfig.maxHeight);
-      }
-      this.showConfig.appendableElement.style.maxHeight = `${maxHeight}px`;
-    }
-    else if (this.showConfig.maxHeight) {
-      this.showConfig.appendableElement.style.maxHeight = `${this.showConfig.maxHeight}px`;
-    }
+    this.positionCalculationController.setCalculationStrategy();
   }
   /**
    * A function that takes no parameters and returns nothing. It sets the position of the appendable element.
    *
+   * @param {boolean} usePreviousPlacement - Should keep use previous placement and alignment.
    * @returns {void}
    */
-  adjustPosition() {
-    const translocation = this.showConfig.translocation &&
-      ResponsiveFormatFacade.format(this.showConfig.translocation, 'translocation');
-    const positionBox = getPositionBox(this.container, this.showConfig.appendableElement, this.showConfig.target, this.showConfig.placement, this.showConfig.alignment, translocation);
-    this.showConfig.appendableElement.style.left = `${positionBox.left}px`;
-    this.showConfig.appendableElement.style.top = `${positionBox.top}px`;
-    this.showConfig.appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom');
-    this.showConfig.appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end');
-    this.showConfig.appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
-    this.showConfig.appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+  adjustPosition(usePreviousPlacement) {
+    this.positionCalculationController.adjustPosition(usePreviousPlacement);
   }
   /**
    * Sets the z-index of the appendable element to 11000.
@@ -317,3 +265,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], ElementAppender.prototype, "elementAppenderContainerController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "positionCalculationController", void 0);

package/dist/collection/helpers/ui/test/element-appender.test.js

@@ -423,3 +423,56 @@ test('should append element to positionRelativeTo element only once when the ele
   expect(element.parentElement).toEqual(container);
   expect(container.append).toBeCalledTimes(1);
 });
+describe('screen position', () => {
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.dropdown');
+  const target = document.querySelector('.test-host');
+  beforeAll(() => {
+    Object.assign(window.screen, { width: 500 });
+    Object.assign(window.screen, { height: 500 });
+    spyOn(element, 'getBoundingClientRect').and.returnValue({ width: 50, height: 50 });
+  });
+  test('return result as expect when call show', () => {
+    const targetRectSpyOn = spyOn(target, 'getBoundingClientRect');
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 100,
+      left: 100,
+    });
+    const drop1 = new ElementAppender({
+      target: target,
+      appendableElement: element,
+      placement: ['top', 'bottom'],
+      isScreenPosition: true,
+    });
+    drop1.show();
+    expect(element).toEqualHtml(`
+			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+		`);
+    drop1['previousTargetRect'] = {
+      left: 10,
+      top: 10,
+    };
+    drop1.onScroll();
+    expect(element).toEqualHtml(`
+			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: 50px; z-index: 10001;"></div>
+		`);
+    drop1['previousTargetRect'] = {
+      left: 100,
+      top: 10,
+    };
+    targetRectSpyOn.and.returnValue({
+      width: 100,
+      height: 100,
+      top: 40,
+      left: 100,
+    });
+    drop1.onScroll();
+    drop1['previousTargetRect'] = undefined;
+    drop1.onScroll();
+    expect(element).toEqualHtml(`
+			<div class="dropdown vega-alignment-start vega-placement-top" style="box-sizing: border-box; position: fixed; left: 100px; top: -10px; z-index: 10001;"></div>
+		`);
+  });
+});

package/dist/collection/utils/number.js

@@ -81,3 +81,13 @@ export const mapStringToNumberArray = (value) => value
  * @returns {number[]} - return a number[]
  */
 export const mapParityDigits = (values, strategy) => values.map((v, index) => (strategy(index) ? v : parityDigitSum(v * 2)));
+/**
+ * Calculates the number of decimal in a given number.
+ *
+ * @param {number} value - number.
+ * @returns {number} - The number of decimal.
+ */
+export const countDecimals = (value) => {
+  const stringValue = value.toString();
+  return stringValue.includes('.') ? stringValue.split('.')[1].length : 0;
+};

package/dist/collection/utils/pagination.js

@@ -28,11 +28,11 @@ export const generatePagerItems = (current, total, pagerCount = MINIMAL_PAGER_IT
   for (let i = 0; i < pagerCount; i += 1) {
     items[i] = i + left;
   }
-  if (items[0] > 1) {
+  if (Number(items[0]) > 1) {
     items[0] = 1;
     items[1] = ellipsisPlaceholder;
   }
-  if (items[items.length - 1] <= total - 1) {
+  if (Number(items[items.length - 1]) <= total - 1) {
     items[items.length - 1] = total;
     items[items.length - 2] = ellipsisPlaceholder;
   }

package/dist/collection/utils/test/number.test.js

@@ -1,4 +1,4 @@
-import { convertToNumber, normalizeNumberByRanger } from '../number';
+import { convertToNumber, countDecimals, normalizeNumberByRanger } from '../number';
 test('convertToNumber as expected when input is number', () => {
   expect(convertToNumber(123)).toEqual(123);
   expect(convertToNumber('DDL', 0)).toEqual(0);
@@ -12,3 +12,7 @@ test('normalizeNumberByRanger as expected when input set less than min', () => {
   const numberValue = normalizeNumberByRanger(5, 10, 40);
   expect(numberValue).toEqual(10);
 });
+test('countDecimals as expected', () => {
+  expect(countDecimals(123)).toEqual(0);
+  expect(countDecimals(123.123)).toEqual(3);
+});

package/dist/collection/value-model-adapters/angular-ng-model-accessor-adapter.js

@@ -10,6 +10,7 @@ export const AngularAccessorAdapter = [
       'vega-image-uploader',
       'vega-input',
       'vega-input-credit-card',
+      'vega-input-numeric',
       'vega-input-phone-number',
       'vega-input-range',
       'vega-input-select',

package/dist/collection/value-model-adapters/vue-component-v-model-adaptor.js

@@ -12,6 +12,7 @@ export const VueComponentVModelAdaptor = [
       'vega-image-uploader',
       'vega-input',
       'vega-input-credit-card',
+      'vega-input-numeric',
       'vega-input-phone-number',
       'vega-input-range',
       'vega-input-select',

package/dist/esm/{app-globals-41797af8.js → app-globals-00a57fbe.js}

@@ -1,13 +1,14 @@
-import { F as FeatureFlag } from './feature-flag-controller-10780eeb.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaThemeManager, c as VegaEventManager, d as VegaZIndexManager, w as waitForVega, e as VegaSkeletonLoader } from './vega-skeleton-loader-controller-6fb25f3b.js';
+import { F as FeatureFlag } from './feature-flag-controller-297c4b9b.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaThemeManager, c as VegaEventManager, d as VegaZIndexManager, e as VegaSkeletonLoader } from './vega-skeleton-loader-controller-cec6753f.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-17c4efd4.js';
-import { V as VegaDialog } from './vega-dialog-controller-3b905672.js';
+import { V as VegaDialog } from './vega-dialog-controller-8b343a17.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
-import { V as VegaIconManager } from './icon-manager-0f030f8a.js';
-import { V as VegaInternalTranslation, a as VegaTranslation, s as staticTranslations } from './translation-0fa7cf77.js';
+import { V as VegaIconManager } from './icon-manager-1ee2c968.js';
+import { V as VegaInternalTranslation, a as VegaTranslation, s as staticTranslations } from './translation-4eb3cf85.js';
 import { T as TypographyUrls } from './typography-a8fc4764.js';
-import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-232f2986.js';
-import { U as UPDATE_TRANSLATION } from './static-subject-title-6987a80b.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-2aef3ad5.js';
+import { w as waitForVega } from './index-fda6b5ee.js';
+import { U as UPDATE_TRANSLATION } from './static-subject-title-500cf2a3.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as forceUpdate } from './index-187f71d1.js';

package/dist/esm/{array-506b88b9.js → array-b668466e.js}

@@ -1,5 +1,16 @@
-import { c as convertToNumber } from './number-e2519d1c.js';
+import { c as convertToNumber } from './number-4398f2e1.js';
 
+/**
+ * It flattens an array of objects
+ *
+ * @typedef T generic type  parameter
+ * @param {T[]} arr - The array to be flattened.
+ * @param {string} [children=children] - The name of the key that contains the children.
+ * @returns {T[]}An array of all the children of the array of items.
+ */
+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.
  *
@@ -166,4 +177,4 @@ function findNodeList(nodeList, callBack) {
   return undefined;
 }
 
-export { sortArrayOrNestedArray as a, findNodeList as b, convertArrayToNestedArray as c, isObjectArrayLike as d, flatNestedArray as f, getLongestTextLengthFromArray as g, isArrayEqual as i, sortAsExistArray as s };
+export { sortArrayOrNestedArray as a, findNodeList as b, convertArrayToNestedArray as c, isObjectArrayLike as d, flattenChildren as e, flatNestedArray as f, getLongestTextLengthFromArray as g, isArrayEqual as i, sortAsExistArray as s };

package/dist/esm/{child-nodes-event-prevent-slimmer-345c46c5.js → child-nodes-event-prevent-slimmer-db288af1.js}

@@ -1,7 +1,7 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { i as internalVegaEventManager, j as jqueryDelegatedStrategyController } from './internal-vega-event-manager-722461c1.js';
+import { i as internalVegaEventManager, j as jqueryDelegatedStrategyController } from './internal-vega-event-manager-8154661e.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
-import { F as FeatureFlag } from './feature-flag-controller-10780eeb.js';
+import { F as FeatureFlag } from './feature-flag-controller-297c4b9b.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/{create-public-api-runtime-metrics-slimmer-928ad7f0.js → create-public-api-runtime-metrics-slimmer-cc1164bb.js}

@@ -200,4 +200,4 @@ function createPublicAPIRuntimeMetricsSlimmer(mapFromClass, watchMethodNames, in
   return createDynamicSlimmer(mapFromClass, VegaPublicAPIRuntimeMetricsSlimmerBase, [], methodsMap, [mapFromClass.name, initData]);
 }
 
-export { InjectVegaTelemetrySlimmer as I, createPublicAPIRuntimeMetricsSlimmer as c, generateUUID as g, isAsyncFunction as i };
+export { InjectVegaTelemetrySlimmer as I, isObjectEmpty as a, createPublicAPIRuntimeMetricsSlimmer as c, generateUUID as g, isAsyncFunction as i };

package/dist/esm/{design-token-3671ce60.js → design-token-2a527af3.js}

@@ -1,7 +1,7 @@
 import { i as isBorderColorTokenType, b as BorderColors, e as BorderColorMap, j as isShadowsTokenType, f as Shadows, g as ShadowMap, k as isBorderTokenType, l as Borders, m as BorderMap, n as isSpacingTokenType, o as isBorderRadiusTokenType, p as isBackgroundColorTokenType, q as isTextColorTokenType, r as isBreakpointsTokenType, h as Spacing, s as isBorderStyleType, B as BorderRadius, C as Colors, t as isTypographyTokenType } from './type-guard-63caf78b.js';
 import { B as Breakpoints } from './breakpoints-36a3ed69.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-5a1329a7.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-3dc84e41.js';
 import { b as TypographyKeys } from './typography-a8fc4764.js';
 import { S as StateVariantFormatter, s as stateBackgroundColorFormatter } from './state-background-color-formatter-0540d006.js';
 import { a as BorderStyle } from './ui-8424715a.js';