@heartlandone/vega 2.100.0 → 2.102.0

package/dist/collection/collection-manifest.json

@@ -81,6 +81,7 @@
     "./components/vega-radio/vega-radio.js",
     "./components/vega-radio/vega-radio-group/vega-radio-group.js",
     "./components/vega-rich-text-content/vega-rich-text-content.js",
+    "./components/vega-rich-text-editor/extensions/bookmark/vega-rich-text-bookmark-editor/vega-rich-text-bookmark-editor.js",
     "./components/vega-rich-text-editor/extensions/special-characters/vega-rich-text-special-characters-panel/vega-rich-text-special-characters-panel.js",
     "./components/vega-rich-text-editor/extensions/table/vega-rich-text-table-properties/vega-rich-text-table-properties.js",
     "./components/vega-rich-text-editor/extensions/table/vega-rich-text-table-selection-widget/vega-rich-text-table-selection-widget.js",
@@ -385,6 +386,11 @@
         "vega-rich-text-special-characters-panel"
       ]
     },
+    {
+      "components": [
+        "vega-rich-text-bookmark-editor"
+      ]
+    },
     {
       "components": [
         "vega-rich-text-find-replace-panel"

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

@@ -20,7 +20,7 @@ import { TranslationSlimmer } from '../../helpers/slimmers/translation';
  */
 export class VegaAccordion {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaAccordionRenderer();
     this.expandController = new VegaAccordionExpandController();
     this.translationSlimmer = new TranslationSlimmer();

package/dist/collection/components/vega-app-footer/vega-app-footer.js

@@ -21,7 +21,7 @@ import { VegaAdditionalLinkClick } from '../../helpers/event-manager/event-id/ve
  */
 export class VegaAppFooter {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.additionalLinkClickEventEmitter = createEventEmitSlimmer(VegaAppFooter, VegaAdditionalLinkClick);
     this.additionalLinksRenderer = new VegaAppFooterAdditionalLinksRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();

package/dist/collection/components/vega-app-header-button/vega-app-header-button.js

@@ -27,7 +27,7 @@ import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-obser
  */
 export class VegaAppHeaderButton {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     /**
      * The below method is e2e-test covered in
      * @see{module:vega-app-header-button-resize-e2e}

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

@@ -15,7 +15,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 export class VegaBackdrop {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaBackdropVisibleController = new VegaBackdropVisibleController();
     this.vegaBackdropRenderer = new VegaBackdropRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();

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

@@ -20,7 +20,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
  */
 export class VegaBanner {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.closeEventEmitter = createEventEmitSlimmer(VegaBanner, VegaClose);
     this.renderer = new VegaBannerRenderer();
     this.actionButtonRenderer = new VegaBannerActionButtonRenderer();

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

@@ -22,7 +22,7 @@ import { VegaBoxResponsiveStyleController } from './slimmers/controllers/vega-bo
  */
 export class VegaBox {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.pageResizeSlimmer = new PageResizeObserverSlimmer();
     this.stateStyleController = new VegaBoxStateStylesController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();

package/dist/collection/components/vega-brand-logo/vega-brand-logo.js

@@ -18,7 +18,7 @@ import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-man
  */
 export class VegaBrandLogo {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.brandLogoRenderer = new VegaBrandLogoRenderer();
     this.darkModeStateControllerSlimmer = new DarkModeStateControllerSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();

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

@@ -23,7 +23,7 @@ import breadcrumbGlobalCss from './vega-breadcrumb.global.css';
  */
 export class VegaBreadcrumb {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.renderer = new VegaBreadcrumbRenderer();
     this.collapsedItemRenderer = new VegaBreadcrumbCollapsedItemRenderer();
     this.itemRenderer = new VegaBreadcrumbItemRenderer();

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

@@ -161,18 +161,18 @@
 }
 
 :host .vega-button-variant-secondary.vega-button-danger {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   color: rgba(var(--v-text-danger-link, 230, 50, 87, 1));
 }
 @media (hover: hover) {
   :host .vega-button-variant-secondary.vega-button-danger:hover {
-    border: 2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));
+    border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
     background-color: rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));
     color: rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1));
   }
 }
 :host .vega-button-variant-secondary.vega-button-danger:active {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));
+  border-color: rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));
   color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));
 }

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

