@globalpayments/vega 2.57.1 → 2.58.0

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

@@ -15,6 +15,7 @@ import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/
 import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaChange, VegaDateDblClick, VegaEventClick, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { CalendarDate } from '../../helpers/calendar';
 import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
 import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
@@ -31,6 +32,7 @@ import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/su
 import { VegaCalendarFullDayEventMoreButtonRenderer } from './slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaCalendarTimeMarkerRenderer } from './slimmers/day-view/renderers/vega-calendar-time-marker-renderer';
+import { VegaCalendarPostOperationDateController } from './slimmers/common/controllers/vega-calendar-post-operation-date-controller';
 /**
  * @vegaVersion 2.14.0
  */
@@ -47,9 +49,11 @@ export class VegaCalendar {
     this.timeLineRenderer = new VegaCalendarTimeLineRenderer();
     this.timeMarkerRenderer = new VegaCalendarTimeMarkerRenderer();
     this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
-    //The current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
+    // The current period controller should be before the calendar view controller because the initial current period should be before the initial calendar view
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
+    // Date after recording the operation
+    this.postOperationDateController = new VegaCalendarPostOperationDateController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
     this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
@@ -65,6 +69,12 @@ export class VegaCalendar {
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
     this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
+    /**
+     * This postOperationDate will record the time after the operation, which will affect the calculation of day/week/month, making the generated interval accurate
+     *
+     * @type {CalendarDate}
+     */
+    this.postOperationDate = CalendarDate.from(new Date());
     this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
@@ -99,6 +109,12 @@ export class VegaCalendar {
      * @vegaVersion 2.21.0
      */
     this.showEventColorBar = true;
+    /**
+     * Controls whether the switch view is displayed.
+     *
+     * @vegaVersion 2.58.0
+     */
+    this.showSwitchView = true;
     /**
      * Controls the visibility of the weekend columns in the calendar.
      *
@@ -314,6 +330,27 @@ export class VegaCalendar {
       "reflect": false,
       "defaultValue": "true"
     },
+    "showSwitchView": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.58.0"
+          }],
+        "text": "Controls whether the switch view is displayed."
+      },
+      "attribute": "show-switch-view",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "showWeekends": {
       "type": "boolean",
       "mutable": false,
@@ -339,6 +376,7 @@ export class VegaCalendar {
   static get states() { return {
     "calendarView": {},
     "currentPeriod": {},
+    "postOperationDate": {},
     "showAllEventsInDayOrWeekView": {},
     "calendarEvents": {}
   }; }
@@ -589,6 +627,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarViewController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "postOperationDateController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);

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

@@ -8,6 +8,14 @@ import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 export class VegaDropdownItemRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.setLabelRef = (ref) => {
+      if (ref) {
+        this.labelRef = ref;
+      }
+    };
+  }
   render() {
     return (h("li", { key: this.label, role: "menuitem", "aria-label": this.label, class: {
         'vega-dropdown-item-selected': this.selected,
@@ -23,7 +31,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
       } },
       this.renderSelectIcon(),
       this.renderPrefixIcon(),
-      this.renderLabel(),
+      this.itemDisplayRule === 'ellipsis' ? this.renderLabelWithTooltip() : this.renderLabel(),
       this.renderCounter()));
   }
   renderSelectIcon() {
@@ -47,12 +55,12 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
     // such as input select selected item display
     if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
-      return (h("span", { class: "vega-dropdown-item-label" },
+      return (h("span", { class: "vega-dropdown-item-label", ref: this.setLabelRef },
         h("slot", null)));
     }
     else {
       return (h(Fragment, null,
-        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
+        h("span", { innerHTML: this.label, class: "vega-dropdown-item-label", ref: this.setLabelRef }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
@@ -64,6 +72,22 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
   onSelect(e) {
     this.vegaDropdownItemClickController.handleClick(e);
   }
+  renderLabelWithTooltip() {
+    if (!this.label) {
+      return this.renderLabel();
+    }
+    return (h("vega-tooltip", { ref: (ref) => {
+        if (ref) {
+          this.tooltipRef = ref;
+        }
+      }, text: this.label.replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onMouseEnter: (e) => {
+        e.preventDefault();
+        const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;
+        this.tooltipRef.trigger = isTextTruncated ? 'hover' : 'none';
+      } }, this.renderLabel()));
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.css

@@ -124,6 +124,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  pointer-events: none;
+}
+:host .vega-dropdown-item-display-ellipsis vega-tooltip {
+  flex-grow: 1;
+  display: block;
+  overflow: hidden;
 }
 
 :host .v-hidden {

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.css

@@ -15,6 +15,10 @@
   padding-right: 8px;
 }
 
+.vega-input-phone-number-container vega-input-select {
+  white-space: nowrap;
+}
+
 :host .vega-input-phone-number-container.error vega-input::part(input-container) {
   border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
 }

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -35,7 +35,9 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     };
     this.renderMultipleSelected = () => {
       if (this.value.length > 0) {
-        return (h("span", { class: "vega-input-select-selected" }, this.selectedLabel(this.value)));
+        const selectedLabelStr = this.selectedLabel(this.value);
+        return (h("span", { class: "vega-input-select-selected" },
+          h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: selectedLabelStr }, selectedLabelStr)));
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -44,7 +46,8 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
     this.renderSingleSelected = () => {
       const item = this.sourceController.getItem(this.value);
       if (item) {
-        return (h("span", { class: "vega-input-select-selected", part: "selected-box" }, item.displayName));
+        return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
+          h("vega-text", { overflow: "ellipsis", tooltip: { placement: 'bottom' }, key: item.displayName }, item.displayName)));
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder", part: "placeholder" }, this.translationSlimmer.t(this.placeholder)));

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

@@ -132,9 +132,6 @@
   line-height: 24px;
   letter-spacing: 0px;
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   display: block;
   min-height: 24px;
 }

package/dist/collection/components/vega-selection-tile/slimmers/controllers/vega-selection-tile-state-controller.js

@@ -49,6 +49,10 @@ export class VegaSelectionTileStateController extends SubStateObserverSlimmer {
               : groupValue === this.value);
           },
         },
+        {
+          subStateName: 'distributeEvenly',
+          parentStateName: 'distributeEvenly',
+        },
       ],
     });
   }
@@ -71,3 +75,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaSelectionTileStateController.prototype, "checkedController", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaSelectionTileStateController.prototype, "distributeEvenly", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js

@@ -47,6 +47,7 @@ export class VegaSelectionTileGroup {
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'selectType', 'watchSelectType');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'disabled', 'watchDisabled');
     this.valueNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'value', 'watchValue');
+    this.distributeEvenlyNotifySlimmer = createSubStateNotifySlimmer(VegaSelectionTileGroup, 'distributeEvenly', 'watchDistributeEvenly');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
      * Specifies the label or title for the selection tile group.
@@ -56,6 +57,12 @@ export class VegaSelectionTileGroup {
      * @vegaVersion 2.7.0
      */
     this.label = '';
+    /**
+     * Distribute vega-selection-tile components evenly to always cover the entire available width of the vega-selection-tile-group
+     *
+     * @vegaVersion 2.58.0
+     */
+    this.distributeEvenly = false;
     /**
      * Determines the selection method for the tile group. Options are:
      *
@@ -96,6 +103,9 @@ export class VegaSelectionTileGroup {
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.isValid = null;
   }
+  watchDistributeEvenly() {
+    methodPlaceholder();
+  }
   watchSelectType() {
     methodPlaceholder();
   }
@@ -161,6 +171,27 @@ export class VegaSelectionTileGroup {
       "attribute": "hint",
       "reflect": false
     },
+    "distributeEvenly": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.58.0"
+          }],
+        "text": "Distribute vega-selection-tile components evenly to always cover the entire available width of the vega-selection-tile-group"
+      },
+      "attribute": "distribute-evenly",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "selectType": {
       "type": "string",
       "mutable": false,
@@ -352,6 +383,9 @@ export class VegaSelectionTileGroup {
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
+      "propName": "distributeEvenly",
+      "methodName": "watchDistributeEvenly"
+    }, {
       "propName": "selectType",
       "methodName": "watchSelectType"
     }, {
@@ -398,6 +432,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaSelectionTileGroup.prototype, "valueNotifySlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionTileGroup.prototype, "distributeEvenlyNotifySlimmer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaSelectionTileGroup.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-selection-tile/vega-selection-tile.css

@@ -3,6 +3,18 @@
  * Deprecated. Not for use in new websites.
  * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
  */
+:host::not(.distribute-evenly) {
+  display: block;
+}
+
+:host(.distribute-evenly) {
+  display: flex;
+  width: 100%;
+}
+:host(.distribute-evenly) .selection-tile {
+  flex: 1;
+}
+
 :host {
   display: block;
 }

package/dist/collection/components/vega-selection-tile/vega-selection-tile.js

@@ -40,6 +40,10 @@ export class VegaSelectionTile {
      * Indicates whether the parent selection tile group shows error message.
      */
     this.showError = false;
+    /**
+     * Distribute vega-selection-tile components evenly to always cover the entire available width of the parent
+     */
+    this.distributeEvenly = false;
     /**
      * Specifies the text content of the title displayed
      *    within the selection tile.
@@ -68,7 +72,7 @@ export class VegaSelectionTile {
     this.selectType = 'radio';
   }
   render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+    return sanitizeVegaComponent(h(Host, { class: { 'distribute-evenly': this.distributeEvenly } }, this.renderer.render()), this.host);
   }
   static get is() { return "vega-selection-tile"; }
   static get encapsulation() { return "shadow"; }
@@ -224,7 +228,8 @@ export class VegaSelectionTile {
     }
   }; }
   static get states() { return {
-    "showError": {}
+    "showError": {},
+    "distributeEvenly": {}
   }; }
   static get events() { return [{
       "method": "vegaChange",

package/dist/collection/helpers/calendar/calendar-period/month-period.js

@@ -1,11 +1,12 @@
 import { CalendarPeriod } from './calendar-period.abstract';
 import { CalendarDate } from '../calendar-date';
+import { getWeekdays } from '../utils';
 /**
  * Period of month
  */
 export class MonthPeriod extends CalendarPeriod {
   constructor(current, showWeekends) {
-    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    super(MonthPeriod.DISPLAY_DATE_COUNT, current);
     this._type = 'month';
     this._showWeekends = true;
     this._showWeekends = showWeekends === false ? false : true;
@@ -24,6 +25,19 @@ export class MonthPeriod extends CalendarPeriod {
     const date = calendarDate || CalendarDate.from(new Date());
     return new CalendarDate(date.year, date.month, 1);
   }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const firstDay = MonthPeriod.getMonthFirstDay(date);
+    const cursor = firstDay.toDate();
+    cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
   /**
    * @inheritDoc
    */

package/dist/collection/helpers/calendar/calendar-period/week-period.js

@@ -1,5 +1,4 @@
 import { CalendarPeriod } from './calendar-period.abstract';
-import { getWeekdays } from '../utils';
 import { CalendarDate } from '../calendar-date';
 /**
  * Period of the week
@@ -15,17 +14,17 @@ export class WeekPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   next() {
-    const nextWeekStartDate = this.current.toDate();
-    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
-    return this.createBy(CalendarDate.from(nextWeekStartDate));
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() + 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
    * @inheritDoc
    */
   previous() {
-    const previousWeekStartDate = this.current.toDate();
-    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
-    return this.createBy(CalendarDate.from(previousWeekStartDate));
+    const currentDate = this.current.toDate();
+    currentDate.setDate(currentDate.getDate() - 7);
+    return this.createBy(CalendarDate.from(currentDate));
   }
   /**
    * @inheritDoc

package/dist/collection/helpers/calendar/test/calendar-period/month-period.test.js

@@ -12,7 +12,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = new MonthPeriod();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 4, 1),
+      current: new CalendarDate(2020, 4, 3),
       startDate: new CalendarDate(2020, 3, 29),
       endDate: new CalendarDate(2020, 5, 9),
     });
@@ -32,7 +32,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.now();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 4, 1),
+      current: new CalendarDate(2020, 4, 3),
       startDate: new CalendarDate(2020, 3, 29),
       endDate: new CalendarDate(2020, 5, 9),
     });
@@ -42,7 +42,7 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.next();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 5, 1),
+      current: new CalendarDate(2020, 5, 3),
       startDate: new CalendarDate(2020, 4, 26),
       endDate: new CalendarDate(2020, 6, 6),
     });
@@ -52,9 +52,17 @@ describe('month-period', () => {
     const { current, count, startDate, endDate } = monthPeriod.previous();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 42,
-      current: new CalendarDate(2020, 3, 1),
+      current: new CalendarDate(2020, 3, 3),
       startDate: new CalendarDate(2020, 3, 1),
       endDate: new CalendarDate(2020, 4, 11),
     });
   });
+  it('should work when get month first day', () => {
+    const { year, month, date } = MonthPeriod.getMonthFirstDay();
+    expect({ year, month, date }).toEqual({
+      year: 2020,
+      month: 4,
+      date: 1,
+    });
+  });
 });

package/dist/collection/helpers/calendar/test/calendar-period/week-period.test.js

@@ -42,7 +42,7 @@ describe('week-period', () => {
     const { current, count, startDate, endDate } = weekPeriod.next();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 7,
-      current: new CalendarDate(2020, 4, 5),
+      current: new CalendarDate(2020, 4, 10),
       startDate: new CalendarDate(2020, 4, 5),
       endDate: new CalendarDate(2020, 4, 11),
     });
@@ -52,7 +52,7 @@ describe('week-period', () => {
     const { current, count, startDate, endDate } = weekPeriod.previous();
     expect({ current, count, startDate, endDate }).toEqual({
       count: 7,
-      current: new CalendarDate(2020, 3, 22),
+      current: new CalendarDate(2020, 3, 27),
       startDate: new CalendarDate(2020, 3, 22),
       endDate: new CalendarDate(2020, 3, 28),
     });