@globalpayments/vega 2.70.0 → 2.73.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-min-max-date-controller.js

@@ -0,0 +1,56 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { VegaSlimmer, MapToComponentMethod, MapToComponentField } from 'vega-slimmer/core';
+import { CalendarDate } from '../../../../../helpers/calendar';
+/** Current min and max calendar date controller. */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarMinMaxDateController.prototype, "format", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "maxCalendarDate", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarMinMaxDateController.prototype, "minCalendarDate", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchMaxDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMaxDate", null);
+__decorate([
+  MapToComponentMethod('watchMinDate')
+], VegaDatePickerCalendarMinMaxDateController.prototype, "watchMinDate", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-selection-controller.js

@@ -0,0 +1,191 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { isArrayEqual } from '../../../../../utils/array';
+import { VegaDatePickerCalendarStateBaseAbstract } from './vega-date-picker-calendar-state-base.abstract';
+import { CalendarSelection } from '../../dto/calendar-selection';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDatePickerCalendarUpdatePeriodByUser } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/** Selection controller */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "format", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "selection", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "calendarSelection", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSelectionController.prototype, "hoverDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "clearEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "vegaSelectionChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSelectionController.prototype, "allowRepickController", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarSelectionController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchSelection", null);
+__decorate([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarSelectionController.prototype, "resetRange", null);
+__decorate([
+  MapToComponentMethod('watchCalendarSelection')
+], VegaDatePickerCalendarSelectionController.prototype, "watchCalendarSelection", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-state-base.abstract.js

@@ -0,0 +1,54 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { Observer } from '../../../../../helpers/change-manager/observer/observer';
+import { VegaInternalDatePickerCalendarClear } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+/**
+ * Date picker calendar state base abstract class
+ */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "host", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarStateBaseAbstract.prototype, "disconnectedCallback", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-today-controller.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { CalendarDate } from '../../../../../helpers/calendar';
+/** Today controller */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarTodayController.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarTodayController.prototype, "today", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarTodayController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('watchTimezone')
+], VegaDatePickerCalendarTodayController.prototype, "watchTimezone", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-renderer.js

@@ -0,0 +1,76 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Fragment, h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaClick } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import changeManager from '../../../../../helpers/change-manager/change-manager';
+import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalDatePickerCalendarClear } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearButton", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "monthItemRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "staticHeight", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "clearEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarRenderer.prototype, "isMobileDevice", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-year-month-switcher-renderer.js

@@ -0,0 +1,192 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { CalendarDate, MonthPeriod } from '../../../../../helpers/calendar';
+import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
+import { Icons } from '../../../assets/icons';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+import { VegaDropdownClick, VegaDropdownHide, VegaDropdownShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
+import { MonthNames } from '../../constants';
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriodController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "showYearMonthDropdowns", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "translationSlimmer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "minCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "maxCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "yearMonthDropdownProps", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);