@globalpayments/vega 2.64.0 → 2.66.0

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

@@ -9,10 +9,6 @@ import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { getDeviceType } from '../../../../utils/ui';
 import { DeviceType } from '../../../../types/ui.type';
 export class VegaBreadcrumbRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.isMobile = getDeviceType() === DeviceType.MOBILE;
-  }
   /**
    * get the component container div element
    *
@@ -24,14 +20,14 @@ export class VegaBreadcrumbRenderer extends VegaSlimmer {
   render() {
     return (h("div", { class: {
         'vega-breadcrumb': true,
-        'mobile': this.isMobile,
+        'compact-mode': this.isCompactMode,
         'collapsed': this.isCollapsed(),
-        'single': this.items.length == 1,
+        'single': this.items.length === 1,
       }, ref: (node) => (this.vegaBreadcrumbContainerRef = node) }, this.renderItems()));
   }
   renderItems() {
     const htmlItems = this.items.map((item, index) => this.itemRenderer.render(item, {
-      isMobile: this.isMobile,
+      isCompactMode: this.isCompactMode,
       isLastItem: this.items.length === index + 1,
     }));
     if (this.isCollapsed()) {
@@ -40,15 +36,23 @@ export class VegaBreadcrumbRenderer extends VegaSlimmer {
     return h(Fragment, null, htmlItems);
   }
   isCollapsed() {
-    return (!this.isMobile &&
+    return (!this.isCompactMode &&
       this.maxItems !== 'none' &&
       this.maxItems >= 4 &&
       this.items.length > this.maxItems);
   }
+  // True when device is mobile and compact mode is enabled.
+  // Used to switch into the compact single-item mobile rendering mode.
+  get isCompactMode() {
+    return this.compactOnMobile && getDeviceType() === DeviceType.MOBILE;
+  }
 }
 __decorate([
   MapToComponentField()
 ], VegaBreadcrumbRenderer.prototype, "items", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBreadcrumbRenderer.prototype, "compactOnMobile", void 0);
 __decorate([
   MapToComponentField()
 ], VegaBreadcrumbRenderer.prototype, "maxItems", void 0);

package/dist/collection/components/vega-breadcrumb/vega-breadcrumb.css

@@ -134,13 +134,13 @@
   text-decoration: none;
 }
 
-:host .vega-breadcrumb.mobile > .vega-breadcrumb-item {
+:host .vega-breadcrumb.compact-mode > .vega-breadcrumb-item {
   display: none;
 }
-:host .vega-breadcrumb.mobile .vega-breadcrumb-item:nth-last-child(2) {
+:host .vega-breadcrumb.compact-mode .vega-breadcrumb-item:nth-last-child(2) {
   display: flex;
 }
-:host .vega-breadcrumb.mobile.single .vega-breadcrumb-item {
+:host .vega-breadcrumb.compact-mode.single .vega-breadcrumb-item {
   display: flex;
   font-family: "Inter", sans-serif;
   font-size: 16px;
@@ -150,7 +150,7 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  :host .vega-breadcrumb.mobile.single .vega-breadcrumb-item {
+  :host .vega-breadcrumb.compact-mode.single .vega-breadcrumb-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -159,7 +159,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  :host .vega-breadcrumb.mobile.single .vega-breadcrumb-item {
+  :host .vega-breadcrumb.compact-mode.single .vega-breadcrumb-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -168,7 +168,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  :host .vega-breadcrumb.mobile.single .vega-breadcrumb-item {
+  :host .vega-breadcrumb.compact-mode.single .vega-breadcrumb-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;

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

@@ -49,6 +49,17 @@ export class VegaBreadcrumb {
      * @vegaVersion 1.41.0
      */
     this.items = [];
+    /**
+     * Compact mode toggle for mobile viewport.
+     *
+     * When `true` (default), the breadcrumb displays only the last clickable
+     * item on mobile devices to save horizontal space.
+     * When `false`, the full multi-item layout is shown on mobile, identical to
+     * desktop behavior (still subject to collapsing based on `maxItems`).
+     *
+     * @vegaVersion 2.66.0
+     */
+    this.compactOnMobile = true;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
@@ -111,6 +122,27 @@ export class VegaBreadcrumb {
         "text": "Represents the individual elements within the `vega-breadcrumb` component."
       },
       "defaultValue": "[]"
