@globalpayments/vega 2.13.1 → 2.14.0

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

@@ -0,0 +1,99 @@
+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 { VegaCalendarFullDayEventLayoutGenerator } from '../layout/fullDayEventLayoutGenerator';
+import { VegaCalendarEventSorter } from '../helpers/calendarEventSorter';
+import { VegaCalendarEventItemRenderer } from './vega-calendar-event-item-renderer';
+/** This code snippet defines a TypeScript class `VegaCalendarFullDayEventLayoutRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+export class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.longEventLayoutGenerator = new VegaCalendarFullDayEventLayoutGenerator();
+    this.calendarEventSorter = new VegaCalendarEventSorter();
+  }
+  /**
+   * The function `sortLongEvents` sorts calendar events based on a fixed layout generated by `longEventLayoutGenerator`.
+   *
+   * @param {CalendarEvent[][]} calendarEvents - calendar current row all events
+   * @returns {Nullable<CalendarEvent>[][]} the events after sorter
+   */
+  sortLongEvents(calendarEvents) {
+    this.fullDayEventLayout = this.longEventLayoutGenerator.generate(calendarEvents);
+    return calendarEvents.map((items, index) => {
+      return this.calendarEventSorter.sort(items, index, this.fullDayEventLayout);
+    });
+  }
+  /**
+   * render the month view or week view long events
+   *
+   * @param {Nullable<CalendarEvent>[]} calendarEvents current events
+   * @param {currentViewIndex} currentViewIndex the current index of the row
+   * @returns {HTMLElement[]} event elements
+   */
+  render(calendarEvents, currentViewIndex) {
+    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, {
+          'month-event': this.viewMode === 'month',
+          'day-event': this.viewMode !== 'month',
+        })));
+      }
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-full-day-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * Get the current event layout style from the params
+   *
+   * @param {CalendarEvent} calendarEvent current event item
+   * @param {number} currentViewIndex the current date index of the row
+   * @param {number} itemIndex the current event index of the event array
+   * @param {number} offsetTop the default offset top for the event
+   * @returns {VegaCalendarEventStyle} layout style object
+   */
+  getEventStyle(calendarEvent, currentViewIndex, itemIndex, offsetTop) {
+    const cellCount = this.calendarView.weekdays.length;
+    const start = currentViewIndex;
+    let end = currentViewIndex + 1;
+    const top = itemIndex;
+    let visible = true;
+    const order = this.fullDayEventLayout.getEventRowsIndex(calendarEvent);
+    if (order >= 0) {
+      const startIndex = this.fullDayEventLayout.eventLayoutCells[order].getEventStartIndex(calendarEvent);
+      const endIndex = this.fullDayEventLayout.eventLayoutCells[order].getEventEndIndex(calendarEvent);
+      if (startIndex === currentViewIndex) {
+        end = endIndex + 1;
+      }
+      else {
+        visible = false;
+      }
+    }
+    return {
+      position: 'absolute',
+      left: `${(100 / cellCount) * start}%`,
+      top: `${top * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight + offsetTop}px`,
+      width: `${(100 / cellCount) * (end - start)}%`,
+      opacity: visible ? '1' : '0',
+    };
+  }
+}
+VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);

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

