@globalpayments/vega 2.64.0 → 2.66.0

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

@@ -1,6 +1,9 @@
 import { CalendarDate } from '../calendar-date';
 import { CalendarEvent } from '../calendar-event';
 import { MonthPeriod } from '../calendar-period/month-period';
+import { newSpecPage } from '@stencil/core/testing';
+import { VegaCalendar } from '../../../components/vega-calendar/vega-calendar';
+import { LogUtility } from '../../../utils/log';
 const mockDate = new Date(2024, 5, 13, 13, 44);
 const mockStringDate = '06/13/2024';
 const rawEvent = {
@@ -188,3 +191,71 @@ describe('calendar-event', () => {
     expect(calendarEvent11.generateRepeatString()).toBe('');
   });
 });
+describe('calendar event with timezone', () => {
+  it('should display correct event start time after timezone conversion', async () => {
+    const testEvents = [
+      {
+        key: 'event1',
+        title: 'Test Event 1',
+        startDate: '10/29/2025',
+        endDate: '10/29/2025',
+        startTime: '09:00',
+        endTime: '17:00',
+        isAllDay: false,
+      },
+    ];
+    const page = await newSpecPage({
+      components: [VegaCalendar],
+      html: `<vega-calendar timezone="UTC" view-mode="week"></vega-calendar>`,
+    });
+    const component = page.rootInstance;
+    const calendarElement = page.body.querySelector('vega-calendar');
+    calendarElement.events = testEvents;
+    await page.waitForChanges();
+    expect(component.calendarEvents).toHaveLength(1);
+    const calendarEvent = component.calendarEvents[0];
+    expect(calendarEvent.startTime).toBe('09:00');
+    calendarElement.timezone = 'Asia/Shanghai';
+    expect(calendarEvent.startTime).toBe('17:0');
+    expect(calendarEvent.endTime).toBe('1:0');
+    calendarElement.timezone = 'America/New_York';
+    expect(calendarEvent.startTime).toBe('5:0');
+    expect(calendarEvent.endTime).toBe('13:0');
+  });
+  it('should handle timezone conversion with invalid timezone gracefully', async () => {
+    const testEvents = [
+      {
+        key: 'event1',
+        title: 'Test Event 1',
+        startDate: '10/29/2025',
+        endDate: '10/29/2025',
+        startTime: '14:30',
+        endTime: '16:45',
+        isAllDay: false,
+      },
+    ];
+    const page = await newSpecPage({
+      components: [VegaCalendar],
+      html: `<vega-calendar timezone="Invalid/Timezone"></vega-calendar>`,
+    });
+    const calendarElement = page.body.querySelector('vega-calendar');
+    calendarElement.events = testEvents;
+    spyOn(LogUtility, 'warn');
+    await page.waitForChanges();
+    expect(LogUtility.warn).toHaveBeenCalledWith('Invalid timezone:', 'Invalid/Timezone');
+  });
+  it('should not call updateTimezone when no calendar events exist during timezone change', async () => {
+    const page = await newSpecPage({
+      components: [VegaCalendar],
+      html: `<vega-calendar timezone="UTC"></vega-calendar>`,
+    });
+    const component = page.rootInstance;
+    expect(component.calendarEvents).toHaveLength(0);
+    const calendarElement = page.body.querySelector('vega-calendar');
+    calendarElement.timezone = 'Asia/Shanghai';
+    expect(() => {
+      component.watchTimezoneChange();
+    }).not.toThrow();
+    expect(component.postOperationDate).toBeDefined();
+  });
+});

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

@@ -79,3 +79,31 @@ describe('day-period', () => {
     expect(dayPeriod.current.date).toEqual(8);
   });
 });
