@magicfeedback/popup-sdk 1.13.0 → 1.15.0

package/dist/react-native.d.mts

@@ -217,6 +217,15 @@ interface DeepdotsInitParams {
      * en vez de cambiar los defaults que comparten todos los clientes.
      */
     surveyCss?: string;
+    /**
+     * Nonce de la Content-Security-Policy de la página, para hosts con una CSP estricta
+     * (`style-src 'nonce-…'` sin `'unsafe-inline'`). El popup lo pone en cada `<style>` que
+     * inyecta en el `<head>` (hoja del survey, spinner, responsive, `surveyCss`, `@font-face`);
+     * sin él el navegador las bloquea y el survey sale sin estilos. Debe ser el MISMO nonce de
+     * la cabecera CSP de esa respuesta (en Angular, el token `CSP_NONCE`). Solo web: en React
+     * Native el survey vive en su propio WebView y no le afecta la CSP del host.
+     */
+    cspNonce?: string;
 }
 /**
  * Options for configuring survey triggers
@@ -314,6 +323,12 @@ interface PopupRenderOptions {
      * (`formData.lang[0]`) en cuanto este carga, y ambos los pisa `actions.*.label` de la API.
      */
     language?: string;
+    /**
+     * Nonce de la Content-Security-Policy del host (`DeepdotsInitParams.cspNonce`). Se pone en
+     * cada `<style>` que inyecta el popup DOM; sin él, una CSP con `style-src 'nonce-…'` bloquea
+     * la hoja del survey. No aplica a React Native (el survey vive en su propio WebView).
+     */
+    cspNonce?: string;
 }
 interface PopupRenderer {
     /** Preparar recursos si aplica */
@@ -393,7 +408,6 @@ declare class DeepdotsPopups {
     private renderer;
     /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
     private logger;
-    private popupContainer;
     private popupDefinitions;
     private popupsLoaded;
     /**
@@ -418,6 +432,7 @@ declare class DeepdotsPopups {
     private showProgressBar;
     /** CSS del host inyectado al final de los estilos del popup. */
     private surveyCss;
+    private cspNonce;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -730,8 +745,6 @@ declare class DeepdotsPopups {
     on(eventType: DeepdotsEventType, listener: EventListener): void;
     /** Remove an event listener */
     off(eventType: DeepdotsEventType, listener: EventListener): void;
-    /** Setup popup container element */
-    private setupPopupContainer;
     /** Render the popup UI */
     private renderPopup;
     /** Hide the popup */

package/dist/react-native.d.ts

@@ -217,6 +217,15 @@ interface DeepdotsInitParams {
      * en vez de cambiar los defaults que comparten todos los clientes.
      */
     surveyCss?: string;
+    /**
+     * Nonce de la Content-Security-Policy de la página, para hosts con una CSP estricta
+     * (`style-src 'nonce-…'` sin `'unsafe-inline'`). El popup lo pone en cada `<style>` que
+     * inyecta en el `<head>` (hoja del survey, spinner, responsive, `surveyCss`, `@font-face`);
+     * sin él el navegador las bloquea y el survey sale sin estilos. Debe ser el MISMO nonce de
+     * la cabecera CSP de esa respuesta (en Angular, el token `CSP_NONCE`). Solo web: en React
+     * Native el survey vive en su propio WebView y no le afecta la CSP del host.
+     */
+    cspNonce?: string;
 }
 /**
  * Options for configuring survey triggers
@@ -314,6 +323,12 @@ interface PopupRenderOptions {
      * (`formData.lang[0]`) en cuanto este carga, y ambos los pisa `actions.*.label` de la API.
      */
     language?: string;
+    /**
+     * Nonce de la Content-Security-Policy del host (`DeepdotsInitParams.cspNonce`). Se pone en
+     * cada `<style>` que inyecta el popup DOM; sin él, una CSP con `style-src 'nonce-…'` bloquea
+     * la hoja del survey. No aplica a React Native (el survey vive en su propio WebView).
+     */
+    cspNonce?: string;
 }
 interface PopupRenderer {
     /** Preparar recursos si aplica */
@@ -393,7 +408,6 @@ declare class DeepdotsPopups {
     private renderer;
     /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
     private logger;
-    private popupContainer;
     private popupDefinitions;
     private popupsLoaded;
     /**
@@ -418,6 +432,7 @@ declare class DeepdotsPopups {
     private showProgressBar;
     /** CSS del host inyectado al final de los estilos del popup. */
     private surveyCss;
+    private cspNonce;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     private tracking;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -730,8 +745,6 @@ declare class DeepdotsPopups {
     on(eventType: DeepdotsEventType, listener: EventListener): void;
     /** Remove an event listener */
     off(eventType: DeepdotsEventType, listener: EventListener): void;
-    /** Setup popup container element */
-    private setupPopupContainer;
     /** Render the popup UI */
     private renderPopup;
     /** Hide the popup */

package/dist/react-native.js

@@ -552,7 +552,7 @@ var init_style = __esm({
     style_default = `/**
  * NO EDITAR A MANO \u2014 generado por scripts/vendor-survey-css.mjs
  *
- * Copia de @magicfeedback/native@2.2.31 \u2192 dist/styles/magicfeedback-default.css
+ * Copia de @magicfeedback/native@2.2.33 \u2192 dist/styles/magicfeedback-default.css
  * (la hoja can\xF3nica del paquete, la que apunta su campo "style"), con estos cambios locales:
  *
  *  1. Sin el @import de Google Fonts (Nunito): no queremos una petici\xF3n externa desde la
@@ -2796,30 +2796,35 @@ __export(renderPopup_exports, {
   SURVEY_ALIGNMENT_STYLE_ID: () => SURVEY_ALIGNMENT_STYLE_ID,
   renderPopup: () => renderPopup
 });
-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 ensureSurveyAlignmentStyles() {
-  if (document.getElementById(SURVEY_ALIGNMENT_STYLE_ID)) return;
-  const style = document.createElement("style");
-  style.id = SURVEY_ALIGNMENT_STYLE_ID;
-  style.textContent = `
+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);
+}
+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);
-}
-function ensureSpinnerStyles(_popup) {
-  if (document.getElementById("deepdots-spinner-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-spinner-styles";
-  style.textContent = `
+  `, nonce);
+}
+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. */
@@ -2827,14 +2832,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);
-}
-function ensureResponsiveStyles(_popup) {
-  if (document.getElementById("deepdots-responsive-styles")) return;
-  const style = document.createElement("style");
-  style.id = "deepdots-responsive-styles";
-  style.textContent = `
+  `, nonce);
+}
+function ensureResponsiveStyles(nonce) {
+  ensureStyle("deepdots-responsive-styles", `
     /* Responsive adjustments */
     @media (max-width: 640px) {
       .deepdots-popup {
@@ -2867,32 +2868,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;
@@ -2902,6 +2891,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);
@@ -2953,7 +2943,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";
@@ -3069,11 +3059,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";
@@ -3781,7 +3771,7 @@ function trimmedOrNull(value) {
 }
 function buildSurveyHtml(opts) {
   const env = opts.env === "development" ? "dev" : "prod";
-  const version = opts.version ?? "2.2.31";
+  const version = opts.version ?? "2.2.33";
   const cdn = `https://cdn.jsdelivr.net/npm/@magicfeedback/native@${version}/dist/magicfeedback-sdk.browser.js`;
   const sid = jsonForScript(opts.surveyId);
   const pid = jsonForScript(opts.productId);
@@ -5538,8 +5528,6 @@ var DeepdotsPopups = class {
     this.renderer = createDefaultRenderer();
     /** Logger para el output de debug. Default `console`; el host puede inyectar el suyo en init(). */
     this.logger = console;
-    this.popupContainer = null;
-    // deprecated: mantenido para compatibilidad interna
     this.popupDefinitions = [];
     this.popupsLoaded = false;
     /**
@@ -5570,6 +5558,7 @@ var DeepdotsPopups = class {
     this.showProgressBar = void 0;
     /** CSS del host inyectado al final de los estilos del popup. */
     this.surveyCss = void 0;
+    this.cspNonce = void 0;
     /** Identidad + sesión (Fase 1 tracking). Null hasta init(). */
     this.tracking = null;
     /** Capa de analytics (canal separado del feedback). Null hasta init(). */
@@ -5642,6 +5631,7 @@ var DeepdotsPopups = class {
     this.renderChrome = config.renderChrome ?? true;
     this.showProgressBar = config.showProgressBar;
     this.surveyCss = config.surveyCss;
+    this.cspNonce = config.cspNonce;
     this.onFeedbackSession = config.onFeedbackSession;
     this.config = {
       apiKey: config.apiKey || void 0,
@@ -5742,7 +5732,6 @@ var DeepdotsPopups = class {
     this.initialized = true;
     this.log("SDK initialized", this.config);
     if (this.renderer.init) this.renderer.init();
-    this.setupPopupContainer();
     this.awaitingPopups = Boolean(this.config.apiKey && this.baseUrl);
     this.fetchPopupsFromServer().then((defs) => {
       if (!defs) this.dropPendingTriggers();
@@ -6713,27 +6702,6 @@ var DeepdotsPopups = class {
       listeners.delete(listener);
     }
   }
-  /** Setup popup container element */
-  setupPopupContainer() {
-    if (typeof document === "undefined") {
-      return;
-    }
-    this.popupContainer = document.createElement("div");
-    this.popupContainer.id = "deepdots-popup-container";
-    this.popupContainer.style.cssText = `
-          position: fixed;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: none;
-          z-index: 999999;
-          background: rgba(0, 0, 0, 0.5);
-          justify-content: center;
-          align-items: center;
-        `;
-    document.body.appendChild(this.popupContainer);
-  }
   /** Render the popup UI */
   renderPopup(surveyId, productId, actions, style, title) {
     const userId = this.tracking?.getUserId() ?? this.config?.userId;
@@ -6741,54 +6709,25 @@ var DeepdotsPopups = class {
     const miniService = this.analytics?.getMiniService() ?? void 0;
     const analyticsFeedbackSessionId = this.analyticsFeedbackSessionId;
     this.log("tracking \xB7 survey identity \u2192", { userId: userId ?? null, sessionId: sessionId ?? null, miniService: miniService ?? null, analyticsFeedbackSessionId: analyticsFeedbackSessionId ?? null });
-    if (this.renderer) {
-      this.renderer.show(
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        this.renderChrome,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-      return;
-    }
-    if (!this.popupContainer) return;
-    const container = this.popupContainer;
-    void Promise.resolve().then(() => (init_renderPopup(), renderPopup_exports)).then(({ renderPopup: renderPopup2 }) => {
-      renderPopup2(
-        container,
-        surveyId,
-        productId,
-        actions,
-        (type, id, payload) => this.emitEvent(type, id, payload),
-        () => this.hidePopup(),
-        this.env,
-        userId,
-        style,
-        sessionId,
-        miniService,
-        analyticsFeedbackSessionId,
-        { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language }
-      );
-    });
+    this.renderer.show(
+      surveyId,
+      productId,
+      actions,
+      (type, id, payload) => this.emitEvent(type, id, payload),
+      () => this.hidePopup(),
+      this.env,
+      userId,
+      style,
+      sessionId,
+      miniService,
+      analyticsFeedbackSessionId,
+      this.renderChrome,
+      { title, showProgressBar: this.showProgressBar, surveyCss: this.surveyCss, language: this.language, cspNonce: this.cspNonce }
+    );
   }
   /** Hide the popup */
   hidePopup() {
-    if (this.renderer) {
-      this.renderer.hide();
-      return;
-    }
-    if (this.popupContainer) {
-      this.popupContainer.style.display = "none";
-      this.popupContainer.innerHTML = "";
-    }
+    this.renderer.hide();
   }
   /** Emit an event */
   emitEvent(type, surveyId, data) {