@globalpayments/vega 2.58.0 → 2.59.0

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

@@ -1,3 +1,4 @@
+import { VegaInternalTranslation } from '../../../../../../helpers/translation';
 /** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
 export class CalendarEventBaseRepeatPattern {
   /**
@@ -57,5 +58,20 @@ export class CalendarEventBaseRepeatPattern {
       (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
       (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
   }
+  /**
+   * The function generates a string representation of the end condition for a repeating event,
+   * 	either by a specific date or after a certain number of occurrences.
+   *
+   * @returns {string} a string representing the end condition of a repeating event.
+   */
+  generateRepeatEndsString() {
+    if (this.until) {
+      return ` ${VegaInternalTranslation.t('until {0}', `${this.until.getMonthName()} ${this.until.date}, ${this.until.year}`)}`;
+    }
+    else if (this.count) {
+      return ` ${VegaInternalTranslation.t('after {0} occurrences', this.count)}`;
+    }
+    return '';
+  }
 }
 CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;

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

@@ -1,4 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
 export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
@@ -20,6 +21,17 @@ export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPatt
     super(startDate, interval, count, until);
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} days', this.interval)
+      : VegaInternalTranslation.t('Repeat daily');
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * The function generates and caches repeated dates before a specified end date.
    *

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

@@ -1,4 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
 export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
@@ -23,6 +24,17 @@ export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPa
     this.byMonthDay = this.repeatStartDate.date;
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} months on day {1}', this.interval, this.byMonthDay)
+      : VegaInternalTranslation.t('Repeat monthly on day {0}', this.byMonthDay);
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * This function generates and caches repeated dates before a specified end date.
    *

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

@@ -1,4 +1,6 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
+import { WeekdayLongNames } from '../../../../../../helpers/calendar/utils';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation';
 import { flatNestedArray } from '../../../../../../utils/array';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */
@@ -40,6 +42,18 @@ export class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPat
       return this.isSeriesInPeriod(item, eventSpansDays, period);
     });
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const weekDays = this.byWeekDay.map((weekDay) => VegaInternalTranslation.t(WeekdayLongNames[weekDay]));
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} weeks on {1}', this.interval, weekDays.join(', '))
+      : VegaInternalTranslation.t('Repeat weekly on {0}', weekDays.join(', '));
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * This function generates repeated dates and caches them until a specified end date.
    *

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

@@ -1,4 +1,5 @@
 import { CalendarDate } from '../../../../../../helpers/calendar';
