@globalpayments/vega 2.64.0 → 2.65.0

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-marker-renderer.js

@@ -6,6 +6,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { LogUtility } from '../../../../../utils/log';
+import { getSystemTimezone } from '../../../../../helpers/calendar/utils';
 /**
  * Render a red line that representing the current time
  */
@@ -17,13 +19,13 @@ export class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
    * @returns {HTMLElement} the html element
    */
   render(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday(this.timezone)) >= 0;
     return (h("div", { class: {
         'time-marker-container': true,
         'hidden': !isVisible,
       } },
       h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return h("div", { key: item.date, class: { active: item.isToday() } });
+        return h("div", { key: item.date, class: { active: item.isToday(this.timezone) } });
       }))));
   }
   /**
@@ -61,6 +63,27 @@ export class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
   getTimeMarkerPosition() {
     const now = new Date();
     const minutesOneDay = 24 * 60;
+    if (this.timezone && this.timezone !== getSystemTimezone()) {
+      try {
+        const formatter = new Intl.DateTimeFormat([], {
+          timeZone: this.timezone,
+          hour: '2-digit',
+          minute: '2-digit',
+          hour12: false,
+        });
+        const parts = formatter.formatToParts(now);
+        const hourPart = parts.find((part) => part.type === 'hour');
+        const minutePart = parts.find((part) => part.type === 'minute');
+        if (hourPart !== undefined && minutePart !== undefined) {
+          const hours = parseInt(hourPart.value, 10);
+          const minutes = parseInt(minutePart.value, 10);
+          return ((hours * 60 + minutes) / minutesOneDay) * 100 + '%';
+        }
+      }
+      catch (_a) {
+        LogUtility.warn('Invalid timezone:', this.timezone);
+      }
+    }
     return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
   }
   /*
@@ -129,11 +152,11 @@ export class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
     const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
     if (calendarViewElement) {
       const fixedWeekHeader = calendarViewElement.querySelector('.calendar-view-title-container');
-      const weekHeaderHeight = fixedWeekHeader.offsetHeight;
-      const viewHeight = calendarViewElement.offsetHeight;
+      const weekHeaderHeight = fixedWeekHeader ? fixedWeekHeader.offsetHeight : 0;
+      const viewHeight = typeof calendarViewElement.offsetHeight === 'number' ? calendarViewElement.offsetHeight : 0;
       const displayViewHeight = Math.max(viewHeight - weekHeaderHeight, 0);
       const halfDisplayViewHeight = displayViewHeight / 2;
-      const viewScrollHeight = calendarViewElement.scrollHeight;
+      const viewScrollHeight = typeof calendarViewElement.scrollHeight === 'number' ? calendarViewElement.scrollHeight : 0;
       const emptySpace = 16;
       const timeMarkerTop = (Number(this.getTimeMarkerPosition().replace('%', '')) / 100) *
         Math.max(viewScrollHeight - emptySpace - weekHeaderHeight, 0);
@@ -150,6 +173,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.js

@@ -49,7 +49,7 @@ export class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRende
     return (h("div", { class: "calendar-view-title-container" },
       h("div", { class: "calendar-view-row" },
         h("div", { class: "time-line-empty" }),
-        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
+        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday(this.timezone) } },
           h("div", null, this.translationSlimmer.t(weekHead[index])),
           h("div", { class: "week-day" }, item.date)))))),
       h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
@@ -129,3 +129,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "enableDateClick", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timezone", void 0);

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -80,9 +80,11 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    */
   addMaxDisplayCountChange() {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
-      this.maxMonthDisplayEventsCount = payload.detail;
-      if (this.viewMode === 'month') {
-        forceUpdate(this.host);
+      if (this.maxMonthDisplayEventsCount !== payload.detail) {
+        this.maxMonthDisplayEventsCount = payload.detail;
+        if (this.viewMode === 'month') {
+          forceUpdate(this.host);
+        }
       }
     });
   }

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-view-renderer.js

