@globalpayments/vega 2.13.1 → 2.15.0

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-renderer-manager.js

@@ -0,0 +1,49 @@
+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, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Skeleton renderer by type
+ */
+export class VegaSkeletonRendererManager extends VegaSlimmer {
+  render() {
+    switch (this.type) {
+      case 'text':
+        return this.vegaSkeletonTextRenderer.render();
+      case 'paragraph':
+        return this.vegaSkeletonParagraphRenderer.render();
+      case 'full-width-paragraph':
+        return this.vegaSkeletonFullWidthParagraphRenderer.render();
+      case 'ellipse':
+        return this.vegaSkeletonEllipseRenderer.render();
+      case 'image':
+        return this.vegaSkeletonImageRenderer.render();
+      case 'table':
+        return this.vegaSkeletonTableRenderer.render();
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTextRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonParagraphRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonEllipseRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonImageRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTableRenderer", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-table-renderer.js

@@ -0,0 +1,42 @@
+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 } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Table Skeleton renderer
+ */
+export class VegaSkeletonTableRenderer extends VegaSkeletonRendererBase {
+  constructor() {
+    super(...arguments);
+    this.rows = 4;
+    this.cells = 5;
+    this.renderCells = () => {
+      return (h(Fragment, null, [...Array(this.cells).keys()].map((cell) => {
+        return (h("td", { class: "vega-skeleton-table-cell", key: cell },
+          h("vega-skeleton", { type: "text", width: "100%", animated: this.animated })));
+      })));
+    };
+  }
+  assignHostStyle() {
+    const { width = '100%' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return { width: widthWithUnit };
+  }
+  renderChildren() {
+    return (h("table", { class: "vega-skeleton-table" },
+      h("thead", { class: "vega-skeleton-table-head" },
+        h("tr", { class: "vega-skeleton-table-row" }, this.renderCells())),
+      h("tbody", { class: "vega-skeleton-table-body" }, [...Array(this.rows).keys()].map((row) => {
+        return (h("tr", { class: "vega-skeleton-table-row", key: row }, this.renderCells()));
+      }))));
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonTableRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-text-renderer.js

@@ -0,0 +1,28 @@
+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 } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Text Skeleton renderer
+ */
+export class VegaSkeletonTextRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '180px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return {
+      width: widthWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-text" });
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonTextRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/vega-skeleton.css

@@ -0,0 +1,77 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+:host {
+  display: block;
+}
+
+:host([type=text]),
+:host([type=image]),
+:host([type=ellipse]) {
+  display: inline-block;
+}
+
+@keyframes v-skeleton-loading {
+  0% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0 50%;
+  }
+}
+.vega-skeleton-bg-base, .vega-skeleton-image, .vega-skeleton-ellipse, .vega-skeleton-text-base, .vega-skeleton-text {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+
+:host(.animated) .vega-skeleton-bg-base, :host(.animated) .vega-skeleton-image, :host(.animated) .vega-skeleton-ellipse, :host(.animated) .vega-skeleton-text-base, :host(.animated) .vega-skeleton-text {
+  animation: v-skeleton-loading 1750ms cubic-bezier(0.56, 0, 0.38, 0.98) infinite;
+  animation-delay: 1ms;
+  background: linear-gradient(90deg, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 25%, rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1)) 37%, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 63%);
+  background-size: 400% 100%;
+}
+
+.vega-skeleton-text-base, .vega-skeleton-text {
+  border-radius: 9999px;
+  height: 16px;
+}
+
+.vega-skeleton-text.full-width {
+  width: 100%;
+}
+
+.vega-skeleton-ellipse {
+  border-radius: 9999px;
+  width: 100%;
+  height: 100%;
+}
+
+.vega-skeleton-image {
+  border-radius: 12px;
+  width: 100%;
+  height: 100%;
+}
+
+.vega-skeleton-table {
+  width: 100%;
+  border-spacing: 0;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  overflow: hidden;
+}
+.vega-skeleton-table .vega-skeleton-table-head {
+  background-color: rgba(var(--v-bg-table-header, 240, 243, 247, 1));
+}
+.vega-skeleton-table .vega-skeleton-table-body {
+  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
+}
+.vega-skeleton-table .vega-skeleton-table-cell {
+  box-sizing: border-box;
+  padding: 16px;
+}
+@media (max-width: 768px) {
+  .vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4), .vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5) {
+    display: none;
+  }
+}

package/dist/collection/components/vega-skeleton/vega-skeleton.js

