@globalpayments/vega 2.62.0 → 2.63.1

package/dist/collection/helpers/csp/test/styles-preservator.test.js

@@ -0,0 +1,207 @@
+import { StylePreservator, StylePreservationContext } from '../styles-preservator';
+describe('StylePreservator', () => {
+  describe('preserve', () => {
+    it('should preserve styles by converting them to data-style attributes', () => {
+      // Arrange
+      const html = '<div style="color: red; font-weight: bold;">Test content</div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div data-style="color: red; font-weight: bold;">Test content</div>');
+    });
+    it('should handle multiple style attributes in the same HTML string', () => {
+      // Arrange
+      const html = '<div style="color: red;"><span style="font-weight: bold;">Bold text</span></div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div data-style="color: red;"><span data-style="font-weight: bold;">Bold text</span></div>');
+    });
+    it('should handle HTML without style attributes', () => {
+      // Arrange
+      const html = '<div class="test"><span>Regular text</span></div>';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<div class="test"><span>Regular text</span></div>');
+    });
+    it('should handle empty string input', () => {
+      // Arrange
+      const html = '';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('');
+    });
+    it('should handle complex nested HTML with multiple style attributes', () => {
+      // Arrange
+      const html = `
+				<div style="padding: 20px; background: white;">
+					<header style="margin-bottom: 10px;">
+						<h1 style="font-size: 24px; color: blue;">Title</h1>
+					</header>
+				</div>
+			`;
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      const expected = `
+				<div data-style="padding: 20px; background: white;">
+					<header data-style="margin-bottom: 10px;">
+						<h1 data-style="font-size: 24px; color: blue;">Title</h1>
+					</header>
+				</div>
+			`;
+      expect(result).toBe(expected);
+    });
+    it('should handle self-closing tags with style attributes', () => {
+      // Arrange
+      const html = '<img src="test.jpg" style="width: 100px; height: 100px;" alt="Test image" />';
+      // Act
+      const context = StylePreservator.preserve(html);
+      const result = context.getProcessedHtml();
+      // Assert
+      expect(result).toBe('<img src="test.jpg" data-style="width: 100px; height: 100px;" alt="Test image" />');
+    });
+  });
+  describe('StylePreservationContext', () => {
+    describe('restore', () => {
+      it('should restore data-style to style attribute for single element', () => {
+        // Arrange
+        const html = '<span data-style="font-weight: bold; color: red;">Bold text</span>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const spanElement = nodes[0];
+        expect(spanElement.style.fontWeight).toBe('bold');
+        expect(spanElement.style.color).toBe('red');
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should restore data-style to style attribute for nested elements', () => {
+        // Arrange
+        const html = `
+					<div data-style="margin: 10px;">
+						<span data-style="font-weight: bold;">Bold text</span>
+						<p data-style="color: blue;">Blue paragraph</p>
+					</div>
+				`;
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        const spanElement = divElement.querySelector('span');
+        const pElement = divElement.querySelector('p');
+        expect(divElement.style.margin).toBe('10px');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+        expect(spanElement.style.fontWeight).toBe('bold');
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+        expect(pElement.style.color).toBe('blue');
+        expect(pElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should handle elements without data-style attributes', () => {
+        // Arrange
+        const html = '<div><span>Regular text</span><p>Normal paragraph</p></div>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act & Assert - should not throw any errors
+        expect(() => context.restore(nodes)).not.toThrow();
+        const divElement = nodes[0];
+        const spanElement = divElement.querySelector('span');
+        const pElement = divElement.querySelector('p');
+        expect(divElement.style.cssText).toBe('');
+        expect(spanElement.style.cssText).toBe('');
+        expect(pElement.style.cssText).toBe('');
+      });
+      it('should handle empty array of nodes', () => {
+        // Arrange
+        const nodes = [];
+        const context = new StylePreservationContext('');
+        // Act & Assert - should not throw any errors
+        expect(() => context.restore(nodes)).not.toThrow();
+      });
+      it('should handle complex CSS values', () => {
+        // Arrange
+        const html = '<div data-style="background: linear-gradient(45deg, red, blue); transform: rotate(45deg);">Complex styles</div>';
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        const context = new StylePreservationContext('');
+        // Act
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        expect(divElement.style.background).toContain('linear-gradient');
+        expect(divElement.style.transform).toContain('rotate(45deg)');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+      });
+    });
+    describe('complete workflow', () => {
+      it('should preserve and restore styles correctly', () => {
+        // Arrange
+        const originalHtml = '<div style="color: red; font-weight: bold;">Test content</div>';
+        // Act - Preserve styles
+        const context = StylePreservator.preserve(originalHtml);
+        const processedHtml = context.getProcessedHtml();
+        // Parse the processed HTML
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(processedHtml, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        // Restore styles
+        context.restore(nodes);
+        // Assert
+        expect(processedHtml).toBe('<div data-style="color: red; font-weight: bold;">Test content</div>');
+        const divElement = nodes[0];
+        expect(divElement.style.color).toBe('red');
+        expect(divElement.style.fontWeight).toBe('bold');
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+      });
+      it('should handle complex nested workflow', () => {
+        // Arrange
+        const originalHtml = `
+					<div style="padding: 20px;">
+						<h1 style="color: blue;">Title</h1>
+						<p style="text-align: center;">
+							<span style="font-weight: bold;">Bold text</span>
+						</p>
+					</div>
+				`;
+        // Act - Complete workflow
+        const context = StylePreservator.preserve(originalHtml);
+        const processedHtml = context.getProcessedHtml();
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(processedHtml, 'text/html');
+        const nodes = Array.from(doc.body.children);
+        context.restore(nodes);
+        // Assert
+        const divElement = nodes[0];
+        const h1Element = divElement.querySelector('h1');
+        const pElement = divElement.querySelector('p');
+        const spanElement = divElement.querySelector('span');
+        expect(divElement.style.padding).toBe('20px');
+        expect(h1Element.style.color).toBe('blue');
+        expect(pElement.style.textAlign).toBe('center');
+        expect(spanElement.style.fontWeight).toBe('bold');
+        // All data-style attributes should be removed
+        expect(divElement.hasAttribute('data-style')).toBe(false);
+        expect(h1Element.hasAttribute('data-style')).toBe(false);
+        expect(pElement.hasAttribute('data-style')).toBe(false);
+        expect(spanElement.hasAttribute('data-style')).toBe(false);
+      });
+    });
+  });
+});

