@globalpayments/vega 2.21.0 → 2.23.0

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,30 @@ 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,
+        },
+      });
+    });
+  });
 });

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

@@ -1,9 +1,21 @@
+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';
 /**
  * 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
    *
@@ -76,4 +88,7 @@ class VegaLoaderController {
     }
   }
 }
+__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/mutation-observer/mutation-observer-filters.js

@@ -37,3 +37,15 @@ export const AttributeOldValueMutationFilter = () => {
     return (mutations.find((mutation) => mutation.attributeName && mutation.oldValue !== host.getAttribute(mutation.attributeName)) !== undefined);
   };
 };
+/**
+ * Filters mutations based on specified tag names or attribute changes.
+ *
+ * @param {string[]} tagNames - The tagName of need listened child.
+ * @returns {Function} - Filter function.
+ */
+export const TagNameAndAttributeMutationFilter = (...tagNames) => {
+  return (mutations) => {
+    return (TagNameMutationFilter(...tagNames)(mutations) ||
+      mutations.find((mutation) => mutation.attributeName && tagNames.includes(mutation.target.tagName)) !== undefined);
+  };
+};

package/dist/collection/helpers/slimmers/mutation-observer/mutation-observer-slimmer.js

@@ -51,7 +51,7 @@ export class MutationObserverSlimmer extends VegaSlimmer {
     this.mutationObserver = new MutationObserver(async (mutations) => {
       if (!this.observerEntry.mutationFilter ||
         this.observerEntry.mutationFilter(mutations, this.host)) {
-        this.observerEntry.callback();
+        this.observerEntry.callback(mutations);
       }
     });
   }

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

@@ -8,7 +8,7 @@ import { MockHTMLElement } from '@stencil/core/mock-doc';
 import { InjectVegaSlimmer } from 'vega-slimmer/core';
 import { MutationObserverSlimmer } from '../mutation-observer-slimmer';
 import { MockedMutationObserver } from '../../../../utils/spec-utils';
