@globalpayments/vega 2.36.0 → 2.37.1

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-backdrop-controller.js

@@ -0,0 +1,64 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Modal backdrop controller
+ */
+export class VegaModalBackdropController extends VegaSlimmer {
+  /**
+   * Get the backdropRef element or null.
+   *
+   * @returns {HTMLElement | null} - The backdropRef.
+   */
+  getBackdropRef() {
+    return this.backdropRef;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-backdrop-color-default-e2e}
+   * @see{module:vega-modal-backdrop-color-semi-e2e}
+   * @see{module:vega-modal-backdrop-color-none-e2e}
+   * @see{module:vega-modal-default-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set backdrop of modal.
+   */
+  setBackdrop() {
+    if (this.backdrop === 'none')
+      return;
+    let backdrop = document.querySelector('vega-backdrop.modal-backdrop');
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add('modal-backdrop');
+      backdrop.color = VegaModalBackdropController.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
+      document.querySelector('body').append(backdrop);
+    }
+    this.backdropRef = backdrop;
+  }
+  /**
+   * Removes the backdrop element if it exists.
+   */
+  removeBackdrop() {
+    this.backdropRef && this.backdropRef.remove();
+  }
+}
+VegaModalBackdropController.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdrop", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalBackdropController.prototype, "backdropColor", void 0);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-layout-controller.js

