@globalpayments/vega 2.70.0 → 2.75.1

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

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Fragment, h } from '@stencil/core';
-import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { MapToComponentField } from 'vega-slimmer/core';
 import { LogUtility } from '../../../../utils/log';
-import { isDateStr } from '../../../../utils/date';
 import { VegaDatePickerInputRendererBase } from './vega-date-picker-input-renderer-base.abstract';
+import { CalendarDate } from '../../../../helpers/calendar';
 export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendererBase {
   constructor() {
     super(...arguments);
@@ -16,12 +16,16 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
       return (h(Fragment, null,
         h("div", { class: "date-picker-input" },
           this.vegaDatePickerRenderer.renderInputPrefix(),
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled })),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[0], value: this.vegaDatePickerValueController.getValue()[0], ref: (ref) => (this.startDateInputRef = ref), onChange: this.onStartDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('start') })),
         h("span", { class: {
             'range-input-divider': true,
           } }),
         h("div", { class: "date-picker-input" },
-          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled }),
+          h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getRangePlaceholder()[1], value: this.vegaDatePickerValueController.getValue()[1], ref: (ref) => (this.endDateInputRef = ref), onChange: this.onEndDateChange, disabled: this.disabled, 
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: async () => await this.onInputClicked('end') }),
           this.renderClearIcon())));
     };
     this.getRangePlaceholder = () => {
@@ -41,7 +45,7 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
     this.onStartDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue([
           this.vegaDatePickerFormatController.formatDate(date),
           this.vegaDatePickerValueController.getValue()[1],
@@ -63,7 +67,7 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
     this.onEndDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue([
           this.vegaDatePickerValueController.getValue()[0],
           this.vegaDatePickerFormatController.formatDate(date),
@@ -79,21 +83,15 @@ export class VegaDatePickerRangeInputRenderer extends VegaDatePickerInputRendere
       }
     };
   }
-  componentWillRender() {
-    this.oldStartDateInputRef = this.startDateInputRef;
-    this.oldEndDateInputRef = this.endDateInputRef;
-  }
   getStartDateInputRef() {
     return this.startDateInputRef;
   }
   getEndDateInputRef() {
     return this.endDateInputRef;
   }
-  getOldStartDateInputRef() {
-    return this.oldStartDateInputRef;
-  }
-  getOldEndDateInputRef() {
-    return this.oldEndDateInputRef;
+  async onInputClicked(type) {
+    await this.calendarOpenStateController.showCalendar();
+    await this.vegaDatePickerCalendarRenderer.triggerRepick(type);
   }
 }
 __decorate([
@@ -105,9 +103,18 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "calendarOpenStateController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRangeInputRenderer.prototype, "translationSlimmer", void 0);
 __decorate([
-  MapToComponentMethod('componentWillRender')
-], VegaDatePickerRangeInputRenderer.prototype, "componentWillRender", null);
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "allowRepick", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerRangeInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);

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

@@ -18,9 +18,10 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
       return (h("div", { class: "vega-input-prefix" },
         h("vega-icon", { icon: VegaInternalIconManager.getIconKey('calendar'), color: "text-secondary", 
           // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => {
+          onClick: async () => {
             if (!this.disabled) {
-              this.focusInput();
+              await this.focusInput();
+              await this.vegaDatePickerCalendarRenderer.triggerRepick('start');
             }
           } })));
     };
@@ -29,13 +30,13 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
      * on mobile, the input is ready-only to avoid virtual keyboard
      */
     this.isInputEnabled = () => {
-      return !this.readOnly && !this.vegaDatePickerMobileController.getIsMobileDevice();
+      return !this.readOnly && !this.isMobileDevice;
     };
     this.renderLabel = () => {
       return (this.label && (h("vega-field-label", { ref: (e) => {
           /* istanbul ignore next */
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, () => {
-            this.focusInput();
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaClick, async () => {
+            await this.focusInput();
           });
         }, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
     };
@@ -44,11 +45,11 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
      * @see{module:vega-date-picker-click-label-focus-input-e2e}
      */
     /* istanbul ignore next */
-    this.focusInput = () => {
+    this.focusInput = async () => {
       var _a, _b;
       (_a = this.vegaDatePickerSingleInputRenderer.getSingleDateInputRef()) === null || _a === void 0 ? void 0 : _a.focus();
       (_b = this.vegaDatePickerRangeInputRenderer.getStartDateInputRef()) === null || _b === void 0 ? void 0 : _b.focus();
-      this.vegaDatePickerCalendarRenderer.getDatePicker().show();
+      await this.calendarOpenStateController.showCalendar();
     };
   }
   getDatePickerContainer() {
@@ -59,19 +60,16 @@ export class VegaDatePickerRenderer extends VegaSlimmer {
       'vega-input-container',
       this.size,
       `${this.mode}-mode`,
-      this.vegaDatePickerMobileController.getIsMobileDevice()
-        ? /* istanbul ignore next */ 'mobile'
-        : '',
+      this.isMobileDevice ? /* istanbul ignore next */ 'mobile' : '',
     ];
     return (h(Host, { class: {
         disabled: this.disabled,
       } },
       this.renderLabel(),
-      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) },
-        this.mode === 'range'
-          ? this.vegaDatePickerRangeInputRenderer.render()
-          : this.vegaDatePickerSingleInputRenderer.render(),
-        this.showYearMonthDropdowns && this.monthYearDropdownRenderer.render())));
+      h("div", { class: arrayToClassString(classNames), ref: (ref) => (this.datePickerContainer = ref) }, this.mode === 'range'
+        ? this.vegaDatePickerRangeInputRenderer.render()
+        : this.vegaDatePickerSingleInputRenderer.render()),
+      this.vegaDatePickerCalendarRenderer.render()));
   }
 }
 (() => {
@@ -103,10 +101,7 @@ __decorate([
 ], VegaDatePickerRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerRenderer.prototype, "showYearMonthDropdowns", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerRenderer.prototype, "vegaDatePickerMobileController", void 0);
+], VegaDatePickerRenderer.prototype, "isMobileDevice", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerSingleInputRenderer", void 0);
@@ -118,4 +113,4 @@ __decorate([
 ], VegaDatePickerRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerRenderer.prototype, "monthYearDropdownRenderer", void 0);
+], VegaDatePickerRenderer.prototype, "calendarOpenStateController", void 0);

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

