@globalpayments/vega 2.28.1 → 2.30.0

package/dist/collection/components/vega-sidenav/vega-sidenav.js

@@ -0,0 +1,422 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h, Component, Element, Event, Fragment, Host, Method, Prop, Watch, Listen, State, } from '@stencil/core';
+import { flattenChildren } from '../../utils/array';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { isObjectEmpty } from '../../utils/misc';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { VegaSidenavBackdropController } from './slimmers/controllers/vega-sidenav-backdrop-controller';
+import { VegaSidenavCollapseButtonRenderer } from './slimmers/renderers/vega-sidenav-collapse-button-renderer';
+import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
+import { VegaSidenavOpenStatusController } from './slimmers/controllers/vega-sidenav-open-status-controller';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+import { VegaStateUpdate } from '../../helpers/event-manager/event-id/vega-event-id';
+/**
+ * @deprecated This component will be removed soon, please consider using `vega-left-nav` component instead.
+ * @vegaVersion 1, v2.29.0
+ */
+export class VegaSidenav {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.openStateNotifySlimmer = createSubStateNotifySlimmer(VegaSidenav, 'openState', 'watchOpenState');
+    this.backdropController = new VegaSidenavBackdropController();
+    this.collapseButtonRenderer = new VegaSidenavCollapseButtonRenderer();
+    this.openStatusController = new VegaSidenavOpenStatusController();
+    this.stateUpdateEmitter = createEventEmitSlimmer(VegaSidenav, VegaStateUpdate);
+    this.openState = 'close';
+    /**
+     * Provides additional information or context in the form of
+     *    a footnote in the side nav footer.
+     *
+     * @vegaVersion 1, v2.29.0
+     */
+    this.footnote = '';
+    /**
+     * Specifies the configuration for the header of the side nav,
+     *    allowing customization of the logo and headline.
+     *
+     * @vegaVersion 1, v2.29.0
+     */
+    this.headerConfig = {};
+    /**
+     * Specifies the default open behavior for the side nav across
+     *    different screen sizes and disables collapse for
+     *    large screens.
+     *
+     * @vegaVersion 1, v2.29.0
+     */
+    this.openByDefault = 'close';
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+     */
+    /* istanbul ignore next */
+    this.attachMouseEventToContent = () => {
+      this.content.addEventListener('mouseenter', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverOpen');
+      });
+      this.content.addEventListener('mouseleave', (e) => {
+        e.stopPropagation();
+        this.openStatusController.setSideNavOpenStatus('hoverClose');
+      });
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-with-source-with-child}
+     * @see{module:vega-sidenav-e2e-with-source-without-child}
+     */
+    /* istanbul ignore next */
+    this.renderSideBarListBySource = () => {
+      var _a;
+      return (h(Fragment, null, (_a = this.source) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
+        if (item === null || item === void 0 ? void 0 : item.children) {
+          return (h("vega-sidenav-group", { key: index, icon: item.icon || 'globe', label: item.name }, item.children.map((child, childIndex) => (h("vega-sidenav-link", { key: `${index}_${childIndex}`, url: child.url, selected: child.selected }, child.name)))));
+        }
+        else {
+          return (h("vega-sidenav-link", { key: index, icon: item.icon || 'globe', url: item.url, selected: item.selected }, item.name));
+        }
+      })));
+    };
+  }
+  /**
+   * The method to used notify the sub state the parent state value changed
+   */
+  watchOpenState() {
+    methodPlaceholder();
+  }
+  /**
+   * clear inner content in `div.vega-nav-list` if previousSource is empty.
+   * to avoid untracked sidenav items (render by slot) keeping existed while source updated.
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   */
+  /* istanbul ignore next */
+  watchSourceChange(currentSource, previousSource) {
+    if (currentSource) {
+      this.validSource();
+    }
+    if (!(previousSource === null || previousSource === void 0 ? void 0 : previousSource.length)) {
+      this.host
+        .querySelectorAll('vega-sidenav-link, vega-sidenav-group')
+        .forEach((el) => el.remove());
+    }
+  }
+  watchOpenByDefaultChange() {
+    methodPlaceholder();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  componentWillLoad() {
+    this.source && this.validSource();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    this.attachMouseEventToContent();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  collapseSidenavByBackDropClick(e) {
+    const target = e.target;
+    if (target.classList.contains(VegaSidenavBackdropController.backdropClassName)) {
+      this.openStatusController.setSideNavOpenStatus('clickClose');
+    }
+  }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
+   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Invoke this method to toggle the side navigation menu.
+   *
+   * @vegaVersion 1, v2.29.0
+   */
+  async toggle() {
+    this.openStatusController.toggleSidenav();
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-desktop-not-show-backdrop}
+   * @see{module:vega-sidenav-mobile-show-backdrop}
+   */
+  render() {
+    return sanitizeVegaComponent(h(Host, null,
+      h("div", { class: "vega-sidebar", ref: (el) => this.openStatusController.setSidenavRef(el) },
+        h("div", { class: "vega-sidebar-content-container", ref: (el) => (this.content = el) },
+          h(Fragment, null,
+            !isObjectEmpty(this.headerConfig) && this.renderSideBarHeader(),
+            this.renderSideBarList(),
+            this.renderSideBarFooter())),
+        this.collapseButtonRenderer.render())), this.host);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-duplicated-selected}
+   * @see{module:vega-sidenav-e2e-with-source-without-child}
+   */
+  /* istanbul ignore next */
+  validSource() {
+    const selectedItems = flattenChildren(this.source).filter((item) => item.selected);
+    if (selectedItems.length > 1) {
+      throw new Error('There should be only one item selected at the same time.');
+    }
+  }
+  /**
+   * The current div uses a named slot and has a sibling above it, if you skip rendering this whole element by checking a variable,
+   * it will cause the slot's position to move into the sibling.
+   * For specific examples, see the documentation of stencil_slot_bug.md
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-with-source-with-child}
+   * @see{module:vega-sidenav-e2e-with-source-without-length}
+   */
+  /* istanbul ignore next */
+  renderSideBarList() {
+    var _a;
+    return (h(Fragment, null,
+      isObjectEmpty(this.headerConfig) ? h("div", { class: "header-placeholder" }) : null,
+      h("slot", { name: "before-list-slot" }),
+      h("div", { class: "vega-nav-list" }, ((_a = this.source) === null || _a === void 0 ? void 0 : _a.length) ? this.renderSideBarListBySource() : h("slot", null))));
+  }
+  renderSideBarHeader() {
+    const { collapseLogo, expandLogo, headline } = this.headerConfig;
+    return (h("div", { class: "vega-sidebar-header" },
+      h("div", { class: "vega-sidebar-header-collapse-container" }, collapseLogo && h("img", { src: collapseLogo, alt: 'collapse logo' })),
+      h("div", { class: "vega-sidebar-header-expand-container" },
+        expandLogo && h("img", { src: expandLogo, alt: 'expand logo' }),
+        headline && h("div", { class: "vega-sidebar-headline" }, headline))));
+  }
+  renderSideBarFooter() {
+    return (this.footnote && (h("div", { class: "vega-nav-footer" },
+      h("div", { class: "vega-nav-footnote" }, this.footnote))));
+  }
+  static get is() { return "vega-sidenav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-sidenav.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-sidenav.css"]
+  }; }
+  static get properties() { return {
+    "source": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SidebarTopLevelItem[]",
+        "resolved": "SidebarTopLevelItem[]",
+        "references": {
+          "SidebarTopLevelItem": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "Defines the data that is used to generate the items\n   in the side nav list."
+      }
+    },
+    "footnote": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "Provides additional information or context in the form of\n   a footnote in the side nav footer."
+      },
+      "attribute": "footnote",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "headerConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SidebarHeaderConfig",
+        "resolved": "{ headline?: string; expandLogo?: string; collapseLogo?: string; }",
+        "references": {
+          "SidebarHeaderConfig": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "Specifies the configuration for the header of the side nav,\n   allowing customization of the logo and headline."
+      },
+      "defaultValue": "{}"
+    },
+    "openByDefault": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<OpenByDefaultType>",
+        "resolved": "\"close\" | \"disableCollapse\" | \"open\" | { S?: OpenByDefaultType; M?: OpenByDefaultType; L?: OpenByDefaultType; XL?: OpenByDefaultType; default?: OpenByDefaultType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "OpenByDefaultType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "Specifies the default open behavior for the side nav across\n   different screen sizes and disables collapse for\n   large screens."
+      },
+      "attribute": "open-by-default",
+      "reflect": false,
+      "defaultValue": "'close'"
+    }
+  }; }
+  static get states() { return {
+    "openState": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaStateUpdate",
+      "name": "vegaStateUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "stateUpdate",
+      "name": "stateUpdate",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }],
+        "text": "An event emitter notifying the completion of a navigation menu state change (open or close)."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "toggle": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to toggle the side navigation menu.",
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "1, v2.29.0"
+          }]
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "openState",
+      "methodName": "watchOpenState"
+    }, {
+      "propName": "source",
+      "methodName": "watchSourceChange"
+    }, {
+      "propName": "openByDefault",
+      "methodName": "watchOpenByDefaultChange"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "collapseSidenavByBackDropClick",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSidenav.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStateNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "backdropController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "collapseButtonRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "openStatusController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSidenav.prototype, "stateUpdateEmitter", void 0);

package/dist/collection/constants/ui.js

@@ -51,6 +51,7 @@ export const VegaNativeEventName = [
   'dropdownClick',
   'create',
   'search',
+  'searchTrigger',
   'hide',
   'show',
   'popoverShow',

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaLabelButtonClick, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
@@ -18,7 +18,14 @@ const entries = [
   ['vega-date-picker', [VegaChange]],
   [
     'vega-dropdown',
-    [VegaDropdownShow, VegaDropdownHide, VegaDropdownClick, VegaCreate, VegaDropdownSearch],
+    [
+      VegaDropdownShow,
+      VegaDropdownHide,
+      VegaDropdownClick,
+      VegaCreate,
+      VegaDropdownSearch,
+      VegaSearchTrigger,
+    ],
   ],
   ['vega-dropdown-item', [VegaClick]],
   ['vega-field-label', [VegaClick, VegaLabelButtonClick]],
@@ -27,9 +34,10 @@ const entries = [
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
   ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
+  ['vega-input-numeric', [VegaChange]],
   ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
-  ['vega-input-select', [VegaChange, VegaSearch]],
+  ['vega-input-select', [VegaChange, VegaSearch, VegaSearchTrigger]],
   ['vega-item-toggle', [VegaToggleStatus]],
   ['vega-modal', [VegaOpen, VegaClose]],
   ['vega-left-nav', [VegaStateUpdate]],
@@ -46,6 +54,8 @@ const entries = [
   ['vega-selection-chip-group', [VegaChange]],
   ['vega-selection-tile', [VegaChange]],
   ['vega-selection-tile-group', [VegaChange]],
+  ['vega-sidenav', [VegaStateUpdate]],
+  ['vega-sidenav-link', [VegaClick]],
   ['vega-signature-capture', [VegaChange]],
   ['vega-stepper', [VegaChange]],
   ['vega-tab-group', [VegaClick]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -71,6 +71,7 @@ export const VegaPageSizeChange = new VegaEventID('vegaPageSizeChange', 'pageSiz
 export const VegaDropdownClick = new VegaEventID('vegaDropdownClick', 'dropdownClick');
 export const VegaCreate = new VegaEventID('vegaCreate', 'create');
 export const VegaSearch = new VegaEventID('vegaSearch', 'search');
+export const VegaSearchTrigger = new VegaEventID('vegaSearchTrigger', 'searchTrigger');
 export const VegaHide = new VegaEventID('vegaHide', 'hide');
 export const VegaShow = new VegaEventID('vegaShow', 'show');
 export const VegaPopoverShow = new VegaEventID('vegaPopoverShow', 'popoverShow');

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -31,3 +31,4 @@ export const VegaInternalTableRowSelectAll = new VegaInternalEventID('tableRowSe
 export const VegaInternalTableRowExpand = new VegaInternalEventID('tableRowExpand');
 export const VegaDropdownRenderItemInternalOverridden = new VegaInternalEventID('dropdownRenderItemInternalOverridden');
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
+export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');

package/dist/collection/helpers/event-manager/test/vega-event-manager.test.js

@@ -1,5 +1,5 @@
 import { VegaEventManager } from '../../public-api';
-import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaSearchTrigger, } from '../event-id/vega-event-id';
 import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
 import { sleep } from '../../../utils/test-utils';
 describe('VegaEventManager', () => {
@@ -30,6 +30,7 @@ describe('VegaEventManager', () => {
       VegaDropdownClick,
       VegaCreate,
       VegaDropdownSearch,
+      VegaSearchTrigger,
     ]);
   });
   it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call setSemantics', async () => {

package/dist/collection/helpers/feature-control/feature-flags-map.js

@@ -180,5 +180,10 @@ const FeatureFlagsMap = {
     createdTimestamp: 1730361348399,
     createdAtVersion: '2.26.0',
   },
+  'VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN': {
+    description: `Feature flag that enable use screen to calculation position.`,
+    createdTimestamp: 1733293586535,
+    createdAtVersion: '2.29.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/slimmers/element-appender-container/body-positioned-wrapper/body-positioned-wrapper.abstract.js

@@ -0,0 +1,13 @@
+/**
+ * Body positioned wrapper.
+ */
+export class BodyPositionedWrapper {
+  /**
+   * Valid is a body position used wrapper.
+   *
+   * @returns {boolean} can retrieve or not.
+   */
+  canRetrieve() {
+    return !this.showConfig.isScreenPosition;
+  }
+}

package/dist/collection/helpers/slimmers/element-appender-container/{position-relative-to-wrapper.js → body-positioned-wrapper/position-relative-to-wrapper.js}

@@ -4,33 +4,35 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { BodyPositionedWrapper } from './body-positioned-wrapper.abstract';
 import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
 /**
  * This class is is used to retrieve an HTML element based on a specified selector.
  *
  * @property {HTMLElement} showConfig the show config
  */
-export 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;
-    };
+export class PositionRelativeToWrapper extends BodyPositionedWrapper {
+  /**
+   * The canRetrieve function just determines whether the showConfig contains the positionRelativeTo object.
+   *
+   * @returns {boolean} the boolean type.
+   */
+  canRetrieve() {
+    return (super.canRetrieve() &&
+      !!this.showConfig.positionRelativeTo &&
+      !!document.querySelector(this.showConfig.positionRelativeTo));
+  }
+  /**
+   * The retrieve function query the element of positionRelativeTo in showConfig.
+   *
+   * @returns {HTMLElement} the element.
+   */
+  retrieve() {
+    const container = document.querySelector(this.showConfig.positionRelativeTo);
+    if (this.showConfig.appendableElement.parentElement !== container) {
+      container.append(this.showConfig.appendableElement);
+    }
+    return container;
   }
 }
 __decorate([

package/dist/collection/helpers/slimmers/element-appender-container/{vega-modal-wrapper.js → body-positioned-wrapper/vega-modal-wrapper.js}

@@ -4,27 +4,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { findParent } from '../../../utils/ui';
+import { findParent } from '../../../../utils/ui';
+import { BodyPositionedWrapper } from './body-positioned-wrapper.abstract';
 import { MapToComponentField as MapToSlimmerField } from 'vega-slimmer/core';
 /**
  * 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
  */
-export 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();
+export 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.