@globalpayments/vega 2.36.0 → 2.37.0

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

@@ -6,12 +6,12 @@ const index = require('./index-09acd3c9.js');
 const component = require('./component-73a88c4e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5f0eae19.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
 const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
 const date = require('./date-0a6bb035.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-9c223f73.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96c3c4ae.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-af2addec.js');
 const vegaInternalEventId = require('./vega-internal-event-id-b12071ea.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const array = require('./array-5adef7b2.js');
@@ -19,17 +19,18 @@ const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtim
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-bb1eaebe.js');
 const timer = require('./timer-5f33058b.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-994eb848.js');
-const translationSlimmer = require('./translation-slimmer-ec76c5a2.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-ae490543.js');
+const translationSlimmer = require('./translation-slimmer-510906bc.js');
 const placeholder = require('./placeholder-cb6d37ad.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
 const stateBackgroundColorFormatter = require('./state-background-color-formatter-e585a027.js');
-const subStateObserverSlimmer = require('./sub-state-observer-slimmer-080a4bea.js');
+const subStateObserverSlimmer = require('./sub-state-observer-slimmer-080731bc.js');
 const pixel = require('./pixel-98f2a10c.js');
+require('./observer-f49483e8.js');
 require('./ui-5fd9b267.js');
 require('./icon-manager-edc2400b.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./internal-vega-event-manager-e5e4bcf4.js');
+require('./internal-vega-event-manager-981dfd1c.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-7b22e598.js');
 require('./index-8b247c17.js');
@@ -38,12 +39,12 @@ require('./number-4816603d.js');
 require('./breakpoints-17d6c4c7.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
-require('./translation-b9be41e0.js');
-require('./static-subject-title-d66b88fb.js');
+require('./translation-6848c389.js');
+require('./static-subject-title-c589a1bd.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (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;
@@ -62,10 +63,10 @@ class VegaCalendarRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.viewRenderer.render()));
   }
 }
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -619,7 +620,7 @@ 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$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (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;
@@ -777,32 +778,32 @@ VegaCalendarSwitchPanelRenderer.views = [
   { text: 'Week', key: 'week' },
   { text: 'Month', key: 'month' },
 ];
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (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;
@@ -810,31 +811,39 @@ var __decorate$m = (undefined && undefined.__decorate) || function (decorators,
 };
 /** renders different views based on the specified view mode using month, week, and day view render. */
 class VegaCalendarViewRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Get the calendar view content element ref
+   *
+   * @returns {HTMLElement|null} The div element.
+   */
+  getCalendarViewElementRef() {
+    return this.calendarViewElementRef;
+  }
   /**
    * render the calendar month/week/day view
    *
    * @returns {HTMLElement} html element
    */
   render() {
-    return (index.h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
+    return (index.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$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewWithTimeRenderer", void 0);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -932,29 +941,29 @@ class VegaCalendarMonthViewRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "translationSlimmer", void 0);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1008,7 +1017,7 @@ class VegaCalendarViewWithTimeRenderer extends globalSlimmerRegistry.VegaSlimmer
             this.renderHourBlock(item)));
         })),
         this.dayViewTimedEventRenderer.render(),
-        this.timeLineRenderer.renderTimeMarker(source))));
+        this.timeMarkerRenderer.render(source))));
   }
   /**
    * The function `renderHourBlock` returns an array of HTML elements representing hour blocks with time information.
@@ -1037,29 +1046,32 @@ class VegaCalendarViewWithTimeRenderer extends globalSlimmerRegistry.VegaSlimmer
     this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
   }
 }
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$k([
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1067,22 +1079,6 @@ var __decorate$j = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The `VegaCalendarTimeLineRenderer` class in TypeScript React renders a time line with custom time format options and includes methods for rendering time markers and the time line itself. */
 class VegaCalendarTimeLineRenderer extends globalSlimmerRegistry.VegaSlimmer {
-  /**
-   * takes an array of `CalendarDate` objects as input and returns an HTML element
-   *
-   * @param {CalendarDate[]} source
-   * @returns {HTMLElement} the html element
-   */
-  renderTimeMarker(source) {
-    const isVisible = source.findIndex((calendarDate) => calendarDate.isToday()) >= 0;
-    return (index.h("div", { class: {
-        'time-marker-container': true,
-        'hidden': !isVisible,
-      } },
-      index.h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
-        return index.h("div", { key: item.date, class: { active: item.isToday() } });
-      }))));
-  }
   /**
    * rendering the time line component as an HTML element
    *
@@ -1090,50 +1086,13 @@ class VegaCalendarTimeLineRenderer extends globalSlimmerRegistry.VegaSlimmer {
    */
   render() {
     const timeLineSource = this.getTimeLineTitles();
-    return (index.h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+    return (index.h("div", { class: "time-line" },
       index.h("div", { class: "hour-empty" }),
       timeLineSource.map((time, index$1) => {
         return (index.h("div", { key: time },
           index.h("div", { class: "time-text", "data-time": index$1 === 0 ? 24 : index$1 }, time)));
       })));
   }
-  /**
-   * scroll to current time line block if change view mode to week or day
-   *
-   * @param {VegaCalendarViewModeType} viewMode the view mode
-   */
-  updateTimeLine(viewMode) {
-    this.scrollToTargetTimeBlock(viewMode);
-    this.syncTimeMarkerPosition(viewMode);
-  }
-  /**
-   * remove setInterval when component destroy
-   */
-  clearTimer() {
-    clearInterval(this.timeMarkerPositionTimer);
-  }
-  /**
-   * Add the time mark position update logic if the component add back to page
-   */
-  updateTimeLineIfComponentAddBack() {
-    this.syncTimeMarkerPosition(this.viewMode);
-  }
-  /**
-   * 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;
-    return ((now.getHours() * 60 + now.getMinutes()) / minutesOneDay) * 100 + '%';
-  }
   /**
    * The function `getTimeLineTitles` generates a time line array based on the specified time format (24-hour) and stores it in the `timeLineSource` property.
    *
@@ -1158,68 +1117,12 @@ class VegaCalendarTimeLineRenderer extends globalSlimmerRegistry.VegaSlimmer {
     }
     return timeLine;
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update the time marker position with the time
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   */
-  syncTimeMarkerPosition(viewMode) {
-    clearInterval(this.timeMarkerPositionTimer);
-    if (viewMode !== 'month') {
-      this.timeMarkerPositionTimer = setInterval(() => {
-        if (this.timeMarkerRef) {
-          this.timeMarkerRef.style.top = this.getTimeMarkerPosition();
-        }
-      }, 60 * 1000);
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-calendar-scroll-to-current-time}
-   */
-  /* istanbul ignore next */
-  /**
-   * scroll the time line in to current view
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   */
-  scrollToTargetTimeBlock(viewMode) {
-    if (viewMode !== 'month') {
-      // add setTimeout here to make sure call the scroll into view after time line rendered.
-      const oneFrame = 16;
-      setTimeout(() => {
-        var _a, _b;
-        const hour = new Date().getHours();
-        (_b = (_a = this.timeLineRef) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-time='${hour < 23 ? hour + 1 : hour}']`)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({ block: 'end' });
-      }, oneFrame);
-    }
-  }
 }
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$j([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
-], VegaCalendarTimeLineRenderer.prototype, "displayCurrentTimeBlockByDefault", null);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1272,26 +1175,26 @@ class VegaCalendarViewController extends globalSlimmerRegistry.VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarViewController.prototype, "generateCalendarView", null);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1395,32 +1298,32 @@ class VegaCalendarCurrentPeriodController extends globalSlimmerRegistry.VegaSlim
     };
   }
 }
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentMethod('watchShowWeekendsChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1577,22 +1480,22 @@ class VegaCalendarMonthEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return rowEvents;
   }
 }
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -2453,7 +2356,7 @@ class CalendarEvent {
   }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2559,23 +2462,23 @@ class VegaCalendarEventController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], VegaCalendarEventController.prototype, "updateWhenComponentWillLoad", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2605,17 +2508,17 @@ class VegaCalendarEventItemRenderer extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventClickEmitter", void 0);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2667,23 +2570,23 @@ class VegaCalendarEventResponsiveController extends pageResizeObserverSlimmer.Pa
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCountAfterSwitchToMonthView", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2748,26 +2651,26 @@ class VegaCalendarFullDayEventRenderer extends globalSlimmerRegistry.VegaSlimmer
   }
 }
 VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -2832,7 +2735,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends globalSlimmerRegistry.VegaS
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
 
@@ -3118,7 +3021,7 @@ class VegaCalendarEventSorter {
   }
 }
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3157,13 +3060,13 @@ class VegaCalendarTimedEventRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return this.dayViewEventLayoutRenderer.render(layout);
   }
 }
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3332,7 +3235,7 @@ class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEventLayou
   }
 }
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3417,17 +3320,17 @@ class VegaCalendarFullDayEventLayoutRenderer extends globalSlimmerRegistry.VegaS
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "calendarView", void 0);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -3464,13 +3367,176 @@ class VegaCalendarFullDayEventMoreButtonRenderer extends globalSlimmerRegistry.V
     this.showAllEventsInDayOrWeekView = false;
   }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);
 
+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;
+};
+/**
+ * Render a red line that representing the current time
+ */
+class VegaCalendarTimeMarkerRenderer extends globalSlimmerRegistry.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()) >= 0;
+    return (index.h("div", { class: {
+        'time-marker-container': true,
+        'hidden': !isVisible,
+      } },
+      index.h("div", { class: "time-marker", style: { top: this.getTimeMarkerPosition() }, ref: (div) => (this.timeMarkerRef = div) }, source.map((item) => {
+        return index.h("div", { key: item.date, class: { active: item.isToday() } });
+      }))));
+  }
+  /**
+   * 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;
+    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.offsetHeight;
+      const viewHeight = calendarViewElement.offsetHeight;
+      const displayViewHeight = Math.max(viewHeight - weekHeaderHeight, 0);
+      const halfDisplayViewHeight = displayViewHeight / 2;
+      const viewScrollHeight = calendarViewElement.scrollHeight;
+      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$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaCalendarTimeMarkerRenderer.prototype, "displayCurrentTimeBlockByDefault", 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-left{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-right-width:0px;border-bottom-width:0px}.border-divider-right{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-bottom-width:0px}.border-divider-bottom{border:1px solid rgba(var(--v-border-divider-secondary, 199, 217, 229, 1));border-top-width:0px;border-left-width:0px;border-right-width:0px}:host{display:flex;flex-direction:column;border-radius:12px;border:1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));overflow:hidden;width:100%;height:100%;box-sizing:border-box;max-height:1966px}.calendar-switch-panel{padding:24px;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1));flex-shrink:0;width:100%;box-sizing:border-box}.calendar-switch-panel .calendar-date-switch-container{display:flex;gap:8px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-view-switch-container{display:flex;gap:16px;align-items:center;flex-direction:row}.calendar-switch-panel .calendar-current-date{padding-left:8px}.calendar-view{width:100%;position:relative;flex-grow:1;overflow-y:auto;overflow-x:hidden;--calendar-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}";
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3503,8 +3569,9 @@ const VegaCalendar = class {
     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
+    //The current period controller  should be before the calendar view controller because the initial current period should be before the initial calendar view
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
@@ -3631,6 +3698,9 @@ __decorate$7([
 __decorate$7([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate$7([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeMarkerRenderer", void 0);
 __decorate$7([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthEventRenderer", void 0);