@globalpayments/vega 2.66.0 → 2.68.0

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

@@ -26,6 +26,8 @@ export class VegaFieldLabel {
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.suffixElementRenderer = new VegaFieldLabelSuffixElementRenderer();
     /**
+     * @deprecated Please use `suffixButtonConfig` instead
+     *
      * Specifies the properties for the suffix button associated with the input.
      *
      * It provides essential information and functionality related to
@@ -34,6 +36,15 @@ export class VegaFieldLabel {
      * @vegaVersion 2.25.0
      */
     this.suffixButtonProps = null;
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality related to
+     *    the suffix button's role and behavior.
+     *
+     * @vegaVersion 2.68.0
+     */
+    this.suffixButtonConfig = null;
     /**
      * Specifies the label or title for the field.
      *
@@ -112,9 +123,40 @@ export class VegaFieldLabel {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "deprecated",
+            "text": "Please use `suffixButtonConfig` instead\n\nSpecifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality related to\nthe suffix button's role and behavior."
+          }, {
             "name": "vegaVersion",
             "text": "2.25.0"
           }],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "suffixButtonConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Nullable<LabelSuffixButtonConfig>",
+        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "references": {
+          "Nullable": {
+            "location": "import",
+            "path": "../../types/general"
+          },
+          "LabelSuffixButtonConfig": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
         "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality related to\n   the suffix button's role and behavior."
       },
       "defaultValue": "null"

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

@@ -102,6 +102,8 @@ export class VegaInput {
      */
     this.label = '';
     /**
+     * @deprecated Please use `LabelSuffixButtonConfig` instead
+     *
      * Specifies the properties for the suffix button associated with the input.
      *
      * It provides essential information and functionality
@@ -110,6 +112,15 @@ export class VegaInput {
      * @vegaVersion 2.25.0
      */
     this.labelSuffixButtonProps = null;
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @vegaVersion 2.68.0
+     */
+    this.labelSuffixButtonConfig = null;
     /**
      * Represents a pre-set or default value for the input field.
      *
@@ -415,7 +426,7 @@ export class VegaInput {
       this.renderHintDom()));
   }
   renderLabelDom() {
-    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, ref: (node) => {
+    return (h("vega-field-label", { onClick: this.focusInput, "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
       } }));
   }
@@ -475,9 +486,13 @@ export class VegaInput {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "LabelSuffixButtonProps",
+        "original": "Nullable<LabelSuffixButtonProps>",
         "resolved": "{ icon: string; tooltipText?: string; trigger?: \"hover\" | \"click\"; }",
         "references": {
+          "Nullable": {
+            "location": "import",
+            "path": "../../types/general"
+          },
           "LabelSuffixButtonProps": {
             "location": "import",
             "path": "../vega-field-label/types"
@@ -488,9 +503,40 @@ export class VegaInput {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "deprecated",
+            "text": "Please use `LabelSuffixButtonConfig` instead\n\nSpecifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\nrelated to the suffix button's role and behavior."
+          }, {
             "name": "vegaVersion",
             "text": "2.25.0"
           }],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "labelSuffixButtonConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Nullable<LabelSuffixButtonConfig>",
+        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "references": {
+          "Nullable": {
+            "location": "import",
+            "path": "../../types/general"
+          },
+          "LabelSuffixButtonConfig": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
         "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
       },
       "defaultValue": "null"

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-renderer.js

@@ -8,21 +8,21 @@ import { Host, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { arrayToClassString } from '../../../../utils/ui';
 import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaLabelButtonClick } from '../../../../helpers/event-manager/event-id/vega-event-id';
 /** The `VegaInputSelectRenderer` class is a TypeScript React component that renders a select input field with various properties and methods. */
 export class VegaInputSelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.renderLabel = () => {
-      return (this.label && (h("div", { class: "vega-input-select-label" },
-        h("span", null, this.label),
-        this.required && h("span", { class: "vega-input-select-required" }, "*"))));
-    };
     this.renderErrorMessage = () => {
       return h("div", { class: "vega-input-select-error-message" });
     };
     this.renderHelpMessage = () => {
       return h("div", { class: "vega-input-select-hint" }, this.hint);
     };
+    this.handleLabelButtonClick = () => {
+      this.labelButtonClickEventEmitter.emit();
+    };
   }
   render() {
     return (h(Host, { class: arrayToClassString([
@@ -34,6 +34,11 @@ export class VegaInputSelectRenderer extends VegaSlimmer {
       this.renderErrorMessage(),
       this.hint && this.renderHelpMessage()));
   }
+  renderLabel() {
+    return (this.label && (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
+      } })));
+  }
 }
 __decorate([
   MapToComponentField()
@@ -50,6 +55,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectRenderer.prototype, "labelSuffixButtonConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectRenderer.prototype, "labelButtonClickEventEmitter", void 0);
 __decorate([
   MapToComponentField({ componentFieldName: 'vegaInputSelectDropdownRenderer' })
 ], VegaInputSelectRenderer.prototype, "dropdownRenderer", void 0);

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

@@ -25,46 +25,8 @@
   padding-bottom: 8px;
 }
 
-:host .vega-input-select-label {
-  font-family: "Inter", sans-serif;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 22px;
-  letter-spacing: 0px;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  padding-bottom: 8px;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-input-select-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-input-select-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-input-select-label {
-    font-family: "Inter", sans-serif;
-    font-size: 16px;
-    font-weight: 500;
-    line-height: 22px;
-    letter-spacing: 0px;
-  }
-}
-
-:host .vega-input-select-label .vega-input-select-required {
-  color: rgba(var(--v-text-error, 189, 41, 71, 1));
-  margin-left: 4px;
+vega-field-label {
+  margin-bottom: 8px;
 }
 
 :host .vega-input-select-container {
@@ -98,10 +60,6 @@
   border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
-:host(.vega-input-select-disabled) .vega-input-select-label {
-  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
-}
-
 :host(.vega-input-select-disabled) vega-dropdown {
   pointer-events: none;
 }

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

@@ -16,7 +16,7 @@ import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaHide, VegaSearch, VegaSearchTrigger, VegaShow, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaHide, VegaLabelButtonClick, VegaSearch, VegaSearchTrigger, VegaShow, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaInputSelectLazyLoadController } from './slimmers/controllers/vega-input-select-lazy-load-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -59,6 +59,7 @@ export class VegaInputSelect {
     this.searchTriggerEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaSearchTrigger);
     this.showEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaShow);
     this.hideEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaHide);
