@globalpayments/vega 2.28.1 → 2.30.0

package/dist/cjs/{element-appender-slimmer-bf5ecbd8.js → element-appender-slimmer-415d261a.js}

@@ -1,386 +1,15 @@
 'use strict';
 
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const ui = require('./ui-32e69595.js');
-const typeGuard = require('./type-guard-a07b353b.js');
-const responsiveFormatFacade = require('./responsive-format-facade-7bc51a43.js');
-const ui$1 = require('./ui-08f33116.js');
-const internalVegaZIndexManager = require('./internal-vega-z-index-manager-23051df4.js');
+const ui = require('./ui-08f33116.js');
+const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-a8cf1874.js');
+const ui$1 = require('./ui-32e69595.js');
+const typeGuard = require('./type-guard-a07b353b.js');
+const responsiveFormatFacade = require('./responsive-format-facade-ad2f67bf.js');
 
-/**
- * Get the position of the element in the container according to the target element and the placement
- * If give a translocation, it will apply the translocation to the result.
- * Note: If you use this method to calculate the position, you should make container as relative position at first.
- *
- * @param {HTMLElement} container - The container element of the element to be positioned.
- * @param {HTMLElement} element - The element to be positioned.
- * @param {HTMLElement} target - The element to be positioned.
- * @param {PlacementType | PlacementType[]} [placement] - The placement of the element, which can be a
- * single placement or an array of placements.
- * @param {PositionAlignmentType | PositionAlignmentType[]} alignment - The alignment of the element
- * @param {TranslocationType} [translocation] - The offset of the element relative to the target.
- * @returns {ElementPositionBox} A function that takes in a container, element, target, placement, and translocation and
- * returns an ElementPositionBox.
- */
-const getPositionBox = (container, element, target, placement, alignment, translocation = { X: 0, Y: 0 }) => {
-  const containerStyle = window.getComputedStyle(container);
-  if (containerStyle.position !== 'relative') {
-    globalSlimmerRegistry.LogUtility.warn(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
-  }
-  const placements = getPlacements(placement);
-  const alignments = getAlignments(alignment);
-  const targetBox = getTargetBoundBox(target, container);
-  const elementBox = getElementBoundBox(element);
-  const containerBox = getElementScrollDimension(container);
-  const suitablePlacement = getSuitablePlacement(containerBox, elementBox, targetBox, placements);
-  const suitableAlignment = getSuitableAlignment(containerBox, elementBox, targetBox, suitablePlacement, alignments);
-  const positionBox = calculatePosition(elementBox, targetBox, suitablePlacement, suitableAlignment);
-  const translocationBox = getTranslocationBox(Array.isArray(placement) ? placement[0] : placement, suitablePlacement, translocation);
-  positionBox.placement = suitablePlacement;
-  positionBox.alignment = suitableAlignment;
-  positionBox.left += translocationBox.X;
-  positionBox.top += translocationBox.Y;
-  return positionBox;
-};
-/**
- * It returns the translocation of the element relative to the target element
- *
- * @param {Nullable<PlacementType>} originPlacement - The origin placement of the element.
- * @param {PlacementType} placement - The suitable placement of the element.
- * @param {TranslocationType} translocation - TranslocationType
- * @returns {TranslocationType} A translocation object with X and Y properties.
- */
-function getTranslocationBox(originPlacement, placement, translocation) {
-  const result = { X: 0, Y: 0 };
-  if (typeGuard.isTranslocationType(translocation)) {
-    let xValue = translocation.X;
-    let yValue = translocation.Y;
-    // If originPlacement and placement is not in same axis, it should reverse axis.
-    if ((originPlacement &&
-      ['left', 'right'].includes(originPlacement) &&
-      ['top', 'bottom'].includes(placement)) ||
-      (originPlacement &&
-        ['top', 'bottom'].includes(originPlacement) &&
-        ['left', 'right'].includes(placement))) {
-      xValue = translocation.Y;
-      yValue = translocation.X;
-    }
-    if (['bottom', 'top'].includes(placement)) {
-      result.Y = placement === 'top' ? -yValue : yValue;
-      result.X = xValue;
-    }
-    if (['left', 'right'].includes(placement)) {
-      result.X = placement === 'left' ? -xValue : xValue;
-      result.Y = yValue;
-    }
-  }
-  return result;
-}
-/**
- * It takes a placement string or array of placements and returns an array of placements
- * if given placement is single, we should completion the placements with the default {@link Placements}
- * and make given placement as default.
- * if given placement is array, we should use it directly, even it partial of {@link Placements}.
- * if not placement give. we should use {@link Placements}.
- *
- * @param {PlacementType | PlacementType[]} [placement] - The placement of the tooltip.
- * @returns {PlacementType[]} ordered placements.
- */
-function getPlacements(placement) {
-  if (typeof placement === 'string') {
-    const partial = ui.Placements.filter((direction) => direction !== placement);
-    return [placement, ...partial];
-  }
-  else if (Array.isArray(placement)) {
-    return placement;
-  }
-  else {
-    return [...ui.Placements];
-  }
-}
-/**
- * It returns acceptable alignments.
- *
- * @param {PositionAlignmentType | PositionAlignmentType[]} [alignment] - The alignment of the popup.
- * @returns {PositionAlignmentType[]} acceptable alignments
- */
-function getAlignments(alignment) {
-  if (typeof alignment === 'string') {
-    const partial = ui.Alignments.filter((item) => item !== alignment);
-    return [alignment, ...partial];
-  }
-  else if (Array.isArray(alignment)) {
-    return alignment;
-  }
-  else {
-    return [...ui.Alignments];
-  }
-}
-/**
- * It takes a placement, a target box, and a element box, and returns an element box
- *
- * @param {ElementBoundBox} elementBox - The position of the element element.
- * @param {ElementBoundBox} targetBox - The position of the target element.
- * @param {PlacementType} placement - The placement of the element.
- * @param {PositionAlignmentType} alignment - The alignment of the element
- * @returns {ElementPositionBox} An object with top and left properties.
- */
-function calculatePosition(elementBox, targetBox, placement, alignment) {
-  return {
-    top: calculateTop(elementBox, targetBox, placement, alignment),
-    left: calculateLeft(elementBox, targetBox, placement, alignment),
-  };
-}
-/**
- * Calculate the left position of the element
- *
- * @param {ElementBoundBox} elementBox - The position box of the element.
- * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
- * @param {PlacementType} placement - The placement of the element.
- * @param {PositionAlignmentType} alignment - The alignment of the element
- * @returns {number} The left position of the element.
- */
-function calculateLeft(elementBox, targetBox, placement, alignment) {
-  switch (placement) {
-    case 'top':
-    case 'bottom': {
-      if (alignment === 'end') {
-        return targetBox.left + targetBox.width - elementBox.width;
-      }
-      else if (alignment === 'center') {
-        return targetBox.left - (elementBox.width - targetBox.width) / 2;
-      }
-      else {
-        return targetBox.left;
-      }
-    }
-    case 'left': {
-      return targetBox.left - elementBox.width;
-    }
-    case 'right': {
-      return targetBox.left + targetBox.width;
-    }
-    /* istanbul ignore next */
-    default:
-      throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
-  }
-}
-/**
- * Calculate the top position of the element
- *
- * @param {ElementBoundBox} elementBox - The position box of the element.
- * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
- * @param {PlacementType} placement - The placement of the element.
- * @param {PositionAlignmentType} alignment - The alignment of the element
- * @returns {number} the top position of the element.
- */
-function calculateTop(elementBox, targetBox, placement, alignment) {
-  switch (placement) {
-    case 'left':
-    case 'right': {
-      if (alignment === 'end') {
-        return targetBox.top + targetBox.height - elementBox.height;
-      }
-      else if (alignment === 'center') {
-        return targetBox.top - (elementBox.height - targetBox.height) / 2;
-      }
-      else {
-        return targetBox.top;
-      }
-    }
-    case 'top': {
-      return targetBox.top - elementBox.height;
-    }
-    case 'bottom': {
-      return targetBox.top + targetBox.height;
-    }
-    /* istanbul ignore next */
-    default:
-      throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
-  }
-}
-/**
- * It takes a list of placements and returns the first placement that has enough space to place the
- * element
- *
- * @param {ElementScrollDimension} containerBox - The box of the container element.
- * @param {ElementBoundBox} elementBox - The box of the element to be placed.
- * @param {ElementBoundBox} targetBox - The box of the target element.
- * @param {PlacementType[]} placements - The placements that we want to try.
- * @returns {PlacementType} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
- */
-function getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
-  const defaultPlacement = placements[0];
-  const suitablePlacement = placements.find((placement) => hasEnoughSpace(containerBox, placement, targetBox, elementBox));
-  if (suitablePlacement) {
-    return suitablePlacement;
-  }
-  else {
-    globalSlimmerRegistry.LogUtility.warn(`
-			No enough space found for placing element and we will keep using the defined placement:
-			${defaultPlacement}
-		`);
-    return defaultPlacement;
-  }
-}
-/**
- * It takes a list of alignments and returns the suitable one that has enough space to fit the element
- *
- * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
- * @param {ElementBoundBox} elementBox - The box of the element that we want to position.
- * @param {ElementBoundBox} targetBox - The box of the element that the element to be positioned is aligned to.
- * @param {PlacementType} placement - The placement of the element relative to the target.
- * @param {PositionAlignmentType[]} alignments - An array of alignments to try.
- * @returns {PositionAlignmentType} the alignment that is suitable for the element.
- */
-const getSuitableAlignment = (containerBox, elementBox, targetBox, placement, alignments) => {
-  const defaultAlignment = alignments[0];
-  const suitableAlignment = alignments.find((alignment) => hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment));
-  if (suitableAlignment) {
-    return suitableAlignment;
-  }
-  else {
-    globalSlimmerRegistry.LogUtility.warn(`
-			No enough space found for placing element and we will keep using the defined alignment:
-			${defaultAlignment}
-		`);
-    return defaultAlignment;
-  }
-};
-/**
- * Whether the alignment space is enough
- *
- * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
- * @param {ElementBoundBox} targetBox - The position of the target element.
- * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
- * @param {PlacementType} placement - The placement of the element relative to the target.
- * @param {PlacementType} alignment - The alignment of the element relative to the target.
- * @returns {boolean} return true if it has enough space, otherwise false
- */
-function hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
-  if (['top', 'bottom'].includes(placement)) {
-    switch (alignment) {
-      case 'start': {
-        return targetBox.left + elementBox.width <= containerBox.width;
-      }
-      case 'center': {
-        return (targetBox.left >= elementBox.width - targetBox.width &&
-          targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
-      }
-      case 'end': {
-        return targetBox.left + targetBox.width >= elementBox.width;
-      }
-    }
-  }
-  if (['right', 'left'].includes(placement)) {
-    switch (alignment) {
-      case 'start': {
-        return targetBox.top + elementBox.height <= containerBox.height;
-      }
-      case 'center': {
-        return (targetBox.top >= elementBox.height - targetBox.height &&
-          targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
-      }
-      case 'end': {
-        return targetBox.top + targetBox.height >= elementBox.height;
-      }
-    }
-  }
-  /* istanbul ignore next */
-  return false;
-}
-/**
- * If the placement is top or left, then the target's top or left position must be greater than or
- * equal to the element's height or width. If the placement is bottom or right, then the container's
- * height or width minus the target's top or left position minus the target's height or width must be
- * greater than or equal to the element's height or width.
- *
- * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
- * @param {PlacementType} placement - The placement of the element.
- * @param {ElementBoundBox} targetBox - The position of the target element.
- * @param {ElementBoundBox} elementBox - The dimensions of the element to be positioned.
- * @returns {boolean} A boolean value.
- */
-function hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
-  switch (placement) {
-    case 'top':
-      return targetBox.top >= elementBox.height;
-    case 'bottom':
-      return containerBox.height - targetBox.top - targetBox.height >= elementBox.height;
-    case 'left':
-      return targetBox.left >= elementBox.width;
-    case 'right':
-      return containerBox.width - targetBox.left - targetBox.width >= elementBox.width;
-    /* istanbul ignore next */
-    default:
-      return false;
-  }
-}
-/**
- * It returns the position of an element relative to its container and also includes the scroll height of container.
- *
- * @param {HTMLElement} target - The element that you want to position.
- * @param {HTMLElement} container - The container element that the target element is inside of.
- * @returns {ElementBoundBox} An object with the properties width, height, top, and left.
- */
-function getTargetBoundBox(target, container) {
-  const containerRect = container.getBoundingClientRect();
-  const targetRect = target.getBoundingClientRect();
-  const targetTop = targetRect.top - containerRect.top + container.scrollTop;
-  const targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
-  return {
-    width: targetRect.width,
-    height: targetRect.height,
-    top: targetTop,
-    left: targetLeft,
-  };
-}
-/**
- * "Get the width, height, and top position of an element."
- *
- * The function takes an element as an argument and returns an object with three properties: width,
- * height, and top.
- *
- * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
- * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
- *
- * @param {HTMLElement} element - HTMLElement - The element to get the position box for.
- * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
- */
-function getElementBoundBox(element) {
-  const isElementHide = element.classList.contains('vega-force-hidden');
-  if (isElementHide)
-    element.classList.remove('vega-force-hidden');
-  const elementRect = element.getBoundingClientRect();
-  if (isElementHide)
-    element.classList.add('vega-force-hidden');
-  return {
-    width: elementRect.width,
-    height: elementRect.height,
-    left: elementRect.left,
-    top: elementRect.top,
-  };
-}
-/**
- * "Get the width and height of an element."
- *
- * The function takes a single parameter, a container element, and returns an object with two
- * properties: width and height
- *
- * @param {HTMLElement} container - The container element that the tooltip will be positioned relative
- * to.
- * @returns {ElementScrollDimension} An object with two properties: width and height.
- */
-function getElementScrollDimension(container) {
-  return {
-    width: container.scrollWidth,
-    height: container.scrollHeight,
-  };
-}
-
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (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;
   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;
@@ -390,32 +19,46 @@ var __decorate$6 = (undefined && undefined.__decorate) || function (decorators,
  * This class is is used to retrieve the body element of document.
  */
 class DefaultWrapper {
-  constructor() {
-    /**
-     * The canRetrieve function return is always true.
-     *
-     * @returns {boolean} the boolean type.
-     */
-    this.canRetrieve = () => true;
-    /**
-     * The retrieve function get the body element of document.
-     *
-     * @returns {HTMLElement} the element.
-     */
-    this.retrieve = () => {
-      const container = document.body;
-      if (this.showConfig.appendableElement.parentElement !== container) {
-        container.append(this.showConfig.appendableElement);
-      }
-      return container;
-    };
+  /**
+   * The canRetrieve function return is always true.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve() {
+    return true;
+  }
+  /**
+   * The retrieve function get the body element of document.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    const container = document.body;
+    if (this.showConfig.appendableElement.parentElement !== container) {
+      container.append(this.showConfig.appendableElement);
+    }
+    return container;
   }
 }
-__decorate$6([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], DefaultWrapper.prototype, "showConfig", void 0);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * Body positioned wrapper.
+ */
+class BodyPositionedWrapper {
+  /**
+   * Valid is a body position used wrapper.
+   *
+   * @returns {boolean} can retrieve or not.
+   */
+  canRetrieve() {
+    return !this.showConfig.isScreenPosition;
+  }
+}
+
+var __decorate$8 = (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;
   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;
@@ -426,34 +69,35 @@ var __decorate$5 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @property {HTMLElement} showConfig the show config
  */
-class PositionRelativeToWrapper {
-  constructor() {
-    /**
-     * The canRetrieve function just determines whether the showConfig contains the positionRelativeTo object.
-     *
-     * @returns {boolean} the boolean type.
-     */
-    this.canRetrieve = () => !!this.showConfig.positionRelativeTo &&
-      !!document.querySelector(this.showConfig.positionRelativeTo);
-    /**
-     * The retrieve function query the element of positionRelativeTo in showConfig.
-     *
-     * @returns {HTMLElement} the element.
-     */
-    this.retrieve = () => {
-      const container = document.querySelector(this.showConfig.positionRelativeTo);
-      if (this.showConfig.appendableElement.parentElement !== container) {
-        container.append(this.showConfig.appendableElement);
-      }
-      return container;
-    };
+class PositionRelativeToWrapper extends BodyPositionedWrapper {
+  /**
+   * The canRetrieve function just determines whether the showConfig contains the positionRelativeTo object.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve() {
+    return (super.canRetrieve() &&
+      !!this.showConfig.positionRelativeTo &&
+      !!document.querySelector(this.showConfig.positionRelativeTo));
+  }
+  /**
+   * The retrieve function query the element of positionRelativeTo in showConfig.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    const container = document.querySelector(this.showConfig.positionRelativeTo);
+    if (this.showConfig.appendableElement.parentElement !== container) {
+      container.append(this.showConfig.appendableElement);
+    }
+    return container;
   }
 }
-__decorate$5([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], PositionRelativeToWrapper.prototype, "showConfig", void 0);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (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;
   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;
@@ -464,20 +108,22 @@ var __decorate$4 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @property {HTMLElement} showConfig the show config
  */
-class VegaModalWrapper {
-  constructor() {
-    /**
-     * The canRetrieve function just determines whether the target of showConfig has the `vega-modal` element. If not, search upwards layer by layer.
-     *
-     * @returns {boolean} the boolean type.
-     */
-    this.canRetrieve = () => !!ui$1.findParent(this.showConfig.target, 'vega-modal');
-    /**
-     * The retrieve function get the slot position of vega-modal element.
-     *
-     * @returns {HTMLElement} the element.
-     */
-    this.retrieve = () => this.getVegaModalShowConfigContainer();
+class VegaModalWrapper extends BodyPositionedWrapper {
+  /**
+   * The canRetrieve function just determines whether the target of showConfig has the `vega-modal` element. If not, search upwards layer by layer.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve() {
+    return super.canRetrieve() && !!ui.findParent(this.showConfig.target, 'vega-modal');
+  }
+  /**
+   * The retrieve function get the slot position of vega-modal element.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    return this.getVegaModalShowConfigContainer();
   }
   /**
    * This function `getVegaModalContentWithoutScroll` determines whether vega-modal has a slot whose name is `content` or `modal-content`. If there is a component rendered in the modal, the elementAppender added to the corresponding slot attribute is added. If not, the elementAppender is not directly appended to the root directory of vega-modal.
@@ -502,7 +148,7 @@ class VegaModalWrapper {
    * @returns {HTMLElement} the `scrollContainer` element.
    */
   getVegaModalShowConfigContainer() {
-    const parentModal = ui$1.findParent(this.showConfig.target, 'vega-modal');
+    const parentModal = ui.findParent(this.showConfig.target, 'vega-modal');
     const modalContentScrollable = parentModal.shadowRoot.querySelector('.vega-modal-content-with-scroll');
     const modalDialog = parentModal.shadowRoot.querySelector('.modal-dialog');
     this.setElementSlot(parentModal, this.showConfig.appendableElement);
@@ -510,11 +156,11 @@ class VegaModalWrapper {
     return modalContentScrollable ? modalContentScrollable : modalDialog;
   }
 }
-__decorate$4([
+__decorate$7([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaModalWrapper.prototype, "showConfig", void 0);
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (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;
   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;
@@ -525,31 +171,31 @@ var __decorate$3 = (undefined && undefined.__decorate) || function (decorators,
  *
  * @property {HTMLElement} showConfig the show config
  */
-class VegaPopoverWrapper {
-  constructor() {
-    /**
-     * The canRetrieve function just determine whether the target of showConfig has the class `vega-popover`. If not, search upwards layer by layer.
-     *
-     * @returns {boolean} the boolean type.
-     */
-    this.canRetrieve = () => !!ui$1.findParent(this.showConfig.target, '.vega-popover');
-    /**
-     * The retrieve function get the element that if the target of showConfig does not have the class vega-popover, search upwards layer by layer until this element is found.
-     *
-     * @returns {HTMLElement} the element.
-     */
-    this.retrieve = () => {
-      const container = ui$1.findParent(this.showConfig.target, '.vega-popover');
-      container.append(this.showConfig.appendableElement);
-      return container;
-    };
+class VegaPopoverWrapper extends BodyPositionedWrapper {
+  /**
+   * The canRetrieve function just determine whether the target of showConfig has the class `vega-popover`. If not, search upwards layer by layer.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve() {
+    return super.canRetrieve() && !!ui.findParent(this.showConfig.target, '.vega-popover');
+  }
+  /**
+   * The retrieve function get the element that if the target of showConfig does not have the class vega-popover, search upwards layer by layer until this element is found.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    const container = ui.findParent(this.showConfig.target, '.vega-popover');
+    container.append(this.showConfig.appendableElement);
+    return container;
   }
 }
-__decorate$3([
+__decorate$6([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaPopoverWrapper.prototype, "showConfig", void 0);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (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;
   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;
@@ -593,25 +239,606 @@ class ElementAppenderContainerController extends globalSlimmerRegistry.VegaSlimm
     ];
   }
 }
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ElementAppenderContainerController.prototype, "container", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ElementAppenderContainerController.prototype, "showConfig", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], ElementAppenderContainerController.prototype, "positionRelativeToWrapper", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], ElementAppenderContainerController.prototype, "vegaPopoverWrapper", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], ElementAppenderContainerController.prototype, "vegaModalWrapper", void 0);
-__decorate$2([
+__decorate$5([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], ElementAppenderContainerController.prototype, "defaultWrapper", void 0);
 
+/**
+ * calculate position
+ */
+class BasePositionCalculationStrategy extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Get the position box.
+   *
+   * @param {PlacementType[]} placement - previous placement.
+   * @param {PositionAlignmentType[]} alignment - previous placement.
+   * @returns {ElementPositionBox} A function that takes in a container, element, target, placement, and translocation and
+   * returns an ElementPositionBox.
+   */
+  getPositionBox(placement, alignment) {
+    const placements = placement || this.getPlacements();
+    const alignments = alignment || this.getAlignments();
+    const targetBox = this.getTargetBoundBox();
+    const elementBox = this.getElementBoundBox();
+    const containerBox = this.getElementScrollDimension();
+    const suitablePlacement = this.getSuitablePlacement(containerBox, elementBox, targetBox, placements);
+    const suitableAlignment = this.getSuitableAlignment(containerBox, elementBox, targetBox, suitablePlacement, alignments);
+    const positionBox = this.calculatePosition(elementBox, targetBox, suitablePlacement, suitableAlignment);
+    const translocationBox = this.getTranslocationBox(suitablePlacement);
+    positionBox.placement = suitablePlacement;
+    positionBox.alignment = suitableAlignment;
+    positionBox.left += translocationBox.X;
+    positionBox.top += translocationBox.Y;
+    return positionBox;
+  }
+  /**
+   * "Get the width, height, and top position of an element."
+   *
+   * The function takes an element as an argument and returns an object with three properties: width,
+   * height, and top.
+   *
+   * Note: If element is hide, we should temporary change it to `block` to get the bounding client rect of element,
+   * After do that, this element will change to origin `hide`, if not, it will be contained in the calculate of `document.documentElement.scrollHeight`
+   *
+   * @returns {ElementBoundBox} An object with the width, height, and top properties of the element.
+   */
+  getElementBoundBox() {
+    const element = this.showConfig.appendableElement;
+    const isElementHide = element.classList.contains('vega-force-hidden');
+    if (isElementHide)
+      element.classList.remove('vega-force-hidden');
+    const elementRect = element.getBoundingClientRect();
+    if (isElementHide)
+      element.classList.add('vega-force-hidden');
+    return {
+      width: elementRect.width,
+      height: elementRect.height,
+      left: elementRect.left,
+      top: elementRect.top,
+    };
+  }
+  /**
+   * It takes a placement string or array of placements and returns an array of placements
+   * if given placement is single, we should completion the placements with the default {@link Placements}
+   * and make given placement as default.
+   * if given placement is array, we should use it directly, even it partial of {@link Placements}.
+   * if not placement give. we should use {@link Placements}.
+   *
+   * @returns {PlacementType[]} ordered placements.
+   */
+  getPlacements() {
+    const placement = this.showConfig.placement;
+    if (typeof placement === 'string') {
+      const partial = ui$1.Placements.filter((direction) => direction !== placement);
+      return [placement, ...partial];
+    }
+    else if (Array.isArray(placement)) {
+      return placement;
+    }
+    else {
+      return [...ui$1.Placements];
+    }
+  }
+  /**
+   * It returns acceptable alignments.
+   *
+   * @returns {PositionAlignmentType[]} acceptable alignments
+   */
+  getAlignments() {
+    const alignment = this.showConfig.alignment;
+    if (typeof alignment === 'string') {
+      const partial = ui$1.Alignments.filter((item) => item !== alignment);
+      return [alignment, ...partial];
+    }
+    else if (Array.isArray(alignment)) {
+      return alignment;
+    }
+    else {
+      return [...ui$1.Alignments];
+    }
+  }
+  /**
+   * It takes a placement, a target box, and a element box, and returns an element box
+   *
+   * @param {ElementBoundBox} elementBox - The position of the element element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {PositionAlignmentType} alignment - The alignment of the element
+   * @returns {ElementPositionBox} An object with top and left properties.
+   */
+  calculatePosition(elementBox, targetBox, placement, alignment) {
+    return {
+      top: this.calculateTop(elementBox, targetBox, placement, alignment),
+      left: this.calculateLeft(elementBox, targetBox, placement, alignment),
+    };
+  }
+  /**
+   * It returns the translocation of the element relative to the target element
+   *
+   * @param {PlacementType} placement - The suitable placement of the element.
+   * @returns {TranslocationType} A translocation object with X and Y properties.
+   */
+  getTranslocationBox(placement) {
+    const originPlacement = Array.isArray(this.showConfig.placement)
+      ? this.showConfig.placement[0]
+      : this.showConfig.placement;
+    const translocation = this.getTranslocation();
+    const result = { X: 0, Y: 0 };
+    if (typeGuard.isTranslocationType(translocation)) {
+      let xValue = translocation.X;
+      let yValue = translocation.Y;
+      // If originPlacement and placement is not in same axis, it should reverse axis.
+      if ((originPlacement &&
+        ['left', 'right'].includes(originPlacement) &&
+        ['top', 'bottom'].includes(placement)) ||
+        (originPlacement &&
+          ['top', 'bottom'].includes(originPlacement) &&
+          ['left', 'right'].includes(placement))) {
+        xValue = translocation.Y;
+        yValue = translocation.X;
+      }
+      if (['bottom', 'top'].includes(placement)) {
+        result.Y = placement === 'top' ? -yValue : yValue;
+        result.X = xValue;
+      }
+      if (['left', 'right'].includes(placement)) {
+        result.X = placement === 'left' ? -xValue : xValue;
+        result.Y = yValue;
+      }
+    }
+    return result;
+  }
+  /**
+   * Calculate the left position of the element
+   *
+   * @param {ElementBoundBox} elementBox - The position box of the element.
+   * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {PositionAlignmentType} alignment - The alignment of the element
+   * @returns {number} The left position of the element.
+   */
+  calculateLeft(elementBox, targetBox, placement, alignment) {
+    switch (placement) {
+      case 'top':
+      case 'bottom': {
+        if (alignment === 'end') {
+          return targetBox.left + targetBox.width - elementBox.width;
+        }
+        else if (alignment === 'center') {
+          return targetBox.left - (elementBox.width - targetBox.width) / 2;
+        }
+        else {
+          return targetBox.left;
+        }
+      }
+      case 'left': {
+        return targetBox.left - elementBox.width;
+      }
+      case 'right': {
+        return targetBox.left + targetBox.width;
+      }
+      /* istanbul ignore next */
+      default:
+        throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
+    }
+  }
+  /**
+   * Calculate the top position of the element
+   *
+   * @param {ElementBoundBox} elementBox - The position box of the element.
+   * @param {ElementBoundBox} targetBox - The position box of the target element that is attached to.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {PositionAlignmentType} alignment - The alignment of the element
+   * @returns {number} the top position of the element.
+   */
+  calculateTop(elementBox, targetBox, placement, alignment) {
+    switch (placement) {
+      case 'left':
+      case 'right': {
+        if (alignment === 'end') {
+          return targetBox.top + targetBox.height - elementBox.height;
+        }
+        else if (alignment === 'center') {
+          return targetBox.top - (elementBox.height - targetBox.height) / 2;
+        }
+        else {
+          return targetBox.top;
+        }
+      }
+      case 'top': {
+        return targetBox.top - elementBox.height;
+      }
+      case 'bottom': {
+        return targetBox.top + targetBox.height;
+      }
+      /* istanbul ignore next */
+      default:
+        throw new Error(`Unexpected placement: ${placement}. Expected values are top, bottom, left, or right.`);
+    }
+  }
+  /**
+   * It takes a list of placements and returns the first placement that has enough space to place the
+   * element
+   *
+   * @param {ElementScrollDimension} containerBox - The box of the container element.
+   * @param {ElementBoundBox} elementBox - The box of the element to be placed.
+   * @param {ElementBoundBox} targetBox - The box of the target element.
+   * @param {PlacementType[]} placements - The placements that we want to try.
+   * @returns {PlacementType} A function that takes in a containerBox, elementBox, targetBox, placements, and element.
+   */
+  getSuitablePlacement(containerBox, elementBox, targetBox, placements) {
+    const defaultPlacement = placements[0];
+    const suitablePlacement = placements.find((placement) => this.hasEnoughSpace(containerBox, placement, targetBox, elementBox));
+    if (suitablePlacement) {
+      return suitablePlacement;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`
+                No enough space found for placing element and we will keep using the defined placement:
+                ${defaultPlacement}
+            `);
+      return defaultPlacement;
+    }
+  }
+  /**
+   * It takes a list of alignments and returns the suitable one that has enough space to fit the element
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+   * @param {ElementBoundBox} elementBox - The box of the element that we want to position.
+   * @param {ElementBoundBox} targetBox - The box of the element that the element to be positioned is aligned to.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PositionAlignmentType[]} alignments - An array of alignments to try.
+   * @returns {PositionAlignmentType} the alignment that is suitable for the element.
+   */
+  getSuitableAlignment(containerBox, elementBox, targetBox, placement, alignments) {
+    const defaultAlignment = alignments[0];
+    const suitableAlignment = alignments.find((alignment) => this.hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment));
+    if (suitableAlignment) {
+      return suitableAlignment;
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.warn(`
+                No enough space found for placing element and we will keep using the defined alignment:
+                ${defaultAlignment}
+            `);
+      return defaultAlignment;
+    }
+  }
+  /**
+   * Whether the alignment space is enough
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {ElementBoundBox} elementBox - The box of the element that we're trying to position.
+   * @param {PlacementType} placement - The placement of the element relative to the target.
+   * @param {PlacementType} alignment - The alignment of the element relative to the target.
+   * @returns {boolean} return true if it has enough space, otherwise false
+   */
+  hasEnoughAlignmentSpace(containerBox, targetBox, elementBox, placement, alignment) {
+    if (['top', 'bottom'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.left + elementBox.width <= containerBox.width;
+        }
+        case 'center': {
+          return (targetBox.left >= (elementBox.width - targetBox.width) / 2 &&
+            targetBox.left + targetBox.width / 2 + elementBox.width / 2 <= containerBox.width);
+        }
+        case 'end': {
+          return targetBox.left + targetBox.width >= elementBox.width;
+        }
+      }
+    }
+    if (['right', 'left'].includes(placement)) {
+      switch (alignment) {
+        case 'start': {
+          return targetBox.top + elementBox.height <= containerBox.height;
+        }
+        case 'center': {
+          return (targetBox.top >= (elementBox.height - targetBox.height) / 2 &&
+            targetBox.top + targetBox.height / 2 + elementBox.height / 2 <= containerBox.height);
+        }
+        case 'end': {
+          return targetBox.top + targetBox.height >= elementBox.height;
+        }
+      }
+    }
+    /* istanbul ignore next */
+    return false;
+  }
+  /**
+   * If the placement is top or left, then the target's top or left position must be greater than or
+   * equal to the element's height or width. If the placement is bottom or right, then the container's
+   * height or width minus the target's top or left position minus the target's height or width must be
+   * greater than or equal to the element's height or width.
+   *
+   * @param {ElementScrollDimension} containerBox - The bounding box of the container element.
+   * @param {PlacementType} placement - The placement of the element.
+   * @param {ElementBoundBox} targetBox - The position of the target element.
+   * @param {ElementBoundBox} elementBox - The dimensions of the element to be positioned.
+   * @returns {boolean} A boolean value.
+   */
+  hasEnoughSpace(containerBox, placement, targetBox, elementBox) {
+    switch (placement) {
+      case 'top':
+        return targetBox.top >= elementBox.height;
+      case 'bottom':
+        return containerBox.height - targetBox.top - targetBox.height >= elementBox.height;
+      case 'left':
+        return targetBox.left >= elementBox.width;
+      case 'right':
+        return containerBox.width - targetBox.left - targetBox.width >= elementBox.width;
+      /* istanbul ignore next */
+      default:
+        return false;
+    }
+  }
+  /**
+   * Retrieves and formats the translocation.
+   *
+   * @returns {TranslocationType} current translocation.
+   */
+  getTranslocation() {
+    const translocation = this.showConfig.translocation;
+    return translocation && responsiveFormatFacade.ResponsiveFormatFacade.format(translocation, 'translocation');
+  }
+}
+
+var __decorate$4 = (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;
+  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;
+};
+/**
+ * calculate position by body container
+ */
+class BodyPositionCalculationStrategy extends BasePositionCalculationStrategy {
+  /**
+   * Get the position of the element in the container according to the target element and the placement
+   * If give a translocation, it will apply the translocation to the result.
+   * Note: If you use this method to calculate the position, you should make container as relative position at first.
+   *
+   * @returns {ElementPositionBox} A function that takes in a container, element, target, placement, and translocation and
+   * returns an ElementPositionBox.
+   */
+  getPosition() {
+    const containerStyle = window.getComputedStyle(this.container);
+    if (containerStyle.position !== 'relative') {
+      globalSlimmerRegistry.LogUtility.warn(`Calculate position should make container as 'position: relative', otherwise the result might not be accurate.`);
+    }
+    return this.getPositionBox();
+  }
+  /**
+   * It returns the position of an element relative to its container and also includes the scroll height of container.
+   *
+   * @returns {ElementBoundBox} An object with the properties width, height, top, and left.
+   */
+  getTargetBoundBox() {
+    const containerRect = this.container.getBoundingClientRect();
+    const targetRect = this.showConfig.target.getBoundingClientRect();
+    const targetTop = targetRect.top - containerRect.top + this.container.scrollTop;
+    const targetLeft = targetRect.left - containerRect.left + this.container.scrollLeft;
+    return {
+      width: targetRect.width,
+      height: targetRect.height,
+      top: targetTop,
+      left: targetLeft,
+    };
+  }
+  /**
+   * "Get the width and height of an element."
+   *
+   * The function takes a single parameter, a container element, and returns an object with two
+   * properties: width and height
+   *
+   * @returns {ElementScrollDimension} An object with two properties: width and height.
+   */
+  getElementScrollDimension() {
+    return {
+      width: this.container.scrollWidth,
+      height: this.container.scrollHeight,
+    };
+  }
+}
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], BodyPositionCalculationStrategy.prototype, "container", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], BodyPositionCalculationStrategy.prototype, "showConfig", void 0);
+
+var __decorate$3 = (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;
+  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;
+};
+/**
+ * calculate position by screen container
+ */
+class ScreenPositionCalculationStrategy extends BasePositionCalculationStrategy {
+  /**
+   * Get the position of the element in the container according to the target element and the placement
+   * If give a translocation, it will apply the translocation to the result.
+   *
+   * @param {boolean} usePreviousPlacement - Should keep use previous placement and alignment.
+   * @returns {ElementPositionBox} A function that takes in a container, element, target, placement, and translocation and
+   * returns an ElementPositionBox.
+   */
+  getPosition(usePreviousPlacement) {
+    const positionBox = usePreviousPlacement
+      ? this.getPositionBox([this.previousPositionBox.placement], [this.previousPositionBox.alignment])
+      : this.getPositionBox();
+    this.previousPositionBox = positionBox;
+    return positionBox;
+  }
+  /**
+   * It returns the position of an element relative to its container and also includes the scroll height of container.
+   *
+   * @returns {ElementBoundBox} An object with the properties width, height, top, and left.
+   */
+  getTargetBoundBox() {
+    const targetRect = this.showConfig.target.getBoundingClientRect();
+    return {
+      width: targetRect.width,
+      height: targetRect.height,
+      top: targetRect.top,
+      left: targetRect.left,
+    };
+  }
+  /**
+   * "Get the width and height of an element."
+   *
+   * The function takes a single parameter, a container element, and returns an object with two
+   * properties: width and height
+   *
+   * @returns {ElementScrollDimension} An object with two properties: width and height.
+   */
+  getElementScrollDimension() {
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight,
+    };
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], ScreenPositionCalculationStrategy.prototype, "showConfig", void 0);
+
+var __decorate$2 = (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;
+  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;
+};
+/**
+ * Calculation and adjustment of positions for appendable elements based on target element positions.
+ */
+class PositionCalculationController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.bodyPositionStrategy = new BodyPositionCalculationStrategy();
+    this.screenPositionStrategy = new ScreenPositionCalculationStrategy();
+  }
+  /**
+   * Sets the calculate postion strategy.
+   */
+  setCalculationStrategy() {
+    this.positionStrategy = this.showConfig.isScreenPosition
+      ? this.screenPositionStrategy
+      : this.bodyPositionStrategy;
+  }
+  /**
+   * Calculates the position and applies it to the appendable element.
+   *
+   * @param {boolean} [usePreviousPlacement] - Should keep use previous placement and alignment.
+   */
+  adjustPosition(usePreviousPlacement) {
+    this.adjustWidth();
+    this.adjustHeight();
+    this.applyPosition(this.positionStrategy.getPosition(usePreviousPlacement));
+  }
+  /**
+   * Apply the position to the appendable element.
+   *
+   * @param {ElementPositionBox} positionBox - position box
+   */
+  applyPosition(positionBox) {
+    const appendableElement = this.showConfig.appendableElement;
+    if (this.showConfig.isScreenPosition) {
+      appendableElement.style.position = 'fixed';
+    }
+    appendableElement.style.left = `${positionBox.left}px`;
+    appendableElement.style.top = `${positionBox.top}px`;
+    appendableElement.classList.remove('vega-placement-left', 'vega-placement-right', 'vega-placement-top', 'vega-placement-bottom');
+    appendableElement.classList.remove('vega-alignment-start', 'vega-alignment-center', 'vega-alignment-end');
+    appendableElement.classList.add(`vega-placement-${positionBox.placement}`);
+    appendableElement.classList.add(`vega-alignment-${positionBox.alignment}`);
+  }
+  /**
+   * 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.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`;
+    }
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PositionCalculationController.prototype, "container", void 0);
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField()
+], PositionCalculationController.prototype, "showConfig", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], PositionCalculationController.prototype, "bodyPositionStrategy", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], PositionCalculationController.prototype, "screenPositionStrategy", void 0);
+
 var __decorate$1 = (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;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -654,10 +881,8 @@ class ElementAppender {
         callback: /* istanbul ignore next */ () => {
           // while target and appendableElement are both visible, we can adjust position.
           // https://gethired.atlassian.net/browse/VD-1087
-          if (ui$1.isElementVisible(this.showConfig.target) &&
-            ui$1.isElementVisible(this.showConfig.appendableElement)) {
-            this.adjustWidth();
-            this.adjustHeight();
+          if (ui.isElementVisible(this.showConfig.target) &&
+            ui.isElementVisible(this.showConfig.appendableElement)) {
             this.adjustPosition();
           }
         },
@@ -666,6 +891,7 @@ class ElementAppender {
       },
     ]);
     this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.positionCalculationController = new PositionCalculationController();
     this.showConfigCallback = showConfigCallback;
     this.showConfigCallbackTarget = showConfigCallbackTarget;
     const config = this.getShowConfig();
@@ -690,8 +916,6 @@ 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);
@@ -707,6 +931,18 @@ class ElementAppender {
     this.resetContainerPosition();
     internalVegaZIndexManager.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
@@ -816,76 +1052,16 @@ 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.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.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.
@@ -921,6 +1097,9 @@ __decorate$1([
 __decorate$1([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], ElementAppender.prototype, "elementAppenderContainerController", void 0);
+__decorate$1([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], ElementAppender.prototype, "positionCalculationController", void 0);
 
 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;
@@ -946,6 +1125,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
         (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseleave', this.elementMouseLeaveHandler);
       }
       window.addEventListener('mousedown', this.globalMouseDownHandler);
+      document.addEventListener('scroll', this.globalScrollHandler, { capture: true });
     };
     /* It's a function that listens to the click event on the dropdown. It checks if the trigger
     property is equal to 'click'. If it is, then it toggles the dropdown. */
@@ -1001,12 +1181,20 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       if (this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !ui$1.isParent(currentTarget, this.showConfig.appendableElement) &&
-        !ui$1.isParent(currentTarget, this.showConfig.target) &&
-        ui$1.findParent(currentTarget, 'vega-modal') === ui$1.findParent(this.showConfig.target, 'vega-modal')) {
+        !ui.isParent(currentTarget, this.showConfig.appendableElement) &&
+        !ui.isParent(currentTarget, this.showConfig.target) &&
+        ui.findParent(currentTarget, 'vega-modal') === ui.findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();
       }
     };
+    /* istanbul ignore next */
+    /* Listen global scroll event */
+    this.globalScrollHandler = () => {
+      var _a;
+      if (this.showConfig && this.showConfig.isScreenPosition && this.isShowing()) {
+        (_a = this.elementAppender) === null || _a === void 0 ? void 0 : _a.onScroll();
+      }
+    };
     /* A timer that will hide the dropdown after a certain amount of time. */
     this.createDelayHideTimer = () => {
       this.delayHideTimer = setTimeout(() => {
@@ -1093,6 +1281,7 @@ class ElementAppenderSlimmer extends globalSlimmerRegistry.VegaSlimmer {
       (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
     }
     window.removeEventListener('mousedown', this.globalMouseDownHandler);
+    document.removeEventListener('scroll', this.globalScrollHandler);
   }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;