@heartlandone/vega 2.85.0 → 2.87.0-beta.1

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

@@ -0,0 +1,83 @@
+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 { VegaInternalCalendarPreviewActionClick } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { PreviewActionButtonType } from '../../../vega-calendar-event-preview/slimmers/renderers/vega-calendar-event-preview-detail-renderer';
+/**
+ * Controller for managing the visibility of event action buttons in the calendar component.
+ */
+export class EventPreviewActionsController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Handles the click event for preview action buttons.
+     *
+     * @param {NotifyObserverPayload} payload The payload containing information about the clicked action button.
+     */
+    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,
+            },
+          });
+        }
+      }
+    };
+  }
+  /**
+   * Checks the visibility of event action buttons based on the calendar's eventEditable state and the presence of a getEventPreviewActions callback.
+   *
+   * @param {CalendarEvent} calendarEvent - The calendar event for which to check the action buttons visibility.
+   * @param {CalendarDate} calendarDate - The date associated with the event.
+   * @returns {CalendarEventActions} An object indicating which event action buttons should be visible.
+   */
+  retrieveActionsVisibility(calendarEvent, calendarDate) {
+    let result = {};
+    if (this.eventEditable && typeof this.getEventPreviewActions === 'function') {
+      const { date, month, year } = calendarDate;
+      result = this.getEventPreviewActions(calendarEvent.event, { date, month, year });
+    }
+    return result;
+  }
+  /**
+   * Registers event listeners for preview action buttons when the component is connected to the DOM.
+   */
+  registerPreviewActionButtonEvent() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarPreviewActionClick, this.handlePreviewActionButtonClick);
+  }
+  /**
+   * Unregisters event listeners for preview action buttons when the component is disconnected from the DOM.
+   */
+  unregisterPreviewActionButtonEvent() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalCalendarPreviewActionClick);
+  }
+}
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "eventEditable", void 0);
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "getEventPreviewActions", void 0);
+__decorate([
+  MapToComponentField()
+], EventPreviewActionsController.prototype, "eventEditEmitter", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], EventPreviewActionsController.prototype, "registerPreviewActionButtonEvent", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], EventPreviewActionsController.prototype, "unregisterPreviewActionButtonEvent", null);

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

