@globalpayments/vega 2.19.0 → 2.20.0

package/dist/esm/element-appender-slimmer-4b08a52e.js

@@ -0,0 +1,1107 @@
+import { L as LogUtility, a as MapToComponentField, I as InjectVegaSlimmer, V as VegaSlimmer, M as MapToComponentMethod } from './global-slimmer-registry-16fd7452.js';
+import { P as Placements, A as Alignments } from './ui-df46cc20.js';
+import { z as isTranslocationType } from './type-guard-4bc3fbf5.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-b96ca811.js';
+import { f as findParent, i as isElementVisible, c as isParent } from './ui-28499aab.js';
+import { Z as ZIndexManager } from './z-index-manager-7179cb75.js';
+import { c as createDynamicSlimmer } from './dynamic-slimmer-ef83e258.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e2e9f248.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') {
+    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 (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 = Placements.filter((direction) => direction !== placement);
+    return [placement, ...partial];
+  }
+  else if (Array.isArray(placement)) {
+    return placement;
+  }
+  else {
+    return [...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 = Alignments.filter((item) => item !== alignment);
+    return [alignment, ...partial];
+  }
+  else if (Array.isArray(alignment)) {
+    return alignment;
+  }
+  else {
+    return [...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 {
+    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 {
+    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 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;
+};
+/**
+ * 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;
+    };
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], DefaultWrapper.prototype, "showConfig", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * This class is is used to retrieve an HTML element based on a specified selector.
+ *
+ * @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;
+    };
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], PositionRelativeToWrapper.prototype, "showConfig", void 0);
+
+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;
+};
+/**
+ * This class is is used to get vega-modal element as a container and store the element appender element to slot.
+ *
+ * @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 = () => !!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();
+  }
+  /**
+   * 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.
+   *
+   * @param {Nullable<HTMLElement>} parentModal The parentModal is vega-modal element.
+   * @param {Nullable<HTMLElement>} element The parentModal is vega-modal element.
+   */
+  setElementSlot(parentModal, element) {
+    var _a;
+    const slotName = (_a = Array.from(parentModal.children)
+      .find((item) => {
+      const slotName = item.getAttribute('slot');
+      return slotName && ['content', 'modal-content'].includes(slotName);
+    })) === null || _a === void 0 ? void 0 : _a.getAttribute('slot');
+    if (slotName) {
+      element.setAttribute('slot', slotName);
+    }
+  }
+  /**
+   * The function "getShowConfigContainer" returns the appended element container. If the modal content can be scrolled, the container is the div element that wraps the append element. Otherwise, the container is the modal dialog itself.
+   *
+   * @returns {HTMLElement} the `scrollContainer` element.
+   */
+  getVegaModalShowConfigContainer() {
+    const parentModal = 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);
+    parentModal.append(this.showConfig.appendableElement);
+    return modalContentScrollable ? modalContentScrollable : modalDialog;
+  }
+}
+__decorate$4([
+  MapToComponentField({ writable: true })
+], VegaModalWrapper.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;
+};
+/**
+ * This class is used to get the class `vega-popover` as a container and store the element appender element.
+ *
+ * @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 = () => !!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 = findParent(this.showConfig.target, '.vega-popover');
+      container.append(this.showConfig.appendableElement);
+      return container;
+    };
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaPopoverWrapper.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;
+};
+/**
+ * This class is responsible for setting the container element for appending an element based on certain conditions.
+ *
+ * @property {HTMLElement} container the container
+ * @property {HTMLElement} showConfig the show config
+ */
+class ElementAppenderContainerController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.positionRelativeToWrapper = new PositionRelativeToWrapper();
+    this.vegaPopoverWrapper = new VegaPopoverWrapper();
+    this.vegaModalWrapper = new VegaModalWrapper();
+    this.defaultWrapper = new DefaultWrapper();
+  }
+  /**
+   * The function sets the container element by iterating through a list of retrievers, defaulting to the document body.
+   */
+  setContainer() {
+    this.setContainerRetrievers();
+    for (const retriever of this.containerRetrievers) {
+      if (retriever.canRetrieve()) {
+        this.container = retriever.retrieve();
+        return;
+      }
+    }
+  }
+  /**
+   * The function sets up an array of container retrievers based on certain conditions.
+   */
+  setContainerRetrievers() {
+    this.containerRetrievers = [
+      this.positionRelativeToWrapper,
+      this.vegaPopoverWrapper,
+      this.vegaModalWrapper,
+      this.defaultWrapper,
+    ];
+  }
+}
+__decorate$2([
+  MapToComponentField({ writable: true })
+], ElementAppenderContainerController.prototype, "container", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], ElementAppenderContainerController.prototype, "showConfig", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "positionRelativeToWrapper", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "vegaPopoverWrapper", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "vegaModalWrapper", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "defaultWrapper", 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);
+  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;
+};
+/**
+ * This class is responsible for attaching the appendable element to the host element and adjusting its position
+ *
+ * @property {HTMLElement} showConfigCallback This is the callback function that will be
+ * called when the user clicks on the "Configure" button.
+ * @property {HTMLElement} showConfigCallbackTarget he component that will be used as the
+ * target for the showConfigCallback.
+ * @property {HTMLElement} showConfig the show config
+ */
+class ElementAppender {
+  /**
+   * The `constructor` function is used to initialize the `showConfigCallback` and
+   * `showConfigCallbackTarget` properties of the class.
+   *
+   * @param {ShowConfigCallbackType} showConfigCallback - This is the callback function that will be
+   * called when the user clicks on the "Configure" button.
+   * @param {ComponentInterface} [showConfigCallbackTarget] - The component that will be used as the
+   * target for the showConfigCallback.
+   */
+  constructor(showConfigCallback, showConfigCallbackTarget) {
+    var _a;
+    this.resizeObserverSlimmer = createDynamicSlimmer(ElementAppender, PageResizeObserverSlimmer, [], [
+      { mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' },
+      { mapFrom: 'disconnectResizeObserver', mapTo: 'disconnectResizeObserver' },
+    ], [
+      {
+        /**
+         * The above code is defining a callback function. Inside the function,
+         * it checks if both the `target` and `appendableElement` are visible using the `isElementVisible` function.
+         * If both elements are visible, it calls three other functions: `adjustWidth`, `adjustHeight`, and `adjustPosition`.
+         * These functions are responsible for adjusting the width, height, and position of the elements respectively.
+         * The below method is e2e-test covered in @see{module:element-appender-helper-resize-callback-e2e }
+         */
+        callback: /* istanbul ignore next */ () => {
+          // while target and appendableElement are both visible, we can adjust position.
+          // https://gethired.atlassian.net/browse/VD-1087
+          if (isElementVisible(this.showConfig.target) &&
+            isElementVisible(this.showConfig.appendableElement)) {
+            this.adjustWidth();
+            this.adjustHeight();
+            this.adjustPosition();
+          }
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        target: () => [document.body, this.showConfig.appendableElement, this.showConfig.target],
+      },
+    ]);
+    this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.showConfigCallback = showConfigCallback;
+    this.showConfigCallbackTarget = showConfigCallbackTarget;
+    const config = this.getShowConfig();
+    (_a = config.appendableElement) === null || _a === void 0 ? void 0 : _a.classList.add('vega-force-hidden');
+  }
+  /**
+   * It takes an element and appends it to the DOM, then adjusts its position and size to match the
+   * target element
+   *
+   * @returns {void} Nothing is being returned.
+   */
+  show() {
+    this.setShowConfig();
+    if (!this.showConfig.target) {
+      LogUtility.error(`No target element found, please add it at new elementAppender.`);
+      return;
+    }
+    if (!this.showConfig.appendableElement) {
+      LogUtility.error(`No appendable element found, please add it at new elementAppender.`);
+      return;
+    }
+    /* 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);
+    this.connectResizeObserver();
+  }
+  /**
+   * > If the appendable element exists, hide it
+   */
+  hide() {
+    if (!this.showConfig)
+      return;
+    this.toggleShow(false);
+    this.resetContainerPosition();
+    ZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+  }
+  /* istanbul ignore next */
+  /**
+   * It removes the z-index from the appendable element, removes the appendable element from the DOM, and
+   * disconnects the resize observer
+   */
+  destroy() {
+    if (!this.showConfig)
+      return;
+    this.removeVisibleAppendElement(this.showConfig.appendableElement);
+    ZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    this.showConfig.appendableElement.remove();
+    this.disconnectResizeObserver();
+  }
+  /**
+   * The function "connectResizeObserver" is used to connect a resize observer.
+   */
+  connectResizeObserver() {
+  }
+  /**
+   * The function disconnects a resize observer.
+   */
+  disconnectResizeObserver() {
+  }
+  /**
+   * Toggle appendableElement show or hide
+   *
+   * @param {boolean} show remove hidden style if true, otherwise add it
+   */
+  toggleShow(show) {
+    if (show) {
+      this.showConfig.appendableElement.classList.remove('vega-force-hidden');
+      this.saveVisibleAppendElement(this.showConfig.appendableElement);
+    }
+    else {
+      this.showConfig.appendableElement.classList.add('vega-force-hidden');
+      this.removeVisibleAppendElement(this.showConfig.appendableElement);
+    }
+  }
+  /**
+   * Save visible AppendableElement from the container state
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  saveVisibleAppendElement(appendableElement) {
+    const containerState = ElementAppender.containerMap.get(this.container);
+    if (containerState) {
+      containerState.visibleAppendElements.add(appendableElement);
+    }
+  }
+  /**
+   * Remove the AppendableElement from the container state.
+   * If the container not includes visible element, will remove the container Map.
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  removeVisibleAppendElement(appendableElement) {
+    const containerState = ElementAppender.containerMap.get(this.container);
+    if (containerState) {
+      containerState.visibleAppendElements.delete(appendableElement);
+    }
+  }
+  /**
+   * The below method is e2e-test covered in @see {module:should-not-reset-dropdown-append-container-position-style-to-origin-when-there-is-another-dropdown-need-to-show}
+   */
+  resetContainerPosition() {
+    const containerState = ElementAppender.containerMap.get(this.container);
+    if (containerState) {
+      const { visibleAppendElements, originPosition = 'static' } = containerState;
+      if (visibleAppendElements.size === 0) {
+        this.container.style.position = originPosition;
+        ElementAppender.containerMap.delete(this.container);
+      }
+    }
+  }
+  /**
+   * If the showConfigCallback is a function, then call it and set the showConfig to the result.
+   * Otherwise, set the showConfig to the showConfigCallback
+   */
+  setShowConfig() {
+    this.showConfig = this.getShowConfig();
+    this.showConfig = Object.assign({
+      matchTargetWidth: false,
+      matchContainerHeight: false,
+    }, this.showConfig);
+    if (this.showConfig.target && this.showConfig.appendableElement) {
+      this.elementAppenderContainerController.setContainer();
+    }
+  }
+  /**
+   * It makes sure that the container element is positioned relatively, and that the appendable element
+   * has box-sizing set to border-box
+   *
+   * @returns {void}
+   */
+  prepareShow() {
+    // Add relative position to the container while the container is static,
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning
+    const containerStyle = window.getComputedStyle(this.container);
+    const originContainerPosition = containerStyle.position;
+    if (!ElementAppender.containerMap.has(this.container)) {
+      ElementAppender.containerMap.set(this.container, {
+        visibleAppendElements: new Set(),
+        originPosition: originContainerPosition,
+      });
+    }
+    if (originContainerPosition === 'static') {
+      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`;
+    }
+  }
+  /**
+   * A function that takes no parameters and returns nothing. It sets the position of the appendable element.
+   *
+   * @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}`);
+  }
+  /**
+   * Sets the z-index of the appendable element to 11000.
+   *
+   * @returns {void}
+   */
+  setZIndex() {
+    ZIndexManager.setZIndex(this.showConfig.appendableElement, 'base');
+  }
+  /**
+   * If the showConfigCallback is a function, call it and return the result, otherwise return the
+   * showConfigCallback
+   *
+   * @returns {ElementAppenderShowConfig} The showConfigCallback is being returned.
+   */
+  getShowConfig() {
+    if (this.showConfigCallback instanceof Function) {
+      return this.showConfigCallback(this.showConfigCallbackTarget);
+    }
+    else {
+      return this.showConfigCallback;
+    }
+  }
+}
+/**
+ * To maintain the state between container and the visible dropdown within it.
+ * Key is containerElement
+ */
+ElementAppender.containerMap = new Map();
+__decorate$1([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "resizeObserverSlimmer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "elementAppenderContainerController", 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;
+  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;
+};
+class ElementAppenderSlimmer extends VegaSlimmer {
+  constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
+    super();
+    /**
+     * It adds event listeners to the target and the appendable element
+     */
+    this.registerElementAppenderListener = () => {
+      var _a, _b, _c, _d, _e, _f;
+      this.unRegisterElementAppenderListener();
+      if (this.showConfig) {
+        (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.targetClickHandler);
+        (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.targetMouseEnterHandler);
+        (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+        (_d = this.showConfig.target) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', this.targetFocusoutHandler);
+        (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseenter', this.elementMouseEnterHandler);
+        (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseleave', this.elementMouseLeaveHandler);
+      }
+      window.addEventListener('mousedown', this.globalMouseDownHandler);
+    };
+    /* 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. */
+    this.targetClickHandler = () => {
+      if (this.shouldListenerWork('click')) {
+        this.isShowing() ? this.hide() : this.show();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.targetMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.isShowing() === false && this.show();
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.targetMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* istanbul ignore next */
+    /* While focused element is in appendable element, like search input, we should not hide dropdown */
+    this.targetFocusoutHandler = (e) => {
+      var _a;
+      if (e.relatedTarget !== ((_a = this.showConfig) === null || _a === void 0 ? void 0 : _a.appendableElement)) {
+        this.targetMouseLeaveHandler();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.elementMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.elementMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
+    and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
+    hides the dropdown. */
+    this.globalMouseDownHandler = (e) => {
+      const currentTarget = e.composedPath()[0];
+      if (this.shouldListenerWork('custom') &&
+        this.isShowing() &&
+        this.showConfig &&
+        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !isParent(currentTarget, this.showConfig.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
+        this.hide();
+      }
+    };
+    /* A timer that will hide the dropdown after a certain amount of time. */
+    this.createDelayHideTimer = () => {
+      this.delayHideTimer = setTimeout(() => {
+        this.hide();
+        clearTimeout(this.delayHideTimer);
+      }, ElementAppenderSlimmer.DELAY_HIDE_TIME);
+    };
+    /* A function that clears the timer. */
+    this.clearDelayHideTimer = () => {
+      this.delayHideTimer && clearTimeout(this.delayHideTimer);
+    };
+    /* It's a function that checks if the listener should work or not. */
+    this.shouldListenerWork = (trigger) => {
+      const currentTrigger = this.getTrigger();
+      switch (trigger) {
+        case 'custom':
+          return currentTrigger !== 'none';
+        case 'click':
+          return currentTrigger === 'click';
+        case 'hover':
+          return currentTrigger === 'hover';
+      }
+      /* istanbul ignore next */
+      throw new Error(`Unexpected trigger: ${trigger}. Expected values are custom, click, or hover.`);
+    };
+    this.showConfigFactory = showConfigFactory;
+    this.getTrigger = getTrigger;
+    this.isDropdownShowName = isDropdownShowName;
+    this.disableInteractiveGetter = disableInteractiveGetter;
+  }
+  connectedCallback() {
+    if (this.elementAppender === null) {
+      this.setElementAppender();
+      this.registerElementAppenderListener();
+    }
+  }
+  disconnectedCallback() {
+    this.unRegisterElementAppenderListener();
+    if (this.elementAppender) {
+      this.elementAppender.destroy();
+      this.elementAppender = null;
+    }
+  }
+  componentDidLoad() {
+    this.setShowConfig();
+    this.setElementAppender();
+    this.registerElementAppenderListener();
+  }
+  getElementAppender() {
+    return this.elementAppender;
+  }
+  show() {
+    this.elementAppender && this.elementAppender.show();
+    this[this.isDropdownShowName] = true;
+  }
+  hide() {
+    this.elementAppender && this.elementAppender.hide();
+    this[this.isDropdownShowName] = false;
+  }
+  destroy() {
+    this.elementAppender = null;
+    this[this.isDropdownShowName] = false;
+  }
+  setElementAppender() {
+    this.elementAppender = new ElementAppender(this.showConfigFactory, this);
+  }
+  isShowing() {
+    return this[this.isDropdownShowName];
+  }
+  setShowConfig() {
+    this.showConfig = this.showConfigFactory();
+  }
+  /**
+   * It removes all event listeners that were added in the `register()` function
+   */
+  unRegisterElementAppenderListener() {
+    var _a, _b, _c, _d, _e, _f;
+    if (this.showConfig) {
+      (_a = this.showConfig.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.targetClickHandler);
+      (_b = this.showConfig.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+      (_c = this.showConfig.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+      (_d = this.showConfig.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', this.targetMouseLeaveHandler);
+      (_e = this.showConfig.appendableElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseenter', this.elementMouseEnterHandler);
+      (_f = this.showConfig.appendableElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
+    }
+    window.removeEventListener('mousedown', this.globalMouseDownHandler);
+  }
+}
+ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], ElementAppenderSlimmer.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], ElementAppenderSlimmer.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], ElementAppenderSlimmer.prototype, "componentDidLoad", null);
+
+export { ElementAppenderSlimmer as E };