@@ -0,0 +1,27 @@
+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 { 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 {
+  /**
+   * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
+   *
+   * @returns {HTMLElement} An HTMLElement containing the rendered output of the switchPanelRenderer and viewRenderer components.
+   */
+  render() {
+    return (h(Fragment, null,
+      this.switchPanelRenderer.render(),
+      this.viewRenderer.render()));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarRenderer.prototype, "viewRenderer", void 0);

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

@@ -0,0 +1,150 @@
+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 { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
+import { VegaChange, VegaClick } from '../../../../../helpers/event-manager/eventID/vegaEventId';
+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';
+/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
+export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
+     *
+     * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
+     */
+    this.handleViewChange = (input) => {
+      this.calendarViewController.setViewMode(input.detail);
+    };
+    /**
+     * reset view content to today
+     */
+    this.todayButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.now());
+    };
+    /**
+     * update view content after click next button
+     */
+    this.nextButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.next());
+    };
+    /**
+     * update view content after click previous button
+     */
+    this.prevButtonClick = () => {
+      this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
+    };
+  }
+  /**
+   * get the switch panel container element
+   *
+   * @returns {HTMLElement} container element
+   */
+  getSwitchPanelRef() {
+    return this.switchPanelRef;
+  }
+  /**
+   * calendar switch panel with date switch, view switch, add new button, and more action components.
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
+      this.renderDateSwitch(),
+      h("div", { class: "calendar-view-switch-container" }, this.renderViewSwitch())));
+  }
+  /**
+   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
+   *
+   * @returns {HTMLDivElement} action button elements container.
+   */
+  renderDateSwitch() {
+    return (h("div", { class: "calendar-date-switch-container" },
+      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
+        } }, "Today"),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
+        } }),
+      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
+        } }),
+      this.renderCurrentPeriod()));
+  }
+  /**
+   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
+   *
+   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
+   */
+  renderCurrentPeriod() {
+    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
+  }
+  /**
+   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
+   *
+   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
+   */
+  renderViewSwitch() {
+    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views, size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
+      } }));
+  }
+  /**
+   * Get the view content date summary info, such as `January, 2024` or `10 January, 2024` or `28 December, 2023 - 3 January, 2024`
+   *
+   * @returns {string} string
+   */
+  getViewDateSummary() {
+    const currentDate = this.currentPeriod.current;
+    let result = '';
+    switch (this.viewMode) {
+      case 'day':
+        result = `${currentDate.date} ${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
+        break;
+      case 'week': {
+        const start = this.currentPeriod.startDate;
+        const end = this.currentPeriod.endDate;
+        result = `${start.date} ${getMonthName(start.toDate())}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${getMonthName(end.toDate())}, ${end.year}`;
+        break;
+      }
+      case 'month':
+        result = `${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
+        break;
+    }
+    return result;
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-right': chevronRight,
+    'chevron-left': chevronLeft,
+  });
+})();
+VegaCalendarSwitchPanelRenderer.views = [
+  { text: 'Day', key: 'day' },
+  { text: 'Week', key: 'week' },
+  { text: 'Month', key: 'month' },
+];
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);

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

@@ -0,0 +1,30 @@
+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';
+/** renders different views based on the specified view mode using month, week, and day view render. */
+export class VegaCalendarViewRenderer extends VegaSlimmer {
+  /**
+   * render the calendar month/week/day view
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
+      ? this.monthViewRenderer.render()
+      : this.viewWithTimeRenderer.render()));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);

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

@@ -0,0 +1,54 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { VegaCalendarEventItemRenderer } from '../../../common/renderers/vega-calendar-event-item-renderer';
+export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
+  /**
+   * render current preiod all day events
+   *
+   * @returns {HTMLElement} event element
+   */
+  render() {
+    const viewSource = this.calendarView.dateItems[0];
+    const events = viewSource.map((calendarDate) => {
+      return this.calendarEventController
+        .getCurrentDateEvents(calendarDate)
+        .filter((eventItem) => eventItem.isAllDayEvent || eventItem.isGroupEvent());
+    });
+    const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
+    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(orderEvents[index], index))))));
+  }
+  /**
+   * render current date all day events
+   *
+   * @param {Nullable<CalendarEvent>[]} events calendar events
+   * @param {number} currentViewIndex the current date index of the array
+   * @returns {HTMLVegaCalendarEventElement[]} event component array
+   */
+  renderCurrentFullDayEvents(events, currentViewIndex) {
+    const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
+    return (h(Fragment, null,
+      h("div", { class: "placeholder-block", style: { height: height + 'px' } },
+        h("span", null,
+          events.length,
+          " events")),
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex)));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);

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

@@ -0,0 +1,35 @@
+import { VegaCalendarBaseEventLayout } from '../../../../common/layout/baseEventLayout';
+/** This TypeScript class, VegaCalendarDayViewTimedEventLayout, manages the layout of events in a day view calendar. */
+export class VegaCalendarDayViewTimedEventLayout extends VegaCalendarBaseEventLayout {
+  /**
+   * The constructor function initializes the columns property with the provided array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayoutColumn[]} columns - An array of VegaCalendarDayViewTimedEventLayoutColumn objects.
+   */
+  constructor(columns) {
+    super();
+    this.cells = columns;
+  }
+  /**
+   * The function `getEventColumnsSpannedCount` calculates the number of columns spanned by a given calendar event in a day view layout.
+   *
+   * @param {CalendarEvent} eventItem - The `getEventColumnsSpannedCount` function takes a `CalendarEvent` object as the `eventItem` parameter. This function calculates the number of columns spanned by the given event within the calendar view.
+   * @returns {number} The function `getEventColumnsSpannedCount` returns the number of columns spanned by the given `eventItem` in the `VegaCalendarDayViewTimedEventLayoutColumn` array `columns`.
+   */
+  getEventColumnsSpannedCount(eventItem) {
+    const eventColumnIndex = this.cells.findIndex((column) => {
+      return column.getEventStartIndex(eventItem) >= 0;
+    });
+    let count = eventColumnIndex + 1;
+    if (eventColumnIndex < this.cells.length - 1) {
+      this.cells
+        .slice(eventColumnIndex + 1)
+        .forEach((column) => {
+        if (column.hasOverlapEvent(eventItem)) {
+          count++;
+        }
+      });
+    }
+    return count;
+  }
+}

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