@@ -0,0 +1,154 @@
+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 { KeyboardManagerSlimmer } from '../../../../../helpers/slimmers/keyboard-manager-slimmer';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { getActiveElement } from '../../../../../utils/component';
+import { findParent } from '../../../../../utils/ui';
+import { CalendarDate } from '../../../../../helpers/calendar';
+import { tryGetDocument } from '../../../../../utils/try-get-document';
+/* istanbul ignore next */
+/**
+ * The `VegaCalendarKeyboardController` class is responsible for managing keyboard events
+ * for a calendar component.
+ */
+export class VegaCalendarKeyboardController extends KeyboardManagerSlimmer {
+  /**
+   * The constructor function sets up keyboard event listeners for a calendar component.
+   */
+  constructor() {
+    super((target) => {
+      return [
+        {
+          keyCode: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          activeElementInScope: () => [
+            target.monthViewRenderer.getMonthContainerRef(),
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (event) => target.onDaysDirectionKeyDown(event),
+        },
+        {
+          keyCode: ['ArrowUp', 'ArrowDown'],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          activeElementInScope: () => [
+            target.monthEventRenderer.getMoreEventsBoxRef(),
+          ],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (event) => target.onEventsDirectionKeyDown(event),
+        },
+        {
+          keyCode: ['Enter'],
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          activeElementInScope: () => [
+            target.monthViewRenderer.getMonthContainerRef(),
+          ],
+          eventName: 'keydown',
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          callback: (event) => target.onDayEnter(event),
+        },
+      ];
+    });
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-day-click-keyboard-e2e}
+   */
+  /**
+   * It handles the keyboard event when the user presses the Enter key on a day cell in the month view.
+   *
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  onDayEnter(event) {
+    const target = event.composedPath()[0];
+    if (target.classList.contains('grid-col') && target.dataset['date'] && this.showSwitchView) {
+      const date = CalendarDate.fromString(target.dataset['date']);
+      date && this.monthViewRenderer.onDayItemKeyDown(event, date);
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-event-direction-switch-keyboard-e2e}
+   */
+  /**
+   * It handles the keyboard event when the user presses the Arrow Up or Arrow Down key on an event item in the more events popover.
+   *
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  onEventsDirectionKeyDown(event) {
+    const document = tryGetDocument();
+    const currentItem = document === null || document === void 0 ? void 0 : document.activeElement;
+    if (!currentItem)
+      return;
+    const boxRef = this.monthEventRenderer.getMoreEventsBoxRef();
+    if (!boxRef)
+      return;
+    const items = Array.from(boxRef.querySelectorAll('vega-calendar-event'));
+    const currentIndex = items.findIndex((item) => item === currentItem);
+    const nextIndex = event.code === 'ArrowDown' ? currentIndex + 1 : currentIndex - 1;
+    if (nextIndex >= 0 && nextIndex < items.length) {
+      items[nextIndex].focus();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-calendar-day-direction-switch-keyboard-e2e}
+   */
+  /**
+   * It handles the keyboard event when the user presses the Arrow keys on a day cell in the month view to navigate between days.
+   *
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  onDaysDirectionKeyDown(event) {
+    const activeElement = getActiveElement(this.host.shadowRoot);
+    if (!activeElement)
+      return;
+    const currentItem = findParent(activeElement, '.row-cell');
+    if (!currentItem)
+      return;
+    const container = this.monthViewRenderer.getMonthContainerRef();
+    if (!container)
+      return;
+    const items = Array.from(container.querySelectorAll('.row-cell'));
+    const currentIndex = items.findIndex((item) => item === currentItem);
+    let nextIndex = -1;
+    const verticalStep = this.showWeekends ? 7 : 5;
+    switch (event.code) {
+      case 'ArrowRight':
+        nextIndex = currentIndex + 1;
+        break;
+      case 'ArrowLeft':
+        nextIndex = currentIndex - 1;
+        break;
+      case 'ArrowDown':
+        nextIndex = currentIndex + verticalStep;
+        break;
+      case 'ArrowUp':
+        nextIndex = currentIndex - verticalStep;
+        break;
+      default:
+        break;
+    }
+    if (nextIndex >= 0 && nextIndex < items.length) {
+      items[nextIndex].querySelector('.grid-col').focus();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarKeyboardController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarKeyboardController.prototype, "showWeekends", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarKeyboardController.prototype, "monthViewRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarKeyboardController.prototype, "monthEventRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarKeyboardController.prototype, "showSwitchView", void 0);

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

@@ -55,6 +55,7 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
         event,
         targetCalendarViewDate,
         timeFormat: this.timeFormat,
+        eventActions: this.eventPreviewActionsController.retrieveActionsVisibility(event, targetCalendarViewDate),
       });
       // Step 2: append preview additional fields slot to preview component.
       const additionalFieldsSlot = this.host.querySelector('[slot=event-preview-additional-fields]');
@@ -92,3 +93,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "eventPreviewPopoverController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "eventPreviewActionsController", void 0);

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

@@ -51,8 +51,8 @@ export class VegaCalendarViewWithTimeRenderer extends VegaCalendarDateBlockRende
       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(this.timezone) }, role: "group", tabIndex: -1, "aria-label": `${this.translationSlimmer.t(WeekdayLongNames[weekHead[index].toLowerCase()])}, ${item.getMonthName()} ${item.date} ${item.year}` },
-          h("div", null, this.translationSlimmer.t(weekHead[index])),
-          h("div", { class: "week-day" }, item.date)))))),
+          h("div", { "aria-hidden": "true" }, this.translationSlimmer.t(weekHead[index])),
+          h("div", { class: "week-day", "aria-hidden": "true" }, item.date)))))),
       h("div", { class: "calendar-view-row calendar-view-event-all-container border-divider-bottom" },
         h("div", { class: "time-line-all" }, this.translationSlimmer.t('All Day')),
         this.dayViewFullDayEventRenderer.render())));

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

@@ -58,6 +58,15 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
   getMonthEventContainerRef() {
     return this.eventContainerRef;
   }
+  /* istanbul ignore next */
+  /**
+   * Get the more events popover box ref
+   *
+   * @returns {Nullable<HTMLVegaBoxElement>} the more events popover box element
+   */
+  getMoreEventsBoxRef() {
+    return this.moreEventsBoxRef;
+  }
   /**
    * render the current date events
    *
@@ -113,7 +122,7 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
             h("vega-box", { padding: 'size-12', width: 256 },
               h("vega-flex", { direction: "col", gap: "0", class: "group-events" },
                 h("vega-font", { textAlign: "center", variant: "font-field-label", color: "text-primary", style: { padding: '4px 0', marginBottom: '8px' } }, `${calendarDate.date} ${calendarDate.getMonthName()} ${calendarDate.year}`),
-                h("vega-box", { maxHeight: 'calc(60vh - 6px)', style: { overflowY: 'auto' }, padding: 'size-4' },
+                h("vega-box", { maxHeight: 'calc(60vh - 6px)', style: { overflowY: 'auto' }, padding: 'size-4', ref: (ref) => (this.moreEventsBoxRef = ref) },
                   h("vega-flex", { direction: "col", gap: "size-4", style: { paddingBottom: otherEvents.length ? '4px' : '0px' } }, backgroundColorEvents.map((item) => {
                     return this.eventItemRenderer.render(item, {
                       'month-event': true,

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

@@ -12,6 +12,25 @@ import { VegaCalendarDateBlockRenderer, } from '../../common/renderers/vega-cale
 import { checkIsVoiceOverClick } from '../../../../../utils/ui';
 /** The code provided is defining a TypeScript class called `VegaCalendarMonthViewRenderer` that extends `VegaSlimmer`. This class is responsible for rendering a month view of a calendar component. */
 export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer {
+  /* istanbul ignore next */
+  /**
+   * The function returns a reference to the HTML element that represents the month view of a calendar component.
+   *
+   * @returns {Nullable<HTMLDivElement>} the month view calendar content
+   */
+  getMonthContainerRef() {
+    return this.monthContainerRef;
+  }
+  /**
+   * The function handles the key down event on a day item in the month view of a calendar component
+   *     and switches to the day view if the "Enter" key is pressed.
+   *
+   * @param {KeyboardEvent} event - the keyboard event object
+   * @param {CalendarDate} date - the calendar date object associated with the day item
+   */
+  onDayItemKeyDown(event, date) {
+    this.goToCurrentDayView(date, event);
+  }
   /**
    * the HTML elements that represent the month view of a calendar component.
    *
@@ -19,8 +38,9 @@ export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer
    */
   render() {
     const weekHead = this.calendarView.weekdays;
-    return (h("div", { class: "calendar-view-month-container" },
-      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title, role: "group", tabIndex: -1, "aria-label": this.translationSlimmer.t(WeekdayLongNames[title.toLowerCase()]) }, this.translationSlimmer.t(title))))),
+    return (h("div", { class: "calendar-view-month-container", ref: (ref) => (this.monthContainerRef = ref) },
+      h("div", { class: "calendar-view-row calendar-view-title border-divider-bottom" }, weekHead.map((title) => (h("div", { key: title, role: "group", tabIndex: -1, "aria-label": this.translationSlimmer.t(WeekdayLongNames[title.toLowerCase()]) },
+        h("span", { "aria-hidden": "true" }, this.translationSlimmer.t(title)))))),
       this.renderMonthViewContent()));
   }
   /**
@@ -88,7 +108,7 @@ export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer
     const dateLabel = `${item.getMonthName()} ${item.date} ${item.year}`;
     return (h("div", { class: "date" },
       isMonthFirstDay && (h("div", { role: "group", "aria-label": item.getMonthName(), class: "month-block" }, item.getMonthName(true))),
-      h("div", { "aria-label": this.enableDateClick ? undefined : dateLabel, role: isDateClickable ? 'button' : 'group', "aria-disabled": isDateClickable ? 'false' : undefined, tabIndex: 0, class: "grid-col", 
+      h("div", { "aria-label": this.enableDateClick ? undefined : dateLabel, role: isDateClickable ? 'button' : 'group', "aria-disabled": isDateClickable ? 'false' : undefined, tabIndex: 0, "data-date": item.toString(), class: "grid-col", 
         // eslint-disable-next-line react/jsx-no-bind
         onDblClick: (e) => {
           this.handleDateLabelClick(e, item);
@@ -106,7 +126,7 @@ export class VegaCalendarMonthViewRenderer extends VegaCalendarDateBlockRenderer
    */
   goToCurrentDayView(calendarDate, e) {
     this.currentPeriodController.updateCalendarPeriod('day', calendarDate);
-    if (checkIsVoiceOverClick(e)) {
+    if (e instanceof KeyboardEvent || checkIsVoiceOverClick(e)) {
       this.dayViewFocusSlimmer.scheduleFocus();
     }
   }

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M36.4 360.9L13.4 439 1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1L73 498.6l78.1-23c12.4-3.6 23.7-9.9 33.4-18.4c1.4-1.2 2.7-2.5 4-3.8L492.7 149.3c21.9-21.9 24.6-55.6 8.2-80.5c-2.3-3.5-5.1-6.9-8.2-10L453.3 19.3c-25-25-65.5-25-90.5 0L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4zm46 13.5c1.7-5.6 4.5-10.8 8.4-15.2c.6-.6 1.1-1.2 1.7-1.8L321 129 383 191 154.6 419.5c-4.7 4.7-10.6 8.2-17 10.1l-23.4 6.9L59.4 452.6l16.1-54.8 6.9-23.4z"/></svg>`,
+};

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

