@heartlandone/vega 2.0.0-temp-test-0.3 → 2.0.0

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

@@ -0,0 +1,1903 @@
+import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-c3505689.js';
+import { s as sanitizeVegaComponent } from './component-e4eb3f14.js';
+import { i as isDateStr, c as compareIsSameOrBefore, a as compareIsBefore, b as compareIsAfter } from './date-f031fe13.js';
+import { I as InjectVegaSlimmer } from './global-slimmer-registry-b91c742d.js';
+import { I as InjectVegaGlobalSlimmer } from './inject-vega-global-slimmer-c3f84156.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-862c5c79.js';
+import { a as MapToComponentField, V as VegaSlimmer, M as MapToComponentMethod } from './vega-slimmer-ce2e45d1.js';
+import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-6e5294cb.js';
+import { D as DomNodeSubjectObserverFactory, c as createEventEmitSlimmer } from './eventEmitSlimmer-d605ac81.js';
+import { V as VegaClick, g as VegaChange } from './internalVegaEventManager-efa77ebb.js';
+import { V as VegaIconManager } from './iconManager-48bebc43.js';
+import { L as LogUtility } from './log-a824be80.js';
+import { b as isArrayEqual } from './array-e1522673.js';
+import { c as createCommonjsModule } from './_commonjsHelpers-9943807e.js';
+import { Z as ZIndexManager } from './zIndexManager-ea603c97.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-bb1e9570.js';
+import { C as ChangeManager } from './changeManager-935d420b.js';
+import { a as StringMaskStrategy, S as StringInputFormatter } from './stringMaskStrategy-c463fad7.js';
+import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-d4cbab06.js';
+import { K as KeyboardManagerSlimmer } from './keyboardManagerSlimmer-69d10dfc.js';
+import { C as ComponentLoadRequired } from './componentLoadRequired-ec47331b.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-65a53b20.js';
+import './string-be824360.js';
+import './misc-c21a85c9.js';
+import './dynamic-slimmer-c8ad78de.js';
+import './pageResizeObserverSlimmer-b476bb1f.js';
+import './breakpoints-900a4c99.js';
+import './ui-535c5fb3.js';
+import './number-400b3bf2.js';
+import './typeGuard-5e282437.js';
+import './typography-03d285b4.js';
+import './elementAppender-4e1e8de0.js';
+import './responsiveFormatFacade-e91e14ac.js';
+import './keyboardManager-0a038e77.js';
+
+/**
+ * A rule that checks if date is empty or not
+ *
+ * @implements {FormFieldValidationRule<string | string[]>}
+ */
+class DateRequiredRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ mode: 'single' | 'range' }} config - config including the mode for date value
+   * @param {'single' | 'range'} config.mode - The mode for date value
+   */
+  constructor(config) {
+    this.config = config;
+  }
+  /**
+   * If the input is not valid for the current mode, throw an error.
+   * Otherwise, return an object with a boolean indicating whether the input is valid and a message to display to the user
+   *
+   * @param {string | string[]} input - The value of the input field.
+   * @returns {EvaluateResult} An object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Invalid date value ${input} for mode ${this.config.mode}`);
+    }
+    let isValid;
+    switch (this.config.mode) {
+      case 'single':
+        isValid = isDateStr(input);
+        break;
+      case 'range':
+        isValid = Array.isArray(input) && input.length === 2 && input.every(isDateStr);
+        break;
+    }
+    return {
+      isValid,
+      message: isValid ? '' : 'This field is required',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * If the input is undefined or null, return true. Otherwise, if the mode is 'single', return true if
+   * the input is a string. Otherwise, if the mode is 'range', return true if the input is an array. Otherwise, return false.
+   *
+   * @param {unknown} input - The input value that the user has entered.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    if (input === undefined || input === null)
+      return true;
+    if (!this.config.mode) {
+      throw new Error(`Unexpected type of mode: ${this.config.mode}`);
+    }
+    switch (this.config.mode) {
+      case 'single':
+        return typeof input === 'string';
+      case 'range':
+        return Array.isArray(input);
+      default:
+        return false;
+    }
+  }
+}
+
+/**
+ * A rule that checks if start date is before than end date
+ */
+class DateRangeRule {
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * Check if the start date is before than end date
+   *
+   * @param {string | string[]} input - The value of the date picker.
+   * @returns  {EvaluateResult} - The result of the evaluation.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    const startDate = new Date(input[0]);
+    const endDate = new Date(input[1]);
+    const isValid = compareIsSameOrBefore(startDate, endDate);
+    return {
+      isValid: isValid,
+      message: isValid ? '' : 'The end date should be later than start date',
+    };
+  }
+  /**
+   * If the input is an array of two strings, and each string is a valid date, then return true.
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return Array.isArray(input) && input.length === 2 && input.every(isDateStr);
+  }
+}
+
+/**
+ * A rule that checks if date is in minDate and maxDate range
+ */
+class MinAndMaxDateRule {
+  /**
+   * It creates a new instance of the class with the given config.
+   *
+   * @param {{ minDate: string; maxDate: string }} config - config including the minDate and the maxDate
+   * @param {string} config.minDate - The minDate
+   * @param {string} config.maxDate - The maxDate
+   */
+  constructor(config) {
+    /**
+     *  Evaluate if single date is within the min and max date range
+     *
+     * @param {string} input A single date string
+     * @returns  {EvaluateResult}An object with two properties: isValid and message.
+     */
+    this.evaluateSingleDate = (input) => {
+      const singleDate = new Date(input);
+      if (this.minDate && compareIsBefore(singleDate, this.minDate)) {
+        return this.invalidResult(`The date should be later than ${this.config.minDate}`);
+      }
+      if (this.maxDate && compareIsAfter(singleDate, this.maxDate)) {
+        return this.invalidResult(`The date should be earlier than ${this.config.maxDate}`);
+      }
+      return this.validResult();
+    };
+    /**
+     * Evaluate if start date or end date are within the min and max date range
+     *
+     * @param {string[]} input includes start date or end date
+     * @returns  {EvaluateResult}An object with two properties: isValid and message.
+     */
+    this.evaluateRangeDates = (input) => {
+      const startDate = new Date(input[0]);
+      const endDate = new Date(input[1]);
+      if (this.minDate && compareIsBefore(startDate, this.minDate)) {
+        return this.invalidResult(`The start date should be later than ${this.config.minDate}`);
+      }
+      if (this.maxDate && compareIsAfter(startDate, this.maxDate)) {
+        return this.invalidResult(`The start date should be earlier than ${this.config.maxDate}`);
+      }
+      if (endDate && this.maxDate && compareIsAfter(endDate, this.maxDate)) {
+        return this.invalidResult(`The end date should be earlier than ${this.config.maxDate}`);
+      }
+      return this.validResult();
+    };
+    /**
+     * Generate an invalid result
+     *
+     * @param {string} message Error message
+     * @returns {EvaluateResult} invalid validation result
+     */
+    this.invalidResult = (message) => ({
+      isValid: false,
+      message,
+    });
+    /**
+     * Generate a valid result
+     *
+     * @returns {EvaluateResult} invalid validation result
+     */
+    this.validResult = () => ({
+      isValid: true,
+      message: '',
+    });
+    this.config = config;
+    this.minDate = config.minDate ? new Date(config.minDate) : null;
+    this.maxDate = config.maxDate ? new Date(config.maxDate) : null;
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the input is a string, check if it's within the min and max date range.
+   * If the input is an array, check if the start date is within the min and max date range, and if the end date is within the
+   * max date range
+   *
+   * @param {string | string[]} input - The value of the date picker.
+   * @returns  {EvaluateResult} - The result of the evaluation.
+   */
+  evaluate(input) {
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Unexpected type of input: ${typeof input}: ${input}`);
+    }
+    if (typeof input === 'string') {
+      return this.evaluateSingleDate(input);
+    }
+    else {
+      return this.evaluateRangeDates(input);
+    }
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * It returns true if the input is a string or an array of two strings, and each string is a valid date string
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean value.
+   */
+  isAcceptedInputType(input) {
+    return ((typeof input === 'string' && isDateStr(input)) ||
+      (Array.isArray(input) && input.length === 2 && input.every(isDateStr)));
+  }
+}
+
+const Icons = {
+  'chevron-left': {
+    icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1.2937 7.29414C0.903076 7.68477 0.903076 8.31914 1.2937 8.70977L7.2937 14.7098C7.68433 15.1004 8.3187 15.1004 8.70933 14.7098C9.09995 14.3191 9.09995 13.6848 8.70933 13.2941L3.41558 8.00039L8.7062 2.70664C9.09683 2.31602 9.09683 1.68164 8.7062 1.29102C8.31558 0.900391 7.6812 0.900391 7.29058 1.29102L1.29058 7.29102L1.2937 7.29414Z" fill="currentColor"/></svg>`,
+  },
+  'chevron-right': {
+    icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M10.7063 7.29414C11.0969 7.68477 11.0969 8.31914 10.7063 8.70977L4.70627 14.7098C4.31565 15.1004 3.68127 15.1004 3.29065 14.7098C2.90002 14.3191 2.90002 13.6848 3.29065 13.2941L8.5844 8.00039L3.29377 2.70664C2.90315 2.31602 2.90315 1.68164 3.29377 1.29102C3.6844 0.900391 4.31877 0.900391 4.7094 1.29102L10.7094 7.29102L10.7063 7.29414Z" fill="currentColor"/></svg>`,
+  },
+  'calendar': {
+    icon: `<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_41275_12898)"><path d="M5.75 2H10.25V0.75C10.25 0.335938 10.5844 0 11 0C11.4156 0 11.75 0.335938 11.75 0.75V2H13C14.1031 2 15 2.89531 15 4V14C15 15.1031 14.1031 16 13 16H3C1.89531 16 1 15.1031 1 14V4C1 2.89531 1.89531 2 3 2H4.25V0.75C4.25 0.335938 4.58437 0 5 0C5.41563 0 5.75 0.335938 5.75 0.75V2ZM2.5 7.75H5V6H2.5V7.75ZM2.5 9.25V11.25H5V9.25H2.5ZM6.5 9.25V11.25H9.5V9.25H6.5ZM11 9.25V11.25H13.5V9.25H11ZM13.5 6H11V7.75H13.5V6ZM13.5 12.75H11V14.5H13C13.275 14.5 13.5 14.275 13.5 14V12.75ZM9.5 12.75H6.5V14.5H9.5V12.75ZM5 12.75H2.5V14C2.5 14.275 2.72375 14.5 3 14.5H5V12.75ZM9.5 6H6.5V7.75H9.5V6Z" fill="currentColor"/></g><defs><clipPath id="clip0_41275_12898"><rect width="14" height="16" fill="white" transform="translate(1)"/></clipPath></defs></svg>`,
+  },
+};
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderInputPrefix = () => {
+      return (h("div", { class: "vega-input-prefix" },
+        h("vega-icon", { icon: "calendar", color: "text-secondary" })));
+    };
+    /**
+     * return true if input is enabled, otherwise false
+     * on mobile, the input is ready-only to avoid virtual keyboard
+     */
+    this.isInputEnabled = () => {
+      return !this.readOnly && !this.vegaDatePickerMobileController.getIsMobileDevice();
+    };
+    this.renderLabel = () => {
+      return (this.label && (h("vega-field-label", { ref: (e) => {
+          /* istanbul ignore next */
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, () => {
+            this.focusInput();
+          });
+        }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-click-label-focus-input-e2e}
+     */
+    /* istanbul ignore next */
+    this.focusInput = () => {
+      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();
+    };
+  }
+  getDatePickerContainer() {
+    return this.datePickerContainer;
+  }
+  render() {
+    const classNames = [
+      'vega-input-container',
+      this.size,
+      `${this.mode}-mode`,
+      this.vegaDatePickerMobileController.getIsMobileDevice()
+        ? /* 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())));
+  }
+}
+(() => {
+  VegaIconManager.register({ calendar: Icons.calendar });
+})();
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "disabled", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "size", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "mode", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "label", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "required", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "readOnly", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "autoValidation", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "host", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$c([
+  MapToComponentField()
+], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+
+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;
+};
+/** 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$b([
+  MapToComponentField()
+], VegaDatePickerMobileController.prototype, "host", void 0);
+__decorate$b([
+  MapToComponentField()
+], VegaDatePickerMobileController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerSingleInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.render = () => {
+      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();
+          } })));
+    };
+    this.getSinglePlaceholder = () => {
+      if (!this.placeholder) {
+        return this.format;
+      }
+      if (typeof this.placeholder !== 'string') {
+        LogUtility.warn('The placeholder should be a string');
+        return this.format;
+      }
+      return this.placeholder;
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-single-date-change}
+     */
+    this.onSingleDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (isDateStr(date)) {
+        this.vegaDatePickerValueController.setValue(this.vegaDatePickerFormatController.formatDate(date));
+      }
+      else {
+        this.vegaDatePickerValueController.setValue('');
+        this.singleDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+  }
+  componentWillRender() {
+    this.oldSingleDateInputRef = this.singleDateInputRef;
+  }
+  getSingleDateInputRef() {
+    return this.singleDateInputRef;
+  }
+  getOldSingleDateInputRef() {
+    return this.oldSingleDateInputRef;
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "disabled", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "placeholder", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "format", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerValueController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$a([
+  MapToComponentField()
+], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$a([
+  MapToComponentMethod('componentWillRender')
+], VegaDatePickerSingleInputRenderer.prototype, "componentWillRender", 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 VegaDatePickerRangeInputRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.render = () => {
+      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("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 }))));
+    };
+    this.getRangePlaceholder = () => {
+      if (!this.placeholder) {
+        return ['Start Date', 'End Date'];
+      }
+      if (!Array.isArray(this.placeholder) || this.placeholder.length !== 2) {
+        LogUtility.warn('The placeholder should be an array, including start and end placeholder');
+        return ['Start Date', 'End Date'];
+      }
+      return this.placeholder;
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-start-end-date-change}
+     */
+    this.onStartDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (isDateStr(date)) {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerFormatController.formatDate(date),
+          this.vegaDatePickerValueController.getValue()[1],
+        ]);
+      }
+      else {
+        this.vegaDatePickerValueController.setValue([
+          '',
+          this.vegaDatePickerValueController.getValue()[1],
+        ]);
+        this.startDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:vega-date-picker-start-end-date-change}
+     */
+    this.onEndDateChange = (e) => {
+      const currentTarget = e.currentTarget;
+      const date = currentTarget.value;
+      if (isDateStr(date)) {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerValueController.getValue()[0],
+          this.vegaDatePickerFormatController.formatDate(date),
+        ]);
+      }
+      else {
+        this.vegaDatePickerValueController.setValue([
+          this.vegaDatePickerValueController.getValue()[0],
+          '',
+        ]);
+        this.endDateInputRef.value = '';
+        LogUtility.warn('The date value of ${date} is invalid');
+      }
+    };
+  }
+  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;
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "disabled", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "placeholder", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerValueController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$9([
+  MapToComponentMethod('componentWillRender')
+], VegaDatePickerRangeInputRenderer.prototype, "componentWillRender", 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 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 = () => {
+      return 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() });
+    };
+    /**
+     *  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,
+      };
+    };
+  }
+  /*
+   * 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,
+    });
+  }
+  /*
+   * 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,
+    });
+  }
+  /*
+   * 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();
+      }
+    }
+    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();
+        }
+      }
+    }
+  }
+}
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarController.prototype, "minDate", void 0);
+__decorate$8([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarController.prototype, "maxDate", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "allowRepick", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "format", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "mode", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerMobileController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerValueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$8([
+  MapToComponentMethod('watchMinDate')
+], VegaDatePickerCalendarController.prototype, "watchMinDate", null);
+__decorate$8([
+  MapToComponentMethod('watchMaxDate')
+], VegaDatePickerCalendarController.prototype, "watchMaxDate", 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");};}])}));
+});
+
+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;
+};
+class VegaDatePickerCalendarRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.alterLitePickerHeader = (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) => match[0]);
+        });
+      });
+    };
+    /**
+     * 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;
+      });
+      ui.querySelectorAll('.button-next-month').forEach((item) => {
+        item.innerHTML = Icons['chevron-right'].icon;
+      });
+    };
+    this.renderClearButton = (ui) => {
+      const footerContainer = document.createElement('div');
+      footerContainer.className = 'footer-container';
+      const clearButton = document.createElement('vega-button-link');
+      clearButton.label = 'Clear';
+      clearButton.addEventListener('click', this.vegaDatePickerCalendarController.handleClear);
+      footerContainer.append(clearButton);
+      const mainContainer = ui.querySelector('.container__main');
+      if (mainContainer) {
+        mainContainer.append(footerContainer);
+      }
+    };
+  }
+  /*
+   * 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();
+    }
+    this.calendarContainerRef = document.createElement('vega-date-picker-calendar');
+    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.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();
+    }
+  }
+  /**
+   * 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.datePicker.setOptions(this.vegaDatePickerCalendarController.getModeConfig());
+  }
+  /**
+   * 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();
+    }
+  }
+  /*
+   * 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();
+      }
+    })
+      .on('selected', this.vegaDatePickerCalendarController.onDatePickerSelected)
+      .on('show', () => {
+      this.vegaDatePickerElementAppenderController.show();
+    })
+      .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();
+      }
+    });
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "dropdownConfig", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "allowRepick", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "format", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerCalendarController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerMobileController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerElementAppenderController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerZIndexController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerValueController", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarRenderer.prototype, "connectedCallback", null);
+__decorate$7([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarRenderer.prototype, "disconnectedCallback", null);
+__decorate$7([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarRenderer.prototype, "componentWillLoad", null);
+__decorate$7([
+  MapToComponentMethod('componentDidLoad')
+], VegaDatePickerCalendarRenderer.prototype, "componentDidLoad", null);
+__decorate$7([
+  MapToComponentMethod('componentDidRender')
+], VegaDatePickerCalendarRenderer.prototype, "componentDidRender", null);
+__decorate$7([
+  MapToComponentMethod('doOpen')
+], VegaDatePickerCalendarRenderer.prototype, "doOpen", null);
+__decorate$7([
+  MapToComponentMethod('doClose')
+], VegaDatePickerCalendarRenderer.prototype, "doClose", null);
+__decorate$7([
+  MapToComponentMethod('watchAllowRepick')
+], VegaDatePickerCalendarRenderer.prototype, "watchAllowRepick", null);
+__decorate$7([
+  MapToComponentMethod('watchDisabled')
+], VegaDatePickerCalendarRenderer.prototype, "watchDisabled", null);
+__decorate$7([
+  MapToComponentMethod('watchFormat')
+], VegaDatePickerCalendarRenderer.prototype, "watchFormat", null);
+__decorate$7([
+  MapToComponentMethod('watchMode')
+], VegaDatePickerCalendarRenderer.prototype, "watchMode", 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;
+};
+/** 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');
+    ZIndexManager.setZIndex(backdrop, 'base');
+    ZIndexManager.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');
+    ZIndexManager.removeZIndex(backdrop, 'base');
+    ZIndexManager.removeZIndex(this.vegaDatePickerCalendarRenderer.getCalendarContainerRef(), 'base');
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerZIndexController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerZIndexController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+
+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 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
+   * @see{module:vega-date-picker-render-ui-with-single}
+   */
+  /** Set default value if value is not set when component will load */
+  componentWillLoad() {
+    if (!this.value || !this.valueGuard(this.value)) {
+      this.setDefaultValueByMode();
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-single-date-change}
+   * @see{module:vega-date-picker-single-mode-auto-validate-value-change}
+   * @see{module:vega-date-picker-range-mode-auto-validate-value-change}
+   * @see{module:should-receive-the-value-from-vegaChange-event-in-single-mode}
+   * @see{module:should-receive-the-value-from-vegaChange-event-in-range-mode}
+   */
+  /**
+   * Update value when property of value changed.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} newValue - The new value of date picker.
+   * @param {DatePickerValueType<DatePickerModeType>} oldValue - The old value of date picker.
+   */
+  watchValue(newValue, oldValue) {
+    /**
+     * - single mode: @Watch will not be trigger if the value not change.
+     * - range mode: the value will be updated to the dropdown calendar,
+     *      avoid the value changed again by `onDatePickerSelected` in range mode.
+     */
+    if (this.mode === 'range' &&
+      isArrayEqual(newValue, oldValue)) {
+      return; // avoid the value changed again by `onDatePickerSelected` in range mode
+    }
+    if (this.valueGuard(newValue)) {
+      this.vegaDatePickerCalendarController.shouldUpdateCalendar(newValue);
+    }
+    else {
+      this.setDefaultValueByMode();
+    }
+    this.changeEventEmitter.emit(this.value);
+    ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+      host: this.host,
+      detail: this.value,
+    });
+  }
+  /*
+   * 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.setDefaultValueByMode();
+  }
+  /**
+   * The function `getValue` returns the value of a DatePicker component, with type checking based on the specified DatePickerModeType.
+   *
+   * @returns {DatePickerValueType} The method is returning the value of type `DatePickerValueType<T>`.
+   */
+  getValue() {
+    this.valueGuard(this.value);
+    return this.value;
+  }
+  /**
+   * The function sets the value of a date picker if it passes a type guard check.
+   *
+   * @param {DatePickerValueType} value - The `value` parameter is of type `DatePickerValueType<T>`. This means that it can
+   * accept a value of any type `T` that extends `DatePickerModeType`.
+   */
+  setValue(value) {
+    if (this.valueGuard(value)) {
+      this.value = value;
+    }
+  }
+  /**
+   * The function sets default values based on the mode specified.
+   */
+  setDefaultValueByMode() {
+    if (this.mode === 'range') {
+      this.setValue(['', '']);
+    }
+    if (this.mode === 'single') {
+      this.setValue('');
+    }
+  }
+  /**
+   * The function `valueGuard` checks if the provided value is valid for the specified mode of a date picker component.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} value - The `value` parameter is of type `DatePickerValueType<DatePickerModeType>`. It
+   * represents the value of the date picker, which can be a single date or a range of dates depending on
+   * the mode of the date picker.
+   * @returns {boolean} a boolean value.
+   */
+  valueGuard(value) {
+    let isValid;
+    switch (this.mode) {
+      case 'single':
+        isValid = (value && typeof value === 'string' && isDateStr(value)) || value === '';
+        break;
+      case 'range':
+        isValid =
+          Array.isArray(value) &&
+            value.length === 2 &&
+            value.every((item) => isDateStr(item) || item === '');
+        break;
+    }
+    if (!isValid) {
+      LogUtility.warn(`Invalid date picker value ${value} for ${this.mode} mode`);
+    }
+    return isValid;
+  }
+}
+__decorate$5([
+  MapToComponentField({ writable: true })
+], VegaDatePickerValueController.prototype, "value", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "mode", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "format", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "changeEventEmitter", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "host", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarController", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerValueController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$5([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerValueController.prototype, "componentWillLoad", null);
+__decorate$5([
+  MapToComponentMethod('watchValue')
+], VegaDatePickerValueController.prototype, "watchValue", null);
+__decorate$5([
+  MapToComponentMethod('watchMode')
+], VegaDatePickerValueController.prototype, "watchMode", 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;
+};
+/** The date picker format controller slimmer */
+class VegaDatePickerFormatController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * The code below is defining a function called `formatDate` in TypeScript. This function takes a
+     *  parameter `date` of type string and returns a string.
+     *
+     * @param {string} date - The value of the date.
+     * @returns {string} The formatted date is being returned.
+     */
+    this.formatDate = (date) => {
+      return this.vegaDatePickerCalendarRenderer.getDatePicker().DateTime(date).format(this.format);
+    };
+    /**
+     * The code below is defining a private method called `getDateFormatMask` in a TypeScript class. This
+     * method takes a `format` parameter of type `string`.
+     *
+     * @param {string} format - The value of the format.
+     * @returns {StringMaskStrategy} - The mask of the date format.
+     */
+    this.getDateFormatMask = (format) => {
+      const matchResult = format.match(/M/gi);
+      return new StringMaskStrategy({
+        mask: format.replace(/[MDY]/gi, '9'),
+        slot: '9',
+        accept: (matchResult && matchResult.length) > 2 ? /\w/g : /\d/g,
+      });
+    };
+  }
+  /** Set up string formatter when component did load */
+  componentDidLoad() {
+    this.setupStringFormatter(this.format);
+  }
+  /*
+   * 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(format) {
+    this.setupStringFormatter(format);
+  }
+  /*
+   * 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 */
+  /**
+   * The function `setupStringFormatter` sets up string input formatters based on the provided format for
+   * either single date or range mode.
+   *
+   * @param {string} format - The format parameter is a string that represents the desired format for the
+   * date input. It is used to create a date format mask that is passed to the StringInputFormatter
+   * constructor.
+   */
+  setupStringFormatter(format) {
+    if (this.singleDateInputFormatter)
+      this.singleDateInputFormatter.destroy();
+    if (this.startDateInputFormatter)
+      this.startDateInputFormatter.destroy();
+    if (this.endDateInputFormatter)
+      this.endDateInputFormatter.destroy();
+    if (this.mode === 'range') {
+      this.startDateInputFormatter = new StringInputFormatter(this.vegaDatePickerRangeInputRenderer.getStartDateInputRef(), this.getDateFormatMask(format));
+      this.endDateInputFormatter = new StringInputFormatter(this.vegaDatePickerRangeInputRenderer.getEndDateInputRef(), this.getDateFormatMask(format));
+    }
+    else {
+      this.singleDateInputFormatter = new StringInputFormatter(this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(), this.getDateFormatMask(format));
+    }
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "format", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "mode", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerFormatController.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$4([
+  MapToComponentMethod('componentDidLoad')
+], VegaDatePickerFormatController.prototype, "componentDidLoad", null);
+__decorate$4([
+  MapToComponentMethod('watchFormat')
+], VegaDatePickerFormatController.prototype, "watchFormat", null);
+
+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;
+};
+/** 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'],
+    }), () => 'none');
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerElementAppenderController.prototype, "dropdownConfig", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerElementAppenderController.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerElementAppenderController.prototype, "vegaDatePickerCalendarRenderer", 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;
+};
+/** The date picker key board controller slimmer */
+class VegaDatePickerKeyboardController extends KeyboardManagerSlimmer {
+  /*
+   * The below method is e2e-test covered in
+   * @see{module:vega-date-picker-open-by-keyboard}
+   */
+  /* istanbul ignore next */
+  /** The function sets up the functionality of key board control */
+  constructor() {
+    super((target) => [
+      {
+        keyCode: 'Enter',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        activeElementInScope: /* istanbul ignore next */ () => [
+          target.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
+          target.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
+          target.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
+          target.vegaDatePickerCalendarRenderer.getCalendarContainerRef(),
+        ],
+        eventName: 'keydown',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: /* istanbul ignore next */ (e) => {
+          var _a;
+          const activeElement = (((_a = e.target.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) ||
+            e.target);
+          return activeElement === null || activeElement === void 0 ? void 0 : activeElement.click();
+        },
+      },
+    ]);
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerKeyboardController.prototype, "vegaDatePickerRangeInputRenderer", void 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{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-danger-focus, 230, 50, 87, 0.25));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{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));box-shadow:0 0 0 4px rgba(var(--v-ring-input-focus, 19, 98, 226, 0.25));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}: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}";
+
+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;
+};
+const VegaDatePicker = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.vegaDatePickerMobileController = new VegaDatePickerMobileController();
+    this.vegaDatePickerCalendarController = new VegaDatePickerCalendarController();
+    this.vegaDatePickerZIndexController = new VegaDatePickerZIndexController();
+    this.vegaDatePickerValueController = new VegaDatePickerValueController();
+    this.vegaDatePickerFormatController = new VegaDatePickerFormatController();
+    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.formFieldController = new FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired, mode) => isRequired ? new DateRequiredRule({ mode }) : null,
+          dependence: 'mode',
+        },
+        {
+          propertyName: 'mode',
+          ruleFactory: (mode) => (mode === 'range' ? new DateRangeRule() : null),
+        },
+        {
+          propertyName: 'minDate',
+          ruleFactory: (minDate, maxDate) => new MinAndMaxDateRule({ minDate: minDate, maxDate }),
+          dependence: 'maxDate',
+        },
+        {
+          propertyName: 'maxDate',
+          ruleFactory: (maxDate, minDate) => new MinAndMaxDateRule({ minDate, maxDate: maxDate }),
+          dependence: 'minDate',
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: (target) => (target.mode === 'range' ? ['', ''] : ''),
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaDatePickerRenderer.getDatePickerContainer(),
+      touchableAreaGetter: () => {
+        return [
+          this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef(),
+          this.vegaDatePickerRangeInputRenderer.getStartDateInputRef(),
+          this.vegaDatePickerRangeInputRenderer.getEndDateInputRef(),
+        ].filter(Boolean);
+      },
+    });
+    this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
+    this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
+    /**
+     * Specifies the selection mode of the date picker.
+     *
+     *  - Use `single` to allow selecting a single date.
+     *  - Use `range` to allow selecting a date range.
+     */
+    this.mode = 'single';
+    /**
+     * Specifies the selected date or date range in the date picker.
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Determines whether the date picker field is required.
+     *
+     * Specifies whether a date or range must be selected for
+     *    the date picker to pass form validation.
+     */
+    this.required = false;
+    /**
+     * Specifies the validation status of the date picker component.
+     */
+    /* eslint-disable @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be implemented
+     *    when a date or range is selected.
+     */
+    this.autoValidation = true;
+    /**
+     * Specifies the desired date format.
+     */
+    this.format = 'MM/DD/YYYY';
+    /**
+     * Specifies the size of the date picker field.
+     */
+    this.size = 'default';
+    /**
+     * Specifies custom validation rules for the date picker field.
+     */
+    this.validationRules = [];
+    /**
+     * Specifies whether to display the clear button when the calendar is shown.
+     */
+    this.clearButton = false;
+    /**
+     * Specifies whether the date picker field is set to read-only.
+     *
+     * If set to `true`, keyboards and touch devices will skip
+     *    interacting with this element.
+     */
+    this.readOnly = false;
+    /**
+     * Specifies whether the user is allowed to change either the
+     *    start date or end date of an already selected date range
+     *    without completely resetting the selected range.
+     */
+    this.allowRepick = false;
+    /**
+     * Specifies the configuration for the calendar dropdown
+     *    associated with the date picker.
+     */
+    this.dropdownConfig = {};
+    /**
+     * Specifies whether the date picker field is disabled.
+     */
+    this.disabled = false;
+  }
+  /*
+   * 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() {
+  }
+  watchValue(newValue, oldValue) {
+  }
+  /*
+   * 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(format) {
+  }
+  watchValidationRules() {
+  }
+  watchMinDate(value) {
+  }
+  watchMaxDate(value) {
+  }
+  /*
+   * 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() {
+  }
+  watchDisabled() {
+  }
+  /**
+   * Invoke this method to close the calendar dropdown
+   *    associated with the date picker.
+   *
+   * @see{module:vega-date-picker-click-call-do-open-close}
+   */
+  /* istanbul ignore next */
+  async doClose() {
+  }
+  /**
+   * Invoke this method to open the calendar dropdown
+   *    associated with the date picker.
+   *
+   * @see{module:vega-date-picker-click-call-do-open-close}
+   */
+  /* istanbul ignore next */
+  async doOpen() {
+  }
+  render() {
+    return sanitizeVegaComponent(this.vegaDatePickerRenderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "mode": ["watchMode"],
+    "value": ["watchValue"],
+    "format": ["watchFormat"],
+    "validationRules": ["watchValidationRules"],
+    "minDate": ["watchMinDate"],
+    "maxDate": ["watchMaxDate"],
+    "allowRepick": ["watchAllowRepick"],
+    "disabled": ["watchDisabled"]
+  }; }
+};
+__decorate$1([
+  InjectVegaGlobalSlimmer()
+], VegaDatePicker.prototype, "globalSlimmers", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerMobileController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerCalendarController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerZIndexController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerValueController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerFormatController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerElementAppenderController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerKeyboardController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerRenderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerSingleInputRenderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerRangeInputRenderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerCalendarRenderer", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "formFieldController", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "inputEventPrevent", void 0);
+__decorate$1([
+  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.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}";
+
+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.globalSlimmers = {};
+  }
+  render() {
+    return h(Host, null);
+  }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);
+VegaDatePickerCalendar.style = vegaDatePickerCalendarCss;
+
+export { VegaDatePicker as vega_date_picker, VegaDatePickerCalendar as vega_date_picker_calendar };