@heartlandone/vega 2.71.0 → 2.72.0-RTE-table-preview

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

@@ -1,61 +1,63 @@
 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-8944f3bf.js';
-import { c as compareIsSameOrBefore, i as isDateStr, b as compareIsBefore, d as compareIsAfter } from './date-c55b97f0.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 { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
-import { c as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod, L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.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-bf071b75.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-0020997d.js';
 import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-bb99c0c2.js';
-import { D as DomNodeSubjectObserverFactory, a as VegaClick, d as domNodeSubjectFactory, V as VegaDropdownClick, o as VegaMonthYearChange, f as VegaChange } from './dom-node-subject-observer-factory-dca87b70.js';
+import { D as DomNodeSubjectObserverFactory, a as VegaClick, s as VegaSelectionChange, r as VegaClear, q as VegaMonthYearChange, P as VegaOpen, f as VegaClose, h as VegaChange, d as domNodeSubjectFactory, V as VegaDropdownClick, t as VegaDropdownShow, u as VegaDropdownHide } from './dom-node-subject-observer-factory-f81f215f.js';
 import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { i as isArrayEqual } from './array-7888f339.js';
-import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
-import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { s as VegaInternalMonthYearChange, t as VegaInternalDropdownUpdateTarget } from './vega-internal-event-id-5c3e5f7f.js';
-import { n as InternalVegaZIndexManager } from './function-extension-8d39db56.js';
-import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
-import { S as StringMaskStrategy } from './string-mask-strategy-6232a1c1.js';
-import { S as StringInputFormatterSlimmer } from './string-input-formatter-slimmer-3acd240c.js';
-import { E as ElementAppenderSlimmer } from './element-appender-slimmer-6791c332.js';
+import './translation-96e5debd.js';
 import './vega-env-manager-8f8dc473.js';
+import './table-extension-164b0d6c.js';
 import { F as FeatureFlag } from './feature-flag-controller-51659753.js';
 import './wait-for-vega-handler-c2c07ac3.js';
-import './translation-96e5debd.js';
-import './dto-renderer-manager-d862ae78.js';
+import './dto-renderer-manager-23784148.js';
 import './vega-nonce-manager-497e5eb5.js';
-import './code-block-ecb4491b.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-f39214e4.js';
+import './code-block-3d3a9030.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-96ccc8cf.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-e303cb7d.js';
 import { C as ComponentLoadRequired } from './component-load-required-db42032a.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-4e28e9f8.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-76331524.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-966716fa.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-9ae34332.js';
 import { T as TranslationSlimmer } from './translation-slimmer-c936cb1b.js';
-import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
+import { E as ElementAppenderSlimmer } from './element-appender-slimmer-1a50e184.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
+import { t as VegaInternalDatePickerCalendarClear, u as VegaInternalDatePickerCalendarUpdatePeriodByUser } from './vega-internal-event-id-54ce7562.js';
 import { O as Observer } from './observer-3959f9dd.js';
+import { M as MonthViewGenerator } from './month-view-generator-4bec99fd.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 './dynamic-slimmer-90b8af32.js';
-import './page-resize-observer-slimmer-0bf7fbf3.js';
-import './ui-8424715a.js';
-import './breakpoints-d9faf11c.js';
-import './try-get-document-bef0f526.js';
+import './page-resize-observer-slimmer-8744cb44.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './sub-state-observer-slimmer-3504e2f2.js';
+import './sub-state-observer-slimmer-3f2b954f.js';
 import './number-4398f2e1.js';
 import './dark-mode-style-controller-de88a117.js';
-import './internal-vega-event-manager-516aa721.js';
-import './type-guard-12f7654b.js';
-import './typography-396de03f.js';
+import './_commonjsHelpers-9943807e.js';
+import './internal-vega-event-manager-4f51b17c.js';
+import './column-operation-4a93bf52.js';
+import './object-66c37948.js';
 import './base-renderer-101f6d04.js';
-import './string-format-strategy.abstract-452f4398.js';
-import './index-c943d263.js';
-import './responsive-format-facade-267935ae.js';
-import './pixel-f32c07ce.js';
+import './timer-9321173b.js';
 import './index-e9da316f.js';
-import './object-66c37948.js';
-import './keyboard-manager-5d8f3582.js';
+import './string-format-strategy.abstract-75540c16.js';
+import './index-d72e7fb3.js';
+import './keyboard-manager-89acac79.js';
+import './responsive-format-facade-405f90d2.js';
+import './pixel-f32c07ce.js';
 
 /**
  * A rule that checks if start date is before than end date
@@ -265,7 +267,7 @@ const Icons = {
   },
 };
 
-var __decorate$f = (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;
@@ -278,9 +280,10 @@ class VegaDatePickerRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-prefix" },
         h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
           // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => {
+          onClick: async () => {
             if (!this.disabled) {
-              this.focusInput();
+              await this.focusInput();
+              await this.vegaDatePickerCalendarRenderer.triggerRepick('start');
             }
           } })));
     };
@@ -289,13 +292,13 @@ class VegaDatePickerRenderer extends VegaSlimmer {
      * on mobile, the input is ready-only to avoid virtual keyboard
      */
     this.isInputEnabled = () => {
-      return !this.readOnly && !this.vegaDatePickerMobileController.getIsMobileDevice();
+      return !this.readOnly && !this.isMobileDevice;
     };
     this.renderLabel = () => {
       return (this.label && (h("vega-field-label", { ref: (e) => {
           /* istanbul ignore next */
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, () => {
-            this.focusInput();
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, async () => {
+            await this.focusInput();
           });
         }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
     };
@@ -304,11 +307,11 @@ class VegaDatePickerRenderer extends VegaSlimmer {
      * @see{module:vega-date-picker-click-label-focus-input-e2e}
      */
     /* istanbul ignore next */
-    this.focusInput = () => {
+    this.focusInput = async () => {
       var _a, _b;
       (_a = this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef()) === null || _a === void 0 ? void 0 : _a.focus();
       (_b = this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()) === null || _b === void 0 ? void 0 : _b.focus();
-      this.vegaDatePickerCalendarRenderer.getDatePicker().show();
+      await this.calendarOpenStateController.showCalendar();
     };
   }
   getDatePickerContainer() {
@@ -319,119 +322,62 @@ class VegaDatePickerRenderer extends VegaSlimmer {
       'vega-input-container',
       this.size,
       `${this.mode}-mode`,
-      this.vegaDatePickerMobileController.getIsMobileDevice()
-        ? /* istanbul ignore next */ 'mobile'
-        : '',
+      this.isMobileDevice ? /* istanbul ignore next */ 'mobile' : '',
     ];
     return (h(Host, { class: {
         disabled: this.disabled,
       } },
       this.renderLabel(),
-      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) },
-        this.mode === 'range'
-          ? this.vegaDatePickerRangeInputRenderer.render()
-          : this.vegaDatePickerSingleInputRenderer.render(),
-        this.showYearMonthDropdowns && this.monthYearDropdownRenderer.render())));
+      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) }, this.mode === 'range'
+        ? this.vegaDatePickerRangeInputRenderer.render()
+        : this.vegaDatePickerSingleInputRenderer.render()),
+      this.vegaDatePickerCalendarRenderer.render()));
   }
 }
 (() => {
   VegaInternalIconManager.register({ calendar: Icons.calendar });
 })();
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "disabled", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "size", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "mode", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "label", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "required", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "readOnly", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "autoValidation", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "host", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
-], VegaDatePickerRenderer.prototype, "showYearMonthDropdowns", void 0);
-__decorate$f([
-  MapToComponentField()
-], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);
-__decorate$f([
+], VegaDatePickerRenderer.prototype, "isMobileDevice", void 0);
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$f([
+__decorate$j([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$f([
-  MapToComponentField()
-], VegaDatePickerRenderer.prototype, "monthYearDropdownRenderer", void 0);
-
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The date picker mobile controller slimmer */
-class VegaDatePickerMobileController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
-  }
-  /**
-   * The function returns a boolean value indicating whether the device is a mobile device or not.
-   *
-   * @returns {boolean} A boolean value indicating whether the device is a mobile device or not.
-   */
-  getIsMobileDevice() {
-    return this.isMobileDevice;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-scroll-in-mobile}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function prevents touchmove events from scrolling the element on mobile devices.
-   */
-  preventElementTouchMoveInMobile() {
-    const backdrop = 
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    this.host.shadowRoot.querySelector('.litepicker-backdrop');
-    if (backdrop) {
-      backdrop.removeEventListener('touchmove', (e) => e.preventDefault());
-      backdrop.addEventListener('touchmove', (e) => e.preventDefault());
-    }
-    this.vegaDatePickerCalendarRenderer
-      .getCalendarContainerRef()
-      .removeEventListener('touchmove', (e) => e.preventDefault());
-    this.vegaDatePickerCalendarRenderer
-      .getCalendarContainerRef()
-      .addEventListener('touchmove', (e) => e.preventDefault());
-  }
-}
-__decorate$e([
-  MapToComponentField()
-], VegaDatePickerMobileController.prototype, "host", void 0);
-__decorate$e([
+__decorate$j([
   MapToComponentField()
-], VegaDatePickerMobileController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+], VegaDatePickerRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$d = (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;
@@ -443,13 +389,14 @@ var __decorate$d = (undefined && undefined.__decorate) || function (decorators,
 class VegaDatePickerInputRendererBase extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    this.onClickClearIcon = () => {
+    this.onClickClearIcon = async () => {
       if (this.mode === 'range') {
         this.vegaDatePickerValueController.setValue(['', '']);
       }
       else {
         this.vegaDatePickerValueController.setValue('');
       }
+      await this.calendarOpenStateController.hideCalendar();
     };
     this.isClearIconVisible = () => {
       if (this.mode === 'range') {
@@ -470,20 +417,23 @@ class VegaDatePickerInputRendererBase extends VegaSlimmer {
       h("vega-icon", { icon: "close" })))));
   }
 }
-__decorate$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "disabled", void 0);
-__decorate$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "showClearIcon", void 0);
-__decorate$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "mode", void 0);
-__decorate$d([
+__decorate$i([
   MapToComponentField()
 ], VegaDatePickerInputRendererBase.prototype, "vegaDatePickerValueController", void 0);
+__decorate$i([
+  MapToComponentField()
+], VegaDatePickerInputRendererBase.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$c = (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;
@@ -496,10 +446,8 @@ class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase
       return (h("div", { class: "date-picker-input" },
         this.vegaDatePickerRenderer.renderInputPrefix(),
         h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, 
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => {
-            this.vegaDatePickerCalendarRenderer.getDatePicker().show();
-          } }),
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onClick: () => this.calendarOpenStateController.showCalendar() }),
         this.renderClearIcon()));
     };
     this.getSinglePlaceholder = () => {
@@ -519,7 +467,7 @@ class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase
     this.onSingleDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue(this.vegaDatePickerFormatController.formatDate(date));
       }
       else {
@@ -529,36 +477,27 @@ class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase
       }
     };
   }
-  componentWillRender() {
-    this.oldSingleDateInputRef = this.singleDateInputRef;
-  }
   getSingleDateInputRef() {
     return this.singleDateInputRef;
   }
