@globalpayments/vega 2.18.0 → 2.19.0

package/dist/collection/collection-manifest.json

@@ -14,6 +14,7 @@
     "./components/vega-button-link/vega-button-link.js",
     "./components/vega-calendar/vega-calendar.js",
     "./components/vega-calendar/vega-calendar-event/vega-calendar-event.js",
+    "./components/vega-calendar/vega-calendar-event-slot/vega-calendar-event-slot.js",
     "./components/vega-card/vega-card.js",
     "./components/vega-carousel/vega-carousel.js",
     "./components/vega-chart/vega-bar-chart/vega-bar-chart.js",
@@ -67,6 +68,7 @@
     "./components/vega-segment-control/vega-segment-control.js",
     "./components/vega-selection-tile/vega-selection-tile.js",
     "./components/vega-selection-tile/vega-selection-tile-group/vega-selection-tile-group.js",
+    "./components/vega-signature-capture/vega-signature-capture.js",
     "./components/vega-skeleton/vega-skeleton.js",
     "./components/vega-slot-container/vega-slot-container.js",
     "./components/vega-stepper/vega-stepper.js",
@@ -316,6 +318,11 @@
         "vega-input-phone-number"
       ]
     },
+    {
+      "components": [
+        "vega-signature-capture"
+      ]
+    },
     {
       "components": [
         "vega-checkbox",
@@ -391,7 +398,8 @@
     {
       "components": [
         "vega-calendar",
-        "vega-calendar-event"
+        "vega-calendar-event",
+        "vega-calendar-event-slot"
       ]
     },
     {

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

@@ -9,16 +9,14 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, slotPlac
 import { sanitizeVegaComponent } from '../../utils/component';
 import { VegaAccordionRenderer } from './slimmers/vega-accordion-renderer';
 import { VegaAccordionExpandController } from './slimmers/vega-accordion-expand-controller';
-import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
-import { VegaClick, VegaExpand } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaExpand } from '../../helpers/event-manager/eventID/vegaEventId';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 export class VegaAccordion {
   constructor() {
     this.globalSlimmers = {};
     this.renderer = new VegaAccordionRenderer();
     this.expandController = new VegaAccordionExpandController();
-    this.buttonCircleEventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host);
     this.expandEventEmitter = createEventEmitSlimmer(VegaAccordion, VegaExpand);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     /**
@@ -261,9 +259,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaAccordion.prototype, "expandController", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaAccordion.prototype, "buttonCircleEventPrevent", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaAccordion.prototype, "expandEventEmitter", void 0);

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

@@ -450,7 +450,7 @@ export class VegaBox {
       "mutable": false,
       "complexType": {
         "original": "ResponsiveType<FlexBasisType>",
-        "resolved": "\"auto\" | \"content\" | \"fix-content\" | \"inherit\" | \"initial\" | \"max-content\" | \"min-content\" | \"revert\" | \"revert-layer\" | \"unset\" | `${number}%` | `${number}em` | `${number}px` | { S?: FlexBasisType; M?: FlexBasisType; L?: FlexBasisType; XL?: FlexBasisType; default?: FlexBasisType; }",
+        "resolved": "\"auto\" | \"content\" | \"fit-content\" | \"fix-content\" | \"inherit\" | \"initial\" | \"max-content\" | \"min-content\" | \"revert\" | \"revert-layer\" | \"unset\" | `${number}%` | `${number}em` | `${number}px` | { S?: FlexBasisType; M?: FlexBasisType; L?: FlexBasisType; XL?: FlexBasisType; default?: FlexBasisType; }",
         "references": {
           "ResponsiveType": {
             "location": "import",

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import { getCalendarEventSlotName } from '../../../utils';
 /** The `VegaCalendarEventItemRenderer` class in TypeScript React is used for rendering calendar event items with specific layout and styling properties. */
 export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   /**
@@ -17,9 +18,9 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
    * @returns {HTMLVegaCalendarEventElement} calendar event element
    */
   render(item, classMap) {
-    return (h("vega-calendar-event", { key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
+    return (h("vega-calendar-event", { "data-calendar-ref": this.host, key: item.eventKey, calendarEvent: item, class: classMap, onKeyDown: createEnterKeyHandlerToTriggerClick(), 
       // eslint-disable-next-line react/jsx-no-bind
-      onClick: () => this.handleEventClick(item) }));
+      onClick: () => this.handleEventClick(item) }, !item.isRepeatEvent && h("slot", { name: getCalendarEventSlotName(item.event.key) })));
   }
   /**
    * emit vega click event
@@ -31,6 +32,9 @@ export class VegaCalendarEventItemRenderer extends VegaSlimmer {
   }
 }
 VegaCalendarEventItemRenderer.backgroundColorModeEventHeight = 18;
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventItemRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventItemRenderer.prototype, "calendarView", void 0);

package/dist/collection/components/vega-calendar/slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer.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 { h } from '@stencil/core';
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../../utils/accessibility';
+export class VegaCalendarFullDayEventMoreButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Update the show all flag to true when click the more button
+     *
+     * @param {MouseEvent} e event object
+     */
+    this.updateShowAllFlag = (e) => {
+      e.stopPropagation();
+      this.showAllEventsInDayOrWeekView = true;
+    };
+  }
+  /**
+   * Render the more button element
+   *
+   * @param {number} count the hidden elements count
+   * @returns {HTMLElement} more button
+   */
+  render(count) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      return (h("div", { tabIndex: 0, role: "button", class: "more-button", onKeyDown: createEnterKeyHandlerToTriggerClick(), onClick: this.updateShowAllFlag }, `${count} More`));
+    }
+  }
+  /**
+   * Reset the show all event flag when view mode change
+   */
+  resetShowAllFlag() {
+    this.showAllEventsInDayOrWeekView = false;
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate([
+  MapToComponentMethod('watchViewModeChange')
+], VegaCalendarFullDayEventMoreButtonRenderer.prototype, "resetShowAllFlag", null);

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { VegaCalendarEventItemRenderer } from '../../../common/renderers/vega-calendar-event-item-renderer';
+/** renders all-day events in a calendar view, with options to display a limited number of events and show a "more" button for additional events. */
 export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
   /**
    * render current preiod all day events
@@ -21,25 +22,50 @@ export class VegaCalendarFullDayEventRenderer extends VegaSlimmer {
         .filter((eventItem) => eventItem.isAllDayEvent || eventItem.isGroupEvent());
     });
     const orderEvents = this.fullDayEventLayoutRenderer.sortLongEvents(events);
-    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(orderEvents[index], index))))));
+    const displayEvents = this.filterDisplayEvents(orderEvents);
+    return (h("div", { class: "calendar-view-event-all" }, viewSource.map((item, index) => (h("div", { class: "event-all-col border-divider-left", key: item.date }, this.renderCurrentFullDayEvents(displayEvents[index], index, orderEvents[index]))))));
   }
   /**
    * render current date all day events
    *
-   * @param {Nullable<CalendarEvent>[]} events calendar events
+   * @param {Nullable<CalendarEvent>[]} events displayed calendar events
    * @param {number} currentViewIndex the current date index of the array
+   * @param {Nullable<CalendarEvent>[]} allEvents all calendar events
    * @returns {HTMLVegaCalendarEventElement[]} event component array
    */
-  renderCurrentFullDayEvents(events, currentViewIndex) {
+  renderCurrentFullDayEvents(events, currentViewIndex, allEvents) {
     const height = events.length * VegaCalendarEventItemRenderer.backgroundColorModeEventHeight - 2;
+    const hideEventsLength = allEvents.slice(events.length).filter(Boolean).length;
     return (h(Fragment, null,
       h("div", { class: "placeholder-block", style: { height: height + 'px' } },
         h("span", null,
           events.length,
           " events")),
-      this.fullDayEventLayoutRenderer.render(events, currentViewIndex)));
+      this.fullDayEventLayoutRenderer.render(events, currentViewIndex),
+      hideEventsLength > 0 && this.dayViewFullDayEventMoreButtonRenderer.render(hideEventsLength)));
+  }
+  /**
+   * Get the display events base on the show all events flag
+   *
+   * @param {Nullable<CalendarEvent>[][]} rowEvents row events array
+   * @returns {Nullable<CalendarEvent>[][]} the part of the events or the whole events
+   */
+  filterDisplayEvents(rowEvents) {
+    if (!this.showAllEventsInDayOrWeekView) {
+      const result = [];
+      const maxLength = VegaCalendarFullDayEventRenderer.maxDisplayEventLength;
+      rowEvents.forEach((events) => {
+        const displayEvents = events.length > maxLength ? events.slice(0, maxLength) : events;
+        result.push(displayEvents);
+      });
+      return result;
+    }
+    else {
+      return rowEvents;
+    }
   }
 }
