@globalpayments/vega 2.16.0 → 2.18.0

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -43,7 +43,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       }
     };
     this.renderSingleSelected = () => {
-      const item = this.source.find((item) => item.id === this.value);
+      const item = this.sourceController.getItem(this.value);
       if (item) {
         return h("span", { class: "vega-input-select-selected" }, item.displayName);
       }
@@ -67,11 +67,21 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   getInputSelectContainerRef() {
     return this.inputSelectContainer;
   }
+  getItemsSlotRef() {
+    return this.itemsSlotRef;
+  }
   render() {
     return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.getDropdownSource(), selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { ref: (ref) => {
         this.dropdown = ref;
         this.vegaInputSelectDropdownController.addDropdownObserver(ref);
-      }, isLazyLoading: this.isLazyLoading }), this.renderContainer()));
+      }, isLazyLoading: this.isLazyLoading }),
+      this.renderContainer(),
+      this.renderItemsSlot()));
+  }
+  renderItemsSlot() {
+    return (this.host.querySelector('[slot=items]') && (h("div", { slot: "items", ref: (ref) => {
+        this.itemsSlotRef = ref;
+      } })));
   }
   /*
    * The below method is e2e-test covered in
@@ -100,6 +110,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "selectType", void 0);
@@ -124,3 +137,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);

package/dist/collection/components/vega-input-select/vega-input-select.css

@@ -210,10 +210,9 @@
 }
 
 :host .vega-input-select-prefix-icon {
-  width: 16px;
-  height: 16px;
+  text-align: center;
   color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
-  padding-bottom: 2px;
+  font-size: 0px;
 }
 
 :host .vega-input-select-toggle-icon {

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -22,6 +22,7 @@ import { VegaInputSelectLazyLoadController } from './slimmers/controllers/vega-i
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaInputSelectRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-select/runtime-metrics-payload-definition';
 import { VegaInputSelectSourceController } from './slimmers/controllers/vega-input-select-source-controller';
+import { VegaInputSelectItemsSlotController } from './slimmers/controllers/vega-input-select-items-slot-controler';
 export class VegaInputSelect {
   constructor() {
     this.globalSlimmers = {};
@@ -30,6 +31,7 @@ export class VegaInputSelect {
     this.vegaInputSelectDropdownController = new VegaInputSelectDropdownController();
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
+    this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
     this.formFieldControllerSlimmer = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -680,6 +682,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);

package/dist/collection/components/vega-loading-indicator/vega-loading-indicator.js

@@ -63,8 +63,8 @@ export class VegaLoadingIndicator {
       const perimeter = Math.PI * 2 * r;
       const progress = this.status === 'error' ? perimeter : perimeter * percent;
       return (h("svg", { class: "circle-loader" },
-        h("circle", { r: r, class: "circle-loader-track" }),
-        h("circle", { r: r, class: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }),
+        h("circle", { r: r, class: "circle-loader-track", part: "circle-loader-track" }),
+        h("circle", { r: r, class: "circle-loader-progress", part: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }),
         this.mode === 'determinate' && (h("circle", { r: r, class: arrayToClassString(['circle-loader-progress-pointer', percent === 0 && 'v-hidden'].filter(Boolean)), "stroke-dashoffset": -progress, "stroke-dasharray": [0, perimeter].join(' ') }))));
     };
     this.renderBarLoader = () => {

package/dist/collection/constants/ui.js

@@ -68,7 +68,9 @@ export const VegaNativeEventName = [
   'dropdownSearch',
   'actionClick',
   'eventClick',
-  'dateClick',
+  'dateDblClick',
+  'countryChange',
+  'actionButtonClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

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

@@ -100,4 +100,15 @@ export class CalendarDate {
     }
     return result;
   }
+  /**
+   * 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
+   * `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) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
 }

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

@@ -1,3 +1,4 @@
+import calendarEventRepeatPatternFactory from '../../components/vega-calendar/slimmers/common/helpers/repeatPattern/calendarEventRepeatPatternFactory';
 import { generateUUID } from '../../utils/misc';
 import { CalendarDate } from './calendar-date';
 const CalendarDateFormatReg = /^\d{1,2}\/\d{1,2}\/\d{4}/;
@@ -10,12 +11,20 @@ export class CalendarEvent {
    * @param {VegaCalendarRawEvent} eventOptions - The `eventOptions` parameter in the constructor
    * represents the raw event data for a Vega calendar event. It contains information such as the event
    * title, start and end dates, location, description, and any other relevant details about the event.
+   * @param {string} eventKey If a value is not provided for `eventKey`, a UUID (Universally
+   * Unique Identifier) will be generated as a default value. This identifier is used to distinguish
+   * different events and can be helpful for tracking
    */
