@globalpayments/vega 2.96.0 → 2.98.0

package/dist/collection/components/vega-nav/vega-left-nav/slimmers/controllers/vega-left-nav-backdrop-manager.js

@@ -12,6 +12,18 @@ import { SharedBackdropManager } from '../../../../../helpers/backdrop';
  * Each subclass of SharedBackdropManager gets its own separate static state (consumers, visibility intents, etc).
  */
 export class VegaLeftNavBackdropManager extends SharedBackdropManager {
+  constructor() {
+    super(...arguments);
+    this.effectiveShowAsOverlay = true;
+  }
+  /**
+   * Set the overlay value used by backdrop visibility decisions.
+   *
+   * @param {boolean} showAsOverlay - Resolved overlay value from the controller.
+   */
+  setEffectiveOverlayValue(showAsOverlay) {
+    this.effectiveShowAsOverlay = showAsOverlay;
+  }
   /**
    * Watch openState changes and update visibility intent.
    *
@@ -25,6 +37,7 @@ export class VegaLeftNavBackdropManager extends SharedBackdropManager {
    * Watch showAsOverlay changes and re-evaluate visibility.
    */
   watchShowAsOverlay() {
+    this.setEffectiveOverlayValue(this.showAsOverlay);
     this.watchOpenState(this.openState);
   }
   /**
@@ -37,6 +50,9 @@ export class VegaLeftNavBackdropManager extends SharedBackdropManager {
     const backdrop = doc.createElement('vega-backdrop');
     backdrop.classList.add(VegaLeftNavBackdropManager.backdropClassName);
     backdrop.duration = 150;
+    // Ensure no one-frame flash before the component applies its own visibility styles.
+    backdrop.style.display = 'none';
+    backdrop.style.opacity = '0';
     backdrop.visible = false;
     doc.body.append(backdrop);
     return backdrop;
@@ -47,7 +63,7 @@ export class VegaLeftNavBackdropManager extends SharedBackdropManager {
    * @returns {boolean} True if backdrop should be visible.
    */
   shouldShowBackdrop() {
-    return this.showAsOverlay || !this.isLargeScreen();
+    return this.effectiveShowAsOverlay || !this.isLargeScreen();
   }
   /**
    * Check if current breakpoint is large screen.

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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, methodPlaceholder } from 'vega-slimmer/core';
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
 import { executeAfterTransition } from '../../../../../utils/effect';
 import { FeatureFlag } from '../../../../../helpers/feature-control/feature-flag-controller';
@@ -23,11 +23,13 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
           return;
         }
         this.updateMainContentUI(this.openState);
+        this.backdropManager.setEffectiveOverlayValue(this.getResolvedOverlayValue());
         this.backdropManager.watchOpenState(this.openState);
       },
     });
     this.isVoiceOverClick = false;
     this.triggerElement = null;
+    this.lastSyncedOverlayValue = null;
     this.handleClickEvent = (e) => {
       this.isVoiceOverClick = checkIsVoiceOverClick(e);
     };
@@ -53,9 +55,14 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   }
   /**
    * Component lifecycle - [componentDidRender]
+   *
+   * Runs after the first render to ensure all props (especially from React/Next.js)
+   * are fully hydrated before evaluating overlay-driven backdrop visibility.
+   * This prevents race conditions where showAsOverlay might still hold its default
+   * value during componentDidLoad when React/Next.js applies props after initial render.
    */
   componentDidRender() {
-    methodPlaceholder();
+    this.watchShowAsOverlay();
   }
   /** Call this method to toggle the left nav menu */
   async toggle() {
@@ -77,8 +84,13 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchOpenState(newState) {
-    this.backdropManager.watchOpenState(newState);
+    // Always keep the main-content UI in sync with the requested open state.
     this.updateMainContentUI(newState);
+    // Defer initial "open" backdrop sync until show-as-overlay has an explicit hydrated value.
+    if (this.hasHydratedOverlayValue() || newState !== 'open') {
+      this.backdropManager.setEffectiveOverlayValue(this.getResolvedOverlayValue());
+      this.backdropManager.watchOpenState(newState);
+    }
     if (newState === 'open') {
       this.open = true;
     }
@@ -98,7 +110,12 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   watchShowAsOverlay() {
-    this.backdropManager.watchShowAsOverlay();
+    const effectiveOverlayValue = this.getResolvedOverlayValue();
+    if (this.lastSyncedOverlayValue !== effectiveOverlayValue) {
+      this.backdropManager.setEffectiveOverlayValue(effectiveOverlayValue);
+      this.backdropManager.watchShowAsOverlay();
+      this.lastSyncedOverlayValue = effectiveOverlayValue;
+    }
     this.updateMainContentUI(this.openState);
   }
   /**
@@ -109,6 +126,31 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
   setOpenState(openState) {
     this.openState = openState;
   }
+  /**
+   * Check whether the show-as-overlay attribute has been explicitly hydrated by React/Next.js.
+   *
+   * Returns true only for recognized hydrated tokens ('false', 'true', '').
+   * Returns false when the attribute is absent or unrecognized.
+   *
+   * This DOM-read approach is resilient to SSR re-instantiation because it relies on
+   * current host attributes rather than instance-private hydration flags.
+   */
+  hasHydratedOverlayValue() {
+    var _a, _b;
+    const overlayAttr = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.getAttribute('show-as-overlay')) !== null && _b !== void 0 ? _b : null;
+    return overlayAttr === 'false' || overlayAttr === 'true' || overlayAttr === '';
+  }
+  getResolvedOverlayValue() {
+    var _a, _b;
+    const overlayAttr = (_b = (_a = this.host) === null || _a === void 0 ? void 0 : _a.getAttribute('show-as-overlay')) !== null && _b !== void 0 ? _b : null;
+    if (overlayAttr === 'false') {
+      return false;
+    }
+    if (overlayAttr === 'true' || overlayAttr === '') {
+      return true;
+    }
+    return this.showAsOverlay;
+  }
   /**
    * Focuses the first focusable element within the left nav dialog when it is opened via VoiceOver.
    */
@@ -198,8 +240,9 @@ export class VegaLeftNavOpenStateController extends PageResizeObserverSlimmer {
     }
   }
   shouldShowBackdrop() {
+    const effectiveOverlayValue = this.getResolvedOverlayValue();
     const breakpoint = getCurrentBreakpoint();
-    return this.showAsOverlay || (breakpoint !== 'L' && breakpoint !== 'XL');
+    return effectiveOverlayValue || (breakpoint !== 'L' && breakpoint !== 'XL');
   }
 }
 __decorate([

package/dist/collection/components/vega-page-notification/vega-page-notification.js

@@ -20,6 +20,8 @@ const typeIconMap = {
   info: 'info-circle-filled',
 };
 /**
+ * A Page Notification is a brief message that appears in the top right corner of a page in response to an action or event.
+ *
  * @vegaVersion 1.17.0
  */
 export class VegaPageNotification {

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

@@ -26,6 +26,8 @@ import { VegaPaginationCurrentPageObserverController } from './slimmers/controll
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaPaginationLayoutController } from './slimmers/controllers/vega-pagination-layout-controller';
 /**
+ * The Pagination component allows users to navigate through multiple pages of content, providing a structured way to access large sets of data.
+ *
  * @vegaVersion 1.3.0
  */
 export class VegaPagination {

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

@@ -14,6 +14,8 @@ import { VegaPopoverAppenderRenderer } from './slimmers/renderers/vega-popover-a
 import { VegaPopoverAppenderController } from './slimmers/controllers/vega-popover-appender-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A Popover is an overlaid window that displays rich content, and is visually tethered to the element that triggers it.
+ *
  * @vegaVersion 1.19.0
  */
 export class VegaPopover {

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -19,6 +19,8 @@ import { VegaProgressTrackerCurrentStepsController } from './slimmers/controller
 import { VegaProgressTrackerRenderModeController } from './slimmers/controllers/vega-progress-tracker-render-mode-controller';
 import { VegaProgressTrackerCurrentDirectionController } from './slimmers/controllers/vega-progress-tracker-current-direction-controller';
 /**
+ * The Progress Tracker guides users through a sequential process towards completing a specific goal.
+ *
  * @vegaVersion 1.0.7
  */
 export class VegaProgressTracker {

package/dist/collection/components/vega-radio/vega-radio-group/vega-radio-group.js

@@ -10,7 +10,7 @@ import { RequiredFieldRule } from '../../../helpers/validator/rules/required-fie
 import { ComponentLoadRequired } from '../../../decorators/method-decorators/component-load-required';
 import ChangeManager from '../../../helpers/change-manager/change-manager';
 import { RADIO_GROUP_DISABLED_CHANGE, RADIO_VALUE_CHANGE, } from '../../../helpers/change-manager/subject/static-subject/static-subject-title';
-import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../../helpers/slimmers/form/form-field-controller-slimmer';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { ChildNodesNotifyObserverSlimmer, } from '../../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
@@ -74,6 +74,17 @@ export class VegaRadioGroup {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.value = '';
+    /**
+     * Specifies the name attribute for each radio button
+     *    in the radio group.
+     *
+     * Specifies the name attribute used to identify the form field during data submission.
+     *   It functions identically to the `data-vega-form` attribute but operates at a lower priority.
+     *
+     * @default ''
+     * @vegaVersion 1.3.0
+     */
+    this.name = '';
     /**
      * Specifies all the properties of the `vega-flex` component
      *    in the radio group.
@@ -258,13 +269,17 @@ export class VegaRadioGroup {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
             "name": "vegaVersion",
             "text": "1.3.0"
           }],
-        "text": "Specifies the name attribute for each radio button\n   in the radio group."
+        "text": "Specifies the name attribute for each radio button\n   in the radio group.\n\nSpecifies the name attribute used to identify the form field during data submission.\n  It functions identically to the `data-vega-form` attribute but operates at a lower priority."
       },
       "attribute": "name",
-      "reflect": false
+      "reflect": true,
+      "defaultValue": "''"
     },
     "vegaFlexProp": {
       "type": "unknown",

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

@@ -17,6 +17,8 @@ import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/eve
 import { VegaRadioShowErrorController } from './slimmers/controllers/vega-radio-show-error-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 /**
+ * A Radio Button is used within a Radio Button Group to display a set of mutually exclusive options, where only one choice can be selected at a time.
+ *
  * @vegaVersion 1.0.7
  */
 export class VegaRadio {

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -75,3 +75,6 @@ export const HTML_VOID_TAGS = new Set([
  * This value is based on the paragraph line-height and padding of text content.
  */
 export const VegaRTEOneRowHeightPx = 22;
+export const RTE_DEFAULT_LINK_TYPE_KEY = 'url';
+export const RTE_EMAIL_LINK_TYPE_KEY = 'email';
+export const RTE_SUPPORTED_LINK_TYPE_KEYS = [RTE_DEFAULT_LINK_TYPE_KEY, RTE_EMAIL_LINK_TYPE_KEY];

package/dist/collection/components/vega-rich-text-editor/dto/blocks/text-block.js

@@ -214,6 +214,9 @@ export class RTETextBlock extends RTEBlock {
    * @returns {string} The HTML string representing the children nodes.
    */
   getChildrenHtml(options) {
+    if (!this.isNotEmpty()) {
+      return '<br>';
+    }
     const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
     let nodesHtml = this.renderGroupedNodesAtDepth(this.children, 0, options);
     if (linkGroupAnnotation && this.children.length > 0) {

package/dist/collection/components/vega-rich-text-editor/dto/nodes/code-block-node.js

@@ -8,6 +8,7 @@ import { RTEDecoratorNode } from './decorator-node';
 import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 import { CodeBlockNodeFilterStylesStrategy } from '../filter-styles-strategies/code-block/code-node-filter-styles-strategy';
 import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
+import { simpleEscapeHtml } from '../../helpers/utils';
 /**
  * RTE code node DTO class.
  */
@@ -36,7 +37,7 @@ export class RTECodeBlockNode extends RTEDecoratorNode {
    */
   toHtml(options) {
     const attrs = this.generateAttributeString(options);
-    return `<code${attrs}>${this.text}</code>`;
+    return `<code${attrs}>${simpleEscapeHtml(this.text)}</code>`;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/link-wrapper-renderer.js

@@ -19,12 +19,33 @@ class RTELinkWrapperRenderer {
     this.handleChange = ({ detail }, textFromNodes, linkNodes) => {
       switch (detail.action) {
         case 'link': {
-          const { url, text } = detail.payload;
+          const { url, text, linkType } = detail.payload;
           const textChanged = text !== textFromNodes;
           linkNodes.forEach((node) => {
-            const groupKey = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK).link.groupKey;
+            const currentLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+            const groupKey = currentLinkAnnotation.link.groupKey;
+            const nextCustomAttribute = Object.assign({}, (currentLinkAnnotation.link.customAttribute || {}));
+            if (linkType) {
+              nextCustomAttribute['data-link-type'] = linkType;
+            }
+            else {
+              delete nextCustomAttribute['data-link-type'];
+            }
+            const nextLink = {
+              href: url,
+              groupKey: groupKey,
+            };
+            if (Object.keys(nextCustomAttribute).length > 0) {
+              nextLink.customAttribute = nextCustomAttribute;
+            }
+            if (currentLinkAnnotation.link.customClass) {
+              nextLink.customClass = currentLinkAnnotation.link.customClass;
+            }
+            if (currentLinkAnnotation.link.customStyle) {
+              nextLink.customStyle = currentLinkAnnotation.link.customStyle;
+            }
             const linkAnnotationAction = new LinkAnnotationAction({
-              link: { href: url, groupKey: groupKey },
+              link: nextLink,
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && linkNodes.length > 1,
               doSplit: false,
@@ -106,6 +127,7 @@ class RTELinkWrapperRenderer {
     return Array.isArray(item);
   }
   renderLinkEditorWrapper(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    var _a;
     const { href } = linkAnnotation.link;
     const textFromNodes = linkNodes.map((node) => node.text).join('');
     let linkWrapperRef;
@@ -117,6 +139,7 @@ class RTELinkWrapperRenderer {
       } },
       this.renderLink(linkNodes, linkAnnotation, linkGroupAnnotation),
       h("vega-rich-text-link-editor", { record: {
+          linkType: (_a = linkAnnotation.link.customAttribute) === null || _a === void 0 ? void 0 : _a['data-link-type'],
           text: textFromNodes,
           url: href,
         }, ref: (ref) => {

package/dist/collection/components/vega-rich-text-editor/helpers/utils.js

@@ -64,6 +64,15 @@ export function splitStyleProperties(styleAttr) {
   }
   return properties;
 }
+/**
+ * Simple escape HTML-sensitive characters so text can be rendered literally in HTML. Only escape &, <, and >.
+ *
+ * @param {string} text - Raw text content.
+ * @returns {string} Escaped text content.
+ */
+export function simpleEscapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
 /**
  * Escape HTML-sensitive characters so text can be rendered literally in HTML.
  *
@@ -71,12 +80,7 @@ export function splitStyleProperties(styleAttr) {
  * @returns {string} Escaped text content.
  */
 export function escapeHtml(text) {
-  return text
-    .replace(/&/g, '&amp;')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
+  return simpleEscapeHtml(text).replace(/"/g, '&quot;').replace(/'/g, '&#39;');
 }
 /**
  * Escape text for use inside a double-quoted HTML attribute value.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/base-handler.js

@@ -14,7 +14,7 @@ export class BaseHandler {
    * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
    * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
    * @param {HTMLElement} richTextEditor - The current rich text editor component
-   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
+   * @param {Event} [event] - It is used to pass an input event to the method for handling.
    */
   execute(currentState, selectionController, richTextEditor, event) {
     this.initCurrentStateAndSelection(currentState, selectionController);