@globalpayments/vega 2.96.0 → 2.97.0

package/dist/collection/components/vega-input-range/vega-input-range.js

@@ -10,7 +10,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaInputRangeRenderer } from './slimmers/renderers/vega-input-range-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { VegaInputRangeValueController } from './slimmers/controllers/vega-input-range-value-controller';
 import { VegaInputRangeInputRenderer } from './slimmers/renderers/vega-input-range-input-renderer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
@@ -117,6 +117,14 @@ export class VegaInputRange {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * 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 2.97.0
+     */
+    this.name = '';
     /**
      * Indicates whether the current value in the field is considered valid
      *    based on the defined validation rules.
@@ -380,6 +388,30 @@ export class VegaInputRange {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies 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": true,
+      "defaultValue": "''"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -14,7 +14,7 @@ import { VegaInputSelectDropdownController } from './slimmers/controllers/vega-i
 import { VegaInputSelectValueController } from './slimmers/controllers/vega-input-select-value-controller';
 import { VegaInputSelectItemController } from './slimmers/controllers/vega-input-select-item-controller';
 import { VegaInputSelectDropdownRenderer } from './slimmers/renderers/vega-input-select-dropdown-renderer';
-import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
+import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form/form-field-controller-slimmer';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaDropdownSelectAllClick, VegaHide, VegaLabelButtonClick, VegaSearch, VegaSearchTrigger, VegaShow, } from '../../helpers/event-manager/event-id/vega-event-id';
@@ -115,6 +115,14 @@ export class VegaInputSelect {
      * @vegaVersion 2.89.0
      */
     this.optional = false;
+    /**
+     * 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 2.97.0
+     */
+    this.name = '';
     /**
      * Allows customization of the text displayed within the
      *    select field when single or multiple items are selected.
@@ -381,6 +389,30 @@ export class VegaInputSelect {
       "reflect": true,
       "defaultValue": "false"
     },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "''"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.97.0"
+          }],
+        "text": "Specifies 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": true,
+      "defaultValue": "''"
+    },
     "selectedLabel": {
       "type": "unknown",
       "mutable": false,

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-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-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/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/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);