@magicfeedback/popup-sdk 1.0.13 → 1.0.15

package/dist/assets/assets/style.css

@@ -101,8 +101,8 @@
     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;
 }
@@ -127,12 +127,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;
@@ -145,17 +145,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;
@@ -170,7 +170,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);
@@ -233,7 +233,7 @@ select {
     background-color: #cadff8;
 }
 
-input[type="radio"] {
+.deepdots-popup input[type="radio"] {
     padding: 20px;
     margin: 10px 0 10px 15px;
     width: 40px;
@@ -242,12 +242,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 */
 }
 

package/dist/index.d.mts

@@ -114,8 +114,9 @@ interface PopupActions {
 /** Estilos configurables del popup */
 interface PopupStyle {
     theme: 'light' | 'dark';
-    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
-    imageUrl: string | null;
+    position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
+    /** @deprecated No usado por el SDK — solo se conserva por compatibilidad con la API */
+    imageUrl?: string | null;
 }
 /** Segmentos o targeting para mostrar el popup */
 interface PopupSegments {
@@ -141,7 +142,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle): void;
     /** Ocultar popup */
     hide(): void;
 }

package/dist/index.d.ts

@@ -114,8 +114,9 @@ interface PopupActions {
 /** Estilos configurables del popup */
 interface PopupStyle {
     theme: 'light' | 'dark';
-    position: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'center';
-    imageUrl: string | null;
+    position: 'bottom' | 'bottom-right' | 'bottom-left' | 'top' | 'top-right' | 'top-left' | 'center';
+    /** @deprecated No usado por el SDK — solo se conserva por compatibilidad con la API */
+    imageUrl?: string | null;
 }
 /** Segmentos o targeting para mostrar el popup */
 interface PopupSegments {
@@ -141,7 +142,7 @@ interface PopupRenderer {
     /** Preparar recursos si aplica */
     init?(): void;
     /** Mostrar popup */
-    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string): void;
+    show(surveyId: string, productId: string, actions: PopupActions | undefined, emit: (type: DeepdotsEventType, surveyId: string, data?: Record<string, unknown>) => void, onClose: () => void, env?: string, userId?: string, style?: PopupStyle): void;
     /** Ocultar popup */
     hide(): void;
 }

package/dist/index.js

@@ -2077,8 +2077,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;
 }
@@ -2103,12 +2103,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;
@@ -2121,17 +2121,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;
@@ -2146,7 +2146,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);
@@ -2209,7 +2209,7 @@ select {
     background-color: #cadff8;
 }
 
-input[type="radio"] {
+.deepdots-popup input[type="radio"] {
     padding: 20px;
     margin: 10px 0 10px 15px;
     width: 40px;
@@ -2218,12 +2218,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 */
 }
 
@@ -2887,9 +2887,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 = `
@@ -2897,7 +2914,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);
@@ -2926,18 +2943,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)";
   };
@@ -3144,6 +3161,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) {
@@ -3573,12 +3594,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;
@@ -3688,7 +3709,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;
@@ -4080,7 +4101,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(
@@ -4090,7 +4111,8 @@ var DeepdotsPopups = class {
         (type, id, payload) => this.emitEvent(type, id, payload),
         () => this.hidePopup(),
         this.env,
-        userId
+        userId,
+        style
       );
       return;
     }
@@ -4103,7 +4125,8 @@ var DeepdotsPopups = class {
       (type, id, payload) => this.emitEvent(type, id, payload),
       () => this.hidePopup(),
       this.env,
-      userId
+      userId,
+      style
     );
   }
   /** Hide the popup */