@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

package/dist/vega/element-appender-slimmer-8355fb28.js

@@ -0,0 +1,1508 @@
+import { b as MapToComponentField, V as VegaSlimmer, a as InjectVegaSlimmer, L as LogUtility, c as createDynamicSlimmer, m as methodPlaceholder, M as MapToComponentMethod } from './vega-slimmer-core-83fd0e22.js';
+import { f as findParent, c as isElementVisible, b as isParent } from './ui-5f775fd9.js';
+import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-f0ca0975.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-ee8774a6.js';
+import { P as Placements, A as Alignments } from './ui-189dae23.js';
+import { J as isTranslocationType } from './type-guard-09acedc9.js';
+import { r as responsiveFormatFacade } from './responsive-format-facade-98596535.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { S as SHADOW_ROOT_ELEMENT_SCROLLING } from './static-subject-title-6fdf8c8b.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { t as VegaInternalNestEAHierarchyTreeChange } from './vega-internal-event-id-b65a01a3.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+
+var __decorate$a = (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 {
+  /**
+   * 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() {
+    // eslint-disable-next-line no-restricted-globals
+    const container = document.body;
+    if (this.showConfig.appendableElement.parentElement !== container) {
+      container.append(this.showConfig.appendableElement);
+    }
+    return container;
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], DefaultWrapper.prototype, "showConfig", void 0);
+
+/**
+ * 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$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;
+  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 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 &&
+      // eslint-disable-next-line no-restricted-globals
+      !!document.querySelector(this.showConfig.positionRelativeTo));
+  }
+  /**
+   * The retrieve function query the element of positionRelativeTo in showConfig.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    // eslint-disable-next-line no-restricted-globals
+    const container = document.querySelector(this.showConfig.positionRelativeTo);
+    if (this.showConfig.appendableElement.parentElement !== container) {
+      container.append(this.showConfig.appendableElement);
+    }
+    return container;
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], PositionRelativeToWrapper.prototype, "showConfig", void 0);
+
+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;
+  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 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() && !!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.
+   *
+   * @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$8([
+  MapToComponentField({ writable: true })
+], VegaModalWrapper.prototype, "showConfig", void 0);
+
+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;
+  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 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() && !!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 = findParent(this.showConfig.target, '.vega-popover');
+    container.append(this.showConfig.appendableElement);
+    return container;
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaPopoverWrapper.prototype, "showConfig", void 0);
+
+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 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$6([
+  MapToComponentField({ writable: true })
+], ElementAppenderContainerController.prototype, "container", void 0);
+__decorate$6([
+  MapToComponentField({ writable: true })
+], ElementAppenderContainerController.prototype, "showConfig", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "positionRelativeToWrapper", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "vegaPopoverWrapper", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "vegaModalWrapper", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], ElementAppenderContainerController.prototype, "defaultWrapper", void 0);
+
+/**
+ * calculate position
+ */
+class BasePositionCalculationStrategy extends 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 = Placements.filter((direction) => direction !== placement);
+      return [placement, ...partial];
+    }
+    else if (Array.isArray(placement)) {
+      return placement;
+    }
+    else {
+      return [...Placements];
+    }
+  }
+  /**
+   * It returns acceptable alignments.
+   *
+   * @returns {PositionAlignmentType[]} acceptable alignments
+   */
+  getAlignments() {
+    const alignment = this.showConfig.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.
+   */
+  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 (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 {
+      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 {
+      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 {Nullable<TranslocationType>} current translocation.
+   */
+  getTranslocation() {
+    const translocation = this.showConfig.translocation;
+    return translocation && responsiveFormatFacade.format(translocation, 'translocation');
+  }
+}
+
+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;
+};
+/**
+ * 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') {
+      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$5([
+  MapToComponentField()
+], BodyPositionCalculationStrategy.prototype, "container", void 0);
+__decorate$5([
+  MapToComponentField()
+], BodyPositionCalculationStrategy.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;
+};
+/**
+ * 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$4([
+  MapToComponentField()
+], ScreenPositionCalculationStrategy.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;
+};
+/**
+ * Calculation and adjustment of positions for appendable elements based on target element positions.
+ */
+class PositionCalculationController extends 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;
+    // TODO: should control position style in element appender but in component level
+    // https://gethired.atlassian.net/browse/VD-7883
+    if (this.showConfig.isScreenPosition) {
+      appendableElement.style.position = 'fixed';
+    }
+    else {
+      if (appendableElement.classList.contains('date-picker-content-box')) {
+        appendableElement.style.position = 'absolute';
+      }
+    }
+    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.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 && !this.showConfig.isScreenPosition) {
+      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$3([
+  MapToComponentField()
+], PositionCalculationController.prototype, "container", void 0);
+__decorate$3([
+  MapToComponentField()
+], PositionCalculationController.prototype, "showConfig", void 0);
+__decorate$3([
+  InjectVegaSlimmer()
+], PositionCalculationController.prototype, "bodyPositionStrategy", void 0);
+__decorate$3([
+  InjectVegaSlimmer()
+], PositionCalculationController.prototype, "screenPositionStrategy", 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 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.adjustPosition();
+          }
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc, no-restricted-globals
+        target: () => [document.body, this.showConfig.appendableElement, this.showConfig.target],
+      },
+    ]);
+    this.elementAppenderContainerController = new ElementAppenderContainerController();
+    this.positionCalculationController = new PositionCalculationController();
+    this.showConfigCallback = showConfigCallback;
+    this.showConfigCallbackTarget = showConfigCallbackTarget;
+    const config = this.getShowConfig();
+    this.hideElementAppender(config.appendableElement);
+    (_a = config.appendableElement) === null || _a === void 0 ? void 0 : _a.classList.add('vega-element-appender-appendable');
+  }
+  /**
+   * 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.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();
+    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
+   * disconnects the resize observer
+   */
+  destroy() {
+    if (!this.showConfig)
+      return;
+    this.removeVisibleAppendElement(this.showConfig.appendableElement);
+    this.resetContainerPosition();
+    InternalVegaZIndexManager.removeZIndex(this.showConfig.appendableElement, 'base');
+    this.showConfig.appendableElement.remove();
+    this.disconnectResizeObserver();
+  }
+  /**
+   * The function "connectResizeObserver" is used to connect a resize observer.
+   */
+  connectResizeObserver() {
+    methodPlaceholder();
+  }
+  /**
+   * The function disconnects a resize observer.
+   */
+  disconnectResizeObserver() {
+    methodPlaceholder();
+  }
+  /**
+   * Toggle appendableElement show or hide
+   *
+   * @param {boolean} show remove hidden style if true, otherwise add it
+   */
+  toggleShow(show) {
+    if (show) {
+      this.showElementAppender(this.showConfig.appendableElement);
+      this.saveVisibleAppendElement(this.showConfig.appendableElement);
+    }
+    else {
+      this.hideElementAppender(this.showConfig.appendableElement);
+      this.removeVisibleAppendElement(this.showConfig.appendableElement);
+    }
+  }
+  /**
+   * Show the appendable element by removing hidden styles
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  showElementAppender(appendableElement) {
+    if (appendableElement.classList.contains('date-picker-content-box')) {
+      appendableElement.style.display = 'block';
+    }
+    else {
+      appendableElement.classList.remove('vega-force-hidden');
+    }
+  }
+  /**
+   * Hide the appendable element by adding hidden styles.
+   * TODO: should directly control display style. https://gethired.atlassian.net/browse/VD-7884
+   *
+   * @param {HTMLElement} appendableElement - Appendable element controlled by ElementAppender
+   */
+  hideElementAppender(appendableElement) {
+    if (!appendableElement)
+      return;
+    if (appendableElement.classList.contains('date-picker-content-box')) {
+      appendableElement.style.display = 'none';
+    }
+    else {
+      appendableElement.classList.add('vega-force-hidden');
+    }
+  }
+  /**
+   * 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
+    if (!this.showConfig.isScreenPosition) {
+      this.initVisibleAppendElement();
+    }
+    this.showConfig.appendableElement.style.boxSizing = 'border-box';
+    this.positionCalculationController.setCalculationStrategy();
+  }
+  /**
+   * init visible append element.
+   */
+  initVisibleAppendElement() {
+    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';
+    }
+  }
+  /**
+   * 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(usePreviousPlacement) {
+    this.positionCalculationController.adjustPosition(usePreviousPlacement);
+  }
+  /**
+   * Sets the z-index of the appendable element to 11000.
+   *
+   * @returns {void}
+   */
+  setZIndex() {
+    InternalVegaZIndexManager.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$2([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "resizeObserverSlimmer", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "elementAppenderContainerController", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], ElementAppender.prototype, "positionCalculationController", 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;
+};
+var NestEANotifyType;
+(function (NestEANotifyType) {
+  NestEANotifyType["SHOW"] = "show";
+  NestEANotifyType["HIDE"] = "hide";
+})(NestEANotifyType || (NestEANotifyType = {}));
+/**
+ * Dynamically add parents and children of nest element appender while it show or hide.
+ */
+class ElementAppenderHierarchyTreeManager extends VegaSlimmer {
+  constructor(currentEA) {
+    super();
+    this.childrenEA = [];
+    this.currentEA = currentEA;
+  }
+  /**
+   * Listen current element appender did load.
+   */
+  componentDidLoad() {
+    this.register();
+  }
+  /**
+   * Listen current element appender show.
+   */
+  onShow() {
+    this.notify(NestEANotifyType.SHOW);
+  }
+  /**
+   * Listen current element appender hide.
+   */
+  onHide() {
+    this.notify(NestEANotifyType.HIDE);
+  }
+  /**
+   * Get current parent of element appender.
+   *
+   * @returns {Nullable<ElementAppenderSlimmer>} - parent.
+   */
+  getParent() {
+    return this.parentEA;
+  }
+  /**
+   * Get current children of element appender.
+   *
+   * @returns {ElementAppenderSlimmer[]} - children.
+   */
+  getChildren() {
+    return this.childrenEA;
+  }
+  /**
+   * While current element appender show or hide we should notify nest element appender to add or remove chain.
+   *
+   * @param {NestEANotifyType} type - Notify type.
+   */
+  notify(type) {
+    const parent = findParent(this.showConfig.target, '.vega-element-appender-appendable');
+    if (parent) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(parent, VegaInternalNestEAHierarchyTreeChange), {
+        type: type,
+        child: this.currentEA,
+        callback: 
+        /* eslint-disable jsdoc/require-jsdoc */
+        (parentEASlimmer) => {
+          this.parentEA = parentEASlimmer;
+        },
+      });
+    }
+  }
+  /**
+   * Add a change manager to observer the nest element appender show or hide.
+   */
+  register() {
+    if (this.showConfig) {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.showConfig.appendableElement, VegaInternalNestEAHierarchyTreeChange, (payload) => {
+        if (payload.type === NestEANotifyType.SHOW) {
+          this.childrenEA.push(payload.child);
+        }
+        else if (payload.type === NestEANotifyType.HIDE) {
+          this.childrenEA = this.childrenEA.filter((child) => child !== payload.child);
+        }
+        payload.callback(this.currentEA);
+      });
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], ElementAppenderHierarchyTreeManager.prototype, "showConfig", void 0);
+__decorate$1([
+  MapToComponentMethod('componentDidLoad')
+], ElementAppenderHierarchyTreeManager.prototype, "componentDidLoad", null);
+__decorate$1([
+  MapToComponentMethod('show')
+], ElementAppenderHierarchyTreeManager.prototype, "onShow", null);
+__decorate$1([
+  MapToComponentMethod('hide')
+], ElementAppenderHierarchyTreeManager.prototype, "onHide", null);
+
+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();
+    this.hierarchyTreeManager = new ElementAppenderHierarchyTreeManager(this);
+    /**
+     * 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);
+      // eslint-disable-next-line no-restricted-globals
+      document.addEventListener('scroll', this.globalScrollHandler, { capture: true });
+      this.listenShadowRootElementScrolling();
+    };
+    /* 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 or vega-dropdown-item, we should not hide dropdown */
+    this.targetFocusoutHandler = (e) => {
+      var _a;
+      if (!isParent(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 = () => {
+      var _a;
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.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 = () => {
+      var _a;
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.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];
+      const hasChildShowing = this.hierarchyTreeManager
+        .getChildren()
+        .some((child) => child.isShowing());
+      if (!hasChildShowing &&
+        this.shouldListenerWork('custom') &&
+        this.isShowing() &&
+        this.showConfig &&
+        !isParent(currentTarget, this.showConfig.appendableElement) &&
+        !isParent(currentTarget, this.showConfig.target) &&
+        (this.showConfig.isScreenPosition ||
+          findParent(currentTarget, 'vega-modal') === 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(() => {
+        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();
+    this.destroyElementAppender();
+  }
+  componentDidLoad() {
+    this.initElementAppender();
+  }
+  getElementAppender() {
+    return this.elementAppender;
+  }
+  show() {
+    this.elementAppender && this.elementAppender.show();
+    this[this.isDropdownShowName] = true;
+  }
+  hide() {
+    this.elementAppender && this.elementAppender.hide();
+    this[this.isDropdownShowName] = false;
+    this.hierarchyTreeManager.getChildren().map((child) => {
+      child.hide();
+    });
+  }
+  destroy() {
+    this.destroyElementAppender();
+    this[this.isDropdownShowName] = false;
+  }
+  updateShowConfigFactory(showConfigFactory) {
+    this.showConfigFactory = showConfigFactory;
+    this.initElementAppender();
+  }
+  destroyElementAppender() {
+    if (this.elementAppender) {
+      this.elementAppender.destroy();
+      this.elementAppender = null;
+    }
+  }
+  initElementAppender() {
+    this.setShowConfig();
+    this.setElementAppender();
+    this.registerElementAppenderListener();
+  }
+  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);
+    // eslint-disable-next-line no-restricted-globals
+    document.removeEventListener('scroll', this.globalScrollHandler);
+    this.removeShadowRootElementScrolling();
+  }
+  /**
+   * Sets up an observer to handle scroll events in a shadow root element.
+   */
+  listenShadowRootElementScrolling() {
+    this.shadowRootElementScrollingObserver = new Observer(this.canAcceptShadowRootScrollEvent.bind(this), this.globalScrollHandler.bind(this));
+    ChangeManager.register(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
+  }
+  /**
+   * Checks if the host element is a parent of the target element.
+   *
+   * @param {ShadowRootElementScrollingPayload} payload - payload.
+   * @returns {boolean} - Can accept.
+   */
+  canAcceptShadowRootScrollEvent(payload) {
+    return Boolean(this.showConfig && isParent(this.showConfig.target, payload.host));
+  }
+  /**
+   * Remove observer for scrolling in a shadow root element.
+   */
+  removeShadowRootElementScrolling() {
+    ChangeManager.unregister(SHADOW_ROOT_ELEMENT_SCROLLING, this.shadowRootElementScrollingObserver);
+  }
+}
+ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
+__decorate([
+  InjectVegaSlimmer()
+], ElementAppenderSlimmer.prototype, "hierarchyTreeManager", void 0);
+__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 };