@globalpayments/vega 2.36.0 → 2.37.0

package/dist/collection/components/vega-dropdown/slimmers/controllers/vega-dropdown-scrollable-controller.js

@@ -7,11 +7,30 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { extractNumberFromString } from '../../../../utils/ui';
 import { LogUtility } from '../../../../utils/log';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 /**
  * The `VegaDropdownScrollableController` class in TypeScript manages the behavior of a scrollable dropdown component,
  * adjusting list container height and scrolling to specific indexes based on render mode and selected source key.
  */
 export class VegaDropdownScrollableController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-dropdown-shadow-root-scroll-e2e}
+     */
+    /* istanbul ignore next */
+    /**
+     * Listen scrolling of dropdown content
+     */
+    this.onScroll = () => {
+      !this.renderModeController.isSourceRenderMode() &&
+        ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+          host: this.renderer.getDropdownContentBoxRef(),
+        });
+    };
+  }
   /**
    * The function `watchIsDropdownShow` adjusts the list container height and scrolls to a specific index
    * if the dropdown is shown in a certain render mode.

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-list-renderer.js

@@ -64,7 +64,7 @@ export class VegaDropdownListRenderer extends VegaSlimmer {
     return (h("ul", { role: "menu", "aria-label": "dropdown-ul", class: {
         [`vega-dropdown-item-display-${this.itemDisplayRule}`]: true,
         ['v-hidden']: this.isLoading,
-      }, ref: (ref) => (this.templateContainerRef = ref) },
+      }, ref: (ref) => (this.templateContainerRef = ref), onScroll: this.scrollableController.onScroll },
       h("slot", { name: "items" })));
   }
 }
@@ -98,6 +98,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "renderModeController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDropdownListRenderer.prototype, "scrollableController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDropdownListRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -100,7 +100,7 @@ export class VegaFieldLabel {
       "mutable": false,
       "complexType": {
         "original": "LabelSuffixButtonProps",
-        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
         "references": {
           "LabelSuffixButtonProps": {
             "location": "import",

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

@@ -301,6 +301,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex"
           }],
         "text": "Specifies how the box adjusts its size, growth, and alignment within a flex container."
       },
@@ -330,6 +333,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis"
           }],
         "text": "Specifies the box's base size, defining its initial\n   width or height in a flex container."
       },
@@ -359,6 +365,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow"
           }],
         "text": "Specifies how the box grows to fill available space in a flex container."
       },
@@ -388,6 +397,9 @@ export class VegaFlex {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.26.0"
+          }, {
+            "name": "nativeTypeRedirection",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink"
           }],
         "text": "Specifies how much the box shrinks to fit within a flex container."
       },

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

@@ -29,6 +29,7 @@ import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subj
 import { VegaInputCompactWidthController } from './slimmers/controllers/vega-input-compact-width-controller';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaInputStateController } from './slimmers/controllers/vega-input-state-controller';
+import { isArrayEqual } from '../../utils/array';
 /**
  * @vegaVersion 1.0.5
  */
@@ -334,7 +335,10 @@ export class VegaInput {
    * releated issue: https://gitlab.com/heartland1/vega/tiger/-/issues/646
    */
   /* istanbul ignore next */
-  watchMaskChange() {
+  watchMaskChange(newValue, oldValue) {
+    if (Array.isArray(newValue) && Array.isArray(oldValue) && isArrayEqual(newValue, oldValue, true)) {
+      return;
+    }
     this.maskConfigController.setupStringFormatter(this.inputRef);
   }
   /**
@@ -435,7 +439,7 @@ export class VegaInput {
       "mutable": false,
       "complexType": {
         "original": "LabelSuffixButtonProps",
-        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"click\" | \"hover\"; }",
+        "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
         "references": {
           "LabelSuffixButtonProps": {
             "location": "import",

package/dist/collection/components/vega-input-credit-card/test/share.js

@@ -9,7 +9,7 @@
  * the input field.
  */
 export const typeInputCreditCard = async (page, value) => {
-  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value);
+  await (await page.evaluateHandle(`document.querySelector('vega-input-credit-card').shadowRoot.querySelector('vega-input').shadowRoot.querySelector('input')`))['type'](value, { delay: 10 });
 };
 /**
  * The function `clickCreditCardInput` clicks on the credit card input field on a web page.

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -153,7 +153,7 @@ export class VegaInputSelect {
      */
     this.placeholder = 'Please select';
     /**
-     * Provides partial properties for the dropdown component used
+     * Provides partial properties for the `vega-dropdown` component used
      *    in the input select element.
      *
      * You can specify custom properties and their corresponding values as needed.
@@ -516,7 +516,7 @@ export class VegaInputSelect {
       "mutable": false,
       "complexType": {
         "original": "VegaDropdownPropsForSelect",
-        "resolved": "{ caseSensitive?: boolean; isScreenPosition?: boolean; matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; searchTriggerBy?: VegaDropdownSearchTriggerByType; searchable?: boolean; size?: ResponsiveType<SizeType>; useDefaultFilter?: boolean; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; matchContainerHeight?: boolean; searchable?: boolean; caseSensitive?: boolean; useDefaultFilter?: boolean; searchTriggerBy?: VegaDropdownSearchTriggerByType; isScreenPosition?: boolean; }",
         "references": {
           "VegaDropdownPropsForSelect": {
             "location": "import",
@@ -531,7 +531,7 @@ export class VegaInputSelect {
             "name": "vegaVersion",
             "text": "1.3.0"
           }],
-        "text": "Provides partial properties for the dropdown component used\n   in the input select element.\n\nYou can specify custom properties and their corresponding values as needed."
+        "text": "Provides partial properties for the `vega-dropdown` component used\n   in the input select element.\n\nYou can specify custom properties and their corresponding values as needed."
       },
       "defaultValue": "{}"
     },

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);