@heartlandone/vega 2.74.0-RTE-table-preview → 2.75.0-RTE-table-preview

package/dist/vega/vega-calendar.entry.js

@@ -1,3884 +0,0 @@
-import { h, F as Fragment, f as forceUpdate, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
-import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
-import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, L as LogUtility, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
-import { a as VegaClick, h as VegaChange, V as VegaDropdownClick, c as VegaPopoverHide, i as VegaEventClick, j as VegaDateDblClick, k as VegaMoreActionClick, l as VegaDateClick } from './vega-event-id-61c8bd9f.js';
-import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
-import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
-import { Z as pad, _ as MonthViewGenerator, $ as WeekViewGenerator, a0 as DayViewGenerator, a1 as getClosestWorkday, a2 as DayPeriod, a3 as WeekPeriod, a4 as MonthPeriod, a5 as CalendarDate, a6 as WeekdayLongNames, a7 as getSystemTimezone, a8 as CalendarTime, a9 as CalendarDateTime, aa as getCalendarEventSlotName, ab as getTimeIndex } from './type-guard-09acedc9.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-fcfc9c8b.js';
-import { j as VegaInternalCalendarMonthEventsChange, k as VegaInternalCalendarEventPreviewHide, l as VegaInternalCalendarEventPreviewClear, m as VegaInternalCalendarEventPreviewUpdate } from './vega-internal-event-id-b65a01a3.js';
-import { O as Observer } from './observer-3959f9dd.js';
-import { C as ChangeManager } from './change-manager-b115783e.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
-import { V as VegaInternalTranslation } from './index-81ce67e2.js';
-import { f as flatNestedArray } from './array-a1d98264.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8565f08b.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-ee8774a6.js';
-import { d as debounce } from './timer-9321173b.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-2c2e1a57.js';
-import './index-9fdb7060.js';
-import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
-import './breakpoints-d9faf11c.js';
-import './ui-189dae23.js';
-import './typography-396de03f.js';
-import './internal-vega-event-manager-826279b7.js';
-import './try-get-document-bef0f526.js';
-import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-24b9f956.js';
-import './index-1f9eab8f.js';
-import './_commonjsHelpers-2088bffa.js';
-import './ui-5f775fd9.js';
-import './static-subject-title-6fdf8c8b.js';
-import './number-4398f2e1.js';
-
-var __decorate$m = (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 VegaSlimmer {
-  getEventPreviewRef() {
-    return this.eventPreviewRef;
-  }
-  /**
-   * The render function returns a Fragment containing the rendered output of switchPanelRenderer and viewRenderer components.
-   *
-   * @returns {HTMLElement} An HTMLElement containing the rendered output of the switchPanelRenderer and viewRenderer components.
-   */
-  render() {
-    return (h(Fragment, null,
-      this.switchPanelRenderer.render(),
-      this.viewRenderer.render(),
-      h("vega-calendar-event-preview", { ref: (el) => {
-          this.eventPreviewRef = el;
-        } })));
-  }
-}
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarRenderer.prototype, "host", void 0);
-__decorate$m([
-  MapToComponentField()
-], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$m([
-  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>`,
-};
-
-const ellipsisVertical = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 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="M48 464a48 48 0 1 1 0-96 48 48 0 1 1 0 96zm0-160a48 48 0 1 1 0-96 48 48 0 1 1 0 96zM0 96a48 48 0 1 1 96 0A48 48 0 1 1 0 96z"/></svg>`,
-};
-
-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 `VegaCalendarSwitchPanelRenderer` class in TypeScript React renders a calendar switch panel with date navigation, view selection, and action buttons. */
-class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * This function is responsible for updating the `viewMode` property of the `VegaCalendarSwitchPanelRenderer` class with the value extracted from the `input` parameter.
-     *
-     * @param {NotifyObserverPayload<VegaCalendarViewModeType>} input mark which view should be selected
-     */
-    this.handleViewChange = (input) => {
-      this.currentPeriodController.updateCalendarPeriod(input.detail, this.postOperationDate);
-    };
-    /**
-     * 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());
-    };
-    /**
-     * The more action menu item click
-     *
-     * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
-     */
-    this.moreActionMenuClick = (payload) => {
-      this.moreActionClickEmitter.emit(payload.detail);
-    };
-  }
-  /**
-   * get the switch panel container element
-   *
-   * @returns {HTMLVegaFlexElement} container element
-   */
-  getSwitchPanelRef() {
-    return this.switchPanelRef;
-  }
-  /**
-   * calendar switch panel with date switch, view switch, add new button, and more action components.
-   *
-   * @returns {HTMLElement} html element
-   */
-  render() {
-    return (h("vega-flex", { direction: "row", gap: "size-16", justifyContent: "space-between", alignItems: "center", class: "calendar-switch-panel", ref: (node) => (this.switchPanelRef = node) },
-      this.renderDateSwitch(),
-      h("div", { class: "calendar-view-switch-container" },
-        this.showSwitchView ? this.renderViewSwitch() : null,
-        this.renderMoreActionMenu())));
-  }
-  /**
-   * The `renderDateSwitch` function returns a container with buttons for switching dates and displaying the current date.
-   *
-   * @returns {HTMLDivElement} action button elements container.
-   */
-  renderDateSwitch() {
-    return (h("div", { class: "calendar-date-switch-container" },
-      h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
-        }, label: this.translationSlimmer.t('Today') }),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
-        } }),
-      h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-right'), label: "next", showTooltip: false, ref: (button) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.nextButtonClick);
-        } }),
-      this.renderCurrentPeriod()));
-  }
-  /**
-   * The function `renderCurrentPeriod` returns an HTML element displaying the view date content summary info.
-   *
-   * @returns {HTMLVegaFontElement} The text content inside the element is "Current Date Test".
-   */
-  renderCurrentPeriod() {
-    return (h("vega-font", { class: "calendar-current-date", variant: "font-field-label", color: "text-primary" }, this.getViewDateSummary()));
-  }
-  /**
-   * The function `renderViewSwitch` returns a JSX element for rendering a segment control component in a TypeScript React application.
-   *
-   * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
-   */
-  renderViewSwitch() {
-    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views.map((item) => (Object.assign(Object.assign({}, item), { text: this.translationSlimmer.t(item.text) }))), size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
-      } }));
-  }
-  /**
-   * Render an more action button if dropdown source is not empty
-   *
-   * @returns {Nullable<HTMLElement>} the additional element
-   */
-  renderMoreActionMenu() {
-    var _a, _b;
-    if ((_b = (_a = this.moreActionDropdownProps) === null || _a === void 0 ? void 0 : _a.source) === null || _b === void 0 ? void 0 : _b.length) {
-      return (h("vega-dropdown", Object.assign({ alignment: "end", trigger: "click" }, this.moreActionDropdownProps, { ref: (node) => {
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, this.moreActionMenuClick);
-        } }),
-        h("vega-button-circle", { size: "small", icon: VegaInternalIconManager.getIconKey('ellipsis-vertical'), variant: "icon-only" })));
-    }
-  }
-  /**
-   * 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': {
-        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
-        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
-        break;
-      }
-      case 'week': {
-        const weekItems = this.calendarView.dateItems[0];
-        const start = weekItems[0];
-        const end = weekItems[weekItems.length - 1];
-        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(item.getMonthName()));
-        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
-        break;
-      }
-      case 'month': {
-        const monthName = this.translationSlimmer.t(currentDate.getMonthName());
-        result = `${monthName}, ${currentDate.year}`;
-        break;
-      }
-    }
-    return result;
-  }
-}
-(() => {
-  VegaInternalIconManager.register({
-    'chevron-right': chevronRight,
-    'chevron-left': chevronLeft,
-    'ellipsis-vertical': ellipsisVertical,
-  });
-})();
-VegaCalendarSwitchPanelRenderer.views = [
-  { text: 'Day', key: 'day' },
-  { text: 'Week', key: 'week' },
-  { text: 'Month', key: 'month' },
-];
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "postOperationDate", void 0);
-__decorate$l([
-  MapToComponentField()
-], VegaCalendarSwitchPanelRenderer.prototype, "showSwitchView", void 0);
-
-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;
-};
-/** renders different views based on the specified view mode using month, week, and day view render. */
-class VegaCalendarViewRenderer extends VegaSlimmer {
-  /**
-   * Get the calendar view content element ref
-   *
-   * @returns {Nullable<HTMLElement>} The div element.
-   */
-  getCalendarViewElementRef() {
-    return this.calendarViewElementRef;
-  }
-  /**
-   * render the calendar month/week/day view
-   *
-   * @returns {HTMLElement} html element
-   */
-  render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}`, ref: (node) => (this.calendarViewElementRef = node) }, this.viewMode === 'month'
-      ? this.monthViewRenderer.render()
-      : this.viewWithTimeRenderer.render()));
-  }
-}
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$k([
-  MapToComponentField()
-], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", 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;
-};
-/**
- * Provides an abstract base class for rendering date blocks in a calendar component.
- * This class handles click and double-click events on date blocks and emits the appropriate events.
- */
-class VegaCalendarDateBlockRenderer extends VegaSlimmer {
-  /**
-   * Handles the date click or double-click event and emits the appropriate event based on the `enableDateClick` property.
-   *
-   * @param {MouseEvent} event - The mouse event triggered by the user.
-   * @param {VegaCalendarDateClickInfo} eventInfo - Information about the clicked calendar date.
-   */
-  emit(event, eventInfo) {
-    if (this.shouldHandleClickEvent(event)) {
-      this.dateClickEmitter.emit(eventInfo);
-    }
-    else if (this.shouldHandleDblClickEvent(event)) {
-      this.dateDblClickEmitter.emit(eventInfo);
-    }
-  }
-  /**
-   * Checks if the click event should be handled based on the `enableDateClick` property and the event type.
-   *
-   * @param {MouseEvent} event - The mouse event to check.
-   * @returns {boolean} - True if the event should be handled, false otherwise.
-   */
-  shouldHandleClickEvent(event) {
-    return this.enableDateClick === true && event.type === 'click';
-  }
-  /**
-   * Checks if the double-click event should be handled based on the `enableDateClick` property and the event type.
-   *
-   * @param {MouseEvent} event - The mouse event to check.
-   * @returns {boolean} - True if the event should be handled, false otherwise.
-   */
-  shouldHandleDblClickEvent(event) {
-    return this.enableDateClick !== true && event.type === 'dblclick';
-  }
-  /**
-   * Generate the properties for rendering a date block based on its disabled state and calendar date.
-   *
-   * @param {boolean} isDisabled - Indicates if the date block is disabled.
-   * @param {CalendarDate} calendarDate - The calendar date object.
-   * @param {number} index - The index of the date block.
-   * @returns {DateBlockRenderProps} - The properties for rendering the date block.
-   */
-  generateDateBlockRenderProps(isDisabled, calendarDate, index) {
-    const result = {};
-    if (!isDisabled) {
-      if (this.enableDateClick) {
-        result.tabIndex = 0;
-        result.role = 'button';
-        result.onClick = (e) => {
-          this.handleDateBlockClick(e, calendarDate, index);
-        };
-        result.onKeyDown = createEnterKeyHandlerToTriggerClick();
-      }
-      else {
-        result.onDblClick = (e) => {
-          this.handleDateBlockClick(e, calendarDate, index);
-        };
-      }
-    }
-    return result;
-  }
-}
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarDateBlockRenderer.prototype, "enableDateClick", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarDateBlockRenderer.prototype, "dateClickEmitter", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarDateBlockRenderer.prototype, "dateDblClickEmitter", 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 VegaCalendarDateBlockRenderer {
-  /**
-   * the HTML elements that represent the month view of a calendar component.
-   *
-   * @returns {HTMLElement} the month view calendar content
-   */
-  render() {
-    const weekHead = this.calendarView.weekdays;
-    return (h("div", { class: "calendar-view-month-container" },
-      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title }, this.translationSlimmer.t(title))))),
-      this.renderMonthViewContent()));
-  }
-  /**
-   * emit vega click event when click the date block
-   *
-   * @param {MouseEvent} e the mouse event object
-   * @param {CalendarDate} calendarDate the calendar date object
-   */
-  handleDateBlockClick(e, calendarDate) {
-    const { target, clientX, clientY } = e;
-    if (this.isMonthBlockBlankArea(target)) {
-      const { year, month, date } = calendarDate;
-      const eventInfo = {
-        year,
-        month,
-        date,
-        hour: 0,
-        mouseEventInfo: { clientX, clientY },
-      };
-      this.emit(e, eventInfo);
-    }
-  }
-  /**
-   * generating the HTML elements that represent the content of the month view in a calendar component
-   *
-   * @returns {HTMLElement[]} month view content and event content
-   */
-  renderMonthViewContent() {
-    const monthSource = this.calendarView.dateItems;
-    const currentDate = this.currentPeriod.current;
-    return monthSource.map((dateArray, index) => {
-      const eventsArray = this.monthEventRenderer.getCurrentRowEvents(dateArray);
-      const displayEventsArray = this.monthEventRenderer.filterRowDisplayEvents(eventsArray);
-      return (h("div", { key: index, class: "calendar-view-row border-divider-bottom" }, dateArray.map((item, itemIndex) => {
-        var _a;
-        const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
-        const renderProps = this.generateDateBlockRenderProps(isDisabled, item);
-        return (h("div", Object.assign({ class: {
-            'row-cell border-divider-right': true,
-            'current-month-day': item.compare(currentDate).inMonth,
-            'active': item.isToday(this.timezone),
-            'disabled': isDisabled,
-          }, key: `${item.month}-${item.date}` }, renderProps),
-          this.renderDateBlock(item),
-          this.monthEventRenderer.render(item, eventsArray[itemIndex], displayEventsArray[itemIndex], itemIndex)));
-      })));
-    });
-  }
-  /**
-   * It takes a `CalendarDate` object as a parameter and returns an HTML element representing a date block in the calendar view.
-   *
-   * @param {CalendarDate} item the day object
-   * @returns {HTMLElement} the date block element
-   */
-  renderDateBlock(item) {
-    const isMonthFirstDay = item.date === 1;
-    return (h("div", { class: "date" },
-      isMonthFirstDay && h("div", { class: "month-block" }, item.getMonthName(true)),
-      h("div", { role: "button", tabIndex: 0, class: "grid-col", 
-        // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: (e) => {
-          this.handleDateLabelClick(e, item);
-        }, 
-        // eslint-disable-next-line react/jsx-no-bind
-        onClick: (e) => {
-          this.handleDateLabelClick(e, item);
-        }, onKeyDown: createEnterKeyHandlerToTriggerClick() }, item.date)));
-  }
-  /**
-   * switch to current date day view
-   *
-   * @param {CalendarDate} calendarDate the calendar date object
-   */
-  goToCurrentDayView(calendarDate) {
-    this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
-  }
-  /**
-   * Handler for clicking on the date label.
-   *
-   * @param {MouseEvent} e - the mouse event object
-   * @param {CalendarDate} calendarDate - the calendar date object
-   */
-  handleDateLabelClick(e, calendarDate) {
-    e.stopPropagation();
-    // only when showSwitchView is true, the double click event can switch to day view
-    if (!this.showSwitchView)
-      return;
-    if (this.shouldHandleClickEvent(e)) {
-      this.goToCurrentDayView(calendarDate);
-    }
-    else if (this.shouldHandleDblClickEvent(e)) {
-      this.goToCurrentDayView(calendarDate);
-    }
-  }
-  /**
-   * determine if the clicked element is blank area
-   *
-   * @param {HTMLElement} element the target element
-   * @returns {boolean} true or false
-   */
-  isMonthBlockBlankArea(element) {
-    // the more button and the calendar event component should not trigger dateDblClick event
-    return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
-  }
-}
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "isDateDisabled", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "showSwitchView", void 0);
-__decorate$i([
-  MapToComponentField()
-], VegaCalendarMonthViewRenderer.prototype, "timezone", 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 VegaCalendarDateBlockRenderer {
-  /**
-   * The render function in TypeScript React returns an array of HTMLElements containing the week calendar view for a specific day.
-   *
-   * @returns {HTMLElement} An array of HTMLElement elements containing the rendered content of a calendar view for a
-   * specific day in the week. The content includes the title and the main content of the calendar view
-   * for that day.
-   */
-  render() {
-    return (h("div", { class: "calendar-view-container" },
-      this.renderViewTitle(),
-      this.renderViewContent()));
-  }
-  /**
-   * emit vega click event when click the date block
-   *
-   * @param {CalendarDate} calendarDate the calendar date object
-   */
-  handleDateBlockClick(e, calendarDate, hour) {
-    const { year, month, date } = calendarDate;
-    const { clientX, clientY } = e;
-    const eventInfo = {
-      year,
-      month,
-      date,
-      hour,
-      mouseEventInfo: { clientX, clientY },
-    };
-    this.emit(e, eventInfo);
-  }
-  /**
-   * The function `renderViewTitle` renders a calendar view title and events based on the provided source data.
-   *
-   * @returns {HTMLElement} The `renderViewTitle` function returns an HTML element (HTMLElement) that contains a calendar view title container with rows for each day's information.
-   */
-  renderViewTitle() {
-    const source = this.calendarView.dateItems[0];
-    const weekHead = this.calendarView.weekdays;
-    return (h("div", { class: "calendar-view-title-container" },
-      h("div", { class: "calendar-view-row" },
-        h("div", { class: "time-line-empty" }),
-        h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday(this.timezone) } },
-          h("div", null, this.translationSlimmer.t(weekHead[index])),
-          h("div", { class: "week-day" }, item.date)))))),
-      h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
-        h("div", { class: "time-line-all" }, this.translationSlimmer.t('All Day')),
-        this.dayViewFullDayEventRenderer.render())));
-  }
-  /**
-   * The `renderViewContent` function in TypeScript React renders a calendar view with day blocks and time markers based on the provided data.
-   *
-   * @returns {HTMLElement} An HTMLElement containing a calendar view row with day containers, a timeline renderer, a content container, a day list, and hour blocks for each item in the source array.
-   */
-  renderViewContent() {
-    const source = this.calendarView.dateItems[0];
-    return (h("div", { class: "calendar-view-row calendar-view-day-container" },
-      this.timeLineRenderer.render(),
-      h("div", { class: "calendar-view-content-container" },
-        h("div", { class: "calendar-view-content" }, source.map((item) => {
-          var _a;
-          const isDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, item.toDate());
-          return (h("div", { class: {
-              'grid-col border-divider-left': true,
-              'disabled': isDisabled,
-            }, key: item.date },
-            h("div", { class: "hour-empty border-divider-top" }),
-            this.renderHourBlock(item, isDisabled)));
-        })),
-        this.dayViewTimedEventRenderer.render(),
-        this.timeMarkerRenderer.render(source))));
-  }
-  /**
-   * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
-   *
-   * @param {CalendarDate} calendarDate then current calendar date object
-   * @returns {HTMLElement[]} An array of HTMLElements is being returned. Each HTMLElement represents an hour block with a time value inside a div element.
-   */
-  renderHourBlock(calendarDate, isDisabled) {
-    const timeLineSource = Array(24).fill('');
-    return timeLineSource.map((_item, index) => {
-      var _a;
-      let isHourDisabled = false;
-      if (!isDisabled) {
-        const dateWithHour = new Date(calendarDate.toDate().setHours(index));
-        isHourDisabled = (_a = this.isDateDisabled) === null || _a === void 0 ? void 0 : _a.call(this, dateWithHour);
-      }
-      const renderProps = this.generateDateBlockRenderProps(isDisabled || isHourDisabled, calendarDate, index);
-      return (h("div", Object.assign({ key: index, class: {
-          'grid-cell border-divider-top': true,
-          'disabled': isDisabled || isHourDisabled,
-        } }, renderProps)));
-    });
-  }
-}
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "isDateDisabled", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "enableDateClick", void 0);
-__decorate$h([
-  MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "timezone", 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 VegaSlimmer {
-  /**
-   * rendering the time line component as an HTML element
-   *
-   * @returns {HTMLElement} the html element
-   */
-  render() {
-    const timeLineSource = this.getTimeLineTitles();
-    return (h("div", { class: "time-line" },
-      h("div", { class: "hour-empty" }),
-      timeLineSource.map((time, index) => {
-        return (h("div", { key: time },
-          h("div", { class: "time-text", "data-time": index === 0 ? 24 : index }, time)));
-      })));
-  }
-  /**
-   * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
-   *
-   * @returns {string[]} returns an array of strings representing the time line
-   */
-  getTimeLineTitles() {
-    const timeLine = [];
-    if (this.timeFormat === '12-hour') {
-      timeLine.push('12 AM');
-      for (let i = 1; i < 12; i++) {
-        timeLine.push(`${i} AM`);
-      }
-      timeLine.push('12 PM');
-      for (let i = 1; i < 12; i++) {
-        timeLine.push(`${i} PM`);
-      }
-    }
-    else {
-      for (let i = 0; i < 24; i++) {
-        timeLine.push(`${pad(i)}`);
-      }
-    }
-    return timeLine;
-  }
-}
-__decorate$g([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-
-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 VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.monthViewGenerator = new MonthViewGenerator();
-    this.weekViewGenerator = new WeekViewGenerator();
-    this.dayViewGenerator = new DayViewGenerator();
-  }
-  /**
-   * set default calendar view
-   */
-  initialCalendarView() {
-    this.setCalendarView(this.getCalendarViewByPeriod(this.currentPeriod));
-  }
-  /**
-   * generator new calendar view if the calendar current period changes
-   *
-   * @param {CalendarPeriod} newValue the new calendar period
-   */
-  generateCalendarView(newValue) {
-    this.setCalendarView(this.getCalendarViewByPeriod(newValue));
-  }
-  /**
-   * The function `getCalendarViewByPeriod` returns a specific calendar view based on the current period.
-   *
-   * @param {CalendarPeriod} newPeriod the new period
-   * @returns {CalendarView} get the match calendar view by the period
-   */
-  getCalendarViewByPeriod(newPeriod) {
-    switch (newPeriod.type) {
-      case 'week':
-        return this.weekViewGenerator.generate(newPeriod);
-      case 'day':
-        return this.dayViewGenerator.generate(newPeriod);
-      default:
-        return this.monthViewGenerator.generate(newPeriod);
-    }
-  }
-  /**
-   * update the calendar view
-   *
-   * @param {CalendarView} newView new calendar view
-   */
-  setCalendarView(newView) {
-    this.calendarView = newView;
-  }
-}
-__decorate$f([
-  MapToComponentField({ writable: true })
-], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$f([
-  MapToComponentField()
-], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$f([
-  MapToComponentField()
-], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$f([
-  MapToComponentField()
-], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$f([
-  MapToComponentMethod('componentWillLoad')
-], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$f([
-  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 VegaSlimmer {
-  /**
-   * set new current period
-   *
-   * @param {CalendarPeriod} newPeriod new value
-   */
-  setCurrentPeriod(newPeriod) {
-    this.currentPeriod = newPeriod;
-  }
-  /**
-   * set new current period by the view mode and the current date
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   * @param {CalendarDate} date current date
-   */
-  updateCalendarPeriod(viewMode, date) {
-    switch (viewMode) {
-      case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends, this.timezone));
-        break;
-      case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends, this.timezone));
-        break;
-      case 'day':
-        date = this.showWeekends === false ? getClosestWorkday(date) : date;
-        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends, this.timezone));
-        break;
-    }
-  }
-  /**
-   * default current period is month period, re-create period if the default view mode is not month
-   * set default calendar view
-   */
-  initialCurrentPeriod() {
-    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date(), this.timezone));
-  }
-  /**
-   * emit period change event
-   *
-   * @param {CalendarPeriod} newValue the new calendar period
-   * @param {CalendarPeriod} oldValue the prev calendar period
-   */
-  emitChangeEvent(newValue, oldValue) {
-    if (newValue &&
-      oldValue &&
-      newValue.startDate.equal(oldValue.startDate) &&
-      newValue.endDate.equal(oldValue.endDate)) {
-      return;
-    }
-    if (newValue && newValue.type !== this.viewMode) {
-      this.viewMode = newValue.type;
-    }
-    this.changeEventEmitter.emit({
-      viewMode: newValue.type,
-      currentPeriod: this.getCurrentPeriodSummary(),
-    });
-  }
-  /**
-   * update the current period when view mode change
-   *
-   * @param {VegaCalendarViewModeType} viewMode new view mode value
-   */
-  updateCurrentPeriodByViewMode(viewMode) {
-    if (this.currentPeriod && viewMode !== this.currentPeriod.type) {
-      this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
-    }
-  }
-  /**
-   * The calendar period should update when the property showWeekends change
-   */
-  updateCurrentPeriodAfterHideWeekEndsChange() {
-    this.updateCalendarPeriod(this.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,
-      },
-    };
-  }
-}
-__decorate$e([
-  MapToComponentField({ writable: true })
-], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$e([
-  MapToComponentField()
-], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
-  MapToComponentField({ writable: true })
-], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$e([
-  MapToComponentField()
-], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$e([
-  MapToComponentField()
-], VegaCalendarCurrentPeriodController.prototype, "timezone", void 0);
-__decorate$e([
-  MapToComponentMethod('componentWillLoad')
-], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$e([
-  MapToComponentMethod('watchCurrentPeriodChange')
-], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$e([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$e([
-  MapToComponentMethod('watchShowWeekendsChange')
-], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", 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 VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.maxMonthDisplayEventsCount = 2;
-    this.popoverHideObserver = null;
-  }
-  /**
-   * current row dates all events.
-   *
-   * @param {CalendarDate[]} rowDate the current view date object
-   * @returns {Nullable<CalendarEvent>[][]} 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 {Nullable<CalendarEvent>[][]} the current row should display events array
-   */
-  filterRowDisplayEvents(rowEvents) {
-    const result = [];
-    rowEvents.forEach((events) => {
-      const displayEvents = events.length > this.maxMonthDisplayEventsCount
-        ? events.slice(0, this.maxMonthDisplayEventsCount - 1)
-        : events;
-      result.push(displayEvents);
-    });
-    return this.hideTheCutOffEvents(rowEvents, result);
-  }
-  /**
-   * Get the month event container element ref
-   *
-   * @returns {HTMLDivElement} the container element
-   */
-  getMonthEventContainerRef() {
-    return this.eventContainerRef;
-  }
-  /**
-   * render the current date events
-   *
-   * @param {CalendarDate} calendarDate current day
-   * @param {Nullable<CalendarEvent>[]} allEvents current row events
-   * @param {Nullable<CalendarEvent>[]} displayEvents current row should display events
-   * @param {number} currentViewIndex current day index of week
-   * @returns {HTMLDivElement} the events container
-   */
-  render(calendarDate, allEvents, displayEvents, currentViewIndex) {
-    const hiddenEventsLength = allEvents
-      .slice(displayEvents.length)
-      .filter((item) => item).length;
-    return (h("div", { class: "events-container", ref: (node) => (this.eventContainerRef = node) },
-      h("div", { class: "event-list" }, this.fullDayEventLayoutRenderer.render(displayEvents, currentViewIndex, calendarDate)),
-      this.renderMoreButton(allEvents, hiddenEventsLength, calendarDate)));
-  }
-  /**
-   * Add a month event display count change observer, than update the component
-   */
-  addMaxDisplayCountChange() {
-    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarMonthEventsChange, (payload) => {
-      if (this.maxMonthDisplayEventsCount !== payload.detail) {
-        this.maxMonthDisplayEventsCount = payload.detail;
-        if (this.viewMode === 'month') {
-          forceUpdate(this.host);
-        }
-      }
-    });
-  }
-  /**
-   * Render the event more button if there is no enough space to display all event
-   *
-   * @param {Nullable<CalendarEvent>[]} events all event list array
-   * @param {number} moreItemsLength popover events length
-   * @param {CalendarDate} calendarDate current date
-   * @returns {Nullable<HTMLDivElement>} the more button or null
-   */
-  renderMoreButton(events, moreItemsLength, calendarDate) {
-    if (moreItemsLength) {
-      const backgroundColorEvents = events.filter((eventItem) => {
-        return eventItem && (eventItem.isAllDayEvent || eventItem.isGroupEvent());
-      });
-      const otherEvents = events.filter((eventItem) => {
-        return eventItem && !eventItem.isAllDayEvent && !eventItem.isGroupEvent();
-      });
-      return (h("div", { class: "month-event-more" },
-        h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
-            this.setPopoverHideObserver(el);
-          }, isScreenPosition: true },
-          h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
-          h("vega-flex", { slot: "popover" },
-            h("vega-box", { padding: 'size-12', width: 256 },
-              h("vega-flex", { direction: "col", gap: "0", class: "group-events" },
-                h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, `${calendarDate.date} ${calendarDate.getMonthName()} ${calendarDate.year}`),
-                h("vega-box", { maxHeight: 'calc(60vh - 6px)', style: { overflowY: 'auto' }, padding: 'size-4' },
-                  h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
-                    return this.eventItemRenderer.render(item, {
-                      'month-event': true,
-                      'calendar-event-large-size': true,
-                      'calendar-event-in-popover': true,
-                    }, calendarDate, true);
-                  })),
-                  otherEvents.map((item) => {
-                    return this.eventItemRenderer.render(item, {
-                      'month-event': true,
-                      'calendar-event-large-size': true,
-                      'calendar-event-in-popover': true,
-                    }, calendarDate, true);
-                  })))),
-            h("div", { class: "preview-container", ref: (el) => {
-                el
-                  ? this.eventPreviewPopoverController.setEventPreviewContainerMap(events, calendarDate, el)
-                  : this.eventPreviewPopoverController.deleteEventPreviewContainer(events, calendarDate);
-              } })))));
-    }
-  }
-  /*
-   * 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 &&
-          items[items.length - 1] &&
-          removeItems.includes(items[items.length - 1])) {
-          result.push(items.slice(0, items.length - 1));
-        }
-        else {
-          result.push(items);
-        }
-      });
-      return result;
-    }
-    return rowEvents;
-  }
-  setPopoverHideObserver(popover) {
-    if (popover) {
-      this.popoverHideObserver = new Observer((_payload) => true, async () => await popover.hide());
-      ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
-    }
-    else if (this.popoverHideObserver) {
-      ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
-    }
-    // we should clear current event in vega-calendar-event-preview when popover hide
-    popover &&
-      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
-        ChangeManager.notify(domNodeSubjectFactory.getSubject(this.renderer.getEventPreviewRef(), VegaInternalCalendarEventPreviewClear), {});
-      });
-  }
-}
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "renderer", void 0);
-__decorate$d([
-  MapToComponentField()
-], VegaCalendarMonthEventRenderer.prototype, "eventPreviewPopoverController", void 0);
-__decorate$d([
-  MapToComponentMethod('componentWillLoad')
-], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
-
-/** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
-class CalendarEventBaseRepeatPattern {
-  /**
-   * The constructor initializes the current date for a given date range and interval.
-   *
-   * @param {CalendarDate} repeatStartDate - The `repeatStartDate` parameter represents the starting date of a
-   * calendar event or interval. It is of type `CalendarDate`, which likely contains information such as
-   * the year, month, and day of the event.
-   * @param {number} interval - The `interval` parameter represents the frequency at which the event
-   * occurs. For example, if the interval is set to 2, it means the event occurs every 2 units of time
-   * (e.g., every 2 days, weeks, months, etc.).
-   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
-   * is provided, the event will repeat `count` times within the specified interval. If `count` is
-   * `null`, the event will repeat indefinitely until the `until` date is reached.
-   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor represents a date until which the recurring
-   * event will occur. If this date is reached, the recurring event will stop.
-   */
-  constructor(repeatStartDate, interval, count, until) {
-    this.repeatStartDate = repeatStartDate;
-    this.interval = interval;
-    this.count = count;
-    this.until = until;
-  }
-  /**
-   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
-   *
-   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
-   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
-   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
-   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
-   * @returns {CalendarDate[]}  repeat start date array
-   */
-  getRepeatSeries(period, eventSpansDays = 1) {
-    this.generateRepeatDateCacheUntilEndDate(period.endDate);
-    return this.cache.filter((item) => {
-      return this.isSeriesInPeriod(item, eventSpansDays, period);
-    });
-  }
-  /**
-   * The function `isSeriesInPeriod` checks if a series of dates falls within a specified date range.
-   *
-   * @param {CalendarDate} series - The `series` parameter represents a specific date in the form of a
-   * `CalendarDate` object.
-   * @param {number} seriesSpansDays - The `seriesSpansDays` parameter represents the number of days
-   * that the series spans. It is used to calculate the end date of the series based on the start date.
-   * @param {CalendarPeriod} period - Date period
-   * @returns {boolean} a boolean value indicating whether the given series falls within the specified date
-   * range.
-   */
-  isSeriesInPeriod(series, seriesSpansDays, period) {
-    const seriesStart = series.toDate();
-    const seriesEnd = new Date(series.year, series.month - 1, series.date + seriesSpansDays - 1);
-    const { startDate, endDate } = period;
-    const rangeStart = startDate.toDate();
-    const rangeEnd = endDate.toDate();
-    return ((seriesStart >= rangeStart && seriesStart <= rangeEnd) ||
-      (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
-      (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
-  }
-  /**
-   * The function generates a string representation of the end condition for a repeating event,
-   * 	either by a specific date or after a certain number of occurrences.
-   *
-   * @returns {string} a string representing the end condition of a repeating event.
-   */
-  generateRepeatEndsString() {
-    if (this.until) {
-      return ` ${VegaInternalTranslation.t('until {0}', `${this.until.getMonthName()} ${this.until.date}, ${this.until.year}`)}`;
-    }
-    else if (this.count) {
-      return ` ${VegaInternalTranslation.t('after {0} occurrences', this.count)}`;
-    }
-    return '';
-  }
-}
-CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;
-
-/** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
-class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
-  /**
-   * The constructor initializes the current date for a given date range and interval.
-   *
-   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and represents the starting date for a specific interval or range.
-   * @param {number} interval - The `interval` parameter represents the frequency at which the event
-   * occurs. For example, if the interval is set to 1, it means the event occurs every day. If the
-   * interval is set to 2, it means the event occurs every other day.
-   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
-   * is provided, the event will repeat `count` times within the specified interval. If `count` is
-   * `null`, the event will repeat indefinitely until the `until` date is reached.
-   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`, which
-   * means it can either accept a `CalendarDate` object or be `null`. This parameter is used to specify
-   * a date until which the recurring event should repeat. If `until` is provided, the event
-   */
-  constructor(startDate, interval, count, until) {
-    super(startDate, interval, count, until);
-    this.initCache();
-  }
-  /**
-   * Generate repeat display string.
-   *
-   * @returns {string} repeat display string
-   */
-  generateRepeatString() {
-    const repeatString = this.interval > 1
-      ? VegaInternalTranslation.t('Repeat every {0} days', this.interval)
-      : VegaInternalTranslation.t('Repeat daily');
-    return repeatString + this.generateRepeatEndsString();
-  }
-  /**
-   * The function generates and caches repeated dates before a specified end date.
-   *
-   * @param {CalendarDate} endDate - The `endDate` parameter represents the date until which you want to
-   * generate repeat dates in the cache. The function `generateRepeatDateCacheBeforeEndDate` is
-   * responsible for populating the cache with repeat dates until the specified `endDate`. It checks the
-   * last date in the cache and generates subsequent repeat dates until
-   */
-  generateRepeatDateCacheUntilEndDate(endDate) {
-    const lastMatchDate = this.cache[this.cache.length - 1];
-    if (lastMatchDate.toDate() < endDate.toDate() &&
-      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
-      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
-      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
-        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
-        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
-          this.cache.pop();
-          break;
-        }
-        nextMatchDate = newNextMatchDate;
-        if (typeof this.count === 'number' && this.cache.length >= this.count) {
-          break;
-        }
-      }
-    }
-  }
-  /**
-   * The function `initCache` initializes a cache array with the `startDate` value.
-   */
-  initCache() {
-    this.cache = [this.repeatStartDate];
-  }
-  /**
-   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
-   *
-   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
-   * calculate the next repeat start date. It is an instance of the `CalendarDate` class.
-   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object if certain
-   * conditions are met, or `null` if the conditions are not met.
-   */
-  getNextRepeatStartDate(date) {
-    const nextDate = new Date(date.year, date.month - 1, date.date + this.interval);
-    const nextCalendarDate = CalendarDate.from(nextDate);
-    if ((this.until && nextDate > this.until.toDate()) ||
-      (typeof this.count === 'number' && this.cache.length >= this.count)) {
-      return null;
-    }
-    else {
-      this.cache.push(nextCalendarDate);
-      return nextCalendarDate;
-    }
-  }
-}
-
-/** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
-class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
-  /**
-   * The constructor initializes the event with specified start and end dates, interval, count, and until date, and sets the byMonthDay property to the start date's day.
-   *
-   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
-   * event or interval. It is of type `CalendarDate`, which likely includes the year, month, and day
-   * components of the date.
-   * @param {number} interval - The `interval` parameter specifies the frequency of the recurring
-   * events. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
-   * weeks, months, etc.).
-   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
-   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
-   * provided (or is `null`), the event will repeat indefinitely based on the other parameters like `
-   * @param {Nullable<CalendarDate>} until - The `until` parameter is a nullable `CalendarDate` that specifies the end date for
-   * the recurring event. If provided, the event will repeat until this date. If not provided, the event
-   * will repeat indefinitely based on the other parameters like `count` or `endDate`.
-   */
-  constructor(startDate, interval, count, until) {
-    super(startDate, interval, count, until);
-    this.byMonthDay = this.repeatStartDate.date;
-    this.initCache();
-  }
-  /**
-   * Generate repeat display string.
-   *
-   * @returns {string} repeat display string
-   */
-  generateRepeatString() {
-    const repeatString = this.interval > 1
-      ? VegaInternalTranslation.t('Repeat every {0} months on day {1}', this.interval, this.byMonthDay)
-      : VegaInternalTranslation.t('Repeat monthly on day {0}', this.byMonthDay);
-    return repeatString + this.generateRepeatEndsString();
-  }
-  /**
-   * This function generates and caches repeated dates before a specified end date.
-   *
-   * @param {CalendarDate} endDate - The `endDate` parameter in the
-   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the end
-   * date until which the repeat dates need to be generated and cached. The function checks if the last
-   * cached date is before the `endDate` and generates additional repeat dates until it reaches
-   */
-  generateRepeatDateCacheUntilEndDate(endDate) {
-    const lastMatchDate = this.cache[this.cache.length - 1];
-    if (lastMatchDate.toDate() < endDate.toDate() &&
-      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
-      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
-      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
-        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
-        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
-          this.cache.pop();
-          break;
-        }
-        nextMatchDate = newNextMatchDate;
-        if (typeof this.count === 'number' && this.cache.length >= this.count) {
-          break;
-        }
-      }
-    }
-  }
-  /**
-   * The function `initCache` initializes a cache array with the startDate value.
-   */
-  initCache() {
-    this.cache = [this.repeatStartDate];
-  }
-  /**
-   * The getNextRepeatStartDate function calculates the next start date based on a given date and interval, considering constraints such as end date and count limit.
-   *
-   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
-   * calculate the next repeat start date. It is of type `CalendarDate`.
-   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns a nullable `CalendarDate`. It either returns
-   * the next calculated `CalendarDate` based on the input date and interval, or it returns `null` if
-   * certain conditions are met (such as reaching the specified end date or count limit).
-   */
-  getNextRepeatStartDate(date) {
-    const nextDate = this.getNextStartDate(date.year, date.month - 1 + this.interval);
-    const nextCalendarDate = CalendarDate.from(nextDate);
-    if ((this.until && nextDate > this.until.toDate()) ||
-      (typeof this.count === 'number' && this.cache.length >= this.count)) {
-      return null;
-    }
-    else {
-      this.cache.push(nextCalendarDate);
-      return nextCalendarDate;
-    }
-  }
-  /**
-   * get the new date with fixed date, if the date.getDate() not equal the fixed date, find the next month
-   *
-   * @param {number} year year
-   * @param {number} month month
-   * @returns {Date} the new date
-   */
-  getNextStartDate(year, month) {
-    const nextDate = new Date(year, month, this.byMonthDay);
-    if (nextDate.getDate() === this.byMonthDay) {
-      return nextDate;
-    }
-    else {
-      return this.getNextStartDate(year, month + 1);
-    }
-  }
-}
-
-/** The `CalendarEventWeeklyRepeatPattern` class in TypeScript represents a weekly repeat pattern for calendar events, allowing for matching dates based on specific weekdays and generating future dates with optional constraints. */
-class CalendarEventWeeklyRepeatPattern extends CalendarEventBaseRepeatPattern {
-  /**
-   * This TypeScript constructor initializes a calendar date range with specified parameters including start date, end date, interval, count, until date, and an array of week days.
-   *
-   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
-   * calendar event or schedule. It is of type `CalendarDate`, which likely includes the year, month, and day components of a date.
-   * @param {number} interval - The `interval` parameter represents the frequency of the recurrence. For
-   * example, if `interval` is set to 1, the event will occur every week. If it's set to 2, the event
-   * will occur every two weeks.
-   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the rule. If `count` is
-   * provided, the recurrence will generate at most that many occurrences. If `count` is not provided,
-   * the recurrence will continue indefinitely based on other parameters like `endDate` or `until`.
-   * @param {Nullable<CalendarDate>} until - The `until` parameter specifies the end date for the recurrence rule. If provided,
-   * the recurrence will continue until this date. If not provided, the recurrence will continue
-   * indefinitely based on other parameters like `count` or `interval`.
-   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay - The `byWeekDay` parameter is an array of
-   * `VegaCalendarWeekDayType` values, which represent the days of the week for which the event should occur.
-   */
-  constructor(startDate, interval, count, until, byWeekDay) {
-    super(startDate, interval, count, until);
-    this.byWeekDay = this.sortWeekDay(byWeekDay);
-    this.initCache();
-  }
-  /**
-   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
-   *
-   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
-   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
-   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
-   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
-   * @returns {CalendarDate[]} repeat start date array
-   */
-  getRepeatSeries(period, eventSpansDays = 1) {
-    this.generateRepeatDateCacheUntilEndDate(period.endDate);
-    return this.getValidCache().filter((item) => {
-      return this.isSeriesInPeriod(item, eventSpansDays, period);
-    });
-  }
-  /**
-   * Generate repeat display string.
-   *
-   * @returns {string} repeat display string
-   */
-  generateRepeatString() {
-    const weekDays = this.byWeekDay.map((weekDay) => VegaInternalTranslation.t(WeekdayLongNames[weekDay]));
-    const repeatString = this.interval > 1
-      ? VegaInternalTranslation.t('Repeat every {0} weeks on {1}', this.interval, weekDays.join(', '))
-      : VegaInternalTranslation.t('Repeat weekly on {0}', weekDays.join(', '));
-    return repeatString + this.generateRepeatEndsString();
-  }
-  /**
-   * This function generates repeated dates and caches them until a specified end date.
-   *
-   * @param {CalendarDate} endDate - The `endDate` parameter is a `CalendarDate` object that represents
-   * the date until which the repeat date cache needs to be generated. The function
-   * `generateRepeatDateCacheUntilEndDate` generates repeat dates until this specified end date.
-   */
-  generateRepeatDateCacheUntilEndDate(endDate) {
-    const lastMatchDate = this.cache[this.cache.length - 1];
-    if (lastMatchDate[0].toDate() < endDate.toDate() &&
-      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
-      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
-      while (nextMatchDate && nextMatchDate[0].toDate() < endDate.toDate()) {
-        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
-        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
-        if (newNextMatchDate &&
-          newNextMatchDate[0] &&
-          newNextMatchDate[0].toDate() <= nextMatchDate[0].toDate()) {
-          this.cache.pop();
-          break;
-        }
-        nextMatchDate = newNextMatchDate;
-        if (typeof this.count === 'number' && this.getValidCache().length >= this.count) {
-          break;
-        }
-      }
-    }
-  }
-  /**
-   * The function getNextRepeatStartDate calculates the next start dates based on a given array of CalendarDate objects and returns them if certain conditions are met.
-   *
-   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects.
-   * @returns {Nullable<CalendarDate[]>} The `getNextRepeatStartDate` function returns a nullable array of `CalendarDate` objects.
-   * If there are no next dates available or if the cache count exceeds a specified limit, it returns
-   * `null`. Otherwise, it returns an array of `CalendarDate` objects representing the next start dates.
-   */
-  getNextRepeatStartDate(dates) {
-    const nextDate = this.getNextStartDates(dates);
-    if (nextDate.length === 0 ||
-      (typeof this.count === 'number' && this.getValidCache().length >= this.count)) {
-      return null;
-    }
-    else {
-      const nextCalendarDates = nextDate.map((item) => CalendarDate.from(item));
-      this.cache.push(nextCalendarDates);
-      return nextCalendarDates;
-    }
-  }
-  /**
-   * The function `getNextStartDates` takes an array of `CalendarDate` objects, calculates the next dates based on a specified interval, and filters out dates that are after a specified end date.
-   *
-   * @param {CalendarDate[]} dates - The `dates` parameter is an array of `CalendarDate` objects
-   * representing specific dates in a calendar. Each `CalendarDate` object has properties for the year,
-   * month, and date.
-   * @returns {Date[]} The `getNextStartDates` function returns an array of `Date` objects representing the next
-   * start dates based on the input `CalendarDate` array. The function calculates the next start dates
-   * by adding a specific interval (multiplied by 7 to represent weeks) to each date in the input array.
-   * Finally, it filters out any dates that are after a specified `until` date, if provided.
-   */
-  getNextStartDates(dates) {
-    const nextDates = dates.map((dateItem) => new Date(dateItem.year, dateItem.month - 1, dateItem.date + this.interval * 7));
-    return nextDates.filter((item) => !this.until || item <= this.until.toDate());
-  }
-  /**
-   * The `initCache` function initializes a cache of calendar dates based on the start date and weekly repeat pattern.
-   */
-  initCache() {
-    const result = [];
-    const currentWeekDayIndex = this.getCurrentDayIndex(this.repeatStartDate);
-    this.byWeekDay.forEach((day) => {
-      const index = CalendarEventWeeklyRepeatPattern.weekDay.indexOf(day);
-      const days = index - currentWeekDayIndex;
-      const { year, month, date } = this.repeatStartDate;
-      const dateItem = CalendarDate.from(new Date(year, month - 1, date + days));
-      if (!this.until || dateItem.toDate() <= this.until.toDate()) {
-        result.push(dateItem);
-      }
-    });
-    this.cache = [result];
-  }
-  /**
-   * The function `sortWeekDay` sorts an array of week days based on their position in a predefined list.
-   *
-   * @param {boolean} weekDay - The `weekDay` parameter is an array of week day values that need to be sorted in a
-   * specific order. The function `sortWeekDay` takes this array and sorts it based on a predefined
-   * order specified in `CalendarEventWeeklyRepeatPattern.weekDay`.
-   * @returns {VegaCalendarWeekDayType[]} The `sortWeekDay` function is returning the `weekDay` array sorted based on the index of
-   * each `VegaCalendarWeekDayType` item in the `CalendarEventWeeklyRepeatPattern.weekDay` array.
-   */
-  sortWeekDay(weekDay) {
-    if (weekDay && weekDay.length) {
-      return weekDay
-        .map((item) => item.toLocaleLowerCase())
-        .sort((itemA, itemB) => {
-        return (CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemA) -
-          CalendarEventWeeklyRepeatPattern.weekDay.indexOf(itemB));
-      });
-    }
-    else {
-      return [CalendarEventWeeklyRepeatPattern.weekDay[this.getCurrentDayIndex(this.repeatStartDate)]];
-    }
-  }
-  /**
-   * This function returns the index of the current day in a week, with Sunday represented as 0.
-   *
-   * @param {CalendarDate} date - The `date` parameter in the `getCurrentDayIndex` function is of type
-   * `CalendarDate`, which is a custom data type representing a date in a calendar.
-   * @returns {number} The function `getCurrentDayIndex` returns the index of the current day in the week, with
-   * Sunday being represented as 0 and Saturday being represented as 6.
-   */
-  getCurrentDayIndex(date) {
-    return date.toDate().getDay();
-  }
-  /**
-   * The function `getValidCache` returns a filtered and concatenated array of CalendarDate objects from the cache based on a start date.
-   *
-   * @returns {CalendarDate[]} The `getValidCache` method returns an array of `CalendarDate` objects that meet the
-   * condition of having a date greater than or equal to the `startDate` property. The method first
-   * flattens a nested array of `CalendarDate` objects stored in the `cache` property, then filters out
-   * the `CalendarDate` objects that do not meet the condition, and finally concatenates the filtered
-   * array
-   */
-  getValidCache() {
-    const flatArr = flatNestedArray(this.cache.slice(1));
-    return this.cache[0]
-      .filter((item) => item.toDate() >= this.repeatStartDate.toDate())
-      .concat(flatArr)
-      .slice(0, typeof this.count === 'number' ? this.count : undefined);
-  }
-}
-CalendarEventWeeklyRepeatPattern.weekDay = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((item) => item.toLowerCase());
-
-/** The `CalendarEventYearlyRepeatPattern` class defines a yearly repeat pattern for calendar events, checking for matches and generating future dates based on specified criteria. */
-class CalendarEventYearlyRepeatPattern extends CalendarEventBaseRepeatPattern {
-  /**
-   * The constructor initializes a new instance with specified start and end dates, interval, count, and until date.
-   *
-   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and
-   * represents the starting date of a calendar event or interval.
-   * @param {number} interval - The `interval` parameter represents the frequency at which the event
-   * occurs. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
-   * weeks, months, etc.).
-   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
-   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
-   * provided, the event will repeat indefinitely based on the other parameters like `endDate` or
-   * `until`.
-   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`. This
-   * means that it can either accept a `CalendarDate` object or be `null`. It is used to specify a date
-   * until which the recurring event should repeat. If `until` is provided, the event
-   */
-  constructor(startDate, interval, count, until) {
-    super(startDate, interval, count, until);
-    this.matchDay = this.repeatStartDate.date;
-    this.matchMonth = this.repeatStartDate.month;
-    this.initCache();
-  }
-  /**
-   * Generate repeat display string.
-   *
-   * @returns {string} repeat display string
-   */
-  generateRepeatString() {
-    const monthName = VegaInternalTranslation.t(this.repeatStartDate.getMonthName());
-    const repeatString = this.interval > 1
-      ? VegaInternalTranslation.t('Repeat every {0} years on {1} {2}', this.interval, monthName, this.matchDay)
-      : VegaInternalTranslation.t('Repeat yearly on {0} {1}', monthName, this.matchDay);
-    return repeatString + this.generateRepeatEndsString();
-  }
-  /**
-   * The function generates repeat dates and caches them until reaching the specified end date.
-   *
-   * @param {CalendarDate} endDate - The `endDate` parameter in the
-   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the date
-   * until which the repeat date cache should be generated. The function checks if the last date in the
-   * cache is before the `endDate`, and if so, it generates additional repeat dates
-   */
-  generateRepeatDateCacheUntilEndDate(endDate) {
-    const lastMatchDate = this.cache[this.cache.length - 1];
-    if (lastMatchDate.toDate() < endDate.toDate() &&
-      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
-      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
-      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
-        const newNextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
-        //The below if block is used to break the infinite loop when the `getNextRepeatStartDate` method return unexpected result. such as when the date is greater than a certain value, it will be returned back 1900.
-        if (newNextMatchDate && newNextMatchDate.toDate() <= nextMatchDate.toDate()) {
-          this.cache.pop();
-          break;
-        }
-        nextMatchDate = newNextMatchDate;
-        if (typeof this.count === 'number' && this.cache.length >= this.count) {
-          break;
-        }
-      }
-    }
-  }
-  /**
-   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
-   *
-   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
-   * calculate the next repeat start date. It is of type `CalendarDate`, which seems to be a custom
-   * class or structure that holds year, month, and day information.
-   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object or `null`
-   * based on certain conditions. If the next date exceeds the `until` date or the count limit has been
-   * reached, it returns `null`. Otherwise, it adds the next date to the cache and returns it as a
-   * `CalendarDate`.
-   */
-  getNextRepeatStartDate(date) {
-    const nextDate = this.getNextStartDate(date.year + this.interval);
-    const nextCalendarDate = CalendarDate.from(nextDate);
-    if ((this.until && nextDate > this.until.toDate()) ||
-      (typeof this.count === 'number' && this.cache.length >= this.count)) {
-      return null;
-    }
-    else {
-      this.cache.push(nextCalendarDate);
-      return nextCalendarDate;
-    }
-  }
-  /**
-   * get the new date with fixed month and fixed date, if the date.getDate() not equal the fixed date or fixed month, find the next year
-   *
-   * @param {number} year year
-   * @returns {Date} the new date
-   */
-  getNextStartDate(year) {
-    const nextDate = new Date(year, this.matchMonth - 1, this.matchDay);
-    if (nextDate.getDate() === this.matchDay && nextDate.getMonth() + 1 === this.matchMonth) {
-      return nextDate;
-    }
-    else {
-      return this.getNextStartDate(year + 1);
-    }
-  }
-  /**
-   * The function `initCache` initializes a cache array with the `startDate` value.
-   */
-  initCache() {
-    this.cache = [this.repeatStartDate];
-  }
-}
-
-/** This code snippet defines a TypeScript class `CalendarEventRepeatPatternFactory` that serves as a factory for creating different types of repeat patterns for calendar events. Here's a breakdown of what the class and its methods are doing: */
-class CalendarEventRepeatPatternFactory {
-  /**
-   * This `getPattern` method within the `CalendarEventRepeatPatternFactory` class is a public method that is responsible for creating and returning a specific type of repeat pattern for a calendar event based on the input parameters provided. Here's a breakdown of what this method is doing:
-   *
-   * @param {Date} startDate repeat start date
-   * @param {VegaCalendarEventRepeatOptions|undefined} repeatOptions repeat options
-   * @param {string} timezone The timezone identifier (e.g., America/New_York).
-   * @returns {CalendarEventBaseRepeatPattern} the match repeat pattern
-   */
-  getPattern(startDate, repeatOptions, timezone = getSystemTimezone()) {
-    const repeatStartDate = CalendarDate.from(startDate);
-    const { frequency, interval = 1, byWeekDay, until, count, } = repeatOptions;
-    const repeatEndDate = this.initDate(until, timezone);
-    return this.initRepeatPattern(frequency, repeatStartDate, interval < 1 ? 1 : interval, count, repeatEndDate, byWeekDay);
-  }
-  /**
-   * The `initDate` function initializes a `CalendarDate` object based on the input date string or Date object provided.
-   *
-   * @param {Nullable<string | Date>} date - The `date` parameter can be either a string or a Date object.
-   * @param {string} timezone The timezone identifier (e.g., 'America/New_York').
-   * @returns {Nullable<CalendarDate>} The function `initDate` returns a `Nullable<CalendarDate>`, which means it can return either a `CalendarDate` object or `null`.
-   */
-  initDate(date, timezone) {
-    if (date) {
-      return CalendarDate.from(new Date(date), timezone);
-    }
-  }
-  /**
-   * The function `initRepeatPattern` initializes a repeat pattern based on the frequency specified for a calendar event.
-   *
-   * @param {VegaCalendarEventRepeatType} frequency event frequency
-   * @param {CalendarDate} repeatStartDate event start date
-   * @param {number} interval event repeat interval
-   * @param {Nullable<number>} count the event repeat count
-   * @param {Nullable<CalendarDate>} repeatEndDate repeat end date
-   * @param {Nullable<VegaCalendarWeekDayType[]>} byWeekDay weekly week days
-   * @returns {CalendarEventBaseRepeatPattern} calendar event repeat pattern instance
-   */
-  initRepeatPattern(frequency, repeatStartDate, interval, count, repeatEndDate, byWeekDay) {
-    switch (frequency) {
-      case 'daily':
-        return new CalendarEventDailyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
-      case 'weekly':
-        return new CalendarEventWeeklyRepeatPattern(repeatStartDate, interval, count, repeatEndDate, byWeekDay);
-      case 'monthly':
-        return new CalendarEventMonthlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
-      default:
-        return new CalendarEventYearlyRepeatPattern(repeatStartDate, interval, count, repeatEndDate);
-    }
-  }
-}
-const calendarEventRepeatPatternFactory = new CalendarEventRepeatPatternFactory();
-
-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.
-   * @param {string} eventKey If a value is not provided for `eventKey`, a UUID (Universally
-   * Unique Identifier) will be generated as a default value. This identifier is used to distinguish
-   * different events and can be helpful for tracking
-   * @param {string} timezone - Optional timezone identifier for timezone-aware date calculations
-   */
-  constructor(eventOptions, eventKey, timezone) {
-    // the default value is 1 when the event end date is same as start date
-    this._eventSpansDays = 1;
-    this.repeatPattern = null;
-    this._event = eventOptions;
-    this._eventKey = eventKey || generateUUID();
-    this._timezone = timezone || getSystemTimezone();
-    this.checkEventRequireField(eventOptions);
-    this.initDate(eventOptions);
-    this.initEventSpansDays();
-    this.initRepeatPattern();
-  }
-  /**
-   * 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 {Nullable<VegaCalendarEventVariantType>} The variant of the event.
-   */
-  get variant() {
-    return this._event.variant;
-  }
-  /**
-   * This function returns the color of an event in TypeScript.
-   *
-   * @returns {Nullable<string>} 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 repeatOptions 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.repeatPattern !== null;
-  }
-  /**
-   * 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._startDateTime.toDate();
-  }
-  /**
-   * 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._endDateTime.toDate();
-  }
-  /**
-   * This function returns the start time as a CalendarTime.
-   *
-   * @returns {CalendarTime} The event start time.
-   */
-  get startTime() {
-    return this._startDateTime.calendarTime;
-  }
-  /**
-   * This function returns the end time as a CalendarTime.
-   *
-   * @returns {CalendarTime} The event end time.
-   */
-  get endTime() {
-    return this._endDateTime.calendarTime;
-  }
-  /**
-   * This function returns the number of days that an event spans.
-   *
-   * @returns {number} The method `get eventSpansDays()` is returning the value of the property
-   * `_eventSpansDays`, which is of type `number`.
-   */
-  get eventSpansDays() {
-    return this._eventSpansDays;
-  }
-  /**
-   * The function `copyTo` copies a calendar event with updated start and end dates.
-   *
-   * @param {string} eventKey - The `eventKey` parameter in the `copyTo` function is a string that represents the key or identifier of the new calendar event that will be created.
-   * @param {CalendarDate} startDate - The `startDate` parameter in the `copyTo` function represents
-   * the starting date of a calendar event. It is of type `CalendarDate`, which may contain information such as the day, month, and year of the event.
-   * @returns {CalendarEvent} A new `CalendarEvent` object is being returned with the properties from the original
-   * `_event` object (excluding `repeatOptions`) and the `startDate` and `endDate` properties set to
-   * the `toDate()` values of the `startDate` and `endDate` parameters.
-   */
-  copyTo(eventKey, startDate) {
-    const endDate = this._eventSpansDays > 1
-      ? new Date(startDate.year, startDate.month - 1, startDate.date + (this._eventSpansDays - 1))
-      : startDate.toDate();
-    const result = new CalendarEvent(Object.assign(Object.assign({}, this._event), { startDate: startDate.toDate(), endDate: endDate, startTime: this.startTime.toString(), endTime: this.endTime.toString() }), eventKey);
-    return result;
-  }
-  /**
-   * Check the event is a group event or not
-   *
-   * @returns {boolean} true or false
-   */
-  isGroupEvent() {
-    return this._eventSpansDays > 1;
-  }
-  /**
-   * 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 currentDate = date.toDate();
-    return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
-  }
-  /**
-   * Generate repeat display string.
-   *
-   * @returns {string} repeat display string
-   */
-  generateRepeatString() {
-    var _a;
-    return ((_a = this.repeatPattern) === null || _a === void 0 ? void 0 : _a.generateRepeatString()) || '';
-  }
-  /**
-   * Generate date display string.
-   *
-   * @param {CalendarDate} viewDate - The `date` to display
-   * @param {TimeFormat} timeFormat - The `timeFormat` to use
-   * @returns {string} repeat display string
-   */
-  generateDateTimeString(viewDate, timeFormat) {
-    const weekDay = VegaInternalTranslation.t(Object.values(WeekdayLongNames)[viewDate.toDate().getDay()]);
-    const startTime = this.startTime.toString(timeFormat);
-    const endTime = this.endTime.toString(timeFormat);
-    return `${weekDay}, ${viewDate.date} ${viewDate.getMonthName(true)} ${viewDate.year} ${startTime} - ${endTime}`;
-  }
-  /**
-   * Get the number of minutes the event lasted
-   *
-   * @returns {number} the minutes
-   */
-  getEventMinutes() {
-    return CalendarTime.calculateDuration(this.startTime, this.endTime, 'minutes');
-  }
-  /**
-   * This function returns an array of repeat series based on a given calendar period.
-   *
-   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method is of type
-   * `CalendarPeriod`. It represents a specific time period within a calendar, typically defined by a
-   * start date and an end date. The method uses this period to generate a series of repeated events
-   * based on a daily repeat pattern specified
-   * @returns {CalendarDate[]} repeat start date array
-   */
-  getRepeatSeries(period) {
-    if (this.repeatPattern) {
-      return this.repeatPattern.getRepeatSeries(period, this._eventSpansDays);
-    }
-    return [];
-  }
-  /**
-   * Refresh event dates and related properties when timezone changes
-   *
-   * @param {string} timezone - The new timezone to apply to the event
-   */
-  updateTimezone(timezone) {
-    this._timezone = timezone;
-    this._startDateTime.setTimezone(timezone);
-    this._endDateTime.setTimezone(timezone);
-  }
-  /**
-   * 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;
-    this.processStartDate(startDate, startTime);
-    this.processEndDate(endDate, endTime, startDate);
-  }
-  /**
-   * Parse the supplied start date/time, normalize into calendar wrappers.
-   *
-   * @param {string | Date} startDate - Raw start date value from the event payload.
-   * @param {string} startTime - Optional textual time component to parse.
-   */
-  processStartDate(startDate, startTime) {
-    this._startDateTime = CalendarDateTime.fromInitDataSource(startDate, {
-      timezone: this._timezone,
-      time: startTime,
-    });
-  }
-  /**
-   * Parse the supplied end date/time, normalize into calendar wrappers.
-   *
-   * @param {string | Date | undefined} endDate - The raw end date value from the event payload.
-   * @param {string | undefined} endTime - The optional textual end time component to parse.
-   * @param {string | Date} originStartDate - The start date value to use as fallback if endDate is missing.
-   */
-  processEndDate(endDate, endTime, originStartDate) {
-    this._endDateTime = CalendarDateTime.fromInitDataSource(endDate || originStartDate, {
-      timezone: this._timezone,
-      time: endTime,
-      endTimeMissing: !endTime && !endDate,
-    });
-  }
-  /**
-   * The function initializes a repeat pattern controller for a calendar event with specified start and end dates and repeat options.
-   */
-  initRepeatPattern() {
-    if (this._event.repeatOptions && this._event.repeatOptions.frequency) {
-      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this.startDate, this._event.repeatOptions, this._timezone);
-    }
-  }
-  /**
-   * Initializes the event cross days by the event start date and end date.
-   */
-  initEventSpansDays() {
-    const start = CalendarDate.from(this.startDate);
-    const end = CalendarDate.from(this.endDate);
-    this._eventSpansDays =
-      (end.toDate().valueOf() - start.toDate().valueOf()) / (24 * 60 * 60 * 1000) + 1;
-  }
-}
-
-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 VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    // This map is cache for newly generated calendar events
-    this.repeatEventMap = new Map();
-  }
-  /**
-   * 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.createRepeatEvents();
-    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);
-    this.repeatEventMap.clear();
-  }
-  /**
-   * initial calendar events in first time
-   */
-  updateWhenComponentWillLoad() {
-    this.initCalendarEvents(this.events);
-  }
-  /**
-   * Handle timezone changes by updating all calendar events
-   *
-   */
-  updateAfterTimezoneChange() {
-    if (this.calendarEvents.length > 0) {
-      this.calendarEvents.forEach((event) => event.updateTimezone(this.timezone));
-    }
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), {});
-    this.repeatEventMap.clear();
-  }
-  /**
-   * 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, undefined, this.timezone);
-          result.push(calendarEvent);
-        }
-        catch (_a) {
-          LogUtility.warn('Invalid calendar event item:', item);
-        }
-      });
-    }
-    this.calendarEvents = result;
-  }
-  /**
-   * We need generate new calendar event from the full-day repeat calendar event, so we can render those event as normal full-day event
-   *
-   * @returns {CalendarEvent[]} The `handleRepeatEvents` method returns an array of `CalendarEvent` objects.
-   */
-  createRepeatEvents() {
-    const allEvents = this.calendarEvents;
-    const otherEvents = [];
-    const newRepeatEvents = [];
-    allEvents.forEach((item) => {
-      if (item.isRepeatEvent) {
-        const repeatSeries = item.getRepeatSeries(this.currentPeriod);
-        repeatSeries.forEach((series) => {
-          newRepeatEvents.push(this.generateCalendarEventByRepeatSeries(item, series));
-        });
-      }
-      else {
-        otherEvents.push(item);
-      }
-    });
-    return newRepeatEvents.concat(otherEvents);
-  }
-  /**
-   * This function generates a calendar event based on a repeat series and stores it in a map to avoid duplicate creation.
-   *
-   * @param {CalendarEvent} calendarEvent - The `calendarEvent` parameter represents a single event on
-   * a calendar. It contains information such as the event's start date, end date, and other details.
-   * @param {CalendarDate} series - The repeat start date
-   * @returns {CalendarEvent} The function `generateCalendarEventByRepeatSeries` returns a `CalendarEvent` object. If
-   * the event key already exists in the `repeatEventMap`, it returns the corresponding `CalendarEvent`
-   * object from the map. Otherwise, it creates a new `CalendarEvent` object based on the input
-   * `calendarEvent` and `series` parameters, adds it to the `repeatEventMap`, and then
-   */
-  generateCalendarEventByRepeatSeries(calendarEvent, series) {
-    const eventKey = `${calendarEvent.eventKey}-${series.year}${series.month}${series.date}`;
-    if (this.repeatEventMap.has(eventKey)) {
-      return this.repeatEventMap.get(eventKey);
-    }
-    else {
-      const result = calendarEvent.copyTo(eventKey, series);
-      this.repeatEventMap.set(eventKey, result);
-      return result;
-    }
-  }
-}
-__decorate$c([
-  MapToComponentField()
-], VegaCalendarEventController.prototype, "host", void 0);
-__decorate$c([
-  MapToComponentField({ writable: true })
-], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$c([
-  MapToComponentField()
-], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$c([
-  MapToComponentField()
-], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$c([
-  MapToComponentField()
-], VegaCalendarEventController.prototype, "timezone", void 0);
-__decorate$c([
-  MapToComponentMethod('watchEventsChange')
-], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$c([
-  MapToComponentMethod('componentWillLoad')
-], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
-__decorate$c([
-  MapToComponentMethod('watchTimezoneChange')
-], VegaCalendarEventController.prototype, "updateAfterTimezoneChange", 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 VegaSlimmer {
-  /**
-   * render event component
-   *
-   * @param {CalendarEvent} item the calendar event object
-   * @param {Record<string,boolean>} classMap the class name map
-   * @param {CalendarDate} targetCalendarViewDate the target calendar view date
-   * @returns {HTMLVegaCalendarEventElement} calendar event element
-   */
-  render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
-    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime.toString()}-${item.endTime.toString()}`, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
-      // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
-        this.handleEventClick(item);
-        this.enabledEventPreview &&
-          this.setupPreviewContainer(item, targetCalendarViewDate, isGroupEvent);
-      } }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
-  }
-  /**
-   * emit vega click event
-   *
-   * @param {CalendarEvent} eventItem the event item
-   */
-  handleEventClick(eventItem) {
-    this.eventClickEmitter.emit({ rawEvent: eventItem.event });
-  }
-  setupPreviewContainer(event, targetCalendarViewDate, isGroupEvent) {
-    const previewContainer = this.eventPreviewPopoverController.getEventPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
-    if (previewContainer) {
-      const preview = this.renderer.getEventPreviewRef();
-      if (isGroupEvent) {
-        preview.classList.remove('single-event-preview');
-        preview.classList.add('group-event-preview');
-      }
-      else {
-        preview.classList.remove('group-event-preview');
-        preview.classList.add('single-event-preview');
-      }
-      // Step 1: notify preview component to update data
-      ChangeManager.notify(domNodeSubjectFactory.getSubject(preview, VegaInternalCalendarEventPreviewUpdate), {
-        event,
-        targetCalendarViewDate,
-        timeFormat: this.timeFormat,
-      });
-      // Step 2: append preview additional fields slot to preview component.
-      const additionalFieldsSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
-      additionalFieldsSlot && preview.append(additionalFieldsSlot);
-      // Step 3: append event slot to preview component.
-      const eventSlotName = getCalendarEventSlotName(event.event.key);
-      const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
-      const previewEventSlot = preview.querySelector(`[slot=${eventSlotName}]`);
-      // Since event slot is used by vega-calendar-event, we should clone it to avoid remove from original position.
-      eventSlot && !previewEventSlot && preview.append(eventSlot.cloneNode(true));
-      // Step 4: append preview component to popover container to display.
-      previewContainer.append(preview);
-    }
-  }
-}
-VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "timeFormat", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
-__decorate$b([
-  MapToComponentField()
-], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", 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 {
-  /**
-   * update the event view when the calendar layout update
-   */
-  constructor() {
-    super({
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      target: /* istanbul ignore next */ () => this.host,
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      callback: /* istanbul ignore next */ () => this.updateMaxDisplayCountWithDebounce(),
-    });
-    this.updateMaxDisplayCountWithDebounce = debounce(this.updateMaxDisplayCount, 500, this);
-  }
-  /**
-   * Update the month event display items.
-   */
-  updateMaxDisplayCount() {
-    // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
-    try {
-      const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
-      if (this.viewMode === 'month' && eventContainerRef && eventContainerRef.parentElement) {
-        const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
-        const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
-          VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);
-        ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarMonthEventsChange), {
-          host: this.host,
-          detail: count,
-        });
-      }
-      // eslint-disable-next-line no-empty
-    }
-    catch (_a) { }
-  }
-  /**
-   * update the max display count when switch view mode
-   *
-   * @param {VegaCalendarViewModeType} viewMode new view mode value
-   */
-  updateMaxDisplayCountAfterSwitchToMonthView(viewMode) {
-    if (viewMode === 'month') {
-      this.updateMaxDisplayCountWithDebounce();
-    }
-  }
-}
-VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$a([
-  MapToComponentField()
-], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$a([
-  MapToComponentField()
-], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$a([
-  MapToComponentField()
-], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$a([
-  MapToComponentMethod('componentDidLoad')
-], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$a([
-  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;
-};
-/** renders all-day events in a calendar view, with options to display a limited number of events and show a "more" button for additional events. */
-class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
-  /**
-   * render current preiod all day events
-   *
-   * @returns {HTMLElement} event element
-   */
-  render() {
-    const viewSource = this.calendarView.dateItems[0];
-    const events = viewSource.map((calendarDate) => {
-      return this.calendarEventController
-        .getCurrentDateEvents(calendarDate)
-        .filter((eventItem) => eventItem.isAllDayEvent || eventItem.isGroupEvent());
-    });
-    const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
-    const displayEvents = this.filterDisplayEvents(orderEvents);
-    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index], item))))));
-  }
-  /**
-   * render current date all day events
-   *
-   * @param {Nullable<CalendarEvent>[]} events displayed calendar events
-   * @param {number} currentViewIndex the current date index of the array
-   * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
-   * @returns {HTMLVegaCalendarEventElement[]} event component array
-   */
-  renderCurrentFullDayEvents(events, currentViewIndex, allEvents, targetCalendarViewDate) {
-    const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
-    const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
-    return (h(Fragment, null,
-      h("div", { class: "placeholder-block", style: { height: height + 'px' } },
-        h("span", null,
-          events.length,
-          " events")),
-      this.fullDayEventLayoutRenderer.render(events, currentViewIndex, targetCalendarViewDate),
-      hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
-  }
-  /**
-   * Get the display events base on the show all events flag
-   *
-   * @param {Nullable<CalendarEvent>[][]} rowEvents row events array
-   * @returns {Nullable<CalendarEvent>[][]} the part of the events or the whole events
-   */
-  filterDisplayEvents(rowEvents) {
-    if (!this.showAllEventsInDayOrWeekView) {
-      const result = [];
-      const maxLength = VegaCalendarFullDayEventRenderer.maxDisplayEventLength;
-      rowEvents.forEach((events) => {
-        const displayEvents = events.length > maxLength ? events.slice(0, maxLength) : events;
-        result.push(displayEvents);
-      });
-      return result;
-    }
-    else {
-      return rowEvents;
-    }
-  }
-}
-VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", 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 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, targetCalendarViewDate) {
-    const layoutColumns = layout.eventLayoutCells;
-    const eventNodes = [];
-    layoutColumns.forEach((columns, index) => {
-      let renderEvent = columns.getEventBySlotIndex(0);
-      let start = 0;
-      for (let i = 0; i <= VegaCalendarDayViewEventLayoutRenderer.TOTAL_NUMBER_OF_CELLS; i++) {
-        const currentEvent = columns.getEventBySlotIndex(i);
-        if (currentEvent !== renderEvent) {
-          if (renderEvent) {
-            eventNodes.push(h("div", { key: index, class: "time-event-block", style: this.getTimeEventStyle(start, i, index, layout.getEventColumnsSpannedCount(renderEvent)) }, this.eventPreviewPopoverRenderer.render(renderEvent, targetCalendarViewDate, {
-              'day-event': true,
-              'bg-shadow': index > 0,
-            })));
-          }
-          renderEvent = currentEvent;
-          start = i;
-        }
-      }
-    });
-    return eventNodes;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-render-timed-event-correct}
-   */
-  /* istanbul ignore next */
-  /**
-   * This function calculates and returns the style properties for positioning and sizing a calendar event within a grid layout.
-   *
-   * @param {number} startIndex - The `startIndex` parameter represents the index of the starting cell for the time event in the calendar grid.
-   * @param {number} endIndex - The `endIndex` parameter represents the index of the end position of the time event within a column. It indicates where the time event ends vertically within the column layout.
-   * @param {number} columnIndex - The `columnIndex` parameter represents the index of the column in which the event is being displayed. It is used to calculate the `left` position of the event element within the container based on the total number of columns spanned by the event.
-   * @param {number} columnsSpannedCount - The `columnsSpannedCount` parameter represents the number of columns spanned by the event in a calendar layout. It is used to calculate the left position of the event within the calendar grid.
-   * @returns {VegaCalendarEventStyle} The function `getTimeEventStyle` returns an object of type `VegaCalendarEventStyle` with properties for position, left, top, width, height, and zIndex.
-   */
-  getTimeEventStyle(startIndex, endIndex, columnIndex, columnsSpannedCount) {
-    const left = columnIndex * (1 / columnsSpannedCount);
-    return {
-      position: 'absolute',
-      left: `${left * 100}%`,
-      top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.TOTAL_NUMBER_OF_CELLS) * startIndex}%`,
-      width: `calc(100% - ${left * 100}%)`,
-      height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.TOTAL_NUMBER_OF_CELLS) * (endIndex - startIndex)}%`,
-      zIndex: columnIndex > 0 ? `${columnIndex}` : undefined,
-    };
-  }
-}
-VegaCalendarDayViewEventLayoutRenderer.TOTAL_NUMBER_OF_CELLS = 24 * 4;
-__decorate$8([
-  MapToComponentField()
-], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$8([
-  MapToComponentField()
-], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", 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 {Nullable<CalendarEvent>} 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;
-    const startIndex = getTimeIndex(startTime.toString());
-    const endIndex = getTimeIndex(endTime.toString());
-    return [startIndex, Math.max(endIndex, startIndex + 1)];
-  }
-}
-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.toString());
-      const eventBStartIndex = getTimeIndex(eventB.startTime.toString());
-      if (eventAStartIndex === eventBStartIndex) {
-        return getTimeIndex(eventB.endTime.toString()) - getTimeIndex(eventA.endTime.toString());
-      }
-      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 {Nullable<CalendarEvent>[]} 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 VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.calendarEventSorter = new VegaCalendarEventSorter();
-    this.dayViewTimedEventLayoutGenerator = new VegaCalendarDayViewTimedEventLayoutGenerator();
-  }
-  /**
-   * render current preiod normal events
-   *
-   * @returns {HTMLElement} events element
-   */
-  render() {
-    const viewSource = this.calendarView.dateItems[0];
-    return (h("div", { class: "day-event-container" }, viewSource.map((item) => {
-      return (h("div", { key: `${item.month}-${item.date}`, class: "day-event-col" }, this.renderTimedEvents(item)));
-    })));
-  }
-  /**
-   * render current day events
-   *
-   * @param {CalendarDate} date calendar Date
-   * @returns {HTMLElement[]} event elements
-   */
-  renderTimedEvents(date) {
-    const events = this.calendarEventController
-      .getCurrentDateEvents(date)
-      .filter((eventItem) => !eventItem.isAllDayEvent && !eventItem.isGroupEvent());
-    const sortEvents = this.calendarEventSorter.sortCalendarEventByTime(events);
-    const layout = this.dayViewTimedEventLayoutGenerator.generate(sortEvents);
-    return this.dayViewEventLayoutRenderer.render(layout, date);
-  }
-}
-__decorate$7([
-  MapToComponentField()
-], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$7([
-  MapToComponentField()
-], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$7([
-  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 = [this.createNewLayoutCell()];
-    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 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, targetCalendarViewDate) {
-    return calendarEvents.map((item, index) => {
-      if (item) {
-        return (h("div", { key: item.eventKey, class: this.viewMode === 'month' ? 'month-event-block' : 'day-event-block', style: this.getEventStyle(item, currentViewIndex, index, this.viewMode === 'month'
-            ? VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop
-            : 0) }, this.eventPreviewPopoverRenderer.render(item, targetCalendarViewDate, {
-          '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([
-  MapToComponentField()
-], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$6([
-  MapToComponentField()
-], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$6([
-  MapToComponentField()
-], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
-__decorate$6([
-  MapToComponentField()
-], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventPreviewPopoverRenderer", void 0);
-
-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;
-};
-class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * Update the show all flag to true when click the more button
-     *
-     * @param {MouseEvent} e event object
-     */
-    this.updateShowAllFlag = (e) => {
-      e.stopPropagation();
-      this.showAllEventsInDayOrWeekView = true;
-    };
-  }
-  /**
-   * Render the more button element
-   *
-   * @param {number} count the hidden elements count
-   * @returns {Nullable<HTMLElement>} more button
-   */
-  render(count) {
-    if (!this.showAllEventsInDayOrWeekView) {
-      return (h("div", { tabIndex: 0, role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick(), onClick: this.updateShowAllFlag }, `${count} More`));
-    }
-  }
-  /**
-   * Reset the show all event flag when view mode change
-   */
-  resetShowAllFlag() {
-    this.showAllEventsInDayOrWeekView = false;
-  }
-}
-__decorate$5([
-  MapToComponentField({ writable: true })
-], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$5([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
-
-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;
-};
-/**
- * Render a red line that representing the current time
- */
-class VegaCalendarTimeMarkerRenderer extends VegaSlimmer {
-  /**
-   * takes an array of `CalendarDate` objects as input and returns an HTML element
-   *
-   * @param {CalendarDate[]} source
-   * @returns {HTMLElement} the html element
-   */
-  render(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday(this.timezone)) >= 0;
-    return (h("div", { class: {
-        'time-marker-container': true,
-        'hidden': !isVisible,
-      } },
-      h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return h("div", { key: item.date, class: { active: item.isToday(this.timezone) } });
-      }))));
-  }
-  /**
-   * 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);
-  }
-  /**
-   * Should display the current time block in the view if the default view mode is not month
-   */
-  displayCurrentTimeBlockByDefault() {
-    this.scrollToTargetTimeBlock(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;
-    if (this.timezone && this.timezone !== getSystemTimezone()) {
-      try {
-        const formatter = new Intl.DateTimeFormat([], {
-          timeZone: this.timezone,
-          hour: '2-digit',
-          minute: '2-digit',
-          hour12: false,
-        });
-        const parts = formatter.formatToParts(now);
-        const hourPart = parts.find((part) => part.type === 'hour');
-        const minutePart = parts.find((part) => part.type === 'minute');
-        if (hourPart !== undefined && minutePart !== undefined) {
-          const hours = parseInt(hourPart.value, 10);
-          const minutes = parseInt(minutePart.value, 10);
-          return ((hours * 60 + minutes) / minutesOneDay) * 100 + '%';
-        }
-      }
-      catch (_a) {
-        LogUtility.warn('Invalid timezone:', this.timezone);
-      }
-    }
-    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
-  }
-  /*
-   * 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}
-   * @see{module:vega-calendar-scroll-to-center-position}
-   */
-  /* 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.
-      const oneFrame = 16;
-      setTimeout(() => {
-        const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
-        const top = Math.max(0, this.getViewCenterPosition());
-        if (calendarViewElement && top) {
-          calendarViewElement.scrollTo({ top });
-        }
-      }, oneFrame);
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   * @see{module:vega-calendar-scroll-to-center-position}
-   */
-  /* istanbul ignore next */
-  /**
-   * Get the center position of the display area.
-   * <div class='calendar-view'>
-   *   <div class='calendar-view-title-container'></div>
-   *   <div class='display-view'>
-   *   <div class='empty-space'></div>
-   * 		<div class='time-marker'></div>
-   *   </div>
-   * </div>
-   *
-   * @returns {number}
-   */
-  getViewCenterPosition() {
-    const calendarViewElement = this.viewRenderer.getCalendarViewElementRef();
-    if (calendarViewElement) {
-      const fixedWeekHeader = calendarViewElement.querySelector('.calendar-view-title-container');
-      const weekHeaderHeight = fixedWeekHeader ? fixedWeekHeader.offsetHeight : 0;
-      const viewHeight = typeof calendarViewElement.offsetHeight === 'number' ? calendarViewElement.offsetHeight : 0;
-      const displayViewHeight = Math.max(viewHeight - weekHeaderHeight, 0);
-      const halfDisplayViewHeight = displayViewHeight / 2;
-      const viewScrollHeight = typeof calendarViewElement.scrollHeight === 'number' ? calendarViewElement.scrollHeight : 0;
-      const emptySpace = 16;
-      const timeMarkerTop = (Number(this.getTimeMarkerPosition().replace('%', '')) / 100) *
-        Math.max(viewScrollHeight - emptySpace - weekHeaderHeight, 0);
-      if (!isNaN(halfDisplayViewHeight) && timeMarkerTop && timeMarkerTop > halfDisplayViewHeight) {
-        return timeMarkerTop - halfDisplayViewHeight + emptySpace;
-      }
-    }
-    return 0;
-  }
-}
-__decorate$4([
-  MapToComponentField()
-], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaCalendarTimeMarkerRenderer.prototype, "timezone", void 0);
-__decorate$4([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
-__decorate$4([
-  MapToComponentMethod('disconnectedCallback')
-], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
-__decorate$4([
-  MapToComponentMethod('connectedCallback')
-], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$4([
-  MapToComponentMethod('componentDidLoad')
-], VegaCalendarTimeMarkerRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
-
-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;
-};
-/**
- * Controller for managing the post-operation date in the Vega Calendar.
- */
-class VegaCalendarPostOperationDateController extends VegaSlimmer {
-  /**
-   * Set new current date
-   *
-   * @param {CalendarDate} currentDate new value
-   */
-  setPostOperationDate(currentDate) {
-    this.postOperationDate = currentDate;
-  }
-  /**
-   * Set post operation Date when the current period changes
-   *
-   * @param {CalendarPeriod} newValue the new calendar period
-   * @param {CalendarPeriod} oldValue the prev calendar period
-   */
-  setDate(newValue, oldValue) {
-    if (newValue.current !== this.postOperationDate) {
-      if (this.shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue)) {
-        const currentDate = newValue.current.toDate();
-        if (currentDate) {
-          currentDate.setDate(1);
-          this.setPostOperationDate(CalendarDate.from(currentDate));
-        }
-      }
-      else {
-        this.setPostOperationDate(CalendarDate.from(newValue.current.toDate()));
-      }
-    }
-  }
-  /**
-   * Handle timezone changes by updating postOperationDate
-   *
-   */
-  updateAfterTimezoneChange() {
-    this.postOperationDate = CalendarDate.from(new Date(), this.timezone);
-  }
-  /**
-   * Check if the first date should be set
-   * Both the new and old values are of the month type.
-   * The new date is not equal to the current date.
-   *
-   * @param {CalendarPeriod} newValue The new calendar period
-   * @param {CalendarPeriod} oldValue The old calendar period
-   * @returns {boolean} True if the first date should be set, false otherwise
-   */
-  shouldSetCurrentDateToFirstDayOfMonth(newValue, oldValue) {
-    return (newValue.type === 'month' &&
-      (oldValue === null || oldValue === void 0 ? void 0 : oldValue.type) === 'month' &&
-      !newValue.current.equal(CalendarDate.from(new Date(), this.timezone)));
-  }
-}
-__decorate$3([
-  MapToComponentField({ writable: true })
-], VegaCalendarPostOperationDateController.prototype, "postOperationDate", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaCalendarPostOperationDateController.prototype, "timezone", void 0);
-__decorate$3([
-  MapToComponentMethod('watchCurrentPeriodChange')
-], VegaCalendarPostOperationDateController.prototype, "setDate", null);
-__decorate$3([
-  MapToComponentMethod('watchTimezoneChange')
-], VegaCalendarPostOperationDateController.prototype, "updateAfterTimezoneChange", null);
-
-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;
-};
-class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.popoverHideObserver = null;
-  }
-  render(event, targetCalendarViewDate, classMap) {
-    return this.enabledEventPreview
-      ? this.renderPreviewPopover(event, classMap, targetCalendarViewDate)
-      : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
-  }
-  renderPreviewPopover(event, classMap, targetCalendarViewDate) {
-    return (h("vega-popover", { placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
-        'event-preview-popover': true,
-        'block': true,
-      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
-        this.setPopoverHideObserver(el);
-      } },
-      h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
-      h("div", { slot: "popover" },
-        h("div", { class: "preview-container", ref: (el) => {
-            el
-              ? this.eventPreviewPopoverController.setEventPreviewContainerMap(event, targetCalendarViewDate, el)
-              : this.eventPreviewPopoverController.deleteEventPreviewContainer(event, targetCalendarViewDate);
-          } }))));
-  }
-  setPopoverHideObserver(popover) {
-    if (popover) {
-      this.popoverHideObserver = new Observer((_payload) => true, async () => await popover.hide());
-      ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
-    }
-    else if (this.popoverHideObserver) {
-      ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
-    }
-  }
-}
-VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "host", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "renderer", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "viewMode", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "timeFormat", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
-__decorate$2([
-  MapToComponentField()
-], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", 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;
-};
-/** Event preview popover controller */
-class VegaCalendarEventPreviewPopoverController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.singleEventPreviewContainerMap = new Map();
-    this.groupEventsPreviewContainerMap = new Map();
-  }
-  /**
-   * Set the event preview container for the given events
-   *
-   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
-   * @param {CalendarDate} viewDate - The current date
-   * @param {HTMLElement} container - The HTML element to be used as the preview container
-   */
-  setEventPreviewContainerMap(events, viewDate, container) {
-    const map = Array.isArray(events)
-      ? this.groupEventsPreviewContainerMap
-      : this.singleEventPreviewContainerMap;
-    map.set(this.generateMapKey(events, viewDate), container);
-  }
-  /**
-   * Delete the event preview container for the given events
-   *
-   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
-   * @param {CalendarDate} viewDate - The current date
-   */
-  deleteEventPreviewContainer(events, viewDate) {
-    const map = Array.isArray(events)
-      ? this.groupEventsPreviewContainerMap
-      : this.singleEventPreviewContainerMap;
-    map.delete(this.generateMapKey(events, viewDate));
-  }
-  /**
-   * Get the event preview container for the given event
-   *
-   * @param {CalendarEvent} event - The calendar event
-   * @param {CalendarDate} viewDate - The current date
-   * @param {boolean} isGroup - Whether the event is part of a group
-   * @returns {Nullable<HTMLElement>} - The HTML element used as the preview container, or null if not found
-   */
-  getEventPreviewContainer(event, viewDate, isGroup) {
-    const map = isGroup
-      ? this.groupEventsPreviewContainerMap
-      : this.singleEventPreviewContainerMap;
-    const singleKey = this.generateMapKey(event, viewDate);
-    if (map.has(singleKey)) {
-      return map.get(singleKey);
-    }
-    else {
-      const dateString = this.getDateString(viewDate);
-      const groupKey = Array.from(map.keys()).find((key) => key.includes(event.eventKey) && key.endsWith(dateString));
-      if (groupKey) {
-        return map.get(groupKey);
-      }
-    }
-  }
-  /**
-   *  clear all preview container maps when timezone changes
-   *
-   */
-  clearAllPreviewContainers() {
-    this.singleEventPreviewContainerMap.clear();
-    this.groupEventsPreviewContainerMap.clear();
-  }
-  /**
-   * Generate a unique key for the given events
-   *
-   * @param {Nullable<CalendarEvent>[] | CalendarEvent} events - The calendar event(s)
-   * @param {CalendarDate} viewDate - The current date
-   * @returns {string} - A unique string key representing the event(s)
-   */
-  generateMapKey(events, viewDate) {
-    const dateString = this.getDateString(viewDate);
-    return Array.isArray(events)
-      ? events
-        .filter((event) => event)
-        .map((event) => event.eventKey)
-        .join('-') + dateString
-      : events.eventKey + dateString;
-  }
-  /**
-   * Get a date string in the format "-YYYY-M-D" for the given date
-   *
-   * @param {CalendarDate} viewDate - The date object
-   * @returns {string} - The formatted date string, or an empty string if the date is null
-   */
-  getDateString(viewDate) {
-    return `-${viewDate.year}-${viewDate.month}-${viewDate.date}`;
-  }
-}
-__decorate$1([
-  MapToComponentMethod('watchTimezoneChange')
-], VegaCalendarEventPreviewPopoverController.prototype, "clearAllPreviewContainers", null);
-
-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-top.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-left.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1))}.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-weekday-columns:7}.calendar-view.calendar-hide-weekends{--calendar-weekday-columns:5}.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(var(--calendar-weekday-columns), 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{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(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-event-all{grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .calendar-view-container .calendar-view-day-container .calendar-view-content{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .time-marker-container .time-marker{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), minmax(64px, 1fr))}.calendar-view-week .day-event-container{display:grid;grid-template-columns:repeat(var(--calendar-weekday-columns), 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;flex-grow:1}.calendar-view-month .events-container .event-list{display:flex;flex-direction:column;gap:2px;flex-grow:1}.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 .calendar-view-event-all .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;margin-left:2px;padding:2px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar-view-container .calendar-view-event-all .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-container .calendar-view-event-all .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-container .calendar-view-event-all .more-button{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}.calendar-view-container .calendar-view-event-all .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 .event-all-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.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}.calendar-event-slot-container{display:none}.event-preview-popover{height:100%}.event-preview-popover.block{display:block}.event-preview-popover .event-preview-popover-content{height: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 VegaCalendar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.vegaChange = createEvent(this, "vegaChange", 7);
-    this.change = createEvent(this, "change", 7);
-    this.vegaEventClick = createEvent(this, "vegaEventClick", 7);
-    this.eventClick = createEvent(this, "eventClick", 7);
-    this.vegaDateDblClick = createEvent(this, "vegaDateDblClick", 7);
-    this.dateDblClick = createEvent(this, "dateDblClick", 7);
-    this.vegaDateClick = createEvent(this, "vegaDateClick", 7);
-    this.dateClick = createEvent(this, "dateClick", 7);
-    this.vegaMoreActionClick = createEvent(this, "vegaMoreActionClick", 7);
-    this.moreActionClick = createEvent(this, "moreActionClick", 7);
-    this.globalSlimmer = {};
-    this.translationSlimmer = new TranslationSlimmer();
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new 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.timeMarkerRenderer = new VegaCalendarTimeMarkerRenderer();
-    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();
-    // Date after recording the operation
-    this.postOperationDateController = new VegaCalendarPostOperationDateController();
-    this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
-    this.eventPreviewPopoverController = new VegaCalendarEventPreviewPopoverController();
-    this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
-    this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
-    this.eventItemRenderer = new VegaCalendarEventItemRenderer();
-    this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
-    this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
-    this.eventPreviewPopoverRenderer = new VegaCalendarEventPreviewPopoverRenderer();
-    this.calendarEventController = new VegaCalendarEventController();
-    this.eventResponsiveController = new VegaCalendarEventResponsiveController();
-    this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
-    this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
-    this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
-    this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
-    this.dateClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateClick);
-    this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
-    this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
-    this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
-    /**
-     * This postOperationDate will record the time after the operation, which will affect the calculation of day/week/month, making the generated interval accurate
-     *
-     * @type {CalendarDate}
-     */
-    this.postOperationDate = this.getInitialPostOperationDate();
-    this.showAllEventsInDayOrWeekView = false;
-    this.calendarEvents = [];
-    /**
-     * Specifies the current view mode of the calendar.
-     *
-     * @vegaVersion 2.14.0
-     */
-    /* eslint-disable-next-line @stencil/strict-mutable */
-    this.viewMode = 'month';
-    /**
-     * Specifies the time format of the calendar.
-     *
-     * @vegaVersion 2.14.0
-     */
-    this.timeFormat = '24-hour';
-    /**
-     * Specifies a predicate function that determines whether a given date in the calendar should be disabled (non-interactive).
-     *
-     * The function is called for each date cell before rendering.
-     *
-     * Return `true` to disable the cell, or false to keep it selectable.
-     * Default behavior: always returns `false` (no cells are disabled).
-     *
-     * @param date - The `Date` object for the cell being evaluated.
-     * @returns `true` if the cell should be disabled; otherwise `false`.
-     * @vegaVersion 2.56.0
-     */
-    this.isDateDisabled = () => false;
-    /**
-     * Controls the visibility of the calendar's event color bar.
-     *
-     * @vegaVersion 2.21.0
-     */
-    this.showEventColorBar = true;
-    /**
-     * Controls whether the switch view is displayed.
-     *
-     * @vegaVersion 2.58.0
-     */
-    this.showSwitchView = true;
-    /**
-     * Controls whether clicking on a calendar date triggers the `vegaDateClick` event. When enabled, it disables the `vegaDateDblClick` event to prevent conflicts.
-     *
-     * @vegaVersion 2.61.0
-     */
-    this.enableDateClick = false;
-    /**
-     * Controls the visibility of the weekend columns in the calendar.
-     *
-     * @vegaVersion 2.28.0
-     */
-    this.showWeekends = true;
-    /**
-     * Controls the visibility of the event preview popover while click event.
-     *
-     * @vegaVersion 2.59.0
-     */
-    this.enabledEventPreview = true;
-    /**
-     * Specifies the IANA time zone or Etc/GMT±n format.
-     *  It accepts values such as "America/New_York" or "Etc/GMT+12".
-     *  If not set, the component defaults to the system's time zone.
-     *  For a complete list of IANA time zones, see Time Zone DB(https://timezonedb.com/time-zones).
-     *
-     * @vegaVersion 2.65.0
-     */
-    this.timezone = getSystemTimezone();
-  }
-  /**
-   * Tracks changes to the current period state.
-   *
-   * @param {CalendarPeriod} newValue Specifies the new calendar period.
-   * @param {CalendarPeriod} oldValue Specifies the old calendar period.
-   */
-  watchCurrentPeriodChange(newValue, oldValue) {
-    methodPlaceholder(newValue, oldValue);
-  }
-  /**
-   * Watch the view mode change
-   *
-   * @param {VegaCalendarViewModeType} newValue the new value of view mode
-   */
-  watchViewModeChange(newValue) {
-    methodPlaceholder(newValue);
-  }
-  /**
-   * Watch the calendar events change
-   *
-   * @param {VegaCalendarRawEvent[]} newValue
-   */
-  watchEventsChange(newValue) {
-    methodPlaceholder(newValue);
-  }
-  /**
-   * Watches changes in the calendar's time format.
-   *
-   * @param {TimeFormat} newValue
-   */
-  watchTimeFormat(newValue) {
-    methodPlaceholder(newValue);
-  }
-  /**
-   * Monitors changes in the visibility of the calendar's event color bar.
-   *
-   * @param {boolean} newValue
-   */
-  watchShowEventColorBar(newValue) {
-    methodPlaceholder(newValue);
-  }
-  /**
-   * Monitors changes in the visibility of the weekend columns in the calendar.
-   */
-  watchShowWeekendsChange() {
-    methodPlaceholder();
-  }
-  /**
-   * Monitors changes in the timezone prop for the calendar.
-   */
-  watchTimezoneChange() {
-    methodPlaceholder();
-  }
-  render() {
-    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
-  }
-  /**
-   * Get initial post operation date considering timezone
-   */
-  getInitialPostOperationDate() {
-    return CalendarDate.from(new Date(), this.timezone);
-  }
-  get host() { return getElement(this); }
-  static get watchers() { return {
-    "currentPeriod": ["watchCurrentPeriodChange"],
-    "viewMode": ["watchViewModeChange"],
-    "events": ["watchEventsChange"],
-    "timeFormat": ["watchTimeFormat"],
-    "showEventColorBar": ["watchShowEventColorBar"],
-    "showWeekends": ["watchShowWeekendsChange"],
-    "timezone": ["watchTimezoneChange"]
-  }; }
-};
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaCalendar.prototype, "globalSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "translationSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "renderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "switchPanelRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "viewRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "monthViewRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "viewWithTimeRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "timeLineRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "timeMarkerRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "monthEventRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "currentPeriodController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "calendarViewController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "postOperationDateController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "eventPreviewPopoverController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "eventItemRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dayViewEventLayoutRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "eventPreviewPopoverRenderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "calendarEventController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "eventResponsiveController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "changeEventEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "eventClickEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dateDblClickEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "moreActionClickEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "dateClickEmitter", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "changeEventPrevent", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "timeFormatNotifySlimmer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendar.prototype, "showEventColorBarNotifySlimmer", void 0);
-VegaCalendar.style = vegaCalendarCss;
-
-export { VegaCalendar as vega_calendar };