@globalpayments/vega 2.14.0 → 2.16.0

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-full-width-paragraph-renderer.js

@@ -0,0 +1,29 @@
+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 { h } from '@stencil/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Full width paragraph Skeleton renderer
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonFullWidthParagraphRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-image-renderer.js

@@ -0,0 +1,33 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Image Skeleton renderer
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "height", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonImageRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-paragraph-renderer.js

@@ -0,0 +1,31 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Paragraph Skeleton renderer
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonParagraphRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-renderer-base.abstract.js

@@ -0,0 +1,23 @@
+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 { h, Host } from '@stencil/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+import { sanitizeVegaComponent } from '../../../../utils/component';
+/**
+ * Skeleton host renderer
+ */
+export class VegaSkeletonRendererBase extends VegaSlimmer {
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { animated: this.animated }, style: this.assignHostStyle() }, this.renderChildren()), this.host);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererBase.prototype, "animated", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-renderer-manager.js

@@ -0,0 +1,49 @@
+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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
+/**
+ * Skeleton renderer by type
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "type", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTextRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonParagraphRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonFullWidthParagraphRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonEllipseRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonImageRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], VegaSkeletonRendererManager.prototype, "vegaSkeletonTableRenderer", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-table-renderer.js

@@ -0,0 +1,42 @@
+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 { Fragment, h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Table Skeleton renderer
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonTableRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/slimmers/renderers/vega-skeleton-text-renderer.js

@@ -0,0 +1,28 @@
+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 { h } from '@stencil/core';
+import { MapToComponentField } from 'vega-slimmer/core';
+import { VegaSkeletonRendererBase } from './vega-skeleton-renderer-base.abstract';
+import { parseToPixelString } from '../../../../utils/pixel';
+/**
+ * Text Skeleton renderer
+ */
+export 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([
+  MapToComponentField()
+], VegaSkeletonTextRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-skeleton/vega-skeleton.css

@@ -0,0 +1,80 @@
+/* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */ /* This file is generated by vega-design 2.0.77 */
+/**
+ * Deprecated. Not for use in new websites.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#break-word
+ */
+: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;
+  }
+}

package/dist/collection/components/vega-skeleton/vega-skeleton.js

@@ -0,0 +1,163 @@
+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 { Component, Element, Prop } from '@stencil/core';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
+import { VegaSkeletonTextRenderer } from './slimmers/renderers/vega-skeleton-text-renderer';
+import { VegaSkeletonParagraphRenderer } from './slimmers/renderers/vega-skeleton-paragraph-renderer';
+import { VegaSkeletonFullWidthParagraphRenderer } from './slimmers/renderers/vega-skeleton-full-width-paragraph-renderer';
+import { VegaSkeletonImageRenderer } from './slimmers/renderers/vega-skeleton-image-renderer';
+import { VegaSkeletonTableRenderer } from './slimmers/renderers/vega-skeleton-table-renderer';
+import { VegaSkeletonRendererManager } from './slimmers/renderers/vega-skeleton-renderer-manager';
+import { VegaSkeletonEllipseRenderer } from './slimmers/renderers/vega-skeleton-ellipse-renderer';
+export class VegaSkeleton {
+  constructor() {
+    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();
+  }
+  static get is() { return "vega-skeleton"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-skeleton.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-skeleton.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSkeletonType",
+        "resolved": "\"ellipse\" | \"full-width-paragraph\" | \"image\" | \"paragraph\" | \"table\" | \"text\"",
+        "references": {
+          "VegaSkeletonType": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the type of the skeleton."
+      },
+      "attribute": "type",
+      "reflect": true,
+      "defaultValue": "'text'"
+    },
+    "width": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "WidthType",
+        "resolved": "number | string",
+        "references": {
+          "WidthType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the width of the skeleton."
+      },
+      "attribute": "width",
+      "reflect": false
+    },
+    "height": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "HeightType",
+        "resolved": "number | string",
+        "references": {
+          "HeightType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the height of the skeleton.\n- This property is applicable only when {@link type} is set to is `image` or `ellipse`."
+      },
+      "attribute": "height",
+      "reflect": false
+    },
+    "animated": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates whether the skeleton displays an animation effect."
+      },
+      "attribute": "animated",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}
+__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);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/controllers/vega-tab-group-selected-target-controller.js

@@ -4,25 +4,27 @@ 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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 /** The VegaTabGroupSelectedTargetController class is responsible for handling the selected data target in a VegaTabGroup component and emitting a click event. */
 export 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([
@@ -31,6 +33,3 @@ __decorate([
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaTabGroupSelectedTargetController.prototype, "selectedTabDataTarget", void 0);
-__decorate([
-  MapToComponentMethod('watchSelectedTabDataTargetChange')
-], VegaTabGroupSelectedTargetController.prototype, "handleSelectedDataTargetChange", null);

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-direction-button-renderer.js

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

package/dist/collection/components/vega-tab-group/slimmers/vega-tab-group/renderers/vega-tab-group-tab-list-renderer.js

@@ -41,7 +41,7 @@ export 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())));
@@ -58,8 +58,8 @@ export 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([

package/dist/collection/global/scripts/beforeVegaLoad.js

@@ -13,6 +13,7 @@ import VegaZIndexManager from '../../helpers/zindex/vegaZIndexManager';
 import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/validCreditCardNumberRule';
 import vegaEnvManager from '../../helpers/vega-telemetry-helper/vegaEnvManager';
 import { waitForVega } from '../../helpers/common';
+import { VegaSkeletonLoader } from '../../helpers/skeleton-loader/vega-skeleton-loader-controller';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -33,6 +34,7 @@ export default function () {
   injectValidCreditCardNumberRuleIntoGlobal();
   initRuntimeMetricsTelemetryCollection();
   injectWaitForVegaIntoGlobal();
+  injectVegaSkeletonLoaderIntoGlobal();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -146,3 +148,9 @@ function initRuntimeMetricsTelemetryCollection() {
 function injectWaitForVegaIntoGlobal() {
   globalThis['waitForVega'] = waitForVega;
 }
+/**
+ * Inject VegaSkeletonLoader to global as a public api
+ */
+function injectVegaSkeletonLoaderIntoGlobal() {
+  globalThis.VegaSkeletonLoader = VegaSkeletonLoader;
+}

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

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

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

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