@globalpayments/vega 2.13.1 → 2.15.0

package/dist/cjs/vega-calendar_2.cjs.entry.js

@@ -0,0 +1,2927 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-1299d729.js');
+const component = require('./component-c3bbaf20.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-fdb2a041.js');
+const componentUsageRuntimeMetrics = require('./componentUsageRuntimeMetrics-1a2a592d.js');
+const domNodeSubjectObserverFactory = require('./domNodeSubjectObserverFactory-2bbdec29.js');
+const vegaEventId = require('./vegaEventId-d7774262.js');
+const internalIconManager = require('./internal-icon-manager-b21347bf.js');
+const date = require('./date-b62fe96f.js');
+const eventEmitSlimmer = require('./eventEmitSlimmer-ea57144a.js');
+const childNodesEventPreventSlimmer = require('./childNodesEventPreventSlimmer-5b352793.js');
+const vegaInternalEventId = require('./vegaInternalEventId-173c4941.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const misc = require('./misc-0197689b.js');
+const pageResizeObserverSlimmer = require('./pageResizeObserverSlimmer-8d417925.js');
+const timer = require('./timer-5f33058b.js');
+const changeManager = require('./changeManager-7c13d64f.js');
+const subStateObserverSlimmer = require('./subStateObserverSlimmer-48ad20a1.js');
+const typeGuard = require('./typeGuard-b1a74545.js');
+const stateBackgroundColorFormatter = require('./stateBackgroundColorFormatter-96a26ee7.js');
+const pixel = require('./pixel-98f2a10c.js');
+require('./iconManager-a9c2209d.js');
+require('./dynamic-slimmer-d5ea4204.js');
+require('./internalVegaEventManager-543c20cb.js');
+require('./breakpoints-cb3291ba.js');
+require('./ui-077fc009.js');
+require('./ui-fa68545a.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+
+var __decorate$l = (undefined && undefined.__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;
+};
+/** The `VegaCalendarRenderer` class in TypeScript React renders switch panel and view components for a calendar using VegaSlimmer. */
+class VegaCalendarRenderer extends globalSlimmerRegistry.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 (index.h(index.Fragment, null,
+      this.switchPanelRenderer.render(),
+      this.viewRenderer.render()));
+  }
+}
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
+
+const chevronRight = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+};
+
+const chevronLeft = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+};
+
+/**
+ * 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
+ */
+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.
+ */
+function getTimeIndex(timeString, unit = 15) {
+  const [hour, minutes] = timeString.split(':');
+  return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
+}
+
+var __decorate$k = (undefined && undefined.__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;
+};
+/** The `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
+class VegaCalendarSwitchPanelRenderer extends globalSlimmerRegistry.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 (index.h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
+      this.renderDateSwitch(),
+      index.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 (index.h("div", { class: "calendar-date-switch-container" },
+      index.h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, vegaEventId.VegaClick, this.todayButtonClick);
+        } }, "Today"),
+      index.h("vega-button-circle", { variant: "secondary", size: "small", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, vegaEventId.VegaClick, this.prevButtonClick);
+        } }),
+      index.h("vega-button-circle", { variant: "secondary", size: "small", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, vegaEventId.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 (index.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 (index.h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views, size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, vegaEventId.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;
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'chevron-right': chevronRight,
+    'chevron-left': chevronLeft,
+  });
+})();
+VegaCalendarSwitchPanelRenderer.views = [
+  { text: 'Day', key: 'day' },
+  { text: 'Week', key: 'week' },
+  { text: 'Month', key: 'month' },
+];
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
+
+var __decorate$j = (undefined && undefined.__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;
+};
+/** renders different views based on the specified view mode using month, week, and day view render. */
+class VegaCalendarViewRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * render the calendar month/week/day view
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (index.h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
+      ? this.monthViewRenderer.render()
+      : this.viewWithTimeRenderer.render()));
+  }
+}
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
+
+var __decorate$i = (undefined && undefined.__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;
+};
+/** 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. */
+class VegaCalendarMonthViewRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: "calendar-view-month-container" },
+      index.h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (index.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$1) => {
+      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
+      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
+      return (index.h("div", { key: index$1, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
+        return (index.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 (index.h("div", { class: "date" },
+      isMonthFirstDay && index.h("div", { class: "month-block" }, getMonthName(item.toDate(), true)),
+      index.h("div", { role: "button", tabIndex: 0, class: "grid-col" }, item.date)));
+  }
+}
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "calendarViewController", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
+
+var __decorate$h = (undefined && undefined.__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;
+};
+/** The `VegaCalendarViewWithTimeRenderer` class in TypeScript React renders a day view for a calendar component with title, content, and hour blocks. */
+class VegaCalendarViewWithTimeRenderer extends globalSlimmerRegistry.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 (index.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 (index.h("div", { class: "calendar-view-title-container" },
+      index.h("div", { class: "calendar-view-row" },
+        index.h("div", { class: "time-line-empty" }),
+        index.h("div", { class: "calendar-view-title" }, source.map((item, index$1) => (index.h("div", { key: item.date, class: { active: item.isToday() } },
+          index.h("div", null, weekHead[index$1]),
+          index.h("div", { class: "week-day" }, item.date)))))),
+      index.h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
+        index.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 (index.h("div", { class: "calendar-view-row calendar-view-day-container" },
+      this.timeLineRenderer.render(),
+      index.h("div", { class: "calendar-view-content-container" },
+        index.h("div", { class: "calendar-view-content" }, source.map((item) => {
+          return (index.h("div", { class: "grid-col border-divider-left", key: item.date },
+            index.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 index.h("div", { class: "grid-cell border-divider-top" });
+    });
+  }
+}
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
+
+var __decorate$g = (undefined && undefined.__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;
+};
+/** 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. */
+class VegaCalendarTimeLineRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      index.h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return index.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 (index.h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+      index.h("div", { class: "hour-empty" }),
+      timeLineSource.map((time, index$1) => {
+        return (index.h("div", { key: time },
+          index.h("div", { class: "time-text", "data-time": index$1 === 0 ? 24 : index$1 }, 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(date.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$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+
+/**
+ * Get a week days array
+ *
+ * @param {number} firstWeekDay - The first week day (0: Sunday, 1: Monday, ...)
+ * @returns {number[]} - The week days array
+ */
+const getWeekdays = (firstWeekDay = 0) => {
+  const weekdays = [0, 1, 2, 3, 4, 5, 6];
+  return weekdays.concat(weekdays).slice(firstWeekDay, firstWeekDay + 7);
+};
+
+/**
+ * Calendar view generator abstract class.
+ */
+class CalendarViewGenerator {
+  constructor() {
+    this.WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    this.weekdays = getWeekdays();
+  }
+  /**
+   * Get weekday names.
+   *
+   * @returns {string[]} - The weekday strings
+   */
+  getWeekdayNames() {
+    return this.WEEKDAYS_SHORT;
+  }
+  /**
+   * Generate calendar dates
+   *
+   * @param {CalendarPeriod} period - The calendar period
+   * @returns {Date[]} - The date result
+   */
+  generateDates(period) {
+    const cursor = period.startDate.toDate();
+    const dates = [];
+    for (let i = 0; i < period.count; i++) {
+      dates.push(new Date(cursor));
+      cursor.setDate(cursor.getDate() + 1);
+    }
+    return dates;
+  }
+  /**
+   * Generate calendar head
+   *
+   * @returns {string[]} - The data of week head
+   */
+  generateWeekHead() {
+    return this.weekdays.map((day) => this.getWeekdayNames()[day]);
+  }
+}
+
+/**
+ * Calendar view
+ */
+class CalendarView {
+  constructor(weekdays, dateItems) {
+    this._weekdays = weekdays;
+    this._dateItems = dateItems;
+  }
+  /**
+   * The week head of the calendar view
+   *
+   * @type {string[]}
+   */
+  get weekdays() {
+    return this._weekdays;
+  }
+  /**
+   * The date items of the calendar view
+   *
+   * @type {CalendarDate[][]}
+   */
+  get dateItems() {
+    return this._dateItems;
+  }
+}
+
+/**
+ * Day view calendar generator
+ */
+class DayViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    return new CalendarView([this.generateWeekHead()[period.current.toDate().getDay()]], [[period.current]]);
+  }
+}
+
+/**
+ * Calendar date class
+ */
+class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
+  }
+  /**
+   * Create a calendar date from a Date object
+   *
+   * @param {Date} date - The Date object
+   * @returns {CalendarDate} - Return a CalendarDate object
+   */
+  static from(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  /**
+   * The year of the calendar date
+   *
+   * @type {number}
+   */
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
+  }
+  /**
+   * The month of the calendar date
+   *
+   * @type {number}
+   */
+  get month() {
+    return this._month;
+  }
+  set month(value) {
+    this._month = value;
+  }
+  /**
+   * The date of the calendar date
+   *
+   * @type {number}
+   */
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
+  }
+  /**
+   * Verify whether the calendar date is today
+   *
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   */
+  isToday() {
+    const today = new Date();
+    return (today.getFullYear() === this.year &&
+      today.getMonth() + 1 === this.month &&
+      today.getDate() === this.date);
+  }
+  /**
+   * Convert the calendar date to a Date object
+   *
+   * @returns {Date} - Return a Date object
+   */
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
+  }
+  /**
+   * Compare with another calendar date
+   *
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
+   */
+  compare(date) {
+    const { year, month } = date;
+    const result = {
+      isPreviousMonth: false,
+      inMonth: false,
+      isNextMonth: false,
+    };
+    if (this.year === year) {
+      if (this.month < month) {
+        result.isPreviousMonth = true;
+      }
+      else if (this.month > month) {
+        result.isNextMonth = true;
+      }
+      else {
+        result.inMonth = true;
+      }
+    }
+    else if (this.year > year) {
+      result.isNextMonth = true;
+    }
+    else {
+      result.isPreviousMonth = true;
+    }
+    return result;
+  }
+}
+
+/**
+ * Calendar week view generator
+ */
+class WeekViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const dates = this.generateDates(period);
+    return new CalendarView(this.generateWeekHead(), [dates.map(CalendarDate.from)]);
+  }
+}
+
+/**
+ * Calendar month view generator
+ */
+class MonthViewGenerator extends CalendarViewGenerator {
+  /**
+   * @inheritDoc
+   */
+  generate(period) {
+    const calendarDates = [];
+    let week = [];
+    const dates = this.generateDates(period);
+    dates.forEach((date, i) => {
+      if (!(i % 7)) {
+        calendarDates[i / 7] = week = [];
+      }
+      const item = CalendarDate.from(date);
+      week.push(item);
+    });
+    return new CalendarView(this.generateWeekHead(), calendarDates);
+  }
+}
+
+/**
+ * CalendarPeriod is an abstract class that represents a period of date for calendar.
+ */
+class CalendarPeriod {
+  constructor(count, current) {
+    this._count = count;
+    this._current = current ? current : CalendarDate.from(new Date());
+    this.calculatePeriod(this._current);
+  }
+  /**
+   * The current date of the period.
+   *
+   * @type {CalendarDate}
+   */
+  get current() {
+    return this._current;
+  }
+  /**
+   * The start date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get startDate() {
+    return this._startDate;
+  }
+  /**
+   * The end date of the period
+   *
+   * @type {CalendarDate}
+   */
+  get endDate() {
+    return this._endDate;
+  }
+  /**
+   * The count of the period
+   *
+   * @type {number}
+   */
+  get count() {
+    return this._count;
+  }
+  /**
+   * Go to a specific date.
+   *
+   * @param {CalendarDate} date - The date to go to.
+   * @returns {this} - The current period.
+   */
+  goTo(date) {
+    return this.createBy(date);
+  }
+  /**
+   * Go to now.
+   *
+   * @returns {this} - The current period.
+   */
+  now() {
+    return this.createBy(CalendarDate.from(new Date()));
+  }
+  /**
+   * Calculate the period start date and end date.
+   *
+   * @param {CalendarDate} date - The date to calculate the period from.
+   */
+  calculatePeriod(date) {
+    const cursor = date.toDate();
+    if (this.count > 1) {
+      cursor.setDate(cursor.getDate() - getWeekdays().indexOf(cursor.getDay()));
+    }
+    this._startDate = CalendarDate.from(cursor);
+    cursor.setDate(cursor.getDate() + this.count - 1);
+    this._endDate = CalendarDate.from(cursor);
+  }
+}
+
+/**
+ * Period of day.
+ */
+class DayPeriod extends CalendarPeriod {
+  constructor(current) {
+    super(DayPeriod.DISPLAY_DATE_COUNT, current);
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextDate = this.current.toDate();
+    nextDate.setDate(nextDate.getDate() + 1);
+    return this.createBy(CalendarDate.from(nextDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousDate = this.current.toDate();
+    previousDate.setDate(previousDate.getDate() - 1);
+    return this.createBy(CalendarDate.from(previousDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new DayPeriod(current);
+  }
+}
+DayPeriod.DISPLAY_DATE_COUNT = 1;
+
+/**
+ * Period of the week
+ */
+class WeekPeriod extends CalendarPeriod {
+  constructor(current) {
+    super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const nextWeekStartDate = this.current.toDate();
+    nextWeekStartDate.setDate(nextWeekStartDate.getDate() - getWeekdays().indexOf(nextWeekStartDate.getDay()) + 7);
+    return this.createBy(CalendarDate.from(nextWeekStartDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previousWeekStartDate = this.current.toDate();
+    previousWeekStartDate.setDate(previousWeekStartDate.getDate() - getWeekdays().indexOf(previousWeekStartDate.getDay()) - 7);
+    return this.createBy(CalendarDate.from(previousWeekStartDate));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new WeekPeriod(current);
+  }
+}
+WeekPeriod.DISPLAY_DATE_COUNT = 7;
+
+/**
+ * Period of month
+ */
+class MonthPeriod extends CalendarPeriod {
+  constructor(current) {
+    const date = current || CalendarDate.from(new Date());
+    const firstDayOfMonth = new CalendarDate(date.year, date.month, 1);
+    super(MonthPeriod.DISPLAY_DATE_COUNT, firstDayOfMonth);
+  }
+  /**
+   * @inheritDoc
+   */
+  next() {
+    const next = this.current.toDate();
+    next.setMonth(next.getMonth() + 1);
+    return this.createBy(CalendarDate.from(next));
+  }
+  /**
+   * @inheritDoc
+   */
+  previous() {
+    const previous = this.current.toDate();
+    previous.setMonth(previous.getMonth() - 1);
+    return this.createBy(CalendarDate.from(previous));
+  }
+  /**
+   * @inheritDoc
+   */
+  createBy(current) {
+    return new MonthPeriod(current);
+  }
+}
+MonthPeriod.DISPLAY_DATE_COUNT = 6 * 7;
+
+var __decorate$f = (undefined && undefined.__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;
+};
+/** The `VegaCalendarViewController` class manages the calendar view based on the current period and view mode in TypeScript. */
+class VegaCalendarViewController extends globalSlimmerRegistry.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$f([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaCalendarViewController.prototype, "calendarView", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaCalendarViewController.prototype, "viewMode", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaCalendarViewController.prototype, "initialCalendarView", null);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarViewController.prototype, "generateCalendarView", null);
+
+var __decorate$e = (undefined && undefined.__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;
+};
+/** This TypeScript class `VegaCalendarCurrentPeriodController` updates the current period based on the view mode in a calendar component. */
+class VegaCalendarCurrentPeriodController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * set new current period
+   *
+   * @param {CalendarPeriod} newPeriod new value
+   */
+  setCurrentPeriod(newPeriod) {
+    this.currentPeriod = newPeriod;
+  }
+  /**
+   * default current period is month period, re-create period if the default view mode is not month
+   * set default calendar view
+   */
+  initialCurrentPeriod() {
+    this.initCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+  }
+  /**
+   * emit period change event
+   */
+  emitChangeEvent() {
+    this.changeEventEmitter.emit({
+      viewMode: this.viewMode,
+      currentPeriod: this.getCurrentPeriodSummary(),
+    });
+  }
+  /**
+   * update the current period when view mode change
+   *
+   * @param {VegaCalendarViewModeType} viewMode new view mode value
+   */
+  updateCurrentPeriodByViewMode(viewMode) {
+    this.initCalendarPeriod(viewMode, this.currentPeriod.current);
+  }
+  /**
+   * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
+   *
+   * @returns {VegaCalendarChangeEventType['currentPeriod']} An array of objects containing the date, month, and year properties of the currentPeriod's
+   * start date and end date.
+   */
+  getCurrentPeriodSummary() {
+    const { current, startDate, endDate } = this.currentPeriod;
+    return {
+      year: current.year,
+      month: current.month,
+      startDate: {
+        date: startDate.date,
+        month: startDate.month,
+        year: startDate.year,
+      },
+      endDate: {
+        date: endDate.date,
+        month: endDate.month,
+        year: endDate.year,
+      },
+    };
+  }
+  /**
+   * set new current period by the view mode and the current date
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @param {CalendarDate} date current date
+   */
+  initCalendarPeriod(viewMode, date) {
+    switch (viewMode) {
+      case 'month':
+        this.setCurrentPeriod(new MonthPeriod(date));
+        break;
+      case 'week':
+        this.setCurrentPeriod(new WeekPeriod(date));
+        break;
+      case 'day':
+        this.setCurrentPeriod(new DayPeriod(date));
+        break;
+    }
+  }
+}
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
+], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
+], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
+
+var __decorate$d = (undefined && undefined.__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;
+};
+/** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: "events-container", ref: (node) => (this.eventContainerRef = node) },
+      index.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalCalendarMonthEventsChange, (payload) => {
+      this.maxMonthDisplayEventsCount = payload.detail;
+      if (this.viewMode === 'month') {
+        index.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 (index.h("div", { class: "month-event-more" },
+        index.h("vega-popover", { trigger: "click", placement: "right" },
+          index.h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
+          index.h("vega-flex", { slot: "popover", direction: "col", gap: "0" },
+            index.h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, title),
+            index.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$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
+
+const CalendarDateFormatReg = /^\d{1,2}\/\d{1,2}\/\d{4}/;
+const CalendarTimeFormatReg = /^\d{1,2}:\d{1,2}/;
+/** The `CalendarEvent` class in TypeScript represents a calendar event with methods to validate required fields, initialize dates and times, and determine if it is a group event. */
+class CalendarEvent {
+  /**
+   * The constructor initializes a VegaCalendarRawEvent object and performs validation checks on required fields.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter in the constructor
+   * represents the raw event data for a Vega calendar event. It contains information such as the event
+   * title, start and end dates, location, description, and any other relevant details about the event.
+   */
+  constructor(eventOptions) {
+    this._event = eventOptions;
+    this._eventKey = misc.generateUUID();
+    this.checkEventRequireField(eventOptions);
+    this.initDate(eventOptions);
+  }
+  /**
+   * The function returns the raw event data for a VegaCalendar event.
+   *
+   * @returns {VegaCalendarRawEvent} The `get event()` method is returning a `VegaCalendarRawEvent` object, which is stored in the `_event` property.
+   */
+  get event() {
+    return this._event;
+  }
+  /**
+   * This function returns the key of an event in TypeScript.
+   *
+   * @returns {string} event key
+   */
+  get eventKey() {
+    return this._eventKey;
+  }
+  /**
+   * This function returns the title of an event in TypeScript.
+   *
+   * @returns {string} The title of the event.
+   */
+  get title() {
+    return this._event.title;
+  }
+  /**
+   * This function returns the disabled of an event in TypeScript.
+   *
+   * @returns {boolean} The disabled of the event.
+   */
+  get disabled() {
+    return !!this._event.disabled;
+  }
+  /**
+   * This function returns the variant of an event in TypeScript.
+   *
+   * @returns {VegaCalendarEventVariantType|null} The variant of the event.
+   */
+  get variant() {
+    return this._event.variant;
+  }
+  /**
+   * This function returns the color of an event in TypeScript.
+   *
+   * @returns {string|null} The color of the event.
+   */
+  get color() {
+    return this._event.color;
+  }
+  /**
+   * The function isAllDayEvent returns a boolean value indicating whether the event is an all-day event.
+   *
+   * @returns {boolean} The method `isAllDayEvent()` is returning a boolean value indicating whether the event is an all-day event or not. It returns `true` if the event is an all-day event, and `false` if it is not.
+   */
+  get isAllDayEvent() {
+    return !!this._event.isAllDay;
+  }
+  /**
+   * The function isRepeatEvent returns a boolean value based on whether the event's repeat property is not equal to 'none'.
+   *
+   * @returns {boolean} The method `isRepeatEvent` returns a boolean value indicating whether the `_event` has a repeat value other than 'none'.
+   */
+  get isRepeatEvent() {
+    return this._event.repeat !== 'none';
+  }
+  /**
+   * The function returns the start date property of an object.
+   *
+   * @returns {Date} The `startDate` property of type `Date` is being returned.
+   */
+  get startDate() {
+    return this._startDate;
+  }
+  /**
+   * The function returns the end date property of an object.
+   *
+   * @returns {Date} The `endDate` property of type `Date` is being returned.
+   */
+  get endDate() {
+    return this._endDate;
+  }
+  /**
+   * This function returns the start time as a string.
+   *
+   * @returns {string} The `_startTime` property, which is a string, is being returned.
+   */
+  get startTime() {
+    return this._startTime;
+  }
+  /**
+   * This function returns the end time as a string.
+   *
+   * @returns {string} The `_endTime` property, which is a string, is being returned.
+   */
+  get endTime() {
+    return this._endTime;
+  }
+  /**
+   * Check the event is a group event or not
+   *
+   * @returns {boolean} true or false
+   */
+  isGroupEvent() {
+    const { year: startYear, month: startMonth, date: startDay, } = CalendarDate.from(this.startDate);
+    const { year: endYear, month: endMonth, date: endDay, } = CalendarDate.from(this.endDate);
+    return (!(startYear === endYear && startMonth === endMonth && startDay === endDay) &&
+      this._event.repeat !== 'daily');
+  }
+  /**
+   * This TypeScript function checks if a given date falls within the range of a calendar event based on its start and end dates, considering different repeat types like daily, weekly, monthly, and yearly.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * check if it falls within the range of the `calendarEvent`. It is of type `CalendarDate`.
+   * @returns {boolean} a boolean value, either `true` or `false`, based on whether the `calendarEvent` falls on the `date` provided.
+   */
+  isCurrentDayEvent(date) {
+    const { startDate, endDate } = this;
+    const startCalendarDate = CalendarDate.from(startDate);
+    const endCalendarDate = CalendarDate.from(new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1));
+    const repeat = this._event.repeat;
+    const currentDate = date.toDate();
+    if (startCalendarDate.toDate() <= currentDate) {
+      switch (repeat) {
+        case 'daily':
+          return true;
+        case 'weekly':
+          return currentDate.getDay() === startDate.getDay();
+        case 'monthly':
+          return date.date === startCalendarDate.date;
+        case 'yearly':
+          return date.month === startCalendarDate.month && date.date === startCalendarDate.date;
+        default:
+          return endCalendarDate.toDate() > currentDate;
+      }
+    }
+    return false;
+  }
+  /**
+   * Get the number of minutes the event lasted
+   *
+   * @returns {number} the minutes
+   */
+  getEventDuration() {
+    const [startHour, startMinutes] = this.startTime.split(':');
+    const [endHour, endMinutes] = this.endTime.split(':');
+    const now = CalendarDate.from(new Date());
+    const startDate = new Date(now.year, now.month, now.date, Number(startHour), Number(startMinutes));
+    const endDate = new Date(now.year, now.month, now.date, Number(endHour) === 0 && Number(startHour) !== 0 ? 24 : Number(endHour), Number(endMinutes));
+    return (endDate.valueOf() - startDate.valueOf()) / (60 * 1000);
+  }
+  /**
+   * The function `convertTimeTo24Hour` converts a time string from 12-hour format to 24-hour format in TypeScript.
+   *
+   * @param {string} timeString - The `convertTimeTo24Hour` function you provided is used to convert a
+   * time string from 12-hour format to 24-hour format. The function checks if the input time string is
+   * in 12-hour format and contains either 'am' or 'pm'.
+   * @returns {string} The `convertTimeTo24Hour` function returns a string representing the input time string
+   * converted to 24-hour format. If the input time string is in 12-hour format and contains 'am' or
+   * 'pm', it converts it to 24-hour format. If the input time string is not in 12-hour format or does
+   * not contain 'am' or 'pm', it returns the original input
+   */
+  convertTimeTo24Hour(timeString) {
+    timeString = timeString.toLocaleLowerCase();
+    if (timeString.indexOf('am') > 0 || timeString.indexOf('pm') > 0) {
+      if (timeString.indexOf('am') > 0) {
+        timeString = timeString.replace('am', '').trim();
+        const [hour, minutes] = timeString.split(':');
+        return `${hour === '12' ? '00' : hour}:${minutes}`;
+      }
+      else {
+        timeString = timeString.replace('pm', '').trim();
+        const [hour, minutes] = timeString.split(':');
+        return `${hour === '12' ? '12' : Number(hour) + 12}:${minutes}`;
+      }
+    }
+    return timeString;
+  }
+  /**
+   * The function `checkEventRequireField` validates the required fields of a calendar event item in TypeScript.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter is an object of type
+   * `VegaCalendarRawEvent` that contains information about a calendar event
+   */
+  checkEventRequireField(eventOptions) {
+    const { title, startDate, endDate, startTime, endTime } = eventOptions;
+    if ((startDate && typeof startDate === 'string' && !CalendarDateFormatReg.test(startDate)) ||
+      (endDate && typeof endDate === 'string' && !CalendarDateFormatReg.test(endDate))) {
+      throw new Error('Invalid calendar event item, the date format should be MM/DD/YYYY!');
+    }
+    if ((startTime && typeof startTime === 'string' && !CalendarTimeFormatReg.test(startTime)) ||
+      (endTime && typeof endTime === 'string' && !CalendarTimeFormatReg.test(endTime))) {
+      throw new Error('Invalid calendar event item, the time format should be HH:mm!');
+    }
+    if (!title || !startDate || (!endDate && !endTime)) {
+      throw new Error('Invalid calendar event item, the required field should not empty!');
+    }
+  }
+  /**
+   * The `initDate` function in TypeScript initializes start and end dates and times for a calendar event based on the provided options.
+   *
+   * @param {VegaCalendarRawEvent} eventOptions - The `initDate` method you provided is used to
+   * initialize the start and end dates for a calendar event based on the options provided in the
+   * `eventOptions` object. The `eventOptions` object contains properties such as `startDate`,
+   * `startTime`, `endDate`, and `endTime` which are used
+   */
+  initDate(eventOptions) {
+    const { startDate, startTime, endDate, endTime } = eventOptions;
+    if (startDate && typeof startDate === 'object') {
+      this._startDate = startDate;
+    }
+    else if (startDate && typeof startDate === 'string') {
+      const [month, day, year] = startDate.split('/');
+      this._startDate = new Date(Number(year), Number(month) - 1, Number(day));
+    }
+    if (!startTime) {
+      this._startTime = `${this._startDate.getHours()}:${this._startDate.getMinutes()}`;
+    }
+    else {
+      this._startTime = this.convertTimeTo24Hour(startTime);
+    }
+    if (endDate && typeof endDate === 'object') {
+      this._endDate = endDate;
+    }
+    else if (endDate && typeof endDate === 'string') {
+      const [month, day, year] = endDate.split('/');
+      this._endDate = new Date(Number(year), Number(month) - 1, Number(day), 23, 59, 59);
+    }
+    else {
+      this._endDate = new Date(this._startDate.getFullYear(), this._startDate.getMonth(), this._startDate.getDate(), 23, 59, 59);
+    }
+    if (!endTime) {
+      this._endTime = `${this._endDate.getHours()}:${this._endDate.getMinutes()}`;
+    }
+    else {
+      this._endTime = this.convertTimeTo24Hour(endTime);
+    }
+  }
+}
+
+var __decorate$c = (undefined && undefined.__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;
+};
+/** 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. */
+class VegaCalendarEventController extends globalSlimmerRegistry.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) {
+          globalSlimmerRegistry.LogUtility.warn('Invalid calendar event item:', item);
+        }
+      });
+    }
+    this.calendarEvents = result;
+  }
+}
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaCalendarEventController.prototype, "calendarEvents", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventController.prototype, "events", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('watchEventsChange')
+], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
+
+var __decorate$b = (undefined && undefined.__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;
+};
+/** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
+class VegaCalendarEventItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * render event component
+   *
+   * @param {CalendarEvent} item the calendar event object
+   * @param {Record<string,boolean>} classMap the class name map
+   * @returns {HTMLVegaCalendarEventElement} calendar event element
+   */
+  render(item, classMap) {
+    return (index.h("vega-calendar-event", { key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), 
+      // eslint-disable-next-line react/jsx-no-bind
+      onClick: () => this.handleEventClick(item) }));
+  }
+  /**
+   * emit vega click event
+   *
+   * @param {CalendarEvent} eventItem the event item
+   */
+  handleEventClick(eventItem) {
+    this.eventClickEmitter.emit({ rawEvent: eventItem.event });
+  }
+}
+VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
+
+var __decorate$a = (undefined && undefined.__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;
+};
+/** The `VegaCalendarEventResponsiveController` class extends `PageResizeObserverSlimmer` and updates the max display count of month events with debounce in a VegaCalendar component. */
+class VegaCalendarEventResponsiveController extends pageResizeObserverSlimmer.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 = timer.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.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "host", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
+], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);
+
+var __decorate$9 = (undefined && undefined.__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;
+};
+class VegaCalendarFullDayEventRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index$1) => (index.h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(orderEvents[index$1], index$1))))));
+  }
+  /**
+   * 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 (index.h(index.Fragment, null,
+      index.h("div", { class: "placeholder-block", style: { height: height + 'px' } },
+        index.h("span", null,
+          events.length,
+          " events")),
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex)));
+  }
+}
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+
+var __decorate$8 = (undefined && undefined.__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;
+};
+/** The `VegaCalendarDayViewEventLayoutRenderer` class in TypeScript React renders event layouts for a day view calendar. */
+class VegaCalendarDayViewEventLayoutRenderer extends globalSlimmerRegistry.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$1) => {
+      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(index.h("div", { key: index$1, class: "time-event-block", style: this.getTimeEventStyle(start, i, index$1, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventItemRenderer.render(renderEvent, {
+              'day-event': true,
+              'bg-shadow': index$1 > 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$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+
+/** 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`. */
+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);
+    }
+  }
+}
+
+/** This TypeScript code snippet defines an abstract class `VegaCalendarBaseEventLayout` that serves as a base for event layout functionality in a calendar application. */
+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;
+  }
+}
+
+/** This TypeScript class, VegaCalendarDayViewTimedEventLayout, manages the layout of events in a day view calendar. */
+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;
+  }
+}
+
+/** This code snippet is defining an abstract class named `VegaCalendarBaseEventLayoutCell`. Here's a breakdown of what it does: */
+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;
+  }
+}
+
+/** The class `VegaCalendarDayViewEventLayoutColumn` manages the layout of events in a day view calendar by storing event slots and providing methods to interact with them. */
+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);
+
+/** The `VegaCalendarDayViewEventLayoutGenerator` class in TypeScript generates a layout for calendar events in a day view. */
+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();
+  }
+}
+
+/** The VegaCalendarEventSorter class in TypeScript provides a sort method to sort an array of CalendarEvent objects. */
+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;
+      }
+    });
+  }
+}
+
+var __decorate$7 = (undefined && undefined.__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;
+};
+/** 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 */
+class VegaCalendarTimedEventRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: "day-event-container" }, viewSource.map((item) => {
+      return (index.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$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
+
+/** The VegaCalendarLongEventLayout class manages the layout of long events in a calendar by organizing them into rows. */
+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);
+  }
+}
+
+/** The `VegaCalendarLongEventLayoutRow` class in TypeScript manages the layout of long events in a calendar by updating slots and checking for overlaps. */
+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);
+
+/** The `VegaCalendarLongEventLayoutGenerator` class in TypeScript generates a layout for long calendar events with overlapping prevention logic. */
+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;
+      }
+    });
+  }
+}
+
+var __decorate$6 = (undefined && undefined.__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;
+};
+/** This code snippet defines a TypeScript class `VegaCalendarFullDayEventLayoutRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
+class VegaCalendarFullDayEventLayoutRenderer extends globalSlimmerRegistry.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$1) => {
+      if (item) {
+        return (index.h("div", { key: item.eventKey, class: this.viewMode === 'month' ? 'month-event-block' : 'day-event-block', style: this.getEventStyle(item, currentViewIndex, index$1, 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$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
+__decorate$6([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
+
+const vegaCalendarCss = ".border-divider-top{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-left-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden}.calendar-view-month .calendar-view-month-container{width:100%;display:grid;min-height:100%;grid-template-rows:43px repeat(6, minmax(64px, 1fr))}.calendar-view-month .calendar-view-title{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));top:0;left:0;z-index:62}.calendar-view-month .calendar-view-title div{padding-top:12px;padding-bottom:12px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-title div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-month .calendar-view-row{position:relative;display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-month .calendar-view-row.calendar-view-title{position:sticky}.calendar-view-month .calendar-view-row:last-child{border-bottom-width:0px}.calendar-view-month .calendar-view-row .row-cell{overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}.calendar-view-month .calendar-view-row .row-cell:last-child{border-right-width:0px}.calendar-view-month .calendar-view-row .row-cell .date{padding-top:4px;padding-bottom:4px;padding-right:12px;padding-left:8px}.calendar-view-month .calendar-view-row .row-cell .date>div{display:inline-block;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .calendar-view-row .row-cell .date>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-month .calendar-view-row .row-cell .date .month-block{margin-right:2px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col{text-align:center;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;cursor:pointer;width:18px;height:18px;line-height:18px}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}.calendar-view-month .calendar-view-row .row-cell .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-month .calendar-view-row .row-cell.current-month-day .date>div{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.calendar-view-month .calendar-view-row .row-cell.disabled .date>div{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-top-left-radius:9999px;border-bottom-left-radius:9999px;color:rgba(var(--v-text-on-action, 252, 252, 252, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:hover{background-color:rgba(var(--v-bg-action-hover, 4, 112, 236, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1))}.calendar-view-month .calendar-view-row .row-cell.active .date .grid-col:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.calendar-view-container{width:100%}.calendar-view-container .calendar-view-title-container{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:sticky;top:0;left:0;z-index:62}.calendar-view-container .calendar-view-row{box-sizing:border-box;width:100%;display:flex;flex-direction:row}.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{width:72px;text-align:right;padding-right:8px;box-sizing:border-box;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-shrink:0}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-row .time-line,.calendar-view-container .calendar-view-row .time-line-empty,.calendar-view-container .calendar-view-row .time-line-all{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.calendar-view-container .calendar-view-title{width:100%}.calendar-view-container .calendar-view-title>div{padding:12px;padding-bottom:8px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;text-align:center;display:flex;flex-direction:column;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar-view-container .calendar-view-title .week-day{cursor:pointer;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-container .calendar-view-title .week-day{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}.calendar-view-container .calendar-view-title .active div{color:rgba(var(--v-text-link, 19, 98, 226, 1))}.calendar-view-container .calendar-view-event-all-container{align-items:center}.calendar-view-container .calendar-view-event-all{display:grid;grid-template-rows:1fr;flex-grow:1;min-height:18px}.calendar-view-container .calendar-view-day-container .time-line{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr))}.calendar-view-container .calendar-view-day-container .time-line .time-text{margin-top:-9px}.calendar-view-container .calendar-view-day-container .calendar-view-content{width:100%}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col{display:grid;grid-template-rows:16px repeat(24, minmax(74px, 1fr));grid-template-columns:minmax(64px, 1fr)}.calendar-view-container .calendar-view-day-container .calendar-view-content .grid-col>.border-divider-top:first-child{border-top-width:0px}.calendar-view-container .calendar-view-content-container{width:100%;position:relative}.calendar-view-week .calendar-view-container{min-height:100%}.calendar-view-week .calendar-view-container .calendar-view-title{display:grid;grid-template-rows:1fr;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(7, minmax(64px, 1fr))}.calendar-view-day .calendar-view-container{min-height:100%}.time-marker-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.time-marker-container.hidden{display:none}.time-marker-container .time-marker{position:absolute;height:2px;display:grid;min-width:100%;left:0;top:0;z-index:61}.time-marker-container .time-marker div{width:100%;height:2px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));opacity:0.3}.time-marker-container .time-marker div.active{opacity:1;position:relative}.time-marker-container .time-marker div.active::before{content:\"\";display:block;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;position:absolute;width:8px;height:8px;background-color:rgba(var(--v-bg-status-error, 255, 110, 139, 1));top:-3px;left:-4px}.day-event-container{position:absolute;min-width:100%;left:0;top:16px;height:calc(100% - 16px);pointer-events:none}.day-event-container .day-event-col{height:100%;overflow:hidden}.day-event-container vega-calendar-event{pointer-events:auto;height:100%}.calendar-view-month .month-event-row{position:absolute;width:100%;overflow:hidden;height:calc(100% - 26px);left:0;bottom:0}.calendar-view-month .events-container{width:100%;box-sizing:border-box;overflow:hidden;padding:2px;display:flex;flex-direction:column;gap:2px;justify-content:space-between}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px}.calendar-view-month .events-container .event-list .month-event-block{box-sizing:border-box;padding-left:2px;padding-right:3px}.calendar-view-month .events-container .month-event-more .more-button{display:inline-block;height:16px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1));cursor:pointer;border-radius:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar-view-month .events-container .month-event-more .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-month .events-container .month-event-more .more-button:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}.calendar-view-container .calendar-view-event-all{position:relative}.calendar-view-container .calendar-view-event-all .placeholder-block{padding-top:2px;padding-bottom:2px;box-sizing:content-box}.calendar-view-container .calendar-view-event-all .placeholder-block span{display:none}.calendar-view-container .calendar-view-event-all .day-event-block{padding-top:2px;padding-right:2px;box-sizing:border-box;padding-left:3px}.calendar-view-container .day-event-col{position:relative}.calendar-view-container .day-event-col .time-event-block{box-sizing:border-box;padding-right:8px;padding-bottom:2px;padding-top:3px}.calendar-view-container .day-event-col .time-event-block vega-calendar-event.bg-shadow::part(event-container):not(:focus){outline:2px solid rgba(var(--v-bg-primary, 252, 252, 252, 1))}.calendar-view-container .day-event-col .time-event-block:focus-within{z-index:60 !important}";
+
+var __decorate$5 = (undefined && undefined.__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;
+};
+const VegaCalendar = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaEventClick = index.createEvent(this, "vegaEventClick", 7);
+    this.eventClick = index.createEvent(this, "eventClick", 7);
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaCalendarRenderer();
+    this.switchPanelRenderer = new VegaCalendarSwitchPanelRenderer();
+    this.viewRenderer = new VegaCalendarViewRenderer();
+    this.monthViewRenderer = new VegaCalendarMonthViewRenderer();
+    this.viewWithTimeRenderer = new VegaCalendarViewWithTimeRenderer();
+    this.timeLineRenderer = new VegaCalendarTimeLineRenderer();
+    this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
+    //The  current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
+    this.currentPeriodController = new VegaCalendarCurrentPeriodController();
+    this.calendarViewController = new VegaCalendarViewController();
+    this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
+    this.eventItemRenderer = new VegaCalendarEventItemRenderer();
+    this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
+    this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
+    this.calendarEventController = new VegaCalendarEventController();
+    this.eventResponsiveController = new VegaCalendarEventResponsiveController();
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCalendar, vegaEventId.VegaChange);
+    this.eventClickEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaCalendar, vegaEventId.VegaEventClick);
+    this.changeEventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
+    this.timeFormatNotifySlimmer = subStateObserverSlimmer.createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.calendarEvents = [];
+    /**
+     * Specifies the current view mode of the calendar.
+     */
+    /* eslint-disable @stencil/strict-mutable */
+    this.viewMode = 'month';
+    /**
+     * Specifies the time format of the calendar.
+     */
+    this.timeFormat = '24-hour';
+  }
+  /**
+   * watch the state calendar current period change
+   */
+  watchCurrentPeriodChange() {
+  }
+  /**
+   * Watch the view mode change
+   *
+   * @param {VegaCalendarViewModeType} newValue the new value of view mode
+   */
+  watchViewModeChange(newValue) {
+  }
+  /**
+   * Watch the calendar events change
+   *
+   * @param {VegaCalendarRawEvent[]} newValue
+   */
+  watchEventsChange(newValue) {
+  }
+  /**
+   * Watches changes in the calendar's time format.
+   *
+   * @param {TimeFormat} newValue
+   */
+  watchTimeFormat(newValue) {
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "currentPeriod": ["watchCurrentPeriodChange"],
+    "viewMode": ["watchViewModeChange"],
+    "events": ["watchEventsChange"],
+    "timeFormat": ["watchTimeFormat"]
+  }; }
+};
+__decorate$5([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaCalendar.prototype, "globalSlimmer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "renderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "switchPanelRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthViewRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "monthEventRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "currentPeriodController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarViewController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventItemRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "calendarEventController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventResponsiveController", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventEmitter", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventClickEmitter", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "changeEventPrevent", void 0);
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
+VegaCalendar.style = vegaCalendarCss;
+
+const clockThree = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 13.3 10.7 24 24 24H360c13.3 0 24-10.7 24-24s-10.7-24-24-24H280V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"/></svg>`,
+};
+
+var __decorate$4 = (undefined && undefined.__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;
+};
+/** The `VegaCalendarEventRenderer` class is a TypeScript React component used for rendering calendar events with different display modes and custom styling. */
+class VegaCalendarEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-event-title-max-height-e2e}
+   */
+  /* istanbul ignore next */
+  /**
+   * This function returns the event title container as a nullable HTMLDivElement.
+   *
+   * @returns {Nullable<HTMLDivElement>} The method `getEventTitleContainer` is returning a nullable HTMLDivElement.
+   */
+  getEventTitleContainerRef() {
+    return this.eventTitleContainerRef;
+  }
+  /**
+   * The function conditionally renders either a group event or a normal event based on a boolean flag.
+   *
+   * @returns {HTMLElement} the event element
+   */
+  render() {
+    return (index.h(index.Fragment, null,
+      this.injectBackgroundColorStyle(),
+      this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
+        ? this.renderBackgroundModeEvent()
+        : this.renderNormalEvent()));
+  }
+  /**
+   * render background mode event element
+   *
+   * @returns {HTMLDivElement} div element
+   */
+  renderBackgroundModeEvent() {
+    const disabled = this.calendarEvent.disabled;
+    return (index.h("div", { role: "button", tabIndex: 0, class: {
+        'background-color-mode': true,
+        'event-bg-color': !disabled,
+        'bg-disabled': disabled,
+      } }, this.calendarEvent.title));
+  }
+  /**
+   * render event element
+   *
+   * @returns {HTMLAnchorElement} event element
+   */
+  renderNormalEvent() {
+    const { variant = 'primary', disabled, startTime, endTime, title, } = this.calendarEvent;
+    const isMonthEvent = !this.host.classList.contains('day-event');
+    const classMap = {
+      'event-container': true,
+      'disabled': disabled,
+      [variant]: true,
+    };
+    if (isMonthEvent) {
+      return (index.h("div", { role: "button", tabIndex: 0, class: classMap },
+        this.renderEventStatus(),
+        index.h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`)));
+    }
+    else {
+      const eventDuration = this.calendarEvent.getEventDuration();
+      return (index.h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0 },
+        this.renderEventStatus(),
+        index.h("div", { class: "cover-block" }),
+        index.h("div", { class: "event-content" },
+          index.h("div", { class: {
+              'event-title': true,
+              'title-word-wrap': eventDuration > 30,
+            }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
+          index.h("div", { class: "event-time" },
+            index.h("vega-icon", { size: "size-12", icon: internalIconManager.VegaInternalIconManager.getIconKey('clock-three') }),
+            index.h("span", null, `${this.formatDisplayTime(startTime)} - ${this.formatDisplayTime(endTime)}`)))));
+    }
+  }
+  /**
+   * render event status element, a color badge or a color bar element
+   *
+   * @returns {HTMLDivElement} div element
+   */
+  renderEventStatus() {
+    const disabled = this.calendarEvent.disabled;
+    return (index.h("div", { class: {
+        'event-status': true,
+        'event-bg-color': !disabled,
+        'bg-disabled': disabled,
+      } },
+      index.h("span", { class: {
+          stripe: this.calendarEvent.variant === 'secondary',
+        } })));
+  }
+  /**
+   * render the custom color style tag element
+   *
+   * @returns {HTMLStyleElement} style element
+   */
+  injectBackgroundColorStyle() {
+    return index.h("style", null, this.colorController.getBackgroundColorStyle());
+  }
+  /**
+   * Takes a time string as input and formats it to ensure it always has two digits for hours and minutes.
+   *
+   * @param {string} timeString the event time string
+   * @returns {string} time string after format
+   */
+  formatDisplayTime(timeString) {
+    const [hour, minutes] = timeString.split(':');
+    if (this.timeFormat === '24-hour') {
+      return `${hour.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
+    }
+    else {
+      const hourNum = Number(hour);
+      const amPm = hourNum >= 12 ? 'pm' : 'am';
+      const minutesResult = minutes.padStart(2, '0');
+      if (hourNum > 12) {
+        return `${hourNum - 12}:${minutesResult} pm`;
+      }
+      else if (hourNum === 0) {
+        return `12:${minutesResult} am`;
+      }
+      else {
+        return `${hourNum}:${minutesResult} ${amPm}`;
+      }
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'clock-three': clockThree,
+  });
+})();
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "host", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "timeFormat", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "calendarEvent", void 0);
+__decorate$4([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "colorController", void 0);
+
+var __decorate$3 = (undefined && undefined.__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;
+};
+/** The `VegaCalendarEventBgColorController` class in TypeScript provides methods to handle background color for calendar events based on a color map and custom color variables. */
+class VegaCalendarEventBgColorController extends globalSlimmerRegistry.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 (typeGuard.isBackgroundColorTokenType(color)) {
+      return `.event-bg-color{${stateBackgroundColorFormatter.stateBackgroundColorFormatter.formatToken(color)}}`;
+    }
+    else {
+      return `.event-bg-color{background-color:${color}}`;
+    }
+  }
+}
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarEventBgColorController.prototype, "calendarEvent", void 0);
+
+var __decorate$2 = (undefined && undefined.__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;
+};
+/** The `VegaCalendarEventSubStateController` class in TypeScript initializes a calendar with specified subStates. */
+class VegaCalendarEventSubStateController extends subStateObserverSlimmer.SubStateObserverSlimmer {
+  /**
+   * The constructor function initializes a calendar with specified subStates in TypeScript.
+   */
+  constructor() {
+    super({
+      parent: 'vega-calendar',
+      subStates: [
+        {
+          subStateName: 'timeFormat',
+          parentStateName: 'timeFormat',
+        },
+      ],
+    });
+  }
+}
+__decorate$2([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaCalendarEventSubStateController.prototype, "timeFormat", void 0);
+
+var __decorate$1 = (undefined && undefined.__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;
+};
+/**
+ * The `VegaCalendarTitleMaxHeightController` class in TypeScript sets the maximum height for
+ * a vertical title element based on its line height and current height.
+ */
+class VegaCalendarTitleMaxHeightController extends globalSlimmerRegistry.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 = pixel.parsePixelStringToNumber(styles.height);
+      const lineHeight = pixel.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$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTitleMaxHeightController.prototype, "renderer", void 0);
+
+const vegaCalendarEventCss = ".bg-disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host{display:block;box-sizing:border-box;width:100%}:host .background-color-mode{border-radius:2px;padding-left:8px;padding-right:8px;color:rgba(var(--v-text-black, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;cursor:pointer;overflow:hidden;white-space:nowrap}@media screen and (min-width: 768px) and (max-width: 1023px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .background-color-mode{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host .event-container{display:block;width:100%;border-radius:4px;cursor:pointer;box-sizing:border-box;overflow:hidden}:host(.month-event) .event-container{padding-left:2px;padding-right:2px;display:flex;flex-direction:row;gap:4px;align-items:center;min-height:16px}:host(.month-event) .event-container .event-status{width:8px;height:8px;box-sizing:border-box;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;margin-left:2px;flex-shrink:0}:host(.month-event) .event-container .event-status span{display:none;width:100%;height:100%;border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-top-right-radius:9999px;border-bottom-right-radius:9999px}:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.month-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.month-event) .event-container.secondary .event-status span{display:block;background-size:4px 4px;opacity:0.8}:host(.month-event) .event-container.tertiary .event-status{padding:1px}:host(.month-event) .event-container.tertiary .event-status span{display:block;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}:host(.month-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.month-event) .event-container:hover{background-color:rgba(var(--v-bg-action-secondary-hover, 4, 112, 236, 0.1))}:host(.month-event) .event-container:active{background-color:rgba(var(--v-bg-action-secondary-active, 29, 65, 195, 0.1))}:host(.month-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.day-event) .event-container{padding-left:8px;padding-right:8px;position:relative}:host(.day-event) .event-container .event-status{position:absolute;width:4px;height:100%;left:0;top:0;z-index:1}:host(.day-event) .event-container .event-status span{display:none}:host(.day-event) .event-container .cover-block{position:absolute;height:100%;width:100%;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border-radius:4px;left:0;top:0;opacity:0.7}:host(.day-event) .event-container .event-content,:host(.day-event) .event-container .event-time{display:flex;flex-direction:row;align-items:center}:host(.day-event) .event-container .event-content{gap:8px;position:relative;height:100%;box-sizing:border-box}:host(.day-event) .event-container .event-time{gap:4px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-time{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.day-event) .event-container .event-time vega-icon{flex-shrink:0}:host(.day-event) .event-container .event-time span{white-space:nowrap}:host(.day-event) .event-container .event-title{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.day-event) .event-container .event-title{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.day-event) .event-container .event-title.title-word-wrap{overflow:hidden}:host(.day-event) .event-container .event-title:not(.title-word-wrap){white-space:nowrap}:host(.day-event) .event-container.duration-half-an-hour{padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.vertical{height:100%}:host(.day-event) .event-container.vertical .event-content{flex-direction:column;align-items:flex-start;gap:4px;padding-top:8px;padding-bottom:8px}:host(.day-event) .event-container.secondary .event-status span,:host(.day-event) .event-container.tertiary .event-status span{display:block;position:absolute;border-top-left-radius:4px;border-bottom-left-radius:4px}:host(.day-event) .event-container.secondary .cover-block,:host(.day-event) .event-container.tertiary .cover-block{width:calc(100% - 2px);height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.secondary .event-status span{width:100%;height:100%;top:0px;left:0px;background-size:4px 4px;opacity:0.8}:host(.day-event) .event-container.secondary .cover-block{opacity:0.9}:host(.day-event) .event-container.tertiary .event-status span{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));width:2px;height:calc(100% - 2px);top:1px;left:1px}:host(.day-event) .event-container.tertiary .cover-block{opacity:1}:host(.day-event) .event-container.disabled{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container.disabled .event-status{background-color:rgba(var(--v-bg-disabled, 176, 180, 181, 1))}:host(.day-event) .event-container:focus{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:0px}:host(.month-event.calendar-event-large-size) .background-color-mode{border-radius:4px;padding-top:4px;padding-bottom:4px}:host(.month-event.calendar-event-large-size) .event-container{padding-top:4px;padding-bottom:4px}.stripe{background-image:linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%)}";
+
+var __decorate = (undefined && undefined.__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;
+};
+const VegaCalendarEvent = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.globalSlimmer = {};
+    this.pageResizeObserverSlimmer = new pageResizeObserverSlimmer.PageResizeObserverSlimmer({
+      target: () => this.host,
+      callback: 
+      /**
+       * The below method is e2e-test covered in
+       * @see{module:vega-calendar-event-title-max-height-e2e}
+       */
+      /* istanbul ignore next */
+      () => this.titleMaxHeightController.setVerticalTitleMaxHeight(),
+    });
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaCalendarEventRenderer();
+    this.colorController = new VegaCalendarEventBgColorController();
+    this.subStateController = new VegaCalendarEventSubStateController();
+    this.titleMaxHeightController = new VegaCalendarTitleMaxHeightController();
+    this.timeFormat = '24-hour';
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.calendarEvent ? this.renderer.render() : null), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaCalendarEvent.prototype, "globalSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "renderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "colorController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "subStateController", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "titleMaxHeightController", void 0);
+VegaCalendarEvent.style = vegaCalendarEventCss;
+
+exports.vega_calendar = VegaCalendar;
+exports.vega_calendar_event = VegaCalendarEvent;