@heartlandone/vega 2.71.0 → 2.72.0-RTE-table-preview

package/dist/collection/components/vega-rich-text-editor/test/extensions/table/table-test-utils.js

@@ -0,0 +1,172 @@
+import { generateUUID } from '../../../../../utils/misc';
+/**
+ * Generate mock table data for testing purposes.
+ *
+ * @param {{ withHeader?: boolean }} options - Options for generating the table data.
+ * @param {boolean} options.withHeader - Whether to include a table header.
+ * @returns {VegaRTETableBlock} The generated mock table block data.
+ */
+export const mockRTETableData = ({ withHeader } = {}) => {
+  const tableHead = {
+    id: generateUUID(),
+    type: 'table-head',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-head-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'H-B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const tableBody = {
+    id: generateUUID(),
+    type: 'table-body',
+    children: [
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'A',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'B',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: generateUUID(),
+        type: 'table-row',
+        children: [
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'C',
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            id: generateUUID(),
+            type: 'table-cell',
+            children: [
+              {
+                id: generateUUID(),
+                annotations: {
+                  textStyle: 'paragraph',
+                },
+                type: 'paragraph',
+                nodes: [
+                  {
+                    id: generateUUID(),
+                    type: 'text',
+                    text: 'D',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  };
+  const children = [];
+  if (withHeader) {
+    children.push(tableHead, tableBody);
+  }
+  else {
+    children.push(tableBody);
+  }
+  return {
+    id: generateUUID(),
+    type: 'table-block',
+    children: children,
+  };
+};

package/dist/collection/components/vega-rich-text-editor/test/spec-utils.js

@@ -6,19 +6,22 @@ import { tryGetDocument } from '../../../utils/try-get-document';
  * @param {SpecPage} page - The SpecPage instance.
  * @param {{ textEl: HTMLElement; startOffset: number; endOffset: number }} options - Options for text selection.
  * @param {HTMLElement} options.textEl - The text element to select within.
+ * @param {HTMLElement} [options.endContainer] - The end container element of the selection.
+ * @param {HTMLElement} [options.commonAncestorContainer] - The common ancestor container of the selection.
  * @param {number} options.startOffset - The start offset of the selection.
  * @param {number} options.endOffset - The end offset of the selection.
  */
 export const mockTextSelection = async (page, options) => {
   const richTextEditorContent = find(page.body, 'vega-rich-text-editor >>> vega-rich-text-content');
   richTextEditorContent.shadowRoot['getSelection'] = jest.fn(() => {
+    var _a;
     return {
       rangeCount: 1,
       removeAllRanges: jest.fn(),
       getRangeAt: jest.fn().mockReturnValue({
         startContainer: options.textEl.firstChild,
-        endContainer: options.textEl.firstChild,
-        commonAncestorContainer: options.textEl,
+        endContainer: ((_a = options.endContainer) === null || _a === void 0 ? void 0 : _a.firstChild) || options.textEl.firstChild,
+        commonAncestorContainer: options.commonAncestorContainer || options.textEl,
         startOffset: options.startOffset,
         endOffset: options.endOffset,
         intersectsNode: jest.fn().mockReturnValue(true),

package/dist/collection/components/vega-rich-text-editor/vega-rich-text-editor.css

@@ -78,6 +78,10 @@
   background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1));
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));
   cursor: not-allowed;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 :host .rich-text-editor-container.disabled:hover, :host .rich-text-editor-container.disabled:focus-within {
   border: 1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));

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,9 @@ export const VegaNativeEventName = [
   'monthYearChange',
   'complete',
   'paste',
+  'clear',
+  'periodChange',
+  'selectionChange',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/global/scripts/before-vega-load.js

@@ -23,6 +23,7 @@ import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/ex
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
 import { VegaRTEFunctionExtension } from '../../components/vega-rich-text-editor/extensions/functions/function-extension';
+import { VegaRTETableExtension } from '../../components/vega-rich-text-editor/extensions/table/table-extension';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -195,6 +196,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELanguageExtension = VegaRTELanguageExtension;
   globalThis.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
   globalThis.VegaRTEFunctionExtension = VegaRTEFunctionExtension;
+  globalThis.VegaRTETableExtension = VegaRTETableExtension;
 }
 /**
  * Inject VegaPublicValidationRules to global as a public api

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', () => {