@@ -16,6 +16,7 @@ export class VegaCalendarEventPreviewStateController extends VegaSlimmer {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewUpdate, (payload) => {
       this.previewPayload = payload;
       this.currentEvent = payload.event;
+      this.eventActions = payload.eventActions;
     });
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalCalendarEventPreviewClear, () => {
       this.currentEvent = null;
@@ -38,6 +39,9 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventPreviewStateController.prototype, "previewPayload", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventPreviewStateController.prototype, "eventActions", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], VegaCalendarEventPreviewStateController.prototype, "registerEventPreviewUpdateObserver", null);

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

@@ -11,12 +11,41 @@ import ChangeManager from '../../../../../helpers/change-manager/change-manager'
 import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
 import closeIcon from '../../assets/close';
 import clockIcon from '../../assets/clock';
+import penIcon from '../../assets/pen';
 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';
-import { VegaInternalCalendarEventPreviewHide, VegaInternalDialogContentReady, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaInternalCalendarEventPreviewHide, VegaInternalCalendarPreviewActionClick, VegaInternalDialogContentReady, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { VegaInternalTranslation } from '../../../../../helpers/translation/internal-translation-controller';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+export var PreviewActionButtonType;
+(function (PreviewActionButtonType) {
+  PreviewActionButtonType["Edit"] = "Edit";
+  PreviewActionButtonType["Close"] = "Close";
+})(PreviewActionButtonType || (PreviewActionButtonType = {}));
 export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleActionButtonClick = (el) => {
+      if (el) {
+        const actionType = el.dataset.actionType;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => {
+          this.onHidePopover();
+          if (actionType !== PreviewActionButtonType.Close) {
+            this.calendarRef &&
+              ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.calendarRef, VegaInternalCalendarPreviewActionClick), {
+                detail: {
+                  event: this.currentEvent,
+                  date: this.previewPayload.targetCalendarViewDate,
+                  actionType,
+                },
+              });
+          }
+        });
+      }
+    };
+  }
   componentWillLoad() {
     this.calendarRef = findParent(this.host, 'vega-calendar');
   }
