@globalpayments/vega 2.70.0 → 2.75.1

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

@@ -26,6 +26,7 @@ export class VegaButtonGroup {
     this.variantNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'variant', 'watchVariant');
     this.sizeNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'size', 'watchSize');
     this.iconAlignNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'iconAlign', 'watchIconAlign');
+    this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaButtonGroup, 'disabled', 'watchDisabled');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonGroupRuntimeMetricsPayloadDefinition);
     /**
      * Specifies the visual style and prominence of the button group.
@@ -47,6 +48,12 @@ export class VegaButtonGroup {
      * @vegaVersion 2.5.0
      */
     this.iconAlign = 'left';
+    /**
+     * Specifies whether the button elements are disabled.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.disabled = false;
   }
   watchVariant() {
     methodPlaceholder();
@@ -57,6 +64,9 @@ export class VegaButtonGroup {
   watchIconAlign() {
     methodPlaceholder();
   }
+  watchDisabled() {
+    methodPlaceholder();
+  }
   render() {
     const containerClasses = `vega-button-group-container vega-button-group-${this.variant}`;
     return sanitizeVegaComponent(h(Host, null,
@@ -149,6 +159,27 @@ export class VegaButtonGroup {
       "attribute": "icon-align",
       "reflect": false,
       "defaultValue": "'left'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.72.0"
+          }],
+        "text": "Specifies whether the button elements are disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -201,6 +232,9 @@ export class VegaButtonGroup {
     }, {
       "propName": "iconAlign",
       "methodName": "watchIconAlign"
+    }, {
+      "propName": "disabled",
+      "methodName": "watchDisabled"
     }]; }
 }
 __decorate([
@@ -224,6 +258,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "iconAlignNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButtonGroup.prototype, "disabledNotifySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaButtonGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-button-link/vega-button-link.css

@@ -316,4 +316,8 @@ a.vega-button-link-size-large .vega-button-link-label {
 
 :host(.vega-button-link-disabled) a:focus > .vega-button-link-content {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+}
+
+:host(.button-group-item-button-tertiary.vega-button-link-disabled) a {
+  background-color: rgba(var(--v-bg-transparent, 0, 0, 0, 0));
 }

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

@@ -330,7 +330,7 @@ export class VegaCalendar {
       "mutable": false,
       "complexType": {
         "original": "DropdownPropsForCalendar",
-        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"hover\" | \"click\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
+        "resolved": "{ matchContainerHeight?: boolean; matchTargetWidth?: boolean; maxHeight?: number; positionRelativeTo?: string; trigger?: \"click\" | \"hover\"; source: (DropdownSourceItem | DropdownSourceGroup)[]; }",
         "references": {
           "DropdownPropsForCalendar": {
             "location": "import",

package/dist/collection/components/vega-combo-box/slimmers/renderers/vega-combo-box-dropdown-renderer.js

@@ -10,6 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClose, VegaCreate, VegaDropdownClick, VegaDropdownHide, } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
 export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -125,7 +126,7 @@ export class VegaComboBoxDropdownRenderer extends VegaSlimmer {
   renderSelectedChip(item) {
     return (h("vega-chip", { 
       //TODO: the key property test will add in https://gethired.atlassian.net/browse/VD-883
-      key: item.key, text: item.label, variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
+      key: item.key, text: sanitizeHtmlLabel(item.label), variant: "outlined", showCloseIcon: !this.disabled, size: "small", ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, async () => {
           await this.onChipClose(item.key);
         });

package/dist/collection/components/vega-date-picker/assets/icons.js

@@ -9,6 +9,9 @@ export const Icons = {
     icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
   },
   'caret-down': {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M199 401c9.4 9.4 24.6 9.4 33.9 0L425 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L41 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L199 401z"/></svg>`,
+  },
+  'bulls-eye': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zm0-272a160 160 0 1 1 0 320 160 160 0 1 1 0-320zm0 176a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm0-80a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>`,
   },
 };

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-calendar-open-state-controller.js

@@ -0,0 +1,150 @@
+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 { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { FeatureFlag } from '../../../../helpers/public-api';
+import { SynchronizeTaskQueue } from '../../../../helpers/queue/synchronize-task-queue';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
+/** The date picker element appender controller slimmer */
+export class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
+  /**
+   * Sets up the configuration the element appender of date picker.
+   */
+  constructor() {
+    super(() => ({
+      target: this.vegaDatePickerRenderer.getDatePickerContainer(),
+      appendableElement: this.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
+      positionRelativeTo: this.dropdownConfig.positionRelativeTo,
+      translocation: { X: 0, Y: 8 },
+      placement: ['bottom', 'top'],
+      alignment: ['start', 'end'],
+      isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
+    }), () => new ClickOutsideOnlyToDismissStrategy(), 'isCalendarShow');
+    this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
+  }
+  /**
+   * Since connectedCallback will init element appender again, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
+   */
+  connectedCallback() {
+    if (!this.isMobileDevice) {
+      super.connectedCallback();
+    }
+  }
+  /**
+   * Since it not init the element appender in mobile side, we also not need destroy element appender in disconnectedCallback.
+   */
+  disconnectedCallback() {
+    if (!this.isMobileDevice) {
+      super.disconnectedCallback();
+    }
+  }
+  /**
+   * Since componentDidLoad will init element appender, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
+   */
+  componentDidLoad() {
+    if (!this.isMobileDevice) {
+      super.componentDidLoad();
+    }
+  }
+  /**
+   * We need to clear the calendar state when the property or state of the vega-date-picker is completed,
+   *   such as when the user inputs a range value. we can refill the selecting state in calendar according the new value.
+   */
+  async componentDidRender() {
+    await this.clearCalendarStateTaskQueue.runTask();
+  }
+  /** doOpen */
+  async doOpen() {
+    await this.showCalendar();
+  }
+  /** doClose */
+  async doClose() {
+    await this.hideCalendar();
+  }
+  /** watchDisabled */
+  async watchDisabled() {
+    await this.hideCalendar();
+  }
+  /** watch calendar show state */
+  async watchIsCalendarShow() {
+    await this.clearCalendarSelectingState();
+  }
+  /**
+   * Watch isCalendarShow state change to clear selecting state in calendar.
+   */
+  async showCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('show');
+    }
+    else {
+      this.show();
+    }
+  }
+  /**
+   * Hide calendar in both mobile and desktop mode.
+   */
+  async hideCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('hide');
+    }
+    else {
+      this.hide();
+    }
+  }
+  /**
+   * Update isCalendarShow state.
+   *
+   * @param {boolean} isShow - is calendar show
+   */
+  updateIsCalendarShowState(isShow) {
+    this.isCalendarShow = isShow;
+  }
+  /**
+   * Clear selecting state in calendar.
+   */
+  async clearCalendarSelectingState() {
+    if (!this.isCalendarShow) {
+      const calendar = this.vegaDatePickerCalendarRenderer.getCalendarRef();
+      await this.clearCalendarStateTaskQueue.enqueue({
+        /** Clear the calendar selecting state */
+        run: async () => await calendar.reset(),
+      }, false);
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentMethod('componentDidRender')
+], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('doOpen')
+], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
+__decorate([
+  MapToComponentMethod('doClose')
+], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
+__decorate([
+  MapToComponentMethod('watchDisabled')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
+__decorate([
+  MapToComponentMethod('watchIsCalendarShow')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchIsCalendarShow", null);

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-format-controller.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { StringMaskStrategy } from '../../../../helpers/formatter/string-formatter/string-mask-strategy';
 import { StringInputFormatterSlimmer } from '../../../../helpers/slimmers/string-input-formatter-slimmer';
+import { CalendarDate } from '../../../../helpers/calendar';
 /** The date picker format controller slimmer */
 export class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
   /**
@@ -25,7 +26,8 @@ export class VegaDatePickerFormatController extends StringInputFormatterSlimmer
      * @returns {string} The formatted date is being returned.
      */
     this.formatDate = (date) => {
-      return this.vegaDatePickerCalendarRenderer.getDatePicker().DateTime(date).format(this.format);
+      const formattedDate = CalendarDate.fromString(date, this.format);
+      return formattedDate.toString(this.format);
     };
     /**
      * This function returns a reference to an HTML input element based on the input type specified.

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-keyboard-controller.js

@@ -23,7 +23,7 @@ export class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
           target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
-          target.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
         ],
         eventName: 'keydown',
         // eslint-disable-next-line jsdoc/require-jsdoc

package/dist/collection/components/vega-date-picker/slimmers/controllers/vega-date-picker-value-controller.js

@@ -6,30 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, VegaSlimmer, MapToComponentMethod } from 'vega-slimmer/core';
 import { isArrayEqual } from '../../../../utils/array';
-import { isDateStr } from '../../../../utils/date';
 import { LogUtility } from '../../../../utils/log';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { CalendarDate } from '../../../../helpers/calendar';
 /** The date picker value controller slimmer */
 export class VegaDatePickerValueController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    // The litepicker logic will clear the input element value if one of the startDate and dateDate is empty
-    // Hence we need sync up the vega-date-picker value with litepicker calendar
-    // Link: https://github.com/wakirin/Litepicker/blob/master/src/litepicker.ts#L119
-    /** Sync up the value of input with the value of the calendar */
-    this.syncUpValueWithCalendar = () => {
-      var _a, _b;
-      const startDate = ((_a = this.vegaDatePickerCalendarRenderer.getDatePicker().getStartDate()) === null || _a === void 0 ? void 0 : _a.format(this.format)) || '';
-      const endDate = ((_b = this.vegaDatePickerCalendarRenderer.getDatePicker().getEndDate()) === null || _b === void 0 ? void 0 : _b.format(this.format)) || '';
-      if (this.mode === 'range' && !isArrayEqual(this.getValue(), [startDate, endDate])) {
-        this.setValue([startDate, endDate]);
-      }
-      if (this.mode === 'single' && this.getValue() !== startDate) {
-        this.setValue(startDate);
-      }
-    };
-  }
   /*
    * call this method to open the date picker dropdown
    * The below method is e2e-test covered in
@@ -65,10 +47,7 @@ export class VegaDatePickerValueController extends VegaSlimmer {
       isArrayEqual(newValue, oldValue)) {
       return; // avoid the value changed again by `onDatePickerSelected` in range mode
     }
-    if (this.valueGuard(newValue)) {
-      this.vegaDatePickerCalendarController.shouldUpdateCalendar(newValue);
-    }
-    else {
+    if (!this.valueGuard(newValue)) {
       this.setDefaultValueByMode();
     }
     this.changeEventEmitter.emit(this.value);
@@ -130,13 +109,15 @@ export class VegaDatePickerValueController extends VegaSlimmer {
     let isValid;
     switch (this.mode) {
       case 'single':
-        isValid = (value && typeof value === 'string' && isDateStr(value)) || value === '';
+        isValid =
+          (value && typeof value === 'string' && !!CalendarDate.fromString(value, this.format)) ||
+            value === '';
         break;
       case 'range':
         isValid =
           Array.isArray(value) &&
             value.length === 2 &&
-            value.every((item) => isDateStr(item) || item === '');
+            value.every((item) => !!CalendarDate.fromString(item, this.format) || item === '');
         break;
     }
     if (!isValid) {
@@ -162,10 +143,13 @@ __decorate([
 ], VegaDatePickerValueController.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarController", void 0);
+], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerValueController.prototype, "componentWillLoad", null);