@@ -0,0 +1,50 @@
+import { getTimeIndex } from '../../../../../utils';
+import { VegaCalendarBaseEventLayoutCell } from '../../../../common/layout/baseEventLayoutCell';
+/** The class `VegaCalendarDayViewEventLayoutColumn` manages the layout of events in a day view calendar by storing event slots and providing methods to interact with them. */
+export class VegaCalendarDayViewTimedEventLayoutColumn extends VegaCalendarBaseEventLayoutCell {
+  constructor() {
+    super(...arguments);
+    this.slots = VegaCalendarDayViewTimedEventLayoutColumn.defaultSlots;
+  }
+  /**
+   * The function `hasOverlapEvent` checks if a given calendar event overlaps with existing events in the calendar.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter in the `hasOverlapEvent` function represents a `CalendarEvent` object that contains information about an event such as its start time, end time, and possibly other details related to the event.
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an overlap in the calendar event slots. If there is an overlap, it returns `true`, otherwise it returns `false`.
+   */
+  hasOverlapEvent(eventItem) {
+    const [start, end] = this.getIndexRangeFromEvent(eventItem);
+    let overlapFlag = false;
+    for (let i = start; i < end; i++) {
+      if (this.slots[i]) {
+        overlapFlag = true;
+        break;
+      }
+    }
+    return overlapFlag;
+  }
+  /**
+   * The function `updateColumnSlots` updates the slots array by replacing a range of elements with a given event item.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   */
+  updateSlots(eventItem) {
+    const [start, end] = this.getIndexRangeFromEvent(eventItem);
+    if (end > start) {
+      this.slots = this.slots
+        .slice(0, start)
+        .concat(Array(end - start).fill(eventItem), this.slots.slice(end));
+    }
+  }
+  /**
+   * The function `getIndexRangeFromEvent` takes a `CalendarEvent` object and returns an array of time indices based on the start and end times of the event.
+   *
+   * @param {CalendarEvent} eventItem - A CalendarEvent object containing information about a specific event in a calendar, such as its start time and end time.
+   * @returns {number[]} An array of two numbers representing the index range of the start and end times of the given CalendarEvent.
+   */
+  getIndexRangeFromEvent(eventItem) {
+    const { startTime, endTime } = eventItem;
+    return [getTimeIndex(startTime), getTimeIndex(endTime)];
+  }
+}
+VegaCalendarDayViewTimedEventLayoutColumn.defaultSlots = Array(96).fill(null);

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

@@ -0,0 +1,29 @@
+import { VegaCalendarBaseEventLayoutGenerator } from '../../../../common/layout/baseEventLayoutGenerator';
+import { VegaCalendarDayViewTimedEventLayout } from './dayViewTimedEventLayout';
+import { VegaCalendarDayViewTimedEventLayoutColumn } from './dayViewTimedEventLayoutColumn';
+/** The `VegaCalendarDayViewEventLayoutGenerator` class in TypeScript generates a layout for calendar events in a day view. */
+export class VegaCalendarDayViewTimedEventLayoutGenerator extends VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function generates a layout for displaying calendar events in a day view.
+   *
+   * @param {CalendarEvent[]} calendarEvents - CalendarEvent[] - an array of calendar events containing information such as event title, start time, end time, and other relevant details.
+   * @returns {VegaCalendarDayViewTimedEventLayout} A `VegaCalendarDayViewTimedEventLayout` object is being returned, which is constructed using the `layoutColumns` array containing `VegaCalendarDayViewTimedEventLayoutColumn` objects.
+   */
+  generate(calendarEvents) {
+    const layoutColumns = [
+      new VegaCalendarDayViewTimedEventLayoutColumn(),
+    ];
+    calendarEvents.forEach((eventItem) => {
+      this.addCurrentEventToLayout(layoutColumns, eventItem);
+    });
+    return new VegaCalendarDayViewTimedEventLayout(layoutColumns);
+  }
+  /**
+   * The function creates a new instance of VegaCalendarDayViewTimedEventLayoutColumn.
+   *
+   * @returns {VegaCalendarDayViewTimedEventLayoutColumn} An instance of the class `VegaCalendarDayViewTimedEventLayoutColumn` is being returned.
+   */
+  createNewLayoutCell() {
+    return new VegaCalendarDayViewTimedEventLayoutColumn();
+  }
+}

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