-  getOldSingleDateInputRef() {
-    return this.oldSingleDateInputRef;
-  }
 }
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "placeholder", void 0);
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$c([
+__decorate$h([
   MapToComponentField()
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$c([
+__decorate$h([
   MapToComponentField()
-], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$c([
-  MapToComponentMethod('componentWillRender')
-], VegaDatePickerSingleInputRenderer.prototype, "componentWillRender", null);
+], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);
 
-var __decorate$b = (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;
@@ -571,12 +510,16 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
       return (h(Fragment, null,
         h("div", { class: "date-picker-input" },
           this.vegaDatePickerRenderer.renderInputPrefix(),
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled })),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('start') })),
         h("span", { class: {
             'range-input-divider': true,
           } }),
         h("div", { class: "date-picker-input" },
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled }),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('end') }),
           this.renderClearIcon())));
     };
     this.getRangePlaceholder = () => {
@@ -596,7 +539,7 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
     this.onStartDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue([
           this.vegaDatePickerFormatController.formatDate(date),
           this.vegaDatePickerValueController.getValue()[1],
@@ -618,7 +561,7 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
     this.onEndDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue([
           this.vegaDatePickerValueController.getValue()[0],
           this.vegaDatePickerFormatController.formatDate(date),
@@ -634,883 +577,206 @@ class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
       }
     };
   }
-  componentWillRender() {
-    this.oldStartDateInputRef = this.startDateInputRef;
-    this.oldEndDateInputRef = this.endDateInputRef;
-  }
   getStartDateInputRef() {
     return this.startDateInputRef;
   }
   getEndDateInputRef() {
     return this.endDateInputRef;
   }
-  getOldStartDateInputRef() {
-    return this.oldStartDateInputRef;
-  }
-  getOldEndDateInputRef() {
-    return this.oldEndDateInputRef;
+  async onInputClicked(type) {
+    await this.calendarOpenStateController.showCalendar();
+    await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
   }
 }
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$b([
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$b([
+__decorate$g([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "calendarOpenStateController", void 0);
+__decorate$g([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
-__decorate$b([
-  MapToComponentMethod('componentWillRender')
-], VegaDatePickerRangeInputRenderer.prototype, "componentWillRender", null);
+__decorate$g([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "allowRepick", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "format", void 0);
+__decorate$g([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
 
-var __decorate$a = (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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/** The date picker calendar controller slimmer */
-class VegaDatePickerCalendarController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * The code below is defining a method called `handleClear` which is used to clear the selection in a
-     * date picker component. It calls the `clearSelection` method of the `datePicker` object, sets the
-     * default value based on the mode, and hides the date picker.
-     */
-    this.handleClear = () => {
-      this.vegaDatePickerCalendarRenderer.getDatePicker().clearSelection();
-      this.vegaDatePickerValueController.setDefaultValueByMode();
-      this.vegaDatePickerCalendarRenderer.getDatePicker().hide();
-    };
-    /**
-     * The code below is defining a private method called `shouldUpdateCalendar` in a TypeScript class.
-     * This method takes a parameter `newValue` of type `DatePickerValueType<DatePickerModeType>`.
-     *
-     * @param {DatePickerValueType<DatePickerModeType>} newValue - The new value of the calendar.
-     */
-    this.shouldUpdateCalendar = (newValue) => {
-      var _a, _b;
-      const startDate = ((_a = this.vegaDatePickerCalendarRenderer.getDatePicker().getStartDate()) === null || _a === void 0 ? void 0 : _a.format(this.format)) || '';
-      const endDate = ((_b = this.vegaDatePickerCalendarRenderer.getDatePicker().getEndDate()) === null || _b === void 0 ? void 0 : _b.format(this.format)) || '';
-      if ((this.mode === 'single' && newValue !== startDate) ||
-        (this.mode === 'range' &&
-          !isArrayEqual(newValue, [startDate, endDate]))) {
-        this.updateCalendar();
-      }
-    };
-    /*
-     * The below method is e2e-test covered in
-     * @param date1
-     * @param date2
-     * @see{module:vega-date-picker-single-selected}
-     * @see{module:vega-date-picker-range-selected}
-     * @see{module:vega-date-picker-receive-single-value}
-     */
-    /**
-     * The code below is defining an event handler function called `onDatePickerSelected`. This function
-     * takes two parameters, `date1` and `date2`, both of type `DateTime`.
-     *
-     * @param {DateTime} date1 - The start date
-     * @param {DateTime} date2 - The end date
-     */
-    this.onDatePickerSelected = (date1, date2) => {
-      if (this.mode === 'range') {
-        const startDate = date1.format(this.format);
-        const endDate = date2.format(this.format);
-        this.vegaDatePickerRangeInputRenderer.getStartDateInputRef().value = startDate;
-        this.vegaDatePickerRangeInputRenderer.getEndDateInputRef().value = endDate;
-        this.vegaDatePickerValueController.syncUpValueWithCalendar();
-      }
-      else {
-        this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef().value = date1.format(this.format);
-        this.vegaDatePickerValueController.syncUpValueWithCalendar();
-      }
-    };
-    /*
-     * The below method is e2e-test covered in
-     * @see{module:vega-date-picker-load-mobile-plugin}
-     */
-    /**
-     * The code below is defining a TypeScript arrow function called `getDefaultLitePickerConfig`. This
-     * function returns an object that represents the default configuration for a LitePicker component.
-     *
-     * @returns {object} - The default lite picker config is being returned.
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    this.getDefaultLitePickerConfig = () => {
-      const defaultConfig = Object.assign(Object.assign({}, this.getModeConfig()), { splitView: false, showTooltip: false, firstDay: 0, minDate: this.minDate, maxDate: this.maxDate, allowRepick: this.allowRepick, format: this.format, plugins: [
-          this.vegaDatePickerMobileController.getIsMobileDevice()
-            ? /* istanbul ignore next */ 'mobilefriendly'
-            : null,
-        ].filter(Boolean), parentEl: this.vegaDatePickerCalendarRenderer.getCalendarContainerRef() });
-      if (this.showYearMonthDropdowns) {
-        const minYear = this.minDate
-          ? new Date(this.minDate).getFullYear()
-          : new Date().getFullYear() -
-            VegaDatePickerCalendarController.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR;
-        const maxYear = this.maxDate
-          ? new Date(this.maxDate).getFullYear()
-          : new Date().getFullYear() +
-            VegaDatePickerCalendarController.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR;
-        defaultConfig['dropdowns'] = {
-          months: true,
-          years: true,
-          minYear: minYear,
-          maxYear: maxYear,
-        };
-      }
-      return defaultConfig;
-    };
-    /**
-     *  The code below is defining a method called `getModeConfig` which returns an object with various
-     * properties based on the value of the `mode` property.
-     *
-     * @returns {object} The ModeConfig is being returned.
-     */
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    this.getModeConfig = () => {
-      return {
-        singleMode: this.mode === 'single',
-        numberOfMonths: this.mode === 'single' ? 1 : 2,
-        numberOfColumns: this.mode === 'single' ? 1 : 2,
-        startDate: this.mode === 'range'
-          ? this.vegaDatePickerValueController.getValue()[0]
-          : this.vegaDatePickerValueController.getValue(),
-        endDate: this.mode === 'range' ? this.vegaDatePickerValueController.getValue()[1] : null,
-        element: this.mode === 'range'
-          ? this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()
-          : this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
-        elementEnd: this.mode === 'range' ? this.vegaDatePickerRangeInputRenderer.getEndDateInputRef() : null,
-      };
-    };
+class VegaDatePickerCalendarRenderer$1 extends VegaSlimmer {
+  componentDidLoad() {
+    this.appendCalendarToBodyIfMobile();
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-change-min-max-date}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update property of minDate when it is changed
-   *
-   * @param {string} value - The value of minDate.
-   */
-  watchMinDate(value) {
-    this.minDate = value ? this.vegaDatePickerFormatController.formatDate(value) : '';
-    this.vegaDatePickerCalendarRenderer.getDatePicker().setOptions({
-      minDate: this.minDate ? this.minDate : null,
-    });
-    this.goToDate();
+  getCalendarContentBoxRef() {
+    return this.calendarContentBoxRef;
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-change-min-max-date}
-   */
-  /* istanbul ignore next */
-  /**
-   * Update property of maxDate when it is changed
-   *
-   * @param {string} value - The value of maxDate.
-   */
-  watchMaxDate(value) {
-    this.maxDate = value ? this.vegaDatePickerFormatController.formatDate(value) : '';
-    this.vegaDatePickerCalendarRenderer.getDatePicker().setOptions({
-      maxDate: this.maxDate ? this.maxDate : null,
+  getCalendarRef() {
+    return this.calendarRef;
+  }
+  getMobileModalRef() {
+    return this.mobileModalRef;
+  }
+  async triggerRepick(type) {
+    if (this.allowRepick && this.mode === 'range') {
+      await this.calendarRef.triggerRepick(type);
+    }
+  }
+  render() {
+    return this.isMobileDevice ? this.mobileRender() : this.renderCalendar();
+  }
+  mobileRender() {
+    return (h("vega-modal", { showCloseButton: false, size: VegaDatePickerCalendarRenderer$1.calendarModalSize, padding: "0", isVerticallyCentered: true, backdropColor: "semi", ref: (ref) => {
+        this.mobileModalRef = ref;
+        this.addModalObserver(ref);
+      } }, h("div", { slot: "modal-content" }, this.renderCalendar())));
+  }
+  renderCalendar() {
+    return (h("vega-box", { padding: {
+        default: 'size-12',
+        S: 'size-32',
+      }, corners: "rounded-12", backgroundColor: "bg-primary", shadow: "shadow-dropdown-menu", border: "border-input-field", ref: (ref) => {
+        this.calendarContentBoxRef = ref;
+      }, class: "date-picker-content-box" },
+      h("vega-box", { width: this.getDefaultCalendarDimension('width'), height: this.getDefaultCalendarDimension('height') },
+        h("vega-date-picker-calendar", { selection: this.value, mode: this.mode, minDate: this.minDate, maxDate: this.maxDate, clearButton: this.clearButton, format: this.format, staticHeight: this.dropdownConfig.staticHeight !== false, showYearMonthDropdowns: this.showYearMonthDropdowns, timezone: this.timezone, yearMonthDropdownProps: {
+            isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
+          }, ref: (ref) => {
+            this.calendarRef = ref;
+            this.addCalendarObserver(ref);
+          }, 
+          /* eslint-disable-next-line react/jsx-no-bind */
+          isDateDisabled: (date) => this.isDateDisabled(date) }))));
+  }
+  addCalendarObserver(calendarRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaSelectionChange, async (payload) => {
+      await this.onCalendarSelected(payload.detail);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaClear, async () => {
+      await this.calendarOpenStateController.hideCalendar();
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(calendarRef, VegaMonthYearChange, async (payload) => {
+      this.monthYearChangeEventEmitter.emit(payload.detail);
     });
-    this.goToDate();
   }
-  /**
-   * Go to date view when value changed
-   */
-  watchValue() {
-    this.goToDate();
+  addModalObserver(modalRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaOpen, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(true);
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(modalRef, VegaClose, () => {
+      this.calendarOpenStateController.updateIsCalendarShowState(false);
+    });
   }
-  /**
-   * Calendar go to the expected date follow below rules:
-   * - Go to the value date month if the value is set.
-   * - Go to the minDate month if only set the minDate and today is before than minDate.
-   * - Go to the minDate month if minDate and maxDate are both set and today is after than maxDate.
-   * - Go to the maxDate month if only set maxDate and today is after than maxDate.
-   * - Go to today month if the value, minDate and maxDate all are empty.
-   */
-  goToDate() {
-    const date = this.mode === 'range'
-      ? this.vegaDatePickerValueController.getValue()[0]
-      : this.vegaDatePickerValueController.getValue();
-    const datePickerCalendar = this.vegaDatePickerCalendarRenderer.getDatePicker();
-    const today = new Date();
-    if (date) {
-      datePickerCalendar.gotoDate(date, 0);
+  async onCalendarSelected(value) {
+    if (this.mode === 'single') {
+      this.vegaDatePickerValueController.setValue(value);
     }
-    else if (this.minDate &&
-      (compareIsBefore(today, new Date(this.minDate)) ||
-        (this.maxDate && compareIsAfter(today, new Date(this.maxDate))))) {
-      datePickerCalendar.gotoDate(this.minDate, 0);
+    else if (this.mode === 'range') {
+      this.vegaDatePickerValueController.setValue(value);
     }
-    else if (this.maxDate && compareIsAfter(today, new Date(this.maxDate))) {
-      datePickerCalendar.gotoDate(this.maxDate, 0);
+    if (this.isCalendarShow) {
+      await this.calendarOpenStateController.hideCalendar();
     }
-    else {
-      datePickerCalendar.gotoDate(today, 0);
+  }
+  appendCalendarToBodyIfMobile() {
+    const document = tryGetDocument();
+    if (this.isMobileDevice && document) {
+      document.body.append(this.mobileModalRef);
     }
   }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-start-end-date-change}
-   * @see{module:vega-date-picker-single-date-change}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function "updateCalendar" updates the date range in a calendar based on the selected mode
-   * (single or range) and the values of the start and end dates.
-   *
-   * @returns {void} The function does not have a return statement, so it does not return anything.
-   */
-  updateCalendar() {
-    if (!this.vegaDatePickerCalendarRenderer.getDatePicker())
-      return;
-    if (this.mode === 'single') {
-      const singleDate = this.vegaDatePickerValueController.getValue();
-      if (singleDate) {
-        this.vegaDatePickerCalendarRenderer
-          .getDatePicker()
-          .setDate(this.vegaDatePickerValueController.getValue());
-      }
-      else {
-        this.vegaDatePickerCalendarRenderer.getDatePicker().clearSelection();
-      }
+  getDefaultCalendarDimension(type) {
+    const dimensions = this.mode === 'range' && !this.isMobileDevice
+      ? VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForRange
+      : VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForSingle;
+    // Height can be dynamic
+    if (type === 'height' && this.dropdownConfig.staticHeight === false) {
+      return 'auto';
     }
-    if (this.mode === 'range') {
-      const startDate = this.vegaDatePickerValueController.getValue()[0];
-      const endDate = this.vegaDatePickerValueController.getValue()[1];
-      if (startDate && endDate) {
-        this.vegaDatePickerCalendarRenderer.getDatePicker().setDateRange(startDate, endDate);
-      }
-      else {
-        // Should only call clearSelection when startDate and endDate are both empty
-        if (startDate === '' && endDate === '') {
-          this.vegaDatePickerCalendarRenderer.getDatePicker().clearSelection();
-        }
-      }
+    let value = dimensions[type];
+    // Extra space for footer when height is static
+    if (type === 'height' && this.clearButton) {
+      value += 40; // 24px footer + 16px margin
     }
+    return `${value}px`;
   }
 }
-VegaDatePickerCalendarController.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR = 10;
-VegaDatePickerCalendarController.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR = 10;
-__decorate$a([
-  MapToComponentField({ writable: true })
-], VegaDatePickerCalendarController.prototype, "minDate", void 0);
-__decorate$a([
-  MapToComponentField({ writable: true })
-], VegaDatePickerCalendarController.prototype, "maxDate", void 0);
-__decorate$a([
+VegaDatePickerCalendarRenderer$1.calendarModalSize = 344;
+VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForSingle = {
+  width: 280,
+  height: 316,
+};
+VegaDatePickerCalendarRenderer$1.regularDatePickerCalendarDimensionsForRange = {
+  width: 608,
+  height: 324,
+};
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "allowRepick", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "format", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "format", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "value", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "mode", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "mode", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "showYearMonthDropdowns", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "minDate", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerMobileController", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "maxDate", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerValueController", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "clearButton", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "dropdownConfig", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "showYearMonthDropdowns", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$a([
+], VegaDatePickerCalendarRenderer$1.prototype, "timezone", void 0);
+__decorate$f([
   MapToComponentField()
-], VegaDatePickerCalendarController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$a([
-  MapToComponentMethod('watchMinDate')
-], VegaDatePickerCalendarController.prototype, "watchMinDate", null);
-__decorate$a([
-  MapToComponentMethod('watchMaxDate')
-], VegaDatePickerCalendarController.prototype, "watchMaxDate", null);
-__decorate$a([
-  MapToComponentMethod('watchValue')
-], VegaDatePickerCalendarController.prototype, "watchValue", null);
-
-var litepicker_umd = createCommonjsModule(function (module, exports) {
-/*!
- * 
- * litepicker.umd.js
- * Litepicker v2.0.12 (https://github.com/wakirin/Litepicker)
- * Package: litepicker (https://www.npmjs.com/package/litepicker)
- * License: MIT (https://github.com/wakirin/Litepicker/blob/master/LICENCE.md)
- * Copyright 2019-2021 Rinat G.
- *     
- * Hash: f46190e781537007f2f2
- * 
- */
-!function(t,e){module.exports=e();}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i});},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0});},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=4)}([function(t,e,n){Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(e,n,i){void 0===e&&(e=null),void 0===n&&(n=null),void 0===i&&(i="en-US"),this.dateInstance="object"==typeof n&&null!==n?n.parse(e instanceof t?e.clone().toJSDate():e):"string"==typeof n?t.parseDateTime(e,n,i):e?t.parseDateTime(e):t.parseDateTime(new Date),this.lang=i;}return t.parseDateTime=function(e,n,i){if(void 0===n&&(n="YYYY-MM-DD"),void 0===i&&(i="en-US"),!e)return new Date(NaN);if(e instanceof Date)return new Date(e);if(e instanceof t)return e.clone().toJSDate();if(/^-?\d{10,}$/.test(e))return t.getDateZeroTime(new Date(Number(e)));if("string"==typeof e){for(var o=[],s=null;null!=(s=t.regex.exec(n));)"\\"!==s[1]&&o.push(s);if(o.length){var r={year:null,month:null,shortMonth:null,longMonth:null,day:null,value:""};o[0].index>0&&(r.value+=".*?");for(var a=0,h=Object.entries(o);a<h.length;a++){var l=h[a],p=l[0],c=l[1],d=Number(p),u=t.formatPatterns(c[0],i),m=u.group,f=u.pattern;r[m]=d+1,r.value+=f,r.value+=".*?";}var g=new RegExp("^"+r.value+"$");if(g.test(e)){var y=g.exec(e),v=Number(y[r.year]),D=null;r.month?D=Number(y[r.month])-1:r.shortMonth?D=t.shortMonths(i).indexOf(y[r.shortMonth]):r.longMonth&&(D=t.longMonths(i).indexOf(y[r.longMonth]));var w=Number(y[r.day])||1;return new Date(v,D,w,0,0,0,0)}}}return t.getDateZeroTime(new Date(e))},t.convertArray=function(e,n){return e.map((function(e){return e instanceof Array?e.map((function(e){return new t(e,n)})):new t(e,n)}))},t.getDateZeroTime=function(t){return new Date(t.getFullYear(),t.getMonth(),t.getDate(),0,0,0,0)},t.shortMonths=function(e){return t.MONTH_JS.map((function(t){return new Date(2019,t).toLocaleString(e,{month:"short"})}))},t.longMonths=function(e){return t.MONTH_JS.map((function(t){return new Date(2019,t).toLocaleString(e,{month:"long"})}))},t.formatPatterns=function(e,n){switch(e){case"YY":case"YYYY":return {group:"year",pattern:"(\\d{"+e.length+"})"};case"M":return {group:"month",pattern:"(\\d{1,2})"};case"MM":return {group:"month",pattern:"(\\d{2})"};case"MMM":return {group:"shortMonth",pattern:"("+t.shortMonths(n).join("|")+")"};case"MMMM":return {group:"longMonth",pattern:"("+t.longMonths(n).join("|")+")"};case"D":return {group:"day",pattern:"(\\d{1,2})"};case"DD":return {group:"day",pattern:"(\\d{2})"}}},t.prototype.toJSDate=function(){return this.dateInstance},t.prototype.toLocaleString=function(t,e){return this.dateInstance.toLocaleString(t,e)},t.prototype.toDateString=function(){return this.dateInstance.toDateString()},t.prototype.getSeconds=function(){return this.dateInstance.getSeconds()},t.prototype.getDay=function(){return this.dateInstance.getDay()},t.prototype.getTime=function(){return this.dateInstance.getTime()},t.prototype.getDate=function(){return this.dateInstance.getDate()},t.prototype.getMonth=function(){return this.dateInstance.getMonth()},t.prototype.getFullYear=function(){return this.dateInstance.getFullYear()},t.prototype.setMonth=function(t){return this.dateInstance.setMonth(t)},t.prototype.setHours=function(t,e,n,i){void 0===t&&(t=0),void 0===e&&(e=0),void 0===n&&(n=0),void 0===i&&(i=0),this.dateInstance.setHours(t,e,n,i);},t.prototype.setSeconds=function(t){return this.dateInstance.setSeconds(t)},t.prototype.setDate=function(t){return this.dateInstance.setDate(t)},t.prototype.setFullYear=function(t){return this.dateInstance.setFullYear(t)},t.prototype.getWeek=function(t){var e=new Date(this.timestamp()),n=(this.getDay()+(7-t))%7;e.setDate(e.getDate()-n);var i=e.getTime();return e.setMonth(0,1),e.getDay()!==t&&e.setMonth(0,1+(4-e.getDay()+7)%7),1+Math.ceil((i-e.getTime())/6048e5)},t.prototype.clone=function(){return new t(this.toJSDate())},t.prototype.isBetween=function(t,e,n){switch(void 0===n&&(n="()"),n){default:case"()":return this.timestamp()>t.getTime()&&this.timestamp()<e.getTime();case"[)":return this.timestamp()>=t.getTime()&&this.timestamp()<e.getTime();case"(]":return this.timestamp()>t.getTime()&&this.timestamp()<=e.getTime();case"[]":return this.timestamp()>=t.getTime()&&this.timestamp()<=e.getTime()}},t.prototype.isBefore=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":return t.getTime()>this.getTime();case"day":case"days":return new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime()>new Date(this.getFullYear(),this.getMonth(),this.getDate()).getTime();case"month":case"months":return new Date(t.getFullYear(),t.getMonth(),1).getTime()>new Date(this.getFullYear(),this.getMonth(),1).getTime();case"year":case"years":return t.getFullYear()>this.getFullYear()}throw new Error("isBefore: Invalid unit!")},t.prototype.isSameOrBefore=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":return t.getTime()>=this.getTime();case"day":case"days":return new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime()>=new Date(this.getFullYear(),this.getMonth(),this.getDate()).getTime();case"month":case"months":return new Date(t.getFullYear(),t.getMonth(),1).getTime()>=new Date(this.getFullYear(),this.getMonth(),1).getTime()}throw new Error("isSameOrBefore: Invalid unit!")},t.prototype.isAfter=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":return this.getTime()>t.getTime();case"day":case"days":return new Date(this.getFullYear(),this.getMonth(),this.getDate()).getTime()>new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime();case"month":case"months":return new Date(this.getFullYear(),this.getMonth(),1).getTime()>new Date(t.getFullYear(),t.getMonth(),1).getTime();case"year":case"years":return this.getFullYear()>t.getFullYear()}throw new Error("isAfter: Invalid unit!")},t.prototype.isSameOrAfter=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":return this.getTime()>=t.getTime();case"day":case"days":return new Date(this.getFullYear(),this.getMonth(),this.getDate()).getTime()>=new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime();case"month":case"months":return new Date(this.getFullYear(),this.getMonth(),1).getTime()>=new Date(t.getFullYear(),t.getMonth(),1).getTime()}throw new Error("isSameOrAfter: Invalid unit!")},t.prototype.isSame=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":return this.getTime()===t.getTime();case"day":case"days":return new Date(this.getFullYear(),this.getMonth(),this.getDate()).getTime()===new Date(t.getFullYear(),t.getMonth(),t.getDate()).getTime();case"month":case"months":return new Date(this.getFullYear(),this.getMonth(),1).getTime()===new Date(t.getFullYear(),t.getMonth(),1).getTime()}throw new Error("isSame: Invalid unit!")},t.prototype.add=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":this.setSeconds(this.getSeconds()+t);break;case"day":case"days":this.setDate(this.getDate()+t);break;case"month":case"months":this.setMonth(this.getMonth()+t);}return this},t.prototype.subtract=function(t,e){switch(void 0===e&&(e="seconds"),e){case"second":case"seconds":this.setSeconds(this.getSeconds()-t);break;case"day":case"days":this.setDate(this.getDate()-t);break;case"month":case"months":this.setMonth(this.getMonth()-t);}return this},t.prototype.diff=function(t,e){void 0===e&&(e="seconds");switch(e){default:case"second":case"seconds":return this.getTime()-t.getTime();case"day":case"days":return Math.round((this.timestamp()-t.getTime())/864e5);case"month":case"months":}},t.prototype.format=function(e,n){if(void 0===n&&(n="en-US"),"object"==typeof e)return e.output(this.clone().toJSDate());for(var i="",o=[],s=null;null!=(s=t.regex.exec(e));)"\\"!==s[1]&&o.push(s);if(o.length){o[0].index>0&&(i+=e.substring(0,o[0].index));for(var r=0,a=Object.entries(o);r<a.length;r++){var h=a[r],l=h[0],p=h[1],c=Number(l);i+=this.formatTokens(p[0],n),o[c+1]&&(i+=e.substring(p.index+p[0].length,o[c+1].index)),c===o.length-1&&(i+=e.substring(p.index+p[0].length));}}return i.replace(/\\/g,"")},t.prototype.timestamp=function(){return new Date(this.getFullYear(),this.getMonth(),this.getDate(),0,0,0,0).getTime()},t.prototype.formatTokens=function(e,n){switch(e){case"YY":return String(this.getFullYear()).slice(-2);case"YYYY":return String(this.getFullYear());case"M":return String(this.getMonth()+1);case"MM":return ("0"+(this.getMonth()+1)).slice(-2);case"MMM":return t.shortMonths(n)[this.getMonth()];case"MMMM":return t.longMonths(n)[this.getMonth()];case"D":return String(this.getDate());case"DD":return ("0"+this.getDate()).slice(-2);default:return ""}},t.regex=/(\\)?(Y{2,4}|M{1,4}|D{1,2}|d{1,4})/g,t.MONTH_JS=[0,1,2,3,4,5,6,7,8,9,10,11],t}();e.DateTime=i;},function(t,e,n){var i,o=this&&this.__extends||(i=function(t,e){return (i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e;}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);})(t,e)},function(t,e){function n(){this.constructor=t;}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n);}),s=this&&this.__spreadArrays||function(){for(var t=0,e=0,n=arguments.length;e<n;e++)t+=arguments[e].length;var i=Array(t),o=0;for(e=0;e<n;e++)for(var s=arguments[e],r=0,a=s.length;r<a;r++,o++)i[o]=s[r];return i};Object.defineProperty(e,"__esModule",{value:!0});var r=n(5),a=n(0),h=n(3),l=n(2),p=function(t){function e(e){var n=t.call(this,e)||this;return n.preventClick=!1,n.bindEvents(),n}return o(e,t),e.prototype.scrollToDate=function(t){if(this.options.scrollToDate){var e=this.options.startDate instanceof a.DateTime?this.options.startDate.clone():null,n=this.options.endDate instanceof a.DateTime?this.options.endDate.clone():null;!this.options.startDate||t&&t!==this.options.element?t&&this.options.endDate&&t===this.options.elementEnd&&(n.setDate(1),this.options.numberOfMonths>1&&n.isAfter(e)&&n.setMonth(n.getMonth()-(this.options.numberOfMonths-1)),this.calendars[0]=n.clone()):(e.setDate(1),this.calendars[0]=e.clone());}},e.prototype.bindEvents=function(){document.addEventListener("click",this.onClick.bind(this),!0),this.ui=document.createElement("div"),this.ui.className=h.litepicker,this.ui.style.display="none",this.ui.addEventListener("mouseenter",this.onMouseEnter.bind(this),!0),this.ui.addEventListener("mouseleave",this.onMouseLeave.bind(this),!1),this.options.autoRefresh?(this.options.element instanceof HTMLElement&&this.options.element.addEventListener("keyup",this.onInput.bind(this),!0),this.options.elementEnd instanceof HTMLElement&&this.options.elementEnd.addEventListener("keyup",this.onInput.bind(this),!0)):(this.options.element instanceof HTMLElement&&this.options.element.addEventListener("change",this.onInput.bind(this),!0),this.options.elementEnd instanceof HTMLElement&&this.options.elementEnd.addEventListener("change",this.onInput.bind(this),!0)),this.options.parentEl?this.options.parentEl instanceof HTMLElement?this.options.parentEl.appendChild(this.ui):document.querySelector(this.options.parentEl).appendChild(this.ui):this.options.inlineMode?this.options.element instanceof HTMLInputElement?this.options.element.parentNode.appendChild(this.ui):this.options.element.appendChild(this.ui):document.body.appendChild(this.ui),this.updateInput(),this.init(),"function"==typeof this.options.setup&&this.options.setup.call(this,this),this.render(),this.options.inlineMode&&this.show();},e.prototype.updateInput=function(){if(this.options.element instanceof HTMLInputElement){var t=this.options.startDate,e=this.options.endDate;if(this.options.singleMode&&t)this.options.element.value=t.format(this.options.format,this.options.lang);else if(!this.options.singleMode&&t&&e){var n=t.format(this.options.format,this.options.lang),i=e.format(this.options.format,this.options.lang);this.options.elementEnd instanceof HTMLInputElement?(this.options.element.value=n,this.options.elementEnd.value=i):this.options.element.value=""+n+this.options.delimiter+i;}t||e||(this.options.element.value="",this.options.elementEnd instanceof HTMLInputElement&&(this.options.elementEnd.value=""));}},e.prototype.isSamePicker=function(t){return t.closest("."+h.litepicker)===this.ui},e.prototype.shouldShown=function(t){return !t.disabled&&(t===this.options.element||this.options.elementEnd&&t===this.options.elementEnd)},e.prototype.shouldResetDatePicked=function(){return this.options.singleMode||2===this.datePicked.length},e.prototype.shouldSwapDatePicked=function(){return 2===this.datePicked.length&&this.datePicked[0].getTime()>this.datePicked[1].getTime()},e.prototype.shouldCheckLockDays=function(){return this.options.disallowLockDaysInRange&&2===this.datePicked.length},e.prototype.onClick=function(t){var e=t.target;if(t.target.shadowRoot&&(e=t.composedPath()[0]),e&&this.ui)if(this.shouldShown(e))this.show(e);else if(e.closest("."+h.litepicker)||!this.isShowning()){if(this.isSamePicker(e))if(this.emit("before:click",e),this.preventClick)this.preventClick=!1;else {if(e.classList.contains(h.dayItem)){if(t.preventDefault(),e.classList.contains(h.isLocked))return;if(this.shouldResetDatePicked()&&(this.datePicked.length=0),this.datePicked[this.datePicked.length]=new a.DateTime(e.dataset.time),this.shouldSwapDatePicked()){var n=this.datePicked[1].clone();this.datePicked[1]=this.datePicked[0].clone(),this.datePicked[0]=n.clone();}if(this.shouldCheckLockDays())l.rangeIsLocked(this.datePicked,this.options)&&(this.emit("error:range",this.datePicked),this.datePicked.length=0);return this.render(),this.emit.apply(this,s(["preselect"],s(this.datePicked).map((function(t){return t.clone()})))),void(this.options.autoApply&&(this.options.singleMode&&this.datePicked.length?(this.setDate(this.datePicked[0]),this.hide()):this.options.singleMode||2!==this.datePicked.length||(this.setDateRange(this.datePicked[0],this.datePicked[1]),this.hide())))}if(e.classList.contains(h.buttonPreviousMonth)){t.preventDefault();var i=0,o=this.options.switchingMonths||this.options.numberOfMonths;if(this.options.splitView){var r=e.closest("."+h.monthItem);i=l.findNestedMonthItem(r),o=1;}return this.calendars[i].setMonth(this.calendars[i].getMonth()-o),this.gotoDate(this.calendars[i],i),void this.emit("change:month",this.calendars[i],i)}if(e.classList.contains(h.buttonNextMonth)){t.preventDefault();i=0,o=this.options.switchingMonths||this.options.numberOfMonths;if(this.options.splitView){r=e.closest("."+h.monthItem);i=l.findNestedMonthItem(r),o=1;}return this.calendars[i].setMonth(this.calendars[i].getMonth()+o),this.gotoDate(this.calendars[i],i),void this.emit("change:month",this.calendars[i],i)}e.classList.contains(h.buttonCancel)&&(t.preventDefault(),this.hide(),this.emit("button:cancel")),e.classList.contains(h.buttonApply)&&(t.preventDefault(),this.options.singleMode&&this.datePicked.length?this.setDate(this.datePicked[0]):this.options.singleMode||2!==this.datePicked.length||this.setDateRange(this.datePicked[0],this.datePicked[1]),this.hide(),this.emit("button:apply",this.options.startDate,this.options.endDate));}}else this.hide();},e.prototype.showTooltip=function(t,e){var n=this.ui.querySelector("."+h.containerTooltip);n.style.visibility="visible",n.innerHTML=e;var i=this.ui.getBoundingClientRect(),o=n.getBoundingClientRect(),s=t.getBoundingClientRect(),r=s.top,a=s.left;if(this.options.inlineMode&&this.options.parentEl){var l=this.ui.parentNode.getBoundingClientRect();r-=l.top,a-=l.left;}else r-=i.top,a-=i.left;r-=o.height,a-=o.width/2,a+=s.width/2,n.style.top=r+"px",n.style.left=a+"px",this.emit("tooltip",n,t);},e.prototype.hideTooltip=function(){this.ui.querySelector("."+h.containerTooltip).style.visibility="hidden";},e.prototype.shouldAllowMouseEnter=function(t){return !this.options.singleMode&&!t.classList.contains(h.isLocked)},e.prototype.shouldAllowRepick=function(){return this.options.elementEnd&&this.options.allowRepick&&this.options.startDate&&this.options.endDate},e.prototype.isDayItem=function(t){return t.classList.contains(h.dayItem)},e.prototype.onMouseEnter=function(t){var e=this,n=t.target;if(this.isDayItem(n)&&this.shouldAllowMouseEnter(n)){if(this.shouldAllowRepick()&&(this.triggerElement===this.options.element?this.datePicked[0]=this.options.endDate.clone():this.triggerElement===this.options.elementEnd&&(this.datePicked[0]=this.options.startDate.clone())),1!==this.datePicked.length)return;var i=this.ui.querySelector("."+h.dayItem+'[data-time="'+this.datePicked[0].getTime()+'"]'),o=this.datePicked[0].clone(),s=new a.DateTime(n.dataset.time),r=!1;if(o.getTime()>s.getTime()){var l=o.clone();o=s.clone(),s=l.clone(),r=!0;}if(Array.prototype.slice.call(this.ui.querySelectorAll("."+h.dayItem)).forEach((function(t){var n=new a.DateTime(t.dataset.time),i=e.renderDay(n);n.isBetween(o,s)&&i.classList.add(h.isInRange),t.className=i.className;})),n.classList.add(h.isEndDate),r?(i&&i.classList.add(h.isFlipped),n.classList.add(h.isFlipped)):(i&&i.classList.remove(h.isFlipped),n.classList.remove(h.isFlipped)),this.options.showTooltip){var p=s.diff(o,"day")+1;if("function"==typeof this.options.tooltipNumber&&(p=this.options.tooltipNumber.call(this,p)),p>0){var c=this.pluralSelector(p),d=p+" "+(this.options.tooltipText[c]?this.options.tooltipText[c]:"["+c+"]");this.showTooltip(n,d);var u=window.navigator.userAgent,m=/(iphone|ipad)/i.test(u),f=/OS 1([0-2])/i.test(u);m&&f&&n.dispatchEvent(new Event("click"));}else this.hideTooltip();}}},e.prototype.onMouseLeave=function(t){this.options.allowRepick&&(!this.options.allowRepick||this.options.startDate||this.options.endDate)&&(this.datePicked.length=0,this.render());},e.prototype.onInput=function(t){var e=this.parseInput(),n=e[0],i=e[1],o=this.options.format;if(this.options.elementEnd?n instanceof a.DateTime&&i instanceof a.DateTime&&n.format(o)===this.options.element.value&&i.format(o)===this.options.elementEnd.value:this.options.singleMode?n instanceof a.DateTime&&n.format(o)===this.options.element.value:n instanceof a.DateTime&&i instanceof a.DateTime&&""+n.format(o)+this.options.delimiter+i.format(o)===this.options.element.value){if(i&&n.getTime()>i.getTime()){var s=n.clone();n=i.clone(),i=s.clone();}this.options.startDate=new a.DateTime(n,this.options.format,this.options.lang),i&&(this.options.endDate=new a.DateTime(i,this.options.format,this.options.lang)),this.updateInput(),this.render();var r=n.clone(),h=0;(this.options.elementEnd?n.format(o)===t.target.value:t.target.value.startsWith(n.format(o)))||(r=i.clone(),h=this.options.numberOfMonths-1),this.emit("selected",this.getStartDate(),this.getEndDate()),this.gotoDate(r,h);}},e}(r.Calendar);e.Litepicker=p;},function(t,e,n){Object.defineProperty(e,"__esModule",{value:!0}),e.findNestedMonthItem=function(t){for(var e=t.parentNode.childNodes,n=0;n<e.length;n+=1){if(e.item(n)===t)return n}return 0},e.dateIsLocked=function(t,e,n){var i=!1;return e.lockDays.length&&(i=e.lockDays.filter((function(n){return n instanceof Array?t.isBetween(n[0],n[1],e.lockDaysInclusivity):n.isSame(t,"day")})).length),i||"function"!=typeof e.lockDaysFilter||(i=e.lockDaysFilter.call(this,t.clone(),null,n)),i},e.rangeIsLocked=function(t,e){var n=!1;return e.lockDays.length&&(n=e.lockDays.filter((function(n){if(n instanceof Array){var i=t[0].toDateString()===n[0].toDateString()&&t[1].toDateString()===n[1].toDateString();return n[0].isBetween(t[0],t[1],e.lockDaysInclusivity)||n[1].isBetween(t[0],t[1],e.lockDaysInclusivity)||i}return n.isBetween(t[0],t[1],e.lockDaysInclusivity)})).length),n||"function"!=typeof e.lockDaysFilter||(n=e.lockDaysFilter.call(this,t[0].clone(),t[1].clone(),t)),n};},function(t,e,n){t.exports={showWeekNumbers:"show-week-numbers",litepicker:"litepicker",containerMain:"container__main",containerMonths:"container__months",columns2:"columns-2",columns3:"columns-3",columns4:"columns-4",splitView:"split-view",monthItemHeader:"month-item-header",buttonPreviousMonth:"button-previous-month",buttonNextMonth:"button-next-month",monthItem:"month-item",monthItemName:"month-item-name",monthItemYear:"month-item-year",resetButton:"reset-button",monthItemWeekdaysRow:"month-item-weekdays-row",noPreviousMonth:"no-previous-month",noNextMonth:"no-next-month",containerDays:"container__days",dayItem:"day-item",isToday:"is-today",isLocked:"is-locked",isInRange:"is-in-range",isStartDate:"is-start-date",isFlipped:"is-flipped",isEndDate:"is-end-date",isHighlighted:"is-highlighted",weekNumber:"week-number",containerFooter:"container__footer",previewDateRange:"preview-date-range",buttonCancel:"button-cancel",buttonApply:"button-apply",containerTooltip:"container__tooltip"};},function(t,e,n){Object.defineProperty(e,"__esModule",{value:!0});var i=n(1);e.Litepicker=i.Litepicker,n(8),window.Litepicker=i.Litepicker,e.default=i.Litepicker;},function(t,e,n){var i,o=this&&this.__extends||(i=function(t,e){return (i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e;}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);})(t,e)},function(t,e){function n(){this.constructor=t;}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n);});Object.defineProperty(e,"__esModule",{value:!0});var s=n(6),r=n(0),a=n(3),h=n(2),l=function(t){function e(e){return t.call(this,e)||this}return o(e,t),e.prototype.render=function(){var t=this;this.emit("before:render",this.ui);var e=document.createElement("div");e.className=a.containerMain;var n=document.createElement("div");n.className=a.containerMonths,a["columns"+this.options.numberOfColumns]&&(n.classList.remove(a.columns2,a.columns3,a.columns4),n.classList.add(a["columns"+this.options.numberOfColumns])),this.options.splitView&&n.classList.add(a.splitView),this.options.showWeekNumbers&&n.classList.add(a.showWeekNumbers);for(var i=this.calendars[0].clone(),o=i.getMonth(),s=i.getMonth()+this.options.numberOfMonths,r=0,h=o;h<s;h+=1){var l=i.clone();l.setDate(1),l.setHours(0,0,0,0),this.options.splitView?l=this.calendars[r].clone():l.setMonth(h),n.appendChild(this.renderMonth(l,r)),r+=1;}if(this.ui.innerHTML="",e.appendChild(n),this.options.resetButton){var p=void 0;"function"==typeof this.options.resetButton?p=this.options.resetButton.call(this):((p=document.createElement("button")).type="button",p.className=a.resetButton,p.innerHTML=this.options.buttonText.reset),p.addEventListener("click",(function(e){e.preventDefault(),t.clearSelection();})),e.querySelector("."+a.monthItem+":last-child").querySelector("."+a.monthItemHeader).appendChild(p);}this.ui.appendChild(e),this.options.autoApply&&!this.options.footerHTML||this.ui.appendChild(this.renderFooter()),this.options.showTooltip&&this.ui.appendChild(this.renderTooltip()),this.ui.dataset.plugins=(this.options.plugins||[]).join("|"),this.emit("render",this.ui);},e.prototype.renderMonth=function(t,e){var n=this,i=t.clone(),o=32-new Date(i.getFullYear(),i.getMonth(),32).getDate(),s=document.createElement("div");s.className=a.monthItem;var l=document.createElement("div");l.className=a.monthItemHeader;var p=document.createElement("div");if(this.options.dropdowns.months){var c=document.createElement("select");c.className=a.monthItemName;for(var d=0;d<12;d+=1){var u=document.createElement("option"),m=new r.DateTime(new Date(t.getFullYear(),d,2,0,0,0)),f=new r.DateTime(new Date(t.getFullYear(),d,1,0,0,0));u.value=String(d),u.text=m.toLocaleString(this.options.lang,{month:"long"}),u.disabled=this.options.minDate&&f.isBefore(new r.DateTime(this.options.minDate),"month")||this.options.maxDate&&f.isAfter(new r.DateTime(this.options.maxDate),"month"),u.selected=f.getMonth()===t.getMonth(),c.appendChild(u);}c.addEventListener("change",(function(t){var e=t.target,i=0;if(n.options.splitView){var o=e.closest("."+a.monthItem);i=h.findNestedMonthItem(o);}n.calendars[i].setMonth(Number(e.value)),n.render(),n.emit("change:month",n.calendars[i],i,t);})),p.appendChild(c);}else {(m=document.createElement("strong")).className=a.monthItemName,m.innerHTML=t.toLocaleString(this.options.lang,{month:"long"}),p.appendChild(m);}if(this.options.dropdowns.years){var g=document.createElement("select");g.className=a.monthItemYear;var y=this.options.dropdowns.minYear,v=this.options.dropdowns.maxYear?this.options.dropdowns.maxYear:(new Date).getFullYear();if(t.getFullYear()>v)(u=document.createElement("option")).value=String(t.getFullYear()),u.text=String(t.getFullYear()),u.selected=!0,u.disabled=!0,g.appendChild(u);for(d=v;d>=y;d-=1){var u=document.createElement("option"),D=new r.DateTime(new Date(d,0,1,0,0,0));u.value=String(d),u.text=String(d),u.disabled=this.options.minDate&&D.isBefore(new r.DateTime(this.options.minDate),"year")||this.options.maxDate&&D.isAfter(new r.DateTime(this.options.maxDate),"year"),u.selected=t.getFullYear()===d,g.appendChild(u);}if(t.getFullYear()<y)(u=document.createElement("option")).value=String(t.getFullYear()),u.text=String(t.getFullYear()),u.selected=!0,u.disabled=!0,g.appendChild(u);if("asc"===this.options.dropdowns.years){var w=Array.prototype.slice.call(g.childNodes).reverse();g.innerHTML="",w.forEach((function(t){t.innerHTML=t.value,g.appendChild(t);}));}g.addEventListener("change",(function(t){var e=t.target,i=0;if(n.options.splitView){var o=e.closest("."+a.monthItem);i=h.findNestedMonthItem(o);}n.calendars[i].setFullYear(Number(e.value)),n.render(),n.emit("change:year",n.calendars[i],i,t);})),p.appendChild(g);}else {var M=document.createElement("span");M.className=a.monthItemYear,M.innerHTML=String(t.getFullYear()),p.appendChild(M);}var T=document.createElement("button");T.type="button",T.className=a.buttonPreviousMonth,T.innerHTML=this.options.buttonText.previousMonth;var k=document.createElement("button");k.type="button",k.className=a.buttonNextMonth,k.innerHTML=this.options.buttonText.nextMonth,l.appendChild(T),l.appendChild(p),l.appendChild(k),this.options.minDate&&i.isSameOrBefore(new r.DateTime(this.options.minDate),"month")&&s.classList.add(a.noPreviousMonth),this.options.maxDate&&i.isSameOrAfter(new r.DateTime(this.options.maxDate),"month")&&s.classList.add(a.noNextMonth);var b=document.createElement("div");b.className=a.monthItemWeekdaysRow,this.options.showWeekNumbers&&(b.innerHTML="<div>W</div>");for(var L=1;L<=7;L+=1){var E=3+this.options.firstDay+L,S=document.createElement("div");S.innerHTML=this.weekdayName(E),S.title=this.weekdayName(E,"long"),b.appendChild(S);}var P=document.createElement("div");P.className=a.containerDays;var x=this.calcSkipDays(i);this.options.showWeekNumbers&&x&&P.appendChild(this.renderWeekNumber(i));for(var I=0;I<x;I+=1){var _=document.createElement("div");P.appendChild(_);}for(I=1;I<=o;I+=1)i.setDate(I),this.options.showWeekNumbers&&i.getDay()===this.options.firstDay&&P.appendChild(this.renderWeekNumber(i)),P.appendChild(this.renderDay(i));return s.appendChild(l),s.appendChild(b),s.appendChild(P),this.emit("render:month",s,t),s},e.prototype.renderDay=function(t){t.setHours();var e=document.createElement("div");if(e.className=a.dayItem,e.innerHTML=String(t.getDate()),e.dataset.time=String(t.getTime()),t.toDateString()===(new Date).toDateString()&&e.classList.add(a.isToday),this.datePicked.length)this.datePicked[0].toDateString()===t.toDateString()&&(e.classList.add(a.isStartDate),this.options.singleMode&&e.classList.add(a.isEndDate)),2===this.datePicked.length&&this.datePicked[1].toDateString()===t.toDateString()&&e.classList.add(a.isEndDate),2===this.datePicked.length&&t.isBetween(this.datePicked[0],this.datePicked[1])&&e.classList.add(a.isInRange);else if(this.options.startDate){var n=this.options.startDate,i=this.options.endDate;n.toDateString()===t.toDateString()&&(e.classList.add(a.isStartDate),this.options.singleMode&&e.classList.add(a.isEndDate)),i&&i.toDateString()===t.toDateString()&&e.classList.add(a.isEndDate),n&&i&&t.isBetween(n,i)&&e.classList.add(a.isInRange);}if(this.options.minDate&&t.isBefore(new r.DateTime(this.options.minDate))&&e.classList.add(a.isLocked),this.options.maxDate&&t.isAfter(new r.DateTime(this.options.maxDate))&&e.classList.add(a.isLocked),this.options.minDays>1&&1===this.datePicked.length){var o=this.options.minDays-1,s=this.datePicked[0].clone().subtract(o,"day"),l=this.datePicked[0].clone().add(o,"day");t.isBetween(s,this.datePicked[0],"(]")&&e.classList.add(a.isLocked),t.isBetween(this.datePicked[0],l,"[)")&&e.classList.add(a.isLocked);}if(this.options.maxDays&&1===this.datePicked.length){var p=this.options.maxDays;s=this.datePicked[0].clone().subtract(p,"day"),l=this.datePicked[0].clone().add(p,"day");t.isSameOrBefore(s)&&e.classList.add(a.isLocked),t.isSameOrAfter(l)&&e.classList.add(a.isLocked);}(this.options.selectForward&&1===this.datePicked.length&&t.isBefore(this.datePicked[0])&&e.classList.add(a.isLocked),this.options.selectBackward&&1===this.datePicked.length&&t.isAfter(this.datePicked[0])&&e.classList.add(a.isLocked),h.dateIsLocked(t,this.options,this.datePicked)&&e.classList.add(a.isLocked),this.options.highlightedDays.length)&&(this.options.highlightedDays.filter((function(e){return e instanceof Array?t.isBetween(e[0],e[1],"[]"):e.isSame(t,"day")})).length&&e.classList.add(a.isHighlighted));return e.tabIndex=e.classList.contains("is-locked")?-1:0,this.emit("render:day",e,t),e},e.prototype.renderFooter=function(){var t=document.createElement("div");if(t.className=a.containerFooter,this.options.footerHTML?t.innerHTML=this.options.footerHTML:t.innerHTML='\n      <span class="'+a.previewDateRange+'"></span>\n      <button type="button" class="'+a.buttonCancel+'">'+this.options.buttonText.cancel+'</button>\n      <button type="button" class="'+a.buttonApply+'">'+this.options.buttonText.apply+"</button>\n      ",this.options.singleMode){if(1===this.datePicked.length){var e=this.datePicked[0].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=e;}}else if(1===this.datePicked.length&&t.querySelector("."+a.buttonApply).setAttribute("disabled",""),2===this.datePicked.length){e=this.datePicked[0].format(this.options.format,this.options.lang);var n=this.datePicked[1].format(this.options.format,this.options.lang);t.querySelector("."+a.previewDateRange).innerHTML=""+e+this.options.delimiter+n;}return this.emit("render:footer",t),t},e.prototype.renderWeekNumber=function(t){var e=document.createElement("div"),n=t.getWeek(this.options.firstDay);return e.className=a.weekNumber,e.innerHTML=53===n&&0===t.getMonth()?"53 / 1":n,e},e.prototype.renderTooltip=function(){var t=document.createElement("div");return t.className=a.containerTooltip,t},e.prototype.weekdayName=function(t,e){return void 0===e&&(e="short"),new Date(1970,0,t,12,0,0,0).toLocaleString(this.options.lang,{weekday:e})},e.prototype.calcSkipDays=function(t){var e=t.getDay()-this.options.firstDay;return e<0&&(e+=7),e},e}(s.LPCore);e.Calendar=l;},function(t,e,n){var i,o=this&&this.__extends||(i=function(t,e){return (i=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e;}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n]);})(t,e)},function(t,e){function n(){this.constructor=t;}i(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n);}),s=this&&this.__assign||function(){return (s=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};Object.defineProperty(e,"__esModule",{value:!0});var r=n(7),a=n(0),h=n(1),l=function(t){function e(e){var n=t.call(this)||this;n.datePicked=[],n.calendars=[],n.options={element:null,elementEnd:null,parentEl:null,firstDay:1,format:"YYYY-MM-DD",lang:"en-US",delimiter:" - ",numberOfMonths:1,numberOfColumns:1,startDate:null,endDate:null,zIndex:9999,position:"auto",selectForward:!1,selectBackward:!1,splitView:!1,inlineMode:!1,singleMode:!0,autoApply:!0,allowRepick:!1,showWeekNumbers:!1,showTooltip:!0,scrollToDate:!0,mobileFriendly:!0,resetButton:!1,autoRefresh:!1,lockDaysFormat:"YYYY-MM-DD",lockDays:[],disallowLockDaysInRange:!1,lockDaysInclusivity:"[]",highlightedDaysFormat:"YYYY-MM-DD",highlightedDays:[],dropdowns:{minYear:1990,maxYear:null,months:!1,years:!1},buttonText:{apply:"Apply",cancel:"Cancel",previousMonth:'<svg width="11" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M7.919 0l2.748 2.667L5.333 8l5.334 5.333L7.919 16 0 8z" fill-rule="nonzero"/></svg>',nextMonth:'<svg width="11" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M2.748 16L0 13.333 5.333 8 0 2.667 2.748 0l7.919 8z" fill-rule="nonzero"/></svg>',reset:'<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">\n        <path d="M0 0h24v24H0z" fill="none"/>\n        <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>\n      </svg>'},tooltipText:{one:"day",other:"days"}},n.options=s(s({},n.options),e.element.dataset),Object.keys(n.options).forEach((function(t){"true"!==n.options[t]&&"false"!==n.options[t]||(n.options[t]="true"===n.options[t]);}));var i=s(s({},n.options.dropdowns),e.dropdowns),o=s(s({},n.options.buttonText),e.buttonText),r=s(s({},n.options.tooltipText),e.tooltipText);n.options=s(s({},n.options),e),n.options.dropdowns=s({},i),n.options.buttonText=s({},o),n.options.tooltipText=s({},r),n.options.elementEnd||(n.options.allowRepick=!1),n.options.lockDays.length&&(n.options.lockDays=a.DateTime.convertArray(n.options.lockDays,n.options.lockDaysFormat)),n.options.highlightedDays.length&&(n.options.highlightedDays=a.DateTime.convertArray(n.options.highlightedDays,n.options.highlightedDaysFormat));var h=n.parseInput(),l=h[0],p=h[1];n.options.startDate&&(n.options.singleMode||n.options.endDate)&&(l=new a.DateTime(n.options.startDate,n.options.format,n.options.lang)),l&&n.options.endDate&&(p=new a.DateTime(n.options.endDate,n.options.format,n.options.lang)),l instanceof a.DateTime&&!isNaN(l.getTime())&&(n.options.startDate=l),n.options.startDate&&p instanceof a.DateTime&&!isNaN(p.getTime())&&(n.options.endDate=p),!n.options.singleMode||n.options.startDate instanceof a.DateTime||(n.options.startDate=null),n.options.singleMode||n.options.startDate instanceof a.DateTime&&n.options.endDate instanceof a.DateTime||(n.options.startDate=null,n.options.endDate=null);for(var c=0;c<n.options.numberOfMonths;c+=1){var d=n.options.startDate instanceof a.DateTime?n.options.startDate.clone():new a.DateTime;if(!n.options.startDate&&(0===c||n.options.splitView)){var u=n.options.maxDate?new a.DateTime(n.options.maxDate):null,m=n.options.minDate?new a.DateTime(n.options.minDate):null,f=n.options.numberOfMonths-1;m&&u&&d.isAfter(u)?(d=m.clone()).setDate(1):!m&&u&&d.isAfter(u)&&((d=u.clone()).setDate(1),d.setMonth(d.getMonth()-f));}d.setDate(1),d.setMonth(d.getMonth()+c),n.calendars[c]=d;}if(n.options.showTooltip)if(n.options.tooltipPluralSelector)n.pluralSelector=n.options.tooltipPluralSelector;else try{var g=new Intl.PluralRules(n.options.lang);n.pluralSelector=g.select.bind(g);}catch(t){n.pluralSelector=function(t){return 0===Math.abs(t)?"one":"other"};}return n}return o(e,t),e.add=function(t,e){h.Litepicker.prototype[t]=e;},e.prototype.DateTime=function(t,e){return t?new a.DateTime(t,e):new a.DateTime},e.prototype.init=function(){var t=this;this.options.plugins&&this.options.plugins.length&&this.options.plugins.forEach((function(e){h.Litepicker.prototype.hasOwnProperty(e)?h.Litepicker.prototype[e].init.call(t,t):console.warn("Litepicker: plugin «"+e+"» not found.");}));},e.prototype.parseInput=function(){var t=this.options.delimiter,e=new RegExp(""+t),n=this.options.element instanceof HTMLInputElement?this.options.element.value.split(t):[];if(this.options.elementEnd){if(this.options.element instanceof HTMLInputElement&&this.options.element.value.length&&this.options.elementEnd instanceof HTMLInputElement&&this.options.elementEnd.value.length)return [new a.DateTime(this.options.element.value,this.options.format),new a.DateTime(this.options.elementEnd.value,this.options.format)]}else if(this.options.singleMode){if(this.options.element instanceof HTMLInputElement&&this.options.element.value.length)return [new a.DateTime(this.options.element.value,this.options.format)]}else if(this.options.element instanceof HTMLInputElement&&e.test(this.options.element.value)&&n.length&&n.length%2==0){var i=n.slice(0,n.length/2).join(t),o=n.slice(n.length/2).join(t);return [new a.DateTime(i,this.options.format),new a.DateTime(o,this.options.format)]}return []},e.prototype.isShowning=function(){return this.ui&&"none"!==this.ui.style.display},e.prototype.findPosition=function(t){var e=t.getBoundingClientRect(),n=this.ui.getBoundingClientRect(),i=this.options.position.split(" "),o=window.scrollX||window.pageXOffset,s=window.scrollY||window.pageYOffset,r=0,a=0;if("auto"!==i[0]&&/top|bottom/.test(i[0]))r=e[i[0]]+s,"top"===i[0]&&(r-=n.height);else {r=e.bottom+s;var h=e.bottom+n.height>window.innerHeight,l=e.top+s-n.height>=n.height;h&&l&&(r=e.top+s-n.height);}if(/left|right/.test(i[0])||i[1]&&"auto"!==i[1]&&/left|right/.test(i[1]))a=/left|right/.test(i[0])?e[i[0]]+o:e[i[1]]+o,"right"!==i[0]&&"right"!==i[1]||(a-=n.width);else {a=e.left+o;h=e.left+n.width>window.innerWidth;var p=e.right+o-n.width>=0;h&&p&&(a=e.right+o-n.width);}return {left:a,top:r}},e}(r.EventEmitter);e.LPCore=l;},function(t,e,n){var i,o="object"==typeof Reflect?Reflect:null,s=o&&"function"==typeof o.apply?o.apply:function(t,e,n){return Function.prototype.apply.call(t,e,n)};i=o&&"function"==typeof o.ownKeys?o.ownKeys:Object.getOwnPropertySymbols?function(t){return Object.getOwnPropertyNames(t).concat(Object.getOwnPropertySymbols(t))}:function(t){return Object.getOwnPropertyNames(t)};var r=Number.isNaN||function(t){return t!=t};function a(){a.init.call(this);}t.exports=a,a.EventEmitter=a,a.prototype._events=void 0,a.prototype._eventsCount=0,a.prototype._maxListeners=void 0;var h=10;function l(t){return void 0===t._maxListeners?a.defaultMaxListeners:t._maxListeners}function p(t,e,n,i){var o,s,r,a;if("function"!=typeof n)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof n);if(void 0===(s=t._events)?(s=t._events=Object.create(null),t._eventsCount=0):(void 0!==s.newListener&&(t.emit("newListener",e,n.listener?n.listener:n),s=t._events),r=s[e]),void 0===r)r=s[e]=n,++t._eventsCount;else if("function"==typeof r?r=s[e]=i?[n,r]:[r,n]:i?r.unshift(n):r.push(n),(o=l(t))>0&&r.length>o&&!r.warned){r.warned=!0;var h=new Error("Possible EventEmitter memory leak detected. "+r.length+" "+String(e)+" listeners added. Use emitter.setMaxListeners() to increase limit");h.name="MaxListenersExceededWarning",h.emitter=t,h.type=e,h.count=r.length,a=h,console&&console.warn&&console.warn(a);}return t}function c(){for(var t=[],e=0;e<arguments.length;e++)t.push(arguments[e]);this.fired||(this.target.removeListener(this.type,this.wrapFn),this.fired=!0,s(this.listener,this.target,t));}function d(t,e,n){var i={fired:!1,wrapFn:void 0,target:t,type:e,listener:n},o=c.bind(i);return o.listener=n,i.wrapFn=o,o}function u(t,e,n){var i=t._events;if(void 0===i)return [];var o=i[e];return void 0===o?[]:"function"==typeof o?n?[o.listener||o]:[o]:n?function(t){for(var e=new Array(t.length),n=0;n<e.length;++n)e[n]=t[n].listener||t[n];return e}(o):f(o,o.length)}function m(t){var e=this._events;if(void 0!==e){var n=e[t];if("function"==typeof n)return 1;if(void 0!==n)return n.length}return 0}function f(t,e){for(var n=new Array(e),i=0;i<e;++i)n[i]=t[i];return n}Object.defineProperty(a,"defaultMaxListeners",{enumerable:!0,get:function(){return h},set:function(t){if("number"!=typeof t||t<0||r(t))throw new RangeError('The value of "defaultMaxListeners" is out of range. It must be a non-negative number. Received '+t+".");h=t;}}),a.init=function(){void 0!==this._events&&this._events!==Object.getPrototypeOf(this)._events||(this._events=Object.create(null),this._eventsCount=0),this._maxListeners=this._maxListeners||void 0;},a.prototype.setMaxListeners=function(t){if("number"!=typeof t||t<0||r(t))throw new RangeError('The value of "n" is out of range. It must be a non-negative number. Received '+t+".");return this._maxListeners=t,this},a.prototype.getMaxListeners=function(){return l(this)},a.prototype.emit=function(t){for(var e=[],n=1;n<arguments.length;n++)e.push(arguments[n]);var i="error"===t,o=this._events;if(void 0!==o)i=i&&void 0===o.error;else if(!i)return !1;if(i){var r;if(e.length>0&&(r=e[0]),r instanceof Error)throw r;var a=new Error("Unhandled error."+(r?" ("+r.message+")":""));throw a.context=r,a}var h=o[t];if(void 0===h)return !1;if("function"==typeof h)s(h,this,e);else {var l=h.length,p=f(h,l);for(n=0;n<l;++n)s(p[n],this,e);}return !0},a.prototype.addListener=function(t,e){return p(this,t,e,!1)},a.prototype.on=a.prototype.addListener,a.prototype.prependListener=function(t,e){return p(this,t,e,!0)},a.prototype.once=function(t,e){if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e);return this.on(t,d(this,t,e)),this},a.prototype.prependOnceListener=function(t,e){if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e);return this.prependListener(t,d(this,t,e)),this},a.prototype.removeListener=function(t,e){var n,i,o,s,r;if("function"!=typeof e)throw new TypeError('The "listener" argument must be of type Function. Received type '+typeof e);if(void 0===(i=this._events))return this;if(void 0===(n=i[t]))return this;if(n===e||n.listener===e)0==--this._eventsCount?this._events=Object.create(null):(delete i[t],i.removeListener&&this.emit("removeListener",t,n.listener||e));else if("function"!=typeof n){for(o=-1,s=n.length-1;s>=0;s--)if(n[s]===e||n[s].listener===e){r=n[s].listener,o=s;break}if(o<0)return this;0===o?n.shift():function(t,e){for(;e+1<t.length;e++)t[e]=t[e+1];t.pop();}(n,o),1===n.length&&(i[t]=n[0]),void 0!==i.removeListener&&this.emit("removeListener",t,r||e);}return this},a.prototype.off=a.prototype.removeListener,a.prototype.removeAllListeners=function(t){var e,n,i;if(void 0===(n=this._events))return this;if(void 0===n.removeListener)return 0===arguments.length?(this._events=Object.create(null),this._eventsCount=0):void 0!==n[t]&&(0==--this._eventsCount?this._events=Object.create(null):delete n[t]),this;if(0===arguments.length){var o,s=Object.keys(n);for(i=0;i<s.length;++i)"removeListener"!==(o=s[i])&&this.removeAllListeners(o);return this.removeAllListeners("removeListener"),this._events=Object.create(null),this._eventsCount=0,this}if("function"==typeof(e=n[t]))this.removeListener(t,e);else if(void 0!==e)for(i=e.length-1;i>=0;i--)this.removeListener(t,e[i]);return this},a.prototype.listeners=function(t){return u(this,t,!0)},a.prototype.rawListeners=function(t){return u(this,t,!1)},a.listenerCount=function(t,e){return "function"==typeof t.listenerCount?t.listenerCount(e):m.call(t,e)},a.prototype.listenerCount=m,a.prototype.eventNames=function(){return this._eventsCount>0?i(this._events):[]};},function(t,e,n){var i=this&&this.__assign||function(){return (i=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};Object.defineProperty(e,"__esModule",{value:!0});var o=n(0),s=n(1),r=n(2);s.Litepicker.prototype.show=function(t){void 0===t&&(t=null),this.emit("before:show",t);var e=t||this.options.element;if(this.triggerElement=e,!this.isShowning()){if(this.options.inlineMode)return this.ui.style.position="relative",this.ui.style.display="inline-block",this.ui.style.top=null,this.ui.style.left=null,this.ui.style.bottom=null,void(this.ui.style.right=null);this.scrollToDate(t),this.render(),this.ui.style.position="absolute",this.ui.style.display="block",this.ui.style.zIndex=this.options.zIndex;var n=this.findPosition(e);this.ui.style.top=n.top+"px",this.ui.style.left=n.left+"px",this.ui.style.right=null,this.ui.style.bottom=null,this.emit("show",t);}},s.Litepicker.prototype.hide=function(){this.isShowning()&&(this.datePicked.length=0,this.updateInput(),this.options.inlineMode?this.render():(this.ui.style.display="none",this.emit("hide")));},s.Litepicker.prototype.getDate=function(){return this.getStartDate()},s.Litepicker.prototype.getStartDate=function(){return this.options.startDate?this.options.startDate.clone():null},s.Litepicker.prototype.getEndDate=function(){return this.options.endDate?this.options.endDate.clone():null},s.Litepicker.prototype.setDate=function(t,e){void 0===e&&(e=!1);var n=new o.DateTime(t,this.options.format,this.options.lang);r.dateIsLocked(n,this.options,[n])&&!e?this.emit("error:date",n):(this.setStartDate(t),this.options.inlineMode&&this.render(),this.emit("selected",this.getDate()));},s.Litepicker.prototype.setStartDate=function(t){t&&(this.options.startDate=new o.DateTime(t,this.options.format,this.options.lang),this.updateInput());},s.Litepicker.prototype.setEndDate=function(t){t&&(this.options.endDate=new o.DateTime(t,this.options.format,this.options.lang),this.options.startDate.getTime()>this.options.endDate.getTime()&&(this.options.endDate=this.options.startDate.clone(),this.options.startDate=new o.DateTime(t,this.options.format,this.options.lang)),this.updateInput());},s.Litepicker.prototype.setDateRange=function(t,e,n){void 0===n&&(n=!1),this.triggerElement=void 0;var i=new o.DateTime(t,this.options.format,this.options.lang),s=new o.DateTime(e,this.options.format,this.options.lang);(this.options.disallowLockDaysInRange?r.rangeIsLocked([i,s],this.options):r.dateIsLocked(i,this.options,[i,s])||r.dateIsLocked(s,this.options,[i,s]))&&!n?this.emit("error:range",[i,s]):(this.setStartDate(i),this.setEndDate(s),this.options.inlineMode&&this.render(),this.updateInput(),this.emit("selected",this.getStartDate(),this.getEndDate()));},s.Litepicker.prototype.gotoDate=function(t,e){void 0===e&&(e=0);var n=new o.DateTime(t);n.setDate(1),this.calendars[e]=n.clone(),this.render();},s.Litepicker.prototype.setLockDays=function(t){this.options.lockDays=o.DateTime.convertArray(t,this.options.lockDaysFormat),this.render();},s.Litepicker.prototype.setHighlightedDays=function(t){this.options.highlightedDays=o.DateTime.convertArray(t,this.options.highlightedDaysFormat),this.render();},s.Litepicker.prototype.setOptions=function(t){delete t.element,delete t.elementEnd,delete t.parentEl,t.startDate&&(t.startDate=new o.DateTime(t.startDate,this.options.format,this.options.lang)),t.endDate&&(t.endDate=new o.DateTime(t.endDate,this.options.format,this.options.lang));var e=i(i({},this.options.dropdowns),t.dropdowns),n=i(i({},this.options.buttonText),t.buttonText),s=i(i({},this.options.tooltipText),t.tooltipText);this.options=i(i({},this.options),t),this.options.dropdowns=i({},e),this.options.buttonText=i({},n),this.options.tooltipText=i({},s),!this.options.singleMode||this.options.startDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null),this.options.singleMode||this.options.startDate instanceof o.DateTime&&this.options.endDate instanceof o.DateTime||(this.options.startDate=null,this.options.endDate=null);for(var r=0;r<this.options.numberOfMonths;r+=1){var a=this.options.startDate?this.options.startDate.clone():new o.DateTime;a.setDate(1),a.setMonth(a.getMonth()+r),this.calendars[r]=a;}this.options.lockDays.length&&(this.options.lockDays=o.DateTime.convertArray(this.options.lockDays,this.options.lockDaysFormat)),this.options.highlightedDays.length&&(this.options.highlightedDays=o.DateTime.convertArray(this.options.highlightedDays,this.options.highlightedDaysFormat)),this.render(),this.options.inlineMode&&this.show(),this.updateInput();},s.Litepicker.prototype.clearSelection=function(){this.options.startDate=null,this.options.endDate=null,this.datePicked.length=0,this.updateInput(),this.isShowning()&&this.render(),this.emit("clear:selection");},s.Litepicker.prototype.destroy=function(){this.ui&&this.ui.parentNode&&(this.ui.parentNode.removeChild(this.ui),this.ui=null),this.emit("destroy");};}])}));
-});
+], VegaDatePickerCalendarRenderer$1.prototype, "isMobileDevice", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "isCalendarShow", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "isDateDisabled", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "allowRepick", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "vegaDatePickerValueController", void 0);
+__decorate$f([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer$1.prototype, "calendarOpenStateController", void 0);
+__decorate$f([
+  MapToComponentMethod('componentDidLoad')
+], VegaDatePickerCalendarRenderer$1.prototype, "componentDidLoad", null);
 
-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 VegaDatePickerCalendarRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startMonthYearHeaderRef = {
-      month: null,
-      year: null,
-    };
-    this.endMonthYearHeaderRef = {
-      month: null,
-      year: null,
-    };
-    this.alterLitePickerHeader = (ui) => {
-      if (this.showYearMonthDropdowns) {
-        this.monthYearDropdownRenderer.renderMonthYearDropdowns(this.datePicker);
-      }
-      else {
-        this.renderMonthName(ui);
-        this.setYearMonthHeaderRef(ui);
-      }
-      this.renderWeekdays(ui);
-      this.renderPrevAndNextMonthButtons(ui);
-    };
-    this.alterLitePickerFooter = (ui) => {
-      this.clearButton && this.renderClearButton(ui);
-    };
-    this.alterLitePickerHeight = (ui) => {
-      if (this.dropdownConfig.staticHeight === false) {
-        ui.classList.remove('static-height');
-      }
-      else {
-        ui.classList.add('static-height');
-      }
-    };
-    /**
-     * Update the weekday to a single letter to adapt the vega UI design. e.g. Mon to M | Tue to T | Wed to W
-     * The below method is e2e-test covered in
-     * @see{module:vega-date-picker-render-ui-with-single}
-     */
-    /* istanbul ignore next */
-    this.renderWeekdays = (ui) => {
-      ui.querySelectorAll('.month-item-weekdays-row').forEach((row) => {
-        Array.from(row.children).forEach((item) => {
-          item.innerText = item.innerText.replace(/^(Mon|Tue|Wed|Thu|Fri|Sat|Sun)$/, (match) => this.translationSlimmer.t(`${match}-short`));
-        });
-      });
-    };
-    /**
-     * Update the previous/next month buttons icon to adapt the vega UI design
-     * The below method is e2e-test covered in
-     * @see{module:vega-date-picker-render-ui-with-single}
-     */
-    /* istanbul ignore next */
-    this.renderPrevAndNextMonthButtons = (ui) => {
-      ui.querySelectorAll('.button-previous-month').forEach((item) => {
-        /**
-         * Calendar will flash when using vega-icon here. Hence use svg here for now
-         * TODO: Use vega-icon instead when deprecated litepicker in https://gethired.atlassian.net/browse/VD-2534
-         */
-        item.innerHTML = Icons['chevron-left'].icon;
-        item.addEventListener('click', () => {
-          this.emitMonthYearChangeEvent();
-        });
-      });
-      ui.querySelectorAll('.button-next-month').forEach((item) => {
-        item.innerHTML = Icons['chevron-right'].icon;
-        item.addEventListener('click', () => {
-          this.emitMonthYearChangeEvent();
-        });
-      });
-    };
-    this.renderClearButton = (ui) => {
-      // eslint-disable-next-line no-restricted-globals
-      const footerContainer = document.createElement('div');
-      footerContainer.className = 'footer-container';
-      // eslint-disable-next-line no-restricted-globals
-      const clearButton = document.createElement('vega-button-link');
-      clearButton.label = this.translationSlimmer.t('Clear');
-      clearButton.addEventListener('click', this.vegaDatePickerCalendarController.handleClear);
-      footerContainer.append(clearButton);
-      const mainContainer = ui.querySelector('.container__main');
-      if (mainContainer) {
-        mainContainer.append(footerContainer);
-      }
-    };
-    this.getSystemTimeZone = () => {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    };
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-in-popover}
-   */
-  /* istanbul ignore next */
-  /**
-   * The connectedCallback function checks if the datePicker is null and initializes it if it is.
-   */
-  connectedCallback() {
-    if (this.datePicker === null) {
-      this.initDatePicker();
-    }
-    // eslint-disable-next-line no-restricted-globals
-    this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
-    // eslint-disable-next-line no-restricted-globals
-    document.body.append(this.calendarContainerRef);
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-disconnected-callback}
-   */
-  /* istanbul ignore next */
-  /**
-   * The `disconnectedCallback` function destroys the `datePicker` instance and sets it to null.
-   */
-  disconnectedCallback() {
-    var _a;
-    (_a = this.datePicker) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.datePicker = null;
-    this.calendarContainerRef.remove();
-  }
-  /*
-   * call this method to open the date picker dropdown
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-render-ui-with-single}
-   */
-  /** Import litepicker mobilefriendly module when the device is mobile */
-  async componentWillLoad() {
-    /* istanbul ignore next */ // Spec test can't load the plugin, use e2e test for below
-    if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
-      await import('./mobilefriendly-c5d0573d.js');
-    }
-  }
-  /** Init date picker when component did load */
-  componentDidLoad() {
-    this.initDatePicker();
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-re-render-in-single-mode}
-   * @see{module:vega-date-picker-re-render-in-range-mode }
-   */
-  /* istanbul ignore next */
-  /** Refresh date picker when it is updated */
-  componentDidRender() {
-    if (this.requireRefreshLitePicker ||
-      (this.vegaDatePickerSingleInputRenderer.getOldSingleDateInputRef() &&
-        this.vegaDatePickerSingleInputRenderer.getOldSingleDateInputRef() !==
-          this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef()) ||
-      (this.vegaDatePickerRangeInputRenderer.getOldStartDateInputRef() &&
-        this.vegaDatePickerRangeInputRenderer.getOldStartDateInputRef() !==
-          this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()) ||
-      (this.vegaDatePickerRangeInputRenderer.getOldEndDateInputRef() &&
-        this.vegaDatePickerRangeInputRenderer.getOldEndDateInputRef() !==
-          this.vegaDatePickerRangeInputRenderer.getEndDateInputRef())) {
-      this.refreshLitePicker();
-    }
-  }
-  watchIsDateDisabled() {
-    const dateItems = 
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
-    dateItems.forEach((item) => {
-      if (this.isDateDisabled(new Date(Number(item.dataset.time)))) {
-        this.setDisabledDayStyles(item);
-      }
-      else {
-        this.clearDisabledDayStyles(item);
-      }
-    });
-  }
-  /**
-   * The callback to handle [doOpen]{@link VegaDatePicker.doOpen}
-   */
-  doOpen() {
-    this.datePicker.show();
-  }
-  /**
-   * The callback to handle [doClose]{@link VegaDatePicker.doClose}
-   */
-  doClose() {
-    this.datePicker.hide();
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-range-mode-repick-start-date-or-end-date}
-   */
-  /* istanbul ignore next */
-  /** Update property of allowRepick when it is changed */
-  watchAllowRepick() {
-    this.datePicker.setOptions({
-      allowRepick: this.allowRepick,
-    });
-  }
-  /**
-   * Specifies whether the date picker field is disabled.
-   */
-  watchDisabled() {
-    this.datePicker.hide();
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-change-mask-format}
-   * @see{module:vega-date-picker-range-mode-change-mask-format}
-   */
-  /* istanbul ignore next */
-  /**
-   * It is decorated with the `@MapToComponentMethod` decorator,
-   * which indicates that this method should be mapped to a component method called 'format'.
-   *
-   * @param {string} format - The value of the format.
-   */
-  watchFormat() {
-    this.datePicker.setOptions({
-      format: this.format,
-    });
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-mode-change}
-   */
-  /* istanbul ignore next */
-  /** Update datePicker settings property of mode is changed */
-  watchMode() {
-    this.requireRefreshLitePicker = true;
-  }
-  /**
-   * Update datePicker settings property if showYearMonthDropdowns is changed
-   */
-  watchShowYearMonthDropdowns() {
-    this.requireRefreshLitePicker = true;
-  }
-  getStartMonthYearHeaderRef() {
-    return this.startMonthYearHeaderRef;
-  }
-  getEndMonthYearHeaderRef() {
-    return this.endMonthYearHeaderRef;
-  }
-  /**
-   * get the reference of datePicker
-   *
-   * @returns {Litepicker} the reference of datePicker.
-   */
-  getDatePicker() {
-    return this.datePicker;
-  }
-  getCalendarContainerRef() {
-    return this.calendarContainerRef;
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-re-render-in-single-mode}
-   * @see{module:vega-date-picker-re-render-in-range-mode}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function refreshLitePicker destroys and initializes a date picker if it exists.
-   */
-  refreshLitePicker() {
-    if (this.datePicker) {
-      this.datePicker.destroy();
-      this.initDatePicker();
-      this.requireRefreshLitePicker = false;
-    }
-  }
-  /**
-   * Render date picker calendar month name
-   *
-   * @param {HTMLElement} ui - Calendar dom ref
-   */
-  renderMonthName(ui) {
-    ui.querySelectorAll('.month-item-name').forEach((item) => {
-      const currentMonthName = item.innerText;
-      item.innerText = this.translationSlimmer.t(currentMonthName);
-    });
-  }
-  setYearMonthHeaderRef(ui) {
-    this.startMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[0];
-    this.endMonthYearHeaderRef.month = ui.querySelectorAll('.month-item-name')[1];
-    this.startMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[0];
-    this.endMonthYearHeaderRef.year = ui.querySelectorAll('.month-item-year')[1];
-  }
-  emitMonthYearChangeEvent() {
-    const monthYearSummary = this.showYearMonthDropdowns
-      ? this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownEnabled()
-      : this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownDisabled();
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), monthYearSummary);
-  }
-  resetTodayByTimezone() {
-    if (this.timezone && this.timezone !== this.getSystemTimeZone()) {
-      try {
-        const formattedDate = new Intl.DateTimeFormat([], {
-          timeZone: this.timezone,
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-        }).format(new Date());
-        const dateByTimezone = new Date(formattedDate.split('/').join('-')).getTime();
-        const dayItems = 
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.calendarContainerRef.shadowRoot.querySelectorAll('.day-item');
-        for (let i = 0; i < dayItems.length; i++) {
-          if (dayItems[i].classList.contains('is-today') &&
-            Number(dayItems[i].dataset.time) !== dateByTimezone) {
-            dayItems[i].classList.remove('is-today');
-          }
-          if (!dayItems[i].classList.contains('is-today') &&
-            Number(dayItems[i].dataset.time) === dateByTimezone) {
-            dayItems[i].classList.add('is-today');
-          }
-        }
-      }
-      catch (_a) {
-        LogUtility.warn('Invalid timezone: ', this.timezone);
-      }
-    }
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-render-ui-with-single}
-   * @see{module:vega-date-picker-render-ui-with-range}
-   */
-  /**
-   * The function initializes a Litepicker date picker, customizes its appearance and behavior, and
-   * attaches event listeners.
-   */
-  initDatePicker() {
-    this.datePicker = new litepicker_umd.Litepicker(this.vegaDatePickerCalendarController.getDefaultLitePickerConfig())
-      .on('render', (ui) => {
-      this.alterLitePickerHeader(ui);
-      this.alterLitePickerFooter(ui);
-      this.alterLitePickerHeight(ui);
-      this.litepickerRef = ui;
-      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-      this.getCalendarContainerRef().shadowRoot.append(this.litepickerRef);
-      /* istanbul ignore next */
-      if (this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.vegaDatePickerMobileController.preventElementTouchMoveInMobile();
-      }
-      this.resetTodayByTimezone();
-    })
-      .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
-      .on('before:show', () => {
-      this.vegaDatePickerCalendarController.goToDate();
-    })
-      .on('show', () => {
-      this.vegaDatePickerElementAppenderController.show();
-    })
-      .on('render:day', (node, date) => {
-      const isDisabled = this.isDateDisabled(date.toJSDate());
-      if (isDisabled) {
-        this.setDisabledDayStyles(node);
-      }
-    })
-      .on('mobilefriendly.show', 
-    /* istanbul ignore next */ () => {
-      this.vegaDatePickerZIndexController.setZIndex();
-      this.getCalendarContainerRef().style.position = 'fixed';
-      this.getCalendarContainerRef().style.top = '50%';
-      this.getCalendarContainerRef().style.left = '50%';
-      this.getCalendarContainerRef().style.transform = 'translate(-50%, -50%)';
-      this.getCalendarContainerRef().classList.remove('vega-force-hidden');
-    })
-      .on('hide', () => {
-      this.vegaDatePickerValueController.syncUpValueWithCalendar();
-      /* istanbul ignore else */
-      if (!this.vegaDatePickerMobileController.getIsMobileDevice()) {
-        this.vegaDatePickerElementAppenderController.hide();
-      }
-      else {
-        this.getCalendarContainerRef().classList.add('vega-force-hidden');
-        this.vegaDatePickerZIndexController.removeZIndex();
-      }
-    });
-  }
-  /**
-   * Applies styles to disable a specific day in the calendar.
-   *
-   * @param {HTMLElement} dayRef - The reference to the day element to be disabled.
-   */
-  setDisabledDayStyles(dayRef) {
-    dayRef.classList.add('is-locked');
-    dayRef.classList.add('is-disabled');
-    dayRef.tabIndex = -1;
-  }
-  /**
-   * Clears the styles applied to a day element that mark it as disabled.
-   *
-   * @param {HTMLElement} dayRef - The reference to the day element to be cleared of disabled styles.
-   */
-  clearDisabledDayStyles(dayRef) {
-    dayRef.classList.remove('is-locked');
-    dayRef.classList.remove('is-disabled');
-    dayRef.tabIndex = 0;
-  }
-}
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "dropdownConfig", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "showYearMonthDropdowns", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerCalendarController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMobileController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerElementAppenderController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerZIndexController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "monthYearDropdownRenderer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "timezone", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "isDateDisabled", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$9([
-  MapToComponentField()
-], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
-__decorate$9([
-  MapToComponentMethod('connectedCallback')
-], VegaDatePickerCalendarRenderer.prototype, "connectedCallback", null);
-__decorate$9([
-  MapToComponentMethod('disconnectedCallback')
-], VegaDatePickerCalendarRenderer.prototype, "disconnectedCallback", null);
-__decorate$9([
-  MapToComponentMethod('componentWillLoad')
-], VegaDatePickerCalendarRenderer.prototype, "componentWillLoad", null);
-__decorate$9([
-  MapToComponentMethod('componentDidLoad')
-], VegaDatePickerCalendarRenderer.prototype, "componentDidLoad", null);
-__decorate$9([
-  MapToComponentMethod('componentDidRender')
-], VegaDatePickerCalendarRenderer.prototype, "componentDidRender", null);
-__decorate$9([
-  MapToComponentMethod('watchIsDateDisabled')
-], VegaDatePickerCalendarRenderer.prototype, "watchIsDateDisabled", null);
-__decorate$9([
-  MapToComponentMethod('doOpen')
-], VegaDatePickerCalendarRenderer.prototype, "doOpen", null);
-__decorate$9([
-  MapToComponentMethod('doClose')
-], VegaDatePickerCalendarRenderer.prototype, "doClose", null);
-__decorate$9([
-  MapToComponentMethod('watchAllowRepick')
-], VegaDatePickerCalendarRenderer.prototype, "watchAllowRepick", null);
-__decorate$9([
-  MapToComponentMethod('watchDisabled')
-], VegaDatePickerCalendarRenderer.prototype, "watchDisabled", null);
-__decorate$9([
-  MapToComponentMethod('watchFormat')
-], VegaDatePickerCalendarRenderer.prototype, "watchFormat", null);
-__decorate$9([
-  MapToComponentMethod('watchMode')
-], VegaDatePickerCalendarRenderer.prototype, "watchMode", null);
-__decorate$9([
-  MapToComponentMethod('watchShowYearMonthDropdowns')
-], VegaDatePickerCalendarRenderer.prototype, "watchShowYearMonthDropdowns", null);
-
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The date picker z index controller slimmer */
-class VegaDatePickerZIndexController extends VegaSlimmer {
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-z-index
-   * @see{module:vega-date-picker-z-index-in-mobile}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function sets the z-index of the backdrop and the litepicker element.
-   */
-  setZIndex() {
-    const backdrop = 
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    this.host.shadowRoot.querySelector('.litepicker-backdrop');
-    InternalVegaZIndexManager.setZIndex(backdrop, 'base');
-    InternalVegaZIndexManager.setZIndex(this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(), 'base');
-  }
-  /*
-   * The below method is e2e-test covered in
-   * @see{module:vega-date-picker-z-index
-   * @see{module:vega-date-picker-z-index-in-mobile}
-   */
-  /* istanbul ignore next */
-  /**
-   * The function removes the 'base' z-index from the backdrop and the litepickerRef elements.
-   */
-  removeZIndex() {
-    const backdrop = 
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    this.host.shadowRoot.querySelector('.litepicker-backdrop');
-    InternalVegaZIndexManager.removeZIndex(backdrop, 'base');
-    InternalVegaZIndexManager.removeZIndex(this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(), 'base');
-  }
-}
-__decorate$8([
-  MapToComponentField()
-], VegaDatePickerZIndexController.prototype, "host", void 0);
-__decorate$8([
-  MapToComponentField()
-], VegaDatePickerZIndexController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-
-var __decorate$7 = (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;
@@ -1518,24 +784,6 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The date picker value controller slimmer */
 class VegaDatePickerValueController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    // The litepicker logic will clear the input element value if one of the startDate and dateDate is empty
-    // Hence we need sync up the vega-date-picker value with litepicker calendar
-    // Link: https://github.com/wakirin/Litepicker/blob/master/src/litepicker.ts#L119
-    /** Sync up the value of input with the value of the calendar */
-    this.syncUpValueWithCalendar = () => {
-      var _a, _b;
-      const startDate = ((_a = this.vegaDatePickerCalendarRenderer.getDatePicker().getStartDate()) === null || _a === void 0 ? void 0 : _a.format(this.format)) || '';
-      const endDate = ((_b = this.vegaDatePickerCalendarRenderer.getDatePicker().getEndDate()) === null || _b === void 0 ? void 0 : _b.format(this.format)) || '';
-      if (this.mode === 'range' && !isArrayEqual(this.getValue(), [startDate, endDate])) {
-        this.setValue([startDate, endDate]);
-      }
-      if (this.mode === 'single' && this.getValue() !== startDate) {
-        this.setValue(startDate);
-      }
-    };
-  }
   /*
    * call this method to open the date picker dropdown
    * The below method is e2e-test covered in
@@ -1571,10 +819,7 @@ class VegaDatePickerValueController extends VegaSlimmer {
       isArrayEqual(newValue, oldValue)) {
       return; // avoid the value changed again by `onDatePickerSelected` in range mode
     }
-    if (this.valueGuard(newValue)) {
-      this.vegaDatePickerCalendarController.shouldUpdateCalendar(newValue);
-    }
-    else {
+    if (!this.valueGuard(newValue)) {
       this.setDefaultValueByMode();
     }
     this.changeEventEmitter.emit(this.value);
@@ -1636,13 +881,15 @@ class VegaDatePickerValueController extends VegaSlimmer {
     let isValid;
     switch (this.mode) {
       case 'single':
-        isValid = (value && typeof value === 'string' && isDateStr(value)) || value === '';
+        isValid =
+          (value && typeof value === 'string' && !!CalendarDate.fromString(value, this.format)) ||
+            value === '';
         break;
       case 'range':
         isValid =
           Array.isArray(value) &&
             value.length === 2 &&
-            value.every((item) => isDateStr(item) || item === '');
+            value.every((item) => !!CalendarDate.fromString(item, this.format) || item === '');
         break;
     }
     if (!isValid) {
@@ -1651,38 +898,41 @@ class VegaDatePickerValueController extends VegaSlimmer {
     return isValid;
   }
 }
-__decorate$7([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], VegaDatePickerValueController.prototype, "value", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "mode", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "format", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "host", void 0);
-__decorate$7([
+__decorate$e([
   MapToComponentField()
-], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarController", void 0);
-__decorate$7([
+], VegaDatePickerValueController.prototype, "isCalendarShow", void 0);
+__decorate$e([
   MapToComponentField()
 ], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$7([
+__decorate$e([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "calendarOpenStateController", void 0);
+__decorate$e([
   MapToComponentMethod('componentWillLoad')
 ], VegaDatePickerValueController.prototype, "componentWillLoad", null);
-__decorate$7([
+__decorate$e([
   MapToComponentMethod('watchValue')
 ], VegaDatePickerValueController.prototype, "watchValue", null);
-__decorate$7([
+__decorate$e([
   MapToComponentMethod('watchMode')
 ], VegaDatePickerValueController.prototype, "watchMode", null);
 
-var __decorate$6 = (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;
@@ -1706,7 +956,8 @@ class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
      * @returns {string} The formatted date is being returned.
      */
     this.formatDate = (date) => {
-      return this.vegaDatePickerCalendarRenderer.getDatePicker().DateTime(date).format(this.format);
+      const formattedDate = CalendarDate.fromString(date, this.format);
+      return formattedDate.toString(this.format);
     };
     /**
      * This function returns a reference to an HTML input element based on the input type specified.
@@ -1794,62 +1045,29 @@ class VegaDatePickerFormatController extends StringInputFormatterSlimmer {
     this.setup();
   }
 }
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "format", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "mode", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentField()
 ], VegaDatePickerFormatController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$6([
+__decorate$d([
   MapToComponentMethod('componentDidLoad')
 ], VegaDatePickerFormatController.prototype, "componentDidLoad", null);
-__decorate$6([
+__decorate$d([
   MapToComponentMethod('watchFormat')
 ], VegaDatePickerFormatController.prototype, "watchFormat", null);
 
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/** The date picker element appender controller slimmer */
-class VegaDatePickerElementAppenderController extends ElementAppenderSlimmer {
-  /**
-   * This function sets up the configuration for the Litepicker date picker.
-   */
-  constructor() {
-    super(() => ({
-      target: this.vegaDatePickerRenderer.getDatePickerContainer(),
-      appendableElement: this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
-      positionRelativeTo: this.dropdownConfig.positionRelativeTo,
-      translocation: { X: 0, Y: 8 },
-      placement: ['bottom', 'top'],
-      alignment: ['start', 'end'],
-      isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
-    }), () => 'none');
-  }
-}
-__decorate$5([
-  MapToComponentField()
-], VegaDatePickerElementAppenderController.prototype, "dropdownConfig", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaDatePickerElementAppenderController.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$5([
-  MapToComponentField()
-], VegaDatePickerElementAppenderController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-
-var __decorate$4 = (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;
@@ -1872,7 +1090,7 @@ class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
           target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
           target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
-          target.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
         ],
         eventName: 'keydown',
         // eslint-disable-next-line jsdoc/require-jsdoc
@@ -1886,13 +1104,13 @@ class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
     ]);
   }
 }