+    },
+    "compactOnMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.66.0"
+          }],
+        "text": "Compact mode toggle for mobile viewport.\n\nWhen `true` (default), the breadcrumb displays only the last clickable\nitem on mobile devices to save horizontal space.\nWhen `false`, the full multi-item layout is shown on mobile, identical to\ndesktop behavior (still subject to collapsing based on `maxItems`)."
+      },
+      "attribute": "compact-on-mobile",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get events() { return [{

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

@@ -8,7 +8,6 @@ import { Element, Component, Host, h, Prop, Event, State } from '@stencil/core';
 import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { sanitizeVegaComponent } from '../../utils/component';
 import ResponsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
-import { FORM_RESET, FORM_SUBMIT, } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../helpers/change-manager/change-manager';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
@@ -18,6 +17,9 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonLoadingRenderer } from './slimmers/renderers/vega-button-loading-renderer';
 import responsiveFormatFacade from '../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { findParent } from '../../utils/ui';
+import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.0.0
  */
@@ -109,7 +111,12 @@ export class VegaButton {
       }
       else {
         if (['submit', 'reset'].includes(this.type)) {
-          ChangeManager.notify(this.type === 'submit' ? FORM_SUBMIT : FORM_RESET, { host: this.host });
+          const outerForm = findParent(this.host, 'vega-form', {
+            outerMost: true,
+          });
+          if (outerForm) {
+            ChangeManager.notify(domNodeSubjectFactory.getSubject(outerForm, this.type === 'submit' ? VegaInternalFormSubmit : VegaInternalFormReset), { host: this.host });
+          }
         }
         this.clickEventEmitter.emit(undefined, e);
       }

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

@@ -8,13 +8,15 @@ import { Element, Component, Host, h, Prop, Event } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../utils/component';
 import { formatAndValidTextColor } from '../../utils/design-token';
 import ChangeManager from '../../helpers/change-manager/change-manager';
-import { FORM_RESET, FORM_SUBMIT, } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonCircleRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-circle/runtime-metrics-payload-definition';
+import { findParent } from '../../utils/ui';
+import domNodeSubjectFactory from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFormReset, VegaInternalFormSubmit, } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.0.2
  */
@@ -93,9 +95,12 @@ export class VegaButtonCircle {
       }
       else {
         if (['submit', 'reset'].includes(this.type)) {
-          ChangeManager.notify(this.type === 'submit' ? FORM_SUBMIT : FORM_RESET, {
-            host: this.host,
+          const outerForm = findParent(this.host, 'vega-form', {
+            outerMost: true,
           });
+          if (outerForm) {
+            ChangeManager.notify(domNodeSubjectFactory.getSubject(outerForm, this.type === 'submit' ? VegaInternalFormSubmit : VegaInternalFormReset), { host: this.host });
+          }
         }
         this.clickEventEmitter.emit(undefined, e);
       }

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-current-period-controller.js

@@ -26,14 +26,14 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   updateCalendarPeriod(viewMode, date) {
     switch (viewMode) {
       case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends, this.timezone));
         break;
       case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends, this.timezone));
         break;
       case 'day':
         date = this.showWeekends === false ? getClosestWorkday(date) : date;
-        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends));
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends, this.timezone));
         break;
     }
   }
