@globalpayments/vega 2.16.0 → 2.17.0

package/dist/cjs/{vegaInternalEventId-173c4941.js → vegaInternalEventId-ac38dd4b.js}

@@ -27,9 +27,11 @@ const VegaInternalLeftNavLinkClick = new VegaInternalEventID('leftNavLinkClick')
 const VegaInternalSubStatePull = new VegaInternalEventID('subStatePull');
 const VegaInternalSubStatePush = new VegaInternalEventID('subStatePush');
 const VegaInternalCalendarMonthEventsChange = new VegaInternalEventID('monthEventsChange');
+const VegaInternalDropdownTemplateItemsChange = new VegaInternalEventID('dropdownTemplateItemsChange');
 
 exports.VegaInternalButtonGroupClick = VegaInternalButtonGroupClick;
 exports.VegaInternalCalendarMonthEventsChange = VegaInternalCalendarMonthEventsChange;
+exports.VegaInternalDropdownTemplateItemsChange = VegaInternalDropdownTemplateItemsChange;
 exports.VegaInternalFieldErrorStateChange = VegaInternalFieldErrorStateChange;
 exports.VegaInternalLeftNavLinkClick = VegaInternalLeftNavLinkClick;
 exports.VegaInternalSubStatePull = VegaInternalSubStatePull;

package/dist/collection/components/vega-button/slimmers/renderers/vega-button-loading-renderer.js

@@ -0,0 +1,24 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/** This code snippet defines a TypeScript class named `VegaButtonLoadingRenderer` that extends `VegaSlimmer`. It includes several class properties (`loading`, `loadingMode`, `size`, `danger`) that are mapped to fields of a `VegaButton` component. The `render` method of this class is responsible for rendering a loading indicator component (`vega-loading-indicator`) based on the values of the class properties. */
+export class VegaButtonLoadingRenderer extends VegaSlimmer {
+  /**
+   * renders a loading indicator component based on the values of certain properties (`loading`) of the class instance.
+   *
+   * @returns {Nullable<HTMLVegaLoadingIndicatorElement>} Loading element if the property loading set to true
+   */
+  render() {
+    if (this.loading) {
+      return h("vega-loading-indicator", { size: "micro", mode: "indeterminate" });
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaButtonLoadingRenderer.prototype, "loading", void 0);

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

@@ -1,4 +1,4 @@
-/* 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 */ /* 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
@@ -188,4 +188,12 @@
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0, 0, 0, 0));
+}
+
+:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-progress) {
+  stroke: rgba(var(--v-text-white, 252, 252, 252, 1));
+}
+:host .vega-button-variant-primary vega-loading-indicator::part(circle-loader-track) {
+  stroke: rgba(var(--v-text-white, 252, 252, 252, 1));
+  opacity: 0.2;
 }

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

@@ -16,6 +16,7 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaClick } from '../../helpers/event-manager/eventID/vegaEventId';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/childNodesEventPreventSlimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { VegaButtonLoadingRenderer } from './slimmers/renderers/vega-button-loading-renderer';
 export class VegaButton {
   constructor() {
     this.globalSlimmers = {};
@@ -28,12 +29,13 @@ export class VegaButton {
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
       useCapture: true,
       customPreventHandle: (e) => {
-        if (this.disabled) {
+        if (this.isDisabledButton()) {
           e.stopImmediatePropagation();
         }
       },
     });
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaButtonLoadingRenderer = new VegaButtonLoadingRenderer();
     this.currentBreakpoint = getCurrentBreakpoint();
     /**
      * Specifies the size of the button.
@@ -72,8 +74,14 @@ export class VegaButton {
      *    form submission and data reset.
      */
     this.type = 'button';
+    /**
+     * Specifies whether the button is in a loading state. When `true`,
+     *     the button is disabled and an indeterminate loading indicator
+     *     is displayed within the button.
+     */
+    this.loading = false;
     this.handleClick = (e) => {
-      if (this.disabled) {
+      if (this.isDisabledButton()) {
         e.preventDefault();
       }
       else {
@@ -95,16 +103,17 @@ export class VegaButton {
       h("button", { type: this.type, "aria-label": this.label || 'No label defined', class: {
           [`vega-button-size-${ResponsiveFormatFacade.formatCustom(this.size)}`]: true,
           [`vega-button-variant-${this.variant}`]: true,
-          'vega-button-disabled': this.disabled,
+          'vega-button-disabled': this.isDisabledButton(),
           'vega-button-danger': this.danger,
-        }, onClick: this.handleClick, disabled: this.disabled, part: "button" }, this.renderContent())), this.host);
+        }, onClick: this.handleClick, disabled: this.isDisabledButton(), part: "button" }, this.renderContent())), this.host);
   }
   renderContent() {
-    if (this.icon) {
+    if (this.icon || this.loading) {
       return (h("vega-flex", { alignItems: "center", gap: "size-8", justifyContent: "center" },
         this.iconAlign === 'left' && this.renderIcon(),
         this.renderLabel(),
-        this.iconAlign === 'right' && this.renderIcon()));
+        this.iconAlign === 'right' && this.renderIcon(),
+        this.vegaButtonLoadingRenderer.render()));
     }
     else {
       return this.renderLabel();
@@ -114,7 +123,19 @@ export class VegaButton {
     return this.label && h("span", null, this.label);
   }
   renderIcon() {
-    return (h("vega-icon", { icon: this.icon, class: "vega-flex-shrink-0 v-min-w-min", size: this.size === 'large' ? 'size-24' : 'size-16' }));
+    if (this.icon) {
+      return (h("vega-icon", { icon: this.icon, class: "vega-flex-shrink-0 v-min-w-min", size: this.size === 'large' ? 'size-24' : 'size-16' }));
+    }
+  }
+  /**
+   * The function `isDisabledButton` returns true if either the `disabled` or `loading` property is true.
+   *
+   * @returns {boolean} The method `isDisabledButton()` is returning a boolean value, which is determined by the
+   * logical OR operation between `this.disabled` and `this.loading`. If either `this.disabled` or
+   * `this.loading` is true, the method will return `true`, indicating that the button is disabled.
+   */
+  isDisabledButton() {
+    return this.disabled || this.loading;
   }
   static get is() { return "vega-button"; }
   static get encapsulation() { return "shadow"; }
@@ -309,6 +330,24 @@ export class VegaButton {
       "attribute": "type",
       "reflect": false,
       "defaultValue": "'button'"
+    },
+    "loading": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies whether the button is in a loading state. When `true`,\n    the button is disabled and an indeterminate loading indicator\n    is displayed within the button."
+      },
+      "attribute": "loading",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -365,3 +404,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaButton.prototype, "vegaButtonLoadingRenderer", void 0);

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