package/dist/collection/helpers/csp/test/vega-nonce-manager.test.js

@@ -0,0 +1,166 @@
+import { VegaNonceManager, vegaNonceManager, setVegaNonce } from '../vega-nonce-manager';
+import { VegaNonceManager as MockedManager } from '../vega-nonce-manager';
+// Unit tests for vega-nonce-manager.ts
+describe('VegaNonceManager', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+  it('should set nonce via constructor', () => {
+    const manager = new VegaNonceManager('test-nonce');
+    expect(manager.nonce).toBe('test-nonce');
+  });
+  it('should set and get nonce via property', () => {
+    const manager = new VegaNonceManager();
+    manager.nonce = 'abc123';
+    expect(manager.nonce).toBe('abc123');
+    manager.nonce = undefined;
+    expect(manager.nonce).toBeUndefined();
+  });
+  it('should set nonce from meta tag if not provided in constructor', async () => {
+    const mockMeta = { content: 'meta-nonce' };
+    const mockDoc = {
+      querySelector: jest.fn().mockImplementation((selector) => {
+        if (selector === 'meta[name="csp-nonce"]') {
+          return mockMeta;
+        }
+        return undefined;
+      }),
+    };
+    jest.doMock('../../../utils/try-get-document', () => ({
+      tryGetDocument: () => mockDoc,
+    }));
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { VegaNonceManager: MockedManager } = await import('../vega-nonce-manager');
+    const manager = new MockedManager();
+    expect(manager.nonce).toBe('meta-nonce');
+  });
+  it('should get undefined nonce from meta tag if not provided', () => {
+    const mockMeta = { content: 'meta-nonce' };
+    const mockDoc = {
+      querySelector: jest.fn().mockReturnValue(mockMeta),
+    };
+    jest.doMock('../../../utils/try-get-document', () => ({
+      tryGetDocument: () => mockDoc,
+    }));
+    const manager = new MockedManager();
+    expect(manager.nonce).toBe(undefined);
+  });
+  it('should not set nonce if meta tag is missing', () => {
+    const mockDoc = {
+      querySelector: jest.fn().mockReturnValue(undefined),
+    };
+    jest.doMock('../../../utils/try-get-document', () => ({
+      tryGetDocument: () => mockDoc,
+    }));
+    const manager = new MockedManager();
+    expect(manager.nonce).toBeUndefined();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should use vegaNonceManager.nonce when adding nonce', () => {
+    // Set a different nonce on the singleton to ensure it's used
+    setVegaNonce('singleton-vega-nonce');
+    const style = document.createElement('style');
+    style.setAttribute('data-styles', '');
+    style.innerHTML = 'vega-bar{}';
+    const head = document.head;
+    // Patch head.insertBefore using the singleton's method
+    vegaNonceManager.patchHeadInsertBeforeWithNonceToStencil();
+    // Insert the style element, should use vegaNonceManager.nonce
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBe('singleton-vega-nonce');
+    // Clean up
+    setVegaNonce(undefined);
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should add nonce to style elements', () => {
+    var _a, _b;
+    const style = document.createElement('style');
+    style.setAttribute('data-styles', '');
+    style.innerHTML = 'vega-foo{}';
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.nonce = 'patched-nonce';
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    // Spy on setAttribute to simulate nonce being set by the patched insertBefore
+    const originalInsertBefore = head.insertBefore;
+    jest.spyOn(head, 'insertBefore').mockImplementation((element, referenceNode) => {
+      if (element.tagName === 'STYLE' && manager.nonce) {
+        element.setAttribute('nonce', manager.nonce);
+      }
+      return originalInsertBefore.call(head, element, referenceNode);
+    });
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBe('patched-nonce');
+    // Restore the original insertBefore after the test
+    (_b = (_a = head.insertBefore).mockRestore) === null || _b === void 0 ? void 0 : _b.call(_a);
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not add nonce if not set', () => {
+    const style = document.createElement('style');
+    style.setAttribute('data-styles', '');
+    style.innerHTML = 'vega-foo{}';
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBeNull();
+  });
+  it('setVegaNonce sets the nonce on the singleton', () => {
+    setVegaNonce('singleton-nonce');
+    expect(vegaNonceManager.nonce).toBe('singleton-nonce');
+    setVegaNonce(undefined);
+    expect(vegaNonceManager.nonce).toBeUndefined();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not throw if document is missing', async () => {
+    jest.resetModules();
+    jest.doMock('../../../utils/try-get-document', () => ({
+      tryGetDocument: () => undefined,
+    }));
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const { VegaNonceManager: MockedManager } = await import('../vega-nonce-manager');
+    const manager = new MockedManager();
+    expect(() => manager.patchHeadInsertBeforeWithNonceToStencil()).not.toThrow();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not set nonce if element is not a style', () => {
+    const div = document.createElement('div');
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.nonce = 'should-not-set';
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    head.insertBefore(div, null);
+    expect(div.getAttribute('nonce')).toBeNull();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not set nonce if style does not have data-styles', () => {
+    const style = document.createElement('style');
+    style.innerHTML = 'vega-foo{}';
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.nonce = 'should-not-set';
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBeNull();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not set nonce if style innerHTML does not include vega-', () => {
+    const style = document.createElement('style');
+    style.setAttribute('data-styles', '');
+    style.innerHTML = 'no-vega-here{}';
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.nonce = 'should-not-set';
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBeNull();
+  });
+  it('patchHeadInsertBeforeWithNonceToStencil should not overwrite existing nonce', () => {
+    const style = document.createElement('style');
+    style.setAttribute('data-styles', '');
+    style.innerHTML = 'vega-foo{}';
+    style.setAttribute('nonce', 'existing-nonce');
+    const head = document.head;
+    const manager = new VegaNonceManager();
+    manager.nonce = 'should-not-overwrite';
+    manager.patchHeadInsertBeforeWithNonceToStencil();
+    head.insertBefore(style, null);
+    expect(style.getAttribute('nonce')).toBe('existing-nonce');
+  });
+});

