@magicfeedback/popup-sdk 1.14.0 → 1.15.0

package/dist/{renderPopup-Z6TENBP6.mjs → renderPopup-CHWH3KHR.mjs}

@@ -2868,31 +2868,36 @@ function insertPopupLogo(parent, anchor, style, id) {
 
 // src/ui/renderPopup.ts
 var import_native = __toESM(require_magicfeedback_sdk_browser());
-function ensureMagicFeedbackStyles(_popup) {
-  const STYLE_ID = "magicfeedback-sdk-styles";
-  if (document.getElementById(STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = STYLE_ID;
-  style.textContent = style_default;
-  document.head.appendChild(style);
+function ensureStyle(id, css, nonce) {
+  let el = document.getElementById(id);
+  if (el && nonce && el.getAttribute("nonce") !== nonce) {
+    el.remove();
+    el = null;
+  }
+  if (!el) {
+    el = document.createElement("style");
+    el.id = id;
+    if (nonce) el.setAttribute("nonce", nonce);
+    el.textContent = css;
+    document.head.appendChild(el);
+  } else if (el.textContent !== css) {
+    el.textContent = css;
+  }
+  return el;
+}
+function ensureMagicFeedbackStyles(nonce) {
+  ensureStyle("magicfeedback-sdk-styles", style_default, nonce);
 }
 var SURVEY_ALIGNMENT_STYLE_ID = "deepdots-survey-alignment";
-function ensureSurveyAlignmentStyles() {
-  if (document.getElementById(SURVEY_ALIGNMENT_STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = SURVEY_ALIGNMENT_STYLE_ID;
-  style.textContent = `
+function ensureSurveyAlignmentStyles(nonce) {
+  ensureStyle(SURVEY_ALIGNMENT_STYLE_ID, `
     .deepdots-popup .magicfeedback-container,
     .deepdots-popup .magicfeedback-form,
     .deepdots-popup .magicfeedback-div { padding-left: 0; padding-right: 0; }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureSpinnerStyles(_popup) {
-  if (document.getElementById("deepdots-spinner-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-spinner-styles";
-  style.textContent = `
+function ensureSpinnerStyles(nonce) {
+  ensureStyle("deepdots-spinner-styles", `
     /* El enunciado trae margin-top:20px del CSS de surveys, que sumaba al hueco de la barra
        de progreso y descompensaba la simetr\xEDa. Solo se anula en el primero: entre preguntas
        de la misma p\xE1gina sigue separando. */
@@ -2900,14 +2905,10 @@ function ensureSpinnerStyles(_popup) {
     @keyframes ddspin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     .mf-spinner { display:flex; justify-content:center; align-items:center; padding:8px 0; }
     .mf-spinner-circle { width:28px; height:28px; border:3px solid #e0e6ed; border-top-color:#1E293B; border-radius:50%; animation: ddspin 0.9s linear infinite; }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureResponsiveStyles(_popup) {
-  if (document.getElementById("deepdots-responsive-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-responsive-styles";
-  style.textContent = `
+function ensureResponsiveStyles(nonce) {
+  ensureStyle("deepdots-responsive-styles", `
     /* Responsive adjustments */
     @media (max-width: 640px) {
       .deepdots-popup {
@@ -2940,32 +2941,20 @@ function ensureResponsiveStyles(_popup) {
         overflow-y: auto !important;
       }
     }
-  `;
-  document.head.appendChild(style);
+  `, nonce);
 }
-function ensureCustomCss(css) {
+function ensureCustomCss(css, nonce) {
   const STYLE_ID = "deepdots-custom-css";
-  const existing = document.getElementById(STYLE_ID);
   if (!css) {
-    existing?.remove();
+    document.getElementById(STYLE_ID)?.remove();
     return;
   }
-  const el = existing ?? document.createElement("style");
-  el.id = STYLE_ID;
-  if (el.textContent !== css) el.textContent = css;
-  document.head.appendChild(el);
+  document.head.appendChild(ensureStyle(STYLE_ID, css, nonce));
 }
-function ensureFontFace(family, url) {
+function ensureFontFace(family, url, nonce) {
   const css = buildFontFaceCss(family, url);
   if (!css) return;
-  const STYLE_ID = "deepdots-font-face";
-  let el = document.getElementById(STYLE_ID);
-  if (!el) {
-    el = document.createElement("style");
-    el.id = STYLE_ID;
-    document.head.appendChild(el);
-  }
-  if (el.textContent !== css) el.textContent = css;
+  ensureStyle("deepdots-font-face", css, nonce);
 }
 function hasFinePointer() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(pointer: fine)").matches;
@@ -2975,6 +2964,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   let stylesInjected = false;
   let pageDepth = 0;
   let onStartPage = false;
+  const cspNonce = options?.cspNonce?.trim() || void 0;
   let labels = getLabels(options?.language);
   let actionLabels = resolveActionLabels(actions, options?.language);
   let direction = directionFor(options?.language);
@@ -3026,7 +3016,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     popup.style.fontFamily = familyValue;
     popup.style.setProperty("--deepdots-font", familyValue);
     popup.classList.add("deepdots-has-font");
-    if (font.url) ensureFontFace(font.family, font.url);
+    if (font.url) ensureFontFace(font.family, font.url, cspNonce);
   }
   const header = document.createElement("div");
   header.className = "deepdots-popup-header";
@@ -3142,11 +3132,11 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
     }
     progressFollowUp.style.display = p.followup ? "inline-block" : "none";
   }
-  ensureMagicFeedbackStyles(popup);
-  ensureSurveyAlignmentStyles();
-  ensureSpinnerStyles(popup);
-  ensureResponsiveStyles(popup);
-  ensureCustomCss(options?.surveyCss);
+  ensureMagicFeedbackStyles(cspNonce);
+  ensureSurveyAlignmentStyles(cspNonce);
+  ensureSpinnerStyles(cspNonce);
+  ensureResponsiveStyles(cspNonce);
+  ensureCustomCss(options?.surveyCss, cspNonce);
   const containerContent = document.createElement("div");
   containerContent.id = "dd-content";
   containerContent.className = "deepdots-popup-container-content";
@@ -3587,4 +3577,4 @@ export {
   SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup
 };
-//# sourceMappingURL=renderPopup-Z6TENBP6.mjs.map
+//# sourceMappingURL=renderPopup-CHWH3KHR.mjs.map