@@ -59,7 +59,7 @@ export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer
         return (h("div", Object.assign({ class: {
             'row-cell border-divider-right': true,
             'current-month-day': item.compare(currentDate).inMonth,
-            'active': item.isToday(),
+            'active': item.isToday(this.timezone),
             'disabled': isDisabled,
           }, key: `${item.month}-${item.date}` }, renderProps),
           this.renderDateBlock(item),
@@ -148,3 +148,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "timezone", void 0);

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

@@ -35,6 +35,7 @@ import { VegaCalendarTimeMarkerRenderer } from './slimmers/day-view/renderers/ve
 import { VegaCalendarPostOperationDateController } from './slimmers/common/controllers/vega-calendar-post-operation-date-controller';
 import { VegaCalendarEventPreviewPopoverRenderer } from './slimmers/common/renderers/vega-calendar-event-preview-popover-renderer';
 import { VegaCalendarEventPreviewPopoverController } from './slimmers/common/controllers/vega-calendar-event-preivew-popover-controller';
+import { getSystemTimezone } from '../../helpers/calendar/utils';
 /**
  * @vegaVersion 2.14.0
  */
@@ -79,7 +80,7 @@ export class VegaCalendar {
      *
      * @type {CalendarDate}
      */
-    this.postOperationDate = CalendarDate.from(new Date());
+    this.postOperationDate = this.getInitialPostOperationDate();
     this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
@@ -138,6 +139,15 @@ export class VegaCalendar {
      * @vegaVersion 2.59.0
      */
     this.enabledEventPreview = true;
+    /**
+     * Specifies the IANA time zone or Etc/GMT±n format.
+     *  It accepts values such as "America/New_York" or "Etc/GMT+12".
+     *  If not set, the component defaults to the system's time zone.
+     *  For a complete list of IANA time zones, see Time Zone DB(https://timezonedb.com/time-zones).
+     *
+     * @vegaVersion 2.65.0
+     */
+    this.timezone = getSystemTimezone();
   }
   /**
    * Tracks changes to the current period state.
@@ -186,9 +196,21 @@ export class VegaCalendar {
   watchShowWeekendsChange() {
     methodPlaceholder();
   }
+  /**
+   * Monitors changes in the timezone prop for the calendar.
+   */
+  watchTimezoneChange() {
+    methodPlaceholder();
+  }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
   }
+  /**
+   * Get initial post operation date considering timezone
+   */
+  getInitialPostOperationDate() {
+    return CalendarDate.from(new Date(), this.timezone);
+  }
   static get is() { return "vega-calendar"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -430,6 +452,27 @@ export class VegaCalendar {
       "attribute": "enabled-event-preview",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "timezone": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.65.0"
+          }],
+        "text": "Specifies the IANA time zone or Etc/GMT\u00B1n format.\n It accepts values such as \"America/New_York\" or \"Etc/GMT+12\".\n If not set, the component defaults to the system's time zone.\n For a complete list of IANA time zones, see Time Zone DB(https://timezonedb.com/time-zones)."
+      },
+      "attribute": "timezone",
+      "reflect": false,
+      "defaultValue": "getSystemTimezone()"
     }
   }; }
   static get states() { return {
@@ -694,6 +737,9 @@ export class VegaCalendar {
     }, {
       "propName": "showWeekends",
       "methodName": "watchShowWeekendsChange"
+    }, {
+      "propName": "timezone",
+      "methodName": "watchTimezoneChange"
     }]; }
 }
 __decorate([

package/dist/collection/components/vega-date-picker/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -167,6 +167,19 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       this.refreshLitePicker();
     }
   }
+  watchIsDateDisabled() {
+    const dateItems = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
+    dateItems.forEach((item) => {
+      if (this.isDateDisabled(new Date(Number(item.dataset.time)))) {
+        this.setDisabledDayStyles(item);
+      }
+      else {
+        this.clearDisabledDayStyles(item);
+      }
+    });
+  }
   /**
    * The callback to handle [doOpen]{@link VegaDatePicker.doOpen}
    */