package/dist/collection/helpers/csp/vega-nonce-manager.js

@@ -0,0 +1,97 @@
+import { tryGetDocument } from '../../utils/try-get-document';
+/**
+ * VegaNonceManager is responsible for managing the CSP nonce value.
+ */
+export class VegaNonceManager {
+  /**
+   * Creates a new instance of the nonce manager.
+   *
+   * If a `nonce` is provided, it will be used as the internal nonce value.
+   * If not provided, and if the environment supports `tryGetDocument`, attempts to retrieve
+   * the nonce from a meta tag with the name "csp-nonce" in the document.
+   *
+   * @param {string | undefined} nonce - An optional string representing the CSP nonce to use.
+   */
+  constructor(nonce) {
+    var _a;
+    if (nonce) {
+      this._nonce = nonce;
+    }
+    else if (typeof tryGetDocument === 'function') {
+      const dom = tryGetDocument();
+      if (dom) {
+        const metaNonce = (_a = dom.querySelector('meta[name="csp-nonce"]')) === null || _a === void 0 ? void 0 : _a.content;
+        if (metaNonce) {
+          this._nonce = metaNonce;
+        }
+      }
+    }
+  }
+  /**
+   * Sets the Content Security Policy (CSP) nonce value.
+   *
+   * @param {string | undefined} nonce - The nonce string to be set, or `undefined` to clear the nonce.
+   */
+  set nonce(nonce) {
+    this._nonce = nonce;
+  }
+  /**
+   * Gets the current Content Security Policy (CSP) nonce value.
+   *
+   * @returns {string | undefined} The current nonce string, or `undefined` if not set.
+   */
+  get nonce() {
+    return this._nonce;
+  }
+  /**
+   * Monkey-patches document.head.insertBefore to automatically add the CSP nonce
+   * to dynamically injected <style> elements with the 'data-styles' attribute.
+   *
+   * This ensures that styles injected at runtime comply with the Content Security Policy.
+   */
+  patchHeadInsertBeforeWithNonceToStencil() {
+    const doc = tryGetDocument();
+    if (!doc)
+      return;
+    const head = doc.head;
+    const originalHeadInsertBefore = head.insertBefore;
+    /**
+     * Overrides the head.insertBefore method to inject a CSP nonce into any STYLE element being inserted.
+     *
+     * @template T - The type of Node being inserted.
+     * @param {T} newElement - The new node to insert.
+     * @param {Node | null} referenceElement - The node before which newElement is inserted, or null to insert at the end.
+     * @returns {T} The inserted node.
+     */
+    head.insertBefore = function (newElement, referenceElement) {
+      // If no nonce is set, use the original insertBefore
+      if (!vegaNonceManager.nonce)
+        return originalHeadInsertBefore.call(this, newElement, referenceElement);
+      // Check if the new element is a <style> tag injected by Stencil (with data-styles and vega- marker)
+      if (newElement.nodeType === Node.ELEMENT_NODE &&
+        newElement instanceof HTMLStyleElement &&
+        newElement.hasAttribute('data-styles') &&
+        newElement.innerHTML.includes('vega-') &&
+        !newElement.hasAttribute('nonce')) {
+        newElement.setAttribute('nonce', vegaNonceManager.nonce);
+      }
+      return originalHeadInsertBefore.call(this, newElement, referenceElement);
+    };
+  }
+}
+/**
+ * Singleton instance of the {@link VegaNonceManager} used to manage CSP nonce across the application.
+ */
+export const vegaNonceManager = new VegaNonceManager();
+/**
+ * Sets the nonce value used by the Vega nonce manager.
+ *
+ * This function updates the `nonce` property of the global `vegaNonceManager`
+ * object with the provided nonce string. The nonce is typically used for
+ * Content Security Policy (CSP) compliance when dynamically injecting scripts or styles.
+ *
+ * @param {string | undefined} nonce - The nonce string to be set for CSP compliance.
+ */
+export function setVegaNonce(nonce) {
+  vegaNonceManager.nonce = nonce;
+}

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

