@globalpayments/vega 2.14.0 → 2.16.0

package/dist/esm/vega-loader-wrapper_2.entry.js

@@ -3,7 +3,7 @@ import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { a as arrayToClassString } from './ui-28499aab.js';
-import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-7072153e.js';
+import { R as ResponsiveFormatFacade } from './responsiveFormatFacade-ac0b91fc.js';
 import { g as getCurrentBreakpoint } from './breakpoints-e59edf8d.js';
 import { P as PageResizeObserverSlimmer } from './pageResizeObserverSlimmer-d36f30e8.js';
 import './typeGuard-f33ed2eb.js';
@@ -11,6 +11,7 @@ import './ui-df46cc20.js';
 import './regex-dfe11abf.js';
 import './typography-a8fc4764.js';
 import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
 
 const vegaLoaderWrapperCss = ":host{display:block;display:inline-flex;align-items:center;justify-content:center;top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(var(--v-bg-backdrop-loading, 255, 255, 255, 0.5))}:host(.absolute-wrapper){position:absolute}:host(.fixed-wrapper){width:100%;height:100%;position:fixed}";
 

package/dist/esm/vega-pagination.entry.js

@@ -4,7 +4,7 @@ import { n as normalizeNumberByRanger, c as convertToNumber } from './number-e25
 import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
 import { l as VegaFormSubmit, r as VegaBlur, d as VegaChange, a as VegaClick, y as VegaPageSizeChange } from './vegaEventId-680887e1.js';
 import { a as arrayToClassString } from './ui-28499aab.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
 import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';

package/dist/esm/vega-pie-chart.entry.js

@@ -1,12 +1,12 @@
 import { r as registerInstance, h, g as getElement, H as Host } from './index-c3505689.js';
-import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legendInputProcessor-e9c0ddf3.js';
+import { h as array, t as tau, j as constant, I as InteractingEntryGenerator, k as d3Select, B as BaseDrawer, a as BaseChart, L as LayoutInputProcessor, P as ProcessorChain, b as LegendInputProcessor, c as LegendDrawer } from './legendInputProcessor-644350b4.js';
 import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
 import './array-8c82516c.js';
 import './number-e2519d1c.js';
 import './typography-a8fc4764.js';
