@globalpayments/vega 2.13.1 → 2.15.0

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

@@ -0,0 +1,71 @@
+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 { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
+import { LogUtility } from '../../../../../utils/log';
+/** The `VegaCalendarEventController` class in TypeScript manages calendar events, initializes event layouts, retrieves events for the current date, and checks if a date falls within the range of a calendar event. */
+export class VegaCalendarEventController extends VegaSlimmer {
+  /**
+   * The function `getCurrentDateEvent` returns an array of calendar events for the current date, including both normal events and group events.
+   *
+   * @param {CalendarDate} date - The `date` parameter in the `getCurrentDateEvent` function is of type `CalendarDate`, which is used to represent a specific date with properties for year, month, and date.
+   * @returns {CalendarEvent[]} The `getCurrentDateEvent` function returns an array of `CalendarEvent` objects. It
+   * first retrieves all group events and normal events for the specified date, then filters out the
+   * events that are specific to the current day. Finally, it concatenates the current day events with
+   * the group events and returns the combined array.
+   */
+  getCurrentDateEvents(date) {
+    const allEvents = this.calendarEvents;
+    return allEvents.filter((item) => item.isCurrentDayEvent(date));
+  }
+  /**
+   * initial calendar events when component props events change
+   *
+   * @param {VegaCalendarRawEvent[]} newEvents new event options array
+   */
+  updateAfterEventChange(newEvents) {
+    this.initCalendarEvents(newEvents);
+  }
+  /**
+   * initial calendar events in first time
+   */
+  updateWhenComponentWillLoad() {
+    this.initCalendarEvents(this.events);
+  }
+  /**
+   * initial calendar events
+   *
+   * @param {VegaCalendarRawEvent[]} newEvents new event options array
+   */
+  initCalendarEvents(newEvents) {
+    const result = [];
+    if (newEvents) {
+      newEvents.forEach((item) => {
+        try {
+          const calendarEvent = new CalendarEvent(item);
+          result.push(calendarEvent);
+        }
+        catch (_a) {
+          LogUtility.warn('Invalid calendar event item:', item);
+        }
+      });
+    }
+    this.calendarEvents = result;
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventController.prototype, "calendarEvents", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "events", void 0);
+__decorate([
+  MapToComponentMethod('watchEventsChange')
+], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);

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

@@ -0,0 +1,74 @@
+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, MapToComponentMethod } from 'vega-slimmer/core';
+import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/pageResizeObserverSlimmer';
+import { debounce } from '../../../../../utils/timer';
+import { VegaCalendarEventItemRenderer } from '../renderers/vega-calendar-event-item-renderer';
+import changeManager from '../../../../../helpers/change-manager/changeManager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectFactory';
+import { VegaInternalCalendarMonthEventsChange } from '../../../../../helpers/event-manager/eventID/vegaInternalEventId';
+/** The `VegaCalendarEventResponsiveController` class extends `PageResizeObserverSlimmer` and updates the max display count of month events with debounce in a VegaCalendar component. */
+export class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
+  /**
+   * update the event view when the calendar layout update
+   */
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      target: /* istanbul ignore next */ () => this.host,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: /* istanbul ignore next */ () => this.updateMaxDisplayCountWithDebounce(),
+    });
+    this.updateMaxDisplayCountWithDebounce = debounce(this.updateMaxDisplayCount, 500, this);
+  }
+  /**
+   * Update the month event display items.
+   */
+  updateMaxDisplayCount() {
+    // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
+    try {
+      const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
+      if (this.viewMode === 'month' && eventContainerRef) {
+        const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
+        const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
+          VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);
+        changeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarMonthEventsChange), {
+          host: this.host,
+          detail: count,
+        });
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_a) { }
+  }
+  /**
+   * update the max display count when switch view mode
+   *
+   * @param {VegaCalendarViewModeType} viewMode new view mode value
+   */
+  updateMaxDisplayCountAfterSwitchToMonthView(viewMode) {
+    if (viewMode === 'month') {
+      this.updateMaxDisplayCountWithDebounce();
+    }
+  }
+}
+VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);

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