@@ -0,0 +1,136 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { DefaultModalSize } from '../../../../constants/ui';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+/**
+ * Modal layout controller
+ */
+export class VegaModalLayoutController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: 
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => {
+        this.setModalWidth('update');
+        this.setContentMaxHeight();
+      },
+      isDeferred: true,
+    });
+    this.isModalWidthSet = false;
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  componentDidLoad() {
+    this.setContentMaxHeight();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-resize-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Listen watch size method to be called
+   */
+  watchSize() {
+    this.setModalWidth('update');
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-default-e2e}
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   * @see{module:vega-modal-resize-e2e}
+   * While call toggle method for modal show or hide, it will call this method.
+   * but we should really update the modal width while first initialize modal, window resize and size changed.
+   * So to avoid repeated calls by toggle, we add a flag as parameter,
+   */
+  /* istanbul ignore next */
+  /**
+   * Set width of modal.
+   *
+   * @param {'initialize' | 'update'} flag - Is trigger by
+   */
+  setModalWidth(flag = 'initialize') {
+    if (this.isModalWidthSet && flag === 'initialize')
+      return;
+    const size = this.getModalSize();
+    const dialog = this.host.shadowRoot.querySelector('.modal-dialog');
+    typeof size === 'number'
+      ? (dialog.style['width'] = `${size}px`)
+      : (dialog.style['width'] = `${size}`);
+    this.isModalWidthSet = true;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-max-height-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set max height of modal content.
+   */
+  setContentMaxHeight() {
+    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
+    if (maxHeight) {
+      this.renderer.getModalContentRef().style.maxHeight = `${maxHeight}px`;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-default-e2e}
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   * @see{module:vega-modal-resize-e2e}
+   * @see{module:vega-modal-default-width-S-320-e2e}
+   * @see{module:vega-modal-default-width-S-600-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Get size of modal.
+   *
+   * @returns {number | string} - Modal size.
+   */
+  getModalSize() {
+    const size = ResponsiveFormatFacade.format(this.size, 'size');
+    if (size) {
+      return size;
+    }
+    else {
+      return DefaultModalSize[getCurrentBreakpoint()];
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "contentMaxHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "size", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalLayoutController.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModalLayoutController.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalLayoutController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchSize')
+], VegaModalLayoutController.prototype, "watchSize", null);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-mobile-controller.js

@@ -0,0 +1,60 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { getDeviceType } from '../../../../utils/ui';
+import { DeviceType } from '../../../../types/ui.type';
+/**
+ * Modal mobile controller
+ */
+export class VegaModalMobileController extends VegaSlimmer {
+  /* istanbul ignore next */
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  componentDidLoad() {
+    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
+      this.disableBackdropTouchMove();
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * There are two situations in modal scrolling:
+   * 1. Scrolls the non-modal content part in vega-modal (e.g. backdrop, modal dialog).
+   * 2. Scrolls the modal content (if scrollable) in vega-modal.
+   * On the mobile side, we need to prevent scrolling in the area outside the modal content.
+   *
+   * TODO: If the modal content is too long, a scroll bar will appear and the body cannot be scrolled,
+   * but on the IOS side, the body content of the scrolling modal will occasionally appear scrolling.
+   * This problem is reproduced on the following websites, and there is no solution yet.
+   * https://v5.bootcss.com/docs/components/modal/
+   * https://mui.com/material-ui/react-dialog/
+   */
+  disableBackdropTouchMove() {
+    this.host.addEventListener('touchstart', (e) => {
+      this.touchStartY = e.targetTouches[0].pageY;
+    }, { capture: true });
+    this.host.addEventListener('touchmove', (e) => {
+      const isScrolledTop = this.host.scrollTop <= 0;
+      const isScrolledBottom = this.host.scrollHeight - this.host.scrollTop <= this.host.clientHeight;
+      const isToBottomMove = this.touchStartY < e.targetTouches[0].pageY;
+      const isToTopMove = this.touchStartY > e.targetTouches[0].pageY;
+      if (e.target === this.host &&
+        ((isScrolledTop && isToBottomMove) || (isScrolledBottom && isToTopMove))) {
+        e.preventDefault();
+      }
+    }, { capture: true });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalMobileController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalMobileController.prototype, "backdrop", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalMobileController.prototype, "componentDidLoad", null);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-open-state-controller.js

@@ -0,0 +1,190 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { findParent } from '../../../../utils/ui';
+/**
+ * Modal open state controller
+ */
+export class VegaModalOpenStateController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-toggle-interactive-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * Listen modal close event and close modal.
+     *
+     * @param {MouseEvent} e - Close modal event.
+     */
+    this.onModalClose = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.handleClose || this.handleClose()) {
+        this.open = false;
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    if (this.open) {
+      this.toggle();
+    }
+  }
+  /**
+   * Toggle modal while open property changed.
+   */
+  watchOpen() {
+    this.toggle();
+  }
+  /**
+   * Listen the target element clicked has a `data-target='modal'` attribute and open the modal if it does.
+   *
+   * @param {MouseEvent} e - Open modal event.
+   */
+  listenDataTarget(e) {
+    /*
+     * vega-backdrop cannot be clicked and is completely covered by vega-modal. Click events cannot be added to the backdrop.
+     */
+    const target = e.composedPath()[0];
+    if (target.tagName === 'VEGA-MODAL' && this.backdrop === 'default' && target === this.host) {
+      this.open = false;
+    }
+    if (this.host.id &&
+      (target.getAttribute('data-target') === this.host.id ||
+        findParent(target, `[data-target=${this.host.id}]`))) {
+      e.preventDefault();
+      this.open = true;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Listen the target element clicked has a `data-dismiss='modal'` attribute and closes the modal if it does.
+   *
+   * @param {MouseEvent} e - Close modal event.
+   */
+  listenDataDismiss(e) {
+    const target = e.target.closest(`[data-dismiss='modal']`);
+    if (target) {
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Manages the visibility and behavior of a modal by updating various properties
+   * and emitting an event.
+   */
+  toggle() {
+    this.open ? this.openedModalStackController.push() : this.openedModalStackController.remove();
+    this.updateDocumentRootOverflow();
+    this.backdropController.setBackdrop();
+    this.zIndexController.setModalZIndex();
+    this.removeBackdropWhileNoModalShow();
+    this.layoutController.setModalWidth();
+    this.emitEvent();
+    this.setModalVisibility();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggles the display property of a modal element between 'flex' and
+   * 'none' based on the value of the `open` property.
+   */
+  setModalVisibility() {
+    this.host.style['display'] = this.open ? 'flex' : 'none';
+  }
+  /**
+   * Emits either an open or close event based on the value of the `open` property.
+   */
+  emitEvent() {
+    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
+  }
+  /**
+   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
+   */
+  updateDocumentRootOverflow() {
+    if (this.backdrop === 'none')
+      return;
+    const openedModalStackLength = this.openedModalStackController.length();
+    if (this.open && openedModalStackLength === 1) {
+      document.body.classList.add('disable-scroll-in-desktop');
+    }
+    else if (!this.open && openedModalStackLength === 0) {
+      document.body.classList.remove('disable-scroll-in-desktop');
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-disconnected-callback-e2e }
+   */
+  /* istanbul ignore next */
+  /**
+   * Removes the backdrop element if no modals are currently visible.
+   */
+  removeBackdropWhileNoModalShow() {
+    if (!this.open && this.openedModalStackController.length() === 0) {
+      this.backdropController.removeBackdrop();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaModalOpenStateController.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "backdrop", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "handleClose", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "closeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "openEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "layoutController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "backdropController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "openedModalStackController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalOpenStateController.prototype, "zIndexController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalOpenStateController.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('watchOpen')
+], VegaModalOpenStateController.prototype, "watchOpen", null);
+__decorate([
+  MapToComponentMethod('listenDataTarget')
+], VegaModalOpenStateController.prototype, "listenDataTarget", null);
+__decorate([
+  MapToComponentMethod('listenDataDismiss')
+], VegaModalOpenStateController.prototype, "listenDataDismiss", null);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-opened-modal-stack-controller.js

@@ -0,0 +1,51 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Opened modal stack controller
+ */
+export class VegaModalOpenedModalStackController extends VegaSlimmer {
+  /**
+   * Adds the current host element to an array in a modal toggle controller.
+   */
+  push() {
+    VegaModalOpenedModalStackController.openedModalStack.push(this.host);
+  }
+  /**
+   * Removes the current modal from the opened modal stack.
+   */
+  remove() {
+    VegaModalOpenedModalStackController.openedModalStack =
+      VegaModalOpenedModalStackController.openedModalStack.filter((modal) => modal !== this.host);
+  }
+  //TODO: Record the nest modal by an array.
+  /**
+   * Get visible modal length.
+   *
+   * @returns {number} - Visible modal length.
+   */
+  length() {
+    return VegaModalOpenedModalStackController.openedModalStack.length;
+  }
+  /**
+   * Returns the previous HTMLVegaModalElement from the openedModalStack if it exists.
+   *
+   * @returns {Nullable<HTMLElement>} - The previous HTMLVegaModalElement.
+   */
+  peek() {
+    const length = this.length();
+    if (length > 0) {
+      return VegaModalOpenedModalStackController.openedModalStack[length - 1];
+    }
+    /* istanbul ignore next */
+    return null;
+  }
+}
+VegaModalOpenedModalStackController.openedModalStack = [];
+__decorate([
+  MapToComponentField()
+], VegaModalOpenedModalStackController.prototype, "host", void 0);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-scroll-controller.js

@@ -0,0 +1,76 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+/**
+ * Modal scroll controller
+ */
+export class VegaModalScrollController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   */
+  componentDidLoad() {
+    if (this.isContentScrollable()) {
+      this.listenContentScroll();
+    }
+  }
+  /**
+   * Is modal content scrollable.
+   *
+   * @returns {boolean} - Is scrollable.
+   */
+  isContentScrollable() {
+    return Boolean(this.contentMaxHeight);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-scroll-to-bottom}
+   */
+  /* istanbul ignore next */
+  /**
+   * Listen content scroll
+   */
+  listenContentScroll() {
+    const modalContent = this.renderer.getModalContentRef();
+    const modalFooter = this.renderer.getModalFooterRef();
+    modalContent.addEventListener('scroll', () => {
+      if (modalContent.scrollHeight - modalContent.scrollTop <= modalContent.clientHeight) {
+        modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      else {
+        modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      this.notifyContentScrolling();
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-shadow-root-scrolling-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * Notifies the `ChangeManager` about scrolling in a specific element within a shadow root.
+   */
+  notifyContentScrolling() {
+    ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+      host: this.host,
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "contentMaxHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalScrollController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaModalScrollController.prototype, "componentDidLoad", null);

package/dist/collection/components/vega-modal/slimmers/controllers/vega-modal-z-index-controller.js

@@ -0,0 +1,43 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import InternalVegaZIndexManager from '../../../../helpers/zindex/internal-vega-z-index-manager';
+/**
+ * Modal z-index controller
+ */
+export class VegaModalZIndexController extends VegaSlimmer {
+  /**
+   * Manages the z-index of modal elements based on their visibility status.
+   */
+  setModalZIndex() {
+    const backdropRef = this.backdropController.getBackdropRef();
+    if (this.open) {
+      InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
+      InternalVegaZIndexManager.setZIndex(this.host, 'base');
+    }
+    else {
+      InternalVegaZIndexManager.removeZIndex(backdropRef, 'base');
+      InternalVegaZIndexManager.removeZIndex(this.host, 'base');
+      if (this.openedModalStackController.length() > 0) {
+        InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
+        InternalVegaZIndexManager.setZIndex(this.openedModalStackController.peek(), 'base');
+      }
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "backdropController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "openedModalStackController", void 0);