-__decorate$4([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$4([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$4([
+__decorate$c([
   MapToComponentField()
 ], VegaDatePickerKeyboardController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
 
@@ -1947,475 +1165,155 @@ const VegaDatePickerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$3 = (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);
   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 VegaDatePickerMonthYearDropdownRenderer extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.startDropdownRef = {
-      month: null,
-      year: null,
-    };
-    this.endDropdownRef = {
-      month: null,
-      year: null,
-    };
-    /* eslint-enable no-restricted-globals */
-    /**
-     * When interacting with open vega-dropdown, prevent it from collapsing since is treated as outside element by litepicker
-     *
-     * @param {MouseEvent} event - Click event
-     */
-    this.onVegaDropdownContentBoxClick = (event) => {
-      const elementOnClick = event.target;
-      if (elementOnClick.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
-        this.datePickerCalendar.classList.remove('vega-force-hidden');
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.datePickerCalendar.shadowRoot.querySelector('.litepicker').style.display =
-          'block';
-      }
-    };
-    /**
-     * Prevent collapsing of dropdown when selecting option. VD-5544
-     *
-     * @param {Event} event - Focus event
-     */
-    this.onVegaDropdownContentBoxActivate = (event) => {
-      const element = event.target;
-      if (element.tagName === 'VEGA-DROPDOWN-CONTENT-BOX') {
-        this.isMonthsOrYearsDropdownContentBoxOnFocus = true;
-        element.classList.remove('vega-force-hidden');
-      }
-      else {
-        this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
-      }
-    };
-  }
-  getStartDropdownRef() {
-    return this.startDropdownRef;
-  }
-  getEndDropdownRef() {
-    return this.endDropdownRef;
-  }
+/** The date picker element appender controller slimmer */
+class VegaDatePickerCalendarOpenStateController extends ElementAppenderSlimmer {
   /**
-   * This method creates months and years dropdowns and replaces the current default select elements of litepicker
-   *
-   * @param {Litepicker} datePicker - Litepicker instance
+   * Sets up the configuration the element appender of date picker.
    */
-  renderMonthYearDropdowns(datePicker) {
-    this.datePicker = datePicker;
-    this.datePickerCalendar = this.vegaDatePickerCalendarRenderer.getCalendarContainerRef();
-    this.renderMonthButton(this.datePicker.ui);
-    this.renderYearButton(this.datePicker.ui);
-    this.initSetup();
-  }
-  render() {
-    return (h("div", { class: "month-year-dropdown-container", style: { display: 'none' } },
-      h("div", { class: "start-date-month-year" },
-        this.renderDropdown('month', 'start'),
-        this.renderDropdown('year', 'start')),
-      h("div", { class: "end-date-month-year" },
-        this.renderDropdown('month', 'end'),
-        this.renderDropdown('year', 'end'))));
-  }
-  /**
-   * From default months select dropdowns, get passed options and create vega-dropdown component with months as options
-   *
-   * @param {HTMLElement} ui - Litepicker ui
-   */
-  renderMonthButton(ui) {
-    ui.querySelectorAll('select.month-item-name').forEach((item, index) => {
-      this.syncDropdownOptions('month', item, index);
-      const selectedOptionValue = this.getSelectedOptionFromSelect(item);
-      const value = VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(selectedOptionValue)];
-      // eslint-disable-next-line no-restricted-globals
-      const monthButton = document.createElement('span');
-      monthButton.classList.add('dropdown-current-value');
-      monthButton.innerText = `${this.translationSlimmer.t(value)}`;
-      this.appendDropdownIconToButton(monthButton);
-      if (item.parentNode) {
-        item.parentNode.replaceChild(monthButton, item);
-      }
-      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
-      if (dropdown) {
-        this.updateDropdownValueAndTarget(monthButton, dropdown, item.value);
-      }
-      monthButton.addEventListener('click', () => {
-        this.setDropdownAsActive(monthButton);
-      });
-    });
-  }
-  /**
-   * From default years select dropdowns, get passed options and create vega-dropdown component with years as options
-   *
-   * @param {HTMLElement} ui - Litepicker ui
-   */
-  renderYearButton(ui) {
-    ui.querySelectorAll('select.month-item-year').forEach((item, index) => {
-      this.syncDropdownOptions('year', item, index);
-      const value = this.getSelectedOptionFromSelect(item);
-      // eslint-disable-next-line no-restricted-globals
-      const yearButton = document.createElement('span');
-      yearButton.classList.add('dropdown-current-value');
-      yearButton.innerText = `${this.translationSlimmer.t(value)}`;
-      this.appendDropdownIconToButton(yearButton);
-      if (item.parentNode) {
-        item.parentNode.replaceChild(yearButton, item);
-      }
-      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
-      if (dropdown) {
-        this.updateDropdownValueAndTarget(yearButton, dropdown, item.value);
-      }
-      yearButton.addEventListener('click', () => {
-        this.setDropdownAsActive(yearButton);
-      });
-    });
-  }
-  getSelectedOptionFromSelect(select) {
-    const options = Array.from(select.querySelectorAll('option'));
-    const selectedOption = options.find((option) => option.selected);
-    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-    return selectedOption.value;
+  constructor() {
+    super(() => ({
+      target: this.vegaDatePickerRenderer.getDatePickerContainer(),
+      appendableElement: this.vegaDatePickerCalendarRenderer.getCalendarContentBoxRef(),
+      positionRelativeTo: this.dropdownConfig.positionRelativeTo,
+      translocation: { X: 0, Y: 8 },
+      placement: ['bottom', 'top'],
+      alignment: ['start', 'end'],
+      isScreenPosition: FeatureFlag.isEnabled('VEGA_DATE_PICKER.ENABLE_CALCULATION_POSITION_BY_SCREEN'),
+    }), () => 'custom', 'isCalendarShow');
+    this.clearCalendarStateTaskQueue = new SynchronizeTaskQueue();
   }
   /**
-   * Render vega-dropdown component
-   *
-   * @param {MonthOrYearType} type - Month or year dropdown
-   * @param {DateIndexType} dateIndex - start date index for both single or range and end date index for range date picker mode
+   * Since connectedCallback will init element appender again, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
    */
-  renderDropdown(type, dateIndex) {
-    return (h("vega-dropdown", { trigger: "click", selectType: "single", class: "vega-force-hidden", "match-target-width": "false", "max-height": "300", ref: (node) => {
-        this.onDropdownShowOrHide(node);
-        if (dateIndex === 'start') {
-          this.startDropdownRef[type] = node;
-        }
-        else {
-          this.endDropdownRef[type] = node;
-        }
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (input) => {
-          this.setDefaultViewValues(type, node);
-          this.monthYearDropdownClick(type, dateIndex, input.detail);
-        });
-      } },
-      h("span", null, type)));
-  }
-  /**
-   * When calendar opens, update sources for the vega-dropdown components for both months and years dropdown
-   *
-   * @param {MonthOrYearType} type - Month or year dropdown
-   * @param {HTMLSelectElement} select - Native select from litepicker ui
-   * @param {number} index - dropdown count
-   */
-  syncDropdownOptions(type, select, index) {
-    const options = select.querySelectorAll('option');
-    const dropdownOptions = Array.from(options).map((option) => ({
-      key: option.value,
-      label: this.translationSlimmer.t(option.text),
-      disabled: option.disabled ? true : false,
-    }));
-    if (type === 'month') {
-      const dropdown = index === 0 ? this.startDropdownRef.month : this.endDropdownRef.month;
-      if (dropdown) {
-        dropdown.source = dropdownOptions;
-      }
-    }
-    if (type === 'year') {
-      dropdownOptions.sort((a, b) => Number(a.key) - Number(b.key));
-      const dropdown = index === 0 ? this.startDropdownRef.year : this.endDropdownRef.year;
-      if (dropdown) {
-        dropdown.source = dropdownOptions;
-      }
+  connectedCallback() {
+    if (!this.isMobileDevice) {
+      super.connectedCallback();
     }
   }
   /**
-   * Litepicker treats vega-dropdown-content-box as an external element that when dropdowns open and you click, it closes automaticall. This method is to initialize event listeners the moment months or years dropdown is opened to prevent litepicker from collpasing
-   *
-   * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
+   * Since it not init the element appender in mobile side, we also not need destroy element appender in disconnectedCallback.
    */
-  onDropdownShowOrHide(dropdown) {
-    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaShow', () => {
-      this.onDropdownShow();
-    });
-    dropdown === null || dropdown === void 0 ? void 0 : dropdown.addEventListener('vegaHide', () => {
-      this.onDropdownHide();
-    });
-  }
-  setDefaultViewValues(type, node) {
-    if (type === 'month') {
-      const yearDropdown = node.nextElementSibling;
-      this.currentStartYearInView = parseInt(yearDropdown.selectedSourceKey);
-    }
-    else {
-      const monthDropdown = node.previousElementSibling;
-      this.currentStartMonthInView = parseInt(monthDropdown.selectedSourceKey);
-    }
-  }
-  appendDropdownIconToButton(parentElement) {
-    parentElement.innerHTML += `<vega-icon icon='${VegaInternalIconManager.getIconKey('caret-down')}'></vega-icon>`;
-    parentElement.tabIndex = 0;
-  }
-  monthYearDropdownClick(type, dateIndex, detail) {
-    const value = parseInt(detail);
-    this.updateDatePickerOnSelect(type, dateIndex, value);
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.vegaDatePickerMonthYearChangeEventController.getMonthYearSummaryWithMonthYearDropdownEnabled());
-  }
-  updateDropdownValueAndTarget(target, dropdownRef, dropdownSelectedKey) {
-    const parentDiv = target.closest('div');
-    if (parentDiv) {
-      parentDiv.classList.add('dropdown-section');
-    }
-    dropdownRef.selectedSourceKey = dropdownSelectedKey;
-    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(dropdownRef, VegaInternalDropdownUpdateTarget), target);
-  }
-  updateDatePickerOnSelect(type, dateIndex, value) {
-    if (type === 'month') {
-      if (this.currentStartYearInView !== null) {
-        if (dateIndex === 'start') {
-          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value, 1));
-        }
-        if (dateIndex === 'end') {
-          this.datePicker.gotoDate(new Date(this.currentStartYearInView, value - 1, 1));
-        }
-      }
-    }
-    else {
-      if (this.currentStartMonthInView !== null) {
-        if (dateIndex === 'start') {
-          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView, 1));
-        }
-        if (dateIndex === 'end') {
-          this.datePicker.gotoDate(new Date(value, this.currentStartMonthInView - 1, 1));
-        }
-      }
+  disconnectedCallback() {
+    if (!this.isMobileDevice) {
+      super.disconnectedCallback();
     }
   }
-  setDropdownAsActive(element) {
-    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
-    element.classList.add('active');
-  }
-  removeActiveDropdownClass() {
-    Array.from(this.datePicker.ui.querySelectorAll('.dropdown-current-value.active')).forEach((item) => item.classList.remove('active'));
-  }
-  /* eslint-disable no-restricted-globals */
-  onDropdownShow() {
-    document.addEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
-    document.addEventListener('click', this.onVegaDropdownContentBoxClick);
-  }
-  onDropdownHide() {
-    this.isMonthsOrYearsDropdownContentBoxOnFocus = false;
-    this.removeActiveDropdownClass();
-    document.removeEventListener('mouseenter', this.onVegaDropdownContentBoxActivate, true);
-    document.removeEventListener('click', this.onVegaDropdownContentBoxClick);
-  }
-  /**
-   * When you collapse date picker while vega-dropdown is still open, close vega-dropdown too
-   */
-  initSetup() {
-    const hideLitepicker = this.datePicker.hide.bind(this.datePicker);
-    this.datePicker.hide = async () => {
-      // eslint-disable-next-line no-restricted-globals
-      const activeElement = document.activeElement;
-      if (!this.isMonthsOrYearsDropdownContentBoxOnFocus &&
-        (activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) !== 'VEGA-DROPDOWN-CONTENT-BOX') {
-        await this.closeOpenDropdowns();
-        hideLitepicker();
-      }
-    };
-  }
   /**
-   * Close any open vega-dropdown when litepicker is collapse
+   * Since componentDidLoad will init element appender, and it will add `vega-force-hidden` class to calendar,
+   *   so we should skip this in mobile side.
    */
-  async closeOpenDropdowns() {
-    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
-    await Promise.all(dropdowns
-      .flatMap((ref) => [ref.month, ref.year])
-      .filter(Boolean)
-      .map((dropdown) => {
-      if (dropdown) {
-        void dropdown.hide();
-      }
-    }));
+  componentDidLoad() {
+    if (!this.isMobileDevice) {
+      super.componentDidLoad();
+    }
   }
-}
-(() => {
-  VegaInternalIconManager.register({
-    'caret-down': Icons['caret-down'],
-  });
-})();
-VegaDatePickerMonthYearDropdownRenderer.monthName = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "host", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "translationSlimmer", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "mode", void 0);
-__decorate$3([
-  MapToComponentField()
-], VegaDatePickerMonthYearDropdownRenderer.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
-
-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;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * VegaDatePickerMonthYearChangeEventController to handle the month year change event emitter
- */
-class VegaDatePickerMonthYearChangeEventController extends VegaSlimmer {
   /**
-   * Register the observer with subject of VegaInternalMonthYearChange.
+   * We need to clear the calendar state when the property or state of the vega-date-picker is completed,
+   *   such as when the user inputs a range value. we can refill the selecting state in calendar according the new value.
    */
-  registerObserver() {
-    this.observer = new Observer(this.canAcceptMonthYearChangeObserver.bind(this), this.monthYearChangeObserverListener.bind(this));
-    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.observer);
+  async componentDidRender() {
+    await this.clearCalendarStateTaskQueue.runTask();
   }
-  /**
-   * Unregister the observer with subject of VegaInternalMonthYearChange.
-   */
-  unregisterObserver() {
-    if (this.observer) {
-      ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalMonthYearChange), this.observer);
-    }
+  /** doOpen */
+  async doOpen() {
+    await this.showCalendar();
+  }
+  /** doClose */
+  async doClose() {
+    await this.hideCalendar();
+  }
+  /** watchDisabled */
+  async watchDisabled() {
+    await this.hideCalendar();
+  }
+  /** watch calendar show state */
+  async watchIsCalendarShow() {
+    await this.clearCalendarSelectingState();
   }
   /**
-   * Get month year summary when month year dropdown is disabled
-   *
-   * @returns {DatePickerMonthYearTypes} the month and year summary
+   * Watch isCalendarShow state change to clear selecting state in calendar.
    */
-  getMonthYearSummaryWithMonthYearDropdownDisabled() {
-    if (this.mode === 'single') {
-      return {
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        month: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().month.innerText,
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        year: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().year.innerText,
-      };
+  async showCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('show');
     }
     else {
-      return [
-        {
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          month: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().month.innerText,
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          year: this.vegaDatePickerCalendarRenderer.getStartMonthYearHeaderRef().year.innerText,
-        },
-        {
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          month: this.vegaDatePickerCalendarRenderer.getEndMonthYearHeaderRef().month.innerText,
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          year: this.vegaDatePickerCalendarRenderer.getEndMonthYearHeaderRef().year.innerText,
-        },
-      ];
+      this.show();
     }
   }
   /**
-   * Get month year summary when month year dropdown is enabled
-   *
-   * @returns {DatePickerMonthYearTypes} the month and year summary
+   * Hide calendar in both mobile and desktop mode.
    */
-  getMonthYearSummaryWithMonthYearDropdownEnabled() {
-    if (this.mode === 'single') {
-      return {
-        month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        this.monthYearDropdownRenderer.getStartDropdownRef().month
-          .selectedSourceKey)],
-        // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-        year: this.monthYearDropdownRenderer.getStartDropdownRef().year.selectedSourceKey,
-      };
+  async hideCalendar() {
+    if (this.isMobileDevice) {
+      await this.vegaDatePickerCalendarRenderer.getMobileModalRef().modal('hide');
     }
     else {
-      return [
-        {
-          month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          this.monthYearDropdownRenderer.getStartDropdownRef().month
-            .selectedSourceKey)],
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          year: this.monthYearDropdownRenderer.getStartDropdownRef().year
-            .selectedSourceKey,
-        },
-        {
-          month: VegaDatePickerMonthYearDropdownRenderer.monthName[parseInt(
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          this.monthYearDropdownRenderer.getEndDropdownRef().month
-            .selectedSourceKey)],
-          // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-          year: this.monthYearDropdownRenderer.getEndDropdownRef().year
-            .selectedSourceKey,
-        },
-      ];
+      this.hide();
     }
   }
   /**
-   * checks if the input can be accepted as month year change observer
+   * Update isCalendarShow state.
    *
-   * @returns {boolean} a boolean value indicating whether the input is acceptable observer.
+   * @param {boolean} isShow - is calendar show
    */