@@ -41,10 +70,10 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
           h("slot", { name: "event-preview-additional-fields" }))))));
   }
   renderActions() {
+    const { showEditButton } = this.eventActions || {};
     return (h("vega-flex", { justifyContent: "end", class: "preview-actions" },
-      h("vega-button-circle", { "data-aria-label": VegaInternalTranslation.t('Close event preview detail'), icon: VegaInternalIconManager.getIconKey('close'), color: "text-primary", variant: "icon-only", 
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onVegaClick: this.onHidePopover.bind(this) })));
+      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 })),
+      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 })));
   }
   renderBasicFields() {
     const currentEvent = this.currentEvent;
@@ -87,6 +116,7 @@ export class VegaCalendarEventPreviewDetailRenderer extends VegaSlimmer {
   VegaInternalIconManager.register({
     close: closeIcon,
     clock: clockIcon,
+    pen: penIcon,
   });
 })();
 __decorate([
@@ -98,6 +128,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "currentEvent", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventPreviewDetailRenderer.prototype, "eventActions", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventPreviewDetailRenderer.prototype, "translationSlimmer", void 0);

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

@@ -21,6 +21,7 @@ export class VegaCalendarEventPreview {
     this.translationSlimmer = new TranslationSlimmer();
     this.globalSlimmer = {};
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.eventActions = {};
   }
   render() {
     return sanitizeVegaComponent(h(Host, null, this.previewPayload && this.detailRenderer.render()), this.host);
@@ -35,7 +36,8 @@ export class VegaCalendarEventPreview {
   }; }
   static get states() { return {
     "previewPayload": {},
-    "currentEvent": {}
+    "currentEvent": {},
+    "eventActions": {}
   }; }
   static get elementRef() { return "host"; }
 }

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