@@ -14,4 +14,6 @@ export { ValidCreditCardNumberRule } from './validator/rules/valid-credit-card-n
 export { waitForVega } from './common';
 export { VegaSkeletonLoader } from './skeleton-loader/vega-skeleton-loader-controller';
 export { VegaTranslation, en as VegaTranslationResourceEN } from './translation';
+export { VegaRTEContent } from '../components/vega-rich-text-editor/dto/content-state';
+export { setVegaNonce } from './csp/vega-nonce-manager';
 export * from '../components/vega-rich-text-editor/public-api';

package/dist/collection/helpers/slimmers/component-global-style-slimmer.js

@@ -5,6 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { vegaNonceManager } from '../csp/vega-nonce-manager';
 /**
  * Component global style slimmer
  */
@@ -58,6 +59,9 @@ export class ComponentGlobalStyleSlimmer extends VegaSlimmer {
       styleElement = document.createElement('style');
       styleElement.id = this.id;
       styleElement.innerHTML = this.style;
+      if (vegaNonceManager.nonce) {
+        styleElement.setAttribute('nonce', vegaNonceManager.nonce);
+      }
       // eslint-disable-next-line no-restricted-globals
       document.head.append(styleElement);
     }

package/dist/collection/helpers/slimmers/global/vega-nonce-injector-slimmer.js

