@globalpayments/vega 2.63.0 → 2.64.0

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -6,6 +6,7 @@ import { BlockAnnotationTypeEnum } from '../../dto/annotations/block-annotation.
 import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.abstract';
 import '../../../../polyfill/test-polyfill/unit/index';
 import CodeFormatter from '../../../../helpers/code-format/code-formatter';
+import { setVegaLogLevel } from '../../../../utils/log';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -1111,6 +1112,20 @@ describe('content state', () => {
       ]);
       expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
     });
+    it('should log warning when call toHtml with deprecated parameter', () => {
+      setVegaLogLevel('warn');
+      console.warn = jest.fn();
+      const content = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
+        },
+      ]);
+      content.toHtml({ autoMatchFormat: false });
+      expect(console.warn).toBeCalledTimes(1);
+      expect(console.warn).toHaveBeenCalledWith('%c[Vega]', 'font-weight: bold', "The 'options' parameter in toHtml method is deprecated and will be removed in the future.");
+    });
   });
   describe('fromHtml', () => {
     it('should convert a simple paragraph element to the expected RTEContentBlock', () => {
@@ -1934,7 +1949,7 @@ describe('content state', () => {
     it('should not match bold style', () => {
       const sourceCode = '<p style="font-weight: 700;">Hello</p>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="font-weight: 700;">Hello</p>`);
+      expect(content.toHtml()).toEqual(`<p style="font-weight: 700;">Hello</p>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -1958,7 +1973,7 @@ describe('content state', () => {
     it('should not match color style', () => {
       const sourceCode = '<p style="color: red">Hello</p>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="color: red;">Hello</p>`);
+      expect(content.toHtml()).toEqual(`<p style="color: red;">Hello</p>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -1982,7 +1997,7 @@ describe('content state', () => {
     it('should not match link style', () => {
       const sourceCode = `<p><a href="https://example.com">Link</a></p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p><a href="https://example.com">Link</a></p>`);
+      expect(content.toHtml()).toEqual(`<p><a href="https://example.com">Link</a></p>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2010,7 +2025,7 @@ describe('content state', () => {
     it('should not match heading', () => {
       const sourceCode = '<h1><span>Hello</span></h1>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<h1><span>Hello</span></h1>`);
+      expect(content.toHtml()).toEqual(`<h1><span>Hello</span></h1>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2022,7 +2037,7 @@ describe('content state', () => {
     it('should not match image style', () => {
       const sourceCode = '<img src="https://example.com/image.jpg">';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<img src="https://example.com/image.jpg">`);
+      expect(content.toHtml()).toEqual(`<img src="https://example.com/image.jpg">`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2045,7 +2060,7 @@ describe('content state', () => {
     it('should not match list style', () => {
       const sourceCode = '<ul><li>Item 1</li><li>Item 2</li></ul>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li></ul>`);
+      expect(content.toHtml()).toEqual(`<ul><li>Item 1</li><li>Item 2</li></ul>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2084,7 +2099,7 @@ describe('content state', () => {
     it('should not match div to internal style', () => {
       const sourceCode = "<div class='my-class'><span> I want this be a sentence </span><span class='my-another-class'> I want this be another sentence </span></div>";
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<div class="my-class"><span> I want this be a sentence </span><span class="my-another-class"> I want this be another sentence </span></div>`);
+      expect(content.toHtml()).toEqual(`<div class="my-class"><span> I want this be a sentence </span><span class="my-another-class"> I want this be another sentence </span></div>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2113,17 +2128,17 @@ describe('content state', () => {
     it('should not match parent style', () => {
       const sourceCode = `<p style="font-weight: bold;font-style: italic;text-decoration: line-through;color: pink;text-shadow: 2px 2px 5px gray;font-size: 24px;">mix</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="font-weight: bold;font-style: italic;text-decoration: line-through;color: pink;text-shadow: 2px 2px 5px gray;font-size: 24px;">mix</p>`);
+      expect(content.toHtml()).toEqual(`<p style="font-weight: bold;font-style: italic;text-decoration: line-through;color: pink;text-shadow: 2px 2px 5px gray;font-size: 24px;">mix</p>`);
     });
     it('should not match parent link style', () => {
       const sourceCode = `<a id="readMoreLink" class="link read-more" href="https://example.com" style="color: #2980b9; text-decoration: underline;">Read more</a>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<a id="readMoreLink" href="https://example.com" class="link read-more" style="color: #2980b9; text-decoration: underline;">Read more</a>`);
+      expect(content.toHtml()).toEqual(`<a id="readMoreLink" href="https://example.com" class="link read-more" style="color: #2980b9; text-decoration: underline;">Read more</a>`);
     });
     it('should not match code style', () => {
       const sourceCode = `<p>This is <code>code text</code>.</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2149,7 +2164,7 @@ describe('content state', () => {
     it('should preserve plain text nodes correctly', () => {
       const sourceCode = `<p>Plain text <span>with span</span> and <strong>bold</strong> text.</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      const htmlOutput = content.toHtml({ autoMatchFormat: false });
+      const htmlOutput = content.toHtml();
       expect(htmlOutput).toEqual(sourceCode);
       const jsonData = content.toJSON();
       expect(jsonData).toEqual([
@@ -2190,9 +2205,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(VegaRTEContent.fromJSON(jsonData, { autoMatchFormat: false }).toHtml({
-        autoMatchFormat: false,
-      })).toEqual(htmlOutput);
+      expect(VegaRTEContent.fromJSON(jsonData, { autoMatchFormat: false }).toHtml()).toEqual(htmlOutput);
     });
     it('should convert the html block to RTEContentBlock', () => {
       const sourceCode = `
@@ -2264,7 +2277,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
     });
     it('should convert the html block with an internal block wrapper to include the text nodes', () => {
       const sourceCode = `<section>111<span> 222 </span>333</section>`;
@@ -2298,7 +2311,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
     });
     it('should convert the img element with an internal block wrapper', () => {
       const sourceCode = `<section><img src="mocked-url"></section><div><img src="mocked-url-2"></div><img src="mocked-url-3">`;
@@ -2350,7 +2363,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
     });
     it('should show the internal block wrapper if the block has annotations', () => {
       const data = [
@@ -2378,9 +2391,9 @@ describe('content state', () => {
           ],
         },
       ];
-      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<section><a href="https://example.com" target="_blank">link</a></section>`);
+      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml()).toEqual(`<section><a href="https://example.com">link</a></section>`);
       data[0].children[0].annotations = { textAlign: 'center' };
-      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<section><p style="text-align: center;"><a href="https://example.com" target="_blank">link</a></p></section>`);
+      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml()).toEqual(`<section><p style="text-align: center;"><a href="https://example.com">link</a></p></section>`);
     });
     it('should covert nested html block as expect', () => {
       const sourceCode = `<section><nav>React<span> Vue </span>Angular</nav></section>`;
@@ -2421,17 +2434,17 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
     });
     it('should not covert the unsupported html', () => {
       const sourceCode = `<section><abc>test </abc>123</section>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<section>test 123</section>`);
+      expect(content.toHtml()).toEqual(`<section>test 123</section>`);
     });
     it('should convert as expect if it is internal element', () => {
       const sourceCode = `<h1>123</h1>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<h1>123</h1>`);
+      expect(content.toHtml()).toEqual(`<h1>123</h1>`);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2450,7 +2463,7 @@ describe('content state', () => {
     it('should convert nested inline html node as expect', () => {
       const sourceCode = `<p><b><u><s>111</s></u></b></p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2480,7 +2493,7 @@ describe('content state', () => {
     it('should convert the inline html node with custom attrs', () => {
       const sourceCode = `<p><b id="b-element" class="my-class-1 my-class-2" style="color: red; background: yellow;">text</b></p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2507,7 +2520,7 @@ describe('content state', () => {
     it('should convert the inline html node with text node as expect', () => {
       const sourceCode = `<p>Do not forget to buy <mark>milk</mark> today.</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2538,7 +2551,7 @@ describe('content state', () => {
     it('should convert the span as inline html when it includes not text node', () => {
       const sourceCode = `<p>This is a <span style="color: red;"><b>red</b></span> word.</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2659,7 +2672,7 @@ Line 1
   </footer>
 `;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(CodeFormatter.format(content.toHtml({ autoMatchFormat: false }))).toMatchSnapshot();
+      expect(CodeFormatter.format(content.toHtml())).toMatchSnapshot();
     });
     it('should convert the supported inline html as expected', () => {
       const sourceCode = `<p>
@@ -2694,7 +2707,7 @@ Line 1
 		      <video src="video.mp4"></video>
 		    </p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toMatchSnapshot();
+      expect(content.toHtml()).toMatchSnapshot();
     });
     it('should convert the code as inline html', () => {
       const sourceCode = `<code>1111</code>
@@ -2705,12 +2718,12 @@ Line 1
         <code>333</code>
       </b>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toMatchSnapshot();
+      expect(content.toHtml()).toMatchSnapshot();
     });
     it('should convert the link that allow plain text', () => {
       const sourceCode = `<p><a href="https://example.com">Example <b>link</b></a></p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
       expect(content.toJSON()).toEqual([
         {
           id: expect.anything(),
@@ -2751,32 +2764,32 @@ Line 1
     it('should split the multiple nested inline html', () => {
       const sourceCode = `<p><b><s>111</s><u>222</u></b></p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p><b><s>111</s></b><b><u>222</u></b></p>`);
+      expect(content.toHtml()).toEqual(`<p><b><s>111</s></b><b><u>222</u></b></p>`);
     });
     it('should convert li elements into a list block by default', () => {
       const sourceCode = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
+      expect(content.toHtml()).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
     });
     it('should convert all the ul children to list item', () => {
       const sourceCode = '<ul><li>Item 1</li>Item 2<li>Item 3</li></ul>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
+      expect(content.toHtml()).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
     });
     it('should correctly handle both standalone li elements and li elements with ul/ol', () => {
       const sourceCode = `<li>111</li><li>222</li><li>333</li><ol>444</ol><p>555</p>`;
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>111</li><li>222</li><li>333</li></ul><ol><li>444</li></ol><p>555</p>`);
+      expect(content.toHtml()).toEqual(`<ul><li>111</li><li>222</li><li>333</li></ul><ol><li>444</li></ol><p>555</p>`);
     });
     it('should handle non-contiguous li elements as separate lists', () => {
       const sourceCode = '<li>Item 1</li><p>Middle</p>Plain text<li>Item 2</li><li>Item 3</li>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li></ul><p>Middle</p>Plain text<ul><li>Item 2</li><li>Item 3</li></ul>`);
+      expect(content.toHtml()).toEqual(`<ul><li>Item 1</li></ul><p>Middle</p>Plain text<ul><li>Item 2</li><li>Item 3</li></ul>`);
     });
     it('should not merge bold annotation with custom attr', () => {
       const sourceCode = '<span style="font-weight: bold;">bold text</span>';
       const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
-      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toHtml()).toEqual(sourceCode);
     });
     it('should not remove blank space between elements', () => {
       const sourceCode = '<p><span>A</span><span> </span><span>paragraph</span></p>';
@@ -2827,11 +2840,9 @@ Line 1
         },
       ];
       expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content).toHtml({ autoMatchFormat: false })).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml({
-        autoMatchFormat: false,
-      })).toEqual(`<p><span>This is a paragraph</span></p>`);
     });
     it('should translate the html block as expect html', () => {
       const content = [

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/controllers/written-mode-svg-controller.js

@@ -40,13 +40,11 @@ export class WrittenModeSvgController extends VegaSlimmer {
       // eslint-disable-next-line no-restricted-globals
       this.currentPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
       this.currentPath.setAttribute('d', `M ${x} ${y}`);
-      Object.assign(this.currentPath.style, {
-        stroke: 'rgba(4, 4, 28, 1)',
-        strokeWidth: this.penWidth,
-        fill: 'none',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      });
+      this.currentPath.setAttribute('stroke', 'rgba(4, 4, 28, 1)');
+      this.currentPath.setAttribute('stroke-width', this.penWidth);
+      this.currentPath.setAttribute('fill', 'none');
+      this.currentPath.setAttribute('stroke-linecap', 'round');
+      this.currentPath.setAttribute('stroke-linejoin', 'round');
       this.signatureContainerRef.appendChild(this.currentPath);
     };
     /*

package/dist/collection/components/vega-signature-capture/slimmers/written-mode/renderers/written-mode-renderer.js

@@ -57,11 +57,7 @@ export class WrittenModeRenderer extends VegaSlimmer {
    * When the clear button is displayed, since the error message and the clear button are in the same line, this element is displayed.
    */
   renderSignaturePad() {
-    return (h("svg", { style: {
-        width: '100%',
-        height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'),
-        touchAction: 'none',
-      }, ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
+    return (h("svg", { width: "100%", height: formatAndValidResponsiveToken(this.height, 'widthAndHeight'), "touch-action": "none", ref: (ref) => this.writtenModeSvgController.setSignatureContainerRef(ref) }));
   }
   renderFooter() {
     return (this.showClearBtn && (h("vega-flex", { class: "signature-capture-written-footer", justifyContent: "space-between" },

package/dist/collection/global/scripts/before-vega-load.js

@@ -17,6 +17,8 @@ import { VegaSkeletonLoader } from '../../helpers/skeleton-loader/vega-skeleton-
 import { VegaTranslation } from '../../helpers/translation';
 import { VegaTranslateObserverSlimmer } from '../../helpers/slimmers/global/vega-translate-observer-slimmer';
 import { VegaRTEContent } from '../../components/vega-rich-text-editor/dto/content-state';
+import { setVegaNonce, vegaNonceManager } from '../../helpers/csp/vega-nonce-manager';
+import { VegaNonceInjectorSlimmer } from '../../helpers/slimmers/global/vega-nonce-injector-slimmer';
 import { VegaRTETokenExtension } from '../../components/vega-rich-text-editor/extensions/tokens/token-extension';
 import { VegaRTELanguageExtension } from '../../components/vega-rich-text-editor/extensions/languages/language-extension';
 import { VegaRTEPresetToolbarItems } from '../../components/vega-rich-text-editor/constants/constant';
@@ -45,6 +47,8 @@ export default function () {
   injectVegaRichTextEditorClassIntoGlobal();
   injectVegaPublicValidationRules();
   applyBrandingFromClientGlobal();
+  injectSetNonceIntoGlobal();
+  patchHeadInsertBeforeWithNonce();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -96,7 +100,11 @@ function injectVegaDialogIntoGlobal() {
  * register global vega slimmers
  */
 function registerGlobalVegaSlimmers() {
-  GlobalSlimmersRegistry.register([VegaWatchMethodCancelSlimmer, VegaTranslateObserverSlimmer]);
+  GlobalSlimmersRegistry.register([
+    VegaWatchMethodCancelSlimmer,
+    VegaTranslateObserverSlimmer,
+    VegaNonceInjectorSlimmer,
+  ]);
 }
 /**
  * Inject setEventSemantics to global as a public api
@@ -204,3 +212,15 @@ function applyBrandingFromClientGlobal() {
     VegaThemeManager.applyBranding(globalThis['VegaThemeManagerApplyBranding']);
   }
 }
+/**
+ * Injects the `setVegaNonce` function into the global scope as `setVegaNonce`.
+ */
+function injectSetNonceIntoGlobal() {
+  globalThis.setVegaNonce = setVegaNonce;
+}
+/**
+ * Patch document.head.insertBefore to ensure nonce is set on injected elements.
+ */
+function patchHeadInsertBeforeWithNonce() {
+  vegaNonceManager.patchHeadInsertBeforeWithNonceToStencil();
+}

package/dist/collection/helpers/change-manager/subject/static-subject/static-subject-title.js

@@ -28,4 +28,3 @@ export const DARK_MODE_CHANGE = new StaticSubject('DARK_MODE_CHANGE');
 export const SHADOW_ROOT_ELEMENT_SCROLLING = new StaticSubject('SHADOW_ROOT_ELEMENT_SCROLLING');
 export const FLAG_ICON_LOADED = new StaticSubject('FLAG_ICON_LOADED');
 export const GP_BRAND_CHANGE = new StaticSubject('GP_BRAND_CHANGE');
-export const CALENDAR_EVENT_PREVIEW_POPOVER_HIDE = new StaticSubject('CALENDAR_EVENT_PREVIEW_POPOVER_HIDE');

package/dist/collection/helpers/chart/renderers/svg-renderer.js

@@ -15,7 +15,7 @@ export class SVGRenderer extends BaseRenderer {
       .attr('width', width)
       .attr('height', height)
       .attr('viewBox', [0, 0, width, height])
-      .attr('style', 'display:block;max-width:100%;height:auto;')
+      .property('style', 'display:block;max-width:100%;height:auto;')
       .call((g) => {
       g.append('g')
         .attr('class', 'vega-chart-draw-g')
@@ -71,7 +71,7 @@ export class SVGRenderer extends BaseRenderer {
     })
       .call((g) => {
       g.selectAll('line').attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
+      g.selectAll('text').property('style', textStyle);
     })
       .call((g) => {
       if (direction === 'horizontal') {
@@ -104,7 +104,7 @@ export class SVGRenderer extends BaseRenderer {
     })
       .call((g) => {
       g.selectAll('line').attr('stroke-width', 2).attr('stroke', color);
-      g.selectAll('text').attr('style', textStyle);
+      g.selectAll('text').property('style', textStyle);
     })
       .call((g) => {
       if (direction !== 'horizontal') {
@@ -262,7 +262,7 @@ export class SVGRenderer extends BaseRenderer {
    */
   getTextNode(position, text, textStyle, textAnchor = 'start', rotate = 0) {
     const TextSelectionType = d3Create('svg:text')
-      .attr('style', textStyle)
+      .property('style', textStyle)
       .attr('x', position.x)
       .attr('y', position.y)
       .attr('text-anchor', textAnchor)

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

@@ -0,0 +1,71 @@
+import { isHTMLElement } from '../../utils/ui';
+/**
+ * StylePreservator handles CSP-compliant style management by temporarily converting
+ * inline styles to data attributes during HTML parsing operations.
+ *
+ * @example
+ * ```typescript
+ * const context = StylePreservator.preserve('<div style="color: red;">Content</div>');
+ * const safeHtml = context.getProcessedHtml();
+ * context.restore(parsedElements);
+ * ```
+ */
+export class StylePreservator {
+  /**
+   * Preserves inline styles by converting them to data attributes.
+   *
+   * @param {string} htmlString - The HTML string containing inline styles
+   * @returns {StylePreservationContext} A context object for later style restoration
+   */
+  static preserve(htmlString) {
+    const processedHtml = htmlString.replace(/\s+style=/g, ' data-style=');
+    return new StylePreservationContext(processedHtml);
+  }
+}
+/**
+ * Context class that manages the lifecycle of preserved styles.
+ */
+export class StylePreservationContext {
+  constructor(processedHtml) {
+    this.processedHtml = processedHtml;
+  }
+  /**
+   * Returns the HTML string with style attributes converted to data-style.
+   *
+   * @returns {string} The processed HTML string
+   */
+  getProcessedHtml() {
+    return this.processedHtml;
+  }
+  /**
+   * Restores data-style attributes back to style attributes.
+   *
+   * @param {HTMLElement[]} elements - Array of HTML elements to process
+   * @returns {void}
+   */
+  restore(elements) {
+    this.walkNodes(elements);
+  }
+  /**
+   * Recursively walk through nodes and restore styles
+   *
+   * @param {HTMLElement[]} elements - list of nodes
+   * @returns {void}
+   */
+  walkNodes(elements) {
+    elements.forEach((element) => {
+      if (isHTMLElement(element)) {
+        // Restore data-style back to style
+        const dataStyle = element.getAttribute('data-style');
+        if (dataStyle) {
+          element.style.cssText = dataStyle;
+          element.removeAttribute('data-style');
+        }
+        // Recursively process child nodes
+        if (element.children.length > 0) {
+          this.walkNodes(Array.from(element.children));
+        }
+      }
+    });
+  }
+}