@globalpayments/vega 2.58.0 → 2.59.1

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

@@ -8,6 +8,8 @@ import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import clockThree from '../../../icons/clock-three';
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { getEventStatusBgColorStyle } from '../../../utils';
+import { formatDisplayTime } from '../../../../../helpers/calendar/utils';
 /** The `VegaCalendarEventRenderer` class is a TypeScript React component used for rendering calendar events with different display modes and custom styling. */
 export class VegaCalendarEventRenderer extends VegaSlimmer {
   /*
@@ -120,7 +122,7 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
    */
   defaultNormalMonthEventContentRender() {
     const { startTime, title } = this.calendarEvent;
-    return h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`);
+    return h("div", { class: "event-title" }, `${formatDisplayTime(this.timeFormat, startTime)} ${title}`);
   }
   /**
    * Render the day view timed event.
@@ -137,7 +139,7 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
         }, ref: (node) => (this.eventTitleContainerRef = node) }, title),
       h("div", { class: "event-time" },
         h("vega-icon", { size: "size-12", icon: VegaInternalIconManager.getIconKey('clock-three') }),
-        h("span", null, `${this.formatDisplayTime(startTime)} - ${this.formatDisplayTime(endTime)}`))));
+        h("span", null, `${formatDisplayTime(this.timeFormat, startTime)} - ${formatDisplayTime(this.timeFormat, endTime)}`))));
   }
   /**
    * Return a slot element if the calendar is not a repeat event
@@ -155,33 +157,7 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
    * @returns {HTMLStyleElement} style element
    */
   injectBackgroundColorStyle() {
-    return h("style", null, this.colorController.getBackgroundColorStyle());
-  }
-  /**
-   * Takes a time string as input and formats it to ensure it always has two digits for hours and minutes.
-   *
-   * @param {string} timeString the event time string
-   * @returns {string} time string after format
-   */
-  formatDisplayTime(timeString) {
-    const [hour, minutes] = timeString.split(':');
-    if (this.timeFormat === '24-hour') {
-      return `${hour.padStart(2, '0')}:${minutes.padStart(2, '0')}`;
-    }
-    else {
-      const hourNum = Number(hour);
-      const amPm = hourNum >= 12 ? 'pm' : 'am';
-      const minutesResult = minutes.padStart(2, '0');
-      if (hourNum > 12) {
-        return `${hourNum - 12}:${minutesResult} pm`;
-      }
-      else if (hourNum === 0) {
-        return `12:${minutesResult} am`;
-      }
-      else {
-        return `${hourNum}:${minutesResult} ${amPm}`;
-      }
-    }
+    return h("style", null, getEventStatusBgColorStyle(this.calendarEvent.color));
   }
 }
 (() => {
@@ -204,6 +180,3 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "showColorBar", void 0);
-__decorate([
-  MapToComponentField()
-], VegaCalendarEventRenderer.prototype, "colorController", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-event/vega-calendar-event.js

@@ -8,7 +8,6 @@ import { Component, h, Element, Host, Prop, State } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, slotPlaceholder, } from 'vega-slimmer/core';
 import { VegaCalendarEventRenderer } from './slimmers/renderers/vega-calendar-event-renderer';
-import { VegaCalendarEventBgColorController } from './slimmers/controllers/vega-calendar-event-bg-color-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaCalendarEventSubStateController } from './slimmers/controllers/vega-calendar-sub-state-controller';
 import { VegaCalendarTitleMaxHeightController } from './slimmers/controllers/vega-calendar-event-title-max-height-controller';
@@ -32,7 +31,6 @@ export class VegaCalendarEvent {
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaCalendarEventRenderer();
-    this.colorController = new VegaCalendarEventBgColorController();
     this.slotController = new VegaCalendarEventSlotController();
     this.subStateController = new VegaCalendarEventSubStateController();
     this.titleMaxHeightController = new VegaCalendarTitleMaxHeightController();
@@ -96,9 +94,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "renderer", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaCalendarEvent.prototype, "colorController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "slotController", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/assets/clock.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_80261_52574)"><path d="M7.91669 3.75C7.91669 3.33437 8.25106 3 8.66669 3C9.08231 3 9.41669 3.33437 9.41669 3.75V7.6L12.0823 9.375C12.4261 9.60625 12.5198 10.0719 12.2636 10.4156C12.0604 10.7594 11.5948 10.8531 11.2511 10.5969L8.25106 8.59688C8.04169 8.48438 7.91669 8.25 7.91669 7.97188V3.75ZM8.66669 0C13.0854 0 16.6667 3.58125 16.6667 8C16.6667 12.4187 13.0854 16 8.66669 16C4.24794 16 0.666687 12.4187 0.666687 8C0.666687 3.58125 4.24794 0 8.66669 0ZM2.16669 8C2.16669 11.5906 5.07606 14.5 8.66669 14.5C12.2573 14.5 15.1667 11.5906 15.1667 8C15.1667 4.40938 12.2573 1.5 8.66669 1.5C5.07606 1.5 2.16669 4.40938 2.16669 8Z" fill="currentColor" fill-opacity="0.64"/></g><defs><clipPath id="clip0_80261_52574"><rect width="16" height="16" fill="currentColor" transform="translate(0.666687)"/></defs></svg>`,
+};

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/assets/close.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg width="17" height="16" viewBox="0 0 17 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_80261_51160)"><path d="M13.9604 1.29376C14.3511 0.903137 14.9854 0.903137 15.3761 1.29376C15.7667 1.68439 15.7667 2.31876 15.3761 2.70939L10.0823 8.00001L15.3729 13.2938C15.7636 13.6844 15.7636 14.3188 15.3729 14.7094C14.9823 15.1 14.3479 15.1 13.9573 14.7094L8.66668 9.41564L3.37293 14.7063C2.98231 15.0969 2.34793 15.0969 1.95731 14.7063C1.56668 14.3156 1.56668 13.6813 1.95731 13.2906L7.25106 8.00001L1.96043 2.70626C1.56981 2.31564 1.56981 1.68439 1.96043 1.29376C2.35106 0.903137 2.98543 0.903137 3.37606 1.29376L8.66668 6.58439L13.9604 1.29376Z" fill="currentColor" fill-opacity="0.95"/></g><defs><clipPath id="clip0_80261_51160"><rect width="14" height="16" fill="currentColor" transform="translate(1.66669)"/></clipPath></defs></svg>`,
+};

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/slimmers/controllers/vega-calendar-event-preview-state-controller.js

@@ -0,0 +1,46 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaInternalCalendarEventPreviewClear, VegaInternalCalendarEventPreviewUpdate, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** Control the states of preview event */
+export class VegaCalendarEventPreviewStateController extends VegaSlimmer {
+  /**
+   * connectedCallback
+   */
+  registerEventPreviewUpdateObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewUpdate, (payload) => {
+      this.previewPayload = payload;
+      this.currentEvent = payload.event;
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewClear, () => {
+      this.currentEvent = null;
+    });
+  }
+  /**
+   * disconnectedCallback
+   */
+  unregisterEventPreviewUpdateObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalCalendarEventPreviewUpdate);
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalCalendarEventPreviewClear);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventPreviewStateController.prototype, "currentEvent", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventPreviewStateController.prototype, "previewPayload", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaCalendarEventPreviewStateController.prototype, "registerEventPreviewUpdateObserver", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaCalendarEventPreviewStateController.prototype, "unregisterEventPreviewUpdateObserver", null);

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/slimmers/renderers/vega-calendar-event-preview-detail-renderer.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { Fragment, h } from '@stencil/core';
+import { getCalendarEventSlotName, getEventStatusBgColorStyle } from '../../../utils';
+import ChangeManager from '../../../../../helpers/change-manager/change-manager';
+import { CALENDAR_EVENT_PREVIEW_POPOVER_HIDE } from '../../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import closeIcon from '../../assets/close';
+import clockIcon from '../../assets/clock';
+export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
+  render() {
+    return (this.currentEvent && (h("vega-box", { class: "event-preview" },
+      this.injectBackgroundColorStyle(),
+      this.renderActions(),
+      h("vega-box", { class: "preview-content" },
+        h("vega-flex", { gap: "size-16", direction: "col" },
+          this.renderBasicFields(),
+          this.renderDivider(),
+          h("slot", { name: "event-preview-additional-fields" }))))));
+  }
+  renderActions() {
+    return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
+      h("vega-button-circle", { icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
+        /* eslint-disable-next-line react/jsx-no-bind */
+        onVegaClick: () => {
+          ChangeManager.notify(CALENDAR_EVENT_PREVIEW_POPOVER_HIDE, this.currentEvent);
+        } })));
+  }
+  renderBasicFields() {
+    const currentEvent = this.currentEvent;
+    return (h(Fragment, null,
+      h("vega-flex", { alignItems: "start", gap: "size-16" }, this.renderEventTitle()),
+      h("vega-flex", { alignItems: "start", gap: "size-12" },
+        h("vega-icon", { icon: VegaInternalIconManager.getIconKey('clock'), color: "text-secondary" }),
+        h("vega-flex", { direction: "col", gap: "size-4" },
+          h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateDateTimeString(this.previewPayload.targetCalendarViewDate, this.previewPayload.timeFormat)),
+          currentEvent.isRepeatEvent && (h("vega-font", { variant: "font-footnote1-long", color: "text-primary" }, currentEvent.generateRepeatString()))))));
+  }
+  renderEventTitle() {
+    const currentEvent = this.currentEvent;
+    const eventSlotName = getCalendarEventSlotName(currentEvent.event.key);
+    const eventSlot = this.host.querySelector(`[slot=${eventSlotName}]`);
+    return eventSlot ? (h("slot", { name: eventSlotName })) : (h(Fragment, null,
+      h("vega-box", { corners: "rounded-full", class: {
+          'event-bg-color': true,
+          'event-bg-disabled': currentEvent.disabled,
+        }, flexShrink: 0 },
+        h("span", { class: {
+            [`event-color-dot-${currentEvent.variant}`]: true,
+          } })),
+      h("vega-font", { variant: "font-h5", color: "text-primary" }, currentEvent.title)));
+  }
+  renderDivider() {
+    const previewSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
+    return (previewSlot && (h("vega-box", null,
+      h("vega-divider", null))));
+  }
+  injectBackgroundColorStyle() {
+    return h("style", null, getEventStatusBgColorStyle(this.currentEvent.color));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    close: closeIcon,
+    clock: clockIcon,
+  });
+})();
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "previewPayload", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "currentEvent", void 0);

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/vega-calendar-event-preview.css

@@ -0,0 +1,86 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host(.single-event-preview) .event-preview {
+  width: 398px;
+  box-sizing: border-box;
+}
+:host(.single-event-preview) .preview-actions {
+  padding-top: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+:host(.single-event-preview) .preview-content {
+  margin-bottom: 24px;
+  margin-left: 12px;
+  margin-right: 12px;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+:host(.group-event-preview) .event-preview {
+  width: 320px;
+  box-sizing: border-box;
+  height: 100%;
+}
+:host(.group-event-preview) .event-preview {
+  border: 1px solid rgba(var(--v-border-divider, 171, 198, 216, 1));
+  border-right-width: 0px;
+  border-top-width: 0px;
+  border-bottom-width: 0px;
+  border-left-width: 1px;
+  border-left-style: solid;
+}
+:host(.group-event-preview) .preview-actions {
+  padding-top: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+:host(.group-event-preview) .preview-content {
+  margin-bottom: 16px;
+  margin-left: 12px;
+  margin-right: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+:host .preview-content {
+  max-height: 60vh;
+  overflow-y: auto;
+}
+:host .event-bg-color {
+  width: 12px;
+  height: 12px;
+  margin-top: 8px;
+  position: relative;
+}
+:host .event-bg-color.event-bg-disabled {
+  background-color: rgba(var(--v-bg-disabled, 176, 180, 181, 1));
+}
+:host .event-bg-color span {
+  display: block;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  opacity: 0.8;
+}
+:host .event-bg-color span.event-color-dot-secondary {
+  width: 100%;
+  height: 100%;
+  background-size: 4px 4px;
+  background-image: linear-gradient(-45deg, transparent 25%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 25% 50%, transparent 50% 75%, rgba(var(--v-bg-primary, 252, 252, 252, 1)) 75% 100%);
+}
+:host .event-bg-color span.event-color-dot-tertiary {
+  width: calc(100% - 2px);
+  height: calc(100% - 2px);
+  top: 1px;
+  left: 1px;
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px;
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+  opacity: 1;
+}

package/dist/collection/components/vega-calendar/vega-calendar-event-preview/vega-calendar-event-preview.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__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;
+};
+import { Component, h, Element, Host, State } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/component-usage-runtime-metrics';
+import { TranslationSlimmer } from '../../../helpers/slimmers/translation';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { VegaCalendarEventPreviewStateController } from './slimmers/controllers/vega-calendar-event-preview-state-controller';
+import { VegaCalendarEventPreviewDetailRenderer } from './slimmers/renderers/vega-calendar-event-preview-detail-renderer';
+/**
+ * @vegaVersion 2.59.0
+ */
+export class VegaCalendarEventPreview {
+  constructor() {
+    this.detailRenderer = new VegaCalendarEventPreviewDetailRenderer();
+    this.stateController = new VegaCalendarEventPreviewStateController();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.previewPayload && this.detailRenderer.render()), this.host);
+  }
+  static get is() { return "vega-calendar-event-preview"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-calendar-event-preview.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-calendar-event-preview.css"]
+  }; }
+  static get states() { return {
+    "previewPayload": {},
+    "currentEvent": {}
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventPreview.prototype, "detailRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventPreview.prototype, "stateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventPreview.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventPreview.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventPreview.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

package/dist/collection/components/vega-calendar/vega-calendar.css

@@ -665,4 +665,14 @@
 
 .calendar-event-slot-container {
   display: none;
+}
+
+.event-preview-popover {
+  height: 100%;
+}
+.event-preview-popover.block {
+  display: block;
+}
+.event-preview-popover .event-preview-popover-content {
+  height: 100%;
 }

package/dist/collection/components/vega-calendar/vega-calendar.js

@@ -33,6 +33,8 @@ import { VegaCalendarFullDayEventMoreButtonRenderer } from './slimmers/day-view/
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaCalendarTimeMarkerRenderer } from './slimmers/day-view/renderers/vega-calendar-time-marker-renderer';
 import { VegaCalendarPostOperationDateController } from './slimmers/common/controllers/vega-calendar-post-operation-date-controller';
+import { VegaCalendarEventPreviewPopoverRenderer } from './slimmers/common/renderers/vega-calendar-event-preview-popover-renderer';
+import { VegaCalendarEventPreviewPopoverController } from './slimmers/common/controllers/vega-calendar-event-preivew-popover-controller';
 /**
  * @vegaVersion 2.14.0
  */
@@ -55,11 +57,13 @@ export class VegaCalendar {
     // Date after recording the operation
     this.postOperationDateController = new VegaCalendarPostOperationDateController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.eventPreviewPopoverController = new VegaCalendarEventPreviewPopoverController();
     this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
     this.eventItemRenderer = new VegaCalendarEventItemRenderer();
     this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
     this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
+    this.eventPreviewPopoverRenderer = new VegaCalendarEventPreviewPopoverRenderer();
     this.calendarEventController = new VegaCalendarEventController();
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
@@ -121,6 +125,12 @@ export class VegaCalendar {
      * @vegaVersion 2.28.0
      */
     this.showWeekends = true;
+    /**
+     * Controls the visibility of the event preview popover while click event.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.enabledEventPreview = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -371,6 +381,27 @@ export class VegaCalendar {
       "attribute": "show-weekends",
       "reflect": false,
       "defaultValue": "true"
+    },
+    "enabledEventPreview": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.59.0"
+          }],
+        "text": "Controls the visibility of the event preview popover while click event."
+      },
+      "attribute": "enabled-event-preview",
+      "reflect": false,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {
@@ -633,6 +664,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewPopoverController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
@@ -648,6 +682,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewPopoverRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarEventController", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -82,10 +82,19 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
         }
       }, text: this.label.replace(/<b>(.*?)<\/b>/g, '$1'), trigger: "none", placement: ['bottom', 'top'], alignment: "center", 
       /* eslint-disable-next-line react/jsx-no-bind */
-      onMouseEnter: (e) => {
-        e.preventDefault();
+      onMouseEnter: () => {
         const isTextTruncated = this.labelRef.scrollWidth > this.labelRef.clientWidth;
-        this.tooltipRef.trigger = isTextTruncated ? 'hover' : 'none';
+        if (isTextTruncated) {
+          this.tooltipRef.trigger = 'hover';
+          // Disable the system tooltip for Safari when using text-overflow: ellipsis and hover on the text.
+          // Use js to set pointerEvents instead of css here to avoid user build a custom tooltip for slot content.
+          this.labelRef.style.pointerEvents = 'none';
+        }
+      }, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onMouseLeave: () => {
+        this.tooltipRef.trigger = 'none';
+        this.labelRef.style.pointerEvents = 'auto';
       } }, this.renderLabel()));
   }
 }

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.css

@@ -124,7 +124,6 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  pointer-events: none;
 }
 :host .vega-dropdown-item-display-ellipsis vega-tooltip {
   flex-grow: 1;

package/dist/collection/components/vega-field-error/slimmers/controllers/vega-field-error-message-controller.js

@@ -28,6 +28,7 @@ export class VegaFieldErrorMessageController extends VegaSlimmer {
     changeManager.notify(FIELD_ERROR_MESSAGE_CHANGE, {
       host: this.host,
       message: this.message,
+      isValid: !this.message,
     });
   }
 }

package/dist/collection/components/vega-form/slimmers/controllers/vega-form-field-validation-state-controller.js

@@ -0,0 +1,80 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { FIELD_ERROR_MESSAGE_CHANGE, FORM_ELEMENT_VALIDATE, } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
+import { FormFieldControllerSlimmer } from '../../../../helpers/slimmers/form-field-controller-slimmer';
+/**
+ * The field error controller for vega form to set validation errors on form fields.
+ */
+export class VegaFormFieldValidationStateController extends VegaSlimmer {
+  /**
+   * Set validation states for the form fields.
+   *
+   * @param {VegaFormFieldValidationState[]} states - An array of validation error objects.
+   */
+  setValidationStates(states) {
+    if (states.length === 0) {
+      Array.from(this.host.querySelectorAll('[data-vega-form]'))
+        .filter((child) => FormFieldControllerSlimmer.isValidFormField(child))
+        .forEach((fieldHost) => {
+        this.updateFieldValidationState(fieldHost, { isValid: true });
+      });
+      return;
+    }
+    states.forEach((item) => {
+      const fieldHost = this.getHostByFieldName(item.fieldName);
+      if (fieldHost) {
+        this.updateFieldValidationState(fieldHost, {
+          isValid: item.isValid,
+          errorMessage: !item.isValid ? item.errorMessage : '',
+        });
+      }
+    });
+  }
+  /**
+   * Get the host element by field name, support nested field name with dot notation.
+   *
+   * @param {string} fieldName - The field name, can be nested with dot notation.
+   * @returns {Nullable<FormFieldElement<unknown>>} The host element or null if not found.
+   */
+  getHostByFieldName(fieldName) {
+    const fields = fieldName.split('.');
+    let currentHost = this.host;
+    for (const fieldName of fields) {
+      const element = currentHost.querySelector(`[data-vega-form="${fieldName}"]`);
+      if (FormFieldControllerSlimmer.isValidFormField(element)) {
+        currentHost = element;
+      }
+      else {
+        return null;
+      }
+    }
+    return currentHost;
+  }
+  /**
+   * Update the validation state of a form field element.
+   *
+   * @param {FormFieldElement<unknown>} target - The target form field element.
+   * @param {Pick<VegaFormFieldValidationState, 'isValid' | 'errorMessage'>} payload - An object containing the validation state and error message.
+   */
+  updateFieldValidationState(target, { isValid, errorMessage }) {
+    target.isValid = isValid;
+    ChangeManager.notify(FIELD_ERROR_MESSAGE_CHANGE, {
+      host: target,
+      message: !isValid ? errorMessage : '',
+      isValid: isValid,
+    });
+    ChangeManager.notify(FORM_ELEMENT_VALIDATE, { host: target, detail: isValid });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaFormFieldValidationStateController.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('setValidationStates')
+], VegaFormFieldValidationStateController.prototype, "setValidationStates", null);