@@ -14,7 +14,7 @@ import { VegaCalendarMonthViewRenderer } from './slimmers/month-view/renderers/v
 import { VegaCalendarViewWithTimeRenderer } from './slimmers/day-view/renderers/vega-calendar-view-with-time-renderer';
 import { VegaCalendarTimeLineRenderer } from './slimmers/day-view/renderers/vega-calendar-time-line-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange, VegaDateClick, VegaDateDblClick, VegaEventClick, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaDateClick, VegaDateDblClick, VegaEventClick, VegaEventEdit, VegaMoreActionClick, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { CalendarDate } from '../../helpers/calendar';
 import { VegaCalendarViewController } from './slimmers/common/controllers/vega-calendar-view-controller';
 import { VegaCalendarCurrentPeriodController } from './slimmers/common/controllers/vega-calendar-current-period-controller';
@@ -37,6 +37,8 @@ import { VegaCalendarEventPreviewPopoverRenderer } from './slimmers/common/rende
 import { VegaCalendarEventPreviewPopoverController } from './slimmers/common/controllers/vega-calendar-event-preivew-popover-controller';
 import { getSystemTimezone } from '../../helpers/calendar/utils';
 import { VegaCalendarDayViewFocusSlimmer } from './slimmers/common/controllers/vega-calendar-day-view-focus-slimmer';
+import { EventPreviewActionsController } from './slimmers/common/controllers/vega-calendar-event-preview-actions-controller';
+import { VegaCalendarKeyboardController } from './slimmers/common/controllers/vega-calendar-keyboard-controller';
 /**
  * @vegaVersion 2.14.0
  */