@@ -0,0 +1,54 @@
+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 { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { vegaNonceManager } from '../../csp/vega-nonce-manager';
+/**
+ * Class responsible for injecting nonce into inline style attributes for vega components.
+ */
+export class VegaNonceInjectorSlimmer extends VegaSlimmer {
+  constructor(option) {
+    super();
+    this.component = option.component;
+  }
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Registers an observer to watch for translation updates, which triggers a forced update on the component.
+   */
+  /**
+   * Lifecycle callback that is invoked when the custom element is added to the DOM.
+   *
+   * This implementation overrides the `insertBefore` method of the element's shadow root
+   * to automatically set the `nonce` attribute on any inline `<style>` elements that are inserted.
+   * This is typically used to support Content Security Policy (CSP) by ensuring that dynamically
+   * injected styles have the correct nonce value.
+   */
+  connectedCallback() {
+    const shadowRoot = this.component['host'].shadowRoot;
+    // override element#insertBefore to set nonce attribute for inline style element
+    const originalInsertBefore = shadowRoot.insertBefore;
+    /**
+     * Overrides the shadowRoot's insertBefore method to inject a CSP nonce into any STYLE element being inserted.
+     *
+     * @template T - The type of Node being inserted.
+     * @param {T} newElement - The new node to insert.
+     * @param {Node | null} referenceElement - The node before which newElement is inserted, or null to insert at the end.
+     * @returns {T} The inserted node.
+     */
+    shadowRoot.insertBefore = function (newElement, referenceElement) {
+      if (newElement.nodeName === 'STYLE') {
+        const nonce = vegaNonceManager.nonce;
+        if (nonce !== undefined) {
+          newElement.setAttribute('nonce', nonce);
+        }
+      }
+      return originalInsertBefore.call(this, newElement, referenceElement);
+    };
+  }
+}
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], VegaNonceInjectorSlimmer.prototype, "connectedCallback", null);

package/dist/collection/helpers/slimmers/test/component-global-style-slimmer.test.js

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { InjectVegaSlimmer } from 'vega-slimmer/core';
 import { MockHTMLElement } from '@stencil/core/mock-doc';
 import { ComponentGlobalStyleSlimmer } from '../component-global-style-slimmer';
