@globalpayments/vega 2.73.0 → 2.76.0

package/dist/esm/vega-date-picker_2.entry.js

@@ -1,60 +1,58 @@
 import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-090d31ca.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
-import { D as DateRequiredRule } from './date-required-rule-a9980386.js';
-import { Z as compareIsSameOrBefore, Q as isDateStr, _ as compareIsBefore, $ as compareIsAfter, a0 as CalendarDate, a1 as MonthPeriod, a2 as isCalendarDateType } from './type-guard-b48aec98.js';
+import { D as DateRequiredRule } from './date-required-rule-e771e7d9.js';
+import { Z as compareIsSameOrBefore, Q as isDateStr, _ as compareIsBefore, $ as compareIsAfter, a0 as CalendarDate, a1 as MonthPeriod, a2 as isCalendarDateType } from './type-guard-f50e34d6.js';
 import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import { c as MapToComponentField, V as VegaSlimmer, L as LogUtility, M as MapToComponentMethod, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-a84cc93e.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-257928c1.js';
-import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-bb99c0c2.js';
-import { D as DomNodeSubjectObserverFactory, a as VegaClick, r as VegaSelectionChange, q as VegaClear, p as VegaMonthYearChange, N as VegaOpen, e as VegaClose, g as VegaChange, d as domNodeSubjectFactory, V as VegaDropdownClick, s as VegaDropdownShow, t as VegaDropdownHide } from './dom-node-subject-observer-factory-1aaa1159.js';
-import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-46020a03.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-5817d14d.js';
+import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-ee31416b.js';
+import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-82f346e3.js';
+import { a as VegaClick, q as VegaSelectionChange, p as VegaClear, o as VegaMonthYearChange, N as VegaOpen, d as VegaClose, f as VegaChange, V as VegaDropdownClick, r as VegaDropdownShow, s as VegaDropdownHide } from './vega-event-id-38aa77a0.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { i as isArrayEqual } from './array-7888f339.js';
-import './translation-96e5debd.js';
-import './vega-env-manager-8f8dc473.js';
-import './function-extension-8b06c6f8.js';
-import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
-import './wait-for-vega-handler-c2c07ac3.js';
-import './dto-renderer-manager-49ae5d56.js';
-import './vega-nonce-manager-497e5eb5.js';
-import './code-block-666674d7.js';
+import './internal-translation-controller-911515f9.js';
+import { F as FeatureFlag } from './feature-flag-controller-09ea7e87.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { S as StringMaskStrategy } from './string-mask-strategy-4a18ed1a.js';
-import { S as StringInputFormatterSlimmer } from './string-input-formatter-slimmer-3a42d9b8.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-e303cb7d.js';
+import { S as StringMaskStrategy } from './string-mask-strategy-6beaf664.js';
+import { S as StringInputFormatterSlimmer } from './string-input-formatter-slimmer-5b413ff9.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-9984d922.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-2d791d0e.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-e6f98de5.js';
-import { T as TranslationSlimmer } from './translation-slimmer-c936cb1b.js';
-import { E as ElementAppenderSlimmer } from './element-appender-slimmer-b9890dcb.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-ffaecb9a.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-649b9d30.js';
+import { T as TranslationSlimmer } from './translation-slimmer-2394b173.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-e4713a72.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { v as VegaInternalDatePickerCalendarClear, w as VegaInternalDatePickerCalendarUpdatePeriodByUser } from './vega-internal-event-id-4a06d705.js';
+import { C as ClickOutsideOnlyToDismissStrategy } from './click-outside-only-to-dismiss-strategy-3d286c1b.js';
+import { v as VegaInternalDatePickerCalendarClear, w as VegaInternalDatePickerCalendarUpdatePeriodByUser } from './vega-internal-event-id-799d012e.js';
 import { O as Observer } from './observer-3959f9dd.js';
-import { M as MonthViewGenerator } from './month-view-generator-4bec99fd.js';
+import { M as MonthViewGenerator } from './month-view-generator-eaf9029c.js';
 import './breakpoints-d9faf11c.js';
 import './ui-28fd4193.js';
 import './typography-396de03f.js';
 import './string-a953eafc.js';
-import './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import './misc-9fdbcfbb.js';
 import './dynamic-slimmer-90b8af32.js';
-import './page-resize-observer-slimmer-8744cb44.js';
+import './index-3b327f29.js';
+import './page-resize-observer-slimmer-d6af0d86.js';
+import './breakpoints-56e5407b.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './sub-state-observer-slimmer-41a1b380.js';
+import './sub-state-observer-slimmer-478c9f41.js';
+import './icon-manager-539d7cf7.js';
+import './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
 import './number-4398f2e1.js';
-import './dark-mode-style-controller-de88a117.js';
-import './_commonjsHelpers-9943807e.js';
-import './internal-vega-event-manager-fdee2a0a.js';
-import './object-66c37948.js';
-import './base-renderer-101f6d04.js';
-import './index-e9da316f.js';
-import './string-format-strategy.abstract-75540c16.js';
-import './index-0d487fae.js';
-import './keyboard-manager-89acac79.js';
-import './responsive-format-facade-94897ae8.js';
+import './index-bfc6dfa2.js';
+import './string-format-strategy.abstract-713fba36.js';
+import './wait-for-component-did-render-b08ef07b.js';
+import './keyboard-manager-38934f94.js';
+import './internal-vega-event-manager-32a3d848.js';
+import './vega-env-manager-8f8dc473.js';
+import './internal-vega-z-index-manager-7d2b54c3.js';
+import './responsive-format-facade-7a071174.js';
 import './pixel-f32c07ce.js';
 
 /**
@@ -261,11 +259,14 @@ const Icons = {
     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_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
   },
   'caret-down': {
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="currentColor" d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"/></svg>`,
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M199 401c9.4 9.4 24.6 9.4 33.9 0L425 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L41 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L199 401z"/></svg>`,
+  },
+  'bulls-eye': {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zM256 368a112 112 0 1 0 0-224 112 112 0 1 0 0 224zm0-272a160 160 0 1 1 0 320 160 160 0 1 1 0-320zm0 176a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm0-80a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/></svg>`,
   },
 };
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__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;
@@ -335,47 +336,47 @@ class VegaDatePickerRenderer extends VegaSlimmer {
 (() => {
   VegaInternalIconManager.register({ calendar: Icons.calendar });
 })();
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "disabled", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "size", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "mode", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "label", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "required", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "readOnly", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "autoValidation", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "isMobileDevice", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__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;
@@ -415,23 +416,23 @@ class VegaDatePickerInputRendererBase extends VegaSlimmer {
       h("vega-icon", { icon: "close" })))));
   }
 }
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "disabled", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "showClearIcon", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "mode", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__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;
@@ -479,23 +480,23 @@ class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase
     return this.singleDateInputRef;
   }
 }
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "placeholder", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__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;
@@ -586,32 +587,32 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
     await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
   }
 }
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "calendarOpenStateController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "allowRepick", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "format", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__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;
@@ -716,65 +717,65 @@ class VegaDatePickerCalendarRenderer$1 extends VegaSlimmer {
 VegaDatePickerCalendarRenderer$1.calendarModalSize = 344;
 VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForSingle = {
   width: 280,
-  height: 316,
+  height: 320,
 };
 VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForRange = {
   width: 608,
-  height: 324,
+  height: 358,
 };
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "format", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "mode", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "minDate", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "maxDate", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "clearButton", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "dropdownConfig", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "showYearMonthDropdowns", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "timezone", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isMobileDevice", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isCalendarShow", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "isDateDisabled", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "allowRepick", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "vegaDatePickerValueController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer$1.prototype, "calendarOpenStateController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerCalendarRenderer$1.prototype, "componentDidLoad", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__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;
@@ -896,41 +897,41 @@ class VegaDatePickerValueController extends VegaSlimmer {
     return isValid;
   }
 }
-__decorate$e([
+__decorate$f([
   MapToComponentField({ writable: true })
 ], VegaDatePickerValueController.prototype, "value", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "mode", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "format", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerValueController.prototype, "componentWillLoad", null);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('watchValue')
 ], VegaDatePickerValueController.prototype, "watchValue", null);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('watchMode')
 ], VegaDatePickerValueController.prototype, "watchMode", null);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__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;
@@ -1043,29 +1044,29 @@ class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
     this.setup();
   }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "format", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "mode", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerFormatController.prototype, "componentDidLoad", null);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('watchFormat')
 ], VegaDatePickerFormatController.prototype, "watchFormat", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__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;
@@ -1102,13 +1103,13 @@ class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
     ]);
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
 
@@ -1163,7 +1164,7 @@ const VegaDatePickerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__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;
@@ -1183,7 +1184,7 @@ class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
       placement: ['bottom', 'top'],
       alignment: ['start', 'end'],
       isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
-    }), () => 'custom', 'isCalendarShow');
+    }), () => new ClickOutsideOnlyToDismissStrategy(), 'isCalendarShow');
     this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
   }
   /**
@@ -1278,40 +1279,40 @@ class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('componentDidRender')
 ], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('doOpen')
 ], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('doClose')
 ], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('watchDisabled')
 ], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('watchIsCalendarShow')
 ], VegaDatePickerCalendarOpenStateController.prototype, "watchIsCalendarShow", null);
 
 const vegaDatePickerCss = ":host{display:inline-block;width:100%;text-align:left;line-height:normal}:host vega-field-label{margin-bottom:8px}:host .vega-input-container{position:relative;display:block;border-radius:8px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));display:flex;align-items:center}:host .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .vega-input-container .date-picker-input{padding-left:16px;padding-right:16px;width:100%;box-sizing:border-box;display:flex;align-items:center}:host .vega-input-container.default .date-picker-input{padding-left:16px;padding-right:16px}:host .vega-input-container.small .date-picker-input{padding-left:12px;padding-right:12px}:host .vega-input-container.default .date-picker-input input{padding-top:12px;padding-bottom:12px}:host .vega-input-container.small .date-picker-input input{padding-top:8px;padding-bottom:8px}:host .vega-input-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .vega-input-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .vega-input-container.single-mode.error:focus-within,:host .vega-input-container.range-mode.error .date-picker-input:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1));border-radius:8px}:host .vega-input-container.range-mode.error .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode.error .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container.single-mode:not(.error):focus-within,:host .vega-input-container.range-mode:not(.error) .date-picker-input:focus-within{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));border-radius:8px}:host .vega-input-container.range-mode .date-picker-input:first-of-type:focus-within{margin:-1px 0 -1px -1px}:host .vega-input-container.range-mode .date-picker-input:last-of-type:focus-within{margin:-1px -1px -1px 0}:host .vega-input-container input{width:100%;box-sizing:content-box;border-width:0px;margin:0px;outline:2px solid transparent;outline-offset:2px;background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-input-container input::placeholder{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;padding-left:8px;padding-right:8px;padding-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .vega-hidden{display:none}.vega-input-clear-icon{width:16px;height:16px;cursor:pointer;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}.vega-input-clear-icon vega-icon{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-shrink:0}:host .range-input-divider{width:1px;height:24px;border-style:solid;border-right-width:1px;border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-input-container.range-mode.mobile .range-input-divider{width:100%;height:1px;border-style:solid;border-right-width:0px;border-top-width:1px;border-bottom-width:0px;border-left-width:0px;border-color:rgba(var(--v-border-color-divider, 171, 198, 216, 1))}:host .vega-input-prefix{display:flex;margin-right:8px}:host .vega-input-container.range-mode.mobile.small .vega-input-prefix{margin-right:8px}:host .vega-input-container.range-mode.mobile{flex-direction:column}:host .vega-input-container.range-mode.mobile .date-picker-input:last-of-type{padding-left:40px}:host .vega-input-container.range-mode.mobile.small .date-picker-input:last-of-type{padding-left:36px}:host(.disabled) .vega-input-container{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));--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}:host(.disabled) .vega-input-container:hover{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host(.disabled) .vega-input-container input{color:rgba(var(--v-text-input-disabled, 107, 116, 125, 1))}";
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__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);
@@ -1581,63 +1582,63 @@ const VegaDatePicker = class {
     "disabled": ["watchDisabled"]
   }; }
 };
-__decorate$a([
+__decorate$b([
   InjectVegaGlobalSlimmer()
 ], VegaDatePicker.prototype, "globalSlimmers", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "translationSlimmer", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "startInputFormatController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "endInputFormatController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "formFieldController", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "changeEventEmitter", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "inputEventPrevent", void 0);
-__decorate$a([
+__decorate$b([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$a([
+__decorate$b([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);
 VegaDatePicker.style = vegaDatePickerCss;
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__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;
@@ -1650,6 +1651,7 @@ class VegaDatePickerCalendarRenderer extends VegaSlimmer {
         'static-height': this.staticHeight,
       } },
       h("div", { class: "container__main" },
+        this.headerRenderer.render(),
         this.renderContainer(),
         this.renderFooter())));
   }
@@ -1682,30 +1684,33 @@ class VegaDatePickerCalendarRenderer extends VegaSlimmer {
     ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
   }
 }
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "staticHeight", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "headerRenderer", void 0);
 
 const MonthNames = [
   'January',
@@ -1722,38 +1727,25 @@ const MonthNames = [
   'December',
 ];
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__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;
 };
 class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startDropdownRef = {
-      month: null,
-      year: null,
-    };
-    this.endDropdownRef = {
-      month: null,
-      year: null,
-    };
-  }
-  render(period, type) {
-    return (h("vega-flex", { gap: 'size-8', justifyContent: 'center' },
+  render() {
+    const canRender = this.mode !== 'range' || this.showYearMonthDropdowns || this.isMobileDevice;
+    return (canRender && (h("vega-flex", { justifyContent: 'center' },
       this.showYearMonthDropdowns
-        ? this.renderMonthDropdownSwitcher(period, type)
-        : this.renderCurrentMonth(period),
+        ? this.renderMonthDropdownSwitcher()
+        : this.renderCurrentMonth(),
       this.showYearMonthDropdowns
-        ? this.renderYearDropdownSwitcher(period, type)
-        : this.renderCurrentYear(period)));
-  }
-  getMonthDropdownOptions(type) {
-    let currentYear = this.currentPeriod.current.year;
-    const currentMonth = this.currentPeriod.current.month;
-    if (type === 'end' && currentMonth === 12)
-      currentYear += 1;
+        ? this.renderYearDropdownSwitcher()
+        : this.renderCurrentYear())));
+  }
+  getMonthDropdownOptions() {
+    const currentYear = this.currentPeriod.current.year;
     return MonthNames.map((month, index) => {
       return {
         key: `${index}`,
@@ -1788,37 +1780,25 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
     }
     return years;
   }
-  renderMonthDropdownSwitcher(period, type) {
-    const { month } = period.current;
+  renderMonthDropdownSwitcher() {
+    const { month } = this.currentPeriod.current;
     const monthIndex = month - 1;
-    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(type), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.month = node;
-        }
-        else {
-          this.endDropdownRef.month = node;
-        }
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
         this.onDropdownShowOrHide(node);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
           const selectedMonth = parseInt(payload.detail);
-          this.setDateBasedOnSelectedMonth(period, selectedMonth, type);
+          this.setDateBasedOnSelectedMonth(selectedMonth);
         });
-      } }, this.renderCurrentMonth(period)));
+      } }, this.renderCurrentMonth()));
   }
-  renderYearDropdownSwitcher(period, type) {
-    const { year } = period.current;
+  renderYearDropdownSwitcher() {
+    const { year } = this.currentPeriod.current;
     return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getYearDropdownOptions(), selectedSourceKey: year.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
-        if (type === 'start') {
-          this.startDropdownRef.year = node;
-        }
-        else {
-          this.endDropdownRef.year = node;
-        }
         this.onDropdownShowOrHide(node);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
-          this.setDateBasedOnSelectedYear(period, parseInt(payload.detail), type);
+          this.setDateBasedOnSelectedYear(parseInt(payload.detail));
         });
-      } }, this.renderCurrentYear(period)));
+      } }, this.renderCurrentYear()));
   }
   /**
    * Control ui when dropdown shows or closes
@@ -1827,7 +1807,6 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
    */
   onDropdownShowOrHide(dropdown) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownShow, async () => {
-      await this.closeOpenDropdowns(dropdown);
       dropdown.classList.add('active');
     });
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownHide, () => {
@@ -1838,45 +1817,34 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
       }
     });
   }
