@globalpayments/vega 2.18.1 → 2.19.0

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;
+}

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

@@ -0,0 +1,55 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, h, Host, Prop, Element } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { getCalendarEventSlotName } from '../utils';
+export class VegaCalendarEventSlot {
+  constructor() {
+    this.globalSlimmer = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { slot: getCalendarEventSlotName(this.eventKey) },
+      h("slot", null)), this.host);
+  }
+  static get is() { return "vega-calendar-event-slot"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-calendar-event-slot.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-calendar-event-slot.css"]
+  }; }
+  static get properties() { return {
+    "eventKey": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the event key."
+      },
+      "attribute": "event-key",
+      "reflect": true
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaCalendarEventSlot.prototype, "globalSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendarEventSlot.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);

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

@@ -586,6 +586,57 @@
   box-sizing: border-box;
   padding-left: 3px;
 }
+.calendar-view-container .calendar-view-event-all .more-button {
+  display: inline-block;
+  height: 16px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+  cursor: pointer;
+  border-radius: 2px;
+  margin-left: 2px;
+  padding: 2px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .calendar-view-container .calendar-view-event-all .more-button {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+.calendar-view-container .calendar-view-event-all .more-button:focus-visible {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+}
+.calendar-view-container .calendar-view-event-all .event-all-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+}
 .calendar-view-container .day-event-col {
   position: relative;
 }
@@ -600,4 +651,8 @@
 }
 .calendar-view-container .day-event-col .time-event-block:focus-within {
   z-index: 60 !important;
+}
+
+.calendar-event-slot-container {
+  display: none;
 }

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

@@ -28,6 +28,7 @@ import { VegaCalendarTimedEventRenderer } from './slimmers/day-view/renderers/ti
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaCalendarFullDayEventLayoutRenderer } from './slimmers/common/renderers/vega-calendar-full-day-event-layout-renderer';
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/subStateNotifySlimmer';
+import { VegaCalendarFullDayEventMoreButtonRenderer } from './slimmers/day-view/renderers/full-day-event/vega-calendar-full-day-event-more-button-renderer';
 export class VegaCalendar {
   constructor() {
     this.globalSlimmer = {};
@@ -43,6 +44,7 @@ export class VegaCalendar {
     this.currentPeriodController = new VegaCalendarCurrentPeriodController();
     this.calendarViewController = new VegaCalendarViewController();
     this.dayViewFullDayEventRenderer = new VegaCalendarFullDayEventRenderer();
+    this.dayViewFullDayEventMoreButtonRenderer = new VegaCalendarFullDayEventMoreButtonRenderer();
     this.dayViewTimedEventRenderer = new VegaCalendarTimedEventRenderer();
     this.eventItemRenderer = new VegaCalendarEventItemRenderer();
     this.dayViewEventLayoutRenderer = new VegaCalendarDayViewEventLayoutRenderer();
@@ -54,6 +56,7 @@ export class VegaCalendar {
     this.dateDblClickEmitter = createEventEmitSlimmer(VegaCalendar, VegaDateDblClick);
     this.changeEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.switchPanelRenderer.getSwitchPanelRef());
     this.timeFormatNotifySlimmer = createSubStateNotifySlimmer(VegaCalendar, 'timeFormat', 'watchTimeFormat');
+    this.showAllEventsInDayOrWeekView = false;
     this.calendarEvents = [];
     /**
      * Specifies the current view mode of the calendar.
@@ -180,6 +183,7 @@ export class VegaCalendar {
   static get states() { return {
     "calendarView": {},
     "currentPeriod": {},
+    "showAllEventsInDayOrWeekView": {},
     "calendarEvents": {}
   }; }
   static get events() { return [{
@@ -357,6 +361,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewFullDayEventRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaCalendar.prototype, "dayViewFullDayEventMoreButtonRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaCalendar.prototype, "dayViewTimedEventRenderer", void 0);

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.css

@@ -70,8 +70,7 @@
 }
 
 :host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):focus-within {
-  --tw-shadow: 0 0 #0000;
-  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+  outline: none;
 }
 
 :host .vega-dropdown .vega-dropdown-search vega-input::part(input-container):hover {

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

@@ -52,7 +52,9 @@ vega-field-label {
 }
 
 .vega-input-container:focus-within {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 
 .vega-input-container.error {
@@ -64,8 +66,9 @@ vega-field-label {
 }
 
 .vega-input-container.error:focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 .vega-input-prefix {

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.css

@@ -22,9 +22,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .vega-input-phone-number-container.error vega-input::part(input-container):focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
   box-shadow: 0 0 0;
 }
 

package/dist/collection/components/vega-input-range/vega-input-range.css

@@ -52,7 +52,7 @@
 .vega-input-range-input-container vega-input::part(input-container):focus-within {
   outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
   outline-offset: 2px;
-  border: 1px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
   position: relative;
   box-shadow: 0 0 0;
   margin: -1px;
@@ -104,9 +104,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 .vega-input-range-container.error vega-input::part(input-container):focus-within {
-  border: 1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));
   outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
   outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 .vega-input-range-hint {

package/dist/collection/components/vega-input-select/vega-input-select.css

@@ -81,9 +81,9 @@
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
 }
 :host .vega-input-select-container:focus {
-  border: 1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));
-  outline: none;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
 }
 
 :host .error .vega-input-select-container {
@@ -93,8 +93,9 @@
   border: 1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1));
 }
 :host .error .vega-input-select-container:focus {
-  border: 1px solid rgba(var(--v-border-input-field-danger-focus, 233, 71, 104, 1));
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));
+  outline: 2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));
+  outline-offset: 2px;
+  border: 1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));
 }
 
 :host(.vega-input-select-disabled) .vega-input-select-label {