@@ -29,7 +29,7 @@ import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-obser
  */
 export class VegaButton {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     /**
      * The below method is e2e-test covered in
      * @see{module:vega-button-resize-e2e}

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

@@ -345,17 +345,17 @@ button:focus {
 }
 
 .vega-button-circle-variant-secondary.vega-button-circle-danger {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   color: rgba(var(--v-text-danger-link, 230, 50, 87, 1));
   background-color: rgba(var(--v-bg-action-secondary, 252, 252, 252, 1));
 }
 .vega-button-circle-variant-secondary.vega-button-circle-danger:hover {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));
   color: rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1));
 }
 .vega-button-circle-variant-secondary.vega-button-circle-danger:active {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));
+  border-color: rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));
   color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));
 }

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

@@ -26,7 +26,7 @@ import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-obser
  */
 export class VegaButtonCircle {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.clickEventEmitter = createEventEmitSlimmer(VegaButtonCircle, VegaClick);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
       useCapture: true,

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

@@ -15,7 +15,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimme
  */
 export class VegaButtonGroupItem {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.subStateObserverSlimmer = new VegaButtonGroupItemSubStateController();
     this.buttonGroupItemRenderer = new VegaButtonGroupItemRenderer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();

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

@@ -22,7 +22,7 @@ import { VegaButtonGroupRuntimeMetricsPayloadDefinition } from '../../constants/
  */
 export class VegaButtonGroup {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.clickEventEmitter = createEventEmitSlimmer(VegaButtonGroup, VegaClick);
     this.clickEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.flexContainer);
     this.buttonGroupClickController = new VegaButtonGroupClickController();

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

@@ -137,22 +137,22 @@ a:active .vega-button-link-button-container {
 
 /* button color css - danger */
 a.vega-button-link-danger .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   color: rgba(var(--v-text-danger-link, 230, 50, 87, 1));
 }
 
 a.vega-button-link-danger:hover .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-hover, 255, 87, 114, 1));
+  border-color: rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-hover, 255, 87, 114, 0.2));
   color: rgba(var(--v-text-danger-link-hover, 233, 71, 104, 1));
 }
 
 a.vega-button-link-danger:focus .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn, 230, 50, 87, 1));
+  border-color: rgba(var(--v-border-color-danger, 230, 50, 87, 1));
 }
 
 a.vega-button-link-danger:active .vega-button-link-button-container {
-  border: 2px solid rgba(var(--v-border-secondary-danger-btn-active, 189, 41, 71, 1));
+  border-color: rgba(var(--v-border-color-danger-active, 189, 41, 71, 1));
   background-color: rgba(var(--v-bg-danger-tertiary-active, 189, 41, 71, 0.2));
   color: rgba(var(--v-text-danger-link-active, 189, 41, 71, 1));
 }

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

