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