-import { AttributeOldValueMutationFilter, TagNameMutationFilter } from '../mutation-observer-filters';
+import { AttributeOldValueMutationFilter, TagNameAndAttributeMutationFilter, TagNameMutationFilter, } from '../mutation-observer-filters';
 describe('mutationObserverSlimmer', () => {
   const mockedConnectedCallback = jest.fn();
   const mockedDisconnectedCallback = jest.fn();
@@ -91,6 +91,58 @@ describe('mutationObserverSlimmer', () => {
     expect(mockedMutationCallback).toBeCalledTimes(1);
     mockedComponent.disconnectedCallback();
   });
+  it('slimmer callback should be called when observer attributes and child list', () => {
+    const mockedComponent = new MockedComponent();
+    mockedComponent.setMutationObserverSlimmer(new MutationObserverSlimmer({
+      target: () => mockedComponent.host,
+      options: { attributes: true, attributeFilter: ['disabled'], childList: true, subtree: true },
+      mutationFilter: TagNameAndAttributeMutationFilter('MOCKED-NODE'),
+      callback: () => {
+        mockedMutationCallback();
+      },
+    }));
+    mockedComponent.connectedCallback();
+    mockedComponent.componentDidLoad();
+    const node = document.createElement('mocked-node');
+    MockedMutationObserver.mock.instances[0].trigger([
+      {
+        addedNodes: [node],
+        removedNodes: [],
+      },
+    ]);
+    expect(mockedMutationCallback).toBeCalledTimes(1);
+    node.setAttribute('disabled', 'true');
+    MockedMutationObserver.mock.instances[0].trigger([
+      {
+        attributeName: 'disabled',
+        oldValue: 'false',
+        addedNodes: [],
+        removedNodes: [],
+        target: node,
+      },
+    ]);
+    expect(mockedMutationCallback).toBeCalledTimes(2);
+    mockedComponent.disconnectedCallback();
+    const noListenNode = document.createElement('no-listen-node');
+    MockedMutationObserver.mock.instances[0].trigger([
+      {
+        addedNodes: [noListenNode],
+        removedNodes: [],
+      },
+    ]);
+    expect(mockedMutationCallback).toBeCalledTimes(2);
+    noListenNode.setAttribute('disabled', 'true');
+    MockedMutationObserver.mock.instances[0].trigger([
+      {
+        attributeName: 'disabled',
+        oldValue: 'false',
+        addedNodes: [],
+        removedNodes: [],
+        target: noListenNode,
+      },
+    ]);
+    expect(mockedMutationCallback).toBeCalledTimes(2);
+  });
   it('should work proper while component disconnected', () => {
     const mockedComponent = new MockedComponent();
     mockedComponent.setMutationObserverSlimmer(new MutationObserverSlimmer({

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

@@ -0,0 +1,23 @@
+import { createDynamicSlimmer } from 'vega-slimmer/core';
+import { VegaPublicAPIRuntimeMetricsSlimmerBase } from './public-api-runtime-metrics-slimmer-base';
+/**
+ * The function `createComponentUsageRuntimeMetricsSlimmer` creates a slimmer version of a component
+ * usage runtime metrics object based on a given class prototype and optional method names to watch.
+ *
+ * @param {ClassPrototype} mapFromClass - The `mapFromClass` parameter is a ClassPrototype that represents the class
+ * from which the dynamic map will be created.
+ * @param {MethodKeysOf[]} [watchMethodNames] - The `watchMethodNames` parameter
+ * is an optional array of method names that you want to watch for in the component.
+ * @param {unknown[]} [initData] - The `initData` parameter allows you to
+ * pass an array of initial data to be used during the initialization of the component usage runtime
+ * metrics slimmer.
+ * @returns {VegaPublicAPIRuntimeMetricsSlimmerBase} The function creates a dynamic public api runtime metrics slimmer.
+ */
+export function createPublicAPIRuntimeMetricsSlimmer(mapFromClass, watchMethodNames, initData) {
+  const methodsMap = [];
+  watchMethodNames.map((watchMethodName) => methodsMap.push({
+    mapFrom: watchMethodName,
+    mapTo: 'sendPublicAPIPayloadToTelemetry',
+  }));
+  return createDynamicSlimmer(mapFromClass, VegaPublicAPIRuntimeMetricsSlimmerBase, [], methodsMap, [mapFromClass.name, initData]);
+}

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

@@ -0,0 +1,74 @@
+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.
+ */
+export class VegaPublicAPIRuntimeMetricsSlimmerBase extends VegaSlimmer {
+  /**
+   * The constructor initializes a private readonly property with an optional array of
+   * PublicAPIRuntimeMetricsDefinition.
+   *
+   * @param {string} [className] - The parameter show the class name of public api.
+   * @param {PublicAPIRuntimeMetricsDefinition[]} [usageDefinitions] - The `usageDefinitions`
+   * parameter in the constructor is of type `PublicAPIRuntimeMetricsDefinition<T>[]`, which is an
+   * array of `ComponentUsageRuntimeMetricsDefinition` objects. This parameter is optional as it is
+   * marked with a question mark `?`, meaning it can be omitted when creating an instance of
+   */
+  constructor(className, usageDefinitions) {
+    super();
+    this.className = className;
+    this.usageDefinitions = usageDefinitions;
+  }
+  /**
+   * register the observer when the slimmer method called
+   *
+   * @param {unknown[]} [args] - The `args` parameter passed in when the slimmer method is executed
+   */
+  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);
+    }
+  }
+  /**
+   * 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 {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:
+   * {
+   * 	publicAPIName: string, // The public api name
+   * 	data: { // An object containing payload data with keys and boolean values
+   * 		'waitForVegaRenderFinished': true,
+   * }
+   */
+  getPublicAPIMetricsPayload(args) {
+    const payloadData = {};
+    this.usageDefinitions
+      .filter((definitions) => definitions.canAccept(this.className, this[CurrentlyInvokedMethodName], args))
+      .forEach((definitions) => {
+      payloadData[definitions.payloadKey] = definitions.payloadValue(args);
+    });
+    if (isObjectEmpty(payloadData)) {
+      return null;
+    }
+    return {
+      publicAPIName: this.className,
+      data: payloadData,
+    };
+  }
+}