@globalpayments/vega 2.28.1 → 2.29.0

package/dist/collection/components/vega-sidenav/slimmers/controllers/vega-sidenav-backdrop-controller.js

@@ -0,0 +1,101 @@
+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';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+/** Manages the visibility and z-index of a backdrop element for a side navigation menu. */
+export class VegaSidenavBackdropController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.backdropRef = null;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * create or remove the sidenav backdrop element.
+   *
+   * @param {ResponsiveBehavior} responsiveBehavior The sidenav config
+   */
+  updateBackdropAvailability(responsiveBehavior) {
+    if (this.openState === 'open' && (responsiveBehavior === null || responsiveBehavior === void 0 ? void 0 : responsiveBehavior.showBackdrop)) {
+      this.append();
+    }
+    else {
+      this.removeZIndex('base');
+      this.remove();
+    }
+  }
+  /**
+   * The function sets the z-index of an element using a specified level.
+   *
+   * @param {ZIndexLevelType} [level] - The zindex level
+   */
+  setZIndex(level) {
+    internalVegaZIndexManager.setZIndex(this.backdropRef, level);
+  }
+  /**
+   * The function removes a specified Z index level from a backdrop element using an internal Vega Z index manager.
+   *
+   * @param {ZIndexLevelType} [level] - The zindex level
+   */
+  removeZIndex(level) {
+    internalVegaZIndexManager.removeZIndex(this.backdropRef, level);
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Appends a backdrop element to the body of the document and sets its visibility based on a breakpoint.
+   */
+  append() {
+    let backdrop = document.querySelector(`vega-backdrop.${VegaSidenavBackdropController.backdropClassName}`);
+    if (!backdrop) {
+      backdrop = document.createElement('vega-backdrop');
+      backdrop.classList.add(VegaSidenavBackdropController.backdropClassName);
+      document.querySelector('body').append(backdrop);
+    }
+    backdrop.visible = this.getBackdropVisibleByBreakpoint();
+    this.backdropRef = backdrop;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Sets the visibility of the `backdropRef` to false.
+   */
+  remove() {
+    if (this.backdropRef) {
+      this.backdropRef.remove();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-backdrop-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Determines if the backdrop is visible based on the current breakpoint.
+   *
+   * @returns {boolean} A boolean value based on the current breakpoint. It returns `true` if the current breakpoint is either 'S' or 'M', and `false` otherwise.
+   */
+  getBackdropVisibleByBreakpoint() {
+    const breakpoint = getCurrentBreakpoint();
+    return breakpoint === 'S' || breakpoint === 'M' ? true : false;
+  }
+}
+VegaSidenavBackdropController.backdropClassName = 'vega-sidenav-backdrop';
+__decorate([
+  MapToComponentField()
+], VegaSidenavBackdropController.prototype, "openState", void 0);

package/dist/collection/components/vega-sidenav/slimmers/controllers/vega-sidenav-open-status-controller.js

@@ -0,0 +1,316 @@
+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 } from 'vega-slimmer/core';
+import { executeAfterTransition } from '../../../../utils/effect';
+import ZIndexManager from '../../../../helpers/zindex/internal-vega-z-index-manager';
+import { getCurrentBreakpoint } from '../../../../utils/breakpoints';
+import ResponsiveFormatFacade from '../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { PageResizeObserverSlimmer } from '../../../../helpers/slimmers/page-resize-observer-slimmer';
+import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalSidenavLinkClick } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** Manages the open status of a side navigation component, handling toggling, updating status based on screen size, and other related functionalities. */
+export class VegaSidenavOpenStatusController extends PageResizeObserverSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   */
+  /**
+   * Register the callback function to page resize observer slimmer
+   */
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => {
+        this.responsiveBehavior = this.getSidenavResponsiveBehavior();
+        this.backdropController.updateBackdropAvailability(this.responsiveBehavior);
+        this.updateOverflowAvailability();
+        this.updateStatusOpenByDefault(true);
+        this.collapseButtonRenderer.updateHandlerIconAvailability(this.canCollapseSidenav());
+      },
+    });
+  }
+  /* The below method is e2e-test covered in
+   * @see{module:vega-sidenav-toggle-and-vegaStateUpdate}
+   * @see{module:vega-sidenav-phone-call-toggle-method-change-position}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggle the open state of a side navigation based on certain conditions.
+   */
+  toggleSidenav() {
+    if (this.canCollapseSidenav()) {
+      switch (this.openState) {
+        case 'open':
+          this.setSideNavOpenStatus('clickClose');
+          break;
+        case 'close':
+          this.setSideNavOpenStatus('clickOpen');
+          break;
+        case 'hoverOpen':
+          this.setSideNavOpenStatus('hoverClose');
+          break;
+      }
+    }
+  }
+  /**
+   * The function `setSidenavRef` sets the sidebar reference.
+   *
+   * @param {HTMLDivElement} sidebarRef - A reference to the sidebar element in the HTML document.
+   */
+  setSidenavRef(sidebarRef) {
+    this.sidebar = sidebarRef;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+   */
+  /* istanbul ignore next */
+  /**
+   * Toggles the open/close status of a side navigation based on different input flags.
+   *
+   * @param {'hoverOpen' | 'hoverClose' | 'clickOpen' | 'clickClose'} statusFlag - A string literal type that can have one of the
+   * following values: 'hoverOpen', 'hoverClose', 'clickOpen', or 'clickClose'.
+   */
+  setSideNavOpenStatus(statusFlag) {
+    let updated = false;
+    switch (statusFlag) {
+      case 'clickOpen':
+        if (this.openState === 'close') {
+          this.openState = 'open';
+          this.host.classList.add('open');
+          this.sidebar.classList.add('open');
+          updated = true;
+        }
+        break;
+      case 'clickClose':
+        if (this.openState === 'hoverOpen' || this.openState === 'open') {
+          this.openState = 'close';
+          this.host.classList.remove('open');
+          this.sidebar.classList.remove('open');
+          updated = true;
+        }
+        break;
+      case 'hoverOpen':
+        if (this.openState === 'close') {
+          this.openState = 'hoverOpen';
+          this.host.classList.add('open');
+          this.sidebar.classList.add('open');
+          updated = true;
+        }
+        break;
+      case 'hoverClose':
+        if (this.openState === 'hoverOpen') {
+          this.openState = 'close';
+          this.host.classList.remove('open');
+          this.sidebar.classList.remove('open');
+          updated = true;
+        }
+        break;
+    }
+    if (updated) {
+      this.backdropController.updateBackdropAvailability(this.responsiveBehavior);
+      this.updateOverflowAvailability();
+      this.updateZIndex();
+      this.stateUpdateEmitter.emit(this.openState);
+    }
+  }
+  /**
+   * Update the sidenav status when component did load
+   */
+  initOpenStatus() {
+    this.responsiveBehavior = this.getSidenavResponsiveBehavior();
+    this.updateStatusOpenByDefault();
+  }
+  /**
+   * Update sidenav status when the property value change
+   */
+  updateOpenStatus() {
+    this.updateStatusOpenByDefault();
+    this.collapseButtonRenderer.updateHandlerIconAvailability(this.canCollapseSidenav());
+  }
+  /*
+   * It will hide the sidenav when clicking the link in the sidenav on mobile terminal default.
+   * If link set showSideBarOnClickLink is true that will don't hide the sidenav..
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-click-handler-mobile}
+   * @see{module:vega-sidenav-e2e-vega-click-handler-not-close-sidenav-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Add an observer to a DOM node for a specific event and handles the event payload to determine whether to close the sidebar.
+   */
+  registerSidenavLinkClickObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalSidenavLinkClick, (payload) => {
+      // payload.detail = VegaSidenavLink.showSideBarOnClickLink
+      if (!this.responsiveBehavior.showSideBarOnClickLink && !payload.detail) {
+        this.setSideNavOpenStatus('clickClose');
+      }
+    });
+  }
+  /**
+   * Remove the observer when the component remove from page
+   */
+  unregisterSidenavLinkClickObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalSidenavLinkClick);
+  }
+  /*
+   * Please refer to the documentation for this part of the logic: vega-stencil/docs/sidenav-responsive-support-spec.md
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-resize-with-desktop}
+   */
+  /* istanbul ignore next */
+  /**
+   * Returns different responsive behaviors based on the screen size.
+   *
+   * @returns {ResponsiveBehavior} Object
+   */
+  getSidenavResponsiveBehavior() {
+    if (this.isLargeScreen()) {
+      return {
+        showSideBar: true,
+        showBackdrop: false,
+        canBeScrolled: true,
+        showSideBarOnClickLink: true,
+      };
+    }
+    else {
+      return {
+        showSideBar: false,
+        showBackdrop: true,
+        canBeScrolled: false,
+        showSideBarOnClickLink: false,
+      };
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-z-index}
+   * @see{module:vega-sidenav-e2e-z-index-in-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Set or remove the sidenav and backdrop style z-index
+   */
+  updateZIndex() {
+    if (['hoverOpen', 'open'].includes(this.openState)) {
+      this.backdropController.setZIndex('base');
+      ZIndexManager.setZIndex(this.sidebar, 'base');
+    }
+    else {
+      executeAfterTransition(() => {
+        this.backdropController.removeZIndex('base');
+        ZIndexManager.removeZIndex(this.sidebar, 'base');
+      }, this.sidebar, 300);
+    }
+  }
+  /**
+   * Determines whether the sidenav can be collapsed based on the current open by default setting and screen size.
+   *
+   * @returns {boolean} The method `canCollapseSidenav()` returns a boolean value.
+   */
+  canCollapseSidenav() {
+    const openByDefault = this.getCurrentOpenByDefault();
+    return openByDefault !== 'disableCollapse' || !this.isLargeScreen();
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-vega-hidden-overflow-with-desktop-to-mobile}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the body style overflow
+   */
+  updateOverflowAvailability() {
+    var _a;
+    const bodyElement = document.querySelector('body');
+    if (!((_a = this.responsiveBehavior) === null || _a === void 0 ? void 0 : _a.canBeScrolled) && this.openState === 'open') {
+      bodyElement.style['overflow'] = 'hidden';
+    }
+    else {
+      bodyElement.style['overflow'] = null;
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
+   */
+  /* istanbul ignore next */
+  /**
+   *
+   *
+   * @param triggerByResize
+   */
+  /**
+   * Determines whether to open or close a side navigation based on certain conditions.
+   *
+   * @param {boolean} [triggerByResize=false] - The `updateStatusOpenByDefault` method was triggered by a resize event
+   */
+  updateStatusOpenByDefault(triggerByResize = false) {
+    const openByDefault = this.getCurrentOpenByDefault();
+    const canCollapseSidenav = this.canCollapseSidenav();
+    if (!triggerByResize) {
+      if (openByDefault == 'open' || !canCollapseSidenav) {
+        this.setSideNavOpenStatus('clickOpen');
+      }
+      else if (openByDefault == 'close' ||
+        (openByDefault == 'disableCollapse' && canCollapseSidenav)) {
+        this.setSideNavOpenStatus('clickClose');
+      }
+    }
+    else if (!canCollapseSidenav) {
+      this.setSideNavOpenStatus('clickOpen');
+    }
+  }
+  /**
+   * Returns true if the current breakpoint is 'L' or 'XL'.
+   *
+   * @returns {boolean} Determine if the screen is considered large.
+   */
+  isLargeScreen() {
+    const currentBreakpoint = getCurrentBreakpoint();
+    return currentBreakpoint == 'L' || currentBreakpoint == 'XL';
+  }
+  /**
+   * TReturns the current openByDefault value formatted using ResponsiveFormatFacade.
+   *
+   * @param {ResponsiveType<OpenByDefaultType>} input - parameter
+   * @returns {OpenByDefaultType} The formatted value of the `input` parameter, which is of type `OpenByDefaultType`.
+   */
+  getCurrentOpenByDefault(input = this.openByDefault) {
+    return ResponsiveFormatFacade.formatCustom(input);
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaSidenavOpenStatusController.prototype, "openState", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "openByDefault", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "stateUpdateEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "backdropController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSidenavOpenStatusController.prototype, "collapseButtonRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaSidenavOpenStatusController.prototype, "initOpenStatus", null);
+__decorate([
+  MapToComponentMethod('watchOpenByDefaultChange')
+], VegaSidenavOpenStatusController.prototype, "updateOpenStatus", null);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaSidenavOpenStatusController.prototype, "registerSidenavLinkClickObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaSidenavOpenStatusController.prototype, "unregisterSidenavLinkClickObserver", null);

package/dist/collection/components/vega-sidenav/slimmers/renderers/vega-sidenav-collapse-button-renderer.js

@@ -0,0 +1,79 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
+import sidenavChevronRight from '../../icons/chevron-right';
+import sidenavToggleButtonBg from '../../icons/toggle-button-bg';
+import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
+import { VegaIconManager } from '../../../../helpers/icon/icon-manager';
+/** Renders a collapsible button for a sidebar with specific functionality and styling. */
+export class VegaSidenavCollapseButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.collapseButtonRef = null;
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-sidenav-e2e-mouse-enter-and-mouse-leave-and-click}
+     * @see{module:vega-sidenav-desktop-click-icon-change-position}
+     */
+    /* istanbul ignore next */
+    this.handleClickSidebarIcon = async () => {
+      await this.host.toggle();
+    };
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-sidenav-e2e-openByDefault-resize-screen-size}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the visibility of the collapse button base on the property canCollapseSidenav
+   *
+   * @param {boolean} canCollapseSidenav The component could collapse or not
+   */
+  updateHandlerIconAvailability(canCollapseSidenav) {
+    if (this.collapseButtonRef) {
+      if (!canCollapseSidenav) {
+        this.collapseButtonRef.classList.add('disable-collapse');
+      }
+      else {
+        this.collapseButtonRef.classList.remove('disable-collapse');
+      }
+    }
+  }
+  /**
+   * Render an action button, the button has a special background and chevron left or right icon.
+   *
+   * @returns {HTMLElement} The button element
+   */
+  render() {
+    const maskImageStyle = this.getButtonMaskImage();
+    return (h("i", { role: 'button', onClick: this.handleClickSidebarIcon, onKeyDown: createEnterKeyHandlerToTriggerClick(), class: "vega-handler-icon", tabIndex: 0, "aria-label": "Handle Sidebar Icon", ref: (node) => (this.collapseButtonRef = node) },
+      h("style", null, maskImageStyle),
+      h("vega-icon", { size: "size-16", icon: VegaInternalIconManager.getIconKey('sidenav-chevron-right') })));
+  }
+  /**
+   * Generating a CSS `mask-image` property value using an SVG icon retrieved from the `VegaIconManager` and`VegaInternalIconManager`.
+   *
+   * @returns {string} The svg content string after encode
+   */
+  getButtonMaskImage() {
+    const svg = VegaIconManager.getIcon(VegaInternalIconManager.getIconKey('sidenav-toggle-button-bg')).icon;
+    const svgUrl = `url(data:image/svg+xml,${globalThis.encodeURIComponent(svg)})`;
+    return `.vega-handler-icon{-webkit-mask-image:${svgUrl};mask-image:${svgUrl}}`;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'sidenav-chevron-right': sidenavChevronRight,
+    'sidenav-toggle-button-bg': sidenavToggleButtonBg,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaSidenavCollapseButtonRenderer.prototype, "host", void 0);