@magicfeedback/popup-sdk 1.0.13 → 1.0.14

package/dist/index.mjs

@@ -2873,9 +2873,26 @@ function ensureResponsiveStyles(_popup) {
   `;
   document.head.appendChild(style);
 }
-async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId) {
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style) {
   let surveyCompletedEmitted = false;
   let stylesInjected = false;
+  const isDark = style?.theme === "dark";
+  const theme = {
+    popupBg: isDark ? "#1e1e1e" : "#fff",
+    textPrimary: isDark ? "#f0f0f0" : "#111",
+    closeBtnHoverBg: isDark ? "rgba(255,255,255,0.10)" : "rgba(0,0,0,0.06)",
+    closeBtnHoverColor: isDark ? "#fff" : "#000000"
+  };
+  const positionMap = {
+    "center": { justifyContent: "center", alignItems: "center", background: "rgba(0,0,0,0.5)" },
+    "bottom": { justifyContent: "center", alignItems: "flex-end", padding: "16px", background: "transparent" },
+    "bottom-right": { justifyContent: "flex-end", alignItems: "flex-end", padding: "16px", background: "transparent" },
+    "bottom-left": { justifyContent: "flex-start", alignItems: "flex-end", padding: "16px", background: "transparent" },
+    "top": { justifyContent: "center", alignItems: "flex-start", padding: "16px", background: "transparent" },
+    "top-right": { justifyContent: "flex-end", alignItems: "flex-start", padding: "16px", background: "transparent" },
+    "top-left": { justifyContent: "flex-start", alignItems: "flex-start", padding: "16px", background: "transparent" }
+  };
+  const pos = positionMap[style?.position ?? "center"] ?? positionMap["center"];
   const popup = document.createElement("div");
   popup.className = "deepdots-popup";
   popup.style.cssText = `
@@ -2883,7 +2900,7 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
-      background: #fff;
+      background: ${theme.popupBg};
       border-radius: 8px;
       padding: 24px;
       box-shadow: 0 4px 6px rgba(0,0,0,0.1);
@@ -2912,18 +2929,18 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
       justify-content:center;
       border-radius: 8px;
       cursor:pointer;
-      color:#111;
+      color:${theme.textPrimary};
       padding:4px;
       transition: color .15s ease, transform .15s ease, background .15s ease;
       box-shadow: none !important;
     `;
   closeBtn.onmouseenter = () => {
-    closeBtn.style.color = "#000000";
-    closeBtn.style.background = "rgba(0,0,0,0.06)";
+    closeBtn.style.color = theme.closeBtnHoverColor;
+    closeBtn.style.background = theme.closeBtnHoverBg;
     closeBtn.style.transform = "scale(1.06)";
   };
   closeBtn.onmouseleave = () => {
-    closeBtn.style.color = "#111";
+    closeBtn.style.color = theme.textPrimary;
     closeBtn.style.background = "transparent";
     closeBtn.style.transform = "scale(1)";
   };
@@ -3130,6 +3147,10 @@ async function renderPopup(container, surveyId, productId, actions, emit, onClos
   container.innerHTML = "";
   container.appendChild(popup);
   container.style.display = "flex";
+  container.style.justifyContent = pos.justifyContent;
+  container.style.alignItems = pos.alignItems;
+  container.style.background = pos.background;
+  if (pos.padding) container.style.padding = pos.padding;
   function setLoading(isLoading) {
     spinnerEl.style.display = isLoading ? "flex" : "none";
     if (!isLoading) {
@@ -3559,12 +3580,12 @@ var BrowserPopupRenderer = class {
       document.body.appendChild(this.container);
     }
   }
-  show(surveyId, productId, actions, emit, onClose, env = "production", userId) {
+  show(surveyId, productId, actions, emit, onClose, env = "production", userId, style) {
     if (this.visible) return;
     if (!this.container || !document.body.contains(this.container)) this.init();
     if (!this.container) return;
     this.visible = true;
-    renderPopup(this.container, surveyId, productId, actions, emit, onClose, env, userId);
+    renderPopup(this.container, surveyId, productId, actions, emit, onClose, env, userId, style);
   }
   hide() {
     this.visible = false;
@@ -3674,7 +3695,7 @@ var DeepdotsPopups = class {
       this.log("Showing popup (definition)", def);
       this.surveyToPopupId.set(def.surveyId, def.id);
       this.lastShown.set(def.id, Date.now());
-      this.renderPopup(def.surveyId, def.productId, def.actions);
+      this.renderPopup(def.surveyId, def.productId, def.actions, def.style);
       this.emitEvent("popup_shown", def.surveyId, { popupId: def.id });
     } else {
       const opt = options;
@@ -4066,7 +4087,7 @@ var DeepdotsPopups = class {
     document.body.appendChild(this.popupContainer);
   }
   /** Render the popup UI */
-  renderPopup(surveyId, productId, actions) {
+  renderPopup(surveyId, productId, actions, style) {
     const userId = this.config?.userId;
     if (this.renderer) {
       this.renderer.show(
@@ -4076,7 +4097,8 @@ var DeepdotsPopups = class {
         (type, id, payload) => this.emitEvent(type, id, payload),
         () => this.hidePopup(),
         this.env,
-        userId
+        userId,
+        style
       );
       return;
     }
@@ -4089,7 +4111,8 @@ var DeepdotsPopups = class {
       (type, id, payload) => this.emitEvent(type, id, payload),
       () => this.hidePopup(),
       this.env,
-      userId
+      userId,
+      style
     );
   }
   /** Hide the popup */