+describe('DayPeriod Timezone', () => {
+  beforeEach(() => {
+    jest.useFakeTimers('modern');
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('should create day period for a specific date', () => {
+    const dayPeriod = new DayPeriod(new CalendarDate(2025, 10, 29));
+    expect(dayPeriod.current).toEqual(new CalendarDate(2025, 10, 29));
+    expect(dayPeriod.startDate).toEqual(new CalendarDate(2025, 10, 29));
+    expect(dayPeriod.endDate).toEqual(new CalendarDate(2025, 10, 29));
+  });
+  it('should create day period with timezone Asia/Shanghai', () => {
+    jest.setSystemTime(new Date('2025-10-29T16:00:00Z'));
+    const dayPeriod = new DayPeriod(undefined, true, 'Asia/Shanghai');
+    expect(dayPeriod.current).toEqual(new CalendarDate(2025, 10, 30));
+    expect(dayPeriod.startDate).toEqual(new CalendarDate(2025, 10, 30));
+    expect(dayPeriod.endDate).toEqual(new CalendarDate(2025, 10, 30));
+  });
+  it('should go to now with timezone America/Los_Angeles', () => {
+    jest.setSystemTime(new Date('2025-10-30T06:00:00Z'));
+    const nowPeriod = new DayPeriod(undefined, true, 'America/Los_Angeles');
+    expect(nowPeriod.current).toEqual(new CalendarDate(2025, 10, 29));
+    expect(nowPeriod.startDate).toEqual(new CalendarDate(2025, 10, 29));
+    expect(nowPeriod.endDate).toEqual(new CalendarDate(2025, 10, 29));
+  });
+});

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

@@ -66,3 +66,38 @@ describe('month-period', () => {
     });
   });
 });
+describe('MonthPeriod Timezone', () => {
+  beforeEach(() => {
+    jest.useFakeTimers('modern');
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('should create month period for a specific date', () => {
+    const monthPeriod = new MonthPeriod(new CalendarDate(2025, 10, 29));
+    expect(monthPeriod.current).toEqual(new CalendarDate(2025, 10, 29));
+    expect(monthPeriod.startDate.month).toBe(9);
+    expect(monthPeriod.endDate.month).toBe(11);
+  });
+  it('should create month period with timezone Asia/Shanghai', () => {
+    jest.setSystemTime(new Date('2025-10-31T16:00:00Z'));
+    const monthPeriod = new MonthPeriod(undefined, true, 'Asia/Shanghai');
+    expect(monthPeriod.current).toEqual(new CalendarDate(2025, 11, 1));
+    expect(monthPeriod.startDate.month).toBe(10);
+    expect(monthPeriod.endDate.month).toBe(12);
+  });
+  it('should go to now with timezone America/Los_Angeles', () => {
+    jest.setSystemTime(new Date('2025-11-01T06:00:00Z'));
+    const monthPeriod = new MonthPeriod(undefined, true, 'America/Los_Angeles');
+    expect(monthPeriod.current).toEqual(new CalendarDate(2025, 10, 31));
+    expect(monthPeriod.startDate.month).toBe(9);
+    expect(monthPeriod.endDate.month).toBe(11);
+  });
+  it('should go to another month', () => {
+    const monthPeriod = new MonthPeriod(new CalendarDate(2025, 10, 29));
+    const nextMonth = monthPeriod.goTo(new CalendarDate(2025, 11, 1));
+    expect(nextMonth.current).toEqual(new CalendarDate(2025, 11, 1));
+    expect(nextMonth.startDate.month).toBe(10);
+    expect(nextMonth.endDate.month).toBe(12);
+  });
+});

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

@@ -58,3 +58,46 @@ describe('week-period', () => {
     });
   });
 });