@@ -21,7 +21,7 @@ import { AriaAttributesValueMapper } from '../../helpers/slimmers/mutation-obser
  */
 export class VegaButtonLink {
   constructor() {
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.clickEventEmitter = createEventEmitSlimmer(VegaButtonLink, VegaClick);
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaButtonLinkRuntimeMetricsPayloadDefinition);

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

@@ -22,15 +22,19 @@ export class EventPreviewActionsController extends VegaSlimmer {
     this.handlePreviewActionButtonClick = (payload) => {
       if (payload && payload.detail) {
         const { event, date, actionType } = payload.detail;
-        if (actionType === PreviewActionButtonType.Edit) {
-          this.eventEditEmitter.emit({
-            rawEvent: event.event,
-            date: {
-              year: date.year,
-              month: date.month,
-              date: date.date,
-            },
-          });
+        const eventDetail = {
+          rawEvent: event.event,
+          date: {
+            year: date.year,
+            month: date.month,
+            date: date.date,
+          },
+        };
+        if (actionType === PreviewActionButtonType.Edit && this.eventEditable) {
+          this.eventEditEmitter.emit(eventDetail);
+        }
+        if (actionType === PreviewActionButtonType.Delete && this.eventDeletable) {
+          this.eventDeleteEmitter.emit(eventDetail);
         }
       }
     };
@@ -44,9 +48,21 @@ export class EventPreviewActionsController extends VegaSlimmer {
    */
   retrieveActionsVisibility(calendarEvent, calendarDate) {
     let result = {};
-    if (this.eventEditable && typeof this.getEventPreviewActions === 'function') {
+    if ((this.eventEditable || this.eventDeletable) &&
+      typeof this.getEventPreviewActions === 'function') {
       const { date, month, year } = calendarDate;
-      result = this.getEventPreviewActions(calendarEvent.event, { date, month, year });
+      const actionVisibility = this.getEventPreviewActions(calendarEvent.event, {
+        date,
+        month,
+        year,
+      });
+      const normalizedActionVisibility = actionVisibility && typeof actionVisibility === 'object'
+        ? actionVisibility
+        : {};
+      result = {
+        showEditButton: this.eventEditable && Boolean(normalizedActionVisibility.showEditButton),
+        showDeleteButton: this.eventDeletable && Boolean(normalizedActionVisibility.showDeleteButton),
+      };
     }
     return result;
   }
@@ -69,12 +85,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], EventPreviewActionsController.prototype, "eventEditable", void 0);
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "eventDeletable", void 0);
 __decorate([
   MapToComponentField()
 ], EventPreviewActionsController.prototype, "getEventPreviewActions", void 0);
 __decorate([
   MapToComponentField()
 ], EventPreviewActionsController.prototype, "eventEditEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "eventDeleteEmitter", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], EventPreviewActionsController.prototype, "registerPreviewActionButtonEvent", null);

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

@@ -11,8 +11,16 @@ import { getCalendarEventSlotName } from '../../../utils';
 import ChangeManager from '../../../../../helpers/change-manager/change-manager';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalCalendarEventPreviewUpdate } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { findParent } from '../../../../../utils/ui';
 /** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
 export class VegaCalendarEventItemRenderer extends VegaSlimmer {
+  /**
+   * While it is a single event and the trigger is hover, we should show the preview popover when mouse enter on the event item.
+   */
+  previewingEvent(event, targetCalendarViewDate, isGroupEvent) {
+    this.eventPreviewEmitter.emit({ rawEvent: event.event });
+    this.setupPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
+  }
   /**
    * render event component
    *
@@ -24,11 +32,18 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   render(item, classMap, targetCalendarViewDate, isGroupEvent = false) {
     return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: `${item.eventKey}-${item.startTime.toString()}-${item.endTime.toString()}`, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => {
-        this.handleEventClick(item);
-        this.enabledEventPreview &&
-          this.setupPreviewContainer(item, targetCalendarViewDate, isGroupEvent);
-      } }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+      onClick: () => this.onEventClick(item, targetCalendarViewDate, isGroupEvent) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
+  }
+  /**
+   * While it is a group event or the trigger is click with single event, we should show the preview popover when click on the event item.
+   */
+  onEventClick(event, targetCalendarViewDate, isGroupEvent) {
+    var _a;
+    this.handleEventClick(event);
+    if (this.enabledEventPreview &&
+      (isGroupEvent || ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) !== 'hover')) {
+      this.previewingEvent(event, targetCalendarViewDate, isGroupEvent);
+    }
   }
   /**
    * emit vega click event
@@ -42,6 +57,7 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
     const previewContainer = this.eventPreviewPopoverController.getEventPreviewContainer(event, targetCalendarViewDate, isGroupEvent);
     if (previewContainer) {
       const preview = this.renderer.getEventPreviewRef();
+      this.hidePreviousPreviewPopover(previewContainer);
       if (isGroupEvent) {
         preview.classList.remove('single-event-preview');
         preview.classList.add('group-event-preview');
@@ -73,6 +89,24 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
       previewContainer.append(preview);
     }
   }
+  /**
+   * 1. The popover is not closed immediately when mouse leave.
+   * 2. The event preview popover shares a single preview component.
+   * While a new event item is hovered, it will make previous event popover empty, this will emit the popover flash in view.
+   * To avoid this, we hide the previous preview popover when a new event item is hovered.
+   * Ticket: https://gethired.atlassian.net/browse/VD-9920
+   */
+  hidePreviousPreviewPopover(previewContainer) {
+    var _a;
+    const preview = this.renderer.getEventPreviewRef();
+    const previousPreviewContainer = preview.parentElement;
+    if (((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) === 'hover' &&
+      previousPreviewContainer &&
+      previousPreviewContainer !== previewContainer) {
+      const box = findParent(previewContainer, 'vega-popover-content-box');
+      box && box.classList.add('vega-force-hidden');
+    }
+  }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
 __decorate([
@@ -90,9 +124,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);

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

@@ -14,6 +14,7 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
     this.popoverHideObserver = null;
+    this.popoverRefMap = new WeakMap();
   }
   render(event, targetCalendarViewDate, classMap) {
     return this.enabledEventPreview
@@ -21,11 +22,13 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
       : this.eventItemRenderer.render(event, classMap, targetCalendarViewDate);
   }
   renderPreviewPopover(event, classMap, targetCalendarViewDate) {
+    var _a;
     return (h("vega-popover", { isScreenPosition: true, placement: this.viewMode === 'day' ? 'top' : 'right', alignment: "center", class: {
         'event-preview-popover': true,
         'block': true,
-      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, ref: (el) => {
+      }, padding: "0", size: VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH, trigger: ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) || 'click', ref: (el) => {
         this.setPopoverHideObserver(el);
+        this.listenPopoverRef(event, el, targetCalendarViewDate);
       } },
       h("div", { slot: "popover-content", class: "event-preview-popover-content" }, this.eventItemRenderer.render(event, classMap, targetCalendarViewDate)),
       h("div", { slot: "popover" },
@@ -44,6 +47,39 @@ export class VegaCalendarEventPreviewPopoverRenderer extends VegaSlimmer {
       ChangeManager.unregister(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
   }
+  listenPopoverRef(item, popover, targetCalendarViewDate) {
+    const onPopoverMouseEnter = (e) => {
+      this.onPopoverMouseEnter(e, item, targetCalendarViewDate);
+    };
+    if (popover) {
+      this.popoverRefMap.set(item, popover);
+      popover.removeEventListener('mouseenter', onPopoverMouseEnter);
+      popover.addEventListener('mouseenter', onPopoverMouseEnter);
+    }
+    else if (this.popoverRefMap.has(item)) {
+      const popoverRef = this.popoverRefMap.get(item);
+      if (popoverRef) {
+        popoverRef.removeEventListener('mouseenter', onPopoverMouseEnter);
+        this.popoverRefMap.delete(item);
+      }
+    }
+  }
+  /**
+   * When the mouse enters the popover, if the trigger is hover, we should show the preview popover when mouse enter on the event item.
+   * If the group event is previewing, we should prevent the popover from showing.
+   */
+  onPopoverMouseEnter(event, eventItem, targetCalendarViewDate) {
+    var _a;
+    if (this.enabledEventPreview && ((_a = this.eventPreviewPopoverProps) === null || _a === void 0 ? void 0 : _a.trigger) === 'hover') {
+      if (this.monthEventRenderer.isGroupEventPreviewing()) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+      else {
+        this.eventItemRenderer.previewingEvent(eventItem, targetCalendarViewDate, false);
+      }
+    }
+  }
 }
 VegaCalendarEventPreviewPopoverRenderer.SINGLE_EVENT_PREVIEW_WIDTH = 400;
 __decorate([
@@ -64,6 +100,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "enabledEventPreview", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverProps", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewPopoverRenderer.prototype, "eventPreviewPopoverController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewPopoverRenderer.prototype, "monthEventRenderer", void 0);

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

@@ -11,7 +11,7 @@ import { VegaInternalCalendarEventPreviewClear, VegaInternalCalendarEventPreview
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
 import { Observer } from '../../../../../helpers/change-manager/observer/observer';
 import ChangeManager from '../../../../../helpers/change-manager/change-manager';
-import { VegaPopoverHide } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 /** This code snippet defines a TypeScript class `VegaCalendarMonthEventRenderer` that extends `VegaSlimmer`. Here's a breakdown of what the class and its methods are doing: */
 export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
@@ -19,6 +19,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     super(...arguments);
     this.maxMonthDisplayEventsCount = 2;
     this.popoverHideObserver = null;
+    this.isGroupEventPreviewingFlag = false;
   }
   /**
    * current row dates all events.
@@ -67,6 +68,14 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
   getMoreEventsBoxRef() {
     return this.moreEventsBoxRef;
   }
+  /**
+   * Check if a group event preview is currently being displayed
+   *
+   * @returns {boolean} - True if a group event preview is being displayed, false otherwise
+   */
+  isGroupEventPreviewing() {
+    return this.isGroupEventPreviewingFlag;
+  }
   /**
    * render the current date events
    *
@@ -115,7 +124,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       });
       return (h("div", { class: "month-event-more" },
         h("vega-popover", { trigger: "click", placement: "right", padding: '0', ref: (el) => {
-            this.setPopoverHideObserver(el);
+            this.setPopoverObserver(el);
           }, isScreenPosition: true },
           h("div", { tabIndex: 0, slot: "popover-content", role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick() }, `${moreItemsLength} More`),
           h("vega-flex", { slot: "popover" },
@@ -185,7 +194,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
     }
     return rowEvents;
   }
-  setPopoverHideObserver(popover) {
+  setPopoverObserver(popover) {
     if (popover) {
       this.popoverHideObserver = new Observer((_payload) => true, async () => await popover.hide());
       ChangeManager.register(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
@@ -194,10 +203,20 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
       ChangeManager.unregister(DomNodeSubjectFactory.getSubject(this.host, VegaInternalCalendarEventPreviewHide), this.popoverHideObserver);
     }
     // we should clear current event in vega-calendar-event-preview when popover hide
-    popover &&
+    if (popover) {
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => {
+        this.isGroupEventPreviewingFlag = false;
         ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.renderer.getEventPreviewRef(), VegaInternalCalendarEventPreviewClear), {});
       });
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, () => {
+        this.isGroupEventPreviewingFlag = true;
+      });
+    }
+    else if (this.groupPopoverRef) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.groupPopoverRef, VegaPopoverHide);
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.groupPopoverRef, VegaPopoverShow);
+    }
+    this.groupPopoverRef = popover;
   }
 }
 __decorate([

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

@@ -18,7 +18,7 @@ import { VegaCalendarEventSlotController } from './slimmers/controllers/vega-cal
  */
 export class VegaCalendarEvent {
   constructor() {
-    this.globalSlimmer = {};
+    this.globalSlimmer = new Map();
     this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer({
       target: () => this.host,
       callback: 

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_95086_21019)"><path d="M6 12.5C6 12.775 5.775 13 5.5 13C5.225 13 5 12.775 5 12.5V6C5 5.725 5.225 5.5 5.5 5.5C5.775 5.5 6 5.725 6 6V12.5ZM8.5 12.5C8.5 12.775 8.275 13 8 13C7.725 13 7.5 12.775 7.5 12.5V6C7.5 5.725 7.725 5.5 8 5.5C8.275 5.5 8.5 5.725 8.5 6V12.5ZM11 12.5C11 12.775 10.775 13 10.5 13C10.225 13 10 12.775 10 12.5V6C10 5.725 10.225 5.5 10.5 5.5C10.775 5.5 11 5.725 11 6V12.5ZM10.9219 0.779375L12.0688 2.5H14.25C14.6656 2.5 15 2.83594 15 3.25C15 3.66563 14.6656 4 14.25 4H14V13.5C14 14.8813 12.8813 16 11.5 16H4.5C3.11937 16 2 14.8813 2 13.5V4H1.75C1.33594 4 1 3.66563 1 3.25C1 2.83594 1.33594 2.5 1.75 2.5H3.93187L5.07812 0.779375C5.40312 0.292406 5.95 0 6.53438 0H9.46562C10.05 0 10.5969 0.292438 10.9219 0.779375ZM5.73438 2.5H10.2656L9.67188 1.61125C9.625 1.54188 9.54688 1.5 9.46562 1.5H6.53438C6.45312 1.5 6.34688 1.54188 6.32812 1.61125L5.73438 2.5ZM3.5 13.5C3.5 14.0531 3.94781 14.5 4.5 14.5H11.5C12.0531 14.5 12.5 14.0531 12.5 13.5V4H3.5V13.5Z" fill="currentColor" fill-opacity="0.95"/></g><defs><clipPath id="clip0_95086_21019"><rect width="14" height="16" fill="currentColor" transform="translate(1)"/></clipPath></defs></svg>`,
+};

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

@@ -12,6 +12,7 @@ import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-ic
 import closeIcon from '../../assets/close';
 import clockIcon from '../../assets/clock';
 import penIcon from '../../assets/pen';
+import deleteIcon from '../../assets/delete';
 import { vegaNonceManager } from '../../../../../helpers/csp/vega-nonce-manager';
 import { findParent } from '../../../../../utils/ui';
 import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
@@ -22,6 +23,7 @@ import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-ev
 export var PreviewActionButtonType;
 (function (PreviewActionButtonType) {
   PreviewActionButtonType["Edit"] = "Edit";
+  PreviewActionButtonType["Delete"] = "Delete";
   PreviewActionButtonType["Close"] = "Close";
 })(PreviewActionButtonType || (PreviewActionButtonType = {}));
 export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
@@ -70,9 +72,10 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
           h("slot", { name: "event-preview-additional-fields" }))))));
   }
   renderActions() {
-    const { showEditButton } = this.eventActions || {};
+    const { showEditButton, showDeleteButton } = this.eventActions || {};
     return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
       showEditButton && (h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Edit event'), icon: VegaInternalIconManager.getIconKey('pen'), color: "text-primary", variant: "icon-only", "data-action-type": PreviewActionButtonType.Edit, ref: this.handleActionButtonClick })),
+      showDeleteButton && (h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Delete event'), icon: VegaInternalIconManager.getIconKey('delete'), color: "text-primary", variant: "icon-only", "data-action-type": PreviewActionButtonType.Delete, ref: this.handleActionButtonClick })),
       h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Close event preview detail'), icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", "data-action-type": PreviewActionButtonType.Close, ref: this.handleActionButtonClick })));
   }
   renderHeader() {
@@ -125,6 +128,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
     close: closeIcon,
     clock: clockIcon,
     pen: penIcon,
+    delete: deleteIcon,
   });
 })();
 __decorate([

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

@@ -19,7 +19,7 @@ export class VegaCalendarEventPreview {
     this.detailRenderer = new VegaCalendarEventPreviewDetailRenderer();
     this.stateController = new VegaCalendarEventPreviewStateController();
     this.translationSlimmer = new TranslationSlimmer();
-    this.globalSlimmer = {};
+    this.globalSlimmer = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.eventActions = {};
   }

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

@@ -14,7 +14,7 @@ import { getCalendarEventSlotName } from '../utils';
  */
 export class VegaCalendarEventSlot {
   constructor() {
-    this.globalSlimmer = {};
+    this.globalSlimmer = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
   }
   render() {

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

@@ -23,7 +23,7 @@ export class VegaCalendarPeriodSwitcher {
   constructor() {
     this.translationSlimmer = new TranslationSlimmer();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendarPeriodSwitcher, VegaChange);
-    this.globalSlimmer = {};
+    this.globalSlimmer = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.currentPeriodController = new VegaCalendarPeriodCurrentPeriodController();
     this.stateController = new VegaCalendarPeriodStateController();