@globalpayments/vega 2.35.0 → 2.37.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);

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

@@ -0,0 +1,122 @@
+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 { Fragment, h, Host } from '@stencil/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import { formatAndValidResponsiveToken } from '../../../../utils/design-token';
+/**
+ * Modal renderer
+ */
+export class VegaModalRenderer extends VegaSlimmer {
+  getModalContentRef() {
+    return this.modalContent;
+  }
+  getModalFooterRef() {
+    return this.modalFooter;
+  }
+  getModalContainerRef() {
+    return this.modalContainer;
+  }
+  render() {
+    return (h(Host, { class: {
+        'align-center': this.deprecatedPropertySlimmer.getValue() && this.open,
+        'animation': this.animation,
+      } },
+      h("div", { class: "modal-dialog" }, this.renderContainer())));
+  }
+  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.openStateController.onModalClose, 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);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "animation", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "open", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "padding", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "showCloseButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "modalTitle", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "contentMaxHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "handleClose", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "deprecatedPropertySlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaModalRenderer.prototype, "openStateController", void 0);