@heartlandone/vega 2.73.0 → 2.74.0-RTE-table-preview

package/dist/vega/vega-date-picker-calendar.entry.js

@@ -0,0 +1,1381 @@
+import { h, F as Fragment, r as registerInstance, e as createEvent, g as Host, i as getElement } from './index-01a2f9c9.js';
+import { V as VegaSlimmer, b as MapToComponentField, M as MapToComponentMethod, L as LogUtility, m as methodPlaceholder, e as InjectVegaGlobalSlimmer, a as InjectVegaSlimmer } from './vega-slimmer-core-83fd0e22.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer } from './component-usage-runtime-metrics-0513698f.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-3b49c6b3.js';
+import { a as VegaClick, V as VegaDropdownClick, t as VegaDropdownShow, u as VegaDropdownHide, r as VegaClear, q as VegaMonthYearChange, s as VegaSelectionChange } from './vega-event-id-61c8bd9f.js';
+import { C as ChangeManager } from './change-manager-b115783e.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-5798693b.js';
+import { u as VegaInternalDatePickerCalendarClear, v as VegaInternalDatePickerCalendarUpdatePeriodByUser } from './vega-internal-event-id-b65a01a3.js';
+import { a4 as MonthPeriod, a5 as CalendarDate, ai as isCalendarDateType, _ as MonthViewGenerator } from './type-guard-09acedc9.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-9279071a.js';
+import { I as Icons } from './icons-d5c5c709.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3c4e2876.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { s as sanitizeVegaComponent } from './component-0cff85cf.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-61db3eef.js';
+import { i as isArrayEqual } from './array-a1d98264.js';
+import { g as getDeviceType, D as DeviceType } from './ui-5f775fd9.js';
+import './breakpoints-d9faf11c.js';
+import './ui-189dae23.js';
+import './typography-396de03f.js';
+import './index-81ce67e2.js';
+import './static-subject-title-6fdf8c8b.js';
+import './create-public-api-runtime-metrics-slimmer-8565f08b.js';
+import './internal-vega-event-manager-826279b7.js';
+import './try-get-document-bef0f526.js';
+import './number-4398f2e1.js';
+
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerCalendarRenderer extends VegaSlimmer {
+  render() {
+    return (h("div", { class: {
+        'calendar': true,
+        'static-height': this.staticHeight,
+      } },
+      h("div", { class: "container__main" },
+        this.renderContainer(),
+        this.renderFooter())));
+  }
+  renderContainer() {
+    const shouldRenderRangeMonth = this.shouldRenderRangeMonth();
+    return (h("div", { class: {
+        /* eslint-disable @typescript-eslint/naming-convention */
+        'container__months': true,
+        'columns-2': shouldRenderRangeMonth,
+      } }, shouldRenderRangeMonth ? this.renderRangeMonth() : this.monthItemRenderer.render('start')));
+  }
+  renderRangeMonth() {
+    return (h(Fragment, null,
+      this.monthItemRenderer.render('start'),
+      this.monthItemRenderer.render('end')));
+  }
+  renderFooter() {
+    return (this.clearButton && (h("div", { class: "footer-container" },
+      h("vega-button-link", { ref: (ref) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+            this.clearCalendar();
+          });
+        }, label: this.translationSlimmer.t('Clear') }))));
+  }
+  shouldRenderRangeMonth() {
+    return this.mode === 'range' && !this.isMobileDevice;
+  }
+  clearCalendar() {
+    this.clearEventEmitter.emit();
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), {});
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "staticHeight", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
+__decorate$9([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);
+
+const MonthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+var __decorate$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;
+};
+class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.startDropdownRef = {
+      month: null,
+      year: null,
+    };
+    this.endDropdownRef = {
+      month: null,
+      year: null,
+    };
+  }
+  render(period, type) {
+    return (h("vega-flex", { gap: 'size-8', justifyContent: 'center' },
+      this.showYearMonthDropdowns
+        ? this.renderMonthDropdownSwitcher(period, type)
+        : this.renderCurrentMonth(period),
+      this.showYearMonthDropdowns
+        ? this.renderYearDropdownSwitcher(period, type)
+        : this.renderCurrentYear(period)));
+  }
+  getMonthDropdownOptions(type) {
+    let currentYear = this.currentPeriod.current.year;
+    const currentMonth = this.currentPeriod.current.month;
+    if (type === 'end' && currentMonth === 12)
+      currentYear += 1;
+    return MonthNames.map((month, index) => {
+      return {
+        key: `${index}`,
+        label: this.translationSlimmer.t(month),
+        disabled: this.isDisabledMonth(currentYear, index + 1),
+      };
+    });
+  }
+  isDisabledMonth(year, month) {
+    var _a, _b, _c, _d;
+    const startMonth = (_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.month;
+    const startYear = (_b = this.minCalendarDate) === null || _b === void 0 ? void 0 : _b.year;
+    const endMonth = (_c = this.maxCalendarDate) === null || _c === void 0 ? void 0 : _c.month;
+    const endYear = (_d = this.maxCalendarDate) === null || _d === void 0 ? void 0 : _d.year;
+    return (year < startYear ||
+      year > endYear ||
+      (year === startYear && startMonth > month) ||
+      (year === endYear && endMonth < month));
+  }
+  getYearDropdownOptions() {
+    var _a, _b, _c, _d;
+    const currentYear = new Date().getFullYear();
+    const startYear = ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.year) ||
+      Math.min(((_b = this.maxCalendarDate) === null || _b === void 0 ? void 0 : _b.year) || currentYear, currentYear) -
+        VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR;
+    const endYear = ((_c = this.maxCalendarDate) === null || _c === void 0 ? void 0 : _c.year) ||
+      Math.max(((_d = this.minCalendarDate) === null || _d === void 0 ? void 0 : _d.year) || currentYear, currentYear) +
+        VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR;
+    const years = [];
+    for (let year = startYear; year <= endYear; year++) {
+      years.push({ key: String(year), label: String(year) });
+    }
+    return years;
+  }
+  renderMonthDropdownSwitcher(period, type) {
+    const { month } = period.current;
+    const monthIndex = month - 1;
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getMonthDropdownOptions(type), selectedSourceKey: monthIndex.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
+        if (type === 'start') {
+          this.startDropdownRef.month = node;
+        }
+        else {
+          this.endDropdownRef.month = node;
+        }
+        this.onDropdownShowOrHide(node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
+          const selectedMonth = parseInt(payload.detail);
+          this.setDateBasedOnSelectedMonth(period, selectedMonth, type);
+        });
+      } }, this.renderCurrentMonth(period)));
+  }
+  renderYearDropdownSwitcher(period, type) {
+    const { year } = period.current;
+    return (h("vega-dropdown", { trigger: "click", selectType: "single", source: this.getYearDropdownOptions(), selectedSourceKey: year.toString(), "max-height": "300", isScreenPosition: this.yearMonthDropdownProps.isScreenPosition, ref: (node) => {
+        if (type === 'start') {
+          this.startDropdownRef.year = node;
+        }
+        else {
+          this.endDropdownRef.year = node;
+        }
+        this.onDropdownShowOrHide(node);
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaDropdownClick, (payload) => {
+          this.setDateBasedOnSelectedYear(period, parseInt(payload.detail), type);
+        });
+      } }, this.renderCurrentYear(period)));
+  }
+  /**
+   * Control ui when dropdown shows or closes
+   *
+   * @param {HTMLVegaDropdownElement} dropdown - Month or year dropdown
+   */
+  onDropdownShowOrHide(dropdown) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownShow, async () => {
+      await this.closeOpenDropdowns(dropdown);
+      dropdown.classList.add('active');
+    });
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdown, VegaDropdownHide, () => {
+      const parentElement = dropdown.closest('.calendar');
+      if (parentElement) {
+        const dropdown = parentElement.querySelector('vega-dropdown.active');
+        dropdown && dropdown.classList.remove('active');
+      }
+    });
+  }
+  renderCurrentMonth(period) {
+    return (h("div", { class: "month-item-name" },
+      h("span", null, this.translationSlimmer.t(period.current.getMonthName())),
+      this.renderDropdownSwitchIcon()));
+  }
+  renderCurrentYear(period) {
+    return (h("div", { class: "month-item-year" },
+      h("span", null, period.current.year),
+      this.renderDropdownSwitchIcon()));
+  }
+  renderDropdownSwitchIcon() {
+    return (this.showYearMonthDropdowns && (h("vega-icon", { icon: VegaInternalIconManager.getIconKey('caret-down') })));
+  }
+  setDateBasedOnSelectedMonth(period, monthIndex, type) {
+    const { year } = period.current;
+    const date = type === 'start' ? new Date(year, monthIndex, 1) : new Date(year, monthIndex - 1, 1);
+    const newPeriod = new MonthPeriod(CalendarDate.from(date));
+    this.currentPeriodController.updateCalendarPeriod(newPeriod);
+  }
+  setDateBasedOnSelectedYear(period, year, type) {
+    const { month } = period.current;
+    const startMonthIndex = month - 1;
+    const endMonthIndex = startMonthIndex - 1;
+    const date = type === 'start' ? new Date(year, startMonthIndex, 1) : new Date(year, endMonthIndex, 1);
+    const newPeriod = new MonthPeriod(CalendarDate.from(date));
+    this.currentPeriodController.updateCalendarPeriod(newPeriod);
+  }
+  /**
+   * Close any open vega-dropdown and ignore currently clicked one
+   *
+   * * @param {HTMLVegaDropdownElement} dropdownToIgnore - Dropdown to ignore
+   */
+  async closeOpenDropdowns(dropdownToIgnore) {
+    const dropdowns = [this.startDropdownRef, this.endDropdownRef];
+    await Promise.all(dropdowns
+      .flatMap((ref) => [ref.month, ref.year])
+      .filter((dropdown) => Boolean(dropdown) && dropdown !== dropdownToIgnore)
+      .map((dropdown) => dropdown.hide()));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'caret-down': Icons['caret-down'],
+  });
+})();
+VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_BEFORE_CURRENT_YEAR = 10;
+VegaDatePickerCalendarYearMonthSwitcherRenderer.DEFAULT_MINIMUM_DROPDOWN_YEAR_AFTER_CURRENT_YEAR = 10;
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriodController", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "showYearMonthDropdowns", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "translationSlimmer", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "minCalendarDate", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "yearMonthDropdownProps", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Date picker calendar state base abstract class
+ */
+class VegaDatePickerCalendarStateBaseAbstract extends VegaSlimmer {
+  /** connectedCallback */
+  connectedCallback() {
+    this.initCalendarClearObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    this.removeCalendarClearObserver();
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initCalendarClearObserver() {
+    this.calendarClearObserver = new Observer(this.canAcceptClearEvent.bind(this), this.clear.bind(this));
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), this.calendarClearObserver);
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeCalendarClearObserver() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarClear), this.calendarClearObserver);
+  }
+  /**
+   * Check if can accept form reset event
+   *
+   * @returns {boolean} - true if can accept, false otherwise.
+   */
+  canAcceptClearEvent() {
+    return true;
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "connectedCallback", null);
+__decorate$7([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "disconnectedCallback", null);
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Current period controller. */
+class VegaDatePickerCalendarCurrentPeriodController extends VegaDatePickerCalendarStateBaseAbstract {
+  /** connectedCallback */
+  connectedCallback() {
+    super.connectedCallback();
+    this.initCalendarPeriodUpdateObserver();
+  }
+  /** disconnectedCallback */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeCalendarPeriodUpdateObserver();
+  }
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen maxDate changed */
+  watchMaxCalendarDate() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen minDate changed */
+  watchMinCalendarDate() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Listen currentPeriod changed */
+  watchCurrentPeriod() {
+    this.monthYearChangeEventEmitter.emit(this.getCurrentYearMonthByPeriod());
+  }
+  /** reset current period */
+  resetCurrentPeriod() {
+    this.setCurrentMonthPeriod();
+  }
+  /** Clear current period */
+  clear() {
+    this.setCurrentMonthPeriod();
+  }
+  /**
+   * Goto next month period while single mode.
+   * Goto next two month period while range mode.
+   */
+  gotoNextPeriod() {
+    const period = this.isRangeView()
+      ? this.currentPeriod.next().next()
+      : this.currentPeriod.next();
+    this.updateCalendarPeriod(period);
+  }
+  /**
+   * Goto previous month period while single mode.
+   * Goto previous two month period while range mode.
+   */
+  gotoPreviousPeriod() {
+    const period = this.isRangeView()
+      ? this.currentPeriod.previous().previous()
+      : this.currentPeriod.previous();
+    this.updateCalendarPeriod(period);
+  }
+  /**
+   * set current period
+   *
+   * @param {MonthPeriod} period current period
+   */
+  updateCalendarPeriod(period) {
+    if (!this.currentPeriod || !this.currentPeriod.equal(period)) {
+      this.currentPeriod = period;
+    }
+  }
+  /**
+   * Current period follow below rules:
+   * - Go to the value date month if the value is set.
+   * - Go to the minDate month if only set the minDate and today is before than minDate.
+   * - Go to the minDate month if minDate and maxDate are both set and today is after than maxDate.
+   * - Go to the maxDate month if only set maxDate and today is after than maxDate.
+   * - Go to today month if the value, minDate and maxDate all are empty.
+   */
+  setCurrentMonthPeriod() {
+    let currentDate;
+    const startDate = this.calendarSelection.startDate;
+    if (isCalendarDateType(startDate)) {
+      currentDate = startDate;
+    }
+    else if (this.minCalendarDate &&
+      (this.today.isBefore(this.minCalendarDate) ||
+        (this.maxCalendarDate && this.today.isAfter(this.maxCalendarDate)))) {
+      currentDate = this.minCalendarDate;
+    }
+    else if (this.maxCalendarDate && this.today.isAfter(this.maxCalendarDate)) {
+      currentDate = this.maxCalendarDate;
+    }
+    else {
+      currentDate = this.today;
+    }
+    this.updateCalendarPeriod(new MonthPeriod(currentDate, true, this.timezone));
+  }
+  /**
+   * Check is range view
+   *
+   * @returns {boolean} -
+   */
+  isRangeView() {
+    return this.mode === 'range' && !this.isMobileDevice;
+  }
+  /**
+   * Get current year month by period
+   *
+   * @returns {DatePickerMonthYearTypes} - month and year info
+   */
+  getCurrentYearMonthByPeriod() {
+    const startMonthYear = {
+      month: MonthNames[this.currentPeriod.current.month - 1],
+      year: `${this.currentPeriod.current.year}`,
+    };
+    if (this.mode === 'range') {
+      return [
+        startMonthYear,
+        {
+          month: MonthNames[this.currentPeriod.endDate.month - 1],
+          year: `${this.currentPeriod.endDate.year}`,
+        },
+      ];
+    }
+    else {
+      return startMonthYear;
+    }
+  }
+  /**
+   * Initialize calendar clear observer
+   */
+  initCalendarPeriodUpdateObserver() {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser, this.setCurrentMonthPeriod.bind(this));
+  }
+  /**
+   * Remove calendar clear observer
+   */
+  removeCalendarPeriodUpdateObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser);
+  }
+}
+__decorate$6([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "host", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "today", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "mode", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "format", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "timezone", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "minCalendarDate", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "maxCalendarDate", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "isMobileDevice", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate$6([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
+__decorate$6([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "disconnectedCallback", null);
+__decorate$6([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "componentWillLoad", null);
+__decorate$6([
+  MapToComponentMethod('watchMaxCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMaxCalendarDate", null);
+__decorate$6([
+  MapToComponentMethod('watchMinCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMinCalendarDate", null);
+__decorate$6([
+  MapToComponentMethod('watchCurrentPeriod')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchCurrentPeriod", null);
+__decorate$6([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "resetCurrentPeriod", null);
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Today controller */
+class VegaDatePickerCalendarTodayController extends VegaSlimmer {
+  /** connectedCallback */
+  connectedCallback() {
+    this.setToday();
+  }
+  /** Listen time zone changed */
+  watchTimezone() {
+    this.setToday();
+  }
+  /**
+   * Sets the current date based on the provided timezone or the system timezone if none is provided.
+   */
+  setToday() {
+    this.today = CalendarDate.from(new Date(), this.timezone);
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaDatePickerCalendarTodayController.prototype, "timezone", void 0);
+__decorate$5([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarTodayController.prototype, "today", void 0);
+__decorate$5([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarTodayController.prototype, "connectedCallback", null);
+__decorate$5([
+  MapToComponentMethod('watchTimezone')
+], VegaDatePickerCalendarTodayController.prototype, "watchTimezone", null);
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaDatePickerMonthItemRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.monthViewGenerator = new MonthViewGenerator();
+  }
+  render(type) {
+    const period = type === 'end' ? this.currentPeriod.next() : this.currentPeriod;
+    const periodView = this.monthViewGenerator.generate(period);
+    return (h("div", { class: "month-item" },
+      this.renderMonthHeader(period, type),
+      this.renderWeek(periodView),
+      this.renderDays(periodView, period)));
+  }
+  renderMonthHeader(period, type) {
+    return (h("vega-grid", { class: "month-item-header", column: '3-auto', row: 1 },
+      this.renderPrevIcon(period, type),
+      this.yearMonthSwitcherRender.render(period, type),
+      this.renderNextIcon(period, type)));
+  }
+  renderPrevIcon(period, type) {
+    var _a;
+    const firstDateOfMonth = period.current.firstDateOfMonth();
+    const lockedPreviousPeriod = this.isBeforeMinDate(firstDateOfMonth) || ((_a = this.minCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(firstDateOfMonth));
+    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'end';
+    return lockedPreviousPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-previous-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-left'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoPreviousPeriod();
+        });
+      }, size: this.getNavigationIconSize() }));
+  }
+  renderNextIcon(period, type) {
+    var _a;
+    const lastDateOfMonth = period.current.lastDateOfMonth();
+    const lockedNextPeriod = this.isAfterMaxDate(lastDateOfMonth) || ((_a = this.maxCalendarDate) === null || _a === void 0 ? void 0 : _a.equal(lastDateOfMonth));
+    const needHide = !this.isMobileDevice && this.mode === 'range' && type === 'start';
+    return lockedNextPeriod || needHide ? (h("div", { class: "locked-month-button" })) : (h("vega-button-circle", { class: "button-next-month", variant: "icon-only", icon: VegaInternalIconManager.getIconKey('chevron-right'), ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
+          this.currentPeriodController.gotoNextPeriod();
+        });
+      }, size: this.getNavigationIconSize() }));
+  }
+  renderWeek(periodView) {
+    return (h("vega-grid", { class: "month-item-weekdays-row", column: '7-auto', row: 1 }, periodView.weekdays.map((weekDay) => {
+      return (h("div", { key: weekDay }, this.translationSlimmer.t(`${weekDay}-short`)));
+    })));
+  }
+  renderDays(periodView, period) {
+    return (h("vega-grid", { class: "container__days", column: '7-auto', row: this.staticHeight ? 6 : '6-auto' }, periodView.dateItems
+      .flat()
+      .filter((day) => day.month <= period.current.month || day.year < period.current.year)
+      .map((day) => this.renderDay(day, period))));
+  }
+  renderDay(day, period) {
+    const isCurrentMonth = day.month === period.current.month;
+    const isLockedDate = this.isBeforeMinDate(day) || this.isAfterMaxDate(day);
+    const currentRangeDates = this.getCurrentRangeDates();
+    const isDisabled = this.isDateDisabled(day.toDate());
+    const isInRange = day.isAfter(currentRangeDates[0]) && day.isBefore(currentRangeDates[1]);
+    const canInterActive = isCurrentMonth && !isLockedDate && !isDisabled;
+    return (h("div", { key: `${day.month}-${day.date}`, class: isCurrentMonth && {
+        'day-item': true,
+        'is-today': day.equal(this.today),
+        'is-start-date': day.equal(currentRangeDates[0]),
+        'is-in-range': isInRange,
+        'is-end-date': day.equal(currentRangeDates[1]),
+        'is-locked': isLockedDate,
+        'is-disabled': isDisabled,
+      }, 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onClick: () => canInterActive && this.selectionController.onDayClick(day), 
+      /* eslint-disable-next-line react/jsx-no-bind */
+      onMouseEnter: () => canInterActive && this.selectionController.onDayHover(day), onKeyDown: createEnterKeyHandlerToTriggerClick(), role: "menuitem", "aria-label": day.date, tabIndex: canInterActive ? 0 : -1 }, isCurrentMonth ? day.date : ''));
+  }
+  getCurrentRangeDates() {
+    const startDate = this.calendarSelection.startDate;
+    const endDate = this.calendarSelection.endDate;
+    if (isCalendarDateType(startDate) && !endDate && this.hoverDate) {
+      return this.hoverDate.isBefore(startDate)
+        ? [this.hoverDate, startDate]
+        : [startDate, this.hoverDate];
+    }
+    else if (!isCalendarDateType(startDate) && endDate && this.hoverDate) {
+      return this.hoverDate.isBefore(endDate) ? [this.hoverDate, endDate] : [endDate, this.hoverDate];
+    }
+    else {
+      return [startDate, endDate];
+    }
+  }
+  isBeforeMinDate(day) {
+    return this.minCalendarDate && day.isBefore(this.minCalendarDate);
+  }
+  isAfterMaxDate(day) {
+    return this.maxCalendarDate && day.isAfter(this.maxCalendarDate);
+  }
+  getNavigationIconSize() {
+    if (this.size === 'large')
+      return 'default';
+    if (this.size === 'small')
+      return 'extra-small';
+    return 'small';
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-left': Icons['chevron-left'],
+    'chevron-right': Icons['chevron-right'],
+  });
+})();
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "currentPeriod", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "today", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "translationSlimmer", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "yearMonthSwitcherRender", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "mode", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "currentPeriodController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "hoverDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "maxCalendarDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "minCalendarDate", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "selectionController", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "calendarSelection", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "staticHeight", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "isDateDisabled", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaDatePickerMonthItemRenderer.prototype, "isMobileDevice", void 0);
+
+/** Calendar selection object. */
+class CalendarSelection {
+  constructor(startDate, endDate, mode) {
+    this.startDate = startDate;
+    this.endDate = endDate;
+    this.mode = mode;
+    if (this.mode === 'range' && this.startDate && this.endDate && this.startDate.isAfter(this.endDate)) {
+      const startDate = this.startDate;
+      this.startDate = this.endDate;
+      this.endDate = startDate;
+    }
+  }
+  /**
+   * Creates a CalendarSelection from a selection value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - The selection value.
+   * @param {DatePickerModeType} mode - The mode of the date picker.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {CalendarSelection} - The created CalendarSelection instance.
+   */
+  static fromSelection(selection, mode, format) {
+    let startDate = null;
+    let endDate = null;
+    if (this.isValidSelection(selection, mode, format)) {
+      if (mode === 'single' && typeof selection === 'string') {
+        const date = CalendarDate.fromString(selection, format);
+        startDate = date;
+        endDate = date;
+      }
+      else if (mode === 'range' && Array.isArray(selection)) {
+        startDate = CalendarDate.fromString(selection[0], format);
+        endDate = CalendarDate.fromString(selection[1], format);
+      }
+    }
+    return new CalendarSelection(startDate, endDate, mode);
+  }
+  /**
+   * Check if the selection is valid.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - The selection value.
+   * @param {DatePickerModeType} mode - The mode of the date picker.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {boolean} - True if the selection is valid, false otherwise.
+   */
+  static isValidSelection(selection, mode, format) {
+    let isValid;
+    switch (mode) {
+      case 'single':
+        isValid = this.isValidDateString(selection, format);
+        break;
+      case 'range':
+        isValid =
+          Array.isArray(selection) &&
+            selection.length === 2 &&
+            selection.every((item) => this.isValidDateString(item, format));
+        break;
+    }
+    if (!isValid) {
+      LogUtility.warn(`Invalid date picker calendar selection ${selection} for ${mode} mode`);
+    }
+    return isValid;
+  }
+  /**
+   * Check if a date string is valid.
+   *
+   * @param {Nullable<string>} dateString - The date string to check.
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {boolean} - True if the date string is valid, false otherwise.
+   */
+  static isValidDateString(dateString, format) {
+    return ((dateString && typeof dateString === 'string' && !!CalendarDate.fromString(dateString, format)) ||
+      dateString === '');
+  }
+  /**
+   * Gets the selection value based on the current calendar selection.
+   *
+   * @param {string} format - The date format to use for string conversion.
+   * @returns {DatePickerValueType<DatePickerModeType>} - The selection value.
+   */
+  toSelection(format) {
+    var _a, _b, _c;
+    if (this.mode === 'range') {
+      return [((_a = this.startDate) === null || _a === void 0 ? void 0 : _a.toString(format)) || '', ((_b = this.endDate) === null || _b === void 0 ? void 0 : _b.toString(format)) || ''];
+    }
+    else {
+      return ((_c = this.startDate) === null || _c === void 0 ? void 0 : _c.toString(format)) || '';
+    }
+  }
+  /**
+   * Checks if this calendar selection is equal to another.
+   *
+   * @param {CalendarSelection} other - The other calendar selection to compare with.
+   * @returns {boolean} - True if both selections are equal, false otherwise.
+   */
+  equals(other) {
+    if (!other)
+      return false;
+    const isStartDateEqual = this.startDate && other.startDate
+      ? this.startDate.equal(other.startDate)
+      : this.startDate === this.endDate;
+    const isEndDateEqual = this.endDate && other.endDate
+      ? this.endDate.equal(other.endDate)
+      : this.endDate === other.endDate;
+    return isStartDateEqual && isEndDateEqual;
+  }
+  /**
+   * Checks if the calendar selection is completed.
+   *
+   * @returns {boolean} - True if the selection is completed, false otherwise.
+   */
+  isCompleted() {
+    return (isCalendarDateType(this.startDate) &&
+      (this.mode === 'range' ? isCalendarDateType(this.endDate) : true));
+  }
+  /**
+   * Checks if the calendar selection is empty.
+   *
+   * @returns {boolean} - True if the selection is empty, false otherwise.
+   */
+  isEmpty() {
+    return !isCalendarDateType(this.startDate) && !isCalendarDateType(this.endDate);
+  }
+}
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Selection controller */
+class VegaDatePickerCalendarSelectionController extends VegaDatePickerCalendarStateBaseAbstract {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setCalendarSelectionBySelection(this.selection);
+  }
+  /**
+   * Listen selection changed
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} newSelection - newSelection.
+   */
+  watchSelection(newSelection) {
+    const isChangeByUser = !this.isSameSelection(newSelection, this.calendarSelection.toSelection(this.format));
+    // If the user changes the selection via property, we need to update the current period and set the calendar selection.
+    //   otherwise, we don't need to update.
+    if (isChangeByUser) {
+      this.setCalendarSelectionBySelection(newSelection);
+      this.notifyPeriodChange();
+    }
+  }
+  /** Reset selecting range date */
+  resetRange() {
+    const usePrevious = !this.calendarSelection.isCompleted() &&
+      !this.calendarSelection.isEmpty() &&
+      !!this.previousCalendarSelection;
+    this.setCalendarSelectionBySelection(usePrevious ? this.previousCalendarSelection.toSelection(this.format) : this.selection);
+    this.hoverDate = null;
+  }
+  /** Listen calendarSelection changed */
+  watchCalendarSelection() {
+    if (this.calendarSelection.isCompleted() || this.calendarSelection.isEmpty()) {
+      this.setSelection(this.calendarSelection.toSelection(this.format));
+    }
+  }
+  /** Clear the current selection */
+  clear() {
+    this.setCalendarSelectionByRange(null, null);
+    this.hoverDate = null;
+  }
+  /**
+   * Listen the day be clicked.
+   *
+   * @param {CalendarDate} day - clicked day.
+   */
+  onDayClick(day) {
+    if (this.mode === 'single') {
+      this.setCalendarSelectionByRange(day, day);
+    }
+    else if (this.mode === 'range') {
+      if (this.calendarSelection.startDate && !this.calendarSelection.endDate) {
+        // It second click of range mode, we should set min date as start and max date as end.
+        // As also, the select action have completed, we should set the value same time.
+        this.setCalendarSelectionByRange(this.calendarSelection.startDate, day);
+      }
+      else if (!this.calendarSelection.startDate && this.calendarSelection.endDate) {
+        this.setCalendarSelectionByRange(this.calendarSelection.endDate, day);
+      }
+      else {
+        // It first click of range mode, we only set start date.
+        this.setCalendarSelectionByRange(day, null);
+      }
+      this.hoverDate = null;
+    }
+  }
+  /**
+   * Listen the day be hovered.
+   * Need set the hoverDate after the first click in range mode.
+   * For repick, we should clear start or end date according the input which have been clicked.
+   * Note: repick is working at hover any day in range.
+   *
+   * @param {CalendarDate} day - hovered day.
+   */
+  onDayHover(day) {
+    const clickedInputType = this.allowRepickController.getRepickType();
+    if (clickedInputType && this.mode === 'range' && this.calendarSelection.isCompleted()) {
+      clickedInputType === 'start'
+        ? this.setCalendarSelectionByRange(null, this.calendarSelection.endDate)
+        : this.setCalendarSelectionByRange(this.calendarSelection.startDate, null);
+    }
+    if (!this.calendarSelection.isEmpty() && !this.calendarSelection.isCompleted()) {
+      this.hoverDate = day;
+    }
+  }
+  /**
+   * Sets calendar selection for date picker calendar based on selection value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - selection.
+   */
+  setCalendarSelectionBySelection(selection) {
+    const calendarSelection = CalendarSelection.fromSelection(selection, this.mode, this.format);
+    if (this.calendarSelection &&
+      (this.calendarSelection.isCompleted() || this.calendarSelection.isEmpty())) {
+      this.previousCalendarSelection = this.calendarSelection;
+    }
+    if (!calendarSelection.equals(this.calendarSelection)) {
+      this.calendarSelection = calendarSelection;
+    }
+    // we should reset the selection while calendarSelection changed from inner,
+    //     such as reversed range correction.
+    this.setSelection(calendarSelection.toSelection(this.format));
+  }
+  /**
+   * Sets calendar selection for date picker calendar based on range dates.
+   *
+   * @param {Nullable<CalendarDate>} startDate - startDate.
+   * @param {Nullable<CalendarDate>} endDate - endDate.
+   */
+  setCalendarSelectionByRange(startDate, endDate) {
+    this.calendarSelection = new CalendarSelection(startDate, endDate, this.mode);
+  }
+  /**
+   * Sets selection for date picker calendar and emits a change event with the new value.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} selection - selection.
+   */
+  setSelection(selection) {
+    if (!this.isSameSelection(selection, this.selection)) {
+      this.selection = selection;
+      this.vegaSelectionChangeEventEmitter.emit(this.selection);
+    }
+  }
+  /**
+   * Check the previous selection and current selection is same.
+   *
+   * @param {DatePickerValueType<DatePickerModeType>} previous - New selection.
+   * @param {DatePickerValueType<DatePickerModeType>} current - Old selection.
+   * @returns {boolean} -
+   */
+  isSameSelection(previous, current) {
+    if (this.mode === 'range' && Array.isArray(previous) && Array.isArray(current)) {
+      return isArrayEqual(previous, current);
+    }
+    return previous === current;
+  }
+  /** Notify to update current period */
+  notifyPeriodChange() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalDatePickerCalendarUpdatePeriodByUser), {});
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "mode", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "format", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "selection", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "calendarSelection", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "hoverDate", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "clearEventEmitter", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "vegaSelectionChangeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
+__decorate$3([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);
+__decorate$3([
+  MapToComponentMethod('watchSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchSelection", null);
+__decorate$3([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarSelectionController.prototype, "resetRange", null);
+__decorate$3([
+  MapToComponentMethod('watchCalendarSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchCalendarSelection", null);
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Current min and max calendar date controller. */
+class VegaDatePickerCalendarMinMaxDateController extends VegaSlimmer {
+  /** componentWillLoad */
+  componentWillLoad() {
+    this.setMaxCalendarDate();
+    this.setMinCalendarDate();
+  }
+  /** Listen maxDate changed */
+  watchMaxDate() {
+    this.setMaxCalendarDate();
+  }
+  /** Listen minDate changed */
+  watchMinDate() {
+    this.setMinCalendarDate();
+  }
+  /** Set maxCalendarDate */
+  setMaxCalendarDate() {
+    this.maxCalendarDate = CalendarDate.fromString(this.maxDate, this.format);
+  }
+  /** Set minCalendarDate */
+  setMinCalendarDate() {
+    this.minCalendarDate = CalendarDate.fromString(this.minDate, this.format);
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxDate", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minDate", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "format", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxCalendarDate", void 0);
+__decorate$2([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minCalendarDate", void 0);
+__decorate$2([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "componentWillLoad", null);
+__decorate$2([
+  MapToComponentMethod('watchMaxDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMaxDate", null);
+__decorate$2([
+  MapToComponentMethod('watchMinDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMinDate", null);
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Allow repick controller. */
+class VegaDatePickerCalendarAllowRepickController extends VegaSlimmer {
+  /**
+   * Trigger repick
+   *
+   * @param {DatePickerCalendarRepickType} type - The type of repick.
+   */
+  triggerRepick(type) {
+    this.repickType = type;
+    if (type === 'end') {
+      this.setEndDateAsCurrentMonthPeriod();
+    }
+  }
+  /** while selection completed, we should clear repick type */
+  watchCalendarSelection() {
+    if (this.calendarSelection.isCompleted()) {
+      this.repickType = null;
+    }
+  }
+  /**
+   * Get triggered repick type.
+   *
+   * @returns {DatePickerCalendarRepickType} - Repick type.
+   */
+  getRepickType() {
+    return this.repickType;
+  }
+  /**
+   * Set end date as current period.
+   *  - while start date and end date in same month of year, we set startDate as current period
+   *  - while in range mobile device, since we only render on month, so set the end date at current period
+   *  - while in range desktop devide, we set previous month as current period to keep end date is in second month.
+   */
+  setEndDateAsCurrentMonthPeriod() {
+    const startDate = this.calendarSelection.startDate;
+    const endDate = this.calendarSelection.endDate;
+    if (endDate) {
+      const date = isCalendarDateType(startDate) && startDate.compare(endDate).inMonth
+        ? startDate
+        : this.isMobileDevice
+          ? endDate
+          : endDate.add(0, -1);
+      this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(date));
+    }
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "calendarSelection", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "isMobileDevice", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "currentPeriodController", void 0);
+__decorate$1([
+  MapToComponentMethod('triggerRepick')
+], VegaDatePickerCalendarAllowRepickController.prototype, "triggerRepick", null);
+__decorate$1([
+  MapToComponentMethod('watchCalendarSelection')
+], VegaDatePickerCalendarAllowRepickController.prototype, "watchCalendarSelection", null);
+
+const vegaDatePickerCalendarCss = ":host{--vega-litepicker-container-width:calc(var(--vega-litepicker-day-width) * 7)}.calendar,.calendar .container__main,.calendar .container__months{height:100%}:host(.small.range) .calendar.static-height .container__main,:host(.regular.range) .calendar.static-height .container__main,:host(.large.range) .calendar.static-height .container__main{aspect-ratio:1/1}:host(.small){--vega-litepicker-day-width:28px;--vega-litepicker-day-height:28px;--vega-date-picker-calendar-range-space-size:16px}:host(.small) .calendar .container__main{max-width:360px;max-height:360px}:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px;margin-bottom:4px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:400;line-height:16px}}:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.small) .calendar .container__days .day-item .is-start-date,:host(.small) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:12px;font-weight:700;line-height:16px;letter-spacing:0px}}:host(.small.range) .calendar .container__main{width:100%;max-width:600px;max-height:360px}:host(.regular){--vega-litepicker-day-width:40px;--vega-litepicker-day-height:40px;--vega-date-picker-calendar-range-space-size:24px}:host(.regular) .calendar .container__main{max-width:450px;max-height:450px}:host(.regular) .calendar .container__months .month-item-header{margin-bottom:12px}:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px}}:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.regular) .calendar .container__days .day-item .is-start-date,:host(.regular) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}:host(.regular.range) .calendar .container__main{width:100%;max-width:900px;max-height:450px}:host(.large){--vega-litepicker-day-width:56px;--vega-litepicker-day-height:56px;--vega-date-picker-calendar-range-space-size:40px}:host(.large) .calendar .container__main{max-width:600px;max-height:600px}:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px;margin-bottom:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__months .month-item-weekdays-row div{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:500;line-height:24px;letter-spacing:0px}}:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}@media screen and (min-width: 768px) and (max-width: 1023px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host(.large) .calendar .container__days .day-item .is-start-date,:host(.large) .calendar .container__days .day-item .is-end-date{font-family:\"Inter\", sans-serif;font-size:20px;font-weight:700;line-height:24px;letter-spacing:0px}}:host(.large.range) .calendar .container__main{width:100%;max-width:1200px;max-height:600px}.calendar .container__main{display:flex;flex-direction:column}.calendar .container__months{display:flex}.calendar .container__months.columns-2{width:100%;flex-direction:row}.calendar .container__months .month-item{box-sizing:content-box;position:relative;width:100%;height:100%;z-index:1;display:flex;flex-direction:column}.calendar .container__months.columns-2 .month-item:first-of-type{padding-right:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months.columns-2 .month-item:last-of-type{padding-left:var(--vega-date-picker-calendar-range-space-size)}.calendar .container__months .month-item:nth-child(2)::before{background-color:rgba(var(--v-bg-divider, 171, 198, 216, 1));margin-top:32px;margin-bottom:32px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;display:none;width:1px;content:\"\";display:block}.calendar .container__months .month-item-header{display:flex;justify-content:space-between;align-items:center;text-align:center;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;color:rgba(var(--v-text-primary, 32, 54, 69, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__months .month-item-header{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px}}.calendar .container__months .month-item-header div>.month-item-name{margin-right:5px}.calendar .container__months .month-item-header .button-previous-month,.calendar .container__months .month-item-header .button-next-month{visibility:hidden;text-decoration:none;cursor:default}.calendar .container__months .month-item-header .button-previous-month *,.calendar .container__months .month-item-header .button-next-month *{pointer-events:none}.calendar .container__months .month-item-header .button-previous-month>svg,.calendar .container__months .month-item-header .button-previous-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-header .button-next-month>svg,.calendar .container__months .month-item-header .button-next-month>img{color:rgba(var(--v-text-primary, 32, 54, 69, 1))}.calendar .container__months .month-item-weekdays-row{color:rgba(var(--v-text-primary, 32, 54, 69, 1));place-items:center}.calendar .container__months .month-item:first-child .button-previous-month{visibility:visible}.calendar .container__months .month-item:last-child .button-next-month{visibility:visible}.calendar .container__months .month-item.no-previous-month .button-previous-month{visibility:hidden}.calendar .container__months .month-item.no-next-month .button-next-month{visibility:hidden}.calendar .container__days{text-align:center;place-items:center;flex:1 1 auto}.calendar.static-height .container__days{align-content:flex-start}.calendar:not(.static-height) .container__days{flex:none}.calendar .container__months .month-item-weekdays-row>div,.calendar .container__days>div,.calendar .container__days>a{padding:4px;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:var(--vega-litepicker-day-height);width:100%;min-width:var(--vega-litepicker-day-width)}.calendar .container__days .day-item{color:rgba(var(--v-text-primary, 32, 54, 69, 1));font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px;text-align:center;border-radius:9999px;cursor:default}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:500;line-height:22px;letter-spacing:0px}}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active{background-color:rgba(var(--v-bg-action-active, 29, 65, 195, 1));color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));border-width:0px}.calendar .day-item.is-start-date.is-end-date.is-locked:active{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1))}.calendar .container__days .day-item:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-locked:hover:before,html.dark .calendar .container__days .day-item.is-locked:hover:before{border-style:none}.calendar .container__days .day-item.is-disabled:hover:before{border-style:none}.calendar .container__days .day-item.is-locked,.calendar .container__days .day-item.is-disabled{-webkit-tap-highlight-color:transparent}.calendar .container__days .day-item:hover{position:relative}.calendar .container__days .day-item.is-today{color:rgba(var(--v-text-link, 19, 98, 226, 1));font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .container__days .day-item.is-today{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:700;line-height:18px}}.calendar .container__days .day-item.is-in-range{border-radius:0px;position:relative;z-index:2;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));border-radius:9999px;position:absolute;top:0px;right:0px;bottom:0px;left:0px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-start-date:hover:before{z-index:2}.calendar .container__days .day-item.is-start-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-start-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-start-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-end-date{background-color:rgba(var(--v-bg-action, 19, 98, 226, 1));border-radius:9999px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));position:relative}.calendar .container__days .day-item.is-end-date:hover:before{z-index:2}.calendar .container__days .day-item.is-end-date:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:9999px;border-bottom-right-radius:9999px;content:\" \";z-index:-1;background-color:rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1))}.calendar .container__days .day-item.is-end-date.is-flipped{border-radius:9999px;position:relative}.calendar .container__days .day-item.is-end-date.is-flipped:after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-top-left-radius:9999px;border-bottom-left-radius:9999px;content:\" \";z-index:-1}.calendar .container__days .day-item.is-start-date.is-end-date{border-radius:9999px}.calendar .container__days .day-item.is-start-date.is-end-date:after,html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after{background:none}.calendar .container__tooltip{display:none}.calendar .container__days .day-item.is-locked{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed}.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days>div{height:var(--vega-date-picker-calendar-day-height)}.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:18px;font-weight:700;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-link, 19, 98, 226, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.calendar .clear-button{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:700;line-height:24px;letter-spacing:0px}}.calendar .footer-container{margin-top:16px;height:24px}:host(.vega-force-hidden){display:none !important}.calendar{left:initial !important;top:initial !important;position:initial !important}.button-next-month svg,.button-previous-month svg{width:12px;height:16px}.calendar .container__days .day-item.is-disabled{color:rgba(var(--v-text-disabled, 176, 180, 181, 1));cursor:not-allowed;text-decoration:line-through}.calendar .container__days>div:not(.day-item){-webkit-tap-highlight-color:transparent}.calendar .month-item-header>div.dropdown-section{display:flex;gap:12px}.calendar .month-item-header>div.dropdown-section .dropdown-current-value{position:relative;display:flex;gap:4px;align-items:center;cursor:pointer}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}.calendar .month-item-header>div.dropdown-section .dropdown-current-value.active:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}.locked-month-button{width:32px;height:32px}vega-dropdown .month-item-name,vega-dropdown .month-item-year{display:flex;gap:4px;align-items:center;cursor:pointer}vega-dropdown.active .month-item-name,vega-dropdown.active .month-item-year{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:active,vega-dropdown.active .month-item-year:active{color:rgba(var(--v-text-link-active, 29, 65, 195, 1))}vega-dropdown.active .month-item-name:hover,vega-dropdown.active .month-item-year:hover{color:rgba(var(--v-text-link-hover, 4, 112, 236, 1))}vega-dropdown.active .month-item-name:focus-visible,vega-dropdown.active .month-item-year:focus-visible{color:rgba(var(--v-text-link-focus, 4, 112, 236, 1))}";
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaDatePickerCalendar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClear = createEvent(this, "vegaClear", 7);
+    this.clear = createEvent(this, "clear", 7);
+    this.vegaMonthYearChange = createEvent(this, "vegaMonthYearChange", 7);
+    this.monthYearChange = createEvent(this, "monthYearChange", 7);
+    this.vegaSelectionChange = createEvent(this, "vegaSelectionChange", 7);
+    this.selectionChange = createEvent(this, "selectionChange", 7);
+    this.globalSlimmers = {};
+    this.renderer = new VegaDatePickerCalendarRenderer();
+    this.monthItemRenderer = new VegaDatePickerMonthItemRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
+    this.todayController = new VegaDatePickerCalendarTodayController();
+    this.selectionController = new VegaDatePickerCalendarSelectionController();
+    this.minMaxDateController = new VegaDatePickerCalendarMinMaxDateController();
+    this.currentPeriodController = new VegaDatePickerCalendarCurrentPeriodController();
+    this.yearMonthSwitcherRender = new VegaDatePickerCalendarYearMonthSwitcherRenderer();
+    this.allowRepickController = new VegaDatePickerCalendarAllowRepickController();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clearEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaClear);
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaMonthYearChange);
+    this.vegaSelectionChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaSelectionChange);
+    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
+    /**
+     * Renders the calendar picker in different sizes. Defaults to regular size
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.size = 'regular';
+    /**
+     * Specifies the selection mode of the date picker calendar.
+     *
+     *  - Use `single` to allow selecting a single date.
+     *  - Use `range` to allow selecting a date range.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.mode = 'single';
+    /**
+     * Specifies the selected date or date range in the date picker calendar.
+     *
+     * @vegaVersion 2.72.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.selection = this.mode === 'range' ? ['', ''] : '';
+    /**
+     * Specifies the desired date format.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.format = 'MM/DD/YYYY';
+    /**
+     * Specifies whether to display the clear button when the calendar is shown.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.clearButton = false;
+    /**
+     * Specifies the calendar is static height.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.staticHeight = false;
+    /**
+     * Determines whether to show months and years dropdown in date picker calendar
+     * If set to true, date picker calendar will have months and years dropdown
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.showYearMonthDropdowns = false;
+    /**
+     * Determines whether the year or month dropdown position is calculated relative to the screen.
+     *
+     * @vegaVersion 2.72.0
+     */
+    this.yearMonthDropdownProps = {};
+    /**
+     * Specifies a predicate function that determines whether a given date in the date picker should be disabled (non-interactive).
+     *
+     * The function is called for each date cell before rendering.
+     *
+     * Return `true` to disable the cell, or false to keep it selectable.
+     * Default behavior: always returns `false` (no cells are disabled).
+     *
+     * @param date - The `Date` object for the cell being evaluated.
+     * @returns `true` if the cell should be disabled; otherwise `false`.
+     * @vegaVersion 2.72.0
+     */
+    this.isDateDisabled = () => false;
+  }
+  watchCurrentPeriod() {
+    methodPlaceholder();
+  }
+  watchCalendarSelection() {
+    methodPlaceholder();
+  }
+  watchMaxCalendarDate() {
+    methodPlaceholder();
+  }
+  watchMinCalendarDate() {
+    methodPlaceholder();
+  }
+  watchSelection() {
+    methodPlaceholder();
+  }
+  watchMinDate() {
+    methodPlaceholder();
+  }
+  watchMaxDate() {
+    methodPlaceholder();
+  }
+  watchTimezone() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to reset calendar to its initial state,
+   * 	it include reset to current value and reset the current period.
+   * @vegaVersion 2.72.0
+   */
+  async reset() {
+    methodPlaceholder();
+  }
+  /**
+   * Invoke this method to trigger repick.
+   *   The param `type` is distinguishing the start date or end date can be repick.
+   * @vegaVersion 2.72.0
+   */
+  async triggerRepick(type) {
+    methodPlaceholder(type);
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: {
+        [this.size]: true,
+        [this.mode]: true,
+        mobile: this.isMobileDevice,
+      } }, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "currentPeriod": ["watchCurrentPeriod"],
+    "calendarSelection": ["watchCalendarSelection"],
+    "maxCalendarDate": ["watchMaxCalendarDate"],
+    "minCalendarDate": ["watchMinCalendarDate"],
+    "selection": ["watchSelection"],
+    "minDate": ["watchMinDate"],
+    "maxDate": ["watchMaxDate"],
+    "timezone": ["watchTimezone"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaDatePickerCalendar.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthItemRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "translationSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "todayController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "selectionController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "minMaxDateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "currentPeriodController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "yearMonthSwitcherRender", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "allowRepickController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "clearEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "vegaSelectionChangeEventEmitter", void 0);
+VegaDatePickerCalendar.style = vegaDatePickerCalendarCss;
+
+export { VegaDatePickerCalendar as vega_date_picker_calendar };