@@ -0,0 +1,78 @@
+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, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { DayViewGenerator, MonthViewGenerator, WeekViewGenerator, } from '../../../../../helpers/calendar';
+/** The `VegaCalendarViewController` class manages the calendar view based on the current period and view mode in TypeScript. */
+export class VegaCalendarViewController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.monthViewGenerator = new MonthViewGenerator();
+    this.weekViewGenerator = new WeekViewGenerator();
+    this.dayViewGenerator = new DayViewGenerator();
+  }
+  /**
+   * Update the view mode by param
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode string
+   */
+  setViewMode(viewMode) {
+    this.viewMode = viewMode;
+  }
+  /**
+   * set default calendar view
+   */
+  initialCalendarView() {
+    this.setCalendarView(this.getCalendarViewByViewMode());
+  }
+  /**
+   * generator new calendar view if the calendar current period changes
+   */
+  generateCalendarView() {
+    this.setCalendarView(this.getCalendarViewByViewMode());
+  }
+  /**
+   * The function `getCalendarViewByViewMode` returns a specific calendar view based on the current view mode.
+   *
+   * @returns {CalendarView} get the match calendar view by the view mode
+   */
+  getCalendarViewByViewMode() {
+    switch (this.viewMode) {
+      case 'week':
+        return this.weekViewGenerator.generate(this.currentPeriod);
+      case 'day':
+        return this.dayViewGenerator.generate(this.currentPeriod);
+      default:
+        return this.monthViewGenerator.generate(this.currentPeriod);
+    }
+  }
+  /**
+   * update the calendar view
+   *
+   * @param {CalendarView} newView new calendar view
+   */
+  setCalendarView(newView) {
+    this.calendarView = newView;
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarViewController.prototype, "calendarView", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarViewController.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarViewController.prototype, "initialCalendarView", null);
+__decorate([
+  MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarViewController.prototype, "generateCalendarView", null);

package/dist/collection/components/vega-calendar/slimmers/common/helpers/calendarEventSorter.js

@@ -0,0 +1,91 @@
+import { getTimeIndex } from '../../../utils';
+/** The VegaCalendarEventSorter class in TypeScript provides a sort method to sort an array of CalendarEvent objects. */
+export class VegaCalendarEventSorter {
+  /**
+   * The function "sort" takes an array of CalendarEvent objects and returns the same array without performing any sorting.
+   *
+   * @param {CalendarEvent[]} events - CalendarEvent[] - an array of CalendarEvent objects that need to be sorted.
+   * @param {number} currentViewIndex - The current index of the row
+   * @param {VegaCalendarFullDayEventLayout} fullDayEventLayout - The current row all long event layout
+   * @returns {Nullable<CalendarEvent>} The `sort` function is currently returning the input array of `CalendarEvent` objects as is, without performing any sorting operation.
+   */
+  sort(events, currentViewIndex, fullDayEventLayout) {
+    const allDayEvents = [];
+    const groupEvents = [];
+    const otherEvents = [];
+    for (let i = 0; i < events.length; i++) {
+      const currentEvent = events[i];
+      if (currentEvent) {
+        if (currentEvent.isGroupEvent()) {
+          groupEvents.push(currentEvent);
+        }
+        else if (currentEvent.isAllDayEvent) {
+          allDayEvents.push(currentEvent);
+        }
+        else {
+          otherEvents.push(currentEvent);
+        }
+      }
+    }
+    let result = allDayEvents.concat(this.sortCalendarEventByTime(otherEvents));
+    let currentViewOrderGroupEvents = fullDayEventLayout.getEventsByIndex(currentViewIndex);
+    const currentEvents = currentViewOrderGroupEvents.filter((item) => item);
+    result = groupEvents
+      .filter((groupEvent) => {
+      return currentEvents.findIndex((item) => item === groupEvent) < 0;
+    })
+      .concat(result);
+    if (currentViewOrderGroupEvents.length > currentEvents.length) {
+      const insertItems = result.slice(0, currentViewOrderGroupEvents.length - currentEvents.length);
+      result = result.slice(currentViewOrderGroupEvents.length - currentEvents.length);
+      currentViewOrderGroupEvents = this.insertEventsToEmptyPosition(currentViewOrderGroupEvents, insertItems);
+    }
+    result = currentViewOrderGroupEvents.concat(result);
+    return result;
+  }
+  /**
+   * The function `sortCalendarEventByTime` sorts an array of `CalendarEvent` objects based on their start and end times.
+   *
+   * @param {CalendarEvent[]} events - An array of CalendarEvent objects. Each CalendarEvent object contains information about a specific event, such as startTime and endTime.
+   * @returns {CalendarEvent[]} The `sortCalendarEventByTime` function is returning an array of `CalendarEvent` objects sorted by their start time and end time. The events are sorted in ascending order based on their start time, and if two events have the same start time, they are further sorted in descending order based on their end time.
+   */
+  sortCalendarEventByTime(events) {
+    return events.sort((eventA, eventB) => {
+      const eventAStartIndex = getTimeIndex(eventA.startTime);
+      const eventBStartIndex = getTimeIndex(eventB.startTime);
+      if (eventAStartIndex === eventBStartIndex) {
+        return getTimeIndex(eventB.endTime) - getTimeIndex(eventA.endTime);
+      }
+      else {
+        return eventAStartIndex - eventBStartIndex;
+      }
+    });
+  }
+  /**
+   * The function inserts events from a given array into empty positions in another array of events.
+   *
+   * @param {Nullable<CalendarEvent>[]} viewEvents - `viewEvents` is an array of nullable
+   * `CalendarEvent` objects representing the events currently displayed in the calendar view. Each
+   * element in the array can either be a `CalendarEvent` object or `null`.
+   * @param {CalendarEvent[]} events - The `events` parameter in the `insertEventsToEmptyPosition`
+   * function represents an array of `CalendarEvent` objects that need to be inserted into the
+   * `viewEvents` array at empty positions. The function iterates over the `viewEvents` array and
+   * inserts events from the `events` array
+   * @returns {CalendarEvent|null[]} The `insertEventsToEmptyPosition` function returns an array of `Nullable<CalendarEvent>`
+   * where events from the `events` array are inserted into empty positions in the `viewEvents` array.
+   * If there are no empty positions in `viewEvents`, the function returns the original `viewEvents`
+   * array.
+   */
+  insertEventsToEmptyPosition(viewEvents, events) {
+    return viewEvents.map((item) => {
+      if (events.length && !item) {
+        const insertItem = events[0];
+        events = events.slice(1);
+        return insertItem;
+      }
+      else {
+        return item;
+      }
+    });
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/baseEventLayout.js

@@ -0,0 +1,11 @@
+/** This TypeScript code snippet defines an abstract class `VegaCalendarBaseEventLayout` that serves as a base for event layout functionality in a calendar application. */
+export class VegaCalendarBaseEventLayout {
+  /**
+   * The function returns an array of VegaCalendarBaseEventLayoutCell objects.
+   *
+   * @returns {VegaCalendarBaseEventLayoutCell[]} An array of VegaCalendarLongEventLayoutRow objects is being returned.
+   */
+  get eventLayoutCells() {
+    return this.cells;
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/baseEventLayoutCell.js

@@ -0,0 +1,43 @@
+/** This code snippet is defining an abstract class named `VegaCalendarBaseEventLayoutCell`. Here's a breakdown of what it does: */
+export class VegaCalendarBaseEventLayoutCell {
+  /**
+   * This function retrieves a calendar event based on the slot index provided.
+   *
+   * @param {number} index - The `index` parameter is a number that represents the position of a slot in an array.
+   * @returns {CalendarEvent | null} The `getEventBySlotIndex` method is returning a `CalendarEvent` object from the `slots` array at the specified `index`.
+   */
+  getEventBySlotIndex(index) {
+    return this.slots[index];
+  }
+  /**
+   * The function `getEventStartIndex` returns the index of a given `CalendarEvent` object within an array of `CalendarEvent` objects.
+   *
+   * @param {CalendarEvent} eventItem - CalendarEvent
+   * @returns {number} The function `getEventStartIndex` returns the index of the `eventItem` within the `slots` array.
+   */
+  getEventStartIndex(eventItem) {
+    return this.slots.findIndex((item) => item === eventItem);
+  }
+  /**
+   * This TypeScript function calculates the end index of a calendar event within a specified range of slots.
+   *
+   * @param {CalendarEvent} eventItem - CalendarEvent - the event item for which we want to find the end index in the calendar.
+   * @returns {number} The `getEventEndIndex` function returns the index of the end of the calendar event in the `VegaCalendarLongEventLayoutRow.defaultSlots` array.
+   */
+  getEventEndIndex(eventItem) {
+    const startIndex = this.getEventStartIndex(eventItem);
+    let endIndex = startIndex;
+    if (startIndex >= 0) {
+      for (let i = startIndex + 1; i < this.slots.length; i++) {
+        if (this.slots[i] !== eventItem) {
+          endIndex = i - 1;
+          break;
+        }
+        else if (i === this.slots.length - 1) {
+          endIndex = i;
+        }
+      }
+    }
+    return endIndex;
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/baseEventLayoutGenerator.js

@@ -0,0 +1,23 @@
+/** This code snippet is defining an abstract class named `VegaCalendarBaseEventLayoutGenerator` in TypeScript. The class contains an abstract method `generate` that must be implemented by any class that extends `VegaCalendarBaseEventLayoutGenerator`. */
+export class VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function `addCurrentEventToLayout` adds a long event view to a layout row without overlapping with existing events.
+   *
+   * @param {VegaCalendarBaseEventLayoutCell[]} layoutCells - The `layoutCells` parameter is an array of
+   * `VegaCalendarBaseEventLayoutCell` objects. These objects represent rows in a layout where long events are displayed without overlapping each other.
+   * @param {unknown} input - The `currentView` parameter represents the current long event view that you want to add to the layout rows without overlapping with existing events. The function `addCurrentEventToLayoutRow` searches for a layout row that does not have any overlap with the current view. If such a row is found,
+   */
+  addCurrentEventToLayout(layoutCells, input) {
+    let noOverlapCell = layoutCells.find((layoutCell) => {
+      return !layoutCell.hasOverlapEvent(input);
+    });
+    if (!noOverlapCell) {
+      noOverlapCell = this.createNewLayoutCell();
+      noOverlapCell.updateSlots(input);
+      layoutCells.push(noOverlapCell);
+    }
+    else {
+      noOverlapCell.updateSlots(input);
+    }
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/fullDayEventLayout.js

@@ -0,0 +1,42 @@
+import { VegaCalendarBaseEventLayout } from './baseEventLayout';
+/** The VegaCalendarLongEventLayout class manages the layout of long events in a calendar by organizing them into rows. */
+export class VegaCalendarFullDayEventLayout extends VegaCalendarBaseEventLayout {
+  /**
+   * The constructor function initializes a VegaCalendarFullDayEventLayoutRow array in TypeScript.
+   *
+   * @param {VegaCalendarFullDayEventLayoutRow[]} rows - An array of VegaCalendarFullDayEventLayoutRow objects.
+   */
+  constructor(rows) {
+    super();
+    this.cells = rows;
+  }
+  /**
+   * This TypeScript function returns the index of a row containing a specific calendar event.
+   *
+   * @param {CalendarEvent} eventItem - The `eventItem` parameter is a `CalendarEvent` object that represents an event in a calendar.
+   * @returns {number} The function `getEventRowsIndex` returns the index of the row in the `rows` array where the `eventItem` is found based on the condition specified in the `findIndex` method.
+   */
+  getEventRowsIndex(eventItem) {
+    return this.cells.findIndex((row) => row.getEventStartIndex(eventItem) >= 0);
+  }
+  /**
+   * This function retrieves CalendarEvents from each row in a calendar layout based on a specified index.
+   *
+   * @param {number} index - The `index` parameter in the `getEventsByIndex` method is a number that
+   * represents the slot index for which you want to retrieve calendar events. The method iterates
+   * through each row in the `rows` array and retrieves the calendar event at the specified slot index from each row. The method
+   * @returns {(Nullable<CalendarEvent>)[]} An array of CalendarEvent objects is being returned.
+   */
+  getEventsByIndex(index) {
+    const result = [];
+    let lastItemIndex = 0;
+    this.cells.forEach((row, rowIndex) => {
+      const currentEvent = row.getEventBySlotIndex(index);
+      result.push(currentEvent);
+      if (currentEvent) {
+        lastItemIndex = rowIndex;
+      }
+    });
+    return result.slice(0, lastItemIndex + 1);
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/fullDayEventLayoutGenerator.js

@@ -0,0 +1,84 @@
+import { VegaCalendarBaseEventLayoutGenerator } from './baseEventLayoutGenerator';
+import { VegaCalendarFullDayEventLayout } from './fullDayEventLayout';
+import { VegaCalendarFullDayEventLayoutRow } from './fullDayEventLayoutRow';
+/** The `VegaCalendarLongEventLayoutGenerator` class in TypeScript generates a layout for long calendar events with overlapping prevention logic. */
+export class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayoutGenerator {
+  /**
+   * The function generates a long event layout for a calendar based on the input calendar events.
+   *
+   * @param {CalendarEvent[][]} calendarEvents - CalendarEvent[][] is a two-dimensional array where each
+   * element represents a day in the calendar and contains an array of CalendarEvent objects representing events on that day.
+   * @returns {VegaCalendarFullDayEventLayout} A new instance of `VegaCalendarFullDayEventLayout` is being returned, which is constructed
+   * using the `layoutRows` array containing `VegaCalendarFullDayEventLayoutRow` objects.
+   */
+  generate(calendarEvents) {
+    const allShouldOrderLongEvents = this.collectAllShouldOrderLongEvents(calendarEvents);
+    const layoutRows = [new VegaCalendarFullDayEventLayoutRow()];
+    allShouldOrderLongEvents.forEach((eventView) => {
+      this.addCurrentEventToLayout(layoutRows, eventView);
+    });
+    return new VegaCalendarFullDayEventLayout(layoutRows);
+  }
+  /**
+   * The function creates a new instance of VegaCalendarFullDayEventLayoutRow.
+   *
+   * @returns {VegaCalendarFullDayEventLayoutRow} An instance of the class `VegaCalendarFullDayEventLayoutRow` is being returned.
+   */
+  createNewLayoutCell() {
+    return new VegaCalendarFullDayEventLayoutRow();
+  }
+  /**
+   * Filter the all should order group event from event list
+   *
+   * @param {CalendarEvent[][]} allEvents all event list
+   * @returns {VegaCalendarFullDayEventView[]} the group event view list
+   */
+  collectAllShouldOrderLongEvents(allEvents) {
+    const allLongEventViews = {};
+    allEvents.forEach((items, index) => {
+      const longEvents = items.filter((item) => item && item.isGroupEvent());
+      longEvents.forEach((groupEvent) => {
+        if (!allLongEventViews[groupEvent.eventKey]) {
+          allLongEventViews[groupEvent.eventKey] = {
+            start: index,
+            end: index,
+            event: groupEvent,
+          };
+        }
+        else {
+          allLongEventViews[groupEvent.eventKey] = Object.assign(Object.assign({}, allLongEventViews[groupEvent.eventKey]), { end: index, start: index - allLongEventViews[groupEvent.eventKey].end !== 1
+              ? index
+              : allLongEventViews[groupEvent.eventKey].start });
+        }
+      });
+    });
+    const shouldSortLongEventViews = Object.values(allLongEventViews);
+    return this.sortLongEventViews(shouldSortLongEventViews);
+  }
+  /**
+   * This function sorts an array of VegaCalendarFullDayEventView objects based on their start and end times.
+   *
+   * @param {VegaCalendarFullDayEventView[]} eventViews - The `eventViews` parameter is an array of
+   * `VegaCalendarFullDayEventView` objects that represent long events in a calendar. The function
+   * `sortLongEventViews` takes this array as input and sorts it based on the start and end times of the events.
+   * @returns {VegaCalendarFullDayEventView[]} The function `sortLongEventViews` is returning an array of `VegaCalendarFullDayEventView`
+   * objects that have been sorted based on the comparison logic provided in the sorting function. The sorting is done based on the `start` and `end` properties of the objects in the array.
+   */
+  sortLongEventViews(eventViews) {
+    return eventViews.sort((itemA, itemB) => {
+      const { startDate: startA, endDate: endA } = itemA.event;
+      const { startDate: startB, endDate: endB } = itemB.event;
+      startA.setHours(0, 0, 0);
+      startB.setHours(0, 0, 0);
+      endA.setHours(23, 59, 59);
+      endB.setHours(23, 59, 59);
+      const num = endB.valueOf() - startB.valueOf() - (endA.valueOf() - startA.valueOf());
+      if (startA.valueOf() !== startB.valueOf()) {
+        return startA.valueOf() - startB.valueOf();
+      }
+      else {
+        return num;
+      }
+    });
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/layout/fullDayEventLayoutRow.js

@@ -0,0 +1,41 @@
+import { VegaCalendarBaseEventLayoutCell } from './baseEventLayoutCell';
+/** The `VegaCalendarLongEventLayoutRow` class in TypeScript manages the layout of long events in a calendar by updating slots and checking for overlaps. */
+export class VegaCalendarFullDayEventLayoutRow extends VegaCalendarBaseEventLayoutCell {
+  constructor() {
+    super(...arguments);
+    this.slots = VegaCalendarFullDayEventLayoutRow.defaultSlots;
+  }
+  /**
+   * The function `updateRowSlots` updates a row of slots in a calendar view with a long event.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `updateRowSlots` method is of type `VegaCalendarFullDayEventView`. It contains information about a long event in a
+   */
+  updateSlots(eventView) {
+    const { start, end } = eventView;
+    this.slots = this.slots
+      .slice(0, start)
+      .concat(Array(end - start + 1).fill(eventView.event), this.slots.slice(end + 1));
+  }
+  /**
+   * The function checks if a given event overlaps with existing events in a calendar view.
+   *
+   * @param {VegaCalendarFullDayEventView} eventView - The `eventView` parameter in the `hasOverlapEvent`
+   * function represents a view of a long event in a Vega calendar. It contains the `start` and `end`
+   * properties which specify the start and end times of the event. The function checks if there is any
+   * overlap with existing events in
+   * @returns {boolean} The function `hasOverlapEvent` returns a boolean value indicating whether there is an
+   * overlap in the slots between the start and end times of the given `VegaCalendarFullDayEventView` event.
+   */
+  hasOverlapEvent(eventView) {
+    const { start, end } = eventView;
+    let overlapFlag = false;
+    for (let i = start; i < end + 1; i++) {
+      if (this.slots[i]) {
+        overlapFlag = true;
+        break;
+      }
+    }
+    return overlapFlag;
+  }
+}
+VegaCalendarFullDayEventLayoutRow.defaultSlots = Array(7).fill(null);

package/dist/collection/components/vega-calendar/slimmers/common/layout/test/longEventLayoutGenerator.test.js

@@ -0,0 +1,99 @@
+import { CalendarEvent } from '../../../../../../helpers/calendar/calendar-event';
+import { VegaCalendarFullDayEventLayoutGenerator } from '../fullDayEventLayoutGenerator';
+const mockEvents1 = [
+  {
+    key: '0',
+    title: 'Event 0',
+    startDate: '07/08/2024',
+    endDate: '07/09/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/10/2024',
+    startTime: '10:00',
+    endTime: '10:15',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+    color: '#73E6DC',
+  },
+];
+const mockEvents2 = [
+  {
+    key: '0',
+    title: 'Event 0',
+    startDate: '07/08/2024',
+    endDate: '07/09/2024',
+    startTime: '10:00',
+    endTime: '11:00',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+  },
+  {
+    key: '2',
+    title: 'Event 2',
+    startDate: '07/09/2024',
+    endDate: '07/10/2024',
+    startTime: '10:30',
+    endTime: '11:30',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'secondary',
+    color: '#806BFF',
+  },
+];
+const mockEvent4 = [
+  {
+    key: '4',
+    title: 'Event 4',
+    startDate: '07/13/2024',
+    endDate: '07/15/2024',
+    startTime: '10:00',
+    endTime: '10:15',
+    isAllDay: false,
+    repeat: 'none',
+    disabled: false,
+    variant: 'primary',
+    color: '#73E6DC',
+  },
+];
+describe('VegaCalendarFullDayEventLayoutGenerator', () => {
+  it('VegaCalendarFullDayEventLayoutGenerator#generate', () => {
+    const generator = new VegaCalendarFullDayEventLayoutGenerator();
+    const calendarEvents = [
+      mockEvents1[0],
+      mockEvents1[1],
+      mockEvents2[1],
+      mockEvent4[0],
+    ].map((item) => {
+      return new CalendarEvent(item);
+    });
+    const calendarEventsList = [
+      [calendarEvents[0], calendarEvents[1]],
+      [calendarEvents[0], calendarEvents[2]],
+      [calendarEvents[1], calendarEvents[2]],
+      [],
+      [],
+      [calendarEvents[3]],
+      [calendarEvents[3]],
+    ];
+    const layout = generator.generate(calendarEventsList);
+    expect(layout.eventLayoutCells.length).toEqual(2);
+    expect(layout.getEventRowsIndex(calendarEventsList[0][0])).toEqual(0);
+    expect(layout.getEventsByIndex(0)).toEqual([calendarEventsList[0][0]]);
+    expect(layout.eventLayoutCells[0].getEventStartIndex(calendarEventsList[5][0])).toEqual(5);
+    expect(layout.eventLayoutCells[0].getEventEndIndex(calendarEventsList[5][0])).toEqual(6);
+  });
+});