@magicfeedback/popup-sdk 1.14.0 → 1.15.0

package/README.md

@@ -143,6 +143,11 @@ Config fields:
   or positioning, so the host mounts its own `Modal`/container and controls the styling. This
   avoids a "double modal" when the host already wraps the WebView. The survey stays fully
   functional (message bridge, form, nav buttons, close). No effect on the web DOM popup.
+- `cspNonce?: string` — for pages with a strict Content-Security-Policy (`style-src 'nonce-…'`
+  without `'unsafe-inline'`). The popup puts it on every `<style>` it injects into `<head>`
+  (survey stylesheet, spinner, responsive rules, `surveyCss`, `@font-face`); without it the
+  browser blocks them and the survey renders unstyled. Pass the same nonce your CSP header
+  uses for that response (in Angular, the `CSP_NONCE` token). Web only.
 - `language?: string` — BCP-47 tag (`'en'`, `'en-US'`, …) used for popup language
   segmentation (`segments.lang`) and for the analytics context. If omitted it is
   auto-detected from `navigator.language`, falling back to the `Intl` locale (which is
@@ -534,7 +539,7 @@ interface DeepdotsEvent {
 - The default browser renderer uses Deepdots forms and applies button labels from `actions.accept`, `actions.start`, `actions.back`, and `actions.complete`.
 - `title`, `message`, and `style` belong to the popup definition contract, but the current browser renderer focuses on the embedded form and does not render those fields as standalone popup copy/layout controls.
 - `actions.decline` is accepted in the definition shape, but the current browser renderer does not render a dedicated decline button or enforce `decline.cooldownDays`.
-- In browser mode, the SDK creates `#deepdots-popup-container` and injects the shared popup stylesheet from jsDelivr.
+- In browser mode, the default renderer creates a single `#deepdots-popup-container` on `document.body` and injects the popup and survey stylesheets into `<head>` (bundled with the SDK, no external request). With a custom renderer (`setRenderer`) the SDK adds no container of its own.
 
 ## Running The Examples Locally
 

package/dist/index.d.mts

@@ -332,6 +332,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;
 }
 interface DeepdotsConfig {
     /** API key for authentication */
@@ -508,6 +517,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 */
@@ -727,7 +742,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;
     /**
@@ -752,6 +766,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(). */
@@ -1064,8 +1079,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/index.d.ts

@@ -332,6 +332,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;
 }
 interface DeepdotsConfig {
     /** API key for authentication */
@@ -508,6 +517,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 */
@@ -727,7 +742,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;
     /**
@@ -752,6 +766,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(). */
@@ -1064,8 +1079,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/index.js

@@ -5628,30 +5628,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. */
@@ -5659,14 +5664,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 {
@@ -5699,32 +5700,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;
@@ -5734,6 +5723,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);
@@ -5785,7 +5775,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";
@@ -5901,11 +5891,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";
@@ -8393,8 +8383,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;
     /**
@@ -8425,6 +8413,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(). */
@@ -8497,6 +8486,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,
@@ -8597,7 +8587,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();
@@ -9568,27 +9557,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;
@@ -9596,54 +9564,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) {