-  renderCurrentMonth(period) {
-    return (h("div", { class: "month-item-name" },
-      h("span", null, this.translationSlimmer.t(period.current.getMonthName())),
+  renderCurrentMonth() {
+    const label = this.translationSlimmer.t(this.currentPeriod.current.getMonthName());
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name" },
+      h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
-  renderCurrentYear(period) {
-    return (h("div", { class: "month-item-year" },
-      h("span", null, period.current.year),
+  renderCurrentYear() {
+    const label = this.currentPeriod.current.year.toString();
+    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year" },
+      h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
   renderDropdownSwitchIcon() {
-    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down') })));
+    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down'), color: 'text-link' })));
   }
-  setDateBasedOnSelectedMonth(period, monthIndex, type) {
-    const { year } = period.current;
-    const date = type === 'start' ? new Date(year, monthIndex, 1) : new Date(year, monthIndex - 1, 1);
+  setDateBasedOnSelectedMonth(monthIndex) {
+    const { year } = this.currentPeriod.current;
+    const date = new Date(year, monthIndex, 1);
     const newPeriod = new MonthPeriod(CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  setDateBasedOnSelectedYear(period, year, type) {
-    const { month } = period.current;
+  setDateBasedOnSelectedYear(year) {
+    const { month } = this.currentPeriod.current;
     const startMonthIndex = month - 1;
-    const endMonthIndex = startMonthIndex - 1;
-    const date = type === 'start' ? new Date(year, startMonthIndex, 1) : new Date(year, endMonthIndex, 1);
+    const date = new Date(year, startMonthIndex, 1);
     const newPeriod = new MonthPeriod(CalendarDate.from(date));
     this.currentPeriodController.updateCalendarPeriod(newPeriod);
   }
-  /**
-   * Close any open vega-dropdown and ignore currently clicked one
-   *
-   * * @param {HTMLVegaDropdownElement} dropdownToIgnore - Dropdown to ignore
-   */
-  async closeOpenDropdowns(dropdownToIgnore) {
-    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
-    await Promise.all(dropdowns
-      .flatMap((ref) => [ref.month, ref.year])
-      .filter((dropdown) => Boolean(dropdown) && dropdown !== dropdownToIgnore)
-      .map((dropdown) => dropdown.hide()));
-  }
 }
 (() => {
   VegaInternalIconManager.register({
@@ -1885,29 +1853,38 @@ class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
 })();
 VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR = 10;
 VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR = 10;
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriodController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "showYearMonthDropdowns", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "translationSlimmer", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "minCalendarDate", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "maxCalendarDate", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "yearMonthDropdownProps", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "size", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "isMobileDevice", void 0);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__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;
@@ -1947,17 +1924,17 @@ class VegaDatePickerCalendarStateBaseAbstract extends VegaSlimmer {
     return true;
   }
 }
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "connectedCallback", null);
-__decorate$7([
+__decorate$8([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDatePickerCalendarStateBaseAbstract.prototype, "disconnectedCallback", null);
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__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;
@@ -2100,62 +2077,62 @@ class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePickerCalend
     DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser);
   }
 }
-__decorate$6([
+__decorate$7([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "host", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "today", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "mode", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "format", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "timezone", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "minCalendarDate", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "maxCalendarDate", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "isMobileDevice", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentField()
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('disconnectedCallback')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "disconnectedCallback", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "componentWillLoad", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('watchMaxCalendarDate')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMaxCalendarDate", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('watchMinCalendarDate')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMinCalendarDate", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('watchCurrentPeriod')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchCurrentPeriod", null);
-__decorate$6([
+__decorate$7([
   MapToComponentMethod('reset')
 ], VegaDatePickerCalendarCurrentPeriodController.prototype, "resetCurrentPeriod", null);
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__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;
@@ -2178,20 +2155,20 @@ class VegaDatePickerCalendarTodayController extends VegaSlimmer {
     this.today = CalendarDate.from(new Date(), this.timezone);
   }
 }
-__decorate$5([
+__decorate$6([
   MapToComponentField()
 ], VegaDatePickerCalendarTodayController.prototype, "timezone", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarTodayController.prototype, "today", void 0);
-__decorate$5([
+__decorate$6([
   MapToComponentMethod('connectedCallback')
 ], VegaDatePickerCalendarTodayController.prototype, "connectedCallback", null);
-__decorate$5([
+__decorate$6([
   MapToComponentMethod('watchTimezone')
 ], VegaDatePickerCalendarTodayController.prototype, "watchTimezone", null);
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__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;
@@ -2206,37 +2183,16 @@ class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
     const period = type === 'end' ? this.currentPeriod.next() : this.currentPeriod;
     const periodView = this.monthViewGenerator.generate(period);
     return (h("div", { class: "month-item" },
-      this.renderMonthHeader(period, type),
+      this.renderCurrentYearMonth(period),
       this.renderWeek(periodView),
       this.renderDays(periodView, period)));
   }
-  renderMonthHeader(period, type) {
-    return (h("vega-grid", { class: "month-item-header", column: '3-auto', row: 1 },
-      this.renderPrevIcon(period, type),
-      this.yearMonthSwitcherRender.render(period, type),
-      this.renderNextIcon(period, type)));
-  }
-  renderPrevIcon(period, type) {
-    var _a;
-    const firstDateOfMonth = period.current.firstDateOfMonth();
-    const lockedPreviousPeriod = this.isBeforeMinDate(firstDateOfMonth) || ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(firstDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'end';
-    return lockedPreviousPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-previous-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
-          this.currentPeriodController.gotoPreviousPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
-  }
-  renderNextIcon(period, type) {
-    var _a;
-    const lastDateOfMonth = period.current.lastDateOfMonth();
-    const lockedNextPeriod = this.isAfterMaxDate(lastDateOfMonth) || ((_a = this.maxCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(lastDateOfMonth));
-    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'start';
-    return lockedNextPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-next-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
-          this.currentPeriodController.gotoNextPeriod();
-        });
-      }, size: this.getNavigationIconSize() }));
+  renderCurrentYearMonth(period) {
+    return (this.mode === 'range' &&
+      !this.isMobileDevice && (h("vega-box", { class: "current-month-year" },
+      this.translationSlimmer.t(period.current.getMonthName()),
+      ' ',
+      period.current.year)));
   }
   renderWeek(periodView) {
     return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
@@ -2291,63 +2247,44 @@ class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
   isAfterMaxDate(day) {
     return this.maxCalendarDate && day.isAfter(this.maxCalendarDate);
   }
-  getNavigationIconSize() {
-    if (this.size === 'large')
-      return 'default';
-    if (this.size === 'small')
-      return 'extra-small';
-    return 'small';
-  }
 }
-(() => {
-  VegaInternalIconManager.register({
-    'chevron-left': Icons['chevron-left'],
-    'chevron-right': Icons['chevron-right'],
-  });
-})();
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "currentPeriod", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "today", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "translationSlimmer", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "yearMonthSwitcherRender", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "currentPeriodController", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "hoverDate", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "maxCalendarDate", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "minCalendarDate", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "selectionController", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "calendarSelection", void 0);
-__decorate$4([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
-__decorate$4([
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
-__decorate$4([
+__decorate$5([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
 
@@ -2475,7 +2412,7 @@ class CalendarSelection {
   }
 }
 
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__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;
@@ -2620,47 +2557,47 @@ class VegaDatePickerCalendarSelectionController extends VegaDatePickerCalendarSt
     ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser), {});
   }
 }
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "host", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "mode", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "format", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "selection", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "calendarSelection", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarSelectionController.prototype, "hoverDate", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "clearEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "vegaSelectionChangeEventEmitter", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentField()
 ], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
-__decorate$3([
+__decorate$4([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);
-__decorate$3([
+__decorate$4([
   MapToComponentMethod('watchSelection')
 ], VegaDatePickerCalendarSelectionController.prototype, "watchSelection", null);
-__decorate$3([
+__decorate$4([
   MapToComponentMethod('reset')
 ], VegaDatePickerCalendarSelectionController.prototype, "resetRange", null);
-__decorate$3([
+__decorate$4([
   MapToComponentMethod('watchCalendarSelection')
 ], VegaDatePickerCalendarSelectionController.prototype, "watchCalendarSelection", null);
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__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;
@@ -2690,32 +2627,32 @@ class VegaDatePickerCalendarMinMaxDateController extends VegaSlimmer {
     this.minCalendarDate = CalendarDate.fromString(this.minDate, this.format);
   }
 }
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "maxDate", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "minDate", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField()
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "format", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "maxCalendarDate", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentField({ writable: true })
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "minCalendarDate", void 0);
-__decorate$2([
+__decorate$3([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "componentWillLoad", null);
-__decorate$2([
+__decorate$3([
   MapToComponentMethod('watchMaxDate')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMaxDate", null);
-__decorate$2([
+__decorate$3([
   MapToComponentMethod('watchMinDate')
 ], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMinDate", null);
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$2 = (undefined && undefined.__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;
@@ -2767,23 +2704,126 @@ class VegaDatePickerCalendarAllowRepickController extends VegaSlimmer {
     }
   }
 }
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "calendarSelection", void 0);
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "isMobileDevice", void 0);
-__decorate$1([
+__decorate$2([
   MapToComponentField()
 ], VegaDatePickerCalendarAllowRepickController.prototype, "currentPeriodController", void 0);
-__decorate$1([
+__decorate$2([
   MapToComponentMethod('triggerRepick')
 ], VegaDatePickerCalendarAllowRepickController.prototype, "triggerRepick", null);
-__decorate$1([
+__decorate$2([
   MapToComponentMethod('watchCalendarSelection')
 ], VegaDatePickerCalendarAllowRepickController.prototype, "watchCalendarSelection", null);
 
-const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7)}.calendar,.calendar .container__main,.calendar .container__months{height:100%}:host(.small.range) .calendar.static-height .container__main,:host(.regular.range) .calendar.static-height .container__main,:host(.large.range) .calendar.static-height .container__main{aspect-ratio:1/1}:host(.small){--vega-litepicker-day-width:28px;--vega-litepicker-day-height:28px;--vega-date-picker-calendar-range-space-size:16px}:host(.small) .calendar .container__main{max-width:360px;max-height:360px}:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;margin-bottom:4px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-header{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){:host(.small) .calendar .container__months .month-item-header{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){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row{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){:host(.small) .calendar .container__months .month-item-weekdays-row{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){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row div{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){:host(.small) .calendar .container__months .month-item-weekdays-row div{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){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{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){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{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){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small.range) .calendar .container__main{width:100%;max-width:600px;max-height:360px}:host(.regular){--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px;--vega-date-picker-calendar-range-space-size:24px}:host(.regular) .calendar .container__main{max-width:450px;max-height:450px}:host(.regular) .calendar .container__months .month-item-header{margin-bottom:12px}:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular.range) .calendar .container__main{width:100%;max-width:900px;max-height:450px}:host(.large){--vega-litepicker-day-width:56px;--vega-litepicker-day-height:56px;--vega-date-picker-calendar-range-space-size:40px}:host(.large) .calendar .container__main{max-width:600px;max-height:600px}:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large.range) .calendar .container__main{width:100%;max-width:1200px;max-height:600px}.calendar .container__main{display:flex;flex-direction:column}.calendar .container__months{display:flex}.calendar .container__months.columns-2{width:100%;flex-direction:row}.calendar .container__months .month-item{box-sizing:content-box;position:relative;width:100%;height:100%;z-index:1;display:flex;flex-direction:column}.calendar .container__months.columns-2 .month-item:first-of-type{padding-right:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months.columns-2 .month-item:last-of-type{padding-left:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months .month-item:nth-child(2)::before{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-top:32px;margin-bottom:32px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;width:1px;content:\"\";display:block}.calendar .container__months .month-item-header{display:flex;justify-content:space-between;align-items:center;text-align:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}.calendar .container__months .month-item-header div>.month-item-name{margin-right:5px}.calendar .container__months .month-item-header .button-previous-month,.calendar .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;cursor:default}.calendar .container__months .month-item-header .button-previous-month *,.calendar .container__months .month-item-header .button-next-month *{pointer-events:none}.calendar .container__months .month-item-header .button-previous-month>svg,.calendar .container__months .month-item-header .button-previous-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-header .button-next-month>svg,.calendar .container__months .month-item-header .button-next-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-weekdays-row{color:rgba(var(--v-text-primary, 32, 54, 69, 1));place-items:center}.calendar .container__months .month-item:first-child .button-previous-month{visibility:visible}.calendar .container__months .month-item:last-child .button-next-month{visibility:visible}.calendar .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.calendar .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.calendar .container__days{text-align:center;place-items:center;flex:1 1 auto}.calendar.static-height .container__days{align-content:flex-start}.calendar:not(.static-height) .container__days{flex:none}.calendar .container__months .month-item-weekdays-row>div,.calendar .container__days>div,.calendar .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:100%;min-width:var(--vega-litepicker-day-width)}.calendar .container__days .day-item{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));border-width:0px}.calendar .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.calendar .container__days .day-item:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-locked:hover:before,html.dark .calendar .container__days .day-item.is-locked:hover:before{border-style:none}.calendar .container__days .day-item.is-disabled:hover:before{border-style:none}.calendar .container__days .day-item.is-locked,.calendar .container__days .day-item.is-disabled{-webkit-tap-highlight-color:transparent}.calendar .container__days .day-item:hover{position:relative}.calendar .container__days .day-item.is-today{color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar .container__days .day-item.is-in-range{border-radius:0px;position:relative;z-index:2;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-start-date:hover:before{z-index:2}.calendar .container__days .day-item.is-start-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-start-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-end-date:hover:before{z-index:2}.calendar .container__days .day-item.is-end-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-end-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.calendar .container__days .day-item.is-start-date.is-end-date:after,html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after{background:none}.calendar .container__tooltip{display:none}.calendar .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-date-picker-calendar-day-height)}.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.calendar .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.calendar{left:initial !important;top:initial !important;position:initial !important}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.calendar .container__days .day-item.is-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed;text-decoration:line-through}.calendar .container__days>div:not(.day-item){-webkit-tap-highlight-color:transparent}.calendar .month-item-header>div.dropdown-section{display:flex;gap:12px}.calendar .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}.locked-month-button{width:32px;height:32px}vega-dropdown .month-item-name,vega-dropdown .month-item-year{display:flex;gap:4px;align-items:center;cursor:pointer}vega-dropdown.active .month-item-name,vega-dropdown.active .month-item-year{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:active,vega-dropdown.active .month-item-year:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:hover,vega-dropdown.active .month-item-year:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}vega-dropdown.active .month-item-name:focus-visible,vega-dropdown.active .month-item-year:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}";
+var __decorate$1 = (undefined && undefined.__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;
+};
+class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
+  render() {
+    return (h("vega-flex", { class: "month-item-header", alignItems: "center" },
+      this.renderSwitcher(),
+      this.yearMonthSwitcherRender.render()));
+  }
+  renderSwitcher() {
+    return (h("vega-flex", { gap: "size-8", alignItems: "center" },
+      this.renderPrevIcon(),
+      this.renderToday(),
+      this.renderNextIcon()));
+  }
+  renderPrevIcon() {
+    const startDate = this.currentPeriod.current.firstDateOfMonth();
+    const isDisabled = this.minCalendarDate &&
+      (startDate.isBefore(this.minCalendarDate) || startDate.equal(this.minCalendarDate));
+    return (h("vega-button-circle", { class: {
+        'button-previous-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoPreviousPeriod();
+        });
+      }, iconColor: isDisabled ? 'text-disabled' : 'text-link', size: this.getNavigationIconSize(), disabled: isDisabled }));
+  }
+  renderNextIcon() {
+    const period = this.mode === 'range' ? this.currentPeriod.next() : this.currentPeriod;
+    const endDate = period.current.lastDateOfMonth();
+    const isDisabled = this.maxCalendarDate &&
+      (endDate.isAfter(this.maxCalendarDate) || endDate.equal(this.maxCalendarDate));
+    return (h("vega-button-circle", { class: {
+        'button-next-month': true,
+        'disabled': isDisabled,
+      }, variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoNextPeriod();
+        });
+      }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
+  }
+  renderToday() {
+    const hasLabel = this.mode === 'range' && !this.isMobileDevice && this.size !== 'small';
+    return (h("vega-button-link", { class: {
+        'button-today': true,
+        'with-label': hasLabel,
+      }, label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(this.today, true, this.timezone));
+        });
+      }, size: this.size === 'large' ? 'default' : 'small', icon: VegaInternalIconManager.getIconKey('bulls-eye') }));
+  }
+  getNavigationIconSize() {
+    if (this.size === 'large')
+      return 'small';
+    return 'extra-small';
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-left': Icons['chevron-left'],
+    'chevron-right': Icons['chevron-right'],
+    'bulls-eye': Icons['bulls-eye'],
+  });
+})();
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriod", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "today", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "yearMonthSwitcherRender", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "mode", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentPeriodController", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "minCalendarDate", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "size", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "isMobileDevice", void 0);
+
+const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7)}.calendar,.calendar .container__main,.calendar .container__months{height:100%}:host(.small.range) .calendar.static-height .container__main,:host(.regular.range) .calendar.static-height .container__main,:host(.large.range) .calendar.static-height .container__main{aspect-ratio:1/1}:host .month-item-header .button-today::part(link){color:rgba(var(--v-text-link, 19, 98, 226, 1));vertical-align:top}:host .month-item-header vega-dropdown .month-item-name,:host .month-item-header vega-dropdown .month-item-year{display:flex;gap:8px;align-items:center;cursor:pointer;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}:host .month-item-header vega-dropdown.active .month-item-name,:host .month-item-header vega-dropdown.active .month-item-year{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .month-item-header .button-previous-month.disabled,:host .month-item-header .button-next-month.disabled{pointer-events:none}:host(.small.single) vega-dropdown .month-item-name span{max-width:48px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.small){--vega-litepicker-day-width:28px;--vega-litepicker-day-height:28px;--vega-date-picker-calendar-range-space-size:16px}:host(.small) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .current-month-year{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){:host(.small) .current-month-year{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){:host(.small) .current-month-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .month-item-header{gap:8px;margin-bottom:12px}:host(.small) .month-item-header .button-today{height:16px}:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{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){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{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){:host(.small) .month-item-header .month-item-name,:host(.small) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .month-item-header .month-item-name{margin-right:4px}:host(.small) .month-item-header vega-dropdown .month-item-name{margin-right:8px}:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{border-radius:4px;padding-left:4px;padding-right:4px;font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px;gap:2px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .month-item-header vega-dropdown .month-item-name,:host(.small) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .month-item-header vega-dropdown .month-item-name vega-icon,:host(.small) .month-item-header vega-dropdown .month-item-year vega-icon{width:12px;height:12px}:host(.small) .month-item-header .small-month-item-name{margin-right:8px}:host(.small) .month-item-header .small-month-item-name::part(label-container),:host(.small) .month-item-header .small-month-item-year::part(label-container){font-size:14px}:host(.small) .month-item .current-month-year{margin-bottom:4px}:host(.small) .calendar .container__main{max-width:360px;max-height:360px}:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;margin-bottom:4px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-header{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){:host(.small) .calendar .container__months .month-item-header{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){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row{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){:host(.small) .calendar .container__months .month-item-weekdays-row{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){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row div{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){:host(.small) .calendar .container__months .month-item-weekdays-row div{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){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{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){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{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){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small.range) .calendar .container__main{width:100%;max-width:600px;max-height:360px}:host(.regular){--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px;--vega-date-picker-calendar-range-space-size:24px}:host(.regular) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .current-month-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .month-item-header{gap:16px;margin-bottom:24px}:host(.regular) .month-item-header .button-today{height:16px}:host(.regular) .month-item-header .button-today.with-label{height:18px}:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .month-item-header .month-item-name,:host(.regular) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .month-item-header .month-item-name{margin-right:4px}:host(.regular) .month-item-header vega-dropdown .month-item-name{margin-right:16px}:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{border-radius:4px;padding-left:8px;padding-right:8px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px;padding-top:3px;padding-bottom:3px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .month-item-header vega-dropdown .month-item-name,:host(.regular) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:16px}}:host(.regular) .month-item .current-month-year{margin-bottom:12px}:host(.regular) .calendar .container__main{max-width:450px;max-height:450px}:host(.regular) .calendar .container__months .month-item-header{margin-bottom:12px}:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular.range) .calendar .container__main{width:100%;max-width:900px;max-height:450px}:host(.large){--vega-litepicker-day-width:56px;--vega-litepicker-day-height:56px;--vega-date-picker-calendar-range-space-size:40px}:host(.large) .current-month-year{text-align:center;color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .current-month-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .month-item-header{gap:16px;margin-bottom:24px}:host(.large) .month-item-header .button-today{height:16px}:host(.large) .month-item-header .button-today.with-label{height:24px}:host(.large) .month-item-header .month-item-name{margin-right:4px}:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;gap:8px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .month-item-header .month-item-name,:host(.large) .month-item-header .month-item-year{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .month-item-header vega-dropdown .month-item-name{margin-right:24px}:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{border-radius:8px;padding-left:12px;padding-right:12px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;padding-top:7px;padding-bottom:7px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .month-item-header vega-dropdown .month-item-name,:host(.large) .month-item-header vega-dropdown .month-item-year{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host(.large) .month-item .current-month-year{margin-bottom:16px}:host(.large) .calendar .container__main{max-width:600px;max-height:600px}:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large.range) .calendar .container__main{width:100%;max-width:1200px;max-height:600px}.calendar .container__main{display:flex;flex-direction:column}.calendar .container__months{display:flex}.calendar .container__months.columns-2{width:100%;flex-direction:row}.calendar .container__months .month-item{box-sizing:content-box;position:relative;width:100%;height:100%;z-index:1;display:flex;flex-direction:column}.calendar .container__months.columns-2 .month-item:first-of-type{padding-right:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months.columns-2 .month-item:last-of-type{padding-left:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months .month-item:nth-child(2)::before{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-bottom:32px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;width:1px;content:\"\";display:block}.calendar .container__months .month-item-weekdays-row{color:rgba(var(--v-text-primary, 32, 54, 69, 1));place-items:center}.calendar .container__days{text-align:center;place-items:center;flex:1 1 auto}.calendar.static-height .container__days{align-content:flex-start}.calendar:not(.static-height) .container__days{flex:none}.calendar .container__months .month-item-weekdays-row>div,.calendar .container__days>div,.calendar .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:100%;min-width:var(--vega-litepicker-day-width)}.calendar .container__days .day-item{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));border-width:0px}.calendar .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.calendar .container__days .day-item:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-locked:hover:before,html.dark .calendar .container__days .day-item.is-locked:hover:before{border-style:none}.calendar .container__days .day-item.is-disabled:hover:before{border-style:none}.calendar .container__days .day-item.is-locked,.calendar .container__days .day-item.is-disabled{-webkit-tap-highlight-color:transparent}.calendar .container__days .day-item:hover{position:relative}.calendar .container__days .day-item.is-today{color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar .container__days .day-item.is-in-range{border-radius:0px;position:relative;z-index:2;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-start-date:hover:before{z-index:2}.calendar .container__days .day-item.is-start-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-start-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-end-date:hover:before{z-index:2}.calendar .container__days .day-item.is-end-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-end-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.calendar .container__days .day-item.is-start-date.is-end-date:after,html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after{background:none}.calendar .container__tooltip{display:none}.calendar .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-date-picker-calendar-day-height)}.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.calendar .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.calendar{left:initial !important;top:initial !important;position:initial !important}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.calendar .container__days .day-item.is-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed;text-decoration:line-through}.calendar .container__days>div:not(.day-item){-webkit-tap-highlight-color:transparent}.calendar .month-item-header>div.dropdown-section{display:flex;gap:12px}.calendar .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -2807,6 +2847,7 @@ const VegaDatePickerCalendar = class {
     this.globalSlimmers = {};
     this.renderer = new VegaDatePickerCalendarRenderer();
     this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.headerRenderer = new VegaDatePickerCalendarHeaderRenderer();
     this.translationSlimmer = new TranslationSlimmer();
     this.todayController = new VegaDatePickerCalendarTodayController();
     this.selectionController = new VegaDatePickerCalendarSelectionController();
@@ -2944,6 +2985,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "headerRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);