+import { vegaNonceManager } from '../../csp/vega-nonce-manager';
 describe('componentGlobalStyleSlimmer', () => {
   const mockedComponentWillLoadMethod = jest.fn();
   const connectedCallback = jest.fn();
@@ -60,4 +61,44 @@ describe('componentGlobalStyleSlimmer', () => {
     component2.disconnectedCallback();
     expect(document.head).toMatchInlineSnapshot(`<head></head>`);
   });
+  it('should append component global style into document head with nonce if the nonce is not undefined', () => {
+    Object.defineProperty(vegaNonceManager, 'nonce', {
+      get: () => 'mocked-nonce',
+      configurable: true,
+    });
+    const component1 = new MockedComponent();
+    const component2 = new MockedComponent();
+    expect(component1).not.toBeNull();
+    expect(component2).not.toBeNull();
+    expect(document.head).toMatchInlineSnapshot(`
+		<head>
+		  <style id="MOCKED-COMPONENT-GLOBAL-STYLE" nonce="mocked-nonce">
+		    .mocked-component { padding: 14px }
+		  </style>
+		</head>
+	`);
+    component1.disconnectedCallback();
+    component2.disconnectedCallback();
+    delete vegaNonceManager.nonce;
+  });
+  it('should append component global style into document head without nonce if the nonce is undefined', () => {
+    Object.defineProperty(vegaNonceManager, 'nonce', {
+      get: () => undefined,
+      configurable: true,
+    });
+    const component1 = new MockedComponent();
+    const component2 = new MockedComponent();
+    expect(component1).not.toBeNull();
+    expect(component2).not.toBeNull();
+    expect(document.head).toMatchInlineSnapshot(`
+		<head>
+		  <style id="MOCKED-COMPONENT-GLOBAL-STYLE">
+		    .mocked-component { padding: 14px }
+		  </style>
+		</head>
+	`);
+    component1.disconnectedCallback();
+    component2.disconnectedCallback();
+    delete vegaNonceManager.nonce;
+  });
 });

package/dist/collection/helpers/slimmers/test/global/vega-nonce-injector-slimmer.test.js

@@ -0,0 +1,64 @@
+import { VegaNonceInjectorSlimmer } from '../../global/vega-nonce-injector-slimmer';
+import * as nonceManagerModule from '../../../csp/vega-nonce-manager';
+jest.mock('../../../csp/vega-nonce-manager', () => ({
+  vegaNonceManager: {
+    nonce: undefined,
+    patchHeadInsertBeforeWithNonceToStencil: jest.fn(),
+  },
+}));
+describe('VegaNonceInjectorSlimmer', () => {
+  let slimmer;
+  let mockComponent;
+  beforeEach(() => {
+    // Mock the component with a shadowRoot and host
+    const mockShadowRoot = {
+      insertBefore: jest.fn((newElement) => newElement),
+    };
+    mockComponent = {
+      host: {
+        shadowRoot: mockShadowRoot,
+      },
+    };
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    slimmer = new VegaNonceInjectorSlimmer({
+      component: mockComponent,
+    });
+  });
+  it('should be defined', () => {
+    expect(slimmer).toBeDefined();
+  });
+  it('should override insertBefore and set nonce on STYLE elements', () => {
+    const styleEl = document.createElement('style');
+    const refEl = document.createElement('div');
+    const nonceValue = 'nonce-123';
+    nonceManagerModule.vegaNonceManager.nonce = nonceValue;
+    slimmer.connectedCallback();
+    mockComponent.host.shadowRoot.insertBefore(styleEl, refEl);
+    expect(styleEl.getAttribute('nonce')).toBe(nonceValue);
+  });
+  it('should not set nonce on non-STYLE elements', () => {
+    const divEl = document.createElement('div');
+    const refEl = document.createElement('span');
+    nonceManagerModule.vegaNonceManager.nonce = 'nonce-test-a';
+    slimmer.connectedCallback();
+    mockComponent.host.shadowRoot.insertBefore(divEl, refEl);
+    expect(divEl.getAttribute('nonce')).toBeNull();
+  });
+  it('should call original insertBefore', () => {
+    const styleEl = document.createElement('style');
+    const refEl = document.createElement('div');
+    const originalInsertBefore = mockComponent.host.shadowRoot.insertBefore;
+    nonceManagerModule.vegaNonceManager.nonce = 'nonce-test-b';
+    slimmer.connectedCallback();
+    mockComponent.host.shadowRoot.insertBefore(styleEl, refEl);
+    expect(originalInsertBefore).toHaveBeenCalledWith(styleEl, refEl);
+  });
+  it('should handle missing nonce gracefully', () => {
+    const styleEl = document.createElement('style');
+    const refEl = document.createElement('div');
+    nonceManagerModule.vegaNonceManager.nonce = undefined;
+    slimmer.connectedCallback();
+    mockComponent.host.shadowRoot.insertBefore(styleEl, refEl);
+    expect(styleEl.getAttribute('nonce')).toBeNull();
+  });
+});