@@ -0,0 +1,77 @@
+import { CalendarEvent } from '../../../../../../../../helpers/calendar/calendar-event';
+import { VegaCalendarDayViewTimedEventLayoutGenerator } from '../dayViewTimedEventLayoutGenerator';
+const mockEvents = [
+  {
+    key: '0',
+    title: 'Event 0',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:00',
+    endTime: '11:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+  },
+  {
+    key: '1',
+    title: 'Event 1',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:00',
+    endTime: '10:15',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+    color: '#73E6DC',
+  },
+  {
+    key: '2',
+    title: 'Event 2',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:30',
+    endTime: '11:30',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+  {
+    key: '3',
+    title: 'Event 3',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '10:45',
+    endTime: '11:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+  {
+    key: '4',
+    title: 'Event 4',
+    startDate: '07/08/2024',
+    endDate: '07/08/2024',
+    startTime: '11:00',
+    endTime: '12:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+];
+describe('VegaCalendarDayViewEventLayoutGenerator', () => {
+  it('VegaCalendarDayViewEventLayoutGenerator#generate', () => {
+    const generator = new VegaCalendarDayViewTimedEventLayoutGenerator();
+    const calendarEvents = mockEvents.map((item) => new CalendarEvent(item));
+    const layout = generator.generate(calendarEvents);
+    expect(layout.eventLayoutCells.length).toEqual(3);
+    expect(layout.getEventColumnsSpannedCount(calendarEvents[2])).toEqual(3);
+  });
+});

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

@@ -0,0 +1,70 @@
+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 `VegaCalendarDayViewEventLayoutRenderer` class in TypeScript React renders event layouts for a day view calendar. */
+export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
+  /**
+   * The `render` function in TypeScript React renders a layout of calendar events for a day view.
+   *
+   * @param {VegaCalendarDayViewTimedEventLayout} layout - The `layout` parameter in the `render` function is
+   * of type `VegaCalendarDayViewTimedEventLayout`, which contains information about the layout of events for
+   * 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) {
+    const layoutColumns = layout.eventLayoutCells;
+    const eventNodes = [];
+    layoutColumns.forEach((columns, index) => {
+      let renderEvent = columns.getEventBySlotIndex(0);
+      let start = 0;
+      for (let i = 0; i < VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells; i++) {
+        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, {
+              'day-event': true,
+              'bg-shadow': index > 0,
+            })));
+          }
+          renderEvent = currentEvent;
+          start = i;
+        }
+      }
+    });
+    return eventNodes;
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-render-timed-event-correct}
+   */
+  /* istanbul ignore next */
+  /**
+   * This function calculates and returns the style properties for positioning and sizing a calendar event within a grid layout.
+   *
+   * @param {number} startIndex - The `startIndex` parameter represents the index of the starting cell for the time event in the calendar grid.
+   * @param {number} endIndex - The `endIndex` parameter represents the index of the end position of the time event within a column. It indicates where the time event ends vertically within the column layout.
+   * @param {number} columnIndex - The `columnIndex` parameter represents the index of the column in which the event is being displayed. It is used to calculate the `left` position of the event element within the container based on the total number of columns spanned by the event.
+   * @param {number} columnsSpannedCount - The `columnsSpannedCount` parameter represents the number of columns spanned by the event in a calendar layout. It is used to calculate the left position of the event within the calendar grid.
+   * @returns {VegaCalendarEventStyle} The function `getTimeEventStyle` returns an object of type `VegaCalendarEventStyle` with properties for position, left, top, width, height, and zIndex.
+   */
+  getTimeEventStyle(startIndex, endIndex, columnIndex, columnsSpannedCount) {
+    const left = columnIndex * (1 / columnsSpannedCount);
+    return {
+      position: 'absolute',
+      left: `${left * 100}%`,
+      top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
+      width: `calc(100% - ${left * 100}%)`,
+      height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+    };
+  }
+}
+VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
+__decorate([
+  MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);