-import './pixel-53ad41ea.js';
+import './pixel-f32c07ce.js';
 
 function descending(a, b) {
   return b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;

package/dist/esm/vega-popover_2.entry.js

@@ -5,7 +5,7 @@ import { a as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer,
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
 import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
 import { z as VegaPopoverShow, A as VegaPopoverHide } from './vegaEventId-680887e1.js';
-import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-6bdee603.js';
+import { E as ElementAppenderSlimmer } from './elementAppenderSlimmer-3c05ca9f.js';
 import './keyboardManager-24ae8225.js';
 import './ui-28499aab.js';
 import './dynamic-slimmer-ef83e258.js';
@@ -17,8 +17,9 @@ import './typeGuard-f33ed2eb.js';
 import './breakpoints-e59edf8d.js';
 import './regex-dfe11abf.js';
 import './typography-a8fc4764.js';
-import './responsiveFormatFacade-7072153e.js';
+import './responsiveFormatFacade-ac0b91fc.js';
 import './number-e2519d1c.js';
+import './pixel-f32c07ce.js';
 import './zIndexManager-522f477e.js';
 import './pageResizeObserverSlimmer-d36f30e8.js';
 

package/dist/esm/vega-radio_2.entry.js

@@ -12,11 +12,12 @@ import { d as VegaChange, q as VegaFocus, r as VegaBlur } from './vegaEventId-68
 import { V as VegaInternalFieldErrorStateChange } from './vegaInternalEventId-600b3751.js';
 import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
 import { C as ComponentLoadRequired } from './componentLoadRequired-ec47331b.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-2cc9eec5.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-85ff874e.js';
 import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-e6ea15e3.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
 import { K as KeyboardManagerSlimmer } from './keyboardManagerSlimmer-dbd4f404.js';
-import { M as MutationObserverSlimmer, T as TagNameMutationFilter } from './mutationObserverFilters-17327079.js';
+import { M as MutationObserverSlimmer } from './mutationObserverSlimmer-2355cedf.js';
+import { T as TagNameMutationFilter } from './mutationObserverFilters-243934f6.js';
 import './dynamic-slimmer-ef83e258.js';
 import './internalVegaEventManager-e1501923.js';
 import './string-be824360.js';

package/dist/esm/vega-selection-tile_2.entry.js

@@ -11,9 +11,9 @@ import { S as SubStateObserverSlimmer, c as createSubStateNotifySlimmer } from '
 import { V as VegaInternalFieldErrorStateChange } from './vegaInternalEventId-600b3751.js';
 import { f as findParent } from './ui-28499aab.js';
 import { O as Observer, d as domNodeSubjectFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
 import { C as ChildNodesNotifyObserverSlimmer } from './childNodesNotifyObserverSlimmer-e6ea15e3.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-2cc9eec5.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-85ff874e.js';
 import { R as RequiredFieldRule } from './requiredFieldRule-f549a39d.js';
 import './dynamic-slimmer-ef83e258.js';
 import './internalVegaEventManager-e1501923.js';
@@ -22,7 +22,8 @@ import './misc-c21a85c9.js';
 import './pageResizeObserverSlimmer-d36f30e8.js';
 import './breakpoints-e59edf8d.js';
 import './ui-df46cc20.js';
-import './mutationObserverFilters-17327079.js';
+import './mutationObserverSlimmer-2355cedf.js';
+import './mutationObserverFilters-243934f6.js';
 import './array-8c82516c.js';
 import './number-e2519d1c.js';
 

package/dist/esm/{index-dd06e5e7.js → vega-skeleton-loader-controller-3f5500e5.js}

@@ -3076,9 +3076,9 @@ var FrameworkEnum;
 /** The VegaEnvManager class manages vega environment parameters. */
 class VegaEnvManager {
   constructor() {
-    // The `2.14.0` will be replaced to a version string when running publish script.
+    // The `2.16.0` will be replaced to a version string when running publish script.
     // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    this.vegaVersion = '2.14.0';
+    this.vegaVersion = '2.16.0';
     this.framework = FrameworkEnum.VanillaJs;
   }
   /**
@@ -3155,4 +3155,91 @@ const waitForVega = async () => {
     .map((item) => { var _a; return (_a = item.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(item); }));
 };
 
-export { FrameworkEnum as F, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaEventManager$1 as c, vegaEnvManager as v, waitForVega as w };
+/**
+ * Vega Skeleton Loader Controller to show skeletons in the target elements
+ */
+class VegaSkeletonLoaderController {
+  constructor() {
+    this.loaderMap = new Map();
+  }
+  /**
+   * Load the skeletons in the target elements
+   *
+   * @param { VegaSkeletonLoaderConfig } config - Configuration for the loading function
+   * @param {string} config.target - Target elements to show the skeletons.
+   * @param {VegaSkeletonLoaderConfig.type} [config.type = 'text'] - Type of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.width} config.width - Width of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.height} config.height - Height of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.items} config.items - Configuration for multiple skeleton items.
+   * @param {VegaSkeletonLoaderConfig.layout} config.layout - Layout of the skeleton items.
+   * @returns { string } - Key of the loaded skeleton items.
+   */
+  load({ target, type = 'text', width, height, items, layout }) {
+    const targets = Array.from(document.body.querySelectorAll(target));
+    const key = `vega-skeleton-loader-${generateUUID()}`;
+    const loaderItems = [];
+    targets.forEach((target) => {
+      const skeletonsLoaders = !items
+        ? [this.createSkeleton({ type, width, height })]
+        : items.map(this.createSkeleton);
+      const itemsWithKey = (layout ? [this.wrapLayout(skeletonsLoaders, layout)] : skeletonsLoaders).map((item) => {
+        item.dataset[VegaSkeletonLoaderController.LOADER_DATA_SET_KEY] = key;
+        return item;
+      });
+      loaderItems.push(...itemsWithKey);
+      target.append(...itemsWithKey);
+    });
+    this.loaderMap.set(key, loaderItems);
+    return key;
+  }
+  /**
+   * Remove the skeletons from the dom.
+   *
+   * @param {string} key - The key returned from {@link VegaSkeletonLoaderController.load}.
+   */
+  unLoad(key) {
+    if (this.loaderMap.has(key)) {
+      this.loaderMap.get(key).forEach((item) => item.remove());
+      this.loaderMap.delete(key);
+    }
+  }
+  /**
+   * Remove all the skeletons from the dom.
+   */
+  unLoadAll() {
+    for (const items of this.loaderMap.values()) {
+      items.forEach((item) => item.remove());
+    }
+    this.loaderMap.clear();
+  }
+  /**
+   * Create a skeleton item. The skeleton animated always be true
+   *
+   * @param {VegaSkeletonLoaderItem} config - Configuration for the skeleton item.
+   * @returns {HTMLElement} - Skeleton item.
+   */
+  createSkeleton(config) {
+    const { type, width, height } = config;
+    const skeleton = document.createElement('vega-skeleton');
+    Object.assign(skeleton, { animated: true, type, width, height });
+    return skeleton;
+  }
+  /**
+   * Wrap the flex layout for the skeletons.
+   *
+   * @param {HTMLElement[]} skeletons - Skeleton elements of the loader.
+   * @param {VegaSkeletonLoaderLayout} layout - Flex properties for the layout.
+   * @returns {HTMLElement} - Container wrapping the skeletons in the specified flex layout.
+   */
+  wrapLayout(skeletons, layout) {
+    const skeletonContainer = document.createElement('vega-flex');
+    Object.assign(skeletonContainer, Object.assign({ className: 'vega-skeleton-loader-template-container' }, layout.props));
+    Object.assign(skeletonContainer.style, layout.style);
+    skeletonContainer.append(...skeletons);
+    return skeletonContainer;
+  }
+}
+VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
+const VegaSkeletonLoader = new VegaSkeletonLoaderController();
+
+export { FrameworkEnum as F, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaEventManager$1 as c, VegaSkeletonLoader as d, vegaEnvManager as v, waitForVega as w };

package/dist/esm/vega-skeleton.entry.js

@@ -0,0 +1,322 @@
+import { h, H as Host, F as Fragment, r as registerInstance, g as getElement } from './index-c3505689.js';
+import { a as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
+import { s as sanitizeVegaComponent } from './component-40be4402.js';
+import { p as parseToPixelString } from './pixel-f32c07ce.js';
+
+var __decorate$8 = (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;
+};
+/**
+ * Skeleton host renderer
+ */
+class VegaSkeletonRendererBase extends VegaSlimmer {
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { animated: this.animated }, style: this.assignHostStyle() }, this.renderChildren()), this.host);
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "animated", void 0);
+
+var __decorate$7 = (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;
+};
+/**
+ * Text Skeleton renderer
+ */
+class VegaSkeletonTextRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '180px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return {
+      width: widthWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-text" });
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaSkeletonTextRenderer.prototype, "width", void 0);
+
+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;
+};
+/**
+ * Paragraph Skeleton renderer
+ */
+class VegaSkeletonParagraphRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    return { width: this.getWidthWithUnit() };
+  }
+  renderChildren() {
+    return (h("vega-flex", { gap: "size-16", direction: "col" },
+      h("div", { class: "vega-skeleton-text" }),
+      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.8)` } }),
+      h("div", { class: "vega-skeleton-text", style: { width: `calc(${this.getWidthWithUnit()} * 0.6)` } })));
+  }
+  getWidthWithUnit() {
+    const { width = '320px' } = this;
+    return parseToPixelString(width);
+  }
+}
+__decorate$6([
+  MapToComponentField()
+], VegaSkeletonParagraphRenderer.prototype, "width", void 0);
+
+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;
+};
+/**
+ * Full width paragraph Skeleton renderer
+ */
+class VegaSkeletonFullWidthParagraphRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '100%' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return { width: widthWithUnit };
+  }
+  renderChildren() {
+    return (h("vega-flex", { gap: "size-16", direction: "col" },
+      h("div", { class: "vega-skeleton-text full-width" }),
+      h("div", { class: "vega-skeleton-text full-width" }),
+      h("div", { class: "vega-skeleton-text full-width" })));
+  }
+}
+__decorate$5([
+  MapToComponentField()
+], VegaSkeletonFullWidthParagraphRenderer.prototype, "width", void 0);
+
+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;
+};
+/**
+ * Image Skeleton renderer
+ */
+class VegaSkeletonImageRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '180px', height = '120px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    const heightWithUnit = parseToPixelString(height);
+    return {
+      width: widthWithUnit,
+      height: heightWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-image" });
+  }
+}
+__decorate$4([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "height", void 0);
+__decorate$4([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "width", void 0);
+
+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;
+};
+/**
+ * Table Skeleton renderer
+ */
+class VegaSkeletonTableRenderer extends VegaSkeletonRendererBase {
+  constructor() {
+    super(...arguments);
+    this.rows = 4;
+    this.cells = 5;
+    this.renderCells = () => {
+      return (h(Fragment, null, [...Array(this.cells).keys()].map((cell) => {
+        return (h("td", { class: "vega-skeleton-table-cell", key: cell },
+          h("vega-skeleton", { type: "text", width: "100%", animated: this.animated })));
+      })));
+    };
+  }
+  assignHostStyle() {
+    const { width = '100%' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    return { width: widthWithUnit };
+  }
+  renderChildren() {
+    return (h("table", { class: "vega-skeleton-table" },
+      h("thead", { class: "vega-skeleton-table-head" },
+        h("tr", { class: "vega-skeleton-table-row" }, this.renderCells())),
+      h("tbody", { class: "vega-skeleton-table-body" }, [...Array(this.rows).keys()].map((row) => {
+        return (h("tr", { class: "vega-skeleton-table-row", key: row }, this.renderCells()));
+      }))));
+  }
+}
+__decorate$3([
+  MapToComponentField()
+], VegaSkeletonTableRenderer.prototype, "width", void 0);
+
+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;
+};
+/**
+ * Skeleton renderer by type
+ */
+class VegaSkeletonRendererManager extends VegaSlimmer {
+  render() {
+    switch (this.type) {
+      case 'text':
+        return this.vegaSkeletonTextRenderer.render();
+      case 'paragraph':
+        return this.vegaSkeletonParagraphRenderer.render();
+      case 'full-width-paragraph':
+        return this.vegaSkeletonFullWidthParagraphRenderer.render();
+      case 'ellipse':
+        return this.vegaSkeletonEllipseRenderer.render();
+      case 'image':
+        return this.vegaSkeletonImageRenderer.render();
+      case 'table':
+        return this.vegaSkeletonTableRenderer.render();
+    }
+  }
+}
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "type", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTextRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonParagraphRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonEllipseRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonImageRenderer", void 0);
+__decorate$2([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTableRenderer", void 0);
+
+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;
+};
+/**
+ * Ellipse Skeleton renderer
+ */
+class VegaSkeletonEllipseRenderer extends VegaSkeletonRendererBase {
+  assignHostStyle() {
+    const { width = '120px', height = '120px' } = this;
+    const widthWithUnit = parseToPixelString(width);
+    const heightWithUnit = parseToPixelString(height);
+    return {
+      width: widthWithUnit,
+      height: heightWithUnit,
+    };
+  }
+  renderChildren() {
+    return h("div", { class: "vega-skeleton-ellipse" });
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaSkeletonEllipseRenderer.prototype, "width", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaSkeletonEllipseRenderer.prototype, "height", void 0);
+
+const vegaSkeletonCss = ":host{display:block}:host([type=text]),:host([type=image]),:host([type=ellipse]){display:inline-block}@keyframes v-skeleton-loading{0%{background-position:100% 50%}100%{background-position:0 50%}}.vega-skeleton-bg-base,.vega-skeleton-image,.vega-skeleton-ellipse,.vega-skeleton-text-base,.vega-skeleton-text{background-color:rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1))}:host(.animated) .vega-skeleton-bg-base,:host(.animated) .vega-skeleton-image,:host(.animated) .vega-skeleton-ellipse,:host(.animated) .vega-skeleton-text-base,:host(.animated) .vega-skeleton-text{animation:v-skeleton-loading 1750ms cubic-bezier(0.56, 0, 0.38, 0.98) infinite;animation-delay:1ms;background:linear-gradient(90deg, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 25%, rgba(var(--v-bg-action-quaternary-hover, 239, 239, 239, 1)) 37%, rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1)) 63%);background-size:400% 100%}.vega-skeleton-text-base,.vega-skeleton-text{border-radius:9999px;height:16px}.vega-skeleton-text.full-width{width:100%}.vega-skeleton-ellipse{border-radius:9999px;width:100%;height:100%}.vega-skeleton-image{border-radius:12px;width:100%;height:100%}.vega-skeleton-table{width:100%;border-spacing:0;border-top-left-radius:12px;border-top-right-radius:12px;overflow:hidden}.vega-skeleton-table .vega-skeleton-table-head{background-color:rgba(var(--v-bg-table-header, 240, 243, 247, 1))}.vega-skeleton-table .vega-skeleton-table-body{background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.vega-skeleton-table .vega-skeleton-table-cell{box-sizing:border-box;padding:16px}.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4),.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5){display:none}@media (min-width: 768px){.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4),.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5){display:table-cell}}";
+
+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;
+};
+const VegaSkeleton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.vegaSkeletonTextRenderer = new VegaSkeletonTextRenderer();
+    this.vegaSkeletonParagraphRenderer = new VegaSkeletonParagraphRenderer();
+    this.vegaSkeletonFullWidthParagraphRenderer = new VegaSkeletonFullWidthParagraphRenderer();
+    this.vegaSkeletonEllipseRenderer = new VegaSkeletonEllipseRenderer();
+    this.vegaSkeletonImageRenderer = new VegaSkeletonImageRenderer();
+    this.vegaSkeletonTableRenderer = new VegaSkeletonTableRenderer();
+    this.vegaSkeletonRendererManager = new VegaSkeletonRendererManager();
+    /**
+     * Specifies the type of the skeleton.
+     */
+    this.type = 'text';
+    /**
+     * Indicates whether the skeleton displays an animation effect.
+     */
+    this.animated = false;
+  }
+  render() {
+    return this.vegaSkeletonRendererManager.render();
+  }
+  get host() { return getElement(this); }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSkeleton.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonTextRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonParagraphRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonEllipseRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonImageRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonTableRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSkeleton.prototype, "vegaSkeletonRendererManager", void 0);
+VegaSkeleton.style = vegaSkeletonCss;
+
+export { VegaSkeleton as vega_skeleton };

package/dist/esm/vega-stepper.entry.js

@@ -4,8 +4,8 @@ import { s as sanitizeVegaComponent } from './component-40be4402.js';
 import { c as convertToNumber, n as normalizeNumberByRanger } from './number-e2519d1c.js';
 import { I as InjectVegaSlimmer } from './global-slimmer-registry-16fd7452.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './componentUsageRuntimeMetrics-4f08dec8.js';
-import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-2cc9eec5.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { F as FormFieldControllerSlimmer } from './formFieldControllerSlimmer-85ff874e.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
 import { D as DomNodeSubjectObserverFactory } from './domNodeSubjectObserverFactory-a764a6df.js';
 import { r as VegaBlur, d as VegaChange, a as VegaClick } from './vegaEventId-680887e1.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE } from './staticSubjectTitle-3b88939a.js';
@@ -19,7 +19,8 @@ import './vegaInternalEventId-600b3751.js';
 import './pageResizeObserverSlimmer-d36f30e8.js';
 import './breakpoints-e59edf8d.js';
 import './ui-df46cc20.js';
-import './mutationObserverFilters-17327079.js';
+import './mutationObserverSlimmer-2355cedf.js';
+import './mutationObserverFilters-243934f6.js';
 import './array-8c82516c.js';
 import './internalVegaEventManager-e1501923.js';
 

package/dist/esm/vega-tab-group_2.entry.js

@@ -11,7 +11,7 @@ import { b as VegaDropdownClick, a as VegaClick } from './vegaEventId-680887e1.j
 import { C as ChangeManager } from './changeManager-d60d98c8.js';
 import { T as TAB_PANEL_ADD_OR_DEL_TO_GROUP } from './staticSubjectTitle-3b88939a.js';
 import { f as findParent } from './ui-28499aab.js';
-import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-ca73e6c1.js';
+import { C as ChildNodesEventPreventSlimmer } from './childNodesEventPreventSlimmer-b9c50cc4.js';
 import { c as createEventEmitSlimmer } from './eventEmitSlimmer-9c33f04e.js';
 import './breakpoints-e59edf8d.js';
 import './ui-df46cc20.js';
@@ -72,22 +72,24 @@ var __decorate$a = (undefined && undefined.__decorate) || function (decorators,
 };
 /** The VegaTabGroupSelectedTargetController class is responsible for handling the selected data target in a VegaTabGroup component and emitting a click event. */
 class VegaTabGroupSelectedTargetController extends VegaSlimmer {
-  /* istanbul ignore next */
   /**
-   * The function will call when component call selectedTabDataTargetChange function and emit a vega click event
+   * The function sets the selectedTabDataTarget property to the provided dataTarget value.
    *
-   * {@link VegaTabGroup#watchSelectedTabDataTargetChange}
+   * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
    */
-  handleSelectedDataTargetChange() {
-    this.clickEventEmitter.emit(this.selectedTabDataTarget);
+  setSelectedDataTarget(dataTarget) {
+    this.selectedTabDataTarget = dataTarget;
   }
   /**
-   * The function sets the selectedTabDataTarget property to the provided dataTarget value.
+   * The function emits click event and checks for prevent default then sets the selectedTabDataTarget property to the provided dataTarget value.
    *
    * @param {string} dataTarget - The dataTarget parameter is a string that represents the target data for the selected tab.
    */
-  setSelectedDataTarget(dataTarget) {
-    this.selectedTabDataTarget = dataTarget;
+  handleTabItemClick(dataTarget) {
+    const clickEvent = this.clickEventEmitter.emit(dataTarget);
+    if (clickEvent && !clickEvent.defaultPrevented) {
+      this.setSelectedDataTarget(dataTarget);
+    }
   }
 }
 __decorate$a([
@@ -96,9 +98,6 @@ __decorate$a([
 __decorate$a([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
-__decorate$a([
-  MapToComponentMethod('watchSelectedTabDataTargetChange')
-], VegaTabGroupSelectedTargetController.prototype, "handleSelectedDataTargetChange", null);
 
 /**
  * It takes an array of items, an array of values, and a capacity, and returns an array of arrays of
@@ -594,7 +593,7 @@ class VegaTabGroupSwitchPageButtonRenderer extends VegaSlimmer {
       h("vega-dropdown", { source: source, translocation: translocation, selectType: "single", selectedSourceKey: this.selectedTabDataTarget, "position-relative-to": this.positionRelativeTo, ref: (ref) => {
           this.dropdownRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaDropdownClick, (payload) => {
-            this.vegaTabGroupSelectedTargetController.setSelectedDataTarget(payload.detail);
+            this.vegaTabGroupSelectedTargetController.handleTabItemClick(payload.detail);
           });
         } },
         h("vega-icon", { size: "size-12", icon: icon }))));
@@ -801,7 +800,7 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
               'vega-close-icon-space': this.showCloseButton,
             }, 
             /* eslint-disable-next-line react/jsx-no-bind */
-            onClick: () => this.tabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+            onClick: () => this.handleTabItemClick(item.dataTarget), "aria-label": item.dataTarget, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
             this.renderPrefixIconDom(item),
             this.renderTabLabelDom(item)),
           this.closeButtonRenderer.render())));
@@ -818,8 +817,8 @@ class VegaTabGroupTabListRenderer extends VegaSlimmer {
         item.label.substring(0, this.TAB_LABEL_MAX_SIZE),
         "..."))) : (item.label);
   }
-  tabItemClick(dataTarget) {
-    this.selectedTargetController.setSelectedDataTarget(dataTarget);
+  handleTabItemClick(dataTarget) {
+    this.selectedTargetController.handleTabItemClick(dataTarget);
   }
 }
 __decorate$4([