+describe('WeekPeriod Timezone', () => {
+  beforeEach(() => {
+    jest.useFakeTimers('modern');
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('should create week period for a specific date', () => {
+    jest.setSystemTime(new Date('2025-10-29T12:00:00Z'));
+    const weekPeriod = new WeekPeriod();
+    expect(weekPeriod.current).toEqual(new CalendarDate(2025, 10, 29));
+    expect(weekPeriod.startDate).toEqual(new CalendarDate(2025, 10, 26));
+    expect(weekPeriod.endDate).toEqual(new CalendarDate(2025, 11, 1));
+  });
+  it('should create week period with timezone Asia/Shanghai', () => {
+    jest.setSystemTime(new Date('2025-10-27T16:00:00Z'));
+    const weekPeriod = new WeekPeriod(undefined, true, 'Asia/Shanghai');
+    expect(weekPeriod.current).toEqual(new CalendarDate(2025, 10, 28));
+    expect(weekPeriod.startDate).toEqual(new CalendarDate(2025, 10, 26));
+    expect(weekPeriod.endDate).toEqual(new CalendarDate(2025, 11, 1));
+  });
+  it('should go to a date in another week', () => {
+    const weekPeriod = new WeekPeriod(new CalendarDate(2025, 10, 29));
+    const nextWeek = weekPeriod.goTo(new CalendarDate(2025, 11, 4));
+    expect(nextWeek.current).toEqual(new CalendarDate(2025, 11, 4));
+    expect(nextWeek.startDate).toEqual(new CalendarDate(2025, 11, 2));
+    expect(nextWeek.endDate).toEqual(new CalendarDate(2025, 11, 8));
+  });
+  it('should go to now with timezone America/New_York', () => {
+    jest.setSystemTime(new Date('2025-11-02T04:00:00Z'));
+    const weekPeriod = new WeekPeriod(undefined, true, 'America/New_York');
+    const nowPeriod = weekPeriod.now();
+    expect(nowPeriod.current).toEqual(new CalendarDate(2025, 11, 2));
+    expect(nowPeriod.startDate).toEqual(new CalendarDate(2025, 11, 2));
+    expect(nowPeriod.endDate).toEqual(new CalendarDate(2025, 11, 8));
+  });
+  it('should handle week period at year boundary', () => {
+    const weekPeriod = new WeekPeriod(new CalendarDate(2025, 12, 31));
+    expect(weekPeriod.current).toEqual(new CalendarDate(2025, 12, 31));
+    expect(weekPeriod.startDate).toEqual(new CalendarDate(2025, 12, 28));
+    expect(weekPeriod.endDate).toEqual(new CalendarDate(2026, 1, 3));
+  });
+});

package/dist/collection/helpers/calendar/test/utils.test.js

@@ -1,4 +1,4 @@
-import { getWeekdays } from '../utils';
+import { getWeekdays, getCurrentDatePartsInTimezone, getSystemTimezone } from '../utils';
 describe('utils', () => {
   it('should return weekdays as expected by default', () => {
     expect(getWeekdays()).toEqual([0, 1, 2, 3, 4, 5, 6]);
@@ -7,3 +7,31 @@ describe('utils', () => {
     expect(getWeekdays(1)).toEqual([1, 2, 3, 4, 5, 6, 0]);
   });
 });
+describe('timezone-utils', () => {
+  beforeEach(() => {
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-10-29T23:30:00Z'));
+  });
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+  it('should get correct date parts in UTC', () => {
+    const result = getCurrentDatePartsInTimezone('UTC', new Date('2025-10-29T23:30:00Z'));
+    expect(result.year).toBe(2025);
+    expect(result.month).toBe(10);
+    expect(result.date).toBe(29);
+  });
+  it('should get current date parts in specific timezone', () => {
+    const shanghaiParts = getCurrentDatePartsInTimezone('Asia/Shanghai', new Date('2025-10-29T23:30:00Z'));
+    expect(shanghaiParts.year).toBe(2025);
+    expect(shanghaiParts.month).toBe(10);
+    expect(shanghaiParts.date).toBe(30); // already next day
+  });
+  it('should fallback to system time for invalid timezone', () => {
+    const result = getCurrentDatePartsInTimezone('Invalid/Timezone', new Date('2025-10-29T23:30:00Z'));
+    const systemTimezoneResult = getCurrentDatePartsInTimezone(getSystemTimezone(), new Date('2025-10-29T23:30:00Z'));
+    expect(result.year).toBe(systemTimezoneResult.year);
+    expect(result.month).toBe(systemTimezoneResult.month);
+    expect(result.date).toBe(systemTimezoneResult.date);
+  });
+});

package/dist/collection/helpers/calendar/utils.js

@@ -1,4 +1,5 @@
 import { VegaInternalTranslation } from '../translation';
+import { LogUtility } from '../../utils/log';
 /**
  * Get a week days array
  *
@@ -46,3 +47,48 @@ export const formatDisplayTime = (timeFormat, timeString) => {
     }
   }
 };
+/**
+ * Gets current date parts in the specified timezone
+ *
+ * @param {string} timezone - The IANA timezone identifier
+ * @param {Date} date - The date to get parts for
+ * @returns {DateParts} - An object with year, month, and date properties for the specified timezone
+ */
+export function getCurrentDatePartsInTimezone(timezone, date) {
+  if (timezone && timezone !== getSystemTimezone()) {
+    try {
+      const formatter = new Intl.DateTimeFormat([], {
+        timeZone: timezone,
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+      });
+      const parts = formatter.formatToParts(date);
+      const yearPart = parts.find((part) => part.type === 'year');
+      const monthPart = parts.find((part) => part.type === 'month');
+      const dayPart = parts.find((part) => part.type === 'day');
+      if (yearPart && monthPart && dayPart) {
+        const year = parseInt(yearPart.value, 10);
+        const month = parseInt(monthPart.value, 10);
+        const date = parseInt(dayPart.value, 10);
+        return { year, month, date };
+      }
+    }
+    catch (_a) {
+      LogUtility.warn('Invalid timezone:', timezone);
+    }
+  }
+  return {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    date: date.getDate(),
+  };
+}
+/**
+ * Get the system timezone identifier
+ *
+ * @returns {string} - The system timezone identifier (e.g., "America/New_York")
+ */
+export const getSystemTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -4,8 +4,6 @@ export const LEFT_NAV_LINK_SELECTED_TOPIC = new StaticSubject('LEFT_NAV_LINK_SEL
 export const ACCORDION_EXPAND_TOPIC = new StaticSubject('ACCORDION_EXPAND_TOPIC');
 export const FORM_RESET_OPERATION_TRIGGERED = new StaticSubject('FORM_RESET_OPERATION_TRIGGERED');
 export const FORM_FIELD_ELEMENT_DISCONNECTED = new StaticSubject('FORM_FIELD_ELEMENT_DISCONNECTED');
-export const FORM_SUBMIT = new StaticSubject('FORM_SUBMIT');
-export const FORM_RESET = new StaticSubject('FORM_RESET');
 export const RADIO_GROUP_DISABLED_CHANGE = new StaticSubject('RADIO_GROUP_DISABLED_CHANGE');
 export const CHECKBOX_GROUP_DISABLED_CHANGE = new StaticSubject('CHECKBOX_GROUP_DISABLED_CHANGE');
 export const FORM_FIELD_PENDING_VALID_CHANGE = new StaticSubject('FORM_FIELD_PENDING_VALID_CHANGE');

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaDropdownShow, VegaDropdownHide, VegaReset, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaClick, VegaDropdownClick, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaPageUpdate, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaDropdownShow, VegaDropdownHide, VegaReset, VegaDropdownSearch, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaFocus, VegaBlur, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-header-button', [VegaClick, VegaDropdownClick]],
@@ -34,9 +34,10 @@ const entries = [
   ['vega-file-uploader', [VegaChange, VegaSelectFileChange, VegaRemove, VegaRetry, VegaPreview]],
   ['vega-form', [VegaFormSubmit, VegaFormReset, VegaValidate]],
   ['vega-image-uploader', [VegaChange, VegaRemove, VegaCancel]],
-  ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick]],
+  ['vega-input', [VegaChange, VegaFocus, VegaBlur, VegaLabelButtonClick, VegaPaste]],
   ['vega-input-credit-card', [VegaChange, VegaBlur, VegaFocus]],
   ['vega-input-numeric', [VegaChange]],
+  ['vega-input-passcode', [VegaChange, VegaComplete]],
   ['vega-input-phone-number', [VegaChange, VegaCountryChange]],
   ['vega-input-range', [VegaChange]],
   ['vega-input-select', [VegaChange, VegaSearch, VegaSearchTrigger, VegaShow, VegaHide]],

package/dist/collection/helpers/event-manager/event-id/vega-event-id.js

@@ -102,4 +102,6 @@ export const VegaPreview = new VegaEventID('vegaPreview', 'preview');
 export const VegaLabelButtonClick = new VegaEventID('vegaLabelButtonClick', 'labelButtonClick');
 export const VegaReset = new VegaEventID('vegaReset', 'reset');
 export const VegaMonthYearChange = new VegaEventID('vegaMonthYearChange', 'monthYearChange');
-export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur];
+export const VegaComplete = new VegaEventID('vegaComplete', 'complete');
+export const VegaPaste = new VegaEventID('vegaPaste', 'paste');
+export const HTMLNativeEventIds = [VegaChange, VegaClick, VegaFocus, VegaBlur, VegaPaste];

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -57,4 +57,7 @@ export const VegaInternalCalendarEventPreviewUpdate = new VegaInternalEventID('c
 export const VegaInternalCalendarEventPreviewClear = new VegaInternalEventID('calendarEventPreviewClear');
 export const VegaInternalUpdateRTECursorPosition = new VegaInternalEventID('InternalUpdateRTECursorPosition');
 export const VegaInternalMonthYearChange = new VegaInternalEventID('internalMonthYearChange');
+export const VegaInternalLeftNavLinkSelectedTopic = new VegaInternalEventID('leftNavLinkSelectedTopic');
 export const VegaInternalCalendarEventPreviewHide = new VegaInternalEventID('calendarEventPreviewHide');
+export const VegaInternalFormSubmit = new VegaInternalEventID('formSubmit');
+export const VegaInternalFormReset = new VegaInternalEventID('formReset');

package/dist/collection/helpers/event-manager/test/component-event-id-map.test.js

@@ -1,5 +1,5 @@
 import { VEGA_COMPONENT_EVENT_MAP } from '../event-id/component-event-id-map';
-import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus, VegaLabelButtonClick, VegaPaste } from '../event-id/vega-event-id';
 test('VEGA_COMPONENT_EVENT_MAP size', () => {
   expect(VEGA_COMPONENT_EVENT_MAP.size).not.toEqual(0);
 });
@@ -9,5 +9,6 @@ test('VEGA_COMPONENT_EVENT_MAP vega-input', () => {
     VegaFocus,
     VegaBlur,
     VegaLabelButtonClick,
+    VegaPaste,
   ]);
 });

package/dist/collection/helpers/event-manager/test/vega-event-manager.test.js

@@ -1,5 +1,5 @@
 import { VegaEventManager } from '../../public-api';
-import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaReset, VegaSearchTrigger, } from '../event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaFocus, VegaLabelButtonClick, VegaPaste, VegaReset, VegaSearchTrigger, } from '../event-id/vega-event-id';
 import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/index';
 import { sleep } from '../../../utils/test-utils';
 describe('VegaEventManager', () => {
@@ -23,6 +23,7 @@ describe('VegaEventManager', () => {
       VegaFocus,
       VegaBlur,
       VegaLabelButtonClick,
+      VegaPaste,
     ]);
     expect(VegaEventManager.getEnabledEventIdsByComponent('vega-dropdown')).toEqual([
       VegaDropdownShow,

package/dist/collection/helpers/immutable/immutable-array.js

@@ -0,0 +1,133 @@
+/**
+ * Immutable Array cannot be changed once created
+ */
+export class ImmutableArray {
+  /**
+   * The constructor of ImmutableArray
+   *
+   * @typedef T generic type parameter
+   * @param {T[]} initialArray - Optional initial array
+   * @param {() => void} onMutate - Optional callback invoked with the new ImmutableArray whenever a mutation is performed
+   */
+  constructor(initialArray, onMutate) {
+    this.length = 0;
+    this.array = [];
+    if (initialArray) {
+      this.array = initialArray;
+      this.length = initialArray.length;
+    }
+    if (onMutate) {
+      this.onMutate = onMutate;
+    }
+  }
+  /**
+   * The function is called when the array is mutated
+   *
+   * @typedef T generic type parameter
+   * @param {ImmutableArray<T>} _newArr - The new array that was created.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  onMutate(_newArr) {
+    return;
+  }
+  /**
+   * Append items to the array and return a new ImmutableArray
+   *
+   * @param {T[]} items - The items to be appended to the array
+   * @returns {ImmutableArray<T>} - a new ImmutableArray with new items pushed.
+   */
+  push(...items) {
+    return this.withMutation((arr) => {
+      arr.push(...items);
+    });
+  }
+  /**
+   * Remove the last item from the array and return a new ImmutableArray.
+   * If the array is empty, a new ImmutableArray with the same (empty) contents is returned.
+   *
+   * @returns {ImmutableArray<T>} - a new ImmutableArray with the last one popped
+   */
+  pop() {
+    return this.withMutation((arr) => {
+      if (arr.length > 0)
+        arr.pop();
+    });
+  }
+  /**
+   * Update the item at the specified index and return a new ImmutableArray.
+   * If the index is out of range, no change is made and a new ImmutableArray (same contents) is returned.
+   *
+   * @param {number} index - Index of the item to update.
+   * @param {T} value - New value to set at the given index.
+   * @returns {ImmutableArray<T>} - a new ImmutableArray with updated item.
+   */
+  set(index, value) {
+    return this.withMutation((arr) => {
+      if (index >= 0)
+        arr[index] = value;
+    });
+  }
+  /**
+   * Set values from the provided array into this ImmutableArray one by one
+   *
+   * @param {T[]} values - Array of values to write into this array.
+   * @returns {ImmutableArray<T>} - a new ImmutableArray with updated items.
+   */
+  setAll(values) {
+    return this.withMutation((arr) => {
+      arr.length = 0;
+      for (let i = 0; i < values.length; i++) {
+        arr[i] = values[i];
+      }
+    });
+  }
+  /**
+   * Clear the array and return a new ImmutableArray
+   *
+   * @returns {ImmutableArray<T>} return a new ImmutableArray.
+   */
+  clear() {
+    return this.withMutation((arr) => {
+      arr.length = 0;
+    });
+  }
+  /**
+   * Performs a mutation on a copy of the internal array and returns a new ImmutableArray
+   *
+   * @param {(arr: T[]) => void} fn - (arr: T[]) => void
+   * @returns {ImmutableArray<T>} A new ImmutableArray
+   */
+  withMutation(fn) {
+    const newArr = [...this.array];
+    fn(newArr);
+    const newImmutable = new ImmutableArray(newArr, this.onMutate);
+    this.onMutate(newImmutable);
+    return newImmutable;
+  }
+  /**
+   * Get item by index
+   *
+   * @param {number} index - index of the array items
+   * @returns {T | undefined} The array item with the index
+   */
+  get(index) {
+    return this.array[index];
+  }
+  /**
+   * Join array elements into a string separated by the given separator.
+   *
+   * @param {string} [separator=','] - Separator to use between elements.
+   * @returns {string} The joined string.
+   */
+  join(separator) {
+    return this.array.join(separator);
+  }
+  /**
+   * It returns an array of the values in the array
+   *
+   * @returns {T[]} An array of the values in the array.
+   */
+  toArray() {
+    return this.array;
+  }
+}

package/dist/collection/helpers/immutable/test/immutable-array.test.js

@@ -0,0 +1,78 @@
+import { ImmutableArray } from '../immutable-array';
+describe('immutableArray', () => {
+  test('array with default values', () => {
+    const array = new ImmutableArray(['a', 'b', 'c']);
+    expect(array.length).toEqual(3);
+    expect(array.get(0)).toEqual('a');
+    expect(array.get(1)).toEqual('b');
+    expect(array.get(2)).toEqual('c');
+    expect(array.get(4)).toEqual(undefined);
+  });
+  test('should produce new array if values changed', () => {
+    const array = new ImmutableArray();
+    const array1 = array.push('a');
+    const array2 = array.push(...['b', 'c', 'd']);
+    const array3 = array1.pop();
+    const array4 = array2.pop();
+    expect(array.length).toEqual(0);
+    expect(array1.length).toEqual(1);
+    expect(array1.toArray()).toEqual(['a']);
+    expect(array2.length).toEqual(3);
+    expect(array2.toArray()).toEqual(['b', 'c', 'd']);
+    expect(array3.length).toEqual(0);
+    expect(array4.length).toEqual(2);
+    expect(array4.toArray()).toEqual(['b', 'c']);
+  });
+  test('reassigned array in callback', () => {
+    let array = new ImmutableArray(new Array(), (newArray) => {
+      array = newArray;
+    });
+    array.push('a');
+    array.push('b');
+    array.push('c');
+    array.push('d');
+    expect(array.length).toEqual(4);
+    expect(array.toArray()).toEqual(['a', 'b', 'c', 'd']);
+  });
+  test('clear the array values', () => {
+    let array = new ImmutableArray(new Array('a', 'b', 'c'), (newArray) => {
+      array = newArray;
+    });
+    array.clear();
+    expect(array.length).toEqual(0);
+  });
+  test('set and get the item in array', () => {
+    let array = new ImmutableArray(new Array('a', 'b', 'c'), (newArray) => {
+      array = newArray;
+    });
+    array.set(1, 'd');
+    expect(array.get(1)).toEqual('d');
+    expect(array.toArray()).toEqual(['a', 'd', 'c']);
+  });
+  test('setAll the items in array', () => {
+    const arr = ['a', 'b', 'c'];
+    let array = new ImmutableArray([], (newArray) => {
+      array = newArray;
+    });
+    array.setAll(arr);
+    expect(array.toArray()).toEqual(['a', 'b', 'c']);
+  });
+  test('join the items in array to a string', () => {
+    let array = new ImmutableArray(['a', 'b', 'c'], (newArray) => {
+      array = newArray;
+    });
+    const str = array.join();
+    expect(str).toEqual('a,b,c');
+  });
+  test('change the array by calling withMutation method', () => {
+    let array = new ImmutableArray(new Array('a', 'b', 'c'), (newArray) => {
+      array = newArray;
+    });
+    expect(array.length).toEqual(3);
+    array.withMutation((arr) => {
+      arr.length = 0;
+      arr.push('d');
+    });
+    expect(array.toArray()).toEqual(['d']);
+  });
+});

package/dist/collection/helpers/keyboard/keyboard-manager.js

@@ -70,7 +70,13 @@ class KeyboardManager {
    * @returns {boolean} - should invoke
    */
   shouldInvokeListener(listener, event) {
-    const keyCode = event.code;
+    let keyCode = '';
+    if (event.code) {
+      keyCode = event.code;
+    }
+    else if (event.key && event.key !== 'Unidentified') {
+      keyCode = event.key;
+    }
     let activeElementInScope = [];
     let activeElementOutScope = [];
     const isKeyCodeAccepted = Array.isArray(listener.keyCode)

package/dist/collection/helpers/keyboard/test/keyboard-manager.test.js

@@ -28,15 +28,19 @@ describe('KeyboardManager', () => {
     KeyboardManager['listenKeyPress']();
   });
   test('should proper while use KeyboardManager', () => {
+    const callback0 = jest.fn();
     const callback1 = jest.fn();
     const callback2 = jest.fn();
     const callback3 = jest.fn();
     KeyboardManager.register([
+      { keyCode: 'ArrowLeft', activeElementInScope: [button1], callback: callback0 },
       { keyCode: 'Tab', activeElementInScope: [button1], callback: callback1 },
       { keyCode: ['ArrowUp', 'ArrowDown'], activeElementInScope: [button1], callback: callback2 },
       { keyCode: 'Escape', activeElementInScope: [button1], callback: callback3 },
     ]);
     Object.assign(document, { activeElement: button1 });
+    document.dispatchEvent(new KeyboardEvent('keyup', { code: '', key: 'ArrowLeft' }));
+    expect(callback0).toBeCalledTimes(1);
     document.dispatchEvent(new KeyboardEvent('keyup', { code: 'Tab' }));
     expect(callback1).toBeCalledTimes(1);
     document.dispatchEvent(new KeyboardEvent('keyup', { code: 'ArrowUp' }));

package/dist/collection/helpers/validator/form-field-controller.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import ChangeManager from '../change-manager/change-manager';
 import { Observer } from '../change-manager/observer/observer';
-import { FORM_ELEMENT_VALUE_CHANGE, FORM_FIELD_ELEMENT_DISCONNECTED, FORM_FIELD_PENDING_VALID_CHANGE, FORM_RESET_OPERATION_TRIGGERED, FORM_SUBMIT, } from '../change-manager/subject/static-subject/static-subject-title';
+import { FORM_ELEMENT_VALUE_CHANGE, FORM_FIELD_ELEMENT_DISCONNECTED, FORM_FIELD_PENDING_VALID_CHANGE, FORM_RESET_OPERATION_TRIGGERED, } from '../change-manager/subject/static-subject/static-subject-title';
 import { findParent, isElementVisible } from '../../utils/ui';
 import { FormFieldValidationRuleHandlerChain, } from './validation-rule-handler/form-field-validation-rule-handler-chain';
 import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega-slimmer/core';
@@ -14,6 +14,8 @@ import { FieldErrorUIControllerSlimmer } from '../slimmers/field-error-ui-contro
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
 import { FormFieldMessageTranslatorSlimmer } from '../slimmers/form-field-message-translator';
 import { InternalFormFieldValidationRule } from './rules/internal-form-field-validation-rule.abstract';
+import domNodeSubjectFactory from '../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalFormSubmit } from '../event-manager/event-id/vega-internal-event-id';
 /**
  * The FormFieldController class is a class that validates the value of an input elements
  *
@@ -424,9 +426,17 @@ export class FormFieldController {
     this.host.addEventListener('keydown', 
     /* istanbul ignore next */ (event) => {
       if (this.canSubmitFormByEvent(event)) {
-        ChangeManager.notify(FORM_SUBMIT, {
-          host: this.host,
+        /**
+         * The below method is e2e-test covered in
+         *
+         * @see {module:emit-vegaFormSubmit-when-press-enter-nested-forms-input}
+         */
+        const outerForm = findParent(this.host, 'vega-form', {
+          outerMost: true,
         });
+        if (outerForm) {
+          ChangeManager.notify(domNodeSubjectFactory.getSubject(outerForm, VegaInternalFormSubmit), { host: this.host });
+        }
       }
     });
   }