@@ -16,19 +16,50 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
   setCurrentPeriod(newPeriod) {
     this.currentPeriod = newPeriod;
   }
+  /**
+   * set new current period by the view mode and the current date
+   *
+   * @param {VegaCalendarViewModeType} viewMode view mode value
+   * @param {CalendarDate} date current date
+   */
+  updateCalendarPeriod(viewMode, date) {
+    switch (viewMode) {
+      case 'month':
+        this.setCurrentPeriod(new MonthPeriod(date));
+        break;
+      case 'week':
+        this.setCurrentPeriod(new WeekPeriod(date));
+        break;
+      case 'day':
+        this.setCurrentPeriod(new DayPeriod(date));
+        break;
+    }
+  }
   /**
    * default current period is month period, re-create period if the default view mode is not month
    * set default calendar view
    */
   initialCurrentPeriod() {
-    this.initCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
+    this.updateCalendarPeriod(this.viewMode, CalendarDate.from(new Date()));
   }
   /**
    * emit period change event
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
+   * @param {CalendarPeriod} oldValue the prev calendar period
    */
-  emitChangeEvent() {
+  emitChangeEvent(newValue, oldValue) {
+    if (newValue &&
+      oldValue &&
+      newValue.startDate.equal(oldValue.startDate) &&
+      newValue.endDate.equal(oldValue.endDate)) {
+      return;
+    }
+    if (newValue && newValue.type !== this.viewMode) {
+      this.viewMode = newValue.type;
+    }
     this.changeEventEmitter.emit({
-      viewMode: this.viewMode,
+      viewMode: newValue.type,
       currentPeriod: this.getCurrentPeriodSummary(),
     });
   }
@@ -38,7 +69,9 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
    * @param {VegaCalendarViewModeType} viewMode new view mode value
    */
   updateCurrentPeriodByViewMode(viewMode) {
-    this.initCalendarPeriod(viewMode, this.currentPeriod.current);
+    if (this.currentPeriod && viewMode !== this.currentPeriod.type) {
+      this.updateCalendarPeriod(viewMode, this.currentPeriod.current);
+    }
   }
   /**
    * The function `getStartDateAndEndDate` returns an array of `VegaCalendarDateType` objects based on the `startDate` and `endDate` properties of the `currentPeriod` object.
@@ -63,25 +96,6 @@ export class VegaCalendarCurrentPeriodController extends VegaSlimmer {
       },
     };
   }
-  /**
-   * set new current period by the view mode and the current date
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode value
-   * @param {CalendarDate} date current date
-   */
-  initCalendarPeriod(viewMode, date) {
-    switch (viewMode) {
-      case 'month':
-        this.setCurrentPeriod(new MonthPeriod(date));
-        break;
-      case 'week':
-        this.setCurrentPeriod(new WeekPeriod(date));
-        break;
-      case 'day':
-        this.setCurrentPeriod(new DayPeriod(date));
-        break;
-    }
-  }
 }
 __decorate([
   MapToComponentField({ writable: true })
@@ -90,7 +104,7 @@ __decorate([
   MapToComponentField()
 ], VegaCalendarCurrentPeriodController.prototype, "changeEventEmitter", void 0);
 __decorate([
-  MapToComponentField()
+  MapToComponentField({ writable: true })
 ], VegaCalendarCurrentPeriodController.prototype, "viewMode", void 0);
 __decorate([
   MapToComponentMethod('componentWillLoad')

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-event-controller.js

@@ -9,6 +9,11 @@ import { CalendarEvent } from '../../../../../helpers/calendar/calendar-event';
 import { LogUtility } from '../../../../../utils/log';
 /** The `VegaCalendarEventController` class in TypeScript manages calendar events, initializes event layouts, retrieves events for the current date, and checks if a date falls within the range of a calendar event. */
 export class VegaCalendarEventController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    // This map is cache for newly generated calendar events
+    this.repeatEventMap = new Map();
+  }
   /**
    * The function `getCurrentDateEvent` returns an array of calendar events for the current date, including both normal events and group events.
    *
@@ -19,7 +24,7 @@ export class VegaCalendarEventController extends VegaSlimmer {
    * the group events and returns the combined array.
    */
   getCurrentDateEvents(date) {
-    const allEvents = this.calendarEvents;
+    const allEvents = this.createRepeatEvents();
     return allEvents.filter((item) => item.isCurrentDayEvent(date));
   }
   /**
@@ -29,6 +34,7 @@ export class VegaCalendarEventController extends VegaSlimmer {
    */
   updateAfterEventChange(newEvents) {
     this.initCalendarEvents(newEvents);
+    this.repeatEventMap.clear();
   }
   /**
    * initial calendar events in first time
@@ -56,10 +62,57 @@ export class VegaCalendarEventController extends VegaSlimmer {
     }
     this.calendarEvents = result;
   }
+  /**
+   * We need generate new calendar event from the full-day repeat calendar event, so we can render those event as normal full-day event
+   *
+   * @returns {CalendarEvent[]} The `handleRepeatEvents` method returns an array of `CalendarEvent` objects.
+   */
+  createRepeatEvents() {
+    const allEvents = this.calendarEvents;
+    const otherEvents = [];
+    const newRepeatEvents = [];
+    allEvents.forEach((item) => {
+      if (item.isRepeatEvent) {
+        const repeatSeries = item.getRepeatSeries(this.currentPeriod);
+        repeatSeries.forEach((series) => {
+          newRepeatEvents.push(this.generateCalendarEventByRepeatSeries(item, series));
+        });
+      }
+      else {
+        otherEvents.push(item);
+      }
+    });
+    return newRepeatEvents.concat(otherEvents);
+  }
+  /**
+   * This function generates a calendar event based on a repeat series and stores it in a map to avoid duplicate creation.
+   *
+   * @param {CalendarEvent} calendarEvent - The `calendarEvent` parameter represents a single event on
+   * a calendar. It contains information such as the event's start date, end date, and other details.
+   * @param {CalendarDate} series - The repeat start date
+   * @returns {CalendarEvent} The function `generateCalendarEventByRepeatSeries` returns a `CalendarEvent` object. If
+   * the event key already exists in the `repeatEventMap`, it returns the corresponding `CalendarEvent`
+   * object from the map. Otherwise, it creates a new `CalendarEvent` object based on the input
+   * `calendarEvent` and `series` parameters, adds it to the `repeatEventMap`, and then
+   */
+  generateCalendarEventByRepeatSeries(calendarEvent, series) {
+    const eventKey = `${calendarEvent.eventKey}-${series.year}${series.month}${series.date}`;
+    if (this.repeatEventMap.has(eventKey)) {
+      return this.repeatEventMap.get(eventKey);
+    }
+    else {
+      const result = calendarEvent.copyTo(eventKey, series);
+      this.repeatEventMap.set(eventKey, result);
+      return result;
+    }
+  }
 }
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarEventController.prototype, "calendarEvents", void 0);
+__decorate([
+  MapToComponentField()
+], VegaCalendarEventController.prototype, "currentPeriod", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarEventController.prototype, "events", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/controllers/vega-calendar-view-controller.js

@@ -14,39 +14,34 @@ export class VegaCalendarViewController extends VegaSlimmer {
     this.weekViewGenerator = new WeekViewGenerator();
     this.dayViewGenerator = new DayViewGenerator();
   }
-  /**
-   * Update the view mode by param
-   *
-   * @param {VegaCalendarViewModeType} viewMode view mode string
-   */
-  setViewMode(viewMode) {
-    this.viewMode = viewMode;
-  }
   /**
    * set default calendar view
    */
   initialCalendarView() {
-    this.setCalendarView(this.getCalendarViewByViewMode());
+    this.setCalendarView(this.getCalendarViewByPeriod(this.currentPeriod));
   }
   /**
    * generator new calendar view if the calendar current period changes
+   *
+   * @param {CalendarPeriod} newValue the new calendar period
    */
-  generateCalendarView() {
-    this.setCalendarView(this.getCalendarViewByViewMode());
+  generateCalendarView(newValue) {
+    this.setCalendarView(this.getCalendarViewByPeriod(newValue));
   }
   /**
-   * The function `getCalendarViewByViewMode` returns a specific calendar view based on the current view mode.
+   * The function `getCalendarViewByPeriod` returns a specific calendar view based on the current period.
    *
-   * @returns {CalendarView} get the match calendar view by the view mode
+   * @param {CalendarPeriod} newPeriod the new period
+   * @returns {CalendarView} get the match calendar view by the period
    */
-  getCalendarViewByViewMode() {
-    switch (this.viewMode) {
+  getCalendarViewByPeriod(newPeriod) {
+    switch (newPeriod.type) {
       case 'week':
-        return this.weekViewGenerator.generate(this.currentPeriod);
+        return this.weekViewGenerator.generate(newPeriod);
       case 'day':
-        return this.dayViewGenerator.generate(this.currentPeriod);
+        return this.dayViewGenerator.generate(newPeriod);
       default:
-        return this.monthViewGenerator.generate(this.currentPeriod);
+        return this.monthViewGenerator.generate(newPeriod);
     }
   }
   /**
@@ -61,9 +56,6 @@ export class VegaCalendarViewController extends VegaSlimmer {
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaCalendarViewController.prototype, "calendarView", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaCalendarViewController.prototype, "viewMode", void 0);
 __decorate([
   MapToComponentField()
 ], VegaCalendarViewController.prototype, "currentPeriod", void 0);

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeatPattern/baseRepeatPattern.js

@@ -0,0 +1,61 @@
+/** The above code defines an abstract class `CalendarEventBaseRepeatPattern` in TypeScript that represents a repeat pattern for calendar events. Here is a summary of what the code is doing: */
+export class CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} repeatStartDate - The `repeatStartDate` parameter represents the starting date of a
+   * calendar event or interval. It is of type `CalendarDate`, which likely contains information such as
+   * the year, month, and day of the event.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 2, it means the event occurs every 2 units of time
+   * (e.g., every 2 days, weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor represents a date until which the recurring
+   * event will occur. If this date is reached, the recurring event will stop.
+   */
+  constructor(repeatStartDate, interval, count, until) {
+    this.repeatStartDate = repeatStartDate;
+    this.interval = interval;
+    this.count = count;
+    this.until = until;
+  }
+  /**
+   * The function `getRepeatSeries` retrieves a series of repeated events within a specified calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method represents
+   * a specific time period in the form of a `CalendarPeriod` object. This object typically contains a
+   * `startDate` and an `endDate`, which define the range of dates for which you want to generate repeat series.
+   * @param {number} eventSpansDays - the current repeat series cross days, default value is one
+   * @returns {CalendarDate[]}  repeat start date array
+   */
+  getRepeatSeries(period, eventSpansDays = 1) {
+    this.generateRepeatDateCacheUntilEndDate(period.endDate);
+    return this.cache.filter((item) => {
+      return this.isSeriesInPeriod(item, eventSpansDays, period);
+    });
+  }
+  /**
+   * The function `isSeriesInPeriod` checks if a series of dates falls within a specified date range.
+   *
+   * @param {CalendarDate} series - The `series` parameter represents a specific date in the form of a
+   * `CalendarDate` object.
+   * @param {number} seriesSpansDays - The `seriesSpansDays` parameter represents the number of days
+   * that the series spans. It is used to calculate the end date of the series based on the start date.
+   * @param {CalendarPeriod} period - Date period
+   * @returns {boolean} a boolean value indicating whether the given series falls within the specified date
+   * range.
+   */
+  isSeriesInPeriod(series, seriesSpansDays, period) {
+    const seriesStart = series.toDate();
+    const seriesEnd = new Date(series.year, series.month - 1, series.date + seriesSpansDays - 1);
+    const { startDate, endDate } = period;
+    const rangeStart = startDate.toDate();
+    const rangeEnd = endDate.toDate();
+    return ((seriesStart >= rangeStart && seriesStart <= rangeEnd) ||
+      (seriesEnd >= rangeStart && seriesEnd <= rangeEnd) ||
+      (seriesStart <= rangeStart && seriesEnd >= rangeEnd));
+  }
+}
+CalendarEventBaseRepeatPattern.daySeconds = 24 * 60 * 60 * 1000;

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeatPattern/calendarEventDailyRepeatPattern.js

@@ -0,0 +1,70 @@
+import { CalendarDate } from '../../../../../../helpers/calendar';
+import { CalendarEventBaseRepeatPattern } from './baseRepeatPattern';
+/** The `CalendarEventDailyRepeatPattern` class in TypeScript represents a daily repeating pattern for calendar events. */
+export class CalendarEventDailyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the current date for a given date range and interval.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter is of type `CalendarDate` and represents the starting date for a specific interval or range.
+   * @param {number} interval - The `interval` parameter represents the frequency at which the event
+   * occurs. For example, if the interval is set to 1, it means the event occurs every day. If the
+   * interval is set to 2, it means the event occurs every other day.
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is
+   * `null`, the event will repeat indefinitely until the `until` date is reached.
+   * @param {Nullable<CalendarDate>} until - The `until` parameter in the constructor is of type `Nullable<CalendarDate>`, which
+   * means it can either accept a `CalendarDate` object or be `null`. This parameter is used to specify
+   * a date until which the recurring event should repeat. If `until` is provided, the event
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.initCache();
+  }
+  /**
+   * The function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter represents the date until which you want to
+   * generate repeat dates in the cache. The function `generateRepeatDateCacheBeforeEndDate` is
+   * responsible for populating the cache with repeat dates until the specified `endDate`. It checks the
+   * last date in the cache and generates subsequent repeat dates until
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the `startDate` value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The function getNextRepeatStartDate calculates the next repeat start date based on a given date and certain conditions.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is an instance of the `CalendarDate` class.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns either a `CalendarDate` object if certain
+   * conditions are met, or `null` if the conditions are not met.
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = new Date(date.year, date.month - 1, date.date + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+}

package/dist/collection/components/vega-calendar/slimmers/common/helpers/repeatPattern/calendarEventMonthlyRepeatPattern.js

@@ -0,0 +1,90 @@
+import { CalendarDate } from '../../../../../../helpers/calendar';
+import { CalendarEventBaseRepeatPattern } from './baseRepeatPattern';
+/** The `CalendarEventMonthlyRepeatPattern` class in TypeScript represents a monthly repeat pattern for calendar events. */
+export class CalendarEventMonthlyRepeatPattern extends CalendarEventBaseRepeatPattern {
+  /**
+   * The constructor initializes the event with specified start and end dates, interval, count, and until date, and sets the byMonthDay property to the start date's day.
+   *
+   * @param {CalendarDate} startDate - The `startDate` parameter represents the starting date of the
+   * event or interval. It is of type `CalendarDate`, which likely includes the year, month, and day
+   * components of the date.
+   * @param {number} interval - The `interval` parameter specifies the frequency of the recurring
+   * events. For example, if the interval is set to 2, the event will occur every 2 units of time (days,
+   * weeks, months, etc.).
+   * @param {Nullable<number>} count - The `count` parameter specifies the number of occurrences of the event. If `count`
+   * is provided, the event will repeat `count` times within the specified interval. If `count` is not
+   * provided (or is `null`), the event will repeat indefinitely based on the other parameters like `
+   * @param {Nullable<CalendarDate>} until - The `until` parameter is a nullable `CalendarDate` that specifies the end date for
+   * the recurring event. If provided, the event will repeat until this date. If not provided, the event
+   * will repeat indefinitely based on the other parameters like `count` or `endDate`.
+   */
+  constructor(startDate, interval, count, until) {
+    super(startDate, interval, count, until);
+    this.byMonthDay = this.repeatStartDate.date;
+    this.initCache();
+  }
+  /**
+   * This function generates and caches repeated dates before a specified end date.
+   *
+   * @param {CalendarDate} endDate - The `endDate` parameter in the
+   * `generateRepeatDateCacheUntilEndDate` function is a CalendarDate object that represents the end
+   * date until which the repeat dates need to be generated and cached. The function checks if the last
+   * cached date is before the `endDate` and generates additional repeat dates until it reaches
+   */
+  generateRepeatDateCacheUntilEndDate(endDate) {
+    const lastMatchDate = this.cache[this.cache.length - 1];
+    if (lastMatchDate.toDate() < endDate.toDate() &&
+      (!this.count || (typeof this.count === 'number' && this.cache.length < this.count))) {
+      let nextMatchDate = this.getNextRepeatStartDate(lastMatchDate);
+      while (nextMatchDate && nextMatchDate.toDate() < endDate.toDate()) {
+        nextMatchDate = this.getNextRepeatStartDate(nextMatchDate);
+        if (typeof this.count === 'number' && this.cache.length >= this.count) {
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * The function `initCache` initializes a cache array with the startDate value.
+   */
+  initCache() {
+    this.cache = [this.repeatStartDate];
+  }
+  /**
+   * The getNextRepeatStartDate function calculates the next start date based on a given date and interval, considering constraints such as end date and count limit.
+   *
+   * @param {CalendarDate} date - The `date` parameter represents the current date for which you want to
+   * calculate the next repeat start date. It is of type `CalendarDate`.
+   * @returns {Nullable<CalendarDate>} The function `getNextRepeatStartDate` returns a nullable `CalendarDate`. It either returns
+   * the next calculated `CalendarDate` based on the input date and interval, or it returns `null` if
+   * certain conditions are met (such as reaching the specified end date or count limit).
+   */
+  getNextRepeatStartDate(date) {
+    const nextDate = this.getNextStartDate(date.year, date.month - 1 + this.interval);
+    const nextCalendarDate = CalendarDate.from(nextDate);
+    if ((this.until && nextDate > this.until.toDate()) ||
+      (typeof this.count === 'number' && this.cache.length >= this.count)) {
+      return null;
+    }
+    else {
+      this.cache.push(nextCalendarDate);
+      return nextCalendarDate;
+    }
+  }
+  /**
+   * get the new date with fixed date, if the date.getDate() not equal the fixed date, find the next month
+   *
+   * @param {number} year year
+   * @param {number} month month
+   * @returns {Date} the new date
+   */
+  getNextStartDate(year, month) {
+    const nextDate = new Date(year, month, this.byMonthDay);
+    if (nextDate.getDate() === this.byMonthDay) {
+      return nextDate;
+    }
+    else {
+      return this.getNextStartDate(year, month + 1);
+    }
+  }
+}