+VegaCalendarFullDayEventRenderer.maxDisplayEventLength = 2;
 __decorate([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "calendarView", void 0);
@@ -52,3 +78,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarFullDayEventRenderer.prototype, "fullDayEventLayoutRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "showAllEventsInDayOrWeekView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarFullDayEventRenderer.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);

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

@@ -107,12 +107,14 @@ export class VegaCalendarMonthEventRenderer extends VegaSlimmer {
               return this.eventItemRenderer.render(item, {
                 'month-event': true,
                 'calendar-event-large-size': true,
+                'calendar-event-in-popover': true,
               });
             })),
             otherEvents.map((item) => {
               return this.eventItemRenderer.render(item, {
                 'month-event': true,
                 'calendar-event-large-size': true,
+                'calendar-event-in-popover': true,
               });
             })))));
     }

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

@@ -21,3 +21,12 @@ export function getTimeIndex(timeString, unit = 15) {
   const [hour, minutes] = timeString.split(':');
   return Math.round((Number(hour) * 60 + Number(minutes)) / unit);
 }
+/**
+ * Returns a string that includes the event key for a calendar event slot.
+ *
+ * @param {string} eventKey - represents the key or identifier of a calendar event.
+ * @returns {string} a string that is a concatenation of 'vega-calendar-event-slot-' and the eventKey parameter.
+ */
+export function getCalendarEventSlotName(eventKey) {
+  return 'vega-calendar-event-slot-' + eventKey;
+}

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