+    this.labelButtonClickEventEmitter = createEventEmitSlimmer(VegaInputSelect, VegaLabelButtonClick);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaSearch, VegaSearchTrigger, VegaShow, VegaHide], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputSelectRuntimeMetricsPayloadDefinition);
     this.isDropdownShow = false;
@@ -73,6 +74,15 @@ export class VegaInputSelect {
      * @vegaVersion 1.3.0
      */
     this.label = '';
+    /**
+     * Specifies the properties for the suffix button associated with the input.
+     *
+     * It provides essential information and functionality
+     *  related to the suffix button's role and behavior.
+     *
+     * @vegaVersion 2.68.0
+     */
+    this.labelSuffixButtonConfig = null;
     /**
      * Determines whether the input select field is required.
      *
@@ -240,6 +250,34 @@ export class VegaInputSelect {
       "reflect": false,
       "defaultValue": "''"
     },
+    "labelSuffixButtonConfig": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Nullable<LabelSuffixButtonConfig>",
+        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "references": {
+          "Nullable": {
+            "location": "import",
+            "path": "../../types/general"
+          },
+          "LabelSuffixButtonConfig": {
+            "location": "import",
+            "path": "../vega-field-label/types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
+        "text": "Specifies the properties for the suffix button associated with the input.\n\nIt provides essential information and functionality\n related to the suffix button's role and behavior."
+      },
+      "defaultValue": "null"
+    },
     "required": {
       "type": "boolean",
       "mutable": false,
@@ -777,6 +815,45 @@ export class VegaInputSelect {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaLabelButtonClick",
+      "name": "vegaLabelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "labelButtonClick",
+      "name": "labelButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.68.0"
+          }],
+        "text": "An event emitter notifying that the suffix button associated with the field label has been clicked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "doClose": {
@@ -911,6 +988,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "hideEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "labelButtonClickEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "eventPrevent", void 0);

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { findParent } from '../../../../utils/ui';
+import { VegaModalOpenState } from '../models/vega-modal-open-state';
 /**
  * Modal open state controller
  */
@@ -26,23 +27,35 @@ export class VegaModalOpenStateController extends VegaSlimmer {
       e.preventDefault();
       e.stopPropagation();
       if (!this.handleClose || this.handleClose()) {
-        this.open = false;
+        this.close('close-button');
       }
     };
   }