@@ -347,9 +360,7 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       .on('render:day', (node, date) => {
       const isDisabled = this.isDateDisabled(date.toJSDate());
       if (isDisabled) {
-        node.classList.add('is-locked');
-        node.classList.add('is-disabled');
-        node.tabIndex = -1;
+        this.setDisabledDayStyles(node);
       }
     })
       .on('mobilefriendly.show', 
@@ -373,6 +384,26 @@ export class VegaDatePickerCalendarRenderer extends VegaSlimmer {
       }
     });
   }
+  /**
+   * Applies styles to disable a specific day in the calendar.
+   *
+   * @param {HTMLElement} dayRef - The reference to the day element to be disabled.
+   */
+  setDisabledDayStyles(dayRef) {
+    dayRef.classList.add('is-locked');
+    dayRef.classList.add('is-disabled');
+    dayRef.tabIndex = -1;
+  }
+  /**
+   * Clears the styles applied to a day element that mark it as disabled.
+   *
+   * @param {HTMLElement} dayRef - The reference to the day element to be cleared of disabled styles.
+   */
+  clearDisabledDayStyles(dayRef) {
+    dayRef.classList.remove('is-locked');
+    dayRef.classList.remove('is-disabled');
+    dayRef.tabIndex = 0;
+  }
 }
 __decorate([
   MapToComponentField()
@@ -449,6 +480,9 @@ __decorate([
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaDatePickerCalendarRenderer.prototype, "componentDidRender", null);
+__decorate([
+  MapToComponentMethod('watchIsDateDisabled')
+], VegaDatePickerCalendarRenderer.prototype, "watchIsDateDisabled", null);
 __decorate([
   MapToComponentMethod('doOpen')
 ], VegaDatePickerCalendarRenderer.prototype, "doOpen", null);

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

@@ -262,6 +262,9 @@ export class VegaDatePicker {
   watchDisabled() {
     methodPlaceholder();
   }
+  watchIsDateDisabled() {
+    methodPlaceholder();
+  }
   /**
    * Invoke this method to close the calendar dropdown
    *    associated with the date picker.
@@ -925,6 +928,9 @@ export class VegaDatePicker {
     }, {
       "propName": "disabled",
       "methodName": "watchDisabled"
+    }, {
+      "propName": "isDateDisabled",
+      "methodName": "watchIsDateDisabled"
     }]; }
 }
 __decorate([

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

@@ -24,7 +24,7 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         'danger': this.danger && this.selectType === 'none',
       }, tabIndex: this.disabled ? -1 : 0, 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onClick: (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
+      onClick: this.disabled ? undefined : (e) => this.onSelect(e), onKeyDown: createEnterKeyHandlerToTriggerClick(), style: this.height > 0 && {
         height: `${this.height}px`,
         boxSizing: 'border-box',
         overflow: 'hidden',

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

@@ -20,11 +20,6 @@
   gap: 8px;
 }
 
-:host li:focus {
-  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
-  outline: 0;
-}
-
 :host li,
 :host li a {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
@@ -66,17 +61,18 @@
   }
 }
 
-:host li:hover {
+:host li:not(.vega-dropdown-item-disabled):hover {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
 }
 
-:host li:focus {
+:host li:not(.vega-dropdown-item-disabled):focus {
   background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  outline: 0;
 }
 
 :host li.vega-dropdown-item-disabled {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
-  pointer-events: none;
+  cursor: default;
 }
 
 :host li.vega-dropdown-item-disabled .item-prefix,

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

@@ -153,6 +153,7 @@ export class VegaDropdown {
     /**
      * Specifies the display rule for items in the dropdown.
      *
+     * @VegaWarning Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value.
      * @vegaVersion 1.13.0
      */
     this.itemDisplayRule = 'newline';
@@ -655,6 +656,9 @@ export class VegaDropdown {
       "optional": false,
       "docs": {
         "tags": [{
+            "name": "VegaWarning",
+            "text": "Specifies the display rule for items in the dropdown, only be active if matchTargetWidth is true or maxWidth has value."
+          }, {
             "name": "vegaVersion",
             "text": "1.13.0"
           }],