@globalpayments/vega 2.15.0 → 2.17.0

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/event-manager/slimmers/childNodesEventPreventSlimmer.js

@@ -30,6 +30,9 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
      */
     this.preventChildEvent = (event) => {
       const hostElement = this.getHostElement();
+      if (this.shouldSkipEventPrevent()) {
+        return;
+      }
       if (typeof this.customPreventHandle === 'function') {
         this.customPreventHandle(event);
       }
@@ -109,6 +112,15 @@ export class ChildNodesEventPreventSlimmer extends VegaSlimmer {
       !!jqueryDelegatedEvent &&
       jqueryDelegatedStrategyController.isSupportDelegated(this.host, eventId));
   }
+  /**
+   * The function `shouldSkipEventPrevent` checks if a host element has a specific dataset value to determine whether event prevention should be skipped.
+   *
+   * @returns {boolean} If the `hostElement` exists and has a `dataset.vegaNoEventPrevent` attribute with a value of `'true'`, then the function returns `true`. Otherwise, it returns `false`.
+   */
+  shouldSkipEventPrevent() {
+    const hostElement = this.getHostElement();
+    return hostElement && hostElement.dataset.vegaNoEventPrevent === 'true';
+  }
 }
 __decorate([
   MapToComponentField()

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

@@ -107,6 +107,20 @@ describe('ChildNodesEventPreventSlimmer', () => {
     mockedComponent.disconnectedCallback();
     expect(mockedComponent['slimmer']['isEventListenerAdded']).toBeFalsy();
   });
+  test('should skip prevent child event when set skip flag after component did render', () => {
+    const mockedComponent = new MockedSlimmer();
+    const host = document.createElement('div');
+    mockedComponent.host = host;
+    host.innerHTML = `<p><span></span></p>`;
+    mockedComponent.parentElement = host.querySelector('p');
+    const mockListener = jest.fn();
+    host.addEventListener('vegaClick', mockListener);
+    mockedComponent.componentDidLoad();
+    mockedComponent.parentElement.setAttribute('data-vega-no-event-prevent', 'true');
+    host.dispatchEvent(new CustomEvent('vegaClick', { bubbles: true, cancelable: true }));
+    host.querySelector('span').dispatchEvent(new CustomEvent('vegaClick', { bubbles: true, cancelable: true }));
+    expect(mockListener).toBeCalledTimes(2);
+  });
 });
 describe('shadow dom', () => {
   class MockedShadowComponent {

package/dist/collection/helpers/publicApi.js

@@ -11,3 +11,4 @@ export { BaseStrategy as VegaJQueryDelegatedEventStrategy } from './event-manage
 export { VegaIconManager } from './icon/iconManager';
 export { ValidCreditCardNumberRule } from './validator/rules/validCreditCardNumberRule';
 export { waitForVega } from './common';
+export { VegaSkeletonLoader } from '../helpers/skeleton-loader/vega-skeleton-loader-controller';

package/dist/collection/helpers/skeleton-loader/tests/vega-skeleton-loader-controller.test.js

@@ -0,0 +1,139 @@
+jest.mock('../../../utils/misc', () => ({
+  generateUUID: () => 'TEST_UUID',
+}));
+import { VegaSkeletonLoader } from '../vega-skeleton-loader-controller';
+describe('vega-skeleton-loader-controller', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div class="target-class"></div>
+    `;
+  });
+  afterEach(() => {
+    VegaSkeletonLoader.unLoadAll();
+    document.body.innerHTML = '';
+  });
+  it('should render a skeleton in target', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+    });
+    expect(document.body).toMatchInlineSnapshot(`
+		      <body>
+		        <div class="target-class">
+		          <vega-skeleton data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID"></vega-skeleton>
+		        </div>
+		      </body>
+	    `);
+  });
+  it('should remove the skeleton when call unLoad', () => {
+    const key = VegaSkeletonLoader.load({
+      target: '.target-class',
+    });
+    expect(document.body).toMatchInlineSnapshot(`
+		        <body>
+		          <div class="target-class">
+		            <vega-skeleton data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID"></vega-skeleton>
+		          </div>
+		        </body>
+	      `);
+    expect(VegaSkeletonLoader['loaderMap'].size).toEqual(1);
+    VegaSkeletonLoader.unLoad(key);
+    expect(VegaSkeletonLoader['loaderMap'].size).toEqual(0);
+    expect(document.body).toMatchInlineSnapshot(`
+		      <body>
+		        <div class="target-class"></div>
+		      </body>
+	    `);
+  });
+  it('should remove all the skeletons when call unLoadAll', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+    });
+    expect(VegaSkeletonLoader['loaderMap'].size).toEqual(1);
+    expect(document.body).toMatchInlineSnapshot(`
+		<body>
+		  <div class="target-class">
+		    <vega-skeleton data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID"></vega-skeleton>
+		  </div>
+		</body>
+	`);
+    VegaSkeletonLoader.unLoadAll();
+    expect(VegaSkeletonLoader['loaderMap'].size).toEqual(0);
+    expect(document.body).toMatchInlineSnapshot(`
+		      <body>
+		        <div class="target-class"></div>
+		      </body>
+	    `);
+  });
+  it('should render a skeleton with type', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      type: 'full-width-paragraph',
+    });
+    expect(document.body.querySelector('vega-skeleton').type).toEqual('full-width-paragraph');
+  });
+  it('should render a skeleton with width and height', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      type: 'image',
+      width: '200px',
+      height: '100px',
+    });
+    const skeletonEl = document.querySelector('vega-skeleton');
+    expect(skeletonEl.type).toEqual('image');
+    expect(skeletonEl.width).toEqual('200px');
+    expect(skeletonEl.height).toEqual('100px');
+  });
+  it('should render complex items', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      items: [
+        { type: 'ellipse', width: '30px', height: '30px' },
+        { type: 'text', width: '100px' },
+      ],
+    });
+    const skeletons = document.querySelectorAll('vega-skeleton');
+    expect(document.body).toMatchInlineSnapshot(`
+		      <body>
+		        <div class="target-class">
+		          <vega-skeleton data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID"></vega-skeleton>
+		          <vega-skeleton data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID"></vega-skeleton>
+		        </div>
+		      </body>
+	    `);
+    expect({ type: skeletons[0].type, width: skeletons[0].width, height: skeletons[0].height }).toEqual({
+      type: 'ellipse',
+      width: '30px',
+      height: '30px',
+    });
+    expect({ type: skeletons[1].type, width: skeletons[1].width }).toEqual({
+      type: 'text',
+      width: '100px',
+    });
+  });
+  it('should render item with wrapped layout', () => {
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      items: [
+        { type: 'image', width: '100%', height: '200px' },
+        { type: 'paragraph', width: '100%' },
+      ],
+      layout: {
+        props: {
+          direction: 'col',
+          gap: 'size-20',
+        },
+        style: { width: 'calc(33% - 12px)' },
+      },
+    });
+    expect(document.body).toMatchInlineSnapshot(`
+		<body>
+		  <div class="target-class">
+		    <vega-flex class="vega-skeleton-loader-template-container" data-vega-skeleton-loader-key="vega-skeleton-loader-TEST_UUID" style="width: calc(33% - 12px);">
+		      <vega-skeleton></vega-skeleton>
+		      <vega-skeleton></vega-skeleton>
+		    </vega-flex>
+		  </div>
+		</body>
+	`);
+  });
+});

package/dist/collection/helpers/skeleton-loader/vega-skeleton-loader-controller.js

@@ -0,0 +1,87 @@
+import { generateUUID } from '../../utils/misc';
+/**
+ * Vega Skeleton Loader Controller to show skeletons in the target elements
+ */
+class VegaSkeletonLoaderController {
+  constructor() {
+    this.loaderMap = new Map();
+  }
+  /**
+   * Load the skeletons in the target elements
+   *
+   * @param { VegaSkeletonLoaderConfig } config - Configuration for the loading function
+   * @param {string} config.target - Target elements to show the skeletons.
+   * @param {VegaSkeletonLoaderConfig.type} [config.type = 'text'] - Type of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.width} config.width - Width of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.height} config.height - Height of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.items} config.items - Configuration for multiple skeleton items.
+   * @param {VegaSkeletonLoaderConfig.layout} config.layout - Layout of the skeleton items.
+   * @returns { string } - Key of the loaded skeleton items.
+   */
+  load({ target, type = 'text', width, height, items, layout }) {
+    const targets = Array.from(document.body.querySelectorAll(target));
+    const key = `vega-skeleton-loader-${generateUUID()}`;
+    const loaderItems = [];
+    targets.forEach((target) => {
+      const skeletonsLoaders = !items
+        ? [this.createSkeleton({ type, width, height })]
+        : items.map(this.createSkeleton);
+      const itemsWithKey = (layout ? [this.wrapLayout(skeletonsLoaders, layout)] : skeletonsLoaders).map((item) => {
+        item.dataset[VegaSkeletonLoaderController.LOADER_DATA_SET_KEY] = key;
+        return item;
+      });
+      loaderItems.push(...itemsWithKey);
+      target.append(...itemsWithKey);
+    });
+    this.loaderMap.set(key, loaderItems);
+    return key;
+  }
+  /**
+   * Remove the skeletons from the dom.
+   *
+   * @param {string} key - The key returned from {@link VegaSkeletonLoaderController.load}.
+   */
+  unLoad(key) {
+    if (this.loaderMap.has(key)) {
+      this.loaderMap.get(key).forEach((item) => item.remove());
+      this.loaderMap.delete(key);
+    }
+  }
+  /**
+   * Remove all the skeletons from the dom.
+   */
+  unLoadAll() {
+    for (const items of this.loaderMap.values()) {
+      items.forEach((item) => item.remove());
+    }
+    this.loaderMap.clear();
+  }
+  /**
+   * Create a skeleton item. The skeleton animated always be true
+   *
+   * @param {VegaSkeletonLoaderItem} config - Configuration for the skeleton item.
+   * @returns {HTMLElement} - Skeleton item.
+   */
+  createSkeleton(config) {
+    const { type, width, height } = config;
+    const skeleton = document.createElement('vega-skeleton');
+    Object.assign(skeleton, { animated: true, type, width, height });
+    return skeleton;
+  }
+  /**
+   * Wrap the flex layout for the skeletons.
+   *
+   * @param {HTMLElement[]} skeletons - Skeleton elements of the loader.
+   * @param {VegaSkeletonLoaderLayout} layout - Flex properties for the layout.
+   * @returns {HTMLElement} - Container wrapping the skeletons in the specified flex layout.
+   */
+  wrapLayout(skeletons, layout) {
+    const skeletonContainer = document.createElement('vega-flex');
+    Object.assign(skeletonContainer, Object.assign({ className: 'vega-skeleton-loader-template-container' }, layout.props));
+    Object.assign(skeletonContainer.style, layout.style);
+    skeletonContainer.append(...skeletons);
+    return skeletonContainer;
+  }
+}
+VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
+export const VegaSkeletonLoader = new VegaSkeletonLoaderController();