@globalpayments/vega 2.35.0 → 2.37.0

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

@@ -2,30 +2,31 @@ import { h, F as Fragment, f as forceUpdate, r as registerInstance, c as createE
 import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-dc486a8b.js';
-import { a as VegaClick, f as VegaChange, b as VegaDropdownClick, d as domNodeSubjectFactory, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick } from './dom-node-subject-factory-5831cdd4.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
+import { a as VegaClick, f as VegaChange, b as VegaDropdownClick, d as domNodeSubjectFactory, g as VegaEventClick, h as VegaDateDblClick, i as VegaMoreActionClick } from './dom-node-subject-factory-97deb349.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
 import { p as pad } from './date-732bc749.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-f285e3ac.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-97aae8a8.js';
-import { m as VegaInternalCalendarMonthEventsChange } from './vega-internal-event-id-4af5c6e9.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3220fa5b.js';
+import { n as VegaInternalCalendarMonthEventsChange } from './vega-internal-event-id-458939b6.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { f as flatNestedArray } from './array-b668466e.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-beb7b0bd.js';
 import { d as debounce } from './timer-9321173b.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-48bad548.js';
-import { T as TranslationSlimmer } from './translation-slimmer-5ee9912b.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-4a201088.js';
+import { T as TranslationSlimmer } from './translation-slimmer-7974f30b.js';
 import { s as slotPlaceholder } from './placeholder-bf562081.js';
 import { q as isBackgroundColorTokenType } from './type-guard-158f6d7a.js';
 import { s as stateBackgroundColorFormatter } from './state-background-color-formatter-121ae7d3.js';
-import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-403cc4e7.js';
+import { S as SubStateObserverSlimmer } from './sub-state-observer-slimmer-0d6da563.js';
 import { b as parsePixelStringToNumber } from './pixel-f32c07ce.js';
+import './observer-3959f9dd.js';
 import './ui-62e4be97.js';
 import './icon-manager-b889176b.js';
 import './dynamic-slimmer-90b8af32.js';
-import './internal-vega-event-manager-07e1b3d9.js';
+import './internal-vega-event-manager-0a01ba12.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-4b3fe6f8.js';
 import './index-44c794b4.js';
@@ -34,12 +35,12 @@ import './number-4398f2e1.js';
 import './breakpoints-91116111.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
-import './translation-a98970d8.js';
-import './static-subject-title-e06a3840.js';
+import './translation-c08f2274.js';
+import './static-subject-title-8268945e.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.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;
@@ -58,10 +59,10 @@ class VegaCalendarRenderer extends VegaSlimmer {
       this.viewRenderer.render()));
   }
 }
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "switchPanelRenderer", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], VegaCalendarRenderer.prototype, "viewRenderer", void 0);
 