+  /**
+   * Component lifecycle - [disconnectedCallback]
+   */
+  disconnectedCallback() {
+    this.close('remove-node');
+  }
   /**
    * Component lifecycle - [componentDidLoad]
    */
   componentDidLoad() {
-    if (this.open) {
+    if (this.openState.isOpen) {
       this.toggle();
     }
   }
   /**
-   * Toggle modal while open property changed.
+   * Toggle modal while openState changed.
+   *
+   * @param {VegaModalOpenState} newState Specifies the new openState.
+   * @param {VegaModalOpenState} oldState Specifies the old openState.
    */
-  watchOpen() {
-    this.toggle();
+  watchOpenState(newState, oldState) {
+    if (newState.isOpen !== oldState.isOpen) {
+      this.toggle();
+      this.open = newState.isOpen;
+    }
   }
   /**
    * Listen the target element clicked has a `data-target='modal'` attribute and open the modal if it does.
@@ -61,14 +74,19 @@ export class VegaModalOpenStateController extends VegaSlimmer {
        * @see module:vega-modal-backdrop-mousedown-mouseup-e2e
        */
       /* istanbul ignore next */
-      this.open = this.backdropMouseDownOnHost && this.backdropMouseUpOnHost ? false : true;
+      if (this.backdropMouseDownOnHost && this.backdropMouseUpOnHost) {
+        this.close('backdrop');
+      }
+      else {
+        this.changeOpenState(true, 'backdrop');
+      }
       this.resetBackdropClickFlags();
     }
     if (this.host.id &&
       (target.getAttribute('data-target') === this.host.id ||
         findParent(target, `[data-target=${this.host.id}]`))) {
       e.preventDefault();
-      this.open = true;
+      this.changeOpenState(true, 'data-target');
     }
   }
   /*
@@ -85,7 +103,7 @@ export class VegaModalOpenStateController extends VegaSlimmer {
     const target = e.target.closest(`[data-dismiss='modal']`);
     if (target) {
       e.preventDefault();
-      this.open = false;
+      this.close('data-dismiss');
     }
   }
   /*
@@ -114,6 +132,50 @@ export class VegaModalOpenStateController extends VegaSlimmer {
   listenMouseUp(e) {
     this.backdropMouseUpOnHost = this.isBackdropClickTargeted(e);
   }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /**
+   * Handles the public modal API (`show` / `hide`).
+   *
+   * @param {'show' | 'hide'} option - Determines which state change to perform.
+   */
+  modal(option) {
+    switch (option) {
+      case 'show':
+        this.changeOpenState(true, 'method');
+        break;
+      default:
+        this.close('method');
+        break;
+    }
+  }
+  /**
+   * Close the modal via the provided trigger and emit the pending detail.
+   *
+   * @param {VegaModalOpenStateChangeTrigger} trigger - Indicates what initiated the close.
+   */
+  close(trigger) {
+    if (!this.openState.isOpen) {
+      return;
+    }
+    const event = this.closeEventEmitter.emit({ trigger });
+    if (!(event && event.defaultPrevented)) {
+      this.changeOpenState(false, trigger);
+    }
+  }
+  /**
+   * Updates the internal open state snapshot so watchers can react to the new value.
+   *
+   * @param {boolean} isOpen - Desired open flag for the modal.
+   * @param {VegaModalOpenStateChangeTrigger} triggerBy - Source that initiated the change.
+   */
+  changeOpenState(isOpen, triggerBy) {
+    if (this.openState.isOpen === isOpen) {
+      return;
+    }
+    this.openState = new VegaModalOpenState(isOpen, triggerBy);
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-modal-toggle-interactive-e2e}
@@ -124,7 +186,9 @@ export class VegaModalOpenStateController extends VegaSlimmer {
    * and emitting an event.
    */
   toggle() {
-    this.open ? this.openedModalStackController.push() : this.openedModalStackController.remove();
+    this.openState.isOpen
+      ? this.openedModalStackController.push()
+      : this.openedModalStackController.remove();
     this.updateDocumentRootOverflow();
     this.backdropController.setBackdrop();
     this.zIndexController.setModalZIndex();
@@ -143,13 +207,19 @@ export class VegaModalOpenStateController extends VegaSlimmer {
    * 'none' based on the value of the `open` property.
    */
   setModalVisibility() {
-    this.host.style['display'] = this.open ? 'flex' : 'none';
+    this.host.style['display'] = this.openState.isOpen ? '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();
+    if (this.openState.isOpen) {
+      this.openEventEmitter.emit();
+      return;
+    }
+    if (this.openState.triggerBy === 'property') {
+      this.closeEventEmitter.emit({ trigger: 'property' });
+    }
   }
   /**
    * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
@@ -158,11 +228,11 @@ export class VegaModalOpenStateController extends VegaSlimmer {
     if (this.backdrop === 'none')
       return;
     const openedModalStackLength = this.openedModalStackController.length();
-    if (this.open && openedModalStackLength === 1) {
+    if (this.openState.isOpen && openedModalStackLength === 1) {
       // eslint-disable-next-line no-restricted-globals
       document.body.classList.add('disable-scroll-in-desktop');
     }
-    else if (!this.open && openedModalStackLength === 0) {
+    else if (!this.openState.isOpen && openedModalStackLength === 0) {
       // eslint-disable-next-line no-restricted-globals
       document.body.classList.remove('disable-scroll-in-desktop');
     }
@@ -176,7 +246,7 @@ export class VegaModalOpenStateController extends VegaSlimmer {
    * Removes the backdrop element if no modals are currently visible.
    */
   removeBackdropWhileNoModalShow() {
-    if (!this.open && this.openedModalStackController.length() === 0) {
+    if (!this.openState.isOpen && this.openedModalStackController.length() === 0) {
       this.backdropController.removeBackdrop();
     }
   }
@@ -209,6 +279,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaModalOpenStateController.prototype, "open", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaModalOpenStateController.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalOpenStateController.prototype, "backdrop", void 0);
@@ -233,12 +306,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalOpenStateController.prototype, "zIndexController", void 0);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaModalOpenStateController.prototype, "disconnectedCallback", null);
 __decorate([
   MapToComponentMethod('componentDidLoad')
 ], VegaModalOpenStateController.prototype, "componentDidLoad", null);
 __decorate([
-  MapToComponentMethod('watchOpen')
-], VegaModalOpenStateController.prototype, "watchOpen", null);
+  MapToComponentMethod('watchOpenState')
+], VegaModalOpenStateController.prototype, "watchOpenState", null);
 __decorate([
   MapToComponentMethod('listenDataTarget')
 ], VegaModalOpenStateController.prototype, "listenDataTarget", null);
