@globalpayments/vega 2.26.0 → 2.28.0

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.css

@@ -48,6 +48,11 @@
   margin-left: 4px;
 }
 
+:host(:first-child) vega-tooltip:has(vega-button),
+:host(:first-child) vega-dropdown:has(vega-button) {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
 :host(:first-child) vega-button::part(button) {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -56,6 +61,11 @@
   margin-left: 0;
 }
 
+:host(:last-child) vega-tooltip:has(vega-button),
+:host(:last-child) vega-dropdown:has(vega-button) {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
 :host(:last-child) vega-button::part(button) {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;

package/dist/collection/components/vega-button-group/vega-button-group-item/vega-button-group-item.js

@@ -11,7 +11,7 @@ import { VegaButtonGroupItemSubStateController } from './slimmers/controllers/ve
 import { VegaButtonGroupItemRenderer } from './slimmers/renderers/vega-button-group-item-renderer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 /**
- * @version 2.5.0
+ * @vegaVersion 2.5.0
  */
 export class VegaButtonGroupItem {
   constructor() {
@@ -25,7 +25,7 @@ export class VegaButtonGroupItem {
     /**
      * Specifies whether to display the icon only.
      *
-     * @version 2.5.0
+     * @vegaVersion 2.5.0
      */
     this.iconOnly = false;
   }
@@ -53,7 +53,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the icon to be displayed on the button item,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
@@ -73,7 +73,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the text displayed on the button item."
@@ -93,7 +93,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies whether to display the icon only."
@@ -114,7 +114,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the unique key for the button item."
@@ -139,7 +139,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the properties for the dropdown menu that appears when the button group contains more than one button item."
@@ -166,7 +166,7 @@ export class VegaButtonGroupItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Defines the data source used to populate the dropdown menu when the button group contains more than one button item."

package/dist/collection/components/vega-button-group/vega-button-group.css

@@ -5,12 +5,25 @@
  */
 :host {
   display: inline-block;
+  border-radius: 9999px;
 }
 
 .vega-button-group-primary {
   gap: 6px;
 }
 
+.vega-button-group-container:not(.vega-button-group-tertiary) {
+  border-radius: 9999px;
+}
+.vega-button-group-container:not(.vega-button-group-tertiary) > ::slotted(.vega-button-group-item:first-child) {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+.vega-button-group-container:not(.vega-button-group-tertiary) > ::slotted(.vega-button-group-item:last-child) {
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+}
+
 .vega-button-group-tertiary > ::slotted(.vega-button-group-item) {
   padding-left: 12px;
   padding-right: 12px;

package/dist/collection/components/vega-button-group/vega-button-group.js

@@ -15,7 +15,7 @@ import { VegaButtonGroupClickController } from './slimmers/controllers/vega-butt
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonGroupRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-group/runtime-metrics-payload-definition';
 /**
- * @version 2.5.0
+ * @vegaVersion 2.5.0
  */
 export class VegaButtonGroup {
   constructor() {
@@ -32,19 +32,19 @@ export class VegaButtonGroup {
      *
      * It determines how the button group will be presented to the user.
      *
-     * @version 2.5.0
+     * @vegaVersion 2.5.0
      */
     this.variant = 'primary';
     /**
      * Specifies the size of the button group.
      *
-     * @version 2.5.0
+     * @vegaVersion 2.5.0
      */
     this.size = 'default';
     /**
      * Specifies the placement of the icon in relation to the button's label.
      *
-     * @version 2.5.0
+     * @vegaVersion 2.5.0
      */
     this.iconAlign = 'left';
   }
@@ -89,7 +89,7 @@ export class VegaButtonGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the visual style and prominence of the button group.\n\nIt determines how the button group will be presented to the user."
@@ -115,7 +115,7 @@ export class VegaButtonGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the size of the button group."
@@ -141,7 +141,7 @@ export class VegaButtonGroup {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "Specifies the placement of the icon in relation to the button's label."
@@ -159,7 +159,7 @@ export class VegaButtonGroup {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "An event emitter notifying the click event of the button group."
@@ -180,7 +180,7 @@ export class VegaButtonGroup {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.5.0"
           }],
         "text": "An event emitter notifying the click event of the button."

package/dist/collection/components/vega-button-link/vega-button-link.js

@@ -13,7 +13,7 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaButtonLinkRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-button-link/runtime-metrics-payload-definition';
 /**
- * @version 1.0.2
+ * @vegaVersion 1.0.2
  */
 export class VegaButtonLink {
   constructor() {
@@ -24,13 +24,13 @@ export class VegaButtonLink {
     /**
      * Specifies the URL associated with the button link.
      *
-     * @version 1.0.4
+     * @vegaVersion 1.0.4
      */
     this.link = VegaButtonLink.defaultLink;
     /**
      * Specifies the size of the button link.
      *
-     * @version 1.0.2
+     * @vegaVersion 1.0.2
      */
     this.size = 'default';
     /**
@@ -45,34 +45,34 @@ export class VegaButtonLink {
      *      providing additional emphasis and visual prominence
      *      to the icon in the button link.
      *
-     * @version 1.0.5
+     * @vegaVersion 1.0.5
      */
     this.iconType = 'icon';
     /**
      * Specifies the placement of the icon in relation to
      *    the button link's label.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.iconAlign = 'left';
     /**
      * Specifies the text displayed on the button link.
      *
-     * @version 1.0.4
+     * @vegaVersion 1.0.4
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.label = '';
     /**
      * Specifies whether the button link element is disabled.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.disabled = false;
     /**
      * Indicates the danger status of the button link,
      *    typically used for destructive actions.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.danger = false;
     /**
@@ -85,7 +85,7 @@ export class VegaButtonLink {
      *
      * @deprecated Setting the `link` property internally manages the eventful state of a Button Link.
      *
-     * @version 1.3.0
+     * @vegaVersion 1.3.0
      */
     this.eventful = true;
     this.onClick = (e) => {
@@ -178,7 +178,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.4"
           }],
         "text": "Specifies the URL associated with the button link."
@@ -199,7 +199,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.2"
           }],
         "text": "Specifies the size of the button link."
@@ -220,7 +220,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.4"
           }],
         "text": "Specifies the icon to be displayed on the button link,\n   which can be selected from a list of predefined icon tokens\n   or specified using a Font Awesome class."
@@ -240,7 +240,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.5"
           }],
         "text": "Specifies the type of icon used in the button link.\n\nThe following options are available for the `iconType` parameter:\n- `icon`:\n     The icon is rendered as a regular icon without\n     any additional styling or background.\n- `button`:\n     The icon is rendered with a circular background,\n     providing additional emphasis and visual prominence\n     to the icon in the button link."
@@ -261,7 +261,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies the placement of the icon in relation to\n   the button link's label."
@@ -282,7 +282,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.4"
           }],
         "text": "Specifies the text displayed on the button link."
@@ -303,7 +303,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the button link element is disabled."
@@ -324,7 +324,7 @@ export class VegaButtonLink {
       "optional": false,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Indicates the danger status of the button link,\n   typically used for destructive actions."
@@ -348,7 +348,7 @@ export class VegaButtonLink {
             "name": "deprecated",
             "text": "Setting the `link` property internally manages the eventful state of a Button Link."
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.3.0"
           }],
         "text": "Specifies whether the button link will emit a vegaClick event when clicked.\n\n- If set to `true`, the event will be emitted.\n- If set to `false`, the component will function as\n   a regular link to another page or URL,\n   and no events will be emitted."
@@ -366,7 +366,7 @@ export class VegaButtonLink {
       "composed": true,
       "docs": {
         "tags": [{
-            "name": "version",
+            "name": "vegaVersion",
             "text": "1.0.11"
           }],
         "text": "An event emitter notifying the click event of the button."
@@ -387,7 +387,7 @@ export class VegaButtonLink {
             "name": "eventSemantics",
             "text": "namespace:native"
           }, {
-            "name": "version",
+            "name": "vegaVersion",
             "text": "2.0.0"
           }],
         "text": "An event emitter notifying the click event of the button."

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

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { CalendarDate, DayPeriod, MonthPeriod, WeekPeriod, } from '../../../../../helpers/calendar';
+import { getClosestWorkday } from '../../../utils';
 /** This TypeScript class `VegaCalendarCurrentPeriodController` updates the current period based on the view mode in a calendar component. */
 export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   /**
@@ -25,13 +26,14 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   updateCalendarPeriod(viewMode, date) {
     switch (viewMode) {
       case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date));
+        this.setCurrentPeriod(new MonthPeriod(date, this.showWeekends));
         break;
       case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date));
+        this.setCurrentPeriod(new WeekPeriod(date, this.showWeekends));
         break;
       case 'day':
-        this.setCurrentPeriod(new DayPeriod(date));
+        date = this.showWeekends === false ? getClosestWorkday(date) : date;
+        this.setCurrentPeriod(new DayPeriod(date, this.showWeekends));
         break;
     }
   }
@@ -73,6 +75,12 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
       this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
     }
   }
+  /**
+   * The calendar period should update when the property showWeekends change
+   */
+  updateCurrentPeriodAfterHideWeekEndsChange() {
+    this.updateCalendarPeriod(this.viewMode, this.currentPeriod.current);
+  }
   /**
    * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
    *
@@ -106,6 +114,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarCurrentPeriodController.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')
 ], VegaCalendarCurrentPeriodController.prototype, "initialCurrentPeriod", null);
@@ -115,3 +126,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('watchViewModeChange')
 ], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodByViewMode", null);
+__decorate([
+  MapToComponentMethod('watchShowWeekendsChange')
+], VegaCalendarCurrentPeriodController.prototype, "updateCurrentPeriodAfterHideWeekEndsChange", null);

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

@@ -32,7 +32,7 @@ export class VegaCalendarEventResponsiveController extends PageResizeObserverSli
     // The debounce method will case this method called after component disconnect, then the slimmer will get issue to get viewMode from component class, this issue will catch in spec.ts
     try {
       const eventContainerRef = this.monthEventRenderer.getMonthEventContainerRef();
-      if (this.viewMode === 'month' && eventContainerRef) {
+      if (this.viewMode === 'month' && eventContainerRef && eventContainerRef.parentElement) {
         const maxContainerHeight = eventContainerRef.parentElement.getBoundingClientRect().height;
         const count = Math.floor((maxContainerHeight - VegaCalendarEventResponsiveController.monthDateTitleHeight) /
           VegaCalendarEventItemRenderer.backgroundColorModeEventHeight);

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

@@ -59,6 +59,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewController.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriodController", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/layout/full-day-event-layout-generator.js

@@ -13,7 +13,7 @@ export class VegaCalendarFullDayEventLayoutGenerator extends VegaCalendarBaseEve
    */
   generate(calendarEvents) {
     const allShouldOrderLongEvents = this.collectAllShouldOrderLongEvents(calendarEvents);
-    const layoutRows = [new VegaCalendarFullDayEventLayoutRow()];
+    const layoutRows = [this.createNewLayoutCell()];
     allShouldOrderLongEvents.forEach((eventView) => {
       this.addCurrentEventToLayout(layoutRows, eventView);
     });

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-switch-panel.js

@@ -44,7 +44,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
       this.currentPeriodController.setCurrentPeriod(this.currentPeriod.previous());
     };
     /**
-     * The more action menu ite click
+     * The more action menu item click
      *
      * @param {NotifyObserverPayload<string>} payload The object contains the menu item key
      */
@@ -81,7 +81,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
     return (h("div", { class: "calendar-date-switch-container" },
       h("vega-button", { variant: "secondary", size: "small", ref: (button) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.todayButtonClick);
-        } }, "Today"),
+        }, label: this.translationSlimmer.t('Today') }),
       h("vega-button-circle", { variant: "secondary", size: "small", icon: VegaInternalIconManager.getIconKey('chevron-left'), label: "previous", showTooltip: false, ref: (button) => {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(button, VegaClick, this.prevButtonClick);
         } }),
@@ -104,7 +104,7 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
    * @returns {HTMLElement} An HTMLElement containing a vega-segment-control element with specific attributes and event handling.
    */
   renderViewSwitch() {
-    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views, size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
+    return (h("vega-segment-control", { segments: VegaCalendarSwitchPanelRenderer.views.map((item) => (Object.assign(Object.assign({}, item), { text: this.translationSlimmer.t(item.text) }))), size: "small", variant: "text-only", selected: this.viewMode, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, this.handleViewChange);
       } }));
   }
