@globalpayments/vega 2.13.1 → 2.14.0

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

@@ -0,0 +1,52 @@
+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 { VegaCalendarDayViewTimedEventLayoutGenerator } from './layout/dayViewTimedEventLayoutGenerator';
+import { VegaCalendarEventSorter } from '../../../common/helpers/calendarEventSorter';
+/** The `VegaCalendarTimedEventRenderer` class in TypeScript React renders timed events for a calendar view based on the current day's events. timed events render for day view and week view */
+export class VegaCalendarTimedEventRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.calendarEventSorter = new VegaCalendarEventSorter();
+    this.dayViewTimedEventLayoutGenerator = new VegaCalendarDayViewTimedEventLayoutGenerator();
+  }
+  /**
+   * render current preiod normal events
+   *
+   * @returns {HTMLElement} events element
+   */
+  render() {
+    const viewSource = this.calendarView.dateItems[0];
+    return (h("div", { class: "day-event-container" }, viewSource.map((item) => {
+      return (h("div", { key: `${item.month}-${item.date}`, class: "day-event-col" }, this.renderTimedEvents(item)));
+    })));
+  }
+  /**
+   * render current day events
+   *
+   * @param {CalendarDate} date calendar Date
+   * @returns {HTMLElement[]} event elements
+   */
+  renderTimedEvents(date) {
+    const events = this.calendarEventController
+      .getCurrentDateEvents(date)
+      .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
+    const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
+    const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
+    return this.dayViewEventLayoutRenderer.render(layout);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);

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

@@ -0,0 +1,152 @@
+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, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { pad } from '../../../../../utils/date';
+/** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
+export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
+  /**
+   * takes an array of `CalendarDate` objects as input and returns an HTML element
+   *
+   * @param {CalendarDate[]} source
+   * @returns {HTMLElement} the html element
+   */
+  renderTimeMarker(source) {
+    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 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() } });
+      }))));
+  }
+  /**
+   * rendering the time line component as an HTML element
+   *
+   * @returns {HTMLElement} the html element
+   */
+  render() {
+    const timeLineSource = this.getTimeLineTitles();
+    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+      h("div", { class: "hour-empty" }),
+      timeLineSource.map((time, index) => {
+        return (h("div", { key: time },
+          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
+      })));
+  }
+  /**
+   * scroll to current time line block if change view mode to week or day
+   *
+   * @param {VegaCalendarViewModeType} viewMode the view mode
+   */
+  updateTimeLine(viewMode) {
+    this.scrollToTargetTimeBlock(viewMode);
+    this.syncTimeMarkerPosition(viewMode);
+  }
+  /**
+   * remove setInterval when component destroy
+   */
+  clearTimer() {
+    clearInterval(this.timeMarkerPositionTimer);
+  }
+  /**
+   * Add the time mark position update logic if the component add back to page
+   */
+  updateTimeLineIfComponentAddBack() {
+    this.syncTimeMarkerPosition(this.viewMode);
+  }
+  /**
+   * The function `getTimeMarkerPosition` calculates the position of the current time marker as a percentage of the day.
+   *
+   * @returns {string} a string representing the current time marker position as a percentage of the day.
+   */
+  getTimeMarkerPosition() {
+    const now = new Date();
+    const minutesOneDay = 24 * 60;
+    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
+  }
+  /**
+   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
+   *
+   * @returns {string[]} returns an array of strings representing the time line
+   */
+  getTimeLineTitles() {
+    const timeLine = [];
+    if (this.timeFormat === '12-hour') {
+      timeLine.push('12 AM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} AM`);
+      }
+      timeLine.push('12 PM');
+      for (let i = 1; i < 12; i++) {
+        timeLine.push(`${i} PM`);
+      }
+    }
+    else {
+      for (let i = 0; i < 24; i++) {
+        timeLine.push(pad(i));
+      }
+    }
+    return timeLine;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * Update the time marker position with the time
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  syncTimeMarkerPosition(viewMode) {
+    clearInterval(this.timeMarkerPositionTimer);
+    if (viewMode !== 'month') {
+      this.timeMarkerPositionTimer = setInterval(() => {
+        if (this.timeMarkerRef) {
+          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
+        }
+      }, 60 * 1000);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-scroll-to-current-time}
+   */
+  /* istanbul ignore next */
+  /**
+   * scroll the time line in to current view
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   */
+  scrollToTargetTimeBlock(viewMode) {
+    if (viewMode !== 'month') {
+      // add setTimeout here to make sure call the scroll into view after time line rendered.
+      setTimeout(() => {
+        var _a, _b;
+        const hour = new Date().getHours();
+        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
+      }, 0);
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);

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

@@ -0,0 +1,88 @@
+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';
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
+  /**
+   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
+   *
+   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
+   * specific day in the week. The content includes the title and the main content of the calendar view
+   * for that day.
+   */
+  render() {
+    return (h("div", { class: "calendar-view-container" },
+      this.renderViewTitle(),
+      this.renderViewContent()));
+  }
+  /**
+   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
+   *
+   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
+   */
+  renderViewTitle() {
+    const source = this.calendarView.dateItems[0];
+    const weekHead = this.calendarView.weekdays;
+    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", null, weekHead[index]),
+          h("div", { class: "week-day" }, item.date)))))),
+      h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
+        h("div", { class: "time-line-all" }, "All Day"),
+        this.dayViewFullDayEventRenderer.render())));
+  }
+  /**
+   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
+   */
+  renderViewContent() {
+    const source = this.calendarView.dateItems[0];
+    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
+      this.timeLineRenderer.render(),
+      h("div", { class: "calendar-view-content-container" },
+        h("div", { class: "calendar-view-content" }, source.map((item) => {
+          return (h("div", { class: "grid-col border-divider-left", key: item.date },
+            h("div", { class: "hour-empty border-divider-top" }),
+            this.renderHourBlock()));
+        })),
+        this.dayViewTimedEventRenderer.render(),
+        this.timeLineRenderer.renderTimeMarker(source))));
+  }
+  /**
+   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
+   *
+   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
+   */
+  renderHourBlock() {
+    const timeLineSource = Array(24).fill('');
+    return timeLineSource.map(() => {
+      return h("div", { class: "grid-cell border-divider-top" });
+    });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);

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