@@ -0,0 +1,163 @@
+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 { Component, Element, Prop } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { VegaSkeletonTextRenderer } from './slimmers/renderers/vega-skeleton-text-renderer';
+import { VegaSkeletonParagraphRenderer } from './slimmers/renderers/vega-skeleton-paragraph-renderer';
+import { VegaSkeletonFullWidthParagraphRenderer } from './slimmers/renderers/vega-skeleton-full-width-paragraph-renderer';
+import { VegaSkeletonImageRenderer } from './slimmers/renderers/vega-skeleton-image-renderer';
+import { VegaSkeletonTableRenderer } from './slimmers/renderers/vega-skeleton-table-renderer';
+import { VegaSkeletonRendererManager } from './slimmers/renderers/vega-skeleton-renderer-manager';
+import { VegaSkeletonEllipseRenderer } from './slimmers/renderers/vega-skeleton-ellipse-renderer';
+export class VegaSkeleton {
+  constructor() {
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaSkeletonTextRenderer = new VegaSkeletonTextRenderer();
+    this.vegaSkeletonParagraphRenderer = new VegaSkeletonParagraphRenderer();
+    this.vegaSkeletonFullWidthParagraphRenderer = new VegaSkeletonFullWidthParagraphRenderer();
+    this.vegaSkeletonEllipseRenderer = new VegaSkeletonEllipseRenderer();
+    this.vegaSkeletonImageRenderer = new VegaSkeletonImageRenderer();
+    this.vegaSkeletonTableRenderer = new VegaSkeletonTableRenderer();
+    this.vegaSkeletonRendererManager = new VegaSkeletonRendererManager();
+    /**
+     * Specifies the type of the skeleton.
+     */
+    this.type = 'text';
+    /**
+     * Indicates whether the skeleton displays an animation effect.
+     */
+    this.animated = false;
+  }
+  render() {
+    return this.vegaSkeletonRendererManager.render();
+  }
+  static get is() { return "vega-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-skeleton.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-skeleton.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSkeletonType",
+        "resolved": "\"ellipse\" | \"full-width-paragraph\" | \"image\" | \"paragraph\" | \"table\" | \"text\"",
+        "references": {
+          "VegaSkeletonType": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the type of the skeleton."
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'text'"
+    },
+    "width": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "WidthType",
+        "resolved": "number | string",
+        "references": {
+          "WidthType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the width of the skeleton."
+      },
+      "attribute": "width",
+      "reflect": false
+    },
+    "height": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "HeightType",
+        "resolved": "number | string",
+        "references": {
+          "HeightType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the height of the skeleton.\n- This property is applicable only when {@link type} is set to is `image` or `ellipse`."
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the skeleton displays an animation effect."
+      },
+      "attribute": "animated",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSkeleton.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonTextRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonParagraphRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonEllipseRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonImageRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonTableRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonRendererManager", void 0);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-selected-target-controller.js

@@ -4,25 +4,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 /** The VegaTabGroupSelectedTargetController class is responsible for handling the selected data target in a VegaTabGroup component and emitting a click event. */
 export class VegaTabGroupSelectedTargetController extends VegaSlimmer {
-  /* istanbul ignore next */
   /**
-   * The function will call when component call selectedTabDataTargetChange function and emit a vega click event
+   * The function sets the selectedTabDataTarget property to the provided dataTarget value.
    *
-   * {@link VegaTabGroup#watchSelectedTabDataTargetChange}
+   * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
    */
-  handleSelectedDataTargetChange() {
-    this.clickEventEmitter.emit(this.selectedTabDataTarget);
+  setSelectedDataTarget(dataTarget) {
+    this.selectedTabDataTarget = dataTarget;
   }
   /**
-   * The function sets the selectedTabDataTarget property to the provided dataTarget value.
+   * The function emits click event and checks for prevent default then sets the selectedTabDataTarget property to the provided dataTarget value.
    *
    * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
    */
-  setSelectedDataTarget(dataTarget) {
-    this.selectedTabDataTarget = dataTarget;
+  handleTabItemClick(dataTarget) {
+    const clickEvent = this.clickEventEmitter.emit(dataTarget);
+    if (clickEvent && !clickEvent.defaultPrevented) {
+      this.setSelectedDataTarget(dataTarget);
+    }
   }
 }
 __decorate([
@@ -31,6 +33,3 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
-__decorate([
-  MapToComponentMethod('watchSelectedTabDataTargetChange')
-], VegaTabGroupSelectedTargetController.prototype, "handleSelectedDataTargetChange", null);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-direction-button-renderer.js

@@ -65,7 +65,7 @@ export class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: this.selectedTabDataTarget, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
           this.dropdownRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
-            this.vegaTabGroupSelectedTargetController.setSelectedDataTarget(payload.detail);
+            this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);
           });
         } },
         h("vega-icon", { size: "size-12", icon: icon }))));

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-tab-list-renderer.js

