@magicfeedback/popup-sdk 1.1.0 → 1.1.1

package/dist/renderPopup-7GGKR5BY.mjs

@@ -0,0 +1,1376 @@
+import {
+  buildSurveyIdentity
+} from "./chunk-M6PEFLLQ.mjs";
+
+// src/ui/renderPopup.ts
+import magicfeedback from "@magicfeedback/native";
+
+// src/assets/style.css
+var style_default = `.magicfeedback-container {
+    width: 100%;
+}
+
+
+.magicfeedback-success-message,
+.magicfeedback-info-message,
+.magicfeedback-start-message,
+.magicfeedback-container{
+    animation-duration: 0.5s;
+    animation-name: animate-fade;
+    animation-delay: 0.25s;
+    animation-fill-mode: backwards;
+
+    font-style: normal;
+    text-align: justify;
+    font-weight: 400;
+    font-size: 1.2rem;
+    color: #475569;
+    line-height: 1.5;
+}
+
+@keyframes animate-fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
+
+.magicfeedback-form {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 100%;
+}
+.magicfeedback-questions {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    width: 100%;
+}
+
+.magicfeedback-div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    margin-bottom: 10px;
+    width: 100%;
+}
+
+.magicfeedback-label {
+    margin-bottom: 25px;
+    margin-top: 20px;
+    font-weight: 400;
+    font-family: inherit;
+    font-size: 1.2rem;
+    color: #212529;
+    text-align: start;
+    word-wrap: break-word;
+    white-space: normal;
+
+}
+
+.magicfeedback-checkbox {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+.magicfeedback-checkbox-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+.magicfeedback-radio {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-right: 5px;
+    padding: 5px;
+}
+
+.magicfeedback-checkbox-container,
+.magicfeedback-radio-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px;
+    padding: 5px 0;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 3px #ccc;
+}
+
+.deepdots-popup input::-webkit-outer-spin-button,
+.deepdots-popup input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    -moz-appearance: textfield;
+}
+
+.magicfeedback-checkbox input[type="checkbox"] {
+    margin-right: 5px;
+    margin-left: 5px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+
+
+.magicfeedback-checkbox label,
+.magicfeedback-radio-container label {
+    margin-left: 5px;
+    font-weight: 400;
+    font-family: inherit;
+    font-size: 16px;
+    color: #212529;
+    text-align: start;
+    width: 100%;
+}
+
+.deepdots-popup p {
+    margin-bottom: 0px;
+    font-size: 12px;
+}
+
+.deepdots-popup h2 {
+    line-height: 1.66;
+    margin: 0;
+    padding: 0;
+    font-weight: 900;
+    color: #222;
+    font-family: 'Montserrat';
+    font-size: 18px;
+    text-transform: uppercase;
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+.deepdots-popup h6 {
+    margin-bottom: 1rem;
+}
+
+.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;
+    width: 100%;
+    border: 2px solid #ccc; /* Default border color - you can customize this */
+    border-radius: 5px;
+    font-size: 18px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    min-height: 50px;
+    font-family: inherit;
+    -webkit-appearance: none;
+}
+
+.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);
+    background-position: calc(100% - 20px) calc(1em + 2px),
+    calc(100% - 15px) calc(1em + 2px),
+    calc(100% - 2.5em) 0.5em;
+    background-size: 5px 5px,
+    5px 5px,
+    1px 1.5em;
+    background-repeat: no-repeat;
+}
+
+.magicfeedback-boolean-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px 0;
+    width: 100%;
+}
+
+.magicfeedback-boolean-container label {
+    margin-left: 10px;
+    font-weight: 400;
+    font-size: 16px;
+    width: 100%;
+    padding-top: 5px;
+}
+
+.magicfeedback-boolean-option {
+    margin-right: 10px;
+    margin-left: 10px;
+    width: 100%;
+    height: 38px;
+    border-radius: 8px;
+    font-size: 16px;
+    cursor: pointer;
+    border: 1px solid #ced4da !important;
+}
+
+.magicfeedback-boolean-option label {
+    font-weight: 400;
+    font-size: 16px;
+    color: #475569;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: inherit;
+}
+
+.magicfeedback-boolean-option input[type=radio] + label:hover {
+    color: #007bff;
+}
+
+.magicfeedback-boolean-option input[type=radio]:checked + label {
+    color: #007bff;
+    background-color: #cadff8;
+}
+
+.deepdots-popup input[type="radio"] {
+    padding: 20px;
+    margin: 10px 0 10px 15px;
+    width: 40px;
+    background-color: #fff;
+    box-shadow: none;
+}
+
+/* Style for focused input/select */
+.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) */
+.deepdots-popup input.error, .deepdots-popup select.error {
+    border-color: #ff3333; /* Red color for error state - you can customize this */
+}
+
+.magicfeedback-action-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    width: 100%;
+}
+
+.magicfeedback-action-container .magicfeedback-submit {
+    cursor: pointer;
+    padding: 10px;
+    margin: 10px 0;
+    width: 100px;
+    border-radius: 8px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    background-color: #1E293B;
+    color: white;
+}
+
+.magicfeedback-action-container .magicfeedback-back {
+    cursor: pointer;
+    padding: 10px;
+    margin: 10px 0;
+    width: 100px;
+    border: 0;
+    border-radius: 8px;
+    font-size: 16px;
+    outline: none;
+    transition: border-color 0.3s ease;
+    background-color: transparent;
+    color: #212529;
+}
+
+
+
+/* Rating styles */
+.magicfeedback-rating {
+    width: 100%;
+}
+
+.magicfeedback-rating-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    align-items: center;
+
+    margin: 15px 5px;
+    padding: 0;
+
+    list-style: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.magicfeedback-rating-placeholder-value,
+.magicfeedback-rating-placeholder{
+    text-align: center;
+    align-content: center;
+    justify-content: center;
+    text-wrap: wrap;
+}
+
+.magicfeedback-rating-option {
+    margin: 0 0.5rem;
+    padding: 0;
+}
+
+@media (max-width: 1024px) {
+    .magicfeedback-rating-option {
+        margin: 10px 0;
+        padding: 0;
+        width: 20%;
+        display: flex;
+        justify-content: center;
+    }
+
+    .magicfeedback-rating-placeholder-value {
+        font-size: 0.75rem;
+        margin-bottom: 1px;
+    }
+    .magicfeedback-rating-placeholder{
+        justify-content: center;
+    }
+
+    .magicfeedback-rating-container {
+        flex-wrap: wrap;
+        justify-content: flex-start;
+    }
+}
+
+
+.magicfeedback-rating-option-label-container {
+    display: flex;
+    flex-direction: column;
+}
+
+
+.magicfeedback-rating-option-label-container label {
+    display: inline-block;
+    text-align: center;
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 18px;
+    color: #475569;
+}
+
+.magicfeedback-rating-option-label-container input[type=radio] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+/* IMAGE STYLES */
+.magicfeedback-rating-option-label-container input[type=radio] + img {
+    cursor: pointer;
+    height: 48px;
+    width: 48px;
+}
+
+/* LABEL STYLES */
+.magicfeedback-rating-option-label-container input[type=radio] + label {
+    cursor: pointer;
+}
+
+/* CHECKED STYLES */
+.magicfeedback-rating-option-label-container input[type=radio]:checked + img {
+    box-shadow: #007bff 0px 1px 4px, #007BFFA0 0px 0px 0px 2px;
+    border-radius: 50%;
+}
+
+.magicfeedback-rating-number {
+    width: 100%;
+}
+.magicfeedback-rating-container,
+.magicfeedback-rating-number-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    margin: 15px 0;
+    padding: 0;
+
+    list-style: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Cuando hay placeholders (Very bad / Very good), el placeholder ocupa
+   el 100% de la primera l\xEDnea 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;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 5px;
+    padding: 0;
+    list-style: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    width: 100%;
+}
+
+.magicfeedback-rating-number-option-row{
+    max-width: 100% !important;
+}
+
+.magicfeedback-rating-number-top-placeholder,
+.magicfeedback-rating-number-bottom-placeholder{
+    text-align: center !important;
+    align-content: center;
+    justify-content: center;
+    text-wrap: wrap;
+
+    font-size: 15px;
+    color: #475569;
+
+    width: 100%;
+    margin: auto;
+}
+
+@media (min-width: 650px) {
+    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-ltr:first-child,
+    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-rtl:last-child {
+        margin-left: 0;
+        width: calc(100% - 10px);
+    }
+
+    .magicfeedback-rating-number-option-row +.magicfeedback-rating-number-container-rtl:first-child,
+    .magicfeedback-rating-number-option-row + +.magicfeedback-rating-number-container-ltr:last-child {
+        margin-right: 0;
+        width: calc(100% - 10px);
+    }
+}
+
+
+.magicfeedback-rating-number-option-label-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+.magicfeedback-rating-number-option-label-container label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0 10px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #475569;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+    min-height: 50px;
+    text-align: center;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid #ced4da;
+    background-color: rgba(246, 246, 246, 0.3);
+    transition: background-color 0.15s ease-in-out;
+}
+
+.magicfeedback-rating-number-option-label-container input[type=radio] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.magicfeedback-rating-number-option-label-container input[type=radio] + label {
+    cursor: pointer;
+}
+
+.magicfeedback-rating-number-option-label-container input[type=radio] + label:hover,
+.magicfeedback-rating-number-option-label-container input[type=radio]:checked + label {
+    color: #007bff;
+    border: 1px solid #007bff;
+    background-color: rgba(86, 168, 253, 0.29);
+}
+
+.magicfeedback-rating-number-container-column{
+    align-items: flex-start !important;
+}
+
+@media (max-width: 650px) {
+    .magicfeedback-rating-number-container-ltr {
+        justify-content: center;
+        flex-wrap: wrap;
+    }
+
+    .magicfeedback-rating-number-container-rtl {
+        justify-content: center;
+        flex-wrap: wrap-reverse;
+    }
+
+    .magicfeedback-rating-number-option {
+        max-width: 100%;
+        height: 55px;
+        margin: 5px 0;
+    }
+}
+
+.magicfeedback-rating-star {
+    width: 100%;
+}
+
+.magicfeedback-rating-star-container {
+    display: flex !important;
+    flex-direction: row !important;
+    justify-content: center !important;
+    align-items: center !important;
+    flex-wrap: wrap;
+    margin: 15px 5px;
+    padding: 0;
+    list-style: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star {
+    float: right;
+    width: 1em;
+    overflow: hidden;
+    white-space: nowrap;
+    cursor: pointer;
+    font-size: 30px;
+    color: #ccc;
+    margin: 0 10px;
+}
+
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover,
+.magicfeedback-rating-star-option:not(:checked) > .rating__star:hover ~ span {
+    color: #deb217 !important;
+}
+
+.magicfeedback-rating-star-selected {
+    color: #ffc700 !important;
+}
+
+
+/* Style for multiple choice image */
+.magicfeedback-image-option-label-container:hover {
+    cursor: pointer;
+    border: 0 !important;
+}
+
+.magicfeedback-image-option-label-container input[type=radio]:checked + img,
+.magicfeedback-image-option-label-container input[type=checkbox]:checked + img {
+    border: 1px solid #007bff !important;
+    box-shadow: 0 0 3px #007bff !important;
+}
+
+.magicfeedback-image-option-label-container input[type=radio] + img,
+.magicfeedback-image-option-label-container input[type=checkbox] + img {
+    border: 1px solid transparent !important;
+}
+
+.magicfeedback-image-option-label-container{
+    margin: 10px !important;
+    height: calc(100% - 20px) !important;
+    width: calc(100% - 20px) !important;
+}
+
+.magicfeedback-multiple-choice-image-option {
+    display: flex;
+    height: auto !important;
+    box-shadow: 0 0 3px #ccc;
+}
+
+.magicfeedback-multiple-choice-image-label {
+    font-size: 1rem;
+}
+
+.magicfeedback-consent-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    margin: 10px 0;
+    width: 100%;
+}
+
+.magicfeedback-consent-container label {
+    margin-left: 10px;
+}
+
+.magicfeedback-start-message-container {
+    /* ... add your start message container styles here ... */
+}
+
+.magicfeedback-success-message,
+.magicfeedback-info-message,
+.magicfeedback-start-message {
+    margin: 35px 5px;
+}
+
+.magicfeedback-success-message p,
+.magicfeedback-info-message p,
+.magicfeedback-start-message p {
+    font-style: normal;
+    text-align: start;
+    font-weight: 400;
+    font-size: 16px;
+    color: #475569;
+    line-height: 1.5;
+}
+
+.magicfeedback-success-message img,
+.magicfeedback-info-message img,
+.magicfeedback-start-message img {
+    width: 400px;
+    max-width: 80%;
+    height: auto;
+    margin: 10px auto;
+}
+
+.magicfeedback-counter,
+.magicfeedback-point-system-total {
+    margin: 10px 0 0 0 !important;
+    display: flex !important;
+    justify-content: right !important;
+    align-items: center !important;
+    width: 100%;
+}
+
+.magicfeedback-skip-container {
+    background-color: transparent !important;
+    border: 0 !important;
+    color: #999999FF !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: pointer !important;
+    font-size: 0.5em !important;
+    font-weight: 400 !important;
+    box-shadow: 0 0 0 !important;
+
+    &:hover {
+        color: #0066ff;
+    }
+}
+
+.magicfeedback-skip-container input[type=checkbox] {
+    border-color: #999999FF !important;
+    border: 0 !important;
+    cursor: pointer !important;
+
+}
+
+.magicfeedback-multi-question-matrix,
+.magicfeedback-point-system,
+.magicfeedback-priority-list {
+    width: 100% !important;
+}
+
+.magicfeedback-multi-question-matrix-container,
+.magicfeedback-point-system-container,
+.magicfeedback-priority-list-container {
+    width: 100% !important;
+    overflow-x: auto;
+}
+
+.magicfeedback-point-system-list,
+.magicfeedback-priority-list-list,
+.magicfeedback-multi-question-matrix-table {
+    width: 100% !important;
+    padding: 0 !important;
+    overflow-x: auto;
+}
+
+.magicfeedback-multi-question-matrix {
+    position: relative !important;
+}
+
+.magicfeedback-multi-question-matrix-container {
+    overflow: auto !important;
+    padding-bottom: 10px;
+}
+
+.magicfeedback-multi-question-matrix-label{
+    text-align: left !important;
+}
+.magicfeedback-priority-list-item {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0 10px 10px;
+
+    border: 1px solid #ced4da;
+    border-radius: 5px;
+    margin: 10px 0 !important;
+}
+
+.magicfeedback-point-system-item {
+    height: 45px;
+    margin: 5px 0 !important;
+}
+
+.magicfeedback-point-system-item label,
+.magicfeedback-priority-list-item-label {
+    font-family: inherit;
+    font-size: 18px !important;
+    color: #212529;
+    text-align: start;
+    word-wrap: break-word;
+    white-space: normal;
+    padding: 0 10px 0 0;
+}
+
+.magicfeedback-point-system-input-container {
+    padding: 0 10px 0 0;
+    border-radius: 5px;
+    font-size: 14px;
+    border: 1px solid #ced4da;
+    height: 42px;
+    margin: auto 0;
+}
+
+.magicfeedback-multi-question-matrix-table thead {
+    margin-bottom: 20px;
+}
+
+.magicfeedback-multi-question-matrix-table th{
+    text-align: center;
+    font-weight: 400 !important;
+    font-size: 1rem !important;
+    padding: 0  10px !important;
+}
+
+.magicfeedback-multi-question-matrix-table th,
+.magicfeedback-multi-question-matrix-table td label,
+.magicfeedback-priority-list-arrow-up,
+.magicfeedback-priority-list-arrow-down {
+    font-style: normal !important;
+    font-weight: 400 !important;
+    font-size: 1rem !important;
+    color: #475569 !important;
+    cursor: pointer !important;
+    margin: 0 !important;
+    line-height: inherit;
+}
+
+.magicfeedback-multi-question-matrix-table tr {
+    align-items: center;
+    margin: 5px 0;
+}
+
+.magicfeedback-multi-question-matrix-row-tr{
+    border-radius: 5px;
+    margin: 10px 0 !important;
+}
+
+.magicfeedback-multi-question-matrix-row-tr:nth-child(odd) {
+    background-color: #f1f6f6; /* Light gray background for odd rows */
+}
+
+.magicfeedback-multi-question-matrix-row-tr:nth-child(even) {
+    background-color: #ffffff; /* White background for even rows */
+}
+
+.magicfeedback-multi-question-matrix-row-label {
+    text-align: left !important;
+}
+
+.magicfeedback-point-system-item span {
+    color: #475569 !important;
+}
+
+.magicfeedback-point-system-item input {
+    padding: 0;
+    margin: 0 !important;
+    width: auto !important;
+    min-width: 100px !important;
+    height: auto !important;
+    min-height: 42px;
+    cursor: pointer;
+    font-size: 14px;
+    text-align: center !important;
+}
+
+.magicfeedback-multi-question-matrix-table input {
+    margin: auto !important;
+    padding: 20px !important;
+    width: 100% !important;
+    height: 15px;
+    border: 1px solid #ced4da;
+    cursor: pointer;
+}
+
+.magicfeedback-image{
+    max-height: 400px !important;
+    height: auto !important;
+    max-width: 100% !important;
+    margin: 10px auto !important;
+}
+
+.magicfeedback-error{
+    margin-top: 5px;
+}`;
+
+// src/ui/renderPopup.ts
+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 ensureSpinnerStyles(_popup) {
+  if (document.getElementById("deepdots-spinner-styles")) return;
+  const style = document.createElement("style");
+  style.id = "deepdots-spinner-styles";
+  style.textContent = `
+    @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 = `
+    /* Responsive adjustments */
+    @media (max-width: 640px) {
+      .deepdots-popup {
+        width: calc(100% - 24px) !important;
+        max-width: calc(100% - 24px) !important;
+        height: auto !important;
+        max-height: 90vh !important;
+        border-radius: 12px !important;
+        padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)) 16px !important;
+        box-sizing: border-box;
+      }
+      .deepdots-popup .mf-spinner-circle { width: 32px; height: 32px; border-width: 4px; }
+      .deepdots-popup button { font-size: 16px !important; }
+      .deepdots-popup-header button { width:48px; height:48px; }
+      .deepdots-popup-header button svg { width:26px; height:26px; }
+      .deepdots-popup-footer { flex-direction: column-reverse !important; gap: 12px !important; }
+      .deepdots-popup-footer button { width: 100%; }
+    }
+    @media (max-width: 400px) {
+      .deepdots-popup { padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) 12px !important; }
+      .deepdots-popup-header button { width:48px; height:48px; }
+      .deepdots-popup-header button svg { width:26px; height:26px; }
+    }
+    @media (orientation: landscape) and (max-height: 480px) {
+      .deepdots-popup {
+        height: 100vh !important;
+        max-height: 100vh !important;
+        overflow-y: auto !important;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+}
+async function renderPopup(container, surveyId, productId, actions, emit, onClose, env = "production", userId, style, sessionId, miniService) {
+  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 = `
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      background: ${theme.popupBg};
+      border-radius: 8px;
+      padding: 24px;
+      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+      max-width: 600px;
+      width: 90%;
+      min-height: 200px;
+    `;
+  const header = document.createElement("div");
+  header.className = "deepdots-popup-header";
+  header.style.cssText = "display:flex; justify-content:flex-end; align-items:center; width:100%;";
+  const closeBtn = document.createElement("button");
+  closeBtn.type = "button";
+  closeBtn.setAttribute("aria-label", "Close popup");
+  closeBtn.innerHTML = `
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M6 6L18 18M6 18L18 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `;
+  closeBtn.style.cssText = `
+      background:transparent;
+      border:none;
+      width:32px;
+      height:32px;
+      display:flex;
+      align-items:center;
+      justify-content:center;
+      border-radius: 8px;
+      cursor:pointer;
+      color:${theme.textPrimary};
+      padding:4px;
+      transition: color .15s ease, transform .15s ease, background .15s ease;
+      box-shadow: none !important;
+    `;
+  closeBtn.onmouseenter = () => {
+    closeBtn.style.color = theme.closeBtnHoverColor;
+    closeBtn.style.background = theme.closeBtnHoverBg;
+    closeBtn.style.transform = "scale(1.06)";
+  };
+  closeBtn.onmouseleave = () => {
+    closeBtn.style.color = theme.textPrimary;
+    closeBtn.style.background = "transparent";
+    closeBtn.style.transform = "scale(1)";
+  };
+  closeBtn.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "close_icon" });
+    onClose();
+  };
+  header.appendChild(closeBtn);
+  ensureMagicFeedbackStyles(popup);
+  ensureSpinnerStyles(popup);
+  ensureResponsiveStyles(popup);
+  const containerContent = document.createElement("div");
+  containerContent.className = "deepdots-popup-container-conetent";
+  containerContent.style.cssText = `
+    display:flex; 
+    flex-direction:column; 
+    padding: 0 20px 12px 20px;
+      max-height: 80vh; /* l\xEDmite general del popup */
+      overflow: hidden; /* quita scroll del contenedor principal */
+`;
+  const main = document.createElement("div");
+  main.className = "deepdots-popup-main";
+  main.style.cssText = "display:flex; flex-direction:column; width:100%; max-height:80vh; overflow-y:auto;";
+  const formWrapper = document.createElement("div");
+  formWrapper.style.cssText = "width:100%; flex: 1 1 auto;";
+  const errorHint = document.createElement("div");
+  errorHint.className = "deepdots-error-hint";
+  errorHint.style.cssText = `
+      display: none;
+      margin: 12px 0 0 0;
+      padding: 10px 12px;
+      border-radius: 6px;
+      background: #FEF3C7; /* amber-100 */
+      color: #92400E; /* amber-700 */
+      border: 1px solid #FCD34D; /* amber-300 */
+      font-size: 13px;
+    `;
+  errorHint.setAttribute("role", "alert");
+  errorHint.setAttribute("aria-live", "polite");
+  const spinnerEl = document.createElement("div");
+  spinnerEl.className = "mf-spinner";
+  spinnerEl.setAttribute("role", "status");
+  spinnerEl.setAttribute("aria-label", "Loading survey");
+  spinnerEl.innerHTML = '<div class="mf-spinner-circle"></div>';
+  spinnerEl.style.cssText = "position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);";
+  const formDivId = `magicfeedback-form-${surveyId}`;
+  const formHost = document.createElement("div");
+  formHost.id = formDivId;
+  formHost.style.cssText = "width:100%; visibility:hidden;";
+  formWrapper.appendChild(spinnerEl);
+  formWrapper.appendChild(formHost);
+  main.appendChild(formWrapper);
+  main.appendChild(errorHint);
+  const footer = document.createElement("div");
+  footer.className = "deepdots-popup-footer";
+  footer.setAttribute("data-actions-wrapper", "true");
+  footer.style.cssText = "display:flex; flex-direction: row-reverse ;justify-content:space-between; align-items:center; gap:8px; margin-top:auto; width:100%; padding-top:16px;";
+  const backButton = document.createElement("button");
+  backButton.textContent = actions?.back ? actions.back.label : "Back";
+  backButton.style.cssText = `
+      background: transparent;
+      color: #333;
+      border: 1px solid #999;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  backButton.onmouseenter = () => {
+    backButton.style.filter = "brightness(0.9)";
+  };
+  backButton.onmouseleave = () => {
+    backButton.style.filter = "brightness(1)";
+  };
+  backButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "back" });
+    formInstance?.back?.();
+  };
+  const startButton = document.createElement("button");
+  startButton.textContent = actions?.start ? actions.start.label : "Start survey";
+  startButton.style.cssText = `
+      background: #1E293B;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  startButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "start_survey" });
+    formInstance?.startForm?.();
+  };
+  const closeButton = document.createElement("button");
+  closeButton.textContent = actions?.complete ? actions.complete.label : "Complete survey";
+  closeButton.style.cssText = `
+      background: #1E293B;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  closeButton.onmouseenter = () => {
+    closeButton.style.filter = "brightness(0.9)";
+  };
+  closeButton.onmouseleave = () => {
+    closeButton.style.filter = "brightness(1)";
+  };
+  closeButton.onclick = () => {
+    emit("popup_clicked", surveyId, { action: "complete" });
+    onClose();
+  };
+  const submitButton = document.createElement("button");
+  submitButton.textContent = actions?.accept ? actions.accept.label : "Send";
+  submitButton.style.cssText = `
+      background: #1E293B;
+      color: #fff;
+      border: none;
+      padding: 12px 24px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: filter .15s ease;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+    `;
+  submitButton.onclick = () => {
+    if (!surveyCompletedEmitted) {
+      emit("popup_clicked", surveyId, { action: "manual_send" });
+      formInstance?.send?.();
+    }
+  };
+  backButton.style.display = "none";
+  startButton.style.display = "none";
+  submitButton.style.display = "none";
+  closeButton.style.display = "none";
+  footer.appendChild(submitButton);
+  footer.appendChild(backButton);
+  footer.appendChild(closeButton);
+  footer.appendChild(startButton);
+  main.appendChild(footer);
+  containerContent.appendChild(main);
+  function updateButtons(state) {
+    backButton.style.display = "none";
+    startButton.style.display = "none";
+    submitButton.style.display = "none";
+    closeButton.style.display = "none";
+    backButton.style.width = "";
+    startButton.style.width = "";
+    submitButton.style.width = "";
+    closeButton.style.width = "";
+    switch (state) {
+      case "loading":
+        break;
+      case "start":
+        startButton.style.display = "inline-flex";
+        startButton.style.width = "100%";
+        break;
+      case "in_progress_first":
+        submitButton.style.display = "inline-flex";
+        submitButton.style.width = "";
+        setLoading(false);
+        break;
+      case "in_progress_next":
+        backButton.style.display = "inline-flex";
+        submitButton.style.display = "inline-flex";
+        setLoading(false);
+        break;
+      case "completed":
+        closeButton.style.display = "inline-flex";
+        closeButton.style.width = "100%";
+        setLoading(false);
+        break;
+      case "error":
+        setLoading(false);
+        break;
+    }
+  }
+  popup.appendChild(header);
+  popup.appendChild(containerContent);
+  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) {
+      formHost.style.visibility = "visible";
+    }
+    footer.style.display = isLoading ? "none" : "flex";
+    backButton.disabled = isLoading;
+    startButton.disabled = isLoading;
+    closeButton.disabled = isLoading;
+    submitButton.disabled = isLoading;
+    submitButton.style.opacity = isLoading ? "0.6" : "1";
+    submitButton.style.cursor = isLoading ? "not-allowed" : "pointer";
+    if (isLoading) {
+      updateButtons("loading");
+    }
+  }
+  setLoading(true);
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return;
+  }
+  let formInstance = null;
+  try {
+    if (!magicfeedback || typeof magicfeedback.form !== "function") {
+      console.warn("[MagicFeedback] form() no disponible. Fallback manual.");
+      setLoading(false);
+      return;
+    }
+    magicfeedback.init(
+      {
+        debug: true,
+        env: env === "production" ? "prod" : "dev"
+      }
+    );
+    const { profile, metadata } = buildSurveyIdentity(userId ?? null, sessionId ?? null, miniService ?? null);
+    formInstance = magicfeedback.form(surveyId, productId, profile, metadata);
+    const generateOptions = {
+      addButton: false,
+      getMetaData: true
+    };
+    generateOptions.onLoadedEvent = ({ formData }) => {
+      try {
+      } catch (e) {
+      }
+      const s = formData?.style;
+      if (s && !stylesInjected) {
+        stylesInjected = true;
+        if (s.boxBackgroundColor) {
+          popup.style.background = s.boxBackgroundColor;
+        }
+        if (s.contentAlign) {
+          main.style.justifyContent = s.contentAlign === "center" ? "center" : "flex-start";
+        }
+        if (s.buttonPrimaryColor) {
+          submitButton.style.background = s.buttonPrimaryColor;
+          submitButton.style.border = "none";
+          submitButton.style.color = "#fff";
+          startButton.style.background = s.buttonPrimaryColor;
+          startButton.style.border = "none";
+          startButton.style.color = "#fff";
+          closeButton.style.background = s.buttonPrimaryColor;
+          closeButton.style.border = "none";
+          closeButton.style.color = "#fff";
+        }
+        if (s.buttonSecondaryColor) {
+          backButton.style.background = "#fff";
+          backButton.style.color = s.buttonSecondaryColor;
+          backButton.style.border = `1px solid ${s.buttonSecondaryColor}`;
+        }
+        if (s.logo) {
+          if (!document.getElementById("deepdots-popup-logo")) {
+            const logoImg = document.createElement("img");
+            logoImg.id = "deepdots-popup-logo";
+            logoImg.src = s.logo;
+            logoImg.alt = "Logo";
+            logoImg.style.cssText = "max-height:40px; max-width:100%; object-fit:contain;";
+            if (s.logoSize) {
+              switch (s.logoSize) {
+                case "small":
+                  logoImg.style.maxHeight = "30px";
+                  break;
+                case "medium":
+                  logoImg.style.maxHeight = "50px";
+                  break;
+                case "large":
+                  logoImg.style.maxHeight = "70px";
+                  break;
+              }
+            }
+            if (s.logoPosition) {
+              switch (s.logoPosition) {
+                case "left":
+                  logoImg.style.margin = "0 16px 42px 0";
+                  logoImg.style.display = "block";
+                  logoImg.style.marginLeft = "0";
+                  break;
+                case "right":
+                  logoImg.style.margin = "0 0 42px 16px";
+                  logoImg.style.display = "block";
+                  logoImg.style.marginLeft = "auto";
+                  break;
+                case "center":
+                  logoImg.style.margin = "0 auto 42px auto";
+                  logoImg.style.display = "block";
+                  break;
+              }
+            }
+            containerContent.insertBefore(logoImg, main);
+          }
+        }
+        if (s.startMessage && s.startMessage !== "") {
+          console.log(s.startMessage);
+          updateButtons("start");
+        } else {
+          updateButtons("in_progress_first");
+        }
+      } else {
+        updateButtons("in_progress_first");
+      }
+      emit("popup_clicked", surveyId, { action: "loaded" });
+      setLoading(false);
+    };
+    generateOptions.beforeSubmitEvent = () => {
+      setLoading(true);
+      emit("popup_clicked", surveyId, { action: "before_submit" });
+    };
+    generateOptions.afterSubmitEvent = ({ error, completed, total, progress }) => {
+      const errText = error ? typeof error === "string" ? error : error.message ?? String(error) : "";
+      if (errText) {
+        setLoading(false);
+        if (errText.toLowerCase().includes("no response")) {
+          errorHint.textContent = "Please answer the required question to continue.";
+          errorHint.style.display = "block";
+          emit("popup_clicked", surveyId, { action: "validation_error_required" });
+          updateButtons("in_progress_next");
+          return;
+        }
+        errorHint.textContent = "An error occurred while submitting. Please try again or close the popup.";
+        errorHint.style.display = "block";
+        emit("popup_clicked", surveyId, { action: "submit_error", error: errText });
+        return;
+      }
+      errorHint.style.display = "none";
+      setLoading(false);
+      if (completed) {
+        emit("survey_completed", surveyId, { action: "completed" });
+        surveyCompletedEmitted = true;
+        updateButtons("completed");
+        return;
+      }
+      emit("popup_clicked", surveyId, { action: "partial" });
+      if (total > 1 && progress > 0 && progress < total) {
+        updateButtons("in_progress_next");
+      } else {
+        updateButtons("in_progress_first");
+      }
+    };
+    generateOptions.onBackEvent = ({ progress }) => {
+      emit("popup_clicked", surveyId, { action: "back" });
+      if (progress === 0) {
+        updateButtons("in_progress_first");
+      } else {
+        updateButtons("in_progress_next");
+      }
+    };
+    formInstance.generate(formDivId, generateOptions).catch((err) => {
+      console.error("[MagicFeedback] Error generating form:", err);
+      setLoading(false);
+    });
+  } catch (e) {
+    console.error("[MagicFeedback] Exception initializing form:", e);
+    setLoading(false);
+  }
+}
+export {
+  renderPopup
+};
+//# sourceMappingURL=renderPopup-7GGKR5BY.mjs.map