@@ -42,7 +42,7 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
    * set default calendar view
    */
   initialCurrentPeriod() {
-    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date(), this.timezone));
   }
   /**
    * emit period change event
@@ -117,6 +117,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "timezone", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-event-controller.js

@@ -7,6 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
 import { LogUtility } from '../../../../../utils/log';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import { VegaInternalCalendarEventPreviewHide } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 /** The `VegaCalendarEventController` class in TypeScript manages calendar events, initializes event layouts, retrieves events for the current date, and checks if a date falls within the range of a calendar event. */
 export class VegaCalendarEventController extends VegaSlimmer {
   constructor() {
@@ -42,6 +45,17 @@ export class VegaCalendarEventController extends VegaSlimmer {
   updateWhenComponentWillLoad() {
     this.initCalendarEvents(this.events);
   }
+  /**
+   * Handle timezone changes by updating all calendar events
+   *
+   */
+  updateAfterTimezoneChange() {
+    if (this.calendarEvents.length > 0) {
+      this.calendarEvents.forEach((event) => event.updateTimezone(this.timezone));
+    }
+    ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), {});
+    this.repeatEventMap.clear();
+  }
   /**
    * initial calendar events
    *
@@ -52,7 +66,7 @@ export class VegaCalendarEventController extends VegaSlimmer {
     if (newEvents) {
       newEvents.forEach((item) => {
         try {
-          const calendarEvent = new CalendarEvent(item);
+          const calendarEvent = new CalendarEvent(item, undefined, this.timezone);
           result.push(calendarEvent);
         }
         catch (_a) {
@@ -119,9 +133,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "timezone", void 0);
 __decorate([
   MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarEventController.prototype, "updateAfterTimezoneChange", null);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-event-preivew-popover-controller.js

@@ -1,4 +1,10 @@
-import { VegaSlimmer } from 'vega-slimmer/core';
+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 { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 /** Event preview popover controller */
 export class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
   constructor() {
@@ -55,6 +61,14 @@ export class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
       }
     }
   }
+  /**
+   *  clear all preview container maps when timezone changes
+   *
+   */
+  clearAllPreviewContainers() {
+    this.singleEventPreviewContainerMap.clear();
+    this.groupEventsPreviewContainerMap.clear();
+  }
   /**
    * Generate a unique key for the given events
    *
@@ -81,3 +95,6 @@ export class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
     return `-${viewDate.year}-${viewDate.month}-${viewDate.date}`;
   }
 }
+__decorate([
+  MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarEventPreviewPopoverController.prototype, "clearAllPreviewContainers", null);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-post-operation-date-controller.js

@@ -38,6 +38,13 @@ export class VegaCalendarPostOperationDateController extends VegaSlimmer {
       }
     }
   }
+  /**
+   * Handle timezone changes by updating postOperationDate
+   *
+   */
+  updateAfterTimezoneChange() {
+    this.postOperationDate = CalendarDate.from(new Date(), this.timezone);
+  }
   /**
    * Check if the first date should be set
    * Both the new and old values are of the month type.
@@ -50,12 +57,18 @@ export class VegaCalendarPostOperationDateController extends VegaSlimmer {
   shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue) {
     return (newValue.type === 'month' &&
       (oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) === 'month' &&
-      !newValue.current.equal(CalendarDate.from(new Date())));
+      !newValue.current.equal(CalendarDate.from(new Date(), this.timezone)));
   }
 }
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarPostOperationDateController.prototype, "timezone", void 0);
 __decorate([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarPostOperationDateController.prototype, "setDate", null);
+__decorate([
+  MapToComponentMethod('watchTimezoneChange')
+], VegaCalendarPostOperationDateController.prototype, "updateAfterTimezoneChange", null);

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-repeat-pattern-factory.js

@@ -1,4 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
+import { getSystemTimezone } from '../../../../../../helpers/calendar/utils';
 import { CalendarEventDailyRepeatPattern } from './calendar-event-daily-repeat-pattern';
 import { CalendarEventMonthlyRepeatPattern } from './calendar-event-monthly-repeat-pattern';
 import { CalendarEventWeeklyRepeatPattern } from './calendar-event-weekly-repeat-pattern';
@@ -10,27 +11,25 @@ class CalendarEventRepeatPatternFactory {
    *
    * @param {Date} startDate repeat start date
    * @param {VegaCalendarEventRepeatOptions|undefined} repeatOptions repeat options
+   * @param {string} timezone The timezone identifier (e.g., America/New_York).
    * @returns {CalendarEventBaseRepeatPattern} the match repeat pattern
    */
