@magicfeedback/popup-sdk 1.0.12 → 1.0.14

package/README.md

@@ -1,6 +1,6 @@
-# MagicFeedback Popup SDK
+# Deepdots Popup SDK
 
-TypeScript SDK for loading and displaying MagicFeedback surveys as popups in browser apps.
+TypeScript SDK for loading and displaying Deepdots surveys as popups in browser apps.
 
 Package name: `@magicfeedback/popup-sdk`
 
@@ -333,7 +333,7 @@ interface DeepdotsEvent {
 - `segments.path` is the only segment currently evaluated by the SDK runtime.
 - `exit` triggers work across anchor navigation, hash navigation, `history.pushState()`, and `history.replaceState()`.
 - Pending `exit` popups are stored in `sessionStorage` until they are shown or discarded.
-- The default browser renderer uses MagicFeedback forms and applies button labels from `actions.accept`, `actions.start`, `actions.back`, and `actions.complete`.
+- 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.

package/dist/assets/assets/style.css

@@ -50,22 +50,16 @@
 }
 
 .magicfeedback-label {
-    font-weight: 600;
-    font-family: inherit;
-    font-size: 1.1rem;
-    color: #212529;
-    text-align: start;
-    word-wrap: break-word;
-    white-space: normal;
-}
-.magicfeedback-sublabel{
+    margin-bottom: 25px;
+    margin-top: 20px;
     font-weight: 400;
     font-family: inherit;
-    font-size: 1rem;
-    color: #6c757d;
+    font-size: 1.2rem;
+    color: #212529;
     text-align: start;
     word-wrap: break-word;
     white-space: normal;
+
 }
 
 .magicfeedback-checkbox {
@@ -90,8 +84,8 @@
     justify-content: flex-start;
     flex-wrap: wrap;
     width: 100%;
-    margin-top: 10px;
-    gap: 10px;
+    margin-right: 5px;
+    padding: 5px;
 }
 
 .magicfeedback-checkbox-container,
@@ -100,12 +94,11 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    margin: 0 2px;
+    margin: 5px;
     padding: 5px 0;
     background-color: #fff;
     border-radius: 5px;
     box-shadow: 0 0 3px #ccc;
-    width: calc(100% - 10px);
 }
 
 input::-webkit-outer-spin-button,
@@ -131,7 +124,7 @@ input::-webkit-inner-spin-button {
     font-size: 16px;
     color: #212529;
     text-align: start;
-    width: auto;
+    width: 100%;
 }
 
 p {
@@ -165,7 +158,7 @@ textarea,
 select {
     box-sizing: border-box;
     padding: 10px;
-    margin: 20px 0 10px 0;
+    margin: 10px 0;
     width: 100%;
     border: 2px solid #ccc; /* Default border color - you can customize this */
     border-radius: 5px;
@@ -409,7 +402,6 @@ input.error, select.error {
 
     margin: 15px 0;
     padding: 0;
-    padding-top: 45px !important;
 
     list-style: none;
     font-size: 1.5rem;
@@ -420,6 +412,23 @@ input.error, select.error {
     -ms-user-select: none;
 }
 
+/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
+   el 100% de la primera línea y los boxes bajan a la siguiente */
+.magicfeedback-rating-number-container--with-placeholder {
+    flex-wrap: wrap;
+    align-items: flex-start;
+}
+
+.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-placeholder {
+    width: 100%;
+    margin-bottom: 8px;
+}
+
+.magicfeedback-rating-number-container--with-placeholder .magicfeedback-rating-number-option {
+    width: auto;
+    flex: 1;
+}
+
 .magicfeedback-rating-number-option {
     display: flex;
     flex-direction: row;
@@ -538,7 +547,7 @@ input.error, select.error {
     .magicfeedback-rating-number-option {
         max-width: 100%;
         height: 55px;
-        margin: 5px;
+        margin: 5px 0;
     }
 }
 
@@ -637,7 +646,7 @@ input.error, select.error {
 .magicfeedback-success-message,
 .magicfeedback-info-message,
 .magicfeedback-start-message {
-    margin: 10px 5px;
+    margin: 35px 5px;
 }
 
 .magicfeedback-success-message p,

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): 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;
 }
@@ -190,6 +191,7 @@ declare class DeepdotsPopups {
     triggerEvent(eventName: string): void;
     private showDefinition;
     private shouldShow;
+    private matchesSegmentsLang;
     private matchesSegmentsPath;
     private evaluateCooldown;
     private evaluateLegacyCondition;

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): 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;
 }
@@ -190,6 +191,7 @@ declare class DeepdotsPopups {
     triggerEvent(eventName: string): void;
     private showDefinition;
     private shouldShow;
+    private matchesSegmentsLang;
     private matchesSegmentsPath;
     private evaluateCooldown;
     private evaluateLegacyCondition;