@@ -131,18 +131,24 @@ export class VegaCalendarSwitchPanelRenderer extends VegaSlimmer {
     const currentDate = this.currentPeriod.current;
     let result = '';
     switch (this.viewMode) {
-      case 'day':
-        result = `${currentDate.date} ${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
+      case 'day': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${currentDate.date} ${monthName}, ${currentDate.year}`;
         break;
+      }
       case 'week': {
-        const start = this.currentPeriod.startDate;
-        const end = this.currentPeriod.endDate;
-        result = `${start.date} ${getMonthName(start.toDate())}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${getMonthName(end.toDate())}, ${end.year}`;
+        const weekItems = this.calendarView.dateItems[0];
+        const start = weekItems[0];
+        const end = weekItems[weekItems.length - 1];
+        const [startMonthName, endMonthName] = [start, end].map((item) => this.translationSlimmer.t(getMonthName(item.toDate())));
+        result = `${start.date} ${startMonthName}${start.year === end.year ? '' : ', ' + start.year} - ${end.date} ${endMonthName}, ${end.year}`;
         break;
       }
-      case 'month':
-        result = `${getMonthName(currentDate.toDate())}, ${currentDate.year}`;
+      case 'month': {
+        const monthName = this.translationSlimmer.t(getMonthName(currentDate.toDate()));
+        result = `${monthName}, ${currentDate.year}`;
         break;
+      }
     }
     return result;
   }