@@ -5,10 +5,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { h } from '@stencil/core';
-import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { MapToComponentField } from 'vega-slimmer/core';
 import { LogUtility } from '../../../../utils/log';
-import { isDateStr } from '../../../../utils/date';
 import { VegaDatePickerInputRendererBase } from './vega-date-picker-input-renderer-base.abstract';
+import { CalendarDate } from '../../../../helpers/calendar';
 export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRendererBase {
   constructor() {
     super(...arguments);
@@ -16,10 +16,8 @@ export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRender
       return (h("div", { class: "date-picker-input" },
         this.vegaDatePickerRenderer.renderInputPrefix(),
         h("input", { readOnly: !this.vegaDatePickerRenderer.isInputEnabled(), placeholder: this.getSinglePlaceholder(), value: this.vegaDatePickerValueController.getValue(), ref: (ref) => (this.singleDateInputRef = ref), onChange: this.onSingleDateChange, disabled: this.disabled, 
-          // eslint-disable-next-line react/jsx-no-bind
-          onClick: () => {
-            this.vegaDatePickerCalendarRenderer.getDatePicker().show();
-          } }),
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onClick: () => this.calendarOpenStateController.showCalendar() }),
         this.renderClearIcon()));
     };
     this.getSinglePlaceholder = () => {
@@ -39,7 +37,7 @@ export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRender
     this.onSingleDateChange = (e) => {
       const currentTarget = e.currentTarget;
       const date = currentTarget.value;
-      if (isDateStr(date)) {
+      if (CalendarDate.fromString(date, this.format)) {
         this.vegaDatePickerValueController.setValue(this.vegaDatePickerFormatController.formatDate(date));
       }
       else {
@@ -49,15 +47,9 @@ export class VegaDatePickerSingleInputRenderer extends VegaDatePickerInputRender
       }
     };
   }
-  componentWillRender() {
-    this.oldSingleDateInputRef = this.singleDateInputRef;
-  }
   getSingleDateInputRef() {
     return this.singleDateInputRef;
   }
-  getOldSingleDateInputRef() {
-    return this.oldSingleDateInputRef;
-  }
 }
 __decorate([
   MapToComponentField()
@@ -73,7 +65,4 @@ __decorate([
 ], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerRenderer", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerSingleInputRenderer.prototype, "vegaDatePickerCalendarRenderer", void 0);
-__decorate([
-  MapToComponentMethod('componentWillRender')
-], VegaDatePickerSingleInputRenderer.prototype, "componentWillRender", null);
+], VegaDatePickerSingleInputRenderer.prototype, "calendarOpenStateController", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/constants.js

@@ -0,0 +1,14 @@
+export const MonthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/dto/calendar-selection.js

@@ -0,0 +1,126 @@
+import { CalendarDate } from '../../../../helpers/calendar';
+import { isCalendarDateType } from '../../../../types/type-guard';
+import { LogUtility } from '../../../../utils/log';
+/** Calendar selection object. */
+export 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);
+  }
+}

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

@@ -0,0 +1,70 @@
+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 { isCalendarDateType } from '../../../../../types/type-guard';
+import { MonthPeriod } from '../../../../../helpers/calendar';
+/** Allow repick controller. */
+export 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([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "calendarSelection", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarAllowRepickController.prototype, "currentPeriodController", void 0);
+__decorate([
+  MapToComponentMethod('triggerRepick')
+], VegaDatePickerCalendarAllowRepickController.prototype, "triggerRepick", null);
+__decorate([
+  MapToComponentMethod('watchCalendarSelection')
+], VegaDatePickerCalendarAllowRepickController.prototype, "watchCalendarSelection", null);

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

@@ -0,0 +1,204 @@
+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 { MonthPeriod } from '../../../../../helpers/calendar';
+import { isCalendarDateType } from '../../../../../types/type-guard';
+import { MonthNames } from '../../constants';
+import { VegaDatePickerCalendarStateBaseAbstract } from './vega-date-picker-calendar-state-base.abstract';
+import { VegaInternalDatePickerCalendarUpdatePeriodByUser } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+/** Current period controller. */
+export 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([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "currentPeriod", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "today", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "mode", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "format", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "timezone", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "minCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "maxCalendarDate", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "isMobileDevice", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "monthYearChangeEventEmitter", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "calendarSelection", void 0);
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "disconnectedCallback", null);
+__decorate([
+  MapToComponentMethod('componentWillLoad')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "componentWillLoad", null);
+__decorate([
+  MapToComponentMethod('watchMaxCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMaxCalendarDate", null);
+__decorate([
+  MapToComponentMethod('watchMinCalendarDate')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchMinCalendarDate", null);
+__decorate([
+  MapToComponentMethod('watchCurrentPeriod')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "watchCurrentPeriod", null);
+__decorate([
+  MapToComponentMethod('reset')
+], VegaDatePickerCalendarCurrentPeriodController.prototype, "resetCurrentPeriod", null);