+import { VegaInternalTranslation } from '../../../../../../helpers/translation';
 import { CalendarEventBaseRepeatPattern } from './base-repeat-pattern';
 /** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
 export class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {
@@ -24,6 +25,18 @@ export class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPat
     this.matchMonth = this.repeatStartDate.month;
     this.initCache();
   }
+  /**
+   * Generate repeat display string.
+   *
+   * @returns {string} repeat display string
+   */
+  generateRepeatString() {
+    const monthName = VegaInternalTranslation.t(this.repeatStartDate.getMonthName());
+    const repeatString = this.interval > 1
+      ? VegaInternalTranslation.t('Repeat every {0} years on {1} {2}', this.interval, monthName, this.matchDay)
+      : VegaInternalTranslation.t('Repeat yearly on {0} {1}', monthName, this.matchDay);
+    return repeatString + this.generateRepeatEndsString();
+  }
   /**
    * The function generates repeat dates and caches them until reaching the specified end date.
    *

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

@@ -8,6 +8,9 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { getCalendarEventSlotName } from '../../../utils';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalCalendarEventPreviewUpdate } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 /** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
 export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   /**
@@ -15,12 +18,17 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
    *
    * @param {CalendarEvent} item the calendar event object
    * @param {Record<string,boolean>} classMap the class name map
+   * @param {CalendarDate} targetCalendarViewDate the target calendar view date
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
-  render(item, classMap) {
+  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(), 
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleEventClick(item) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+      onClick: () => {
+        this.handleEventClick(item);
+        this.enabledEventPreview &&
+          this.setupPreviewContainer(item, targetCalendarViewDate, isGroupEvent);
+      } }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
   }
   /**
    * emit vega click event
@@ -30,6 +38,37 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   handleEventClick(eventItem) {
     this.eventClickEmitter.emit({ rawEvent: eventItem.event });
   }
+  setupPreviewContainer(event, targetCalendarViewDate, isGroupEvent) {
+    const previewContainer = this.eventPreviewPopoverController.getEventPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
+    if (previewContainer) {
+      const preview = this.renderer.getEventPreviewRef();
+      if (isGroupEvent) {
+        preview.classList.remove('single-event-preview');
+        preview.classList.add('group-event-preview');
+      }
+      else {
+        preview.classList.remove('group-event-preview');
+        preview.classList.add('single-event-preview');
+      }
+      // Step 1: notify preview component to update data
+      ChangeManager.notify(DomNodeSubjectFactory.getSubject(preview, VegaInternalCalendarEventPreviewUpdate), {
+        event,
+        targetCalendarViewDate,
+        timeFormat: this.timeFormat,
+      });
+      // Step 2: append preview additional fields slot to preview component.
+      const additionalFieldsSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
+      additionalFieldsSlot && preview.append(additionalFieldsSlot);
+      // Step 3: append event slot to preview component.
+      const eventSlotName = getCalendarEventSlotName(event.event.key);
+      const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
+      const previewEventSlot = preview.querySelector(`[slot=${eventSlotName}]`);
+      // Since event slot is used by vega-calendar-event, we should clone it to avoid remove from original position.
+      eventSlot && !previewEventSlot && preview.append(eventSlot.cloneNode(true));
+      // Step 4: append preview component to popover container to display.
+      previewContainer.append(preview);
+    }
+  }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
 __decorate([
@@ -41,3 +80,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "timeFormat", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);

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

@@ -0,0 +1,68 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
+import { CALENDAR_EVENT_PREVIEW_POPOVER_HIDE } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.popoverHideObserver = null;
+  }
+  render(event, targetCalendarViewDate, classMap) {
+    return this.enabledEventPreview
+      ? this.renderPreviewPopover(event, classMap, targetCalendarViewDate)
+      : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
+  }
+  renderPreviewPopover(event, classMap, targetCalendarViewDate) {
+    return (h("vega-popover", { placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
+        'event-preview-popover': true,
+        'block': true,
+      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
+        this.setPopoverHideObserver(el, event);
+      } },
+      h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
+      h("div", { slot: "popover" },
+        h("div", { class: "preview-container", ref: (el) => {
+            el
+              ? this.eventPreviewPopoverController.setEventPreviewContainerMap(event, targetCalendarViewDate, el)
+              : this.eventPreviewPopoverController.deleteEventPreviewContainer(event, targetCalendarViewDate);
+          } }))));
+  }
+  setPopoverHideObserver(popover, event) {
+    if (popover) {
+      this.popoverHideObserver = new Observer((payload) => event === payload, async () => await popover.hide());
+      ChangeManager.register(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    else if (this.popoverHideObserver) {
+      ChangeManager.unregister(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+  }
+}
+VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "timeFormat", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-full-day-event-layout-renderer.js

@@ -35,12 +35,12 @@ export class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
    * @param {currentViewIndex} currentViewIndex the current index of the row
    * @returns {HTMLElement[]} event elements
    */