-  canAcceptMonthYearChangeObserver() {
-    return true;
+  updateIsCalendarShowState(isShow) {
+    this.isCalendarShow = isShow;
   }
   /**
-   * Listener for month year change observer
-   *
-   * @param {DatePickerMonthYearTypes} payload - the payload of the event
-   */
-  monthYearChangeObserverListener(payload) {
-    this.monthYearChangeEventEmitter.emit(payload);
+   * Clear selecting state in calendar.
+   */
+  async clearCalendarSelectingState() {
+    if (!this.isCalendarShow) {
+      const calendar = this.vegaDatePickerCalendarRenderer.getCalendarRef();
+      await this.clearCalendarStateTaskQueue.enqueue({
+        /** Clear the calendar selecting state */
+        run: async () => await calendar.reset(),
+      }, false);
+    }
   }
 }
-__decorate$2([
-  MapToComponentField()
-], VegaDatePickerMonthYearChangeEventController.prototype, "host", void 0);
-__decorate$2([
+__decorate$b([
   MapToComponentField()
-], VegaDatePickerMonthYearChangeEventController.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$2([
+], VegaDatePickerCalendarOpenStateController.prototype, "dropdownConfig", void 0);
+__decorate$b([
   MapToComponentField()
-], VegaDatePickerMonthYearChangeEventController.prototype, "mode", void 0);
-__decorate$2([
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$b([
   MapToComponentField()
-], VegaDatePickerMonthYearChangeEventController.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$2([
+], VegaDatePickerCalendarOpenStateController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$b([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarOpenStateController.prototype, "isCalendarShow", void 0);
+__decorate$b([
   MapToComponentField()
-], VegaDatePickerMonthYearChangeEventController.prototype, "monthYearDropdownRenderer", void 0);
-__decorate$2([
-  MapToComponentMethod('componentWillLoad')
-], VegaDatePickerMonthYearChangeEventController.prototype, "registerObserver", null);
-__decorate$2([
-  MapToComponentMethod('disconnectedCallback')
-], VegaDatePickerMonthYearChangeEventController.prototype, "unregisterObserver", null);
+], VegaDatePickerCalendarOpenStateController.prototype, "isMobileDevice", void 0);
+__decorate$b([
+  MapToComponentMethod('componentDidRender')
+], VegaDatePickerCalendarOpenStateController.prototype, "componentDidRender", null);
+__decorate$b([
+  MapToComponentMethod('doOpen')
+], VegaDatePickerCalendarOpenStateController.prototype, "doOpen", null);
+__decorate$b([
+  MapToComponentMethod('doClose')
+], VegaDatePickerCalendarOpenStateController.prototype, "doClose", null);
+__decorate$b([
+  MapToComponentMethod('watchDisabled')
+], VegaDatePickerCalendarOpenStateController.prototype, "watchDisabled", null);
+__decorate$b([
+  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))}.litepicker-backdrop{display:none;background-color:var(--litepicker-mobilefriendly-backdrop-color-bg);opacity:0.3;position:fixed;top:0;right:0;bottom:0;left:0}";
+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$1 = (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);
@@ -2434,19 +1332,16 @@ const VegaDatePicker = class {
     this.monthYearChange = createEvent(this, "monthYearChange", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
-    this.vegaDatePickerMobileController = new VegaDatePickerMobileController();
-    this.vegaDatePickerCalendarController = new VegaDatePickerCalendarController();
-    this.vegaDatePickerZIndexController = new VegaDatePickerZIndexController();
+    this.calendarOpenStateController = new VegaDatePickerCalendarOpenStateController();
     this.vegaDatePickerValueController = new VegaDatePickerValueController();
     this.vegaDatePickerFormatController = new VegaDatePickerFormatController('single');
     this.startInputFormatController = new VegaDatePickerFormatController('rangeStart');
     this.endInputFormatController = new VegaDatePickerFormatController('rangeEnd');
-    this.vegaDatePickerElementAppenderController = new VegaDatePickerElementAppenderController();
     this.vegaDatePickerKeyboardController = new VegaDatePickerKeyboardController();
     this.vegaDatePickerRenderer = new VegaDatePickerRenderer();
     this.vegaDatePickerSingleInputRenderer = new VegaDatePickerSingleInputRenderer();
     this.vegaDatePickerRangeInputRenderer = new VegaDatePickerRangeInputRenderer();
-    this.vegaDatePickerCalendarRenderer = new VegaDatePickerCalendarRenderer();
+    this.vegaDatePickerCalendarRenderer = new VegaDatePickerCalendarRenderer$1();
     this.formFieldController = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -2481,12 +1376,12 @@ const VegaDatePicker = class {
         ].filter(Boolean);
       },
     });
-    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
-    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaClear, VegaMonthYearChange], () => this.vegaDatePickerCalendarRenderer.getCalendarRef());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
-    this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
-    this.vegaDatePickerMonthYearChangeEventController = new VegaDatePickerMonthYearChangeEventController();
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    this.isCalendarShow = false;
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -2607,6 +1502,8 @@ const VegaDatePicker = class {
      */
     this.isDateDisabled = () => false;
   }
+  watchIsCalendarShow() {
+  }
   /*
    * The below method is e2e-test covered in
    * @see{module:vega-date-picker-mode-change}
@@ -2649,8 +1546,6 @@ const VegaDatePicker = class {
   }
   watchDisabled() {
   }
-  watchIsDateDisabled() {
-  }
   /**
    * Invoke this method to close the calendar dropdown
    *    associated with the date picker.
@@ -2676,6 +1571,7 @@ const VegaDatePicker = class {
   }
   get host() { return getElement(this); }
   static get watchers() { return {
+    "isCalendarShow": ["watchIsCalendarShow"],
     "mode": ["watchMode"],
     "value": ["watchValue"],
     "format": ["watchFormat"],
@@ -2684,110 +1580,1405 @@ const VegaDatePicker = class {
     "maxDate": ["watchMaxDate"],
     "allowRepick": ["watchAllowRepick"],
     "showYearMonthDropdowns": ["watchShowYearMonthDropdowns"],
-    "disabled": ["watchDisabled"],
-    "isDateDisabled": ["watchIsDateDisabled"]
+    "disabled": ["watchDisabled"]
   }; }
 };
-__decorate$1([
+__decorate$a([
   InjectVegaGlobalSlimmer()
 ], VegaDatePicker.prototype, "globalSlimmers", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "translationSlimmer", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMobileController", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerCalendarController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerZIndexController", void 0);
-__decorate$1([
+], VegaDatePicker.prototype, "calendarOpenStateController", void 0);
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerFormatController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "startInputFormatController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "endInputFormatController", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerElementAppenderController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRenderer", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerSingleInputRenderer", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerRangeInputRenderer", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "formFieldController", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "changeEventEmitter", void 0);
-__decorate$1([
+__decorate$a([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "inputEventPrevent", void 0);
-__decorate$1([
+__decorate$a([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
-__decorate$1([
-  InjectVegaSlimmer()
-], VegaDatePicker.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
-__decorate$1([
+__decorate$a([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);
 VegaDatePicker.style = vegaDatePickerCss;
 
-const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7);--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px}.litepicker{display:none}.litepicker button{border-width:0px;background:none}.litepicker .container__main{display:flex;flex-direction:column;padding:32px;border-radius:12px;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));box-shadow:var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1))}@media screen and (min-width: 320px) and (max-width: 350px){.litepicker .container__main{padding:12px}}.litepicker .container__months{display:flex}.litepicker .container__months.columns-2{width:100%}@media (min-width: 320px){.litepicker .container__months.columns-2{flex-direction:column}}@media (min-width: 768px){.litepicker .container__months.columns-2{flex-direction:row}}.litepicker .container__months .month-item{box-sizing:content-box;position:relative;width:var(--vega-litepicker-container-width);z-index:1}@media (min-width: 768px){.litepicker .container__months.columns-2 .month-item:first-of-type{padding-right:32px}}@media (min-width: 768px){.litepicker .container__months.columns-2 .month-item:last-of-type{padding-left:32px}}.litepicker .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:\"\"}@media (min-width: 768px){.litepicker .container__months .month-item:nth-child(2)::before{display:block}}.litepicker .container__months .month-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;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){.litepicker .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){.litepicker .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){.litepicker .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}.litepicker .container__months .month-item-header div>.month-item-name{margin-right:5px}.litepicker .container__months .month-item-header .button-previous-month,.litepicker .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;cursor:default}.litepicker .container__months .month-item-header .button-previous-month *,.litepicker .container__months .month-item-header .button-next-month *{pointer-events:none}.litepicker .container__months .month-item-header .button-previous-month>svg,.litepicker .container__months .month-item-header .button-previous-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.litepicker .container__months .month-item-header .button-next-month>svg,.litepicker .container__months .month-item-header .button-next-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.litepicker .container__months .month-item-weekdays-row{display:flex;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){.litepicker .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){.litepicker .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){.litepicker .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.litepicker .container__months .month-item-weekdays-row>div{padding-top:12px;padding-bottom:12px;padding-left:8px;padding-right:8px;display:flex;align-items:center;justify-content:center;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;width:var(--vega-litepicker-day-width)}@media screen and (min-width: 768px) and (max-width: 1023px){.litepicker .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){.litepicker .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){.litepicker .container__months .month-item-weekdays-row>div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.litepicker .container__months .month-item:first-child .button-previous-month{visibility:visible}.litepicker .container__months .month-item:last-child .button-next-month{visibility:visible}.litepicker .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.litepicker .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.litepicker .container__days{display:flex;flex-wrap:wrap;justify-content:flex-start;text-align:center}.litepicker.static-height .container__days{align-content:flex-start;height:calc(var(--vega-litepicker-day-height) * 6)}.litepicker .container__days>div,.litepicker .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:var(--vega-litepicker-day-width)}.litepicker .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;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.litepicker .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){.litepicker .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){.litepicker .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: 768px) and (max-width: 1023px){.litepicker .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){.litepicker .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){.litepicker .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}.litepicker .container__days .day-item:not(.is-locked):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}.litepicker .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.litepicker .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}.litepicker .container__days .day-item.is-locked:hover:before,html.dark .litepicker .container__days .day-item.is-locked:hover:before{border-style:none}.litepicker .container__days .day-item:hover{position:relative}.litepicker .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){.litepicker .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){.litepicker .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){.litepicker .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.litepicker .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))}.litepicker .container__days .day-item:not(.is-locked).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}.litepicker .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}@media screen and (min-width: 768px) and (max-width: 1023px){.litepicker .container__days .day-item.is-start-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){.litepicker .container__days .day-item.is-start-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){.litepicker .container__days .day-item.is-start-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.litepicker .container__days .day-item.is-start-date:hover:before{z-index:2}.litepicker .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))}.litepicker .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.litepicker .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}.litepicker .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}@media screen and (min-width: 768px) and (max-width: 1023px){.litepicker .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){.litepicker .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){.litepicker .container__days .day-item.is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.litepicker .container__days .day-item.is-end-date:hover:before{z-index:2}.litepicker .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))}.litepicker .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.litepicker .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}.litepicker .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.litepicker .container__days .day-item.is-start-date.is-end-date:after,html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after{background:none}.litepicker .container__tooltip{display:none}.litepicker .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.litepicker .container__days .day-item.is-disabled{text-decoration:line-through}.litepicker.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-litepicker-day-height)}.litepicker .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){.litepicker .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){.litepicker .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){.litepicker .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.litepicker .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.litepicker{left:initial !important;top:initial !important;position:initial !important}:host{position:absolute}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.litepicker .month-item-header>div.dropdown-section{display:flex;gap:12px}.litepicker .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.litepicker .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.litepicker .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.litepicker .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.litepicker .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$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 VegaDatePickerCalendarRenderer extends VegaSlimmer {
+  render() {
+    return (h("div", { class: {
+        'calendar': true,
+        'static-height': this.staticHeight,
+      } },
+      h("div", { class: "container__main" },
+        this.renderContainer(),
+        this.renderFooter())));
+  }
+  renderContainer() {
+    const shouldRenderRangeMonth = this.shouldRenderRangeMonth();
+    return (h("div", { class: {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        'container__months': true,
+        'columns-2': shouldRenderRangeMonth,
+      } }, shouldRenderRangeMonth ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
+  }
+  renderRangeMonth() {
+    return (h(Fragment, null,
+      this.monthItemRenderer.render('start'),
+      this.monthItemRenderer.render('end')));
+  }
+  renderFooter() {
+    return (this.clearButton && (h("div", { class: "footer-container" },
+      h("vega-button-link", { ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.clearCalendar();
+          });
+        }, label: this.translationSlimmer.t('Clear') }))));
+  }
+  shouldRenderRangeMonth() {
+    return this.mode === 'range' && !this.isMobileDevice;
+  }
+  clearCalendar() {
+    this.clearEventEmitter.emit();
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "staticHeight", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+
+const MonthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
 
-var __decorate = (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;
+  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;
 };
-const VegaDatePickerCalendar = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.globalSlimmers = {};
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.startDropdownRef = {
+      month: null,
+      year: null,
+    };
+    this.endDropdownRef = {
+      month: null,
+      year: null,
+    };
   }
-  render() {
-    return h(Host, null);
+  render(period, type) {
+    return (h("vega-flex", { gap: 'size-8', justifyContent: 'center' },
+      this.showYearMonthDropdowns
+        ? this.renderMonthDropdownSwitcher(period, type)
+        : this.renderCurrentMonth(period),
+      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;
+    return MonthNames.map((month, index) => {
+      return {
+        key: `${index}`,
+        label: this.translationSlimmer.t(month),
+        disabled: this.isDisabledMonth(currentYear, index + 1),
+      };
+    });
   }
-  get host() { return getElement(this); }
+  isDisabledMonth(year, month) {
+    var _a, _b, _c, _d;
+    const startMonth = (_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.month;
+    const startYear = (_b = this.minCalendarDate) === null || _b === void 0 ? void 0 : _b.year;
+    const endMonth = (_c = this.maxCalendarDate) === null || _c === void 0 ? void 0 : _c.month;
+    const endYear = (_d = this.maxCalendarDate) === null || _d === void 0 ? void 0 : _d.year;
+    return (year < startYear ||
+      year > endYear ||
+      (year === startYear && startMonth > month) ||
+      (year === endYear && endMonth < month));
+  }
+  getYearDropdownOptions() {
+    var _a, _b, _c, _d;
+    const currentYear = new Date().getFullYear();
+    const startYear = ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.year) ||
+      Math.min(((_b = this.maxCalendarDate) === null || _b === void 0 ? void 0 : _b.year) || currentYear, currentYear) -
+        VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR;
+    const endYear = ((_c = this.maxCalendarDate) === null || _c === void 0 ? void 0 : _c.year) ||
+      Math.max(((_d = this.minCalendarDate) === null || _d === void 0 ? void 0 : _d.year) || currentYear, currentYear) +
+        VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR;
+    const years = [];
+    for (let year = startYear; year <= endYear; year++) {
+      years.push({ key: String(year), label: String(year) });
+    }
+    return years;
+  }
+  renderMonthDropdownSwitcher(period, type) {
+    const { month } = period.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;
+        }
+        this.onDropdownShowOrHide(node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
+          const selectedMonth = parseInt(payload.detail);
+          this.setDateBasedOnSelectedMonth(period, selectedMonth, type);
+        });
+      } }, this.renderCurrentMonth(period)));
+  }
+  renderYearDropdownSwitcher(period, type) {
+    const { year } = period.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.renderCurrentYear(period)));
+  }
+  /**
+   * Control ui when dropdown shows or closes
+   *
+   * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
+   */
+  onDropdownShowOrHide(dropdown) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownShow, async () => {
+      await this.closeOpenDropdowns(dropdown);
+      dropdown.classList.add('active');
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownHide, () => {
+      const parentElement = dropdown.closest('.calendar');
+      if (parentElement) {
+        const dropdown = parentElement.querySelector('vega-dropdown.active');
+        dropdown && dropdown.classList.remove('active');
+      }
+    });
+  }
+  renderCurrentMonth(period) {
+    return (h("div", { class: "month-item-name" },
+      h("span", null, this.translationSlimmer.t(period.current.getMonthName())),
+      this.renderDropdownSwitchIcon()));
+  }
+  renderCurrentYear(period) {
+    return (h("div", { class: "month-item-year" },
+      h("span", null, period.current.year),
+      this.renderDropdownSwitchIcon()));
+  }
+  renderDropdownSwitchIcon() {
+    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down') })));
+  }
+  setDateBasedOnSelectedMonth(period, monthIndex, type) {
+    const { year } = period.current;
+    const date = type === 'start' ? new Date(year, monthIndex, 1) : new Date(year, monthIndex - 1, 1);
+    const newPeriod = new MonthPeriod(CalendarDate.from(date));
+    this.currentPeriodController.updateCalendarPeriod(newPeriod);
+  }
+  setDateBasedOnSelectedYear(period, year, type) {
+    const { month } = period.current;
+    const startMonthIndex = month - 1;
+    const endMonthIndex = startMonthIndex - 1;
+    const date = type === 'start' ? new Date(year, startMonthIndex, 1) : new Date(year, endMonthIndex, 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({
+    'caret-down': Icons['caret-down'],
+  });
+})();
+VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR = 10;
+VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR = 10;
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriodController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "showYearMonthDropdowns", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "translationSlimmer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "minCalendarDate", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "yearMonthDropdownProps", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-__decorate([
-  InjectVegaGlobalSlimmer()
-], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);
-__decorate([
-  InjectVegaSlimmer()
-], VegaDatePickerCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+/**
+ * Date picker calendar state base abstract class
+ */
+class VegaDatePickerCalendarStateBaseAbstract extends VegaSlimmer {
+  /** connectedCallback */
+  connectedCallback() {
+    this.initCalendarClearObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeCalendarClearObserver();
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initCalendarClearObserver() {
+    this.calendarClearObserver = new Observer(this.canAcceptClearEvent.bind(this), this.clear.bind(this));
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), this.calendarClearObserver);
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeCalendarClearObserver() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), this.calendarClearObserver);
+  }
+  /**
+   * Check if can accept form reset event
+   *
+   * @returns {boolean} - true if can accept, false otherwise.
+   */
+  canAcceptClearEvent() {
+    return true;
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "connectedCallback", null);
+__decorate$7([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "disconnectedCallback", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Current period controller. */
+class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePickerCalendarStateBaseAbstract {
+  /** connectedCallback */
+  connectedCallback() {
+    super.connectedCallback();
+    this.initCalendarPeriodUpdateObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeCalendarPeriodUpdateObserver();
+  }
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen maxDate changed */
+  watchMaxCalendarDate() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen minDate changed */
+  watchMinCalendarDate() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen currentPeriod changed */
+  watchCurrentPeriod() {
+    this.monthYearChangeEventEmitter.emit(this.getCurrentYearMonthByPeriod());
+  }
+  /** reset current period */
+  resetCurrentPeriod() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Clear current period */
+  clear() {
+    this.setCurrentMonthPeriod();
+  }
+  /**
+   * Goto next month period while single mode.
+   * Goto next two month period while range mode.
+   */
+  gotoNextPeriod() {
+    const period = this.isRangeView()
+      ? this.currentPeriod.next().next()
+      : this.currentPeriod.next();
+    this.updateCalendarPeriod(period);
+  }
+  /**
+   * Goto previous month period while single mode.
+   * Goto previous two month period while range mode.
+   */
+  gotoPreviousPeriod() {
+    const period = this.isRangeView()
+      ? this.currentPeriod.previous().previous()
+      : this.currentPeriod.previous();
+    this.updateCalendarPeriod(period);
+  }
+  /**
+   * set current period
+   *
+   * @param {MonthPeriod} period current period
+   */
+  updateCalendarPeriod(period) {
+    if (!this.currentPeriod || !this.currentPeriod.equal(period)) {
+      this.currentPeriod = period;
+    }
+  }
+  /**
+   * Current period follow below rules:
+   * - Go to the value date month if the value is set.
+   * - Go to the minDate month if only set the minDate and today is before than minDate.
+   * - Go to the minDate month if minDate and maxDate are both set and today is after than maxDate.
+   * - Go to the maxDate month if only set maxDate and today is after than maxDate.
+   * - Go to today month if the value, minDate and maxDate all are empty.
+   */
+  setCurrentMonthPeriod() {
+    let currentDate;
+    const startDate = this.calendarSelection.startDate;
+    if (isCalendarDateType(startDate)) {
+      currentDate = startDate;
+    }
+    else if (this.minCalendarDate &&
+      (this.today.isBefore(this.minCalendarDate) ||
+        (this.maxCalendarDate && this.today.isAfter(this.maxCalendarDate)))) {
+      currentDate = this.minCalendarDate;
+    }
+    else if (this.maxCalendarDate && this.today.isAfter(this.maxCalendarDate)) {
+      currentDate = this.maxCalendarDate;
+    }
+    else {
+      currentDate = this.today;
+    }
+    this.updateCalendarPeriod(new MonthPeriod(currentDate, true, this.timezone));
+  }
+  /**
+   * Check is range view
+   *
+   * @returns {boolean} -
+   */
+  isRangeView() {
+    return this.mode === 'range' && !this.isMobileDevice;
+  }
+  /**
+   * Get current year month by period
+   *
+   * @returns {DatePickerMonthYearTypes} - month and year info
+   */
+  getCurrentYearMonthByPeriod() {
+    const startMonthYear = {
+      month: MonthNames[this.currentPeriod.current.month - 1],
+      year: `${this.currentPeriod.current.year}`,
+    };
+    if (this.mode === 'range') {
+      return [
+        startMonthYear,
+        {
+          month: MonthNames[this.currentPeriod.endDate.month - 1],
+          year: `${this.currentPeriod.endDate.year}`,
+        },
+      ];
+    }
+    else {
+      return startMonthYear;
+    }
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initCalendarPeriodUpdateObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser, this.setCurrentMonthPeriod.bind(this));
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeCalendarPeriodUpdateObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser);
+  }
+}
+__decorate$6([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "today", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "mode", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "format", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "timezone", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "minCalendarDate", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "maxCalendarDate", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "isMobileDevice", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
+__decorate$6([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "disconnectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "componentWillLoad", null);
+__decorate$6([
+  MapToComponentMethod('watchMaxCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMaxCalendarDate", null);
+__decorate$6([
+  MapToComponentMethod('watchMinCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMinCalendarDate", null);
+__decorate$6([
+  MapToComponentMethod('watchCurrentPeriod')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchCurrentPeriod", null);
+__decorate$6([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "resetCurrentPeriod", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Today controller */
+class VegaDatePickerCalendarTodayController extends VegaSlimmer {
+  /** connectedCallback */
+  connectedCallback() {
+    this.setToday();
+  }
+  /** Listen time zone changed */
+  watchTimezone() {
+    this.setToday();
+  }
+  /**
+   * Sets the current date based on the provided timezone or the system timezone if none is provided.
+   */
+  setToday() {
+    this.today = CalendarDate.from(new Date(), this.timezone);
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarTodayController.prototype, "timezone", void 0);
+__decorate$5([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarTodayController.prototype, "today", void 0);
+__decorate$5([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarTodayController.prototype, "connectedCallback", null);
+__decorate$5([
+  MapToComponentMethod('watchTimezone')
+], VegaDatePickerCalendarTodayController.prototype, "watchTimezone", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.monthViewGenerator = new MonthViewGenerator();
+  }
+  render(type) {
+    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.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() }));
+  }
+  renderWeek(periodView) {
+    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
+      return (h("div", { key: weekDay }, this.translationSlimmer.t(`${weekDay}-short`)));
+    })));
+  }
+  renderDays(periodView, period) {
+    return (h("vega-grid", { class: "container__days", column: '7-auto', row: this.staticHeight ? 6 : '6-auto' }, periodView.dateItems
+      .flat()
+      .filter((day) => day.month <= period.current.month || day.year < period.current.year)
+      .map((day) => this.renderDay(day, period))));
+  }
+  renderDay(day, period) {
+    const isCurrentMonth = day.month === period.current.month;
+    const isLockedDate = this.isBeforeMinDate(day) || this.isAfterMaxDate(day);
+    const currentRangeDates = this.getCurrentRangeDates();
+    const isDisabled = this.isDateDisabled(day.toDate());
+    const isInRange = day.isAfter(currentRangeDates[0]) && day.isBefore(currentRangeDates[1]);
+    const canInterActive = isCurrentMonth && !isLockedDate && !isDisabled;
+    return (h("div", { key: `${day.month}-${day.date}`, class: isCurrentMonth && {
+        'day-item': true,
+        'is-today': day.equal(this.today),
+        'is-start-date': day.equal(currentRangeDates[0]),
+        'is-in-range': isInRange,
+        'is-end-date': day.equal(currentRangeDates[1]),
+        'is-locked': isLockedDate,
+        'is-disabled': isDisabled,
+      }, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: () => canInterActive && this.selectionController.onDayClick(day), 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": day.date, tabIndex: canInterActive ? 0 : -1 }, isCurrentMonth ? day.date : ''));
+  }
+  getCurrentRangeDates() {
+    const startDate = this.calendarSelection.startDate;
+    const endDate = this.calendarSelection.endDate;
+    if (isCalendarDateType(startDate) && !endDate && this.hoverDate) {
+      return this.hoverDate.isBefore(startDate)
+        ? [this.hoverDate, startDate]
+        : [startDate, this.hoverDate];
+    }
+    else if (!isCalendarDateType(startDate) && endDate && this.hoverDate) {
+      return this.hoverDate.isBefore(endDate) ? [this.hoverDate, endDate] : [endDate, this.hoverDate];
+    }
+    else {
+      return [startDate, endDate];
+    }
+  }
+  isBeforeMinDate(day) {
+    return this.minCalendarDate && day.isBefore(this.minCalendarDate);
+  }
+  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([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "currentPeriod", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "today", void 0);
+__decorate$4([
+  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([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "hoverDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "minCalendarDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "selectionController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "calendarSelection", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
+
+/** Calendar selection object. */
+class CalendarSelection {
+  constructor(startDate, endDate, mode) {
+    this.startDate = startDate;
+    this.endDate = endDate;
+    this.mode = mode;
+    if (this.mode === 'range' && this.startDate && this.endDate && this.startDate.isAfter(this.endDate)) {
+      const startDate = this.startDate;
+      this.startDate = this.endDate;
+      this.endDate = startDate;
+    }
+  }
+  /**
+   * Creates a CalendarSelection from a selection value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - The selection value.
+   * @param {DatePickerModeType} mode - The mode of the date picker.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {CalendarSelection} - The created CalendarSelection instance.
+   */
+  static fromSelection(selection, mode, format) {
+    let startDate = null;
+    let endDate = null;
+    if (this.isValidSelection(selection, mode, format)) {
+      if (mode === 'single' && typeof selection === 'string') {
+        const date = CalendarDate.fromString(selection, format);
+        startDate = date;
+        endDate = date;
+      }
+      else if (mode === 'range' && Array.isArray(selection)) {
+        startDate = CalendarDate.fromString(selection[0], format);
+        endDate = CalendarDate.fromString(selection[1], format);
+      }
+    }
+    return new CalendarSelection(startDate, endDate, mode);
+  }
+  /**
+   * Check if the selection is valid.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - The selection value.
+   * @param {DatePickerModeType} mode - The mode of the date picker.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {boolean} - True if the selection is valid, false otherwise.
+   */
+  static isValidSelection(selection, mode, format) {
+    let isValid;
+    switch (mode) {
+      case 'single':
+        isValid = this.isValidDateString(selection, format);
+        break;
+      case 'range':
+        isValid =
+          Array.isArray(selection) &&
+            selection.length === 2 &&
+            selection.every((item) => this.isValidDateString(item, format));
+        break;
+    }
+    if (!isValid) {
+      LogUtility.warn(`Invalid date picker calendar selection ${selection} for ${mode} mode`);
+    }
+    return isValid;
+  }
+  /**
+   * Check if a date string is valid.
+   *
+   * @param {Nullable<string>} dateString - The date string to check.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {boolean} - True if the date string is valid, false otherwise.
+   */
+  static isValidDateString(dateString, format) {
+    return ((dateString && typeof dateString === 'string' && !!CalendarDate.fromString(dateString, format)) ||
+      dateString === '');
+  }
+  /**
+   * Gets the selection value based on the current calendar selection.
+   *
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {DatePickerValueType<DatePickerModeType>} - The selection value.
+   */
+  toSelection(format) {
+    var _a, _b, _c;
+    if (this.mode === 'range') {
+      return [((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.toString(format)) || '', ((_b = this.endDate) === null || _b === void 0 ? void 0 : _b.toString(format)) || ''];
+    }
+    else {
+      return ((_c = this.startDate) === null || _c === void 0 ? void 0 : _c.toString(format)) || '';
+    }
+  }
+  /**
+   * Checks if this calendar selection is equal to another.
+   *
+   * @param {CalendarSelection} other - The other calendar selection to compare with.
+   * @returns {boolean} - True if both selections are equal, false otherwise.
+   */
+  equals(other) {
+    if (!other)
+      return false;
+    const isStartDateEqual = this.startDate && other.startDate
+      ? this.startDate.equal(other.startDate)
+      : this.startDate === this.endDate;
+    const isEndDateEqual = this.endDate && other.endDate
+      ? this.endDate.equal(other.endDate)
+      : this.endDate === other.endDate;
+    return isStartDateEqual && isEndDateEqual;
+  }
+  /**
+   * Checks if the calendar selection is completed.
+   *
+   * @returns {boolean} - True if the selection is completed, false otherwise.
+   */
+  isCompleted() {
+    return (isCalendarDateType(this.startDate) &&
+      (this.mode === 'range' ? isCalendarDateType(this.endDate) : true));
+  }
+  /**
+   * Checks if the calendar selection is empty.
+   *
+   * @returns {boolean} - True if the selection is empty, false otherwise.
+   */
+  isEmpty() {
+    return !isCalendarDateType(this.startDate) && !isCalendarDateType(this.endDate);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Selection controller */
+class VegaDatePickerCalendarSelectionController extends VegaDatePickerCalendarStateBaseAbstract {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setCalendarSelectionBySelection(this.selection);
+  }
+  /**
+   * Listen selection changed
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} newSelection - newSelection.
+   */
+  watchSelection(newSelection) {
+    const isChangeByUser = !this.isSameSelection(newSelection, this.calendarSelection.toSelection(this.format));
+    // If the user changes the selection via property, we need to update the current period and set the calendar selection.
+    //   otherwise, we don't need to update.
+    if (isChangeByUser) {
+      this.setCalendarSelectionBySelection(newSelection);
+      this.notifyPeriodChange();
+    }
+  }
+  /** Reset selecting range date */
+  resetRange() {
+    const usePrevious = !this.calendarSelection.isCompleted() &&
+      !this.calendarSelection.isEmpty() &&
+      !!this.previousCalendarSelection;
+    this.setCalendarSelectionBySelection(usePrevious ? this.previousCalendarSelection.toSelection(this.format) : this.selection);
+    this.hoverDate = null;
+  }
+  /** Listen calendarSelection changed */
+  watchCalendarSelection() {
+    if (this.calendarSelection.isCompleted() || this.calendarSelection.isEmpty()) {
+      this.setSelection(this.calendarSelection.toSelection(this.format));
+    }
+  }
+  /** Clear the current selection */
+  clear() {
+    this.setCalendarSelectionByRange(null, null);
+    this.hoverDate = null;
+  }
+  /**
+   * Listen the day be clicked.
+   *
+   * @param {CalendarDate} day - clicked day.
+   */
+  onDayClick(day) {
+    if (this.mode === 'single') {
+      this.setCalendarSelectionByRange(day, day);
+    }
+    else if (this.mode === 'range') {
+      if (this.calendarSelection.startDate && !this.calendarSelection.endDate) {
+        // It second click of range mode, we should set min date as start and max date as end.
+        // As also, the select action have completed, we should set the value same time.
+        this.setCalendarSelectionByRange(this.calendarSelection.startDate, day);
+      }
+      else if (!this.calendarSelection.startDate && this.calendarSelection.endDate) {
+        this.setCalendarSelectionByRange(this.calendarSelection.endDate, day);
+      }
+      else {
+        // It first click of range mode, we only set start date.
+        this.setCalendarSelectionByRange(day, null);
+      }
+      this.hoverDate = null;
+    }
+  }
+  /**
+   * Listen the day be hovered.
+   * Need set the hoverDate after the first click in range mode.
+   * For repick, we should clear start or end date according the input which have been clicked.
+   * Note: repick is working at hover any day in range.
+   *
+   * @param {CalendarDate} day - hovered day.
+   */
+  onDayHover(day) {
+    const clickedInputType = this.allowRepickController.getRepickType();
+    if (clickedInputType && this.mode === 'range' && this.calendarSelection.isCompleted()) {
+      clickedInputType === 'start'
+        ? this.setCalendarSelectionByRange(null, this.calendarSelection.endDate)
+        : this.setCalendarSelectionByRange(this.calendarSelection.startDate, null);
+    }
+    if (!this.calendarSelection.isEmpty() && !this.calendarSelection.isCompleted()) {
+      this.hoverDate = day;
+    }
+  }
+  /**
+   * Sets calendar selection for date picker calendar based on selection value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - selection.
+   */
+  setCalendarSelectionBySelection(selection) {
+    const calendarSelection = CalendarSelection.fromSelection(selection, this.mode, this.format);
+    if (this.calendarSelection &&
+      (this.calendarSelection.isCompleted() || this.calendarSelection.isEmpty())) {
+      this.previousCalendarSelection = this.calendarSelection;
+    }
+    if (!calendarSelection.equals(this.calendarSelection)) {
+      this.calendarSelection = calendarSelection;
+    }
+    // we should reset the selection while calendarSelection changed from inner,
+    //     such as reversed range correction.
+    this.setSelection(calendarSelection.toSelection(this.format));
+  }
+  /**
+   * Sets calendar selection for date picker calendar based on range dates.
+   *
+   * @param {Nullable<CalendarDate>} startDate - startDate.
+   * @param {Nullable<CalendarDate>} endDate - endDate.
+   */
+  setCalendarSelectionByRange(startDate, endDate) {
+    this.calendarSelection = new CalendarSelection(startDate, endDate, this.mode);
+  }
+  /**
+   * Sets selection for date picker calendar and emits a change event with the new value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - selection.
+   */
+  setSelection(selection) {
+    if (!this.isSameSelection(selection, this.selection)) {
+      this.selection = selection;
+      this.vegaSelectionChangeEventEmitter.emit(this.selection);
+    }
+  }
+  /**
+   * Check the previous selection and current selection is same.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} previous - New selection.
+   * @param {DatePickerValueType<DatePickerModeType>} current - Old selection.
+   * @returns {boolean} -
+   */
+  isSameSelection(previous, current) {
+    if (this.mode === 'range' && Array.isArray(previous) && Array.isArray(current)) {
+      return isArrayEqual(previous, current);
+    }
+    return previous === current;
+  }
+  /** Notify to update current period */
+  notifyPeriodChange() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser), {});
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "mode", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "format", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "selection", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "calendarSelection", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "hoverDate", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "clearEventEmitter", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "vegaSelectionChangeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
+__decorate$3([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);
+__decorate$3([
+  MapToComponentMethod('watchSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchSelection", null);
+__decorate$3([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarSelectionController.prototype, "resetRange", null);
+__decorate$3([
+  MapToComponentMethod('watchCalendarSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchCalendarSelection", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Current min and max calendar date controller. */
+class VegaDatePickerCalendarMinMaxDateController extends VegaSlimmer {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setMaxCalendarDate();
+    this.setMinCalendarDate();
+  }
+  /** Listen maxDate changed */
+  watchMaxDate() {
+    this.setMaxCalendarDate();
+  }
+  /** Listen minDate changed */
+  watchMinDate() {
+    this.setMinCalendarDate();
+  }
+  /** Set maxCalendarDate */
+  setMaxCalendarDate() {
+    this.maxCalendarDate = CalendarDate.fromString(this.maxDate, this.format);
+  }
+  /** Set minCalendarDate */
+  setMinCalendarDate() {
+    this.minCalendarDate = CalendarDate.fromString(this.minDate, this.format);
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxDate", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minDate", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "format", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxCalendarDate", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minCalendarDate", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "componentWillLoad", null);
+__decorate$2([
+  MapToComponentMethod('watchMaxDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMaxDate", null);
+__decorate$2([
+  MapToComponentMethod('watchMinDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMinDate", null);
+
+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;
+};
+/** Allow repick controller. */
+class VegaDatePickerCalendarAllowRepickController extends VegaSlimmer {
+  /**
+   * Trigger repick
+   *
+   * @param {DatePickerCalendarRepickType} type - The type of repick.
+   */
+  triggerRepick(type) {
+    this.repickType = type;
+    if (type === 'end') {
+      this.setEndDateAsCurrentMonthPeriod();
+    }
+  }
+  /** while selection completed, we should clear repick type */
+  watchCalendarSelection() {
+    if (this.calendarSelection.isCompleted()) {
+      this.repickType = null;
+    }
+  }
+  /**
+   * Get triggered repick type.
+   *
+   * @returns {DatePickerCalendarRepickType} - Repick type.
+   */
+  getRepickType() {
+    return this.repickType;
+  }
+  /**
+   * Set end date as current period.
+   *  - while start date and end date in same month of year, we set startDate as current period
+   *  - while in range mobile device, since we only render on month, so set the end date at current period
+   *  - while in range desktop devide, we set previous month as current period to keep end date is in second month.
+   */
+  setEndDateAsCurrentMonthPeriod() {
+    const startDate = this.calendarSelection.startDate;
+    const endDate = this.calendarSelection.endDate;
+    if (endDate) {
+      const date = isCalendarDateType(startDate) && startDate.compare(endDate).inMonth
+        ? startDate
+        : this.isMobileDevice
+          ? endDate
+          : endDate.add(0, -1);
+      this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(date));
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "calendarSelection", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "isMobileDevice", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "currentPeriodController", void 0);
+__decorate$1([
+  MapToComponentMethod('triggerRepick')
+], VegaDatePickerCalendarAllowRepickController.prototype, "triggerRepick", null);
+__decorate$1([
+  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 = (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;
+};
+const VegaDatePickerCalendar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClear = createEvent(this, "vegaClear", 7);
+    this.clear = createEvent(this, "clear", 7);
+    this.vegaMonthYearChange = createEvent(this, "vegaMonthYearChange", 7);
+    this.monthYearChange = createEvent(this, "monthYearChange", 7);
+    this.vegaSelectionChange = createEvent(this, "vegaSelectionChange", 7);
+    this.selectionChange = createEvent(this, "selectionChange", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDatePickerCalendarRenderer();
+    this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.todayController = new VegaDatePickerCalendarTodayController();
+    this.selectionController = new VegaDatePickerCalendarSelectionController();
+    this.minMaxDateController = new VegaDatePickerCalendarMinMaxDateController();
+    this.currentPeriodController = new VegaDatePickerCalendarCurrentPeriodController();
+    this.yearMonthSwitcherRender = new VegaDatePickerCalendarYearMonthSwitcherRenderer();
+    this.allowRepickController = new VegaDatePickerCalendarAllowRepickController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clearEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaClear);
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaMonthYearChange);
+    this.vegaSelectionChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaSelectionChange);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    /**
+     * Renders the calendar picker in different sizes. Defaults to regular size
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.size = 'regular';
+    /**
+     * Specifies the selection mode of the date picker calendar.
+     *
+     *  - Use `single` to allow selecting a single date.
+     *  - Use `range` to allow selecting a date range.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.mode = 'single';
+    /**
+     * Specifies the selected date or date range in the date picker calendar.
+     *
+     * @vegaVersion 2.72.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.selection = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Specifies the desired date format.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.format = 'MM/DD/YYYY';
+    /**
+     * Specifies whether to display the clear button when the calendar is shown.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.clearButton = false;
+    /**
+     * Specifies the calendar is static height.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.staticHeight = false;
+    /**
+     * Determines whether to show months and years dropdown in date picker calendar
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.showYearMonthDropdowns = false;
+    /**
+     * Determines whether the year or month dropdown position is calculated relative to the screen.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.yearMonthDropdownProps = {};
+    /**
+     * Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * Return `true` to disable the cell, or false to keep it selectable.
+     * Default behavior: always returns `false` (no cells are disabled).
+     *
+     * @param date - The `Date` object for the cell being evaluated.
+     * @returns `true` if the cell should be disabled; otherwise `false`.
+     * @vegaVersion 2.72.0
+     */
+    this.isDateDisabled = () => false;
+  }
+  watchCurrentPeriod() {
+  }
+  watchCalendarSelection() {
+  }
+  watchMaxCalendarDate() {
+  }
+  watchMinCalendarDate() {
+  }
+  watchSelection() {
+  }
+  watchMinDate() {
+  }
+  watchMaxDate() {
+  }
+  watchTimezone() {
+  }
+  /**
+   * Invoke this method to reset calendar to its initial state,
+   * 	it include reset to current value and reset the current period.
+   * @vegaVersion 2.72.0
+   */
+  async reset() {
+  }
+  /**
+   * Invoke this method to trigger repick.
+   *   The param `type` is distinguishing the start date or end date can be repick.
+   * @vegaVersion 2.72.0
+   */
+  async triggerRepick(type) {
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        [this.size]: true,
+        [this.mode]: true,
+        mobile: this.isMobileDevice,
+      } }, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "currentPeriod": ["watchCurrentPeriod"],
+    "calendarSelection": ["watchCalendarSelection"],
+    "maxCalendarDate": ["watchMaxCalendarDate"],
+    "minCalendarDate": ["watchMinCalendarDate"],
+    "selection": ["watchSelection"],
+    "minDate": ["watchMinDate"],
+    "maxDate": ["watchMaxDate"],
+    "timezone": ["watchTimezone"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "todayController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "minMaxDateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "currentPeriodController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "yearMonthSwitcherRender", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "allowRepickController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "clearEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "vegaSelectionChangeEventEmitter", void 0);
 VegaDatePickerCalendar.style = vegaDatePickerCalendarCss;
 
 export { VegaDatePicker as vega_date_picker, VegaDatePickerCalendar as vega_date_picker_calendar };