@globalpayments/vega 2.22.0 → 2.24.0

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

@@ -1,8 +1,18 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { InjectVegaTelemetrySlimmer } from 'vega-slimmer/core';
+import { VegaIconManagerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/public-api/IconManager/runtime-metrics-payload-definition';
+import { createPublicAPIRuntimeMetricsSlimmer } from '../slimmers/runtime-metrics/create-public-api-runtime-metrics-slimmer';
 /**
  * Internal icon manager controller.
  */
 class IconManager {
   constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(IconManager, ['register', 'getIcon', 'hasIcon'], VegaIconManagerRuntimeMetricsPayloadDefinition);
     this.icons = new Map();
   }
   /**
@@ -36,4 +46,7 @@ class IconManager {
     return this.icons.has(name);
   }
 }
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], IconManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 export const VegaIconManager = new IconManager();

package/dist/collection/helpers/icon/test/icon-manager-controller.test.js

@@ -1,4 +1,6 @@
 import { VegaIconManager } from '../icon-manager';
+import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
+import { sleep } from '../../../utils/test-utils';
 describe('IconManagerController', () => {
   beforeAll(() => {
     const Icons = {
@@ -36,4 +38,64 @@ describe('IconManagerController', () => {
   it('should return false if icon not exists in icon manager', () => {
     expect(VegaIconManager.hasIcon('no-register-icon')).toBe(false);
   });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    const Icons = {
+      'mocked-icon': {
+        icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1.2937 7.29414C0.903076 7.68477 0.903076 8.31914 1.2937 8.70977L7.2937 14.7098C7.68433 15.1004 8.3187 15.1004 8.70933 14.7098C9.09995 14.3191 9.09995 13.6848 8.70933 13.2941L3.41558 8.00039L8.7062 2.70664C9.09683 2.31602 9.09683 1.68164 8.7062 1.29102C8.31558 0.900391 7.6812 0.900391 7.29058 1.29102L1.29058 7.29102L1.2937 7.29414Z" fill="currentColor"/></svg>`,
+      },
+    };
+    VegaIconManager.register(Icons);
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'IconManager',
+        data: {
+          IS_REGISTER_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    expect(VegaIconManager.getIcon('chevron-left')).toEqual({
+      icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1.2937 7.29414C0.903076 7.68477 0.903076 8.31914 1.2937 8.70977L7.2937 14.7098C7.68433 15.1004 8.3187 15.1004 8.70933 14.7098C9.09995 14.3191 9.09995 13.6848 8.70933 13.2941L3.41558 8.00039L8.7062 2.70664C9.09683 2.31602 9.09683 1.68164 8.7062 1.29102C8.31558 0.900391 7.6812 0.900391 7.29058 1.29102L1.29058 7.29102L1.2937 7.29414Z" fill="currentColor"/></svg>`,
+    });
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'IconManager',
+        data: {
+          IS_GETICON_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    expect(VegaIconManager.hasIcon('chevron-left')).toBeTruthy();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'IconManager',
+        data: {
+          IS_HASICON_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    const Icons = {
+      'mocked-icon': {
+        icon: `<svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M1.2937 7.29414C0.903076 7.68477 0.903076 8.31914 1.2937 8.70977L7.2937 14.7098C7.68433 15.1004 8.3187 15.1004 8.70933 14.7098C9.09995 14.3191 9.09995 13.6848 8.70933 13.2941L3.41558 8.00039L8.7062 2.70664C9.09683 2.31602 9.09683 1.68164 8.7062 1.29102C8.31558 0.900391 7.6812 0.900391 7.29058 1.29102L1.29058 7.29102L1.2937 7.29414Z" fill="currentColor"/></svg>`,
+      },
+    };
+    VegaIconManager.register(Icons);
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'IconManager',
+        data: {
+          IS_REGISTER_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
 });

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

@@ -2,6 +2,8 @@ jest.mock('../../../utils/misc', () => ({
   generateUUID: () => 'TEST_UUID',
 }));
 import { VegaLoader } from '../vega-loader-controller';
+import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
+import { sleep } from '../../../utils/test-utils';
 describe('VegaLoaderController', () => {
   it('should append default loader into body', () => {
     VegaLoader.load();
@@ -72,4 +74,92 @@ describe('VegaLoaderController', () => {
     VegaLoader.close(loaderId);
     expect(document.getElementById(loaderId)).toBeNull();
   });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    VegaLoader.load();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaLoaderController',
+        data: {
+          IS_LOAD_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call close', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    const loaderId = VegaLoader.load();
+    expect(document.getElementById(loaderId)).not.toBeNull();
+    VegaLoader.close(loaderId);
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaLoaderController',
+        data: {
+          IS_CLOSE_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should append loader into container shadowRoot when container has shadowRoot', () => {
+    const container = document.createElement('div');
+    container.attachShadow({ mode: 'open' });
+    container.id = 'container';
+    document.querySelector('body').append(container);
+    const loader = VegaLoader.load({ containerSelector: '#container' });
+    expect(document.querySelector('body')).toEqualHtml(`
+		<body>
+		  <div data-vega-loader-origin-position id="container" style="position: relative;">
+		    <mock:shadow-root>
+		      <vega-loader-wrapper class="absolute-wrapper" data-container="#container" id="vega-loader-TEST_UUID">
+		        <vega-loading-indicator></vega-loading-indicator>
+		      </vega-loader-wrapper>
+		    </mock:shadow-root>
+		  </div>
+		</body>
+	`);
+    VegaLoader.close(loader);
+    expect(document.querySelector('body')).toMatchInlineSnapshot(`
+		<body>
+		  <div data-vega-loader-origin-position id="container" style="position: static;">
+		    <mock:shadow-root></mock:shadow-root>
+		  </div>
+		</body>
+	`);
+  });
+  it('should not append loader into container which not have shadowRoot', () => {
+    const container = document.createElement('div');
+    container.id = 'container';
+    document.querySelector('body').append(container);
+    const loader = VegaLoader.load({ containerSelector: '#container' });
+    expect(document.querySelector('body')).toMatchInlineSnapshot(`
+		<body>
+		  <div data-vega-loader-origin-position id="container" style="position: relative;">
+		    <vega-loader-wrapper class="absolute-wrapper" data-container="#container" id="vega-loader-TEST_UUID">
+		      <vega-loading-indicator></vega-loading-indicator>
+		    </vega-loader-wrapper>
+		  </div>
+		</body>
+	`);
+    VegaLoader.close(loader);
+    expect(document.querySelector('body')).toMatchInlineSnapshot(`
+		<body>
+		  <div data-vega-loader-origin-position id="container" style="position: static;"></div>
+		</body>
+	`);
+  });
+  it('should not append loader into container which containerSelector is not existed', () => {
+    console.error = jest.fn();
+    const container = document.createElement('div');
+    container.id = 'container';
+    document.querySelector('body').append(container);
+    const wrongId = VegaLoader.load({ containerSelector: '#wrong-selector' });
+    expect(document.querySelector('body')).toMatchInlineSnapshot(`
+      <body>
+        <div id="container"></div>
+      </body>
+    `);
+    expect(wrongId).toEqual(null);
+    expect(console.error).toHaveBeenCalledWith('%c[Vega]', 'font-weight: bold', 'Container is not found by selector: ', '#wrong-selector');
+    expect(() => VegaLoader.close('#not-exist-selector>>>test')).not.toThrowError();
+  });
 });

package/dist/collection/helpers/loading-indicator/vega-loader-controller.js

@@ -1,9 +1,22 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 import { generateUUID } from '../../utils/misc';
 import { arrayToClassString } from '../../utils/ui';
+import { InjectVegaTelemetrySlimmer } from 'vega-slimmer/core';
+import { createPublicAPIRuntimeMetricsSlimmer } from '../slimmers/runtime-metrics/create-public-api-runtime-metrics-slimmer';
+import { VegaLoaderRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/public-api/VegaLoaderController/runtime-metrics-payload-definition';
+import { LogUtility } from '../../utils/log';
 /**
  * Vega loader controller to control the loading indicator
  */
 class VegaLoaderController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition);