-  render(calendarEvents, currentViewIndex) {
+  render(calendarEvents, currentViewIndex, targetCalendarViewDate) {
     return calendarEvents.map((item, index) => {
       if (item) {
         return (h("div", { key: item.eventKey, class: this.viewMode === 'month' ? 'month-event-block' : 'day-event-block', style: this.getEventStyle(item, currentViewIndex, index, this.viewMode === 'month'
             ? VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop
-            : 0) }, this.eventItemRenderer.render(item, {
+            : 0) }, this.eventPreviewPopoverRenderer.render(item, targetCalendarViewDate, {
           'month-event': this.viewMode === 'month',
           'day-event': this.viewMode !== 'month',
         })));
@@ -97,3 +97,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);

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

@@ -8,6 +8,9 @@ import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 /** The `VegaCalendarRenderer` class in TypeScript React renders switch panel and view components for a calendar using VegaSlimmer. */
 export class VegaCalendarRenderer extends VegaSlimmer {
+  getEventPreviewRef() {
+    return this.eventPreviewRef;
+  }
   /**
    * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
    *
@@ -16,9 +19,15 @@ export class VegaCalendarRenderer extends VegaSlimmer {
   render() {
     return (h(Fragment, null,
       this.switchPanelRenderer.render(),
-      this.viewRenderer.render()));
+      this.viewRenderer.render(),
+      h("vega-calendar-event-preview", { ref: (el) => {
+          this.eventPreviewRef = el;
+        } })));
   }
 }
+__decorate([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.js

@@ -11,7 +11,6 @@ import { VegaChange, VegaClick, VegaDropdownClick, } from '../../../../../helper
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import chevronRight from '../../../../../global/icons/chevron-right';
 import chevronLeft from '../../../../../global/icons/chevron-left';
-import { getMonthName } from '../../../utils';
 import ellipsisVertical from '../../../icons/ellipsis-vertical';
 /** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
 export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
@@ -132,7 +131,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
     let result = '';
     switch (this.viewMode) {
       case 'day': {
-        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
         result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
         break;
       }
@@ -140,12 +139,12 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
         const weekItems = this.calendarView.dateItems[0];
         const start = weekItems[0];
         const end = weekItems[weekItems.length - 1];
-        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(getMonthName(item.toDate())));
+        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(item.getMonthName()));
         result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
         break;
       }
       case 'month': {
-        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
         result = `${monthName}, ${currentDate.year}`;
         break;
       }

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

@@ -23,7 +23,7 @@ export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
     });
     const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
     const displayEvents = this.filterDisplayEvents(orderEvents);
-    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index]))))));
+    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index], item))))));
   }
   /**
    * render current date all day events
@@ -33,7 +33,7 @@ export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
    * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
    * @returns {HTMLVegaCalendarEventElement[]} event component array
    */
-  renderCurrentFullDayEvents(events, currentViewIndex, allEvents) {
+  renderCurrentFullDayEvents(events, currentViewIndex, allEvents, targetCalendarViewDate) {
     const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
     const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
     return (h(Fragment, null,
@@ -41,7 +41,7 @@ export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
         h("span", null,
           events.length,
           " events")),
-      this.fullDayEventLayoutRenderer.render(events, currentViewIndex),
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex, targetCalendarViewDate),
       hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
   }
   /**

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer.js

@@ -16,7 +16,7 @@ export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
    * a day view in a calendar. It has properties like `eventLayoutColumns`, which is an array of `VegaCalendarDayViewEvent
    * @returns {HTMLElement[]} An array of HTMLElements representing the rendered event nodes based on the provided layout and event data.
    */
-  render(layout) {
+  render(layout, targetCalendarViewDate) {
     const layoutColumns = layout.eventLayoutCells;
     const eventNodes = [];
     layoutColumns.forEach((columns, index) => {
@@ -26,7 +26,7 @@ export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
         const currentEvent = columns.getEventBySlotIndex(i);
         if (currentEvent !== renderEvent) {
           if (renderEvent) {
-            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventItemRenderer.render(renderEvent, {
+            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventPreviewPopoverRenderer.render(renderEvent, targetCalendarViewDate, {
               'day-event': true,
               'bg-shadow': index > 0,
             })));
@@ -68,3 +68,6 @@ VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
 __decorate([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);

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

@@ -38,7 +38,7 @@ export class VegaCalendarTimedEventRenderer extends VegaSlimmer {
       .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
     const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
     const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
-    return this.dayViewEventLayoutRenderer.render(layout);
+    return this.dayViewEventLayoutRenderer.render(layout, date);
   }
 }
 __decorate([

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

@@ -6,15 +6,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { forceUpdate, h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { getMonthName } from '../../../utils';
 import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaInternalCalendarMonthEventsChange } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalCalendarEventPreviewClear, VegaInternalCalendarMonthEventsChange, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import { CALENDAR_EVENT_PREVIEW_POPOVER_HIDE } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { VegaPopoverHide } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 /** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
 export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.maxMonthDisplayEventsCount = 2;
+    this.popoverHideObserver = null;
   }
   /**
    * current row dates all events.
@@ -68,8 +73,8 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       .slice(displayEvents.length)
       .filter((item) => item).length;
     return (h("div", { class: "events-container", ref: (node) => (this.eventContainerRef = node) },
-      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex)),
-      this.renderMoreButton(allEvents, hiddenEventsLength, `${calendarDate.date} ${getMonthName(calendarDate.toDate())} ${calendarDate.year}`)));
+      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex, calendarDate)),
+      this.renderMoreButton(allEvents, hiddenEventsLength, calendarDate)));
   }
   /**
    * Add a month event display count change observer, than update the component
@@ -87,10 +92,10 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
    *
    * @param {Nullable<CalendarEvent>[]} events all event list array
    * @param {number} moreItemsLength popover events length
-   * @param {string} title the popover title
+   * @param {CalendarDate} calendarDate current date
    * @returns {Nullable<HTMLDivElement>} the more button or null
    */
-  renderMoreButton(events, moreItemsLength, title) {
+  renderMoreButton(events, moreItemsLength, calendarDate) {
     if (moreItemsLength) {
       const backgroundColorEvents = events.filter((eventItem) => {
         return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
@@ -99,24 +104,34 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
         return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
       });
       return (h("div", { class: "month-event-more" },
-        h("vega-popover", { trigger: "click", placement: "right" },
+        h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
+            this.setPopoverHideObserver(el, events);
+          }, isScreenPosition: true },
           h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
-          h("vega-flex", { slot: "popover", direction: "col", gap: "0" },
-            h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, title),
-            h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
-              return this.eventItemRenderer.render(item, {
-                'month-event': true,
-                'calendar-event-large-size': true,
-                'calendar-event-in-popover': true,
-              });
-            })),
-            otherEvents.map((item) => {
-              return this.eventItemRenderer.render(item, {
-                'month-event': true,
-                'calendar-event-large-size': true,
-                'calendar-event-in-popover': true,
-              });
-            })))));
+          h("vega-flex", { slot: "popover" },
+            h("vega-box", { padding: 'size-12', width: 256 },
+              h("vega-flex", { direction: "col", gap: "0", class: "group-events" },
+                h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, `${calendarDate.date} ${calendarDate.getMonthName()} ${calendarDate.year}`),
+                h("vega-box", { maxHeight: 'calc(60vh - 6px)', style: { overflowY: 'auto' }, padding: 'size-4' },
+                  h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
+                    return this.eventItemRenderer.render(item, {
+                      'month-event': true,
+                      'calendar-event-large-size': true,
+                      'calendar-event-in-popover': true,
+                    }, calendarDate, true);
+                  })),
+                  otherEvents.map((item) => {
+                    return this.eventItemRenderer.render(item, {
+                      'month-event': true,
+                      'calendar-event-large-size': true,
+                      'calendar-event-in-popover': true,
+                    }, calendarDate, true);
+                  })))),
+            h("div", { class: "preview-container", ref: (el) => {
+                el
+                  ? this.eventPreviewPopoverController.setEventPreviewContainerMap(events, calendarDate, el)
+                  : this.eventPreviewPopoverController.deleteEventPreviewContainer(events, calendarDate);
+              } })))));
     }
   }
   /*
@@ -160,6 +175,20 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     return rowEvents;
   }
+  setPopoverHideObserver(popover, events) {
+    if (popover) {
+      this.popoverHideObserver = new Observer((payload) => events.includes(payload), async () => await popover.hide());
+      ChangeManager.register(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    else if (this.popoverHideObserver) {
+      ChangeManager.unregister(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.popoverHideObserver);
+    }
+    // we should clear current event in vega-calendar-event-preview when popover hide
+    popover &&
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.renderer.getEventPreviewRef(), VegaInternalCalendarEventPreviewClear), {});
+      });
+  }
 }
 __decorate([
   MapToComponentField()
@@ -176,6 +205,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverController", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);

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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
-import { getMonthName } from '../../../utils';
 /** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
 export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
   /**
@@ -60,7 +59,7 @@ export class VegaCalendarMonthViewRenderer extends VegaSlimmer {
   renderDateBlock(item) {
     const isMonthFirstDay = item.date === 1;
     return (h("div", { class: "date" },
-      isMonthFirstDay && h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
+      isMonthFirstDay && h("div", { class: "month-block" }, item.getMonthName(true)),
       h("div", { role: "button", tabIndex: 0, class: "grid-col", 
         // eslint-disable-next-line react/jsx-no-bind
         onDblClick: (e) => this.goToCurrentDayView(e, item) }, item.date)));

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

@@ -1,19 +1,11 @@
 import { CalendarDate } from '../../../helpers/calendar';
+import stateBackgroundColorFormatter from '../../../helpers/formatter/state-formatter/state-background-color-formatter';
+import { isBackgroundColorTokenType } from '../../../types/type-guard';
 export var DateDirection;
 (function (DateDirection) {
   DateDirection["PREVIOUS"] = "-1";
   DateDirection["NEXT"] = "1";
 })(DateDirection || (DateDirection = {}));
-/**
- * get month name from the month number
- *
- * @param {Date} date the date object
- * @param {boolean} isShortName short or long name
- * @returns {string} the month English name
- */
-export function getMonthName(date, isShortName = false) {
-  return date.toLocaleDateString('en-US', { month: isShortName ? 'short' : 'long' });
-}
 /**
  * The function `getTimeIndex` calculates the index of a given time string based on a specified time unit.
  *
@@ -54,3 +46,17 @@ export function getClosestWorkday(date, direction = DateDirection.NEXT) {
   }
   return date;
 }
+/**
+ * Get event status background color.
+ *
+ * @param {Nullable<string | BackgroundColorsTokenType>} color the background color
+ * @returns {string} background color style string
+ */
+export function getEventStatusBgColorStyle(color = 'bg-accent6-primary') {
+  if (isBackgroundColorTokenType(color)) {
+    return `.event-bg-color{${stateBackgroundColorFormatter.formatToken(color)}}`;
+  }
+  else {
+    return `.event-bg-color{background-color:${color}}`;
+  }
+}