@globalpayments/vega 1.0.0 → 2.13.0-backfill-beta.0

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

@@ -0,0 +1,870 @@
+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 { Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from '@stencil/core';
+import { DefaultModalSize } from '../../constants/ui';
+import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsiveFormatFacade';
+import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
+import { DeviceType } from '../../types/ui.type';
+import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { findParent, getDeviceType } from '../../utils/ui';
+import { formatAndValidResponsiveToken } from '../../utils/designToken';
+import ZIndexManager from '../../helpers/zindex/zIndexManager';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/pageResizeObserverSlimmer';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
+import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
+import { VegaOpen, VegaClose } from '../../helpers/event-manager/eventID/vegaEventId';
+import { ComponentGlobalStyleSlimmer } from '../../helpers/slimmers/componentGlobalStyleSlimmer';
+import mainContentStyle from './vega-modal-disable-body-scroll.css';
+import { createDeprecatedPropertySlimmer, } from '../../helpers/slimmers/deprecatedPropertySlimmer';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { VegaModalRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-modal/runtime-metrics-payload-definition';
+export class VegaModal {
+  constructor() {
+    this.globalSlimmers = {};
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-resize-e2e}
+     */
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
+      callback: /* istanbul ignore next */ () => {
+        this.setModalWidth('update');
+        this.setContentMaxHeight();
+      },
+      isDeferred: true,
+    });
+    this.openEventEmitter = createEventEmitSlimmer(VegaModal, VegaOpen);
+    this.closeEventEmitter = createEventEmitSlimmer(VegaModal, VegaClose);
+    this.childNodesEventPrevent = new ChildNodesEventPreventSlimmer([VegaOpen, VegaClose], () => this.modalContainer);
+    this.componentGlobalStyleSlimmer = new ComponentGlobalStyleSlimmer(mainContentStyle);
+    this.deprecatedPropertySlimmer = createDeprecatedPropertySlimmer(VegaModal, 'isVerticallyCentered', 'isVerticallyCenter', false);
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaModalRuntimeMetricsPayloadDefinition);
+    this.isModalWidthSet = false;
+    /**
+     * Provides options for controlling the behavior of the backdrop.
+     * - `default`:
+     *      indicates that the user can close the modal
+     *      by clicking on the backdrop.
+     * - `static`:
+     *      means that the user cannot close the modal by
+     *      clicking on the backdrop.
+     * - `none`:
+     *      specifies that the backdrop will not be rendered.
+     *
+     * _Note_:
+     *    When changing this value, a page refresh is required
+     *    for the changes to take effect.
+     */
+    this.backdrop = 'default';
+    /**
+     * Determines whether the modal is initially open.
+     */
+    this.open = false;
+    /**
+     * Specifies whether the modal uses an animated transition
+     *    when it appears.
+     */
+    this.animation = false;
+    /**
+     * Represents the title displayed within the modal.
+     */
+    this.modalTitle = '';
+    /**
+     * Specifies the background color of the modal's backdrop.
+     */
+    this.backdropColor = 'default';
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     * @deprecated This property will be removed soon and replaced by prop isVerticallyCentered
+     */
+    this.isVerticallyCenter = false;
+    /**
+     * Determines whether the modal is vertically centered
+     *    on the screen.
+     */
+    this.isVerticallyCentered = false;
+    /**
+     * Determines whether the modal displays a close button to
+     *    allow hiding or closing of the modal.
+     */
+    this.showCloseButton = true;
+    /**
+     * Specifies the amount of space or padding within the modal.
+     *
+     * It can be set as a ResponsiveType or any size value.
+     */
+    this.padding = 'size-24';
+    /**
+     * Provides a callback function that is triggered when a user clicks the
+     *    close button located in the top right corner of the modal.
+     *
+     * If the callback function returns `true`, the modal will be closed.
+     *
+     * If the callback function returns `false` or does not return any value, the modal will remain open.
+     */
+    this.handleClose = undefined;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-modal-toggle-interactive-e2e}
+     */
+    /* istanbul ignore next */
+    this.closeModal = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!this.handleClose || this.handleClose()) {
+        this.open = false;
+      }
+    };
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-size-number-e2e}
+   * @see{module:vega-modal-size-responsive-e2e}
+   */
+  /* istanbul ignore next */
+  watchSize() {
+    this.setModalWidth('update');
+  }
+  watchOpen() {
+    this.toggle();
+  }
+  disconnectedCallback() {
+    this.open = false;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-resize-e2e}
+   */
+  /* istanbul ignore next */
+  componentDidLoad() {
+    if (this.open) {
+      this.toggle();
+    }
+    if (getDeviceType() !== DeviceType.DESKTOP && this.backdrop !== 'none') {
+      this.disableBackdropTouchMove();
+    }
+    if (this.isContentScrollable) {
+      this.listenContentScroll();
+    }
+    this.setContentMaxHeight();
+  }
+  /**
+   * Clicking on a non-static current modal should close this modal, not other modals.
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  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 */
+  listenDataDismiss(e) {
+    const target = e.target.closest(`[data-dismiss='modal']`);
+    if (target) {
+      e.preventDefault();
+      this.open = false;
+    }
+  }
+  /**
+   * Invoke this method to show or hide the modal.
+   */
+  /* The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  async modal(option) {
+    switch (option) {
+      case 'show':
+        this.open = true;
+        break;
+      case 'hide':
+        this.open = false;
+        break;
+      default:
+        break;
+    }
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
+        'animation': this.animation,
+      } },
+      h("div", { class: "modal-dialog" }, this.renderContainer())), this.host);
+  }
+  renderContainer() {
+    const padding = formatAndValidResponsiveToken(this.padding, 'padding');
+    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
+      this.renderHeader(padding),
+      this.renderContent(padding),
+      this.renderFooter(padding)));
+  }
+  renderHeader(padding) {
+    return (h("div", { class: {
+        'vega-modal-header': true,
+        'vega-modal-header-with-title': this.hasModalTitle(),
+        'vega-modal-header-with-icon': this.showCloseButton,
+        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      } },
+      this.renderTitle(),
+      this.showCloseButton && this.renderCloseBtn()));
+  }
+  renderContent(padding) {
+    return (h("div", { class: {
+        'vega-modal-content': true,
+        'vega-modal-content-with-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalContent = e) },
+      h(Fragment, null,
+        h("slot", null),
+        h("slot", { name: "content" }),
+        h("slot", { name: "modal-content" }))));
+  }
+  renderFooter(padding) {
+    return (h("div", { class: {
+        'vega-modal-footer': true,
+        'vega-modal-footer-with-slot': this.hasModalFooter(),
+        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
+        [padding]: true,
+      }, ref: (e) => (this.modalFooter = e) },
+      h(Fragment, null,
+        h("slot", { name: "footer" }),
+        h("slot", { name: "modal-footer" }))));
+  }
+  renderTitle() {
+    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
+      h("slot", { name: "title" }),
+      h("slot", { name: "modal-title" })))));
+  }
+  renderCloseBtn() {
+    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.closeModal, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      h("vega-icon", { icon: "close", size: "size-16" })));
+  }
+  hasModalFooter() {
+    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
+      this.host.querySelector(`[slot='footer']`) !== null);
+  }
+  isContentScrollable() {
+    return Boolean(this.contentMaxHeight);
+  }
+  hasModalTitle() {
+    return (Boolean(this.modalTitle) ||
+      this.host.querySelector(`[slot='modal-title']`) !== null ||
+      this.host.querySelector(`[slot='title']`) !== null);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-content-scroll-to-bottom}
+   */
+  /* istanbul ignore next */
+  listenContentScroll() {
+    this.modalContent.addEventListener('scroll', () => {
+      if (this.modalContent.scrollHeight - this.modalContent.scrollTop <=
+        this.modalContent.clientHeight) {
+        this.modalFooter.classList.add('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+      else {
+        this.modalFooter.classList.remove('vega-modal-footer-with-content-scroll-to-bottom');
+      }
+    });
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  toggle() {
+    this.open ? this.pushToModalStack() : this.deleteFromModalStack();
+    this.updateDocumentRootOverflow();
+    this.setBackdrop();
+    this.setModalZIndex();
+    this.setModalWidth();
+    this.emitEvent();
+    this.setModalVisibility();
+  }
+  setModalZIndex() {
+    if (this.open) {
+      ZIndexManager.setZIndex(this.backdropRef, 'base');
+      ZIndexManager.setZIndex(this.host, 'base');
+    }
+    else {
+      ZIndexManager.removeZIndex(this.backdropRef, 'base');
+      ZIndexManager.removeZIndex(this.host, 'base');
+      const length = this.getVisibleModalLength();
+      if (length > 0) {
+        ZIndexManager.setZIndex(this.backdropRef, 'base');
+        ZIndexManager.setZIndex(VegaModal.openedModalStack[length - 1], 'base');
+      }
+      this.removeBackdropWhileNoModalShow();
+    }
+  }
+  /**
+   * 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 */
+  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 */
+  setContentMaxHeight() {
+    const maxHeight = ResponsiveFormatFacade.formatCustom(this.contentMaxHeight);
+    if (maxHeight) {
+      this.modalContent.style.maxHeight = `${maxHeight}px`;
+    }
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-toggle-interactive-e2e}
+   */
+  /* istanbul ignore next */
+  setModalVisibility() {
+    this.host.style['display'] = this.open ? 'flex' : 'none';
+  }
+  emitEvent() {
+    this.open ? this.openEventEmitter.emit() : this.closeEventEmitter.emit();
+  }
+  /**
+   * 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 */
+  getModalSize() {
+    const size = ResponsiveFormatFacade.format(this.size, 'size');
+    if (size) {
+      return size;
+    }
+    else {
+      return DefaultModalSize[getCurrentBreakpoint()];
+    }
+  }
+  /**
+   * 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 */
+  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 = VegaModal.backdropColorMap[this.backdropColor];
+      backdrop.visible = true;
+      document.querySelector('body').append(backdrop);
+    }
+    this.backdropRef = backdrop;
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:vega-modal-disconnected-callback-e2e }
+   */
+  /* istanbul ignore next */
+  removeBackdropWhileNoModalShow() {
+    if (this.getVisibleModalLength() === 0) {
+      this.backdropRef && this.backdropRef.remove();
+    }
+  }
+  //TODO: Record the nest modal by an array.
+  /**
+   * Get visible modal length
+   */
+  getVisibleModalLength() {
+    return VegaModal.openedModalStack.length;
+  }
+  /**
+   * In desktop, we should add 'overflow: hidden' to the body to prevent the body scroll.
+   */
+  updateDocumentRootOverflow() {
+    if (this.backdrop === 'none')
+      return;
+    if (this.open && this.getVisibleModalLength() === 1) {
+      document.body.classList.add('disable-scroll-in-desktop');
+    }
+    else if (!this.open && this.getVisibleModalLength() === 0) {
+      document.body.classList.remove('disable-scroll-in-desktop');
+    }
+  }
+  pushToModalStack() {
+    VegaModal.openedModalStack.push(this.host);
+  }
+  deleteFromModalStack() {
+    VegaModal.openedModalStack = VegaModal.openedModalStack.filter((modal) => modal !== this.host);
+  }
+  /**
+   * 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/
+   */
+  /* istanbul ignore next */
+  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 });
+  }
+  static get is() { return "vega-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-modal.css"]
+  }; }
+  static get properties() { return {
+    "backdrop": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaModalBackdrop",
+        "resolved": "\"default\" | \"none\" | \"static\"",
+        "references": {
+          "VegaModalBackdrop": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provides options for controlling the behavior of the backdrop.\n- `default`:\n     indicates that the user can close the modal\n     by clicking on the backdrop.\n- `static`:\n     means that the user cannot close the modal by\n     clicking on the backdrop.\n- `none`:\n     specifies that the backdrop will not be rendered.\n\n_Note_:\n   When changing this value, a page refresh is required\n   for the changes to take effect."
+      },
+      "attribute": "backdrop",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "size": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<SizeType>",
+        "resolved": "`${number}%` | number | { S?: SizeType; M?: SizeType; L?: SizeType; XL?: SizeType; default?: SizeType; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "SizeType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the size of the modal.\n\nIt can be specified as a number, a percentage string ending with \"%\",\n   or a ResponsiveType.\n\nIt is important to note that there are different maximum widths\n   for modal windows based on the viewport size. If the specified size exceeds\n   the maximum width, the maximum modal width will be used instead."
+      },
+      "attribute": "size",
+      "reflect": false
+    },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the modal is initially open."
+      },
+      "attribute": "open",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "animation": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the modal uses an animated transition\n   when it appears."
+      },
+      "attribute": "animation",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Represents the title displayed within the modal."
+      },
+      "attribute": "modal-title",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "backdropColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaModalBackdropColor",
+        "resolved": "\"default\" | \"none\" | \"semi\"",
+        "references": {
+          "VegaModalBackdropColor": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the background color of the modal's backdrop."
+      },
+      "attribute": "backdrop-color",
+      "reflect": false,
+      "defaultValue": "'default'"
+    },
+    "isVerticallyCenter": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "deprecated",
+            "text": "This property will be removed soon and replaced by prop isVerticallyCentered"
+          }],
+        "text": "Determines whether the modal is vertically centered\n   on the screen."
+      },
+      "attribute": "is-vertically-center",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isVerticallyCentered": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the modal is vertically centered\n   on the screen."
+      },
+      "attribute": "is-vertically-centered",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showCloseButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines whether the modal displays a close button to\n   allow hiding or closing of the modal."
+      },
+      "attribute": "show-close-button",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<PaddingType>",
+        "resolved": "\"0\" | \"size-112\" | \"size-12\" | \"size-16\" | \"size-2\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-4\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-8\" | \"size-80\" | { S?: PaddingType; M?: PaddingType; L?: PaddingType; XL?: PaddingType; default?: PaddingType; } | { left?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; right?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; top?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; bottom?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; x?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; y?: \"0\" | \"size-4\" | \"size-8\" | \"size-12\" | \"size-16\" | \"size-20\" | \"size-24\" | \"size-32\" | \"size-40\" | \"size-48\" | \"size-64\" | \"size-72\" | \"size-80\" | \"size-112\" | \"size-2\"; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "PaddingType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the amount of space or padding within the modal.\n\nIt can be set as a ResponsiveType or any size value."
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "'size-24'"
+    },
+    "contentMaxHeight": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<number>",
+        "resolved": "number | { S?: number; M?: number; L?: number; XL?: number; default?: number; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the maximum height of the content within\n   the modal element."
+      },
+      "attribute": "content-max-height",
+      "reflect": false
+    },
+    "handleClose": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(() => boolean) | undefined",
+        "resolved": "() => boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Provides a callback function that is triggered when a user clicks the\n   close button located in the top right corner of the modal.\n\nIf the callback function returns `true`, the modal will be closed.\n\nIf the callback function returns `false` or does not return any value, the modal will remain open."
+      },
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get states() { return {
+    "currentBreakpoint": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaClose",
+      "name": "vegaClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying the modal close event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "close",
+      "name": "close",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the modal close event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "vegaOpen",
+      "name": "vegaOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying the modal open event."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "modalOpen",
+      "name": "modalOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the modal open event. The event name is not `open` because already has a property `open`"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get methods() { return {
+    "modal": {
+      "complexType": {
+        "signature": "(option: 'show' | 'hide') => Promise<void>",
+        "parameters": [{
+            "tags": [],
+            "text": ""
+          }],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Invoke this method to show or hide the modal.",
+        "tags": []
+      }
+    }
+  }; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "size",
+      "methodName": "watchSize"
+    }, {
+      "propName": "open",
+      "methodName": "watchOpen"
+    }]; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "listenDataTarget",
+      "target": "window",
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "listenDataDismiss",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}
+VegaModal.openedModalStack = [];
+VegaModal.backdropColorMap = {
+  default: 'bg-backdrop-modal',
+  semi: 'bg-backdrop-popover',
+  none: 'bg-transparent',
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaModal.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "openEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "closeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "childNodesEventPrevent", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "componentGlobalStyleSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaModal.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);