+  }
   /**
    * Create a loading indicator and append it to the container
    *
@@ -12,11 +25,15 @@ class VegaLoaderController {
    */
   load(options = {}) {
     const containerSelector = options.containerSelector || 'body';
+    const containerElement = document.querySelector(containerSelector);
+    if (!containerElement) {
+      LogUtility.error('Container is not found by selector: ', containerSelector);
+      return null;
+    }
     const loadingIndicator = this.createLoadingIndicator(options.indicatorOptions);
     const loader = this.createLoader(containerSelector);
     loader.append(loadingIndicator);
-    this.appendLoader(loader, containerSelector);
-    return loader.id;
+    return this.appendLoader(loader, containerElement);
   }
   /**
    * Close the loader by id
@@ -24,7 +41,7 @@ class VegaLoaderController {
    * @param {string} id - The id of the loader.
    */
   close(id) {
-    const loader = document.getElementById(id);
+    const loader = this.findLoader(id);
     if (loader) {
       if (loader.dataset.container) {
         const container = document.querySelector(loader.dataset.container);
@@ -35,6 +52,24 @@ class VegaLoaderController {
       loader.remove();
     }
   }
+  /**
+   * Find loader by id, if the id include '>>>' it will find inside shadowRoot
+   *
+   * @param {string} id - The id of the loader.
+   * @returns {string} The loader found by id.
+   */
+  findLoader(id) {
+    var _a, _b;
+    let loader;
+    if (id.includes('>>>')) {
+      const [containerSelector, loaderSelector] = id.split('>>>');
+      loader = (_b = (_a = document.querySelector(containerSelector)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(loaderSelector);
+    }
+    else {
+      loader = document.getElementById(id);
+    }
+    return loader;
+  }
   /**
    * Create a loader for loading indicator
    *
@@ -65,15 +100,23 @@ class VegaLoaderController {
    * Append the loader to the container
    *
    * @param {HTMLElement} loader A loader with loading indicator
-   * @param {string} containerSelector The container which you want to append the loader to
+   * @param {string} containerElement The container which you want to append the loader to
+   * @returns {string} The uuid of the loader.
    */
-  appendLoader(loader, containerSelector) {
-    const containerElement = document.querySelector(containerSelector);
-    if (containerElement) {
-      containerElement.dataset['vegaLoaderOriginPosition'] = containerElement.style.position;
-      containerElement.style.position = 'relative';
+  appendLoader(loader, containerElement) {
+    containerElement.dataset['vegaLoaderOriginPosition'] = containerElement.style.position;
+    containerElement.style.position = 'relative';
+    if (containerElement.shadowRoot) {
+      containerElement.shadowRoot.append(loader);
+      return `${loader.dataset['container']}>>>${loader.id}`;
+    }
+    else {
       containerElement.append(loader);
+      return loader.id;
     }
   }
 }
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 export const VegaLoader = new VegaLoaderController();

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

@@ -4,6 +4,8 @@ jest.mock('../../../utils/misc', () => ({
 import { VegaNotify } from '../../public-api';
 import { setupUserAgent } from '../../../utils/test-utils';
 import { MockedResizeObserver } from '../../../utils/spec-utils';
+import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
+import { sleep } from '../../../utils/test-utils';
 describe('vegaNotifyController', () => {
   beforeEach(() => {
     VegaNotify['container'] = null; // Jest cleared the document before each suite
@@ -91,4 +93,73 @@ describe('vegaNotifyController', () => {
       </vega-page-notification-list>
 		`);
   });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call open', async () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    await VegaNotify.open({
+      title: 'Test',
+      message: 'This is the content of notification.',
+    });
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaNotifyController',
+        data: {
+          IS_OPEN_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call close', async () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    const id = await VegaNotify.open({
+      title: 'Test',
+      message: 'This is the content of notification.',
+    });
+    mockPageNotificationListHydrated();
+    const notification = document.getElementById(id);
+    notification.close = async () => {
+      notification.remove();
+      MockedResizeObserver.mock.instances.forEach((item) => {
+        item['trigger']([{ contentRect: { height: 0 } }]);
+      });
+    };
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaSkeletonLoaderController',
+        data: {
+          IS_CLOSE_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call closeAll', async () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    await VegaNotify.open({
+      title: 'Test',
+      message: 'This is the content of notification.',
+    });
+    await VegaNotify.open({
+      title: 'Test',
+      message: 'This is the content of notification.',
+    });
+    document
+      .querySelectorAll('vega-page-notification')
+      .forEach((item) => {
+      item.close = async () => {
+        item.remove();
+        MockedResizeObserver.mock.instances.forEach((item) => {
+          item['trigger']([{ contentRect: { height: 0 } }]);
+        });
+      };
+    });
+    mockPageNotificationListHydrated();
+    await VegaNotify.closeAll();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaSkeletonLoaderController',
+        data: {
+          IS_CLOSEALL_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
 });

package/dist/collection/helpers/notify/vega-notify-controller.js

@@ -4,12 +4,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import ZIndexManager from '../zindex/z-index-manager';
+import InternalVegaZIndexManager from '../zindex/internal-vega-z-index-manager';
 import { generateUUID } from '../../utils/misc';
 import { getDeviceType } from '../../utils/ui';
 import { DeviceType } from '../../types/ui.type';
-import { InjectVegaSlimmer, createDynamicSlimmer, methodPlaceholder } from 'vega-slimmer/core';
+import { InjectVegaSlimmer, InjectVegaTelemetrySlimmer, createDynamicSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
 import { PageResizeObserverSlimmer } from '../slimmers/page-resize-observer-slimmer';
+import { createPublicAPIRuntimeMetricsSlimmer } from '../slimmers/runtime-metrics/create-public-api-runtime-metrics-slimmer';
+import { VegaNotifyRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/public-api/VegaNotifyController/runtime-metrics-payload-definition';
 /**
  * The page notification controller
  */
@@ -22,7 +24,7 @@ class VegaNotifyController {
           var _a;
           const currentVisible = entries[0].contentRect.height > 0;
           if (!currentVisible && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains('hydrated'))) {
-            ZIndexManager.removeZIndex(this.container, 'top');
+            InternalVegaZIndexManager.removeZIndex(this.container, 'top');
             this.container.remove();
             this.container = null;
           }
@@ -31,6 +33,7 @@ class VegaNotifyController {
         target: () => this.container,
       },
     ]);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition);
   }
   /**
    * It creates a new notification element, adds it to the container, and returns the notification's ID
@@ -92,7 +95,7 @@ class VegaNotifyController {
       return this.container;
     }
     this.container = document.createElement('vega-page-notification-list');
-    ZIndexManager.setZIndex(this.container, 'top');
+    InternalVegaZIndexManager.setZIndex(this.container, 'top');
     if (getDeviceType() === DeviceType.MOBILE) {
       this.container.classList.add('vega-page-notification-list-bottom');
     }
@@ -107,4 +110,7 @@ class VegaNotifyController {
 __decorate([
   InjectVegaSlimmer()
 ], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], VegaNotifyController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 export const VegaNotify = new VegaNotifyController();

package/dist/collection/helpers/public-api.js

@@ -1,5 +1,6 @@
 import VegaEnvManager, { FrameworkEnum } from './vega-telemetry-helper/vega-env-manager';
 import VegaEventManager from './event-manager/vega-event-manager';
+export { default as VegaZIndexManager } from './zindex/vega-z-index-manager';
 export { FeatureFlag } from './feature-control/feature-flag-controller';
 export { VegaLoader } from './loading-indicator/vega-loader-controller';
 export { VegaNotify } from './notify/vega-notify-controller';

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

@@ -2,6 +2,8 @@ jest.mock('../../../utils/misc', () => ({
   generateUUID: () => 'TEST_UUID',
 }));
 import { VegaSkeletonLoader } from '../vega-skeleton-loader-controller';
+import VegaTelemetryRuntimeMetricsManager from '@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index';
+import { sleep } from '../../../utils/test-utils';
 describe('vega-skeleton-loader-controller', () => {
   beforeEach(() => {
     document.body.innerHTML = `
@@ -136,4 +138,57 @@ describe('vega-skeleton-loader-controller', () => {
 		</body>
 	`);
   });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call load', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      type: 'image',
+      width: '200px',
+      height: '100px',
+    });
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaSkeletonLoaderController',
+        data: {
+          IS_LOAD_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call unLoad', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    const key = VegaSkeletonLoader.load({
+      target: '.target-class',
+      type: 'image',
+      width: '200px',
+      height: '100px',
+    });
+    VegaSkeletonLoader.unLoad(key);
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaSkeletonLoaderController',
+        data: {
+          IS_UNLOAD_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
+  it('should call the emit method of VegaTelemetryRuntimeMetricsManager when call unLoadAll', () => {
+    jest.spyOn(VegaTelemetryRuntimeMetricsManager, 'emit');
+    VegaSkeletonLoader.load({
+      target: '.target-class',
+      type: 'image',
+      width: '200px',
+      height: '100px',
+    });
+    VegaSkeletonLoader.unLoadAll();
+    void Promise.resolve(sleep(100)).then(async () => {
+      expect(VegaTelemetryRuntimeMetricsManager.emit).toHaveBeenCalledWith('publicAPIMetrics', {
+        publicAPIName: 'VegaSkeletonLoaderController',
+        data: {
+          IS_UNLOADALL_METHOD_CALLED: true,
+        },
+      });
+    });
+  });
 });

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

@@ -1,9 +1,19 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { InjectVegaTelemetrySlimmer } from 'vega-slimmer/core';
+import { VegaSkeletonRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/public-api/VegaSkeletonLoader/runtime-metrics-payload-definition';
 import { generateUUID } from '../../utils/misc';
+import { createPublicAPIRuntimeMetricsSlimmer } from '../slimmers/runtime-metrics/create-public-api-runtime-metrics-slimmer';
 /**
  * Vega Skeleton Loader Controller to show skeletons in the target elements
  */
 class VegaSkeletonLoaderController {
   constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition);
     this.loaderMap = new Map();
   }
   /**
@@ -84,4 +94,7 @@ class VegaSkeletonLoaderController {
   }
 }
 VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], VegaSkeletonLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 export const VegaSkeletonLoader = new VegaSkeletonLoaderController();

package/dist/collection/helpers/slimmers/runtime-metrics/public-api-runtime-metrics-slimmer-base.js

@@ -1,5 +1,6 @@
-import { VegaSlimmer } from 'vega-slimmer/core';
+import { CurrentlyInvokedMethodName, VegaSlimmer } from 'vega-slimmer/core';
 import { LogUtility } from '../../../utils/log';
+import { isObjectEmpty } from '../../../utils/misc';
 /**
  * The `VegaPublicAPIRuntimeMetricsSlimmerBase` class is used for sending
  * telemetry data to a telemetry service based on defined usage metrics for a public api.
@@ -24,26 +25,28 @@ export class VegaPublicAPIRuntimeMetricsSlimmerBase extends VegaSlimmer {
    * register the observer when the slimmer method called
    *
    * @param {unknown[]} [args] - The `args` parameter passed in when the slimmer method is executed
-   * @param {string} [methodName] - The `methodName` parameter is the actual method name of the public API call.
    */
-  sendPublicAPIPayloadToTelemetry(args, methodName) {
-    // eslint-disable-next-line spellcheck/spell-checker
-    void import('@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index.js').then((
-    // eslint-disable-next-line spellcheck/spell-checker
-    module) => {
-      try {
-        module['default']['emit']('publicAPIMetrics', this.getPublicAPIMetricsPayload(methodName, args));
+  sendPublicAPIPayloadToTelemetry(args) {
+    try {
+      const publicAPIMetricsPayload = this.getPublicAPIMetricsPayload(args);
+      if (publicAPIMetricsPayload) {
+        // eslint-disable-next-line spellcheck/spell-checker
+        void import('@globalpayments/vega-telemetry-runtime-metrics/runtime-metrics/src/index.js').then((
+        // eslint-disable-next-line spellcheck/spell-checker
+        module) => {
+          module['default']['emit']('publicAPIMetrics', publicAPIMetricsPayload);
+        });
       }
-      catch (error) {
-        LogUtility.log('Public API payload failed to emit telemetry:', error);
-      }
-    });
+    }
+    catch (error) {
+      LogUtility.log('Public API payload failed to emit telemetry:', error);
+    }
   }
   /**
    * The function `getPublicAPIMetricsPayload` generates a payload containing public api
    * metrics data.
+   * The `CurrentlyInvokedMethodName` is a public API method name, it comes from the `InjectVegaTelemetrySlimmer` definition and assignment
    *
-   * @param {string} [methodName] - The `methodName` parameter is the actual method name of the public API call.
    * @param {unknown[]} [args] - The `args` parameter passed in when the slimmer method is executed
    * @returns {Record<string, unknown>} The `getPublicAPIMetricsPayload` method returns an object with the following
    * structure:
@@ -53,13 +56,16 @@ export class VegaPublicAPIRuntimeMetricsSlimmerBase extends VegaSlimmer {
    * 		'waitForVegaRenderFinished': true,
    * }
    */
-  getPublicAPIMetricsPayload(methodName, args) {
+  getPublicAPIMetricsPayload(args) {
     const payloadData = {};
     this.usageDefinitions
-      .filter((definitions) => definitions.canAccept(this.className, methodName, args))
+      .filter((definitions) => definitions.canAccept(this.className, this[CurrentlyInvokedMethodName], args))
       .forEach((definitions) => {
-      payloadData[definitions.payloadKey] = definitions.payloadValue(this.className, methodName, args);
+      payloadData[definitions.payloadKey] = definitions.payloadValue(args);
     });
+    if (isObjectEmpty(payloadData)) {
+      return null;
+    }
     return {
       publicAPIName: this.className,
       data: payloadData,