@@ -0,0 +1,76 @@
+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';
+/** The controller will check the calendar render mode when component will mode and copy the slot element to calendar event if the calendar event is a repeat event or the event displayed in popover */
+export class VegaCalendarEventSlotController extends VegaSlimmer {
+  /**
+   * Find the current calendar event slot element, if the slot element is exists, set the calendar even slotMode to true, and store the current slot element.
+   */
+  findTheCalendarEventSlot() {
+    if (this.calendarEvent) {
+      const { event: rawEvent } = this.calendarEvent;
+      const calendar = this.getParentCalendarElement();
+      if (calendar) {
+        const matchSlot = calendar.querySelector(`vega-calendar-event-slot[event-key='${rawEvent.key}']`);
+        if (matchSlot) {
+          this.slotMode = true;
+          this.matchSlotElement = matchSlot;
+        }
+      }
+    }
+  }
+  /**
+   * Append the current slot content to slot container if the calendar event is a repeat event or the calendar event render in a popover.
+   */
+  appendTheRepeatEventSlotToContainer() {
+    const slotContainerRef = this.renderer.getSlotContainerRef();
+    if (this.slotMode && slotContainerRef && this.matchSlotElement) {
+      if (this.calendarEvent.isRepeatEvent || this.isPopoverContent()) {
+        const contentElement = this.matchSlotElement.cloneNode(true);
+        contentElement.removeAttribute('slot');
+        const existSlot = slotContainerRef.querySelector('vega-calendar-event-slot');
+        if (!existSlot) {
+          slotContainerRef.appendChild(contentElement);
+        }
+      }
+    }
+  }
+  /**
+   * This method is responsible for finding and returning the parent `vega-calendar` element of the current component instance
+   *
+   * @returns {HTMLElement} The vega calendar element
+   */
+  getParentCalendarElement() {
+    return this.host['data-calendar-ref'];
+  }
+  /**
+   * Check the calendar is in popover
+   *
+   * @returns {boolean} true or false
+   */
+  isPopoverContent() {
+    return this.host.classList.contains('calendar-event-in-popover');
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "calendarEvent", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaCalendarEventSlotController.prototype, "slotMode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventSlotController.prototype, "renderer", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaCalendarEventSlotController.prototype, "findTheCalendarEventSlot", null);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaCalendarEventSlotController.prototype, "appendTheRepeatEventSlotToContainer", null);

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

@@ -23,6 +23,14 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
   getEventTitleContainerRef() {
     return this.eventTitleContainerRef;
   }
+  /**
+   * Get the calendar event slot container element
+   *
+   * @returns {Nullable<HTMLDivElement>} a div element
+   */
+  getSlotContainerRef() {
+    return this.slotContainerRef;
+  }
   /**
    * The function conditionally renders either a group event or a normal event based on a boolean flag.
    *
@@ -31,9 +39,17 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
   render() {
     return (h(Fragment, null,
       this.injectBackgroundColorStyle(),
-      this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
-        ? this.renderBackgroundModeEvent()
-        : this.renderNormalEvent()));
+      this.calendarEventRender()));
+  }
+  /**
+   * The vega calendar event default render
+   *
+   * @returns {HTMLElement} calendar event element
+   */
+  calendarEventRender() {
+    return this.calendarEvent.isAllDayEvent || this.calendarEvent.isGroupEvent()
+      ? this.renderBackgroundModeEvent()
+      : this.renderNormalEvent();
   }
   /**
    * render background mode event element
@@ -43,10 +59,11 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
   renderBackgroundModeEvent() {
     const disabled = this.calendarEvent.disabled;
     return (h("div", { role: "button", tabIndex: 0, class: {
+        'slot-container': this.slotMode,
         'background-color-mode': true,
         'event-bg-color': !disabled,
         'bg-disabled': disabled,
-      } }, this.calendarEvent.title));
+      }, ref: (node) => (this.slotContainerRef = node) }, this.slotMode ? this.getSlotElement() : this.calendarEvent.title));
   }
   /**
    * render event element
@@ -54,31 +71,27 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
    * @returns {HTMLAnchorElement} event element
    */
   renderNormalEvent() {
-    const { variant = 'primary', disabled, startTime, endTime, title, } = this.calendarEvent;
+    const { variant = 'primary', disabled } = this.calendarEvent;
     const isMonthEvent = !this.host.classList.contains('day-event');
     const classMap = {
+      'slot-container': this.slotMode,
       'event-container': true,
       'disabled': disabled,
       [variant]: true,
     };
     if (isMonthEvent) {
-      return (h("div", { role: "button", tabIndex: 0, class: classMap },
-        this.renderEventStatus(),
-        h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`)));
+      return (h("div", { role: "button", tabIndex: 0, class: classMap, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
+        this.slotMode ? this.getSlotElement() : this.defaultNormalMonthEventContentRender()));
     }
     else {
       const eventDuration = this.calendarEvent.getEventDuration();
-      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0 },
-        this.renderEventStatus(),
+      return (h("div", { part: "event-container", class: Object.assign(Object.assign({}, classMap), { 'vertical': eventDuration > 30, 'duration-half-an-hour': eventDuration === 30, 'event-bg-color': !disabled, 'bg-disabled': disabled }), role: "button", tabIndex: 0, ref: (node) => (this.slotContainerRef = node) },
+        !this.slotMode && this.renderEventStatus(),
         h("div", { class: "cover-block" }),
-        h("div", { class: "event-content" },
-          h("div", { class: {
-              'event-title': true,
-              'title-word-wrap': eventDuration > 30,
-            }, 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)}`)))));
+        this.slotMode
+          ? this.getSlotElement()
+          : this.defaultNormalTimedEventContentRender(eventDuration)));
     }
   }
   /**
@@ -97,6 +110,42 @@ export class VegaCalendarEventRenderer extends VegaSlimmer {
           stripe: this.calendarEvent.variant === 'secondary',
         } })));
   }
+  /**
+   * Render the month view timed event.
+   *
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalMonthEventContentRender() {
+    const { startTime, title } = this.calendarEvent;
+    return h("div", { class: "event-title" }, `${this.formatDisplayTime(startTime)} ${title}`);
+  }
+  /**
+   * Render the day view timed event.
+   *
+   * @param {number} eventDuration the event duration
+   * @returns {HTMLElement} a div element
+   */
+  defaultNormalTimedEventContentRender(eventDuration) {
+    const { startTime, endTime, title } = this.calendarEvent;
+    return (h("div", { class: "event-content" },
+      h("div", { class: {
+          'event-title': true,
+          'title-word-wrap': eventDuration > 30,
+        }, 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)}`))));
+  }
+  /**
+   * Return a slot element if the calendar is not a repeat event
+   *
+   * @returns {Nullable<HTMLElement>} slot element or null
+   */
+  getSlotElement() {
+    if (!this.calendarEvent.isRepeatEvent) {
+      return h("slot", null);
+    }
+  }
   /**
    * render the custom color style tag element
    *
@@ -146,6 +195,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "calendarEvent", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventRenderer.prototype, "slotMode", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventRenderer.prototype, "colorController", void 0);

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

@@ -14,8 +14,6 @@
 }
 :host .background-color-mode {
   border-radius: 2px;
-  padding-left: 8px;
-  padding-right: 8px;
   color: rgba(var(--v-text-black, 32, 54, 69, 1));
   font-family: "Inter", sans-serif;
   font-size: 12px;
@@ -53,6 +51,14 @@
     letter-spacing: 0px;
   }
 }
+:host .background-color-mode:not(.slot-container) {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+:host .background-color-mode:focus {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+}
 :host .event-container {
   display: block;
   width: 100%;
@@ -61,16 +67,26 @@
   box-sizing: border-box;
   overflow: hidden;
 }
+:host .background-color-mode.slot-container {
+  height: 16px;
+  line-height: 16px;
+}
+:host ::slotted(vega-calendar-event-slot) {
+  position: relative;
+  pointer-events: none;
+}
 
 :host(.month-event) .event-container {
-  padding-left: 2px;
-  padding-right: 2px;
   display: flex;
   flex-direction: row;
   gap: 4px;
   align-items: center;
   min-height: 16px;
 }
+:host(.month-event) .event-container:not(.slot-container) {
+  padding-left: 2px;
+  padding-right: 2px;
+}
 :host(.month-event) .event-container .event-status {
   width: 8px;
   height: 8px;
@@ -153,9 +169,11 @@
 }
 
 :host(.day-event) .event-container {
+  position: relative;
+}
+:host(.day-event) .event-container:not(.slot-container) {
   padding-left: 8px;
   padding-right: 8px;
-  position: relative;
 }
 :host(.day-event) .event-container .event-status {
   position: absolute;
@@ -326,16 +344,27 @@
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 0px;
 }
+:host(.day-event) .slot-container {
+  min-height: 16px;
+}
 
 :host(.month-event.calendar-event-large-size) .background-color-mode {
   border-radius: 4px;
+}
+:host(.month-event.calendar-event-large-size) .background-color-mode:not(.slot-container) {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-:host(.month-event.calendar-event-large-size) .event-container {
+:host(.month-event.calendar-event-large-size) .event-container:not(.slot-container) {
   padding-top: 4px;
   padding-bottom: 4px;
 }
+:host(.month-event.calendar-event-large-size) .slot-container {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
 
 .stripe {
   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%);

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

@@ -6,13 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { Component, h, Element, Host, Prop, State } from '@stencil/core';
 import { sanitizeVegaComponent } from '../../../utils/component';
-import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+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/componentUsageRuntimeMetrics';
 import { VegaCalendarEventSubStateController } from './slimmers/controllers/vega-calendar-sub-state-controller';
 import { VegaCalendarTitleMaxHeightController } from './slimmers/controllers/vega-calendar-event-title-max-height-controller';
 import { PageResizeObserverSlimmer } from '../../../helpers/slimmers/pageResizeObserverSlimmer';
+import { VegaCalendarEventSlotController } from './slimmers/controllers/vega-calendar-event-slot-controller';
 export class VegaCalendarEvent {
   constructor() {
     this.globalSlimmer = {};
@@ -29,11 +30,14 @@ 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();
     this.timeFormat = '24-hour';
+    this.slotMode = false;
   }
   render() {
+    slotPlaceholder(h("slot", null));
     return sanitizeVegaComponent(h(Host, null, this.calendarEvent ? this.renderer.render() : null), this.host);
   }
   static get is() { return "vega-calendar-event"; }
@@ -67,7 +71,8 @@ export class VegaCalendarEvent {
     }
   }; }
   static get states() { return {
-    "timeFormat": {}
+    "timeFormat": {},
+    "slotMode": {}
   }; }
   static get elementRef() { return "host"; }
 }
@@ -86,6 +91,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "colorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEvent.prototype, "slotController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendarEvent.prototype, "subStateController", void 0);

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

@@ -0,0 +1,10 @@
+/* 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 {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}