@@ -180,3 +186,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarSwitchPanelRenderer.prototype, "calendarViewController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarSwitchPanelRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/renderers/vega-calendar-view-renderer.js

@@ -14,7 +14,7 @@ export class VegaCalendarViewRenderer extends VegaSlimmer {
    * @returns {HTMLElement} html element
    */
   render() {
-    return (h("div", { class: `calendar-view calendar-view-${this.viewMode}` }, this.viewMode === 'month'
+    return (h("div", { class: `calendar-view calendar-view-${this.viewMode} ${this.showWeekends === false ? 'calendar-hide-weekends' : ''}` }, this.viewMode === 'month'
       ? this.monthViewRenderer.render()
       : this.viewWithTimeRenderer.render()));
   }
@@ -22,6 +22,9 @@ export class VegaCalendarViewRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "viewMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarViewRenderer.prototype, "showWeekends", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewRenderer.prototype, "monthViewRenderer", void 0);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/timed-event/vega-calendar-day-event-layout-renderer.js

@@ -60,7 +60,7 @@ export class VegaCalendarDayViewEventLayoutRenderer extends VegaSlimmer {
       top: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * startIndex}%`,
       width: `calc(100% - ${left * 100}%)`,
       height: `${(100 / VegaCalendarDayViewEventLayoutRenderer.totalNumberOfCells) * (endIndex - startIndex)}%`,
-      zIndex: columnIndex > 0 ? `${columnIndex}` : null,
+      zIndex: columnIndex > 0 ? `${columnIndex}` : undefined,
     };
   }
 }

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-time-line-renderer.js

@@ -60,6 +60,12 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
   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.
    *
@@ -89,7 +95,7 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
     }
     else {
       for (let i = 0; i < 24; i++) {
-        timeLine.push(pad(i));
+        timeLine.push(`${pad(i)}`);
       }
     }
     return timeLine;
@@ -127,11 +133,12 @@ export class VegaCalendarTimeLineRenderer extends VegaSlimmer {
   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' });
-      }, 0);
+      }, oneFrame);
     }
   }
 }
@@ -150,3 +157,6 @@ __decorate([
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaCalendarTimeLineRenderer.prototype, "updateTimeLineIfComponentAddBack", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarTimeLineRenderer.prototype, "displayCurrentTimeBlockByDefault", null);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/vega-calendar-view-with-time-renderer.js

@@ -32,10 +32,10 @@ export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
       h("div", { class: "calendar-view-row" },
         h("div", { class: "time-line-empty" }),
         h("div", { class: "calendar-view-title" }, source.map((item, index) => (h("div", { key: item.date, class: { active: item.isToday() } },
-          h("div", null, weekHead[index]),
+          h("div", null, this.translationSlimmer.t(weekHead[index])),
           h("div", { class: "week-day" }, item.date)))))),
       h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
-        h("div", { class: "time-line-all" }, "All Day"),
+        h("div", { class: "time-line-all" }, this.translationSlimmer.t('All Day')),
         this.dayViewFullDayEventRenderer.render())));
   }
   /**
@@ -67,8 +67,8 @@ export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
     return timeLineSource.map((_item, index) => {
       return (h("div", { class: "grid-cell border-divider-top", 
         // eslint-disable-next-line react/jsx-no-bind
-        onDblClick: () => {
-          this.handleDateBlockClick(calendarDate, index);
+        onDblClick: (e) => {
+          this.handleDateBlockClick(calendarDate, index, e);
         } }));
     });
   }
@@ -77,9 +77,10 @@ export class VegaCalendarViewWithTimeRenderer extends VegaSlimmer {
    *
    * @param {CalendarDate} calendarDate the calendar date object
    */
-  handleDateBlockClick(calendarDate, hour) {
+  handleDateBlockClick(calendarDate, hour, e) {
     const { year, month, date } = calendarDate;
-    this.dateDblClickEmitter.emit({ year, month, date, hour });
+    const { clientX, clientY } = e;
+    this.dateDblClickEmitter.emit({ year, month, date, hour, mouseEventInfo: { clientX, clientY } });
   }
 }
 __decorate([
@@ -99,7 +100,7 @@ __decorate([
 ], VegaCalendarViewWithTimeRenderer.prototype, "calendarView", void 0);
 __decorate([
   MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "calendarViewController", void 0);
+], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
 __decorate([
   MapToComponentField()
-], VegaCalendarViewWithTimeRenderer.prototype, "dateDblClickEmitter", void 0);
+], VegaCalendarViewWithTimeRenderer.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-calendar/slimmers/month-view/renderers/vega-calendar-month-event-renderer.js

@@ -147,7 +147,9 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     if (removeItems.length) {
       rowEvents.forEach((items) => {
-        if (items.length && removeItems.includes(items[items.length - 1])) {
+        if (items.length &&
+          items[items.length - 1] &&
+          removeItems.includes(items[items.length - 1])) {
           result.push(items.slice(0, items.length - 1));
         }
         else {