@@ -0,0 +1,177 @@
+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 { 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/domNodeSubjectObserverFactory';
+import { VegaInternalCalendarMonthEventsChange } from '../../../../../helpers/event-manager/eventID/vegaInternalEventId';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+/** 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;
+  }
+  /**
+   * current row dates all events.
+   *
+   * @param {CalendarDate[]} rowDate the current view date object
+   * @returns {(CalendarEvent|null)[][]} the current view events
+   */
+  getCurrentRowEvents(rowDate) {
+    const result = [];
+    rowDate.forEach((item) => {
+      const currentDateEvents = this.calendarEventController.getCurrentDateEvents(item);
+      result.push(currentDateEvents);
+    });
+    return this.fullDayEventLayoutRenderer.sortLongEvents(result);
+  }
+  /**
+   * The function filterRowDisplayEvents processes a 2D array of CalendarEvent objects to limit the number of events displayed per row.
+   *
+   * @param {(CalendarEvent|null)[][]} rowEvents - `rowEvents` is an array of arrays of `CalendarEvent` objects. Each inner array represents events for a specific row in a calendar display.
+   * @returns {(CalendarEvent|null)[][]} the current row should display events array
+   */
+  filterRowDisplayEvents(rowEvents) {
+    const result = [];
+    rowEvents.forEach((events) => {
+      const displayEvents = events.length > this.maxMonthDisplayEventsCount
+        ? events.slice(0, this.maxMonthDisplayEventsCount - 1)
+        : events;
+      result.push(displayEvents);
+    });
+    return this.hideTheCutOffEvents(rowEvents, result);
+  }
+  /**
+   * Get the month event container element ref
+   *
+   * @returns {HTMLDivElement} the container element
+   */
+  getMonthEventContainerRef() {
+    return this.eventContainerRef;
+  }
+  /**
+   * render the current date events
+   *
+   * @param {CalendarDate} calendarDate current day
+   * @param {Nullable<CalendarEvent>[]} allEvents current row events
+   * @param {Nullable<CalendarEvent>[]} displayEvents current row should display events
+   * @param {number} currentViewIndex current day index of week
+   * @returns {HTMLDivElement} the events container
+   */
+  render(calendarDate, allEvents, displayEvents, currentViewIndex) {
+    const hiddenEventsLength = allEvents
+      .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}`)));
+  }
+  /**
+   * Add a month event display count change observer, than update the component
+   */
+  addMaxDisplayCountChange() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
+      this.maxMonthDisplayEventsCount = payload.detail;
+      if (this.viewMode === 'month') {
+        forceUpdate(this.host);
+      }
+    });
+  }
+  /**
+   * Render the event more button if there is no enough space to display all event
+   *
+   * @param {Nullable<CalendarEvent>[]} events all event list array
+   * @param {number} moreItemsLength popover events length
+   * @param {string} title the popover title
+   * @returns {HTMLDivElement | null} the more button or null
+   */
+  renderMoreButton(events, moreItemsLength, title) {
+    if (moreItemsLength) {
+      const backgroundColorEvents = events.filter((eventItem) => {
+        return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
+      });
+      const otherEvents = events.filter((eventItem) => {
+        return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
+      });
+      return (h("div", { class: "month-event-more" },
+        h("vega-popover", { trigger: "click", placement: "right" },
+          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,
+              });
+            })),
+            otherEvents.map((item) => {
+              return this.eventItemRenderer.render(item, {
+                'month-event': true,
+                'calendar-event-large-size': true,
+              });
+            })))));
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-full-day-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * The `hideTheCutOffEvents` method in the `VegaCalendarMonthEventRenderer` class is responsible for removing any cut-off events from the displayed events in each row
+   *
+   * @param {Nullable<CalendarEvent>[][]} allEvents the all events
+   * @param {Nullable<CalendarEvent>[][]} rowEvents the display events
+   * @returns {Nullable<CalendarEvent>[][]} new event array
+   */
+  hideTheCutOffEvents(allEvents, rowEvents) {
+    const result = [];
+    const removeItems = [];
+    const shouldCheckEvents = rowEvents
+      .map((items) => items[items.length - 1])
+      .filter((item) => item && item.isGroupEvent());
+    if (shouldCheckEvents.length) {
+      shouldCheckEvents.forEach((checkItem) => {
+        if (allEvents.filter((items) => items.includes(checkItem)).length >
+          rowEvents.filter((items) => items.includes(checkItem)).length) {
+          removeItems.push(checkItem);
+        }
+      });
+    }
+    if (removeItems.length) {
+      rowEvents.forEach((items) => {
+        if (items.length && removeItems.includes(items[items.length - 1])) {
+          result.push(items.slice(0, items.length - 1));
+        }
+        else {
+          result.push(items);
+        }
+      });
+      return result;
+    }
+    return rowEvents;
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", 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

@@ -0,0 +1,73 @@
+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 { 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 {
+  /**
+   * the HTML elements that represent the month view of a calendar component.
+   *
+   * @returns {HTMLElement} the month view calendar content
+   */
+  render() {
+    const weekHead = this.calendarView.weekdays;
+    return (h("div", { class: "calendar-view-month-container" },
+      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title }, title)))),
+      this.renderMonthViewContent()));
+  }
+  /**
+   * generating the HTML elements that represent the content of the month view in a calendar component
+   *
+   * @returns {HTMLElement[]} month view content and event content
+   */
+  renderMonthViewContent() {
+    const monthSource = this.calendarView.dateItems;
+    const currentDate = this.currentPeriod.current;
+    return monthSource.map((dateArray, index) => {
+      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
+      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
+      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
+        return (h("div", { class: {
+            'row-cell border-divider-right': true,
+            'current-month-day': item.compare(currentDate).inMonth,
+            'active': item.isToday(),
+            'disabled': false,
+          }, key: `${item.month}-${item.date}` },
+          this.renderDateBlock(item),
+          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
+      })));
+    });
+  }
+  /**
+   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
+   *
+   * @param {CalendarDate} item the day object
+   * @returns {HTMLElement} the date block element
+   */
+  renderDateBlock(item) {
+    const isMonthFirstDay = item.date === 1;
+    return (h("div", { class: "date" },
+      isMonthFirstDay && h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
+      h("div", { role: "button", tabIndex: 0, class: "grid-col" }, item.date)));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);

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

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ * @param {string} timeString - A string representing a time in the format "HH:MM", where HH is the hour and MM is the minutes.
+ * @param {number} [unit=15] - The `unit` parameter in the `getTimeIndex` function is used to specify
+ * the interval in minutes for dividing the day. By default, it is set to 15 minutes, meaning that the
+ * day will be divided into 15-minute intervals.
+ * @returns {number} the index of the given time string based on the specified time unit.
+ */
+export function getTimeIndex(timeString, unit = 15) {
+  const [hour, minutes] = timeString.split(':');
+  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+}

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

@@ -0,0 +1,29 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { isBackgroundColorTokenType } from '../../../../../types/typeGuard';
+import stateBackgroundColorFormatter from '../../../../../helpers/formatter/state-formatter/stateBackgroundColorFormatter';
+/** The `VegaCalendarEventBgColorController` class in TypeScript provides methods to handle background color for calendar events based on a color map and custom color variables. */
+export class VegaCalendarEventBgColorController extends VegaSlimmer {
+  /**
+   * Get the background color css string from the background token or background color string
+   *
+   * @returns {string} css string
+   */
+  getBackgroundColorStyle() {
+    const color = this.calendarEvent.color || 'bg-accent6-primary';
+    if (isBackgroundColorTokenType(color)) {
+      return `.event-bg-color{${stateBackgroundColorFormatter.formatToken(color)}}`;
+    }
+    else {
+      return `.event-bg-color{background-color:${color}}`;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventBgColorController.prototype, "calendarEvent", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-event/slimmers/controllers/vega-calendar-event-title-max-height-controller.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { parsePixelStringToNumber } from '../../../../../utils/pixel';
+/**
+ * The `VegaCalendarTitleMaxHeightController` class in TypeScript sets the maximum height for
+ * a vertical title element based on its line height and current height.
+ */
+export class VegaCalendarTitleMaxHeightController extends VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-event-title-max-height-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * The function sets the maximum height of a vertical title element based on its line height and
+   * current height.
+   */
+  setVerticalTitleMaxHeight() {
+    const title = this.renderer.getEventTitleContainerRef();
+    if (title && title.classList.contains('title-word-wrap')) {
+      const styles = window.getComputedStyle(title);
+      const height = parsePixelStringToNumber(styles.height);
+      const lineHeight = parsePixelStringToNumber(styles.lineHeight);
+      // We need to ensure that at least one line is displayed
+      const maxLines = Math.max(Math.floor(height / lineHeight), 1);
+      title.style.maxHeight = `${maxLines * lineHeight}px`;
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarTitleMaxHeightController.prototype, "renderer", void 0);

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

@@ -0,0 +1,28 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField } from 'vega-slimmer/core';
+import { SubStateObserverSlimmer } from '../../../../../helpers/slimmers/sub-state/subStateObserverSlimmer';
+/** The `VegaCalendarEventSubStateController` class in TypeScript initializes a calendar with specified subStates. */
+export class VegaCalendarEventSubStateController extends SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a calendar with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-calendar',
+      subStates: [
+        {
+          subStateName: 'timeFormat',
+          parentStateName: 'timeFormat',
+        },
+      ],
+    });
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSubStateController.prototype, "timeFormat", void 0);