@@ -56,6 +58,7 @@ export class VegaCalendar {
     this.monthEventRenderer = new VegaCalendarMonthEventRenderer();
     // The current period controller should be before the calendar view controller because the initial current period should be before the initial calendar view
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
+    this.keyboardController = new VegaCalendarKeyboardController();
     this.calendarViewController = new VegaCalendarViewController();
     // Date after recording the operation
     this.postOperationDateController = new VegaCalendarPostOperationDateController();
@@ -68,12 +71,14 @@ export class VegaCalendar {
     this.fullDayEventLayoutRenderer = new VegaCalendarFullDayEventLayoutRenderer();
     this.eventPreviewPopoverRenderer = new VegaCalendarEventPreviewPopoverRenderer();
     this.calendarEventController = new VegaCalendarEventController();
+    this.eventPreviewActionsController = new EventPreviewActionsController();
     this.eventResponsiveController = new VegaCalendarEventResponsiveController();
     this.changeEventEmitter = createEventEmitSlimmer(VegaCalendar, VegaChange);
     this.eventClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventClick);
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.moreActionClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaMoreActionClick);
     this.dateClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateClick);
+    this.eventEditEmitter = createEventEmitSlimmer(VegaCalendar, VegaEventEdit);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
     this.showEventColorBarNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'showEventColorBar', 'watchShowEventColorBar');
@@ -150,6 +155,13 @@ export class VegaCalendar {
      * @vegaVersion 2.65.0
      */
     this.timezone = getSystemTimezone();
+    /**
+     * Controls whether the calendar is editable, allowing users to interact with events and dates.
+     * When set to `false`, all interactive features such as clicking on events or dates will be disabled, making the calendar view-only.
+     *
+     * @vegaVersion 2.87.0-beta.1
+     */
+    this.eventEditable = true;
   }
   /**
    * Tracks changes to the current period state.
@@ -475,6 +487,50 @@ export class VegaCalendar {
       "attribute": "timezone",
       "reflect": false,
       "defaultValue": "getSystemTimezone()"
+    },
+    "eventEditable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.87.0-beta.1"
+          }],
+        "text": "Controls whether the calendar is editable, allowing users to interact with events and dates.\nWhen set to `false`, all interactive features such as clicking on events or dates will be disabled, making the calendar view-only."
+      },
+      "attribute": "event-editable",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "getEventPreviewActions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "CalendarEventActionsCallback",
+        "resolved": "(event: VegaCalendarRawEvent, date: VegaCalendarDateType) => CalendarEventActions",
+        "references": {
+          "CalendarEventActionsCallback": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.87.0-beta.1"
+          }],
+        "text": "A callback function that determines the visibility of action buttons in the event preview popover for each calendar event.\nIt receives the raw event data and the associated date, and should return an object indicating which action buttons should be visible in the popover.\nThis allows for dynamic customization of the event preview based on the specific event being clicked."
+      }
     }
   }; }
   static get states() { return {
@@ -582,6 +638,55 @@ export class VegaCalendar {
           }
         }
       }
+    }, {
+      "method": "vegaEventEdit",
+      "name": "vegaEventEdit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.87.0-beta.1"
+          }],
+        "text": "An event emitter notifying that a calendar event edit action is triggered from the event preview popover."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventEditInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; date: VegaCalendarDateType; }",
+        "references": {
+          "VegaCalendarEventEditInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "eventEdit",
+      "name": "eventEdit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.87.0-beta.1"
+          }],
+        "text": "An event emitter notifying that a calendar event edit action is triggered from the event preview popover."
+      },
+      "complexType": {
+        "original": "VegaCalendarEventEditInfo",
+        "resolved": "{ rawEvent: VegaCalendarRawEvent; date: VegaCalendarDateType; }",
+        "references": {
+          "VegaCalendarEventEditInfo": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }, {
       "method": "vegaDateDblClick",
       "name": "vegaDateDblClick",
@@ -783,6 +888,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "currentPeriodController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "keyboardController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarViewController", void 0);
@@ -816,6 +924,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "calendarEventController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventPreviewActionsController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "eventResponsiveController", void 0);
@@ -834,6 +945,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dateClickEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "eventEditEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "changeEventPrevent", void 0);