-  constructor(eventOptions) {
+  constructor(eventOptions, eventKey) {
+    // the default value is 1 when the event end date is same as start date
+    this._eventSpansDays = 1;
+    this.repeatPattern = null;
     this._event = eventOptions;
-    this._eventKey = generateUUID();
+    this._eventKey = eventKey || generateUUID();
     this.checkEventRequireField(eventOptions);
     this.initDate(eventOptions);
+    this.initEventSpansDays();
+    this.initRepeatPattern();
   }
   /**
    * The function returns the raw event data for a VegaCalendar event.
@@ -74,12 +83,12 @@ export class CalendarEvent {
     return !!this._event.isAllDay;
   }
   /**
-   * The function isRepeatEvent returns a boolean value based on whether the event's repeat property is not equal to 'none'.
+   * The function isRepeatEvent returns a boolean value based on whether the event's repeatOptions property is not equal to 'none'.
    *
    * @returns {boolean} The method `isRepeatEvent` returns a boolean value indicating whether the `_event` has a repeat value other than 'none'.
    */
   get isRepeatEvent() {
-    return this._event.repeat !== 'none';
+    return this.repeatPattern !== null;
   }
   /**
    * The function returns the start date property of an object.
@@ -113,16 +122,39 @@ export class CalendarEvent {
   get endTime() {
     return this._endTime;
   }
+  /**
+   * This function returns the number of days that an event spans.
+   *
+   * @returns {number} The method `get eventSpansDays()` is returning the value of the property
+   * `_eventSpansDays`, which is of type `number`.
+   */
+  get eventSpansDays() {
+    return this._eventSpansDays;
+  }
+  /**
+   * The function `copyTo` copies a calendar event with updated start and end dates.
+   *
+   * @param {string} eventKey - The `eventKey` parameter in the `copyTo` function is a string that represents the key or identifier of the new calendar event that will be created.
+   * @param {CalendarDate} startDate - The `startDate` parameter in the `copyTo` function represents
+   * the starting date of a calendar event. It is of type `CalendarDate`, which may contain information such as the day, month, and year of the event.
+   * @returns {CalendarEvent} A new `CalendarEvent` object is being returned with the properties from the original
+   * `_event` object (excluding `repeatOptions`) and the `startDate` and `endDate` properties set to
+   * the `toDate()` values of the `startDate` and `endDate` parameters.
+   */
+  copyTo(eventKey, startDate) {
+    const endDate = this._eventSpansDays > 1
+      ? new Date(startDate.year, startDate.month - 1, startDate.date + (this._eventSpansDays - 1))
+      : startDate.toDate();
+    const result = new CalendarEvent(Object.assign(Object.assign({}, this._event), { startDate: startDate.toDate(), endDate: endDate, startTime: this.startTime, endTime: this.endTime }), eventKey);
+    return result;
+  }
   /**
    * Check the event is a group event or not
    *
    * @returns {boolean} true or false
    */
   isGroupEvent() {
-    const { year: startYear, month: startMonth, date: startDay, } = CalendarDate.from(this.startDate);
-    const { year: endYear, month: endMonth, date: endDay, } = CalendarDate.from(this.endDate);
-    return (!(startYear === endYear && startMonth === endMonth && startDay === endDay) &&
-      this._event.repeat !== 'daily');
+    return this._eventSpansDays > 1;
   }
   /**
    * This TypeScript function checks if a given date falls within the range of a calendar event based on its start and end dates, considering different repeat types like daily, weekly, monthly, and yearly.
@@ -135,23 +167,8 @@ export class CalendarEvent {
     const { startDate, endDate } = this;
     const startCalendarDate = CalendarDate.from(startDate);
     const endCalendarDate = CalendarDate.from(new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1));
-    const repeat = this._event.repeat;
     const currentDate = date.toDate();
-    if (startCalendarDate.toDate() <= currentDate) {
-      switch (repeat) {
-        case 'daily':
-          return true;
-        case 'weekly':
-          return currentDate.getDay() === startDate.getDay();
-        case 'monthly':
-          return date.date === startCalendarDate.date;
-        case 'yearly':
-          return date.month === startCalendarDate.month && date.date === startCalendarDate.date;
-        default:
-          return endCalendarDate.toDate() > currentDate;
-      }
-    }
-    return false;
+    return startCalendarDate.toDate() <= currentDate && endCalendarDate.toDate() > currentDate;
   }
   /**
    * Get the number of minutes the event lasted
@@ -166,6 +183,21 @@ export class CalendarEvent {
     const endDate = new Date(now.year, now.month, now.date, Number(endHour) === 0 && Number(startHour) !== 0 ? 24 : Number(endHour), Number(endMinutes));
     return (endDate.valueOf() - startDate.valueOf()) / (60 * 1000);
   }
+  /**
+   * This function returns an array of repeat series based on a given calendar period.
+   *
+   * @param {CalendarPeriod} period - The `period` parameter in the `getRepeatSeries` method is of type
+   * `CalendarPeriod`. It represents a specific time period within a calendar, typically defined by a
+   * start date and an end date. The method uses this period to generate a series of repeated events
+   * based on a daily repeat pattern specified
+   * @returns {CalendarDate[]} repeat start date array
+   */
+  getRepeatSeries(period) {
+    if (this.repeatPattern) {
+      return this.repeatPattern.getRepeatSeries(period, this._eventSpansDays);
+    }
+    return [];
+  }
   /**
    * The function `convertTimeTo24Hour` converts a time string from 12-hour format to 24-hour format in TypeScript.
    *
@@ -253,4 +285,21 @@ export class CalendarEvent {
       this._endTime = this.convertTimeTo24Hour(endTime);
     }
   }
+  /**
+   * The function initializes a repeat pattern controller for a calendar event with specified start and end dates and repeat options.
+   */
+  initRepeatPattern() {
+    if (this._event.repeatOptions && this._event.repeatOptions.frequency) {
+      this.repeatPattern = calendarEventRepeatPatternFactory.getPattern(this._startDate, this._event.repeatOptions);
+    }
+  }
+  /**
+   * Initializes the event cross days by the event start date and end date.
+   */
+  initEventSpansDays() {
+    const start = CalendarDate.from(this.startDate);
+    const end = CalendarDate.from(this.endDate);
+    this._eventSpansDays =
+      (end.toDate().valueOf() - start.toDate().valueOf()) / (24 * 60 * 60 * 1000) + 1;
+  }
 }

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