@@ -41,7 +41,7 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
               'vega-close-icon-space': this.showCloseButton,
             }, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: () => this.tabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
             this.renderTabLabelDom(item)),
           this.closeButtonRenderer.render())));
@@ -58,8 +58,8 @@ export class VegaTabGroupTabListRenderer extends VegaSlimmer {
         item.label.substring(0, this.TAB_LABEL_MAX_SIZE),
         "..."))) : (item.label);
   }
-  tabItemClick(dataTarget) {
-    this.selectedTargetController.setSelectedDataTarget(dataTarget);
+  handleTabItemClick(dataTarget) {
+    this.selectedTargetController.handleTabItemClick(dataTarget);
   }
 }
 __decorate([

package/dist/collection/components/vega-table/vega-table-row/slimmers/controllers/vega-table-row-click-controller.js

@@ -38,11 +38,13 @@ export class VegaTableRowClickController extends VegaSlimmer {
   initRowClickObserver() {
     this.rowClickObserver = new Observer(isAcceptableTableRowObserver.bind(this), (payload) => {
       this.clicked = payload.host === this.host;
-      if (this.selectionType === 'single' && payload.host === this.host) {
-        this.vegaTableRowSelectionController.setChecked(!this.checked);
-      }
-      else {
-        this.vegaTableRowSelectionController.setChecked(false);
+      if (this.selectionType === 'single') {
+        if (payload.host === this.host) {
+          this.vegaTableRowSelectionController.setChecked(!this.checked);
+        }
+        else {
+          this.vegaTableRowSelectionController.setChecked(false);
+        }
       }
     });
     ChangeManager.register(TABLE_ROW_CLICK, this.rowClickObserver);

package/dist/collection/constants/ui.js

@@ -67,6 +67,8 @@ export const VegaNativeEventName = [
   'dropdownHide',
   'dropdownSearch',
   'actionClick',
+  'eventClick',
+  'dateClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/global/icons/chevron-left.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>`,
+};

package/dist/collection/global/icons/chevron-right.js

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>`,
+};

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

@@ -0,0 +1,103 @@
+/**
+ * Calendar date class
+ */
+export class CalendarDate {
+  constructor(year, month, date) {
+    this._date = date;
+    this._month = month;
+    this._year = year;
+  }
+  /**
+   * Create a calendar date from a Date object
+   *
+   * @param {Date} date - The Date object
+   * @returns {CalendarDate} - Return a CalendarDate object
+   */
+  static from(date) {
+    return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+  }
+  /**
+   * The year of the calendar date
+   *
+   * @type {number}
+   */
+  get year() {
+    return this._year;
+  }
+  set year(value) {
+    this._year = value;
+  }
+  /**
+   * The month of the calendar date
+   *
+   * @type {number}
+   */
+  get month() {
+    return this._month;
+  }
+  set month(value) {
+    this._month = value;
+  }
+  /**
+   * The date of the calendar date
+   *
+   * @type {number}
+   */
+  get date() {
+    return this._date;
+  }
+  set date(value) {
+    this._date = value;
+  }
+  /**
+   * Verify whether the calendar date is today
+   *
+   * @returns {boolean} - Return true if the calendar date is today. Otherwise, return false.
+   */
+  isToday() {
+    const today = new Date();
+    return (today.getFullYear() === this.year &&
+      today.getMonth() + 1 === this.month &&
+      today.getDate() === this.date);
+  }
+  /**
+   * Convert the calendar date to a Date object
+   *
+   * @returns {Date} - Return a Date object
+   */
+  toDate() {
+    return new Date(this.year, this.month - 1, this.date);
+  }
+  /**
+   * Compare with another calendar date
+   *
+   * @param {CalendarDate} date - The calendar date to compare with
+   * @returns {DateCompareResult} - Return a DateCompareResult object
+   */
+  compare(date) {
+    const { year, month } = date;
+    const result = {
+      isPreviousMonth: false,
+      inMonth: false,
+      isNextMonth: false,
+    };
+    if (this.year === year) {
+      if (this.month < month) {
+        result.isPreviousMonth = true;
+      }
+      else if (this.month > month) {
+        result.isNextMonth = true;
+      }
+      else {
+        result.inMonth = true;
+      }
+    }
+    else if (this.year > year) {
+      result.isNextMonth = true;
+    }
+    else {
+      result.isPreviousMonth = true;
+    }
+    return result;
+  }
+}