@@ -615,7 +616,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;
@@ -773,32 +774,32 @@ VegaCalendarSwitchPanelRenderer.views = [
   { text: 'Week', key: 'week' },
   { text: 'Month', key: 'month' },
 ];
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "viewMode", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarView", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriod", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionDropdownProps", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "moreActionClickEmitter", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "currentPeriodController", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
-__decorate$n([
+__decorate$o([
   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;
@@ -806,31 +807,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 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 (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
+    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$m([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);
-__decorate$m([
+__decorate$n([
   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;
@@ -928,29 +937,29 @@ class VegaCalendarMonthViewRenderer extends VegaSlimmer {
     return !element.classList.contains('more-button') && element.tagName !== 'VEGA-CALENDAR-EVENT';
   }
 }
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "viewMode", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "calendarView", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriod", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "currentPeriodController", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "monthEventRenderer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], VegaCalendarMonthViewRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$l([
+__decorate$m([
   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;
@@ -1004,7 +1013,7 @@ class VegaCalendarViewWithTimeRenderer extends 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.
@@ -1033,29 +1042,32 @@ class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
     this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
   }
 }
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "viewMode", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "timeLineRenderer", void 0);
-__decorate$k([
+__decorate$l([
+  MapToComponentField()
+], VegaCalendarViewWithTimeRenderer.prototype, "timeMarkerRenderer", void 0);
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewTimedEventRenderer", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dayViewFullDayEventRenderer", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
-__decorate$k([
+__decorate$l([
   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;
@@ -1063,22 +1075,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 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 (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() } });
-      }))));
-  }
   /**
    * rendering the time line component as an HTML element
    *
@@ -1086,50 +1082,13 @@ class VegaCalendarTimeLineRenderer extends VegaSlimmer {
    */
   render() {
     const timeLineSource = this.getTimeLineTitles();
-    return (h("div", { class: "time-line", ref: (div) => (this.timeLineRef = div) },
+    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)));
       })));
   }
-  /**
-   * 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.
    *
@@ -1154,68 +1113,12 @@ class VegaCalendarTimeLineRenderer extends 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([
   MapToComponentField()
 ], VegaCalendarTimeLineRenderer.prototype, "timeFormat", void 0);
-__decorate$j([
-  MapToComponentField()
-], VegaCalendarTimeLineRenderer.prototype, "viewMode", void 0);
-__decorate$j([
-  MapToComponentMethod('watchViewModeChange')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLine", null);
-__decorate$j([
-  MapToComponentMethod('disconnectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "clearTimer", null);
-__decorate$j([
-  MapToComponentMethod('connectedCallback')
-], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
-__decorate$j([
-  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;
@@ -1268,26 +1171,26 @@ class VegaCalendarViewController extends VegaSlimmer {
     this.calendarView = newView;
   }
 }
-__decorate$i([
+__decorate$j([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "showWeekends", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarViewController.prototype, "initialCalendarView", null);
-__decorate$i([
+__decorate$j([
   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;
@@ -1391,32 +1294,32 @@ class VegaCalendarCurrentPeriodController extends VegaSlimmer {
     };
   }
 }
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('watchCurrentPeriodChange')
 ], VegaCalendarCurrentPeriodController.prototype, "emitChangeEvent", null);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
-__decorate$h([
+__decorate$i([
   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;
@@ -1573,22 +1476,22 @@ class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     return rowEvents;
   }
 }
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "viewMode", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaCalendarMonthEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarMonthEventRenderer.prototype, "addMaxDisplayCountChange", null);
 
@@ -2449,7 +2352,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;
@@ -2555,23 +2458,23 @@ class VegaCalendarEventController extends VegaSlimmer {
     }
   }
 }
-__decorate$f([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "currentPeriod", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('watchEventsChange')
 ], VegaCalendarEventController.prototype, "updateAfterEventChange", null);
-__decorate$f([
+__decorate$g([
   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;
@@ -2601,17 +2504,17 @@ class VegaCalendarEventItemRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);
-__decorate$e([
+__decorate$f([
   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;
@@ -2663,23 +2566,23 @@ class VegaCalendarEventResponsiveController extends PageResizeObserverSlimmer {
   }
 }
 VegaCalendarEventResponsiveController.monthDateTitleHeight = 26;
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "host", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "monthEventRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaCalendarEventResponsiveController.prototype, "viewMode", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], VegaCalendarEventResponsiveController.prototype, "updateMaxDisplayCount", null);
-__decorate$d([
+__decorate$e([
   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;
@@ -2744,26 +2647,26 @@ class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$c([
+__decorate$d([
   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;
@@ -2828,7 +2731,7 @@ class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells = 24 * 4;
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaCalendarDayViewEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
 
@@ -3114,7 +3017,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;
@@ -3153,13 +3056,13 @@ class VegaCalendarTimedEventRenderer extends VegaSlimmer {
     return this.dayViewEventLayoutRenderer.render(layout);
   }
 }
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarView", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "calendarEventController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], VegaCalendarTimedEventRenderer.prototype, "dayViewEventLayoutRenderer", void 0);
 
@@ -3328,7 +3231,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;
@@ -3413,17 +3316,17 @@ class VegaCalendarFullDayEventLayoutRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarFullDayEventLayoutRenderer.monthViewEventOffsetTop = 26;
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "eventItemRenderer", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaCalendarFullDayEventLayoutRenderer.prototype, "viewMode", void 0);
-__decorate$9([
+__decorate$a([
   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;
@@ -3460,13 +3363,176 @@ class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
     this.showAllEventsInDayOrWeekView = false;
   }
 }
-__decorate$8([
+__decorate$9([
   MapToComponentField({ writable: true })
 ], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
-__decorate$8([
+__decorate$9([
   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 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 (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() } });
+      }))));
+  }
+  /**
+   * 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([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewMode", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaCalendarTimeMarkerRenderer.prototype, "viewRenderer", void 0);
+__decorate$8([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLine", null);
+__decorate$8([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "clearTimer", null);
+__decorate$8([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarTimeMarkerRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate$8([
+  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) {
@@ -3499,8 +3565,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();
@@ -3627,6 +3694,9 @@ __decorate$7([
 __decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "timeLineRenderer", void 0);
+__decorate$7([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "timeMarkerRenderer", void 0);
 __decorate$7([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "monthEventRenderer", void 0);