@@ -41,6 +41,14 @@ export class CalendarPeriod {
   get count() {
     return this._count;
   }
+  /**
+   * This function returns the type of the object.
+   *
+   * @type {string}
+   */
+  get type() {
+    return this._type;
+  }
   /**
    * Go to a specific date.
    *

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

@@ -6,6 +6,7 @@ import { CalendarDate } from '../calendar-date';
 export class DayPeriod extends CalendarPeriod {
   constructor(current) {
     super(DayPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'day';
   }
   /**
    * @inheritDoc

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

@@ -5,9 +5,22 @@ import { CalendarDate } from '../calendar-date';
  */
 export class MonthPeriod extends CalendarPeriod {
   constructor(current) {
-    const date = current || CalendarDate.from(new Date());
-    const firstDayOfMonth = new CalendarDate(date.year, date.month, 1);
-    super(MonthPeriod.DISPLAY_DATE_COUNT, firstDayOfMonth);
+    super(MonthPeriod.DISPLAY_DATE_COUNT, MonthPeriod.getMonthFirstDay(current));
+    this._type = 'month';
+  }
+  /**
+   * The function `getMonthFirstDay` returns the first day of a given month in a calendar.
+   *
+   * @param {CalendarDate} [calendarDate] - The `calendarDate` parameter is an optional parameter of
+   * type `CalendarDate`. It represents a specific date in the calendar. If a `calendarDate` is
+   * provided, the function will use that date to determine the first day of the month. If no
+   * `calendarDate` is provided, the function
+   * @returns {CalendarDate} A new `CalendarDate` object representing the first day of the month from the provided
+   * `calendarDate` parameter or the current date if no parameter is provided.
+   */
+  static getMonthFirstDay(calendarDate) {
+    const date = calendarDate || CalendarDate.from(new Date());
+    return new CalendarDate(date.year, date.month, 1);
   }
   /**
    * @inheritDoc

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

@@ -7,6 +7,7 @@ import { CalendarDate } from '../calendar-date';
 export class WeekPeriod extends CalendarPeriod {
   constructor(current) {
     super(WeekPeriod.DISPLAY_DATE_COUNT, current);
+    this._type = 'week';
   }
   /**
    * @inheritDoc

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

@@ -1,5 +1,6 @@
 import { CalendarDate } from '../calendar-date';
 import { CalendarEvent } from '../calendar-event';
+import { MonthPeriod } from '../calendar-period/month-period';
 const mockDate = new Date(2024, 5, 13, 13, 44);
 const mockStringDate = '06/13/2024';
 const rawEvent = {
@@ -10,7 +11,6 @@ const rawEvent = {
   startTime: '',
   endTime: '14:44',
   disabled: false,
-  repeat: 'none',
   isAllDay: false,
   variant: 'secondary',
   color: 'red',
@@ -32,6 +32,8 @@ describe('calendar-event', () => {
     expect(calendarEvent.disabled).toEqual(false);
     expect(calendarEvent.color).toEqual('red');
     expect(calendarEvent.event).toEqual(rawEvent);
+    expect(calendarEvent.eventSpansDays).toEqual(1);
+    expect(calendarEvent.getRepeatSeries(new MonthPeriod(new CalendarDate(2024, 6, 1)))).toEqual([]);
   });
   it('should throw error when event options is incorrect', () => {
     function wrongStartDate() {
@@ -83,7 +85,10 @@ describe('calendar-event', () => {
   it('should get group event correct', () => {
     const calendarEvent1 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', endTime: '18:00' }));
     expect(calendarEvent1.isGroupEvent()).toBeTruthy();
-    const calendarEvent2 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', endTime: '18:00', repeat: 'daily' }));
+    const calendarEvent2 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/13/2024', endTime: '18:00', repeatOptions: {
+        frequency: 'daily',
+        interval: 1,
+      } }));
     expect(calendarEvent2.isGroupEvent()).toBeFalsy();
   });
   it('should check current day event correct with normal event', () => {
@@ -91,24 +96,7 @@ describe('calendar-event', () => {
     expect(calendarEvent1.isCurrentDayEvent(new CalendarDate(2024, 6, 14))).toBeTruthy();
     expect(calendarEvent1.isCurrentDayEvent(new CalendarDate(2024, 6, 15))).toBeFalsy();
   });
-  it('should check current day event correct with repeat event', () => {
-    const calendarEvent1 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', repeat: 'daily' }));
-    expect(calendarEvent1.isCurrentDayEvent(new CalendarDate(2024, 6, 12))).toBeFalsy();
-    expect(calendarEvent1.isCurrentDayEvent(new CalendarDate(2024, 6, 13))).toBeTruthy();
-    const calendarEvent2 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', repeat: 'weekly' }));
-    expect(calendarEvent2.isCurrentDayEvent(new CalendarDate(2024, 6, 19))).toBeFalsy();
-    expect(calendarEvent2.isCurrentDayEvent(new CalendarDate(2024, 6, 13))).toBeTruthy();
-    expect(calendarEvent2.isCurrentDayEvent(new CalendarDate(2024, 6, 20))).toBeTruthy();
-    const calendarEvent3 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', repeat: 'monthly' }));
-    expect(calendarEvent3.isCurrentDayEvent(new CalendarDate(2024, 6, 13))).toBeTruthy();
-    expect(calendarEvent3.isCurrentDayEvent(new CalendarDate(2024, 7, 12))).toBeFalsy();
-    expect(calendarEvent3.isCurrentDayEvent(new CalendarDate(2024, 7, 13))).toBeTruthy();
-    const calendarEvent4 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { endDate: '06/14/2024', repeat: 'yearly' }));
-    expect(calendarEvent4.isCurrentDayEvent(new CalendarDate(2024, 6, 13))).toBeTruthy();
-    expect(calendarEvent4.isCurrentDayEvent(new CalendarDate(2025, 6, 13))).toBeTruthy();
-    expect(calendarEvent4.isCurrentDayEvent(new CalendarDate(2024, 7, 14))).toBeFalsy();
-  });
-  it('should check current day event correct with repeat event', () => {
+  it('should get event duration correct', () => {
     const calendarEvent1 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { startDate: '06/14/2024', startTime: '10:00', endTime: '11:00', endDate: '06/14/2024' }));
     expect(calendarEvent1.getEventDuration()).toEqual(60);
     const calendarEvent2 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { startDate: '06/14/2024', startTime: '23:00', endTime: '00:00', endDate: '06/14/2024' }));
@@ -127,4 +115,19 @@ describe('calendar-event', () => {
     expect(calendarEvent3.startTime).toEqual('13:00');
     expect(calendarEvent3.endTime).toEqual('14:30');
   });
+  it('should create event correct when call copyTo', () => {
+    const calendarEvent1 = new CalendarEvent(Object.assign(Object.assign({}, rawEvent), { startDate: '06/14/2024', endDate: '06/15/2024', startTime: '12:00 am', endTime: '12:00 pm', repeatOptions: {
+        frequency: 'daily',
+        interval: 2,
+        until: '06/16/2024',
+      } }));
+    const copyEvent1 = calendarEvent1.copyTo('test', new CalendarDate(2024, 6, 14));
+    const copyEvent2 = calendarEvent1.copyTo('test', new CalendarDate(2024, 6, 16));
+    expect(copyEvent1.startDate.getDate()).toEqual(14);
+    expect(copyEvent1.endDate.getDate()).toEqual(15);
+    expect(copyEvent1.eventKey).toEqual('test');
+    expect(copyEvent2.startDate.getDate()).toEqual(16);
+    expect(copyEvent2.endDate.getDate()).toEqual(17);
+    expect(copyEvent2.eventKey).toEqual('test');
+  });
 });

package/dist/collection/helpers/event-manager/eventID/componentEventIdMap.js

@@ -1,14 +1,14 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaChange, VegaEventClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaPageUpdate, VegaCreate, VegaSearch, VegaDropdownShow, VegaDropdownHide, VegaDropdownSearch, VegaFormSubmit, VegaFormReset, VegaValidate, VegaRemove, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaSelectChange, VegaSelectAllChange, VegaRowClick, } from './vegaEventId';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
-  ['vega-banner', [VegaClose]],
+  ['vega-banner', [VegaClose, VegaActionButtonClick]],
   ['vega-breadcrumb', [VegaClick]],
   ['vega-button', [VegaClick]],
   ['vega-button-circle', [VegaClick]],
   ['vega-button-group', [VegaClick]],
   ['vega-button-link', [VegaClick]],
-  ['vega-calendar', [VegaChange, VegaEventClick]],
+  ['vega-calendar', [VegaChange, VegaEventClick, VegaDateDblClick]],
   ['vega-carousel', [VegaPageUpdate]],
   ['vega-checkbox', [VegaChange]],
   ['vega-checkbox-group', [VegaChange]],
@@ -26,6 +26,7 @@ const entries = [
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
   ['vega-input', [VegaChange, VegaFocus, VegaBlur]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
+  ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
   ['vega-input-select', [VegaChange, VegaSearch]],
   ['vega-item-toggle', [VegaToggleStatus]],

package/dist/collection/helpers/event-manager/eventID/vegaEventId.js

@@ -86,5 +86,7 @@ export const VegaDropdownHide = new VegaEventID('vegaHide', 'dropdownHide');
 export const VegaDropdownSearch = new VegaEventID('vegaSearch', 'dropdownSearch');
 export const VegaActionClick = new VegaEventID('vegaActionClick', 'actionClick');
 export const VegaEventClick = new VegaEventID('vegaEventClick', 'eventClick');
-export const VegaDateClick = new VegaEventID('vegaDateClick', 'dateClick');
+export const VegaDateDblClick = new VegaEventID('vegaDateDblClick', 'dateDblClick');
+export const VegaCountryChange = new VegaEventID('vegaCountryChange', 'countryChange');
+export const VegaActionButtonClick = new VegaEventID('vegaActionButtonClick', 'actionButtonClick');
 export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur];

package/dist/collection/helpers/event-manager/eventID/vegaInternalEventId.js

@@ -25,3 +25,4 @@ export const VegaInternalLeftNavLinkClick = new VegaInternalEventID('leftNavLink
 export const VegaInternalSubStatePull = new VegaInternalEventID('subStatePull');
 export const VegaInternalSubStatePush = new VegaInternalEventID('subStatePush');
 export const VegaInternalCalendarMonthEventsChange = new VegaInternalEventID('monthEventsChange');
+export const VegaInternalDropdownTemplateItemsChange = new VegaInternalEventID('dropdownTemplateItemsChange');

package/dist/collection/helpers/feature-control/featureFlagsMap.js

@@ -159,5 +159,10 @@ const FeatureFlagsMap = {
     createdTimestamp: 1719910557333,
     createdAtVersion: '2.12.0',
   },
+  'VEGA_BANNER_DEPRECATED_ACTION_BUTTON_PROP_VEGA_CLICK': {
+    description: `Feature flag to deprecated the vega-banner component property actionButtons property vegaClick`,
+    createdTimestamp: 1723449433833,
+    createdAtVersion: '2.20.0',
+  },
 };
 export default Object.freeze(FeatureFlagsMap);

package/dist/collection/helpers/formatter/string-formatter/custom-formatter-strategy.js

@@ -0,0 +1,48 @@
+/**
+ * Used to format a string using a custom formatter.
+ */
+export class CustomFormatterStrategy {
+  /**
+   * The constructor function takes a CustomStringFormatter parameter and assigns it to the formatter
+   * property of the class.
+   *
+   * @param {CustomStringFormatter} formatter - The `formatter` parameter is an instance of a custom
+   * string formatter class that you are passing to the constructor of the class. This custom string
+   * formatter class likely contains methods or properties related to formatting strings in a specific
+   * way according to your requirements.
+   */
+  constructor(formatter) {
+    this.formatter = formatter;
+  }
+  /**
+   * The format function in TypeScript takes a string input and returns the formatted output using a
+   * formatter method.
+   *
+   * @param {string} input - The `format` function takes a string input and passes it to the `formatter`
+   * function to format it.
+   * @returns {string} The `format` function is returning the result of calling the `formatter` function with the
+   * `input` string as its argument.
+   */
+  format(input) {
+    return this.formatter(input);
+  }
+  /**
+   * The function calculates the caret position in a formatted input string.
+   *
+   * @param {string} input - The `input` parameter in the `calculateCaretPosition` function is a string
+   * that represents the text input where you want to calculate the caret position.
+   * @returns {Nullable<number>} The `calculateCaretPosition` function is returning the length of the formatted input
+   * string.
+   */
+  calculateCaretPosition(input) {
+    return this.format(input).length;
+  }
+  /**
+   * Trigger the formatter at init
+   *
+   * @returns {boolean} true
+   */
+  shouldTriggerAtInit() {
+    return true;
+  }
+}

package/dist/collection/helpers/formatter/test/string-formatter/custom-formatter-strategy.test.js

@@ -0,0 +1,7 @@
+import { CustomFormatterStrategy } from '../../string-formatter/custom-formatter-strategy';
+test('custom formatter strategy is working as expected', () => {
+  const customFormatterStrategy = new CustomFormatterStrategy((value) => value.toUpperCase());
+  expect(customFormatterStrategy.format('test')).toBe('TEST');
+  expect(customFormatterStrategy.calculateCaretPosition('test')).toBe(4);
+  expect(customFormatterStrategy.shouldTriggerAtInit()).toBe(true);
+});

package/dist/collection/helpers/slimmers/element-appender-container/defaultWrapper.js

@@ -23,7 +23,9 @@ export class DefaultWrapper {
      */
     this.retrieve = () => {
       const container = document.body;
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }

package/dist/collection/helpers/slimmers/element-appender-container/positionRelativeToWrapper.js

@@ -26,7 +26,9 @@ export class PositionRelativeToWrapper {
      */
     this.retrieve = () => {
       const container = document.querySelector(this.showConfig.positionRelativeTo);
-      container.append(this.showConfig.appendableElement);
+      if (this.showConfig.appendableElement.parentElement !== container) {
+        container.append(this.showConfig.appendableElement);
+      }
       return container;
     };
   }

package/dist/collection/helpers/slimmers/sub-state/subStateObserverSlimmer.js

@@ -45,6 +45,10 @@ export class SubStateObserverSlimmer extends VegaSlimmer {
       }
     });
     ChangeManager.register(DomNodeSubjectFactory.getSubject(this.parent, VegaInternalSubStatePush), this.subStateObserver);
+    if (this.observerEntry.pullStatesWhenReattached && this.host.classList.contains('hydrated')) {
+      this.parent = this.getParent();
+      this.pullStates();
+    }
   }
   /**
    * Unregister the observer when disconnectedCallback
@@ -58,19 +62,7 @@ export class SubStateObserverSlimmer extends VegaSlimmer {
    * Fetch the parent props when componentWillLoad
    */
   componentWillLoad() {
-    if (!this.parent)
-      return;
-    const { subStates } = this.observerEntry;
-    subStates.forEach((subState) => {
-      ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.parent, VegaInternalSubStatePull), {
-        host: this.parent,
-        stateName: subState.parentStateName,
-        // eslint-disable-next-line jsdoc/require-jsdoc
-        callback: (value) => {
-          this.updateState(subState, value);
-        },
-      });
-    });
+    this.pullStates();
   }
   /**
    * The function `getParent` returns the parent element of a given host element, based on the observer
@@ -100,6 +92,28 @@ export class SubStateObserverSlimmer extends VegaSlimmer {
       this[subState.subStateName] = value;
     }
   }
+  /**
+   * The `pullStates` function iterates through subStates and notifies the ChangeManager to update the
+   * state based on the callback function provided.
+   *
+   * @returns {void} If the `this.parent` property is falsy, the `pullStates` method will return early and not
+   * execute the rest of the code inside the method.
+   */
+  pullStates() {
+    if (!this.parent)
+      return;
+    const { subStates } = this.observerEntry;
+    subStates.forEach((subState) => {
+      ChangeManager.notify(DomNodeSubjectFactory.getSubject(this.parent, VegaInternalSubStatePull), {
+        host: this.parent,
+        stateName: subState.parentStateName,
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: (value) => {
+          this.updateState(subState, value);
+        },
+      });
+    });
+  }
 }
 __decorate([
   MapToComponentField()