@globalpayments/vega 2.16.0 → 2.17.0

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-value-controller.js

@@ -23,12 +23,9 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       if (this.selectType === 'multiple') {
         newValue = newValue;
         oldValue = oldValue;
-        const validValue = [];
-        this.source.forEach((sourceItem) => {
-          if (newValue.includes(sourceItem.id)) {
-            validValue.push(sourceItem.id);
-          }
-        });
+        const validValue = newValue
+          ? newValue.filter((value) => this.sourceController.getItem(value))
+          : [];
         if (!isArrayEqual(validValue, oldValue, true)) {
           this.setValue(validValue);
           this.changeEventEmitter.emit(validValue);
@@ -43,7 +40,7 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       }
       else {
         if (newValue !== oldValue) {
-          const sourceItem = this.source.find((sourceItem) => sourceItem.id === newValue);
+          const sourceItem = this.sourceController.getItem(newValue);
           this.setValue(sourceItem ? sourceItem.id : '');
           this.changeEventEmitter.emit(this.value);
           ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
@@ -89,15 +86,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "selectType", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectValueController.prototype, "source", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputSelectValueController.prototype, "handleValueChange", void 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.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,7 @@ export const VegaNativeEventName = [
   'dropdownSearch',
   'actionClick',
   'eventClick',
-  'dateClick',
+  'dateDblClick',
 ];
 // 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,4 +1,4 @@
-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, VegaChange, VegaEventClick, VegaDateDblClick, 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';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
@@ -8,7 +8,7 @@ const entries = [
   ['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]],

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

@@ -86,5 +86,5 @@ 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 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/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()

package/dist/collection/helpers/slimmers/sub-state/test/sub-state-observer-slimmer.test.js

@@ -54,7 +54,7 @@ describe('SubStateObserverSlimmer', () => {
     InjectVegaSlimmer()
   ], MockedParentComponent.prototype, "parentStateNotifySlimmer", void 0);
   class ChildStateSlimmer extends SubStateObserverSlimmer {
-    constructor() {
+    constructor(entry) {
       super({
         parent: childParent,
         subStates: [
@@ -70,6 +70,7 @@ describe('SubStateObserverSlimmer', () => {
             },
           },
         ],
+        pullStatesWhenReattached: entry && entry.pullStatesWhenReattached,
       });
     }
   }
@@ -83,11 +84,11 @@ describe('SubStateObserverSlimmer', () => {
     MapToComponentField({ writable: true })
   ], ChildStateSlimmer.prototype, "age", void 0);
   class ChildComponent {
-    constructor() {
+    constructor(childStateSlimmerEntry) {
       this.host = child;
       this.name = 'child name';
       this.childState = 'child only';
-      this.childStateSlimmer = new ChildStateSlimmer();
+      this.childStateSlimmer = new ChildStateSlimmer(childStateSlimmerEntry);
     }
     connectedCallback() {
       jest.fn();
@@ -189,4 +190,15 @@ describe('SubStateObserverSlimmer', () => {
     parentComponent.watchParentState('parent state changed');
     expect(childComponent.getChildState()).toEqual('child only');
   });
+  it('child state should be changed when connectedCallback and pullStatesWhenReattached is true', () => {
+    child.classList.add('hydrated');
+    const parentComponent = new MockedParentComponent();
+    const childComponent = new ChildComponent({
+      pullStatesWhenReattached: true,
+    });
+    parentComponent.connectedCallback();
+    parentComponent.componentWillLoad();
+    childComponent.connectedCallback();
+    expect(childComponent.getName()).toEqual('parent name');
+  });
 });

package/dist/collection/helpers/vega-telemetry-helper/test/vegaEnvManager.test.js

@@ -4,7 +4,7 @@ test('should return the correct vega environment parameters', () => {
   const vegaEnv = VegaEnvManager.getVegaEnv();
   expect(vegaEnv).toEqual({
     framework: 'vanilla-js',
-    version: '2.16.0',
+    version: '2.17.0',
   });
 });
 test('should return the correct vega framework', () => {

package/dist/collection/helpers/vega-telemetry-helper/vegaEnvManager.js

@@ -9,9 +9,9 @@ export var FrameworkEnum;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.16.0` will be replaced to a version string when running publish script.
+    // The `2.17.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.16.0';
+    this.vegaVersion = '2.17.0';
     this.framework = FrameworkEnum.VanillaJs;
   }
   /**

package/dist/esm/{app-globals-032d6105.js → app-globals-ba85a900.js}

@@ -1,8 +1,8 @@
 import { F as FeatureFlag } from './featureFlagController-816491ad.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaThemeManager, c as VegaEventManager, v as vegaEnvManager, w as waitForVega, d as VegaSkeletonLoader } from './vega-skeleton-loader-controller-3f5500e5.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaThemeManager, c as VegaEventManager, v as vegaEnvManager, w as waitForVega, d as VegaSkeletonLoader } from './vega-skeleton-loader-controller-778b12be.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaDialog } from './vegaDialogController-f96ee430.js';
-import './internalVegaEventManager-e1501923.js';
+import './internalVegaEventManager-71d00966.js';
 import './ui-28499aab.js';
 import { T as TypographyUrls } from './typography-a8fc4764.js';
 import { V as VegaIconManager } from './iconManager-48bebc43.js';

package/dist/esm/{childNodesEventPreventSlimmer-b9c50cc4.js → childNodesEventPreventSlimmer-d0da4527.js}

@@ -1,5 +1,5 @@
 import { a as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-16fd7452.js';
-import { I as InternalVegaEventManager, j as jqueryDelegatedStrategyController } from './internalVegaEventManager-e1501923.js';
+import { I as InternalVegaEventManager, j as jqueryDelegatedStrategyController } from './internalVegaEventManager-71d00966.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/esm/{eventEmitSlimmer-9c33f04e.js → eventEmitSlimmer-7b16eef9.js}

@@ -2,7 +2,7 @@ import { a as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } fr
 import { c as createDynamicSlimmer } from './dynamic-slimmer-ef83e258.js';
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { j as jqueryDelegatedStrategyController, I as InternalVegaEventManager } from './internalVegaEventManager-e1501923.js';
+import { j as jqueryDelegatedStrategyController, I as InternalVegaEventManager } from './internalVegaEventManager-71d00966.js';
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;