-  getPattern(startDate, repeatOptions) {
+  getPattern(startDate, repeatOptions, timezone = getSystemTimezone()) {
     const repeatStartDate = CalendarDate.from(startDate);
     const { frequency, interval = 1, byWeekDay, until, count, } = repeatOptions;
-    const repeatEndDate = this.initDate(until);
+    const repeatEndDate = this.initDate(until, timezone);
     return this.initRepeatPattern(frequency, repeatStartDate, interval < 1 ? 1 : interval, count, repeatEndDate, byWeekDay);
   }
   /**
    * The `initDate` function initializes a `CalendarDate` object based on the input date string or Date object provided.
    *
    * @param {Nullable<string | Date>} date - The `date` parameter can be either a string or a Date object.
+   * @param {string} timezone The timezone identifier (e.g., 'America/New_York').
    * @returns {Nullable<CalendarDate>} The function `initDate` returns a `Nullable<CalendarDate>`, which means it can return either a `CalendarDate` object or `null`.
    */
-  initDate(date) {
-    if (date && typeof date === 'object') {
-      return CalendarDate.from(date);
-    }
-    else if (date && typeof date === 'string') {
-      const [month, day, year] = date.split('/');
-      return new CalendarDate(Number(year), Number(month), Number(day));
+  initDate(date, timezone) {
+    if (date) {
+      return CalendarDate.from(new Date(date), timezone);
     }
   }
   /**

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeat-pattern/calendar-event-weekly-repeat-pattern.js

@@ -128,7 +128,9 @@ export class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPat
       const days = index - currentWeekDayIndex;
       const { year, month, date } = this.repeatStartDate;
       const dateItem = CalendarDate.from(new Date(year, month - 1, date + days));
-      result.push(dateItem);
+      if (!this.until || dateItem.toDate() <= this.until.toDate()) {
+        result.push(dateItem);
+      }
     });
     this.cache = [result];
   }

package/dist/collection/components/vega-calendar/slimmers/common/helpers/test/calendar-event-repeat-pattern-factory.test.js

@@ -159,3 +159,37 @@ describe('calendarEventRepeatPatternFactory', () => {
     expect(pattern['cache'].length).toEqual(2);
   });
 });
+describe('calendarEventRepeatPatternFactory with timezone', () => {
+  const timezone1 = 'Etc/GMT+12';
+  const timezone2 = 'Pacific/Apia';
+  it('dailyPattern respects timezone and date', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, dailyRepeatOptions), { until: '02/01/2024' }), timezone1);
+    const pattern2 = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, monthlyRepeatOptions), { until: '02/01/2024' }), timezone2);
+    const result = pattern.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    const result2 = pattern2.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    const lastIndex1 = result.length - 1;
+    const lastIndex2 = result2.length - 1;
+    expect(result[lastIndex1].year).toEqual(2024);
+    expect(result[lastIndex1].month).toEqual(1);
+    expect(result[lastIndex1].date).toEqual(31);
+    expect(result2[lastIndex2].year).toEqual(2024);
+    expect(result2[lastIndex2].month).toEqual(2);
+    expect(result2[lastIndex2].date).toEqual(1);
+  });
+  it('weeklyPattern respects timezone and date', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, weeklyRepeatOptions), { until: '01/03/2024' }), timezone1);
+    const pattern2 = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, weeklyRepeatOptions), { until: '01/03/2024' }), timezone2);
+    const result = pattern.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    const result2 = pattern2.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    expect(result.length).toEqual(1);
+    expect(result2.length).toEqual(2);
+  });
+  it('monthlyPattern respects timezone and date', () => {
+    const pattern = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, monthlyRepeatOptions), { until: '02/01/2024' }), timezone1);
+    const pattern2 = calendarEventRepeatPatternFactory.getPattern(new Date(2024, 0, 1), Object.assign(Object.assign({}, monthlyRepeatOptions), { until: '02/01/2024' }), timezone2);
+    const result = pattern.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    const result2 = pattern2.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 1, 1)));
+    expect(result.length).toEqual(1);
+    expect(result2.length).toEqual(2);
+  });
+});

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-event-item-renderer.js

@@ -22,7 +22,7 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
   render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
-    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
+    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime}-${item.endTime}`, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => {
         this.handleEventClick(item);

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