@magicfeedback/popup-sdk 1.0.13 → 1.0.15

package/dist/index.mjs

@@ -2063,8 +2063,8 @@ var style_default = `.magicfeedback-container {
     box-shadow: 0 0 3px #ccc;
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+.deepdots-popup input::-webkit-outer-spin-button,
+.deepdots-popup input::-webkit-inner-spin-button {
     -webkit-appearance: none;
     -moz-appearance: textfield;
 }
@@ -2089,12 +2089,12 @@ input::-webkit-inner-spin-button {
     width: 100%;
 }
 
-p {
+.deepdots-popup p {
     margin-bottom: 0px;
     font-size: 12px;
 }
 
-h2 {
+.deepdots-popup h2 {
     line-height: 1.66;
     margin: 0;
     padding: 0;
@@ -2107,17 +2107,17 @@ h2 {
     margin-bottom: 40px;
 }
 
-h6 {
+.deepdots-popup h6 {
     margin-bottom: 1rem;
 }
 
-input[type="date"],
-input[type="text"],
-input[type="number"],
-input[type="email"],
-input[type="password"],
-textarea,
-select {
+.deepdots-popup input[type="date"],
+.deepdots-popup input[type="text"],
+.deepdots-popup input[type="number"],
+.deepdots-popup input[type="email"],
+.deepdots-popup input[type="password"],
+.deepdots-popup textarea,
+.deepdots-popup select {
     box-sizing: border-box;
     padding: 10px;
     margin: 10px 0;
@@ -2132,7 +2132,7 @@ select {
     -webkit-appearance: none;
 }
 
-select {
+.deepdots-popup select {
     background-image: linear-gradient(45deg, transparent 50%, gray 50%),
     linear-gradient(135deg, gray 50%, transparent 50%),
     linear-gradient(to right, #ccc, #ccc);
@@ -2195,7 +2195,7 @@ select {
     background-color: #cadff8;
 }
 
-input[type="radio"] {
+.deepdots-popup input[type="radio"] {
     padding: 20px;
     margin: 10px 0 10px 15px;
     width: 40px;
@@ -2204,12 +2204,12 @@ input[type="radio"] {
 }
 
 /* Style for focused input/select */
-input:focus, select:focus {
+.deepdots-popup input:focus, .deepdots-popup select:focus {
     border-color: #4CAF50; /* Highlight color when focused - you can customize this */
 }
 
 /* Style for invalid input (example: validation error) */
-input.error, select.error {
+.deepdots-popup input.error, .deepdots-popup select.error {
     border-color: #ff3333; /* Red color for error state - you can customize this */
 }
 
@@ -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 */