@globalpayments/vega 2.29.0 → 2.30.0

package/dist/collection/{utils/test/position.test.js → helpers/slimmers/position-calculation/test/body-position-calculation-strategy.test.js}

@@ -1,13 +1,69 @@
-import { getPositionBox } from '../../utils/position';
-import { LogUtility } from '../log';
-describe('getPositionBox', () => {
-  const innerHTML = `
-	<vega-modal>
-		<div class='target'> test target </div>
-	</vega-modal>
-	<div class='element'>test element</div>
-	`;
-  document.body.innerHTML = innerHTML;
+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 { InjectVegaSlimmer } from 'vega-slimmer/core';
+import { LogUtility } from '../../../../utils/log';
+import { PositionCalculationController } from '../position-calculation-controller';
+import { ElementAppenderContainerController } from '../../element-appender-container/element-appender-container-controller';
+export class PositionCalculationMockedComponent {
+  constructor() {
+    this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.positionCalculationController = new PositionCalculationController();
+    this.isScreenPosition = false;
+    this.setHtml();
+  }
+  setIsScreenPosition(isScreenPosition) {
+    this.isScreenPosition = isScreenPosition;
+  }
+  getPositionBox(container, element, target, placement, alignment, translocation = { X: 0, Y: 0 }) {
+    this.container = container;
+    this.showConfig = {
+      target: target,
+      appendableElement: element,
+      placement: placement,
+      alignment: alignment,
+      translocation: translocation,
+      isScreenPosition: this.isScreenPosition,
+    };
+    this.positionCalculationController.setCalculationStrategy();
+    this.positionCalculationController.adjustPosition();
+    let placementResult;
+    let alignmentResult;
+    element.className.split(' ').forEach((item) => {
+      if (item.includes('vega-placement')) {
+        placementResult = item.replace('vega-placement-', '');
+      }
+      if (item.includes('vega-alignment')) {
+        alignmentResult = item.replace('vega-alignment-', '');
+      }
+    });
+    return {
+      top: Number(element.style.top.replace('px', '')),
+      left: Number(element.style.left.replace('px', '')),
+      placement: placementResult,
+      alignment: alignmentResult,
+    };
+  }
+  setHtml() {
+    document.body.innerHTML = `
+            <vega-modal>
+                <div class='target'> test target </div>
+            </vega-modal>
+            <div class='element'>test element</div>
+        `;
+  }
+}
+__decorate([
+  InjectVegaSlimmer()
+], PositionCalculationMockedComponent.prototype, "elementAppenderContainerController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], PositionCalculationMockedComponent.prototype, "positionCalculationController", void 0);
+describe('component.getPositionBox', () => {
+  const component = new PositionCalculationMockedComponent();
   const element = document.querySelector('.element');
   const target = document.querySelector('.target');
   const container = document.querySelector('vega-modal');
@@ -32,7 +88,7 @@ describe('getPositionBox', () => {
       width: 100,
       height: 100,
     });
-    getPositionBox(container, element, target);
+    component.getPositionBox(container, element, target);
     expect(LogUtility.warn).toHaveBeenCalledWith(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
   });
   describe('directions', () => {
@@ -48,7 +104,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, [
+      const positionBox = component.getPositionBox(container, element, target, [
         'left',
         'bottom',
         'right',
@@ -63,7 +119,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target);
+      const positionBox = component.getPositionBox(container, element, target);
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
     });
     test('return result as expected when with single placement', () => {
@@ -75,13 +131,13 @@ describe('getPositionBox', () => {
         left: 100,
       });
       let positionBox;
-      positionBox = getPositionBox(container, element, target, 'left');
+      positionBox = component.getPositionBox(container, element, target, 'left');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'top');
+      positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'right');
+      positionBox = component.getPositionBox(container, element, target, 'right');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'bottom');
+      positionBox = component.getPositionBox(container, element, target, 'bottom');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when container scroll', () => {
@@ -95,13 +151,13 @@ describe('getPositionBox', () => {
       let positionBox;
       container.scrollTop = 20;
       container.scrollLeft = 20;
-      positionBox = getPositionBox(container, element, target, 'left');
+      positionBox = component.getPositionBox(container, element, target, 'left');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'top');
+      positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 50, left: 100, placement: 'top', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'right');
+      positionBox = component.getPositionBox(container, element, target, 'right');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      positionBox = getPositionBox(container, element, target, 'bottom');
+      positionBox = component.getPositionBox(container, element, target, 'bottom');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when top have not enough placement', () => {
@@ -112,7 +168,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 50, placement: 'left', alignment: 'start' });
     });
     test('return result as expected when top have not enough placement and with translocation', () => {
@@ -123,7 +179,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 10,
         Y: 20,
       });
@@ -137,7 +193,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
     });
     test('return result as expected when top, left and bottom have not enough placement', () => {
@@ -148,7 +204,7 @@ describe('getPositionBox', () => {
         top: 100,
         left: 100,
       });
-      const positionBox = getPositionBox(container, element, target, 'top');
+      const positionBox = component.getPositionBox(container, element, target, 'top');
       expect(positionBox).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
     });
     test('return result as expected when container scrollHeight/scrollWidth is big than body scrollHeight/scrollWidth', () => {
@@ -161,12 +217,12 @@ describe('getPositionBox', () => {
         top: 200,
         left: 200,
       });
-      const positionBox = getPositionBox(container, element, target, [
+      const positionBox = component.getPositionBox(container, element, target, [
         'bottom',
         'top',
       ]);
       expect(positionBox).toEqual({ top: 400, left: 200, placement: 'bottom', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, [
+      const positionBox1 = component.getPositionBox(container, element, target, [
         'right',
         'left',
       ]);
@@ -182,9 +238,43 @@ describe('getPositionBox', () => {
       Object.assign(target, { offsetTop: 0 });
       Object.assign(target, { offsetLeft: 0 });
       spyOn(LogUtility, 'warn');
-      getPositionBox(container, target, element);
+      component.getPositionBox(container, target, element);
       expect(LogUtility.warn).toBeCalled();
     });
+    test('return result as expected when top center have enough placement', () => {
+      Object.assign(container, { scrollHeight: 530 });
+      Object.assign(container, { scrollWidth: 530 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 200, height: 200 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 300,
+        left: 80,
+      });
+      expect(component.getPositionBox(container, element, target, ['top', 'left'], ['center', 'start'])).toEqual({
+        top: 100,
+        left: 30,
+        placement: 'top',
+        alignment: 'center',
+      });
+    });
+    test('return result as expected when left center have enough placement', () => {
+      Object.assign(container, { scrollHeight: 530 });
+      Object.assign(container, { scrollWidth: 530 });
+      mockElementReturn(element, 'getBoundingClientRect', { width: 200, height: 200 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 80,
+        left: 300,
+      });
+      expect(component.getPositionBox(container, element, target, ['left', 'top'], ['center', 'start'])).toEqual({
+        top: 30,
+        left: 100,
+        placement: 'left',
+        alignment: 'center',
+      });
+    });
   });
   describe('with translocation', () => {
     beforeAll(() => {
@@ -197,17 +287,17 @@ describe('getPositionBox', () => {
       });
     });
     test('return result as expected when container not scrolled', () => {
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox).toEqual({ top: -60, left: 200, placement: 'top', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, 'right', undefined, {
+      const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox1).toEqual({ top: 200, left: 300, placement: 'right', alignment: 'start' });
-      const positionBox2 = getPositionBox(container, element, target, 'left', undefined, {
+      const positionBox2 = component.getPositionBox(container, element, target, 'left', undefined, {
         X: 100,
         Y: 100,
       });
@@ -216,46 +306,46 @@ describe('getPositionBox', () => {
     test('return result as expected when container scrolled', () => {
       container.scrollTop = 20;
       container.scrollLeft = 20;
-      const positionBox = getPositionBox(container, element, target, 'top', undefined, {
+      const positionBox = component.getPositionBox(container, element, target, 'top', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox).toEqual({ top: -40, left: 220, placement: 'top', alignment: 'start' });
-      const positionBox1 = getPositionBox(container, element, target, 'right', undefined, {
+      const positionBox1 = component.getPositionBox(container, element, target, 'right', undefined, {
         X: 100,
         Y: 100,
       });
       expect(positionBox1).toEqual({ top: 220, left: 320, placement: 'right', alignment: 'start' });
     });
     test('return result as expected when alignment set', () => {
-      const positionBox1 = getPositionBox(container, element, target, 'bottom', 'start');
+      const positionBox1 = component.getPositionBox(container, element, target, 'bottom', 'start');
       expect(positionBox1).toEqual({ top: 200, left: 100, placement: 'bottom', alignment: 'start' });
-      const positionBox2 = getPositionBox(container, element, target, 'bottom', 'center');
+      const positionBox2 = component.getPositionBox(container, element, target, 'bottom', 'center');
       expect(positionBox2).toEqual({
         top: 200,
         left: 120,
         placement: 'bottom',
         alignment: 'center',
       });
-      const positionBox3 = getPositionBox(container, element, target, 'bottom', 'end');
+      const positionBox3 = component.getPositionBox(container, element, target, 'bottom', 'end');
       expect(positionBox3).toEqual({ top: 200, left: 140, placement: 'bottom', alignment: 'end' });
-      const positionBox4 = getPositionBox(container, element, target, 'top', 'start');
+      const positionBox4 = component.getPositionBox(container, element, target, 'top', 'start');
       expect(positionBox4).toEqual({ top: 40, left: 100, placement: 'top', alignment: 'start' });
-      const positionBox5 = getPositionBox(container, element, target, 'top', 'center');
+      const positionBox5 = component.getPositionBox(container, element, target, 'top', 'center');
       expect(positionBox5).toEqual({ top: 40, left: 120, placement: 'top', alignment: 'center' });
-      const positionBox6 = getPositionBox(container, element, target, 'top', 'end');
+      const positionBox6 = component.getPositionBox(container, element, target, 'top', 'end');
       expect(positionBox6).toEqual({ top: 40, left: 140, placement: 'top', alignment: 'end' });
-      const positionBox7 = getPositionBox(container, element, target, 'left', 'start');
+      const positionBox7 = component.getPositionBox(container, element, target, 'left', 'start');
       expect(positionBox7).toEqual({ top: 100, left: 40, placement: 'left', alignment: 'start' });
-      const positionBox8 = getPositionBox(container, element, target, 'left', 'center');
+      const positionBox8 = component.getPositionBox(container, element, target, 'left', 'center');
       expect(positionBox8).toEqual({ top: 120, left: 40, placement: 'left', alignment: 'center' });
-      const positionBox9 = getPositionBox(container, element, target, 'left', 'end', undefined);
+      const positionBox9 = component.getPositionBox(container, element, target, 'left', 'end', undefined);
       expect(positionBox9).toEqual({ top: 140, left: 40, placement: 'left', alignment: 'end' });
-      const positionBox10 = getPositionBox(container, element, target, 'right', 'start');
+      const positionBox10 = component.getPositionBox(container, element, target, 'right', 'start');
       expect(positionBox10).toEqual({ top: 100, left: 200, placement: 'right', alignment: 'start' });
-      const positionBox11 = getPositionBox(container, element, target, 'right', 'center');
+      const positionBox11 = component.getPositionBox(container, element, target, 'right', 'center');
       expect(positionBox11).toEqual({ top: 120, left: 200, placement: 'right', alignment: 'center' });
-      const positionBox12 = getPositionBox(container, element, target, 'right', 'end');
+      const positionBox12 = component.getPositionBox(container, element, target, 'right', 'end');
       expect(positionBox12).toEqual({ top: 140, left: 200, placement: 'right', alignment: 'end' });
     });
   });

package/dist/collection/helpers/slimmers/position-calculation/test/screen-position-calculation-strategy.test.js

@@ -0,0 +1,113 @@
+import { PositionCalculationMockedComponent } from './body-position-calculation-strategy.test';
+describe('BodyPositionCalculationStrategy.getPositionBox', () => {
+  const component = new PositionCalculationMockedComponent();
+  component.setIsScreenPosition(true);
+  const innerHTML = `
+	<div class='container'>
+        <div class='target'> test target </div>
+	    <div class='element'>test element</div>
+    </div>
+	`;
+  document.body.innerHTML = innerHTML;
+  const element = document.querySelector('.element');
+  const target = document.querySelector('.target');
+  const container = document.querySelector('.container');
+  function mockElementReturn(element, method, value) {
+    spyOn(element, method).and.returnValue(value);
+  }
+  beforeAll(() => {
+    Object.assign(window, { innerWidth: 500 });
+    Object.assign(window, { innerHeight: 500 });
+  });
+  describe('directions', () => {
+    beforeAll(() => {
+      mockElementReturn(element, 'getBoundingClientRect', { width: 50, height: 50 });
+      mockElementReturn(target, 'getBoundingClientRect', {
+        width: 100,
+        height: 100,
+        top: 100,
+        left: 100,
+      });
+    });
+    test('return result as expected in top', () => {
+      expect(component.getPositionBox(container, element, target, ['top'], ['start'])).toEqual({
+        top: 50,
+        left: 100,
+        placement: 'top',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['top'], ['center'])).toEqual({
+        top: 50,
+        left: 125,
+        placement: 'top',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['top'], ['end'])).toEqual({
+        top: 50,
+        left: 150,
+        placement: 'top',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in left', () => {
+      expect(component.getPositionBox(container, element, target, ['left'], ['start'])).toEqual({
+        top: 100,
+        left: 50,
+        placement: 'left',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['left'], ['center'])).toEqual({
+        top: 125,
+        left: 50,
+        placement: 'left',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['left'], ['end'])).toEqual({
+        top: 150,
+        left: 50,
+        placement: 'left',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in bottom', () => {
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['start'])).toEqual({
+        top: 200,
+        left: 100,
+        placement: 'bottom',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['center'])).toEqual({
+        top: 200,
+        left: 125,
+        placement: 'bottom',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['bottom'], ['end'])).toEqual({
+        top: 200,
+        left: 150,
+        placement: 'bottom',
+        alignment: 'end',
+      });
+    });
+    test('return result as expected in right', () => {
+      expect(component.getPositionBox(container, element, target, ['right'], ['start'])).toEqual({
+        top: 100,
+        left: 200,
+        placement: 'right',
+        alignment: 'start',
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['center'])).toEqual({
+        top: 125,
+        left: 200,
+        placement: 'right',
+        alignment: 'center',
+      });
+      expect(component.getPositionBox(container, element, target, ['right'], ['end'])).toEqual({
+        top: 150,
+        left: 200,
+        placement: 'right',
+        alignment: 'end',
+      });
+    });
+  });
+});

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/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/esm/{app-globals-d90e7905.js → app-globals-00a57fbe.js}

@@ -1,5 +1,5 @@
-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-def7bf3f.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-8b343a17.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
@@ -7,6 +7,7 @@ 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-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';