@globalpayments/vega 2.16.0 → 2.18.0

package/dist/collection/collection-manifest.json

@@ -43,6 +43,7 @@
     "./components/vega-image-uploader/vega-image-uploader.js",
     "./components/vega-input/vega-input.js",
     "./components/vega-input-credit-card/vega-input-credit-card.js",
+    "./components/vega-input-phone-number/vega-input-phone-number.js",
     "./components/vega-input-range/vega-input-range.js",
     "./components/vega-input-select/vega-input-select.js",
     "./components/vega-item-toggle/vega-item-toggle.js",
@@ -310,6 +311,11 @@
         "vega-skeleton"
       ]
     },
+    {
+      "components": [
+        "vega-input-phone-number"
+      ]
+    },
     {
       "components": [
         "vega-checkbox",

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

@@ -8,6 +8,7 @@ import { h } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
 import { VegaClick } from '../../../../helpers/event-manager/eventID/vegaEventId';
+import { FeatureFlag } from '../../../../helpers/feature-control/featureFlagController';
 /** The `VegaBannerActionButtonRenderer` class in TypeScript React renders action buttons within a banner component. */
 export class VegaBannerActionButtonRenderer extends VegaSlimmer {
   /**
@@ -33,7 +34,11 @@ export class VegaBannerActionButtonRenderer extends VegaSlimmer {
   renderButtonItem(buttonProps, key) {
     return (h("vega-button", { key: key, size: "small", variant: "secondary", ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, () => {
-          buttonProps.vegaClick(buttonProps);
+          if (!FeatureFlag.isEnabled('VEGA_BANNER_DEPRECATED_ACTION_BUTTON_PROP_VEGA_CLICK') &&
+            typeof buttonProps.vegaClick === 'function') {
+            buttonProps.vegaClick(buttonProps);
+          }
+          this.actionButtonClickEventEmitter.emit(buttonProps);
         });
       } }, buttonProps.label));
   }
@@ -41,3 +46,6 @@ export class VegaBannerActionButtonRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaBannerActionButtonRenderer.prototype, "actionButtons", void 0);
+__decorate([
+  MapToComponentField()
+], VegaBannerActionButtonRenderer.prototype, "actionButtonClickEventEmitter", void 0);

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

@@ -11,7 +11,7 @@ import { VegaBannerRenderer } from './slimmers/renderers/vega-banner-renderer';
 import { VegaBannerIconController } from './slimmers/controllers/vega-banner-icon-controller';
 import { VegaBannerActionButtonRenderer } from './slimmers/renderers/vega-banner-action-button-renderer';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/eventEmitSlimmer';
-import { VegaClose } from '../../helpers/event-manager/eventID/vegaEventId';
+import { VegaActionButtonClick, VegaClose } from '../../helpers/event-manager/eventID/vegaEventId';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 export class VegaBanner {
   constructor() {
@@ -21,6 +21,7 @@ export class VegaBanner {
     this.actionButtonRenderer = new VegaBannerActionButtonRenderer();
     this.iconController = new VegaBannerIconController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.actionButtonClickEventEmitter = createEventEmitSlimmer(VegaBanner, VegaActionButtonClick);
     /**
      * Specifies the type of the banner.
      */
@@ -217,6 +218,49 @@ export class VegaBanner {
         "resolved": "any",
         "references": {}
       }
+    }, {
+      "method": "vegaActionButtonClick",
+      "name": "vegaActionButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying the banner action button has been clicked."
+      },
+      "complexType": {
+        "original": "VegaBannerActionButtonType",
+        "resolved": "{ label: string; vegaClick?: (item: VegaBannerActionButtonType) => void; key?: string; }",
+        "references": {
+          "VegaBannerActionButtonType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "actionButtonClick",
+      "name": "actionButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying the banner action button has been clicked."
+      },
+      "complexType": {
+        "original": "VegaBannerActionButtonType",
+        "resolved": "{ label: string; vegaClick?: (item: VegaBannerActionButtonType) => void; key?: string; }",
+        "references": {
+          "VegaBannerActionButtonType": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "doClose": {
@@ -256,3 +300,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaBanner.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaBanner.prototype, "actionButtonClickEventEmitter", void 0);

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;
+    }
+  }
+}