@globalpayments/vega 2.70.0 → 2.75.1

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-range-dropdown-controller.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerRangeDropdownController` class is responsible for managing the dropdown menu for selecting a range of time in the VegaTimePicker component. */
 export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimmer {
   /**
@@ -29,7 +30,7 @@ export class VegaTimePickerRangeDropdownController extends ElementAppenderSlimme
         placement: ['bottom', 'top'],
         matchTargetWidth: true,
       };
-    }, () => 'custom', 'isRangeDropdownShow');
+    }, () => new ClickOutsideOnlyToDismissStrategy(), 'isRangeDropdownShow');
     this.isRangeDropdownShow = false;
     this.rangeDropdownType = 'start';
     /*

package/dist/collection/components/vega-time-picker/slimmers/controllers/vega-time-picker-single-dropdown-controller.js

@@ -8,6 +8,7 @@ import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { ElementAppenderSlimmer } from '../../../../helpers/slimmers/element-appender/element-appender-slimmer';
 import { LogUtility } from '../../../../utils/log';
 import { pad } from '../../../../utils/date';
+import { ClickOutsideOnlyToDismissStrategy } from '../../../../helpers/slimmers/element-appender/trigger-strategies/click-outside-only-to-dismiss-strategy';
 /** The `VegaTimePickerDropdownController` class is responsible for managing the dropdown functionality of the VegaTimePicker component in a TypeScript application. */
 export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimmer {
   /**
@@ -23,7 +24,7 @@ export class VegaTimePickerSingleDropdownController extends ElementAppenderSlimm
       positionRelativeTo: this.positionRelativeTo,
       translocation: { X: 0, Y: 8 },
       placement: ['bottom', 'top'],
-    }), () => 'custom');
+    }), () => new ClickOutsideOnlyToDismissStrategy());
   }
   /**
    * The function initializes a value controller and dropdown source.

package/dist/collection/constants/regex.js

@@ -4,3 +4,4 @@ export const VisaRegex = /^4/;
 export const MasterCardRegex = /^(5[1-5]|677189)|^(222[1-9]|2[3-6]\d{2}|27[0-1]\d|2720)/;
 export const AmexRegex = /^3[47]/;
 export const DiscoverRegex = /^(6011|65|64[4-9]|622)/;
+export const DateFormatParserRegex = /(\\)?(Y{2,4}|M{1,4}|D{1,2}|d{1,4})/g;

package/dist/collection/constants/ui.js

@@ -88,6 +88,11 @@ export const VegaNativeEventName = [
   'monthYearChange',
   'complete',
   'paste',
+  'clear',
+  'periodChange',
+  'selectionChange',
+  'suggestionItemClick',
+  'nativeInputChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/helpers/calendar/calendar-date.js

@@ -1,6 +1,10 @@
 import { VegaInternalTranslation } from '../translation';
 import { CalendarDateTime } from './calendar-date-time';
 import { getSystemTimezone } from './utils';
+import { DateFormatParserRegex } from '../../constants/regex';
+import { compareIsAfter, compareIsBefore, pad } from '../../utils/date';
+// TODO: Need rename calendar-date as vega-date to manage all date operation in vega project
+// https://gethired.atlassian.net/browse/VD-5918
 /**
  * Calendar date class
  */
@@ -20,6 +24,153 @@ export class CalendarDate {
   static from(currentDate, timezone = getSystemTimezone()) {
     return CalendarDateTime.fromDate(currentDate, timezone).calendarDate;
   }
+  /**
+   * Converts a date string to CalendarDate with optional format and timezone parameters.
+   *
+   * @param {string} dateString - The string date.
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - lang
+   * @returns {Nullable<CalendarDate>} - CalendarDate.
+   */
+  static fromString(dateString, format = 'MM/DD/YYYY', lang = 'en-us') {
+    if (!dateString)
+      return null;
+    const formatMatchers = [];
+    let formatMatcher = null;
+    // Analyze the format and find the corresponding positions for year, month, and day.
+    // Data: formatMatchers = [['DD', index: 0, ...], ['MM', index: 3, ...], ['YYYY', index: 7, ...]]
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      const datePattern = {
+        year: undefined,
+        month: undefined,
+        shortMonth: undefined,
+        longMonth: undefined,
+        day: undefined,
+        value: '',
+      };
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        datePattern.value += '.*?';
+      }
+      // According `matchers` to generate a new regex which can parse the date by corresponding year, month and day
+      // Data: dateRegex = "(\d{2}).*?(\d{2}).*?(\d{4}).*?"
+      //       datePattern = {day: 1, longMonth: null, month: 2, shortMonth: null, year: 3, value: "(\d{2}).*?(\d{2}).*?(\d{4}).*?"}
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          const { group, pattern } = this.getPatternByFormatToken(match[0], lang);
+          datePattern[group] = key + 1;
+          datePattern.value += pattern;
+          datePattern.value += '.*?';
+        }
+      }
+      const dateRegex = new RegExp(`^${datePattern.value}$`);
+      if (dateRegex.test(dateString)) {
+        // Parse the date
+        // Example: parsedDate = ['08-02-2020', '08', '02', '2020']
+        const parsedDate = dateRegex.exec(dateString);
+        if (parsedDate &&
+          datePattern.year &&
+          (datePattern.month || datePattern.shortMonth || datePattern.longMonth) &&
+          datePattern.day) {
+          const year = Number(parsedDate[datePattern.year]);
+          let month = 1;
+          if (datePattern.month) {
+            month = Number(parsedDate[datePattern.month]) - 1;
+          }
+          else if (datePattern.shortMonth) {
+            month = this.shortMonths(lang).indexOf(parsedDate[datePattern.shortMonth]);
+          }
+          else if (datePattern.longMonth) {
+            month = this.longMonths(lang).indexOf(parsedDate[datePattern.longMonth]);
+          }
+          const day = Number(parsedDate[datePattern.day]);
+          const fullYear = Number(pad(year, 4, `${new Date().getFullYear()}`.slice(0, 2)));
+          if (isNaN(Date.parse(`${fullYear}-${pad(month + 1)}-${pad(day)}`)))
+            return null;
+          return this.from(new Date(fullYear, month, day, 0, 0, 0, 0));
+        }
+      }
+    }
+    return this.from(new Date(dateString));
+  }
+  /**
+   * Get regex pattern by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {FormatPatternType} - regex pattern.
+   */
+  static getPatternByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+      case 'YYYY':
+        return {
+          group: 'year',
+          pattern: `(\\d{${token.length}})`,
+        };
+      case 'M':
+        return {
+          group: 'month',
+          pattern: '(\\d{1,2})',
+        };
+      case 'MM':
+        return {
+          group: 'month',
+          pattern: '(\\d{2})',
+        };
+      case 'MMM':
+        return {
+          group: 'shortMonth',
+          pattern: `(${this.shortMonths(lang).join('|')})`,
+        };
+      case 'MMMM':
+        return {
+          group: 'longMonth',
+          pattern: `(${this.longMonths(lang).join('|')})`,
+        };
+      case 'D':
+        return {
+          group: 'day',
+          pattern: '(\\d{1,2})',
+        };
+      case 'DD':
+        return {
+          group: 'day',
+          pattern: '(\\d{2})',
+        };
+      /* istanbul ignore next */
+      default: {
+        return {
+          group: 'unknown',
+          pattern: '(.*)',
+        };
+      }
+    }
+  }
+  /**
+   * Shorts months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Shorts months.
+   */
+  static shortMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'short' }));
+  }
+  /**
+   * Long months.
+   *
+   * @param {string} lang - Language
+   * @returns {string[]} - Long months.
+   */
+  static longMonths(lang) {
+    return this.MONTHS.map((month) => new Date(2019, month).toLocaleString(lang, { month: 'long' }));
+  }
   /**
    * The year of the calendar date
    *
@@ -53,6 +204,44 @@ export class CalendarDate {
   set date(value) {
     this._date = value;
   }
+  /**
+   * Converts CalendarDate to a string with an optional format specifier.
+   *
+   * @param {string} [format] - The format of string date
+   * @param {string} [lang] - Language
+   * @returns {string} The string date.
+   */
+  toString(format = 'MM/DD/YYYY', lang = 'en-us') {
+    let result = '';
+    const formatMatchers = [];
+    let formatMatcher = null;
+    while ((formatMatcher = DateFormatParserRegex.exec(format)) != null) {
+      if (formatMatcher[1] === '\\')
+        continue;
+      formatMatchers.push(formatMatcher);
+    }
+    if (formatMatchers.length) {
+      // add start line of tokens are not at the beginning
+      const firstMatcher = formatMatchers[0];
+      if (firstMatcher && firstMatcher.index > 0) {
+        result += format.substring(0, firstMatcher.index);
+      }
+      for (const [k, match] of Object.entries(formatMatchers)) {
+        const key = Number(k);
+        if (match) {
+          result += this.getDateItemByFormatToken(match[0], lang);
+          const nextMatch = formatMatchers[key + 1];
+          if (nextMatch) {
+            result += format.substring(match.index + match[0].length, nextMatch.index);
+          }
+          if (key === formatMatchers.length - 1) {
+            result += format.substring(match.index + match[0].length);
+          }
+        }
+      }
+    }
+    return result.replace(/\\/g, '');
+  }
   /**
    * Verify whether the calendar date is today
    *
@@ -112,11 +301,13 @@ export class CalendarDate {
   /**
    * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
    *
-   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * @param {Nullable<CalendarDate>} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
    * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
    * @returns {boolean} The date is same day with current
    */
   equal(calendarDate) {
+    if (!calendarDate)
+      return false;
     const { year, month, date } = calendarDate;
     return this._year === year && this._month === month && this._date === date;
   }
@@ -131,4 +322,85 @@ export class CalendarDate {
       month: isShortName ? 'short' : 'long',
     }));
   }
+  /**
+   * To determine if it is larger than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isAfter(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsAfter(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * To determine if it is less than a given `CalendarDate`.
+   *
+   * @param {Nullable<CalendarDate>} calendarDate - A `CalendarDate`
+   * @returns {boolean} - Compared result
+   */
+  isBefore(calendarDate) {
+    if (!calendarDate)
+      return false;
+    return compareIsBefore(this.toDate(), calendarDate.toDate());
+  }
+  /**
+   * Get first day of month.
+   *
+   * @returns {CalendarDate} - First day of month.
+   */
+  firstDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month - 1, 1));
+  }
+  /**
+   * Get last day of month.
+   *
+   * @returns {CalendarDate} - Last day of month.
+   */
+  lastDateOfMonth() {
+    return CalendarDate.from(new Date(this.year, this.month, 0));
+  }
+  /**
+   * Adjusts the calendar date by adding the specified number of years, months, and days.
+   *
+   * @param {number} [years=0] - The number of years to add.
+   * @param {number} [months=0] - The number of months to add.
+   * @param {number} [days=0] - The number of days to add.
+   * @returns {CalendarDate} - A new CalendarDate object with the adjusted date.
+   */
+  add(years = 0, months = 0, days = 0) {
+    const currentDate = this.toDate();
+    const adjustedDate = new Date(currentDate.getFullYear() + years, currentDate.getMonth() + months, currentDate.getDate() + days);
+    return CalendarDate.from(adjustedDate);
+  }
+  /**
+   * Get year, month and day value by format token.
+   *
+   * @param {string} token - The format token.
+   * @param {string} lang - Language.
+   * @returns {string} - year, month and day value.
+   */
+  getDateItemByFormatToken(token, lang) {
+    switch (token) {
+      case 'YY':
+        return String(this.year).slice(-2);
+      case 'YYYY':
+        return String(this.year);
+      case 'M':
+        return String(this.month);
+      case 'MM':
+        return `0${this.month}`.slice(-2);
+      case 'MMM':
+        return CalendarDate.shortMonths(lang)[this.month - 1];
+      case 'MMMM':
+        return CalendarDate.longMonths(lang)[this.month - 1];
+      case 'D':
+        return String(this.date);
+      case 'DD':
+        return `0${this.date}`.slice(-2);
+      default:
+        return '';
+    }
+  }
 }
+CalendarDate.MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

package/dist/collection/helpers/calendar/calendar-period/calendar-period.abstract.js

@@ -83,6 +83,15 @@ export class CalendarPeriod {
   now() {
     return this.createBy(CalendarDate.from(new Date(), this._timezone));
   }
+  /**
+   * Check the give period is equal to current period
+   *
+   * @param {CalendarPeriod} [period] - Give period to compare
+   * @returns {boolean} compare result
+   */
+  equal(period) {
+    return this.startDate.equal(period.startDate) && this.endDate.equal(period.endDate);
+  }
   /**
    * Calculate the period start date and end date.
    *

package/dist/collection/helpers/calendar/calendar-period/month-period.js

@@ -43,16 +43,28 @@ export class MonthPeriod extends CalendarPeriod {
    * @inheritDoc
    */
   next() {
-    const next = this.current.toDate();
-    next.setMonth(next.getMonth() + 1);
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() + 1;
+    const day = current.getDate();
+    // Get the last day of the next month
+    const lastDayOfNextMonth = new Date(year, month + 1, 0).getDate();
+    const nextDay = Math.min(day, lastDayOfNextMonth);
+    const next = new Date(year, month, nextDay);
     return this.createBy(CalendarDate.from(next));
   }
   /**
    * @inheritDoc
    */
   previous() {
-    const previous = this.current.toDate();
-    previous.setMonth(previous.getMonth() - 1);
+    const current = this.current.toDate();
+    const year = current.getFullYear();
+    const month = current.getMonth() - 1;
+    const day = current.getDate();
+    // Get the last day of the previous month
+    const lastDayOfPreviousMonth = new Date(year, month + 1, 0).getDate();
+    const previousDay = Math.min(day, lastDayOfPreviousMonth);
+    const previous = new Date(year, month, previousDay);
     return this.createBy(CalendarDate.from(previous));
   }
   /**

package/dist/collection/helpers/calendar/test/calendar-date.test.js

@@ -1,3 +1,4 @@
+import { LogUtility } from '../../../utils/log';
 import { CalendarDate } from '../calendar-date';
 describe('calendar-date', () => {
   it('should new a calendar date with value', () => {
@@ -72,6 +73,78 @@ describe('calendar-date', () => {
     expect(new CalendarDate(2024, 2, 10).getMonthName()).toBe('February');
     expect(new CalendarDate(2024, 2, 10).getMonthName(true)).toBe('Feb');
   });
+  it('should return as expected when set timezone', () => {
+    spyOn(LogUtility, 'warn');
+    CalendarDate.from(new Date('2025-03-25T05:30:00.211Z'), 'test');
+    expect(LogUtility.warn).toHaveBeenCalledWith(`Invalid timezone:`, expect.anything());
+    expect(CalendarDate.from(new Date('2025-03-25T05:30:00.211Z'), 'Etc/GMT+8').date).toEqual(24);
+  });
+  it('should return compare result when call large', () => {
+    const calendarDate = new CalendarDate(2024, 2, 10);
+    expect(calendarDate.isAfter(new CalendarDate(2023, 2, 10))).toEqual(true);
+    expect(calendarDate.isAfter(new CalendarDate(2024, 1, 10))).toEqual(true);
+    expect(calendarDate.isAfter(new CalendarDate(2024, 2, 9))).toEqual(true);
+    expect(calendarDate.isAfter(new CalendarDate(2024, 2, 10))).toEqual(false);
+    expect(calendarDate.isAfter(new CalendarDate(2025, 2, 10))).toEqual(false);
+    expect(calendarDate.isAfter(new CalendarDate(2024, 3, 10))).toEqual(false);
+    expect(calendarDate.isAfter(new CalendarDate(2024, 2, 12))).toEqual(false);
+    expect(calendarDate.isAfter(null)).toEqual(false);
+  });
+  it('should return compare result when call less', () => {
+    const calendarDate = new CalendarDate(2024, 2, 10);
+    expect(calendarDate.isBefore(new CalendarDate(2023, 2, 10))).toEqual(false);
+    expect(calendarDate.isBefore(new CalendarDate(2024, 1, 10))).toEqual(false);
+    expect(calendarDate.isBefore(new CalendarDate(2024, 2, 9))).toEqual(false);
+    expect(calendarDate.isBefore(new CalendarDate(2024, 2, 10))).toEqual(false);
+    expect(calendarDate.isBefore(new CalendarDate(2025, 2, 10))).toEqual(true);
+    expect(calendarDate.isBefore(new CalendarDate(2024, 3, 10))).toEqual(true);
+    expect(calendarDate.isBefore(new CalendarDate(2024, 2, 12))).toEqual(true);
+    expect(calendarDate.isBefore(null)).toEqual(false);
+  });
+  it('should return as expected when call fromString and toString method', () => {
+    expect(CalendarDate.fromString('03/12/2012').toString()).toEqual('03/12/2012');
+    expect(CalendarDate.fromString('2012-03-12', 'YYYY-MM-DD').toString('DD/MM/YYYY')).toEqual('12/03/2012');
+    expect(CalendarDate.fromString('2012-03-12', 'YYYY-MM-DD').toString()).toEqual('03/12/2012');
+    expect(CalendarDate.fromString('2012-24-24', 'YYYY-MM-DD')).toEqual(null);
+    expect(CalendarDate.fromString('03/12/2012', 'YYYY-MM-DD').toString()).toEqual('03/12/2012');
+    expect(CalendarDate.fromString('10-9-8', 'YY-M-D').toString()).toEqual('09/08/2010');
+    expect(CalendarDate.fromString('10-Aug-8', 'YY-MMM-D').toString()).toEqual('08/08/2010');
+    expect(CalendarDate.fromString('10-March-8', 'YY-MMMM-D').toString()).toEqual('03/08/2010');
+    expect(CalendarDate.fromString('10-March-8', 'YY\\D').toString()).toEqual('03/10/2008');
+    expect(CalendarDate.fromString('-2022-10-8', '-YYYY-MM-DD').toString()).toEqual('10/08/2022');
+    expect(CalendarDate.fromString('2022-10', '-YYYY-MM').toString()).toEqual('10/01/2022');
+    expect(CalendarDate.fromString('')).toEqual(null);
+    const date = CalendarDate.fromString('2012-03-12', 'YYYY-MM-DD');
+    expect(date.toString('YYYY-MMM-DD')).toEqual('2012-Mar-12');
+    expect(date.toString('YYYY-MMMM-DD')).toEqual('2012-March-12');
+    expect(date.toString('YY-M-D')).toEqual('12-3-12');
+    expect(date.toString('YY-M-TT')).toEqual('12-3-TT');
+    expect(date.toString('YY\\DD')).toEqual('12DD');
+    expect(date.toString('--YYYY-DD-MM')).toEqual('--2012-12-03');
+    expect(date.toString('MM-dd')).toEqual('03-');
+  });
+  it('should return as expected when call firstDateOfMonth method', () => {
+    expect(CalendarDate.fromString('03/12/2012').firstDateOfMonth().toString()).toEqual('03/01/2012');
+    expect(CalendarDate.fromString('02/12/2012').firstDateOfMonth().toString()).toEqual('02/01/2012');
+    expect(CalendarDate.fromString('2012-12-24', 'YYYY-MM-DD').firstDateOfMonth().toString()).toEqual('12/01/2012');
+  });
+  it('should return as expected when call lastDateOfMonth method', () => {
+    expect(CalendarDate.fromString('03/12/2012').lastDateOfMonth().toString()).toEqual('03/31/2012');
+    expect(CalendarDate.fromString('02/12/2012').lastDateOfMonth().toString()).toEqual('02/29/2012');
+    expect(CalendarDate.fromString('2012-11-24', 'YYYY-MM-DD').lastDateOfMonth().toString()).toEqual('11/30/2012');
+  });
+  it('should return as expected when call add method', () => {
+    const date = CalendarDate.fromString('03/12/2012');
+    expect(date.add(3).toString()).toEqual('03/12/2015');
+    expect(date.add(-3).toString()).toEqual('03/12/2009');
+    expect(date.add(0, 10).toString()).toEqual('01/12/2013');
+    expect(date.add(0, -10).toString()).toEqual('05/12/2011');
+    expect(date.add(0, 0, 30).toString()).toEqual('04/11/2012');
+    expect(date.add(0, 0, -30).toString()).toEqual('02/11/2012');
+    expect(date.add(3, 10, 30).toString()).toEqual('02/11/2016');
+    expect(date.add(-3, -10, -30).toString()).toEqual('04/12/2008');
+    expect(date.add().toString()).toEqual('03/12/2012');
+  });
 });
 describe('CalendarDate Timezone', () => {
   it('should create calendar date', () => {

package/dist/collection/helpers/calendar/test/calendar-period/day-period.test.js

@@ -78,6 +78,15 @@ describe('day-period', () => {
     dayPeriod = dayPeriod.previous();
     expect(dayPeriod.current.date).toEqual(8);
   });
+  it('should return proper when call equal', () => {
+    const period1 = new DayPeriod(new CalendarDate(2022, 4, 5));
+    const period2 = new DayPeriod(new CalendarDate(2022, 4, 5));
+    const period3 = new DayPeriod(new CalendarDate(2022, 4, 6));
+    const period4 = new DayPeriod(new CalendarDate(2022, 5, 5));
+    expect(period1.equal(period2)).toEqual(true);
+    expect(period1.equal(period3)).toEqual(false);
+    expect(period1.equal(period4)).toEqual(false);
+  });
 });
 describe('DayPeriod Timezone', () => {
   beforeEach(() => {

package/dist/collection/helpers/calendar/test/calendar-period/month-period.test.js

@@ -47,6 +47,36 @@ describe('month-period', () => {
       endDate: new CalendarDate(2020, 6, 6),
     });
   });
+  it('should go to next month when call next with timezone', () => {
+    const monthPeriod = new MonthPeriod(CalendarDate.fromString('12/01/2025', 'Etc/GMT+12'), true, 'Etc/GMT+12');
+    const { current, count, startDate, endDate } = monthPeriod.next();
+    expect({ current, count, startDate, endDate }).toEqual({
+      count: 42,
+      current: new CalendarDate(2026, 1, 1),
+      startDate: new CalendarDate(2025, 12, 28),
+      endDate: new CalendarDate(2026, 2, 7),
+    });
+  });
+  it('should go to next month when call next with last day of month', () => {
+    const monthPeriod = new MonthPeriod(new CalendarDate(2020, 1, 31));
+    const { current, count, startDate, endDate } = monthPeriod.next();
+    expect({ current, count, startDate, endDate }).toEqual({
+      count: 42,
+      current: new CalendarDate(2020, 2, 29),
+      startDate: new CalendarDate(2020, 1, 26),
+      endDate: new CalendarDate(2020, 3, 7),
+    });
+  });
+  it('should go to previous month when call previous with last day of month', () => {
+    const monthPeriod = new MonthPeriod(new CalendarDate(2020, 3, 31));
+    const { current, count, startDate, endDate } = monthPeriod.previous();
+    expect({ current, count, startDate, endDate }).toEqual({
+      count: 42,
+      current: new CalendarDate(2020, 2, 29),
+      startDate: new CalendarDate(2020, 1, 26),
+      endDate: new CalendarDate(2020, 3, 7),
+    });
+  });
   it('should go to previous month when call previous', () => {
     const monthPeriod = new MonthPeriod();
     const { current, count, startDate, endDate } = monthPeriod.previous();
@@ -65,6 +95,17 @@ describe('month-period', () => {
       date: 1,
     });
   });
+  it('should return proper when call equal', () => {
+    const period1 = new MonthPeriod(new CalendarDate(2022, 4, 5));
+    const period2 = new MonthPeriod(new CalendarDate(2022, 4, 5));
+    const period3 = new MonthPeriod(new CalendarDate(2022, 4, 30));
+    const period4 = new MonthPeriod(new CalendarDate(2022, 5, 5));
+    const period5 = new MonthPeriod(new CalendarDate(2021, 4, 5));
+    expect(period1.equal(period2)).toEqual(true);
+    expect(period1.equal(period3)).toEqual(true);
+    expect(period1.equal(period4)).toEqual(false);
+    expect(period1.equal(period5)).toEqual(false);
+  });
 });
 describe('MonthPeriod Timezone', () => {
   beforeEach(() => {

package/dist/collection/helpers/calendar/test/calendar-period/week-period.test.js

@@ -57,6 +57,17 @@ describe('week-period', () => {
       endDate: new CalendarDate(2020, 3, 28),
     });
   });
+  it('should return proper when call equal', () => {
+    const period1 = new WeekPeriod(new CalendarDate(2022, 4, 5));
+    const period2 = new WeekPeriod(new CalendarDate(2022, 4, 5));
+    const period3 = new WeekPeriod(new CalendarDate(2022, 4, 9));
+    const period4 = new WeekPeriod(new CalendarDate(2022, 4, 10));
+    const period5 = new WeekPeriod(new CalendarDate(2021, 4, 5));
+    expect(period1.equal(period2)).toEqual(true);
+    expect(period1.equal(period3)).toEqual(true);
+    expect(period1.equal(period4)).toEqual(false);
+    expect(period1.equal(period5)).toEqual(false);
+  });
 });
 describe('WeekPeriod Timezone', () => {
   beforeEach(() => {