@globalpayments/vega 2.45.0 → 2.47.0

package/dist/cjs/vega-skeleton-loader-controller-8cbd7656.js

@@ -0,0 +1,1291 @@
+'use strict';
+
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+const ui = require('./ui-13b42af0.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
+const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-44e08878.js');
+const darkModeStyleController = require('./dark-mode-style-controller-c93b94d2.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-c9948b59.js');
+const number = require('./number-4816603d.js');
+
+const VegaLoaderRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_LOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaLoaderController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaLoaderController' && methodName === 'load',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method close of public API VegaLoaderController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaLoaderController' && methodName === 'close',
+    /**
+     * The function checks if the method name is close.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * Vega loader controller to control the loading indicator
+ */
+class VegaLoaderController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * Create a loading indicator and append it to the container
+   *
+   * @param {VegaLoaderIndicatorOptions} options - VegaLoaderOptions = {} options of the method
+   * @returns {Nullable<string>} The uuid of the loader.
+   * @vegaVersion 1.16.0
+   */
+  load(options = {}) {
+    let containerSelector = options.containerSelector || 'body';
+    let containerElement = document.querySelector(containerSelector);
+    if (containerElement &&
+      VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY.includes(containerElement.tagName)) {
+      containerSelector = 'body';
+      containerElement = document.querySelector('body');
+    }
+    if (!containerElement) {
+      globalSlimmerRegistry.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);
+    return this.appendLoader(loader, containerElement);
+  }
+  /**
+   * Close the loader by id
+   *
+   * @param {string} id - The id of the loader.
+   * @vegaVersion 1.16.0
+   */
+  close(id) {
+    const loader = this.findLoader(id);
+    if (loader) {
+      if (loader.dataset.container) {
+        const container = document.querySelector(loader.dataset.container);
+        if (container) {
+          if (container.dataset['vegaLoaderOriginPosition']) {
+            container.style.position = container.dataset['vegaLoaderOriginPosition'];
+          }
+        }
+      }
+      loader.remove();
+    }
+  }
+  /**
+   * Find loader by id, if the id include '>>>' it will find inside shadowRoot
+   *
+   * @param {string} id - The id of the loader.
+   * @returns {Nullable<HTMLElement>} 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
+   *
+   * @param {string} containerSelector The container which you want to append
+   * @returns {HTMLElement} a wrapper for loader
+   */
+  createLoader(containerSelector) {
+    const loader = document.createElement('vega-loader-wrapper');
+    loader.className = ui.arrayToClassString([
+      containerSelector === 'body' ? 'fixed-wrapper' : 'absolute-wrapper',
+    ]);
+    loader.dataset['container'] = containerSelector;
+    loader.id = `vega-loader-${createPublicApiRuntimeMetricsSlimmer.generateUUID()}`;
+    return loader;
+  }
+  /**
+   * Create a loading indicator
+   *
+   * @param {VegaLoaderIndicatorOptions} indicatorOptions the props of vega loading indicator
+   * @returns {HTMLVegaLoadingIndicatorElement} vega-loading-indicator component template
+   */
+  createLoadingIndicator(indicatorOptions = {}) {
+    const loadingIndicator = document.createElement('vega-loading-indicator');
+    Object.assign(loadingIndicator, indicatorOptions);
+    return loadingIndicator;
+  }
+  /**
+   * Append the loader to the container
+   *
+   * @param {HTMLElement} loader A loader with loading indicator
+   * @param {string} containerElement The container which you want to append the loader to
+   * @returns {string} The uuid of the loader.
+   */
+  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;
+    }
+  }
+}
+VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
+__decorate$6([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaLoader = new VegaLoaderController();
+
+const BASE_BASIC_Z_INDEX = 10000;
+const TOP_BASIC_Z_INDEX = 11000;
+/**
+ * Base level is for custom element such as modal, tooltip, dropdown, sidenav and header.
+ * 	the z-index of current showing element is highly than already show.
+ * Top level is for element that always display to top, such as notification.
+ */
+class InternalVegaZIndexManager {
+  constructor() {
+    this.baseBasicZIndex = BASE_BASIC_Z_INDEX;
+    this.topBasicZIndex = TOP_BASIC_Z_INDEX;
+    this.levelEntry = {
+      base: {
+        zIndex: this.baseBasicZIndex,
+        elements: [],
+      },
+      top: {
+        zIndex: this.topBasicZIndex,
+        elements: [],
+      },
+    };
+  }
+  /**
+   * "If the element is not already the current element, then increment the z-index and set the element
+   * to the current element."
+   *
+   * The function is a little more complicated than that, but not much. The function takes an element and
+   * a level. The level is optional and defaults to 'base'. The level is used to keep track of the
+   * z-index for each level. The function uses a private variable, levelStatus, to keep track of the
+   * current element and z-index for each level
+   *
+   * @param {HTMLElement} element - The element to set the z-index of.
+   * @param {ZIndexLevelType} [level=base] - The level of the element.
+   * @returns {void}
+   */
+  setZIndex(element, level = 'base') {
+    if (element === null)
+      return;
+    this.removeZIndex(element, level);
+    const zIndexEntry = this.levelEntry[level];
+    if (element && zIndexEntry) {
+      if (level === 'base' && this.isBaseLevelOver()) {
+        globalSlimmerRegistry.LogUtility.warn(`The max 'z-index' of base level is '11000', but the current 'z-index' is over, Please optimize the use of 'z-index', otherwise there will be some performance overhead.`);
+        this.increaseTopEntry();
+      }
+      zIndexEntry.elements.push(element);
+      zIndexEntry.zIndex += 1;
+      element.style.zIndex = zIndexEntry.zIndex.toString();
+    }
+  }
+  /**
+   * It removes the element from the level's array of elements, and then decrements the z-index of all
+   * elements after the removed element
+   *
+   * @param {HTMLElement} element - HTMLElement - The element to move
+   * @param {ZIndexLevelType} [level=base] - Level = 'base'
+   * @returns {void}
+   */
+  removeZIndex(element, level = 'base') {
+    if (element === null)
+      return;
+    const zIndexEntry = this.levelEntry[level];
+    if (element && zIndexEntry) {
+      let startAt = -1;
+      zIndexEntry.elements.forEach((e, index) => {
+        if (e === element)
+          startAt = index;
+        if (startAt >= 0 && index > startAt) {
+          e.style.zIndex = `${number.convertToNumber(e.style.zIndex) - 1}`;
+        }
+      });
+      if (startAt >= 0) {
+        element.style.removeProperty('z-index');
+        zIndexEntry.elements.splice(startAt, 1);
+        zIndexEntry.zIndex -= 1;
+      }
+    }
+  }
+  /**
+   * The function "overrideZIndexBasicValues" updates the base and top basic z-index values based on the
+   * input provided.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues, which is an
+   * object with two properties: base and top. Both properties are optional and can be either a number or
+   * undefined.
+   */
+  overrideZIndexBasicValues(input) {
+    const basicValues = this.formatZIndexBasicValues(input);
+    if (this.validBasicValues(basicValues)) {
+      this.updateBasicValues(basicValues);
+    }
+  }
+  /**
+   * The function `formatZIndexBasicValues` takes an input object and returns a new object with additional
+   * properties `base` and `top` added to it.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues. It is an object
+   * that contains properties for base and top.
+   * @returns {ZIndexBasicValues} - an object that combines the properties of the input object `input` with the properties
+   * `base` and `top`. The values of `base` and `top` are taken from the `this.baseBasicZIndex` and
+   * `this.topBasicZIndex` variables respectively.
+   */
+  formatZIndexBasicValues(input) {
+    return Object.assign({
+      base: this.baseBasicZIndex,
+      top: this.topBasicZIndex,
+    }, input);
+  }
+  /**
+   * The function checks if the input values for base and top levels of a z-index are valid.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is an object of type ZIndexBasicValues. It
+   * has two properties: base and top. Both properties should be of type number.
+   * @returns {boolean} a boolean value.
+   */
+  validBasicValues(input) {
+    if (typeof input.base !== 'number' || typeof input.top !== 'number') {
+      globalSlimmerRegistry.LogUtility.error('Change z-index basic value failed, both base level and top level should be of type number!');
+      return false;
+    }
+    else if (input.base >= input.top) {
+      globalSlimmerRegistry.LogUtility.error('Change z-index basic value failed, the base level should be smaller than the top level!');
+      return false;
+    }
+    return true;
+  }
+  /**
+   * The function updates the z-index values of elements based on the input values.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is an object of type ZIndexBasicValues. It
+   * has two properties: base and top, both of which are optional and can be of type number.
+   */
+  updateBasicValues(input) {
+    // update basic z-index value
+    this.baseBasicZIndex = input.base;
+    this.topBasicZIndex = input.top;
+    // update base level entry
+    const baseLevel = this.levelEntry.base;
+    baseLevel.elements.forEach((element, index) => {
+      element.style.zIndex = `${this.baseBasicZIndex + index + 1}`;
+    });
+    baseLevel.zIndex = this.baseBasicZIndex + baseLevel.elements.length;
+    // update top level entry
+    const topLevel = this.levelEntry.top;
+    topLevel.elements.forEach((element, index) => {
+      element.style.zIndex = `${this.topBasicZIndex + index + 1}`;
+    });
+    topLevel.zIndex = this.topBasicZIndex + topLevel.elements.length;
+  }
+  /**
+   * It increases the z-index of all the elements in the top entry by 1
+   *
+   * @returns {void}
+   */
+  increaseTopEntry() {
+    const topEntry = this.levelEntry['top'];
+    topEntry.elements.forEach((element) => {
+      element.style.zIndex = `${number.convertToNumber(element.style.zIndex) + 1}`;
+    });
+    topEntry.zIndex += 1;
+  }
+  /**
+   * If the z-index of the level is over 1000 greater than the basic z-index of the level, then return
+   * true.
+   *
+   * @returns {boolean} - The zIndexEntry.zIndex - this.getBasicZIndexByLevel(level) >= 1000 is being returned.
+   */
+  isBaseLevelOver() {
+    const baseEntry = this.levelEntry['base'];
+    return baseEntry.zIndex >= this.topBasicZIndex;
+  }
+}
+const InternalVegaZIndexManager$1 = new InternalVegaZIndexManager();
+
+const VegaNotifyRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OPEN_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method open of public API VegaNotifyController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaNotifyController' && methodName === 'open',
+    /**
+     * The function checks if the method name is open.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method close of public API VegaNotifyController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaNotifyController' && methodName === 'close',
+    /**
+     * The function checks if the method name is close.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSEALL_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method closeAll of public API VegaNotifyController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaNotifyController' && methodName === 'closeAll',
+    /**
+     * The function checks if the method name is closeAll.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * The page notification controller
+ */
+class VegaNotifyController {
+  constructor() {
+    this.resizeObserverSlimmer = dynamicSlimmer.createDynamicSlimmer(VegaNotifyController, pageResizeObserverSlimmer.PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: (entries) => {
+          var _a;
+          const currentVisible = entries[0].contentRect.height > 0;
+          if (!currentVisible && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains('hydrated'))) {
+            InternalVegaZIndexManager$1.removeZIndex(this.container, 'top');
+            this.container.remove();
+            this.container = null;
+          }
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        target: () => this.container,
+      },
+    ]);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * It creates a new notification element, adds it to the container, and returns the notification's ID
+   *
+   * @param {VegaNotifyOption} options - VegaNotifyProps
+   * @returns {Promise<string>} The ID of the notification.
+   * @vegaVersion 1.17.0
+   */
+  async open(options) {
+    const pageNotification = this.createPageNotification(options);
+    this.getContainer().append(pageNotification);
+    return pageNotification.id;
+  }
+  /**
+   * It closes all notifications
+   *
+   * @vegaVersion 1.17.0
+   */
+  async closeAll() {
+    this.container &&
+      Array.from(this.container.children).forEach((item) => {
+        void item.close();
+      });
+  }
+  /**
+   * It closes the notification with the given id
+   *
+   * @param {string} id - The id of the notification to close.
+   * @vegaVersion 1.17.0
+   */
+  async close(id) {
+    await document.getElementById(id).close();
+  }
+  /**
+   * The function "connectResizeObserver" is used to connect a resize observer.
+   *
+   * @vegaVersion 1.17.0
+   */
+  connectResizeObserver() {
+  }
+  /**
+   * It creates a new page notification element, sets its properties, and returns it
+   *
+   * @param {VegaNotifyOption} props - VegaNotifyProps - the properties of the notification
+   * @returns {HTMLVegaPageNotificationElement} A function that takes in a props object and returns a pageNotification element.
+   */
+  createPageNotification(props) {
+    const pageNotification = document.createElement('vega-page-notification');
+    Object.keys(props).forEach((propName) => {
+      props[propName] !== undefined && (pageNotification[propName] = props[propName]);
+    });
+    pageNotification.style.marginBottom = ui.getDeviceType() === ui.DeviceType.MOBILE ? '12px' : '16px';
+    pageNotification.id = `vega-page-notification-${createPublicApiRuntimeMetricsSlimmer.generateUUID()}`;
+    return pageNotification;
+  }
+  /**
+   * It creates a div element, sets its z-index to be on top of everything else, adds a class to it, and
+   * then adds it to the body of the page
+   *
+   * @returns {HTMLVegaPageNotificationListElement} The container is being returned.
+   */
+  getContainer() {
+    if (this.container) {
+      return this.container;
+    }
+    this.container = document.createElement('vega-page-notification-list');
+    InternalVegaZIndexManager$1.setZIndex(this.container, 'top');
+    if (ui.getDeviceType() === ui.DeviceType.MOBILE) {
+      this.container.classList.add('vega-page-notification-list-bottom');
+    }
+    else {
+      this.container.classList.add('vega-page-notification-list-topRight');
+    }
+    document.body.append(this.container);
+    this.connectResizeObserver();
+    return this.container;
+  }
+}
+__decorate$5([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
+__decorate$5([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaNotifyController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaNotify = new VegaNotifyController();
+
+const ThemeManagerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OVERRIDECOLORS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method overrideColors of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'overrideColors',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_RESET_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method reset of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'reset',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_TOGGLEDARKMODE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method toggleDarkMode of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'toggleDarkMode',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_ISDARKMODE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method isDarkMode of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'isDarkMode',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_APPLY_BRANDING_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method applyBranding of public API ThemeManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'ThemeManager' && methodName === 'applyBranding',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * Vega components theme manager
+ */
+class ThemeManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(ThemeManager, ['overrideColors', 'reset', 'toggleDarkMode', 'isDarkMode', 'applyBranding'], ThemeManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * It takes the colors you passed in, parses them into the correct format, and then applies them to the theme
+   *
+   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that you pass to the function.
+   * @vegaVersion 1.20.0
+   */
+  async overrideColors(overrideColors) {
+    void darkModeStyleController.VegaInternalThemeManager.overrideColors(overrideColors);
+  }
+  /**
+   * It removes all the custom override theme styles from the DOM
+   *
+   * @vegaVersion 1.20.0
+   */
+  async reset() {
+    void darkModeStyleController.VegaInternalThemeManager.reset();
+  }
+  /**
+   * This function toggles the dark mode of a webpage by adding or removing a 'dark' class to the HTML element.
+   *
+   * @param {boolean | undefined} darkMode - A boolean or undefined value that determines whether to enable or disable dark mode.
+   * If it is true, dark mode is enabled.
+   * If it is false, dark mode is disabled.
+   * @vegaVersion 1.32.0
+   */
+  toggleDarkMode(darkMode) {
+    darkModeStyleController.VegaInternalThemeManager.toggleDarkMode(darkMode);
+  }
+  /**
+   * The function checks if the HTML element has a class of "dark" and returns a boolean value accordingly.
+   *
+   * @returns {boolean} A boolean value indicating whether the HTML element has a class of "dark", which is
+   * typically used to indicate that the website is in dark mode.
+   * @vegaVersion 1.32.0
+   */
+  isDarkMode() {
+    return darkModeStyleController.VegaInternalThemeManager.isDarkMode();
+  }
+  /**
+   * This function switches the Vega theme to a new brand theme based on the provided options.
+   *
+   * @param {NewBrandOptions} options - The options includes 'gp' and 'genius' options
+   * @vegaVersion 2.47.0
+   */
+  applyBranding(options) {
+    darkModeStyleController.VegaInternalThemeManager.applyBranding(options);
+  }
+}
+__decorate$4([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaThemeManager = new ThemeManager();
+
+const VegaDialogRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OPEN_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method open of public API VegaDialogController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaDialogController' && methodName === 'open',
+    /**
+     * The function checks if the method name is open.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/**
+ * The dialog controller
+ */
+class VegaDialogController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaDialogController, ['open'], VegaDialogRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   *
+   * It creates a new `vega-dialog` element, sets its properties, appends it to the DOM, and opens it
+   *
+   * @param {VegaDialogOption} options - VegaDialogOption
+   * @returns {HTMLVegaDialogElement} The dialog reference.
+   * @vegaVersion 1.24.0
+   */
+  open(options) {
+    const dialog = document.createElement('vega-dialog');
+    const { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, title, handleClose } = options, dialogProps = __rest(options, ["isVerticallyCenter", "isVerticallyCentered", "showCloseButton", "size", "title", "handleClose"]);
+    dialog.id = `vega-dialog-${createPublicApiRuntimeMetricsSlimmer.generateUUID()}`;
+    dialog.dialogTitle = title;
+    dialog.modalProps = { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, handleClose };
+    Object.keys(dialogProps).forEach((propName) => {
+      if (dialogProps[propName] !== undefined) {
+        dialog[propName] = dialogProps[propName];
+      }
+    });
+    document.body.append(dialog);
+    return dialog;
+  }
+}
+__decorate$3([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaDialogController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaDialog = new VegaDialogController();
+
+/* istanbul ignore next */
+const VegaEventManagerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_SETSEMANTICS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method setSemantics of public API VegaEventManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_GETSEMANTICS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method getSemantics of public API VegaEventManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'getSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_GETENABLEDEVENTIDSBYCOMPONENT_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method getEnabledEventIdsByComponent of public API VegaEventManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'getEnabledEventIdsByComponent',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'globalEventIsNative',
+    payloadDescription: 'Indicate if the vega components will emit events without the vega prefix',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global && config.global.namespace === 'native');
+    },
+  },
+  {
+    payloadKey: 'eventOfSpecificComponentsIsNative',
+    payloadDescription: 'Indicate if the vega components will emit events with the vega prefix, but special components will emit events without vega prefix',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(specialComponents.length > 0 &&
+          config.components[specialComponents[0]].namespace === 'native');
+      }
+      return false;
+    },
+  },
+  {
+    payloadKey: 'eventOfSpecificComponentsIsVega',
+    payloadDescription: 'Indicate if the vega components will emit events without the vega prefix, but special components will emit events with vega prefix',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.global && config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(config.global.namespace === 'native' &&
+          specialComponents.length > 0 &&
+          config.components[specialComponents[0]].namespace === 'vega');
+      }
+      return false;
+    },
+  },
+  {
+    payloadKey: 'globalJqueryDelegatedEventIsTrue',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global && config.global.jqueryDelegatedEvent === true);
+    },
+  },
+  {
+    payloadKey: 'jqueryDelegatedEventIsCustomStrategy',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global &&
+        Array.isArray(config.global.jqueryDelegatedEvent) &&
+        config.global.jqueryDelegatedEvent.length > 0);
+    },
+  },
+  {
+    payloadKey: 'jqueryDelegatedEventOfSpecialComponentsIsTrue',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(specialComponents.length > 0 &&
+          config.components[specialComponents[0]].jqueryDelegatedEvent === true);
+      }
+      return false;
+    },
+  },
+];
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * The VegaEventManager class provides methods for setting and retrieving event semantics configuration,
+ * as well as getting the corresponding native event name for a given event.
+ */
+class VegaEventManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * The function sets the semantics configuration for event management.
+   *
+   * @param {EventSemanticsConfig} config - The config parameter is an object that contains the
+   * configuration settings for the event semantics. It may include properties such as the event type,
+   * event source, event target, event data, and any other relevant information for setting up the
+   * semantics of the event.
+   * @vegaVersion 2.0.0
+   */
+  setSemantics(config) {
+    internalVegaEventManager.internalVegaEventManager.setSemantics(config);
+  }
+  /**
+   * The function "getSemantics" returns the event semantics of an HTML element.
+   *
+   * @param {HTMLElement} host - The host parameter is an HTMLElement, which represents an HTML element
+   * in the DOM (Document Object Model). It can be any valid HTML element such as a div, span, button,
+   * etc.
+   * @returns {EventSemantics} an object of type EventSemantics.
+   * @vegaVersion 2.0.0
+   */
+  getSemantics(host) {
+    return internalVegaEventManager.internalVegaEventManager.getSemantics(host);
+  }
+  /**
+   * The function "getEnabledEventIdsByComponent" returns the all eventIds in component.
+   *
+   * @param {VegaComponentName} componentName - The component name,
+   * etc.
+   * @returns {Nullable<VegaEventID[]>} All eventIds.
+   * @vegaVersion 2.0.0
+   */
+  getEnabledEventIdsByComponent(componentName) {
+    return internalVegaEventManager.internalVegaEventManager.getEnabledEventIdsByComponent(componentName);
+  }
+}
+__decorate$2([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaEventManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaEventManager$1 = new VegaEventManager();
+
+const ZIndexManagerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OVERRIDEZINDEXBASICVALUES_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method overrideZIndexBasicValues of public API ZIndexManager is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaZIndexManager' && methodName === 'overrideZIndexBasicValues',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'zIndexBasicValuesGreatThanTenThousand',
+    payloadDescription: 'Indicate if the basic z-index value is great than ten thousand',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaZIndexManager' && methodName === 'overrideZIndexBasicValues',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @param {unknown[]} args - The parameter of slimmer method
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      return args['base'] > 10000;
+    },
+  },
+];
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * The VegaZIndexManager class calls a method in the ZIndexManager class to
+ * change z-index values based on the input.
+ */
+class VegaZIndexManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * The function "overrideZIndexBasicValues" calls a method in the "ZIndexManager" class to change the
+   * z-index values based on the input.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues.
+   * @vegaVersion 2.3.0
+   */
+  overrideZIndexBasicValues(input) {
+    InternalVegaZIndexManager$1.overrideZIndexBasicValues(input);
+  }
+}
+__decorate$1([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaZIndexManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaZIndexManager$1 = new VegaZIndexManager();
+
+const VegaSkeletonRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_LOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaSkeletonLoaderController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaSkeletonLoaderController' && methodName === 'load',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_UNLOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method unLoad of public API VegaSkeletonLoaderController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaSkeletonLoaderController' && methodName === 'unLoad',
+    /**
+     * The function checks if the method name is unLoad.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_UNLOADALL_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method unLoadAll of public API VegaSkeletonLoaderController is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'VegaSkeletonLoaderController' && methodName === 'unLoadAll',
+    /**
+     * The function checks if the method name is unLoadAll.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  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;
+};
+/**
+ * Vega Skeleton Loader Controller to show skeletons in the target elements
+ */
+class VegaSkeletonLoaderController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicApiRuntimeMetricsSlimmer.createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition);
+    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.
+   * @vegaVersion 2.16.0
+   */
+  load({ target, type = 'text', width, height, items, layout }) {
+    const targets = Array.from(document.body.querySelectorAll(target));
+    const key = `vega-skeleton-loader-${createPublicApiRuntimeMetricsSlimmer.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}.
+   * @vegaVersion 2.16.0
+   */
+  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.
+   *
+   * @vegaVersion 2.16.0
+   */
+  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 {HTMLVegaSkeletonElement} - 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 {HTMLVegaFlexElement} - 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';
+__decorate([
+  createPublicApiRuntimeMetricsSlimmer.InjectVegaTelemetrySlimmer()
+], VegaSkeletonLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaSkeletonLoader = new VegaSkeletonLoaderController();
+
+exports.InternalVegaZIndexManager = InternalVegaZIndexManager$1;
+exports.VegaDialog = VegaDialog;
+exports.VegaEventManager = VegaEventManager$1;
+exports.VegaLoader = VegaLoader;
+exports.VegaNotify = VegaNotify;
+exports.VegaSkeletonLoader = VegaSkeletonLoader;
+exports.VegaThemeManager = VegaThemeManager;
+exports.VegaZIndexManager = VegaZIndexManager$1;