@@ -251,3 +327,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('listenMouseUp')
 ], VegaModalOpenStateController.prototype, "listenMouseUp", null);
+__decorate([
+  MapToComponentMethod('modal')
+], VegaModalOpenStateController.prototype, "modal", null);

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

@@ -15,7 +15,7 @@ export class VegaModalZIndexController extends VegaSlimmer {
    */
   setModalZIndex() {
     const backdropRef = this.backdropController.getBackdropRef();
-    if (this.open) {
+    if (this.openState.isOpen) {
       InternalVegaZIndexManager.setZIndex(backdropRef, 'base');
       InternalVegaZIndexManager.setZIndex(this.host, 'base');
     }
@@ -35,6 +35,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalZIndexController.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalZIndexController.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalZIndexController.prototype, "backdropController", void 0);

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

@@ -0,0 +1,9 @@
+/**
+ * Represents the modal open state and the source that triggered the state change.
+ */
+export class VegaModalOpenState {
+  constructor(isOpen, triggerBy) {
+    this.isOpen = isOpen;
+    this.triggerBy = triggerBy;
+  }
+}

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

@@ -23,7 +23,7 @@ export class VegaModalRenderer extends VegaSlimmer {
   }
   render() {
     return (h(Host, { class: {
-        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
+        'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
         'animation': this.animation,
       } },
       h("div", { class: "modal-dialog" }, this.renderContainer())));
@@ -99,6 +99,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "openState", void 0);
 __decorate([
   MapToComponentField()
 ], VegaModalRenderer.prototype, "padding", void 0);