posthog-js 1.92.1 → 1.93.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/array.full.js +1 -1
- package/dist/array.js +1 -1
- package/dist/es.js +1 -1
- package/dist/es.js.map +1 -1
- package/dist/module.d.ts +1 -0
- package/dist/module.js +1 -1
- package/dist/module.js.map +1 -1
- package/dist/surveys.js +1 -1
- package/dist/surveys.js.map +1 -1
- package/lib/package.json +1 -1
- package/lib/src/extensions/surveys.js +68 -20
- package/lib/src/extensions/surveys.js.map +1 -1
- package/lib/src/posthog-surveys-types.d.ts +1 -0
- package/lib/src/posthog-surveys-types.js.map +1 -1
- package/package.json +1 -1
|
@@ -64,7 +64,7 @@ var style = function (id, appearance) {
|
|
|
64
64
|
right: 'right: 30px;',
|
|
65
65
|
center: "\n left: 50%;\n transform: translateX(-50%);\n ",
|
|
66
66
|
};
|
|
67
|
-
return "\n .survey-".concat(id, "-form {\n position: fixed;\n margin: 0px;\n bottom: 0px;\n color: black;\n font-weight: normal;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: left;\n max-width: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.maxWidth) || '290'), "px;\n z-index: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) || '99999'), ";\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n border-bottom: 0px;\n width: 100%;\n ").concat(positions[(appearance === null || appearance === void 0 ? void 0 : appearance.position) || 'right'] || 'right: 30px;', "\n }\n .survey-").concat(id, "-form .tab {\n display: none;\n }\n .form-submit[disabled] {\n opacity: 0.6;\n filter: grayscale(100%);\n cursor: not-allowed;\n }\n .survey-").concat(id, "-form {\n flex-direction: column;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n }\n .survey-").concat(id, "-form textarea {\n color: #2d2d2d;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n background: white;\n color: black;\n outline: none;\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 10px;\n border-radius: 6px;\n border-color: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n margin-top: 14px; \n }\n .form-submit {\n box-sizing: border-box;\n margin: 0;\n font-family: inherit;\n overflow: visible;\n text-transform: none;\n position: relative;\n display: inline-block;\n font-weight: 700;\n white-space: nowrap;\n text-align: center;\n border: 1.5px solid transparent;\n cursor: pointer;\n user-select: none;\n touch-action: manipulation;\n padding: 12px;\n font-size: 14px;\n border-radius: 6px;\n outline: 0;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.submitButtonColor) || 'black', " !important;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\n width: 100%;\n }\n .form-cancel {\n float: right;\n border: none;\n background: none;\n cursor: pointer;\n }\n .cancel-btn-wrapper {\n position: absolute;\n width: 35px;\n height: 35px;\n border-radius: 100%;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n background: white;\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .bolded { font-weight: 600; }\n .buttons {\n display: flex;\n justify-content: center;\n }\n .footer-branding {\n font-size: 11px;\n margin-top: 10px;\n text-align: center;\n display: flex;\n justify-content: center;\n gap: 4px;\n align-items: center;\n font-weight: 500;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n text-decoration: none;\n }\n .survey-").concat(id, "-box {\n padding: 20px 25px 10px;\n display: flex;\n flex-direction: column;\n }\n .survey-question {\n font-weight: 500;\n font-size: 14px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .question-textarea-wrapper {\n display: flex;\n flex-direction: column;\n }\n .description {\n font-size: 13px;\n margin-top: 5px;\n opacity: .60;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .ratings-number {\n background-color: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonColor) || 'white', ";\n font-size: 14px;\n padding: 8px 0px;\n border: none;\n }\n .ratings-number:hover {\n cursor: pointer;\n }\n .rating-options {\n margin-top: 14px;\n }\n .rating-options-buttons {\n display: grid;\n border-radius: 6px;\n overflow: hidden;\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n }\n .rating-options-buttons > .ratings-number {\n border-right: 1px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n }\n .rating-options-buttons > .ratings-number:last-of-type {\n border-right: 0px;\n }\n .rating-options-buttons .rating-active {\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonActiveColor) || 'black', ";\n }\n .rating-options-emoji {\n display: flex;\n justify-content: space-between;\n }\n .ratings-emoji {\n font-size: 16px;\n background-color: transparent;\n border: none;\n padding: 0px;\n }\n .ratings-emoji:hover {\n cursor: pointer;\n }\n .ratings-emoji.rating-active svg {\n fill: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonActiveColor) || 'black', ";\n }\n .emoji-svg {\n fill: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonColor) || '#c9c6c6', ";\n }\n .rating-text {\n display: flex;\n flex-direction: row;\n font-size: 11px;\n justify-content: space-between;\n margin-top: 6px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n opacity: .60;\n }\n .multiple-choice-options {\n margin-top: 13px;\n font-size: 14px;\n }\n .multiple-choice-options .choice-option {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n cursor: pointer;\n margin-bottom: 5px;\n position: relative;\n }\n .multiple-choice-options > .choice-option:last-of-type {\n margin-bottom: 0px;\n }\n \n .multiple-choice-options input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n .choice-check {\n position: absolute;\n right: 10px;\n background: white;\n }\n .choice-check svg {\n display: none;\n }\n .multiple-choice-options .choice-option:hover .choice-check svg {\n display: inline-block;\n opacity: .25;\n }\n .multiple-choice-options input:checked + label + .choice-check svg {\n display: inline-block;\n opacity: 100% !important;\n }\n .multiple-choice-options input[type=checkbox]:checked + label {\n font-weight: bold;\n }\n .multiple-choice-options input:checked + label {\n border: 1.5px solid rgba(0,0,0);\n }\n .multiple-choice-options label {\n width: 100%;\n cursor: pointer;\n padding: 10px;\n border: 1.5px solid rgba(0,0,0,.25);\n border-radius: 4px;\n background: white;\n }\n .thank-you-message {\n position: fixed;\n bottom: 0px;\n z-index: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) || '99999'), ";\n box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n padding: 20px 25px 10px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n text-align: center;\n max-width: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.maxWidth) || '290'), "px;\n min-width: 150px;\n width: 100%;\n ").concat(positions[(appearance === null || appearance === void 0 ? void 0 : appearance.position) || 'right'] || 'right: 30px;', "\n }\n .thank-you-message-body {\n margin-top: 6px;\n font-size: 14px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .thank-you-message-header {\n margin: 10px 0px 0px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .thank-you-message-container .form-submit {\n margin-top: 20px;\n margin-bottom: 10px;\n }\n .thank-you-message-countdown {\n margin-left: 6px;\n }\n .bottom-section {\n margin-top: 14px;\n }\n ");
|
|
67
|
+
return "\n .survey-".concat(id, "-form {\n position: fixed;\n margin: 0px;\n bottom: 0px;\n color: black;\n font-weight: normal;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n text-align: left;\n max-width: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.maxWidth) || '290'), "px;\n z-index: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) || '99999'), ";\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n border-bottom: 0px;\n width: 100%;\n ").concat(positions[(appearance === null || appearance === void 0 ? void 0 : appearance.position) || 'right'] || 'right: 30px;', "\n }\n .survey-").concat(id, "-form .tab {\n display: none;\n }\n .form-submit[disabled] {\n opacity: 0.6;\n filter: grayscale(100%);\n cursor: not-allowed;\n }\n .survey-").concat(id, "-form {\n flex-direction: column;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n }\n .survey-").concat(id, "-form textarea {\n color: #2d2d2d;\n font-size: 14px;\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n background: white;\n color: black;\n outline: none;\n padding-left: 10px;\n padding-right: 10px;\n padding-top: 10px;\n border-radius: 6px;\n border-color: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n margin-top: 14px; \n }\n .form-submit {\n box-sizing: border-box;\n margin: 0;\n font-family: inherit;\n overflow: visible;\n text-transform: none;\n position: relative;\n display: inline-block;\n font-weight: 700;\n white-space: nowrap;\n text-align: center;\n border: 1.5px solid transparent;\n cursor: pointer;\n user-select: none;\n touch-action: manipulation;\n padding: 12px;\n font-size: 14px;\n border-radius: 6px;\n outline: 0;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.submitButtonColor) || 'black', " !important;\n text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);\n box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);\n width: 100%;\n }\n .form-cancel {\n float: right;\n border: none;\n background: none;\n cursor: pointer;\n }\n .cancel-btn-wrapper {\n position: absolute;\n width: 35px;\n height: 35px;\n border-radius: 100%;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n background: white;\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .bolded { font-weight: 600; }\n .buttons {\n display: flex;\n justify-content: center;\n }\n .footer-branding {\n font-size: 11px;\n margin-top: 10px;\n text-align: center;\n display: flex;\n justify-content: center;\n gap: 4px;\n align-items: center;\n font-weight: 500;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n text-decoration: none;\n }\n .survey-").concat(id, "-box {\n padding: 20px 25px 10px;\n display: flex;\n flex-direction: column;\n }\n .survey-question {\n font-weight: 500;\n font-size: 14px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .question-textarea-wrapper {\n display: flex;\n flex-direction: column;\n }\n .description {\n font-size: 13px;\n margin-top: 5px;\n opacity: .60;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .ratings-number {\n background-color: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonColor) || 'white', ";\n font-size: 14px;\n padding: 8px 0px;\n border: none;\n }\n .ratings-number:hover {\n cursor: pointer;\n }\n .rating-options {\n margin-top: 14px;\n }\n .rating-options-buttons {\n display: grid;\n border-radius: 6px;\n overflow: hidden;\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n }\n .rating-options-buttons > .ratings-number {\n border-right: 1px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n }\n .rating-options-buttons > .ratings-number:last-of-type {\n border-right: 0px;\n }\n .rating-options-buttons .rating-active {\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonActiveColor) || 'black', ";\n }\n .rating-options-emoji {\n display: flex;\n justify-content: space-between;\n }\n .ratings-emoji {\n font-size: 16px;\n background-color: transparent;\n border: none;\n padding: 0px;\n }\n .ratings-emoji:hover {\n cursor: pointer;\n }\n .ratings-emoji.rating-active svg {\n fill: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonActiveColor) || 'black', ";\n }\n .emoji-svg {\n fill: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.ratingButtonColor) || '#c9c6c6', ";\n }\n .rating-text {\n display: flex;\n flex-direction: row;\n font-size: 11px;\n justify-content: space-between;\n margin-top: 6px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n opacity: .60;\n }\n .multiple-choice-options {\n margin-top: 13px;\n font-size: 14px;\n }\n .multiple-choice-options .choice-option {\n display: flex;\n align-items: center;\n gap: 4px;\n font-size: 13px;\n cursor: pointer;\n margin-bottom: 5px;\n position: relative;\n }\n .multiple-choice-options > .choice-option:last-of-type {\n margin-bottom: 0px;\n }\n \n .multiple-choice-options input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n .choice-check {\n position: absolute;\n right: 10px;\n background: white;\n }\n .choice-check svg {\n display: none;\n }\n .multiple-choice-options .choice-option:hover .choice-check svg {\n display: inline-block;\n opacity: .25;\n }\n .multiple-choice-options input:checked + label + .choice-check svg {\n display: inline-block;\n opacity: 100% !important;\n }\n .multiple-choice-options input:checked + label {\n font-weight: bold;\n border: 1.5px solid rgba(0,0,0);\n }\n .multiple-choice-options input:checked + label input {\n font-weight: bold;\n }\n .multiple-choice-options label {\n width: 100%;\n cursor: pointer;\n padding: 10px;\n border: 1.5px solid rgba(0,0,0,.25);\n border-radius: 4px;\n background: white;\n }\n .multiple-choice-options .choice-option-open label {\n padding-right: 30px;\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n max-width: 100%;\n }\n .multiple-choice-options .choice-option-open label span {\n width: 100%;\n }\n .multiple-choice-options .choice-option-open input:disabled + label {\n opacity: 0.6;\n }\n .multiple-choice-options .choice-option-open label input {\n position: relative;\n opacity: 1;\n flex-grow: 1;\n border: 0;\n outline: 0;\n }\n .thank-you-message {\n position: fixed;\n bottom: 0px;\n z-index: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.zIndex) || '99999'), ";\n box-shadow: -6px 0 16px -8px rgb(0 0 0 / 8%), -9px 0 28px 0 rgb(0 0 0 / 5%), -12px 0 48px 16px rgb(0 0 0 / 3%);\n font-family: -apple-system, BlinkMacSystemFont, \"Inter\", \"Segoe UI\", \"Roboto\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n border-top-left-radius: 10px;\n border-top-right-radius: 10px;\n padding: 20px 25px 10px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n border: 1.5px solid ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.borderColor) || '#c9c6c6', ";\n text-align: center;\n max-width: ").concat(parseInt((appearance === null || appearance === void 0 ? void 0 : appearance.maxWidth) || '290'), "px;\n min-width: 150px;\n width: 100%;\n ").concat(positions[(appearance === null || appearance === void 0 ? void 0 : appearance.position) || 'right'] || 'right: 30px;', "\n }\n .thank-you-message-body {\n margin-top: 6px;\n font-size: 14px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .thank-you-message-header {\n margin: 10px 0px 0px;\n background: ").concat((appearance === null || appearance === void 0 ? void 0 : appearance.backgroundColor) || '#eeeded', ";\n }\n .thank-you-message-container .form-submit {\n margin-top: 20px;\n margin-bottom: 10px;\n }\n .thank-you-message-countdown {\n margin-left: 6px;\n }\n .bottom-section {\n margin-top: 14px;\n }\n ");
|
|
68
68
|
};
|
|
69
69
|
export var createShadow = function (styleSheet, surveyId) {
|
|
70
70
|
var div = document.createElement('div');
|
|
@@ -307,19 +307,28 @@ export var createRatingsPopup = function (posthog, survey, question, questionInd
|
|
|
307
307
|
return formElement;
|
|
308
308
|
};
|
|
309
309
|
export var createMultipleChoicePopup = function (posthog, survey, question, questionIndex) {
|
|
310
|
-
var _a;
|
|
310
|
+
var e_4, _a;
|
|
311
|
+
var _b;
|
|
311
312
|
var surveyQuestion = question.question;
|
|
312
313
|
var surveyDescription = question.description;
|
|
313
314
|
var surveyQuestionChoices = question.choices;
|
|
314
|
-
var
|
|
315
|
+
var isSingleChoice = question.type === 'single_choice';
|
|
315
316
|
var isOptional = !!question.optional;
|
|
317
|
+
var hasOpenChoice = !!question.hasOpenChoice;
|
|
316
318
|
var form = "\n <div class=\"survey-".concat(survey.id, "-box\">\n <div class=\"cancel-btn-wrapper\">\n <button class=\"form-cancel\" type=\"cancel\">").concat(cancelSVG, "</button>\n </div>\n <div class=\"survey-question auto-text-color\">").concat(surveyQuestion, "</div>\n ").concat(surveyDescription ? "<span class=\"description auto-text-color\">".concat(surveyDescription, "</span>") : '', "\n <div class=\"multiple-choice-options\">\n ").concat(surveyQuestionChoices
|
|
317
319
|
.map(function (option, idx) {
|
|
318
|
-
var
|
|
319
|
-
var
|
|
320
|
+
var choiceClass = 'choice-option';
|
|
321
|
+
var val = option;
|
|
322
|
+
if (hasOpenChoice && idx === surveyQuestionChoices.length - 1) {
|
|
323
|
+
option = "<span>".concat(option, ":</span><input type=\"text\" value=\"\">");
|
|
324
|
+
choiceClass += ' choice-option-open';
|
|
325
|
+
val = '';
|
|
326
|
+
}
|
|
327
|
+
var inputType = isSingleChoice ? 'radio' : 'checkbox';
|
|
328
|
+
var singleOrMultiSelectString = "<div class=\"".concat(choiceClass, "\">\n <input type=\"").concat(inputType, "\" id=surveyQuestion").concat(questionIndex, "Choice").concat(idx, "\n name=\"question").concat(questionIndex, "\" value=\"").concat(val, "\" ").concat(val ? '' : 'disabled', ">\n <label class=\"auto-text-color\" for=surveyQuestion").concat(questionIndex, "Choice").concat(idx, ">\n ").concat(option, "\n </label>\n <span class=\"choice-check auto-text-color\">").concat(checkSVG, "</span>\n </div>");
|
|
320
329
|
return singleOrMultiSelectString;
|
|
321
330
|
})
|
|
322
|
-
.join(' '), "\n </div>\n <div class=\"bottom-section\">\n <div class=\"buttons\">\n <button class=\"form-submit auto-text-color\" type=\"submit\" ").concat(isOptional ? '' : 'disabled', ">").concat(question.buttonText || ((
|
|
331
|
+
.join(' '), "\n </div>\n <div class=\"bottom-section\">\n <div class=\"buttons\">\n <button class=\"form-submit auto-text-color\" type=\"submit\" ").concat(isOptional ? '' : 'disabled', ">").concat(question.buttonText || ((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.submitButtonText) || 'Submit', "</button>\n </div>\n <a href=\"https://posthog.com\" target=\"_blank\" rel=\"noopener\" class=\"footer-branding auto-text-color\">Survey by ").concat(posthogLogo, "</a>\n </div>\n\n </div>\n ");
|
|
323
332
|
var formElement;
|
|
324
333
|
if (survey.questions.length === 1) {
|
|
325
334
|
formElement = Object.assign(document.createElement('form'), {
|
|
@@ -330,7 +339,7 @@ export var createMultipleChoicePopup = function (posthog, survey, question, ques
|
|
|
330
339
|
var _b, _c;
|
|
331
340
|
e.preventDefault();
|
|
332
341
|
var targetElement = e.target;
|
|
333
|
-
var selectedChoices =
|
|
342
|
+
var selectedChoices = isSingleChoice
|
|
334
343
|
? (_b = targetElement.querySelector('input[type=radio]:checked')) === null || _b === void 0 ? void 0 : _b.value
|
|
335
344
|
: __spreadArray([], __read(targetElement.querySelectorAll('input[type=checkbox]:checked')), false).map(function (choice) { return choice.value; });
|
|
336
345
|
posthog.capture('survey sent', {
|
|
@@ -358,7 +367,7 @@ export var createMultipleChoicePopup = function (posthog, survey, question, ques
|
|
|
358
367
|
if (!isOptional) {
|
|
359
368
|
formElement.addEventListener('change', function () {
|
|
360
369
|
var _a;
|
|
361
|
-
var selectedChoices =
|
|
370
|
+
var selectedChoices = isSingleChoice
|
|
362
371
|
? formElement.querySelectorAll('input[type=radio]:checked')
|
|
363
372
|
: formElement.querySelectorAll('input[type=checkbox]:checked');
|
|
364
373
|
if (((_a = selectedChoices.length) !== null && _a !== void 0 ? _a : 0) > 0) {
|
|
@@ -371,6 +380,45 @@ export var createMultipleChoicePopup = function (posthog, survey, question, ques
|
|
|
371
380
|
}
|
|
372
381
|
});
|
|
373
382
|
}
|
|
383
|
+
var openChoiceWrappers = formElement.querySelectorAll('.choice-option-open');
|
|
384
|
+
var _loop_2 = function (openChoiceWrapper) {
|
|
385
|
+
var textInput = openChoiceWrapper.querySelector('input[type=text]');
|
|
386
|
+
var inputType = isSingleChoice ? 'radio' : 'checkbox';
|
|
387
|
+
var checkInput = openChoiceWrapper.querySelector("input[type=".concat(inputType, "]"));
|
|
388
|
+
openChoiceWrapper.addEventListener('click', function () {
|
|
389
|
+
if ((checkInput === null || checkInput === void 0 ? void 0 : checkInput.checked) || (checkInput === null || checkInput === void 0 ? void 0 : checkInput.disabled))
|
|
390
|
+
textInput === null || textInput === void 0 ? void 0 : textInput.focus();
|
|
391
|
+
});
|
|
392
|
+
textInput.addEventListener('click', function (e) { return e.stopPropagation(); });
|
|
393
|
+
textInput.addEventListener('input', function (e) {
|
|
394
|
+
var textInput = e.target;
|
|
395
|
+
if (checkInput) {
|
|
396
|
+
checkInput.value = textInput.value;
|
|
397
|
+
if (textInput.value) {
|
|
398
|
+
checkInput.disabled = false;
|
|
399
|
+
checkInput.checked = true;
|
|
400
|
+
}
|
|
401
|
+
else {
|
|
402
|
+
checkInput.disabled = true;
|
|
403
|
+
checkInput.checked = false;
|
|
404
|
+
}
|
|
405
|
+
formElement.dispatchEvent(new Event('change'));
|
|
406
|
+
}
|
|
407
|
+
});
|
|
408
|
+
};
|
|
409
|
+
try {
|
|
410
|
+
for (var openChoiceWrappers_1 = __values(openChoiceWrappers), openChoiceWrappers_1_1 = openChoiceWrappers_1.next(); !openChoiceWrappers_1_1.done; openChoiceWrappers_1_1 = openChoiceWrappers_1.next()) {
|
|
411
|
+
var openChoiceWrapper = openChoiceWrappers_1_1.value;
|
|
412
|
+
_loop_2(openChoiceWrapper);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
catch (e_4_1) { e_4 = { error: e_4_1 }; }
|
|
416
|
+
finally {
|
|
417
|
+
try {
|
|
418
|
+
if (openChoiceWrappers_1_1 && !openChoiceWrappers_1_1.done && (_a = openChoiceWrappers_1.return)) _a.call(openChoiceWrappers_1);
|
|
419
|
+
}
|
|
420
|
+
finally { if (e_4) throw e_4.error; }
|
|
421
|
+
}
|
|
374
422
|
return formElement;
|
|
375
423
|
};
|
|
376
424
|
export var callSurveys = function (posthog, forceReload) {
|
|
@@ -378,7 +426,7 @@ export var callSurveys = function (posthog, forceReload) {
|
|
|
378
426
|
posthog === null || posthog === void 0 ? void 0 : posthog.getActiveMatchingSurveys(function (surveys) {
|
|
379
427
|
var nonAPISurveys = surveys.filter(function (survey) { return survey.type !== 'api'; });
|
|
380
428
|
nonAPISurveys.forEach(function (survey) {
|
|
381
|
-
var
|
|
429
|
+
var e_5, _a;
|
|
382
430
|
var _b, _c, _d, _e;
|
|
383
431
|
if (document.querySelectorAll("div[class^='PostHogSurvey']").length === 0) {
|
|
384
432
|
var surveyWaitPeriodInDays = (_b = survey.conditions) === null || _b === void 0 ? void 0 : _b.seenSurveyWaitPeriodInDays;
|
|
@@ -411,12 +459,12 @@ export var callSurveys = function (posthog, forceReload) {
|
|
|
411
459
|
brandingElement.style.display = 'none';
|
|
412
460
|
}
|
|
413
461
|
}
|
|
414
|
-
catch (
|
|
462
|
+
catch (e_5_1) { e_5 = { error: e_5_1 }; }
|
|
415
463
|
finally {
|
|
416
464
|
try {
|
|
417
465
|
if (allBrandingElements_1_1 && !allBrandingElements_1_1.done && (_a = allBrandingElements_1.return)) _a.call(allBrandingElements_1);
|
|
418
466
|
}
|
|
419
|
-
finally { if (
|
|
467
|
+
finally { if (e_5) throw e_5.error; }
|
|
420
468
|
}
|
|
421
469
|
}
|
|
422
470
|
shadow_1.appendChild(surveyPopup);
|
|
@@ -435,7 +483,7 @@ export var callSurveys = function (posthog, forceReload) {
|
|
|
435
483
|
localStorage.setItem("lastSeenSurveyDate", new Date().toISOString());
|
|
436
484
|
if ((_e = survey.appearance) === null || _e === void 0 ? void 0 : _e.displayThankYouMessage) {
|
|
437
485
|
window.addEventListener('PHSurveySent', function () {
|
|
438
|
-
var
|
|
486
|
+
var e_6, _a;
|
|
439
487
|
var _b;
|
|
440
488
|
var thankYouElement = createThankYouMessage(survey);
|
|
441
489
|
shadow_1.appendChild(thankYouElement);
|
|
@@ -448,12 +496,12 @@ export var callSurveys = function (posthog, forceReload) {
|
|
|
448
496
|
});
|
|
449
497
|
}
|
|
450
498
|
}
|
|
451
|
-
catch (
|
|
499
|
+
catch (e_6_1) { e_6 = { error: e_6_1 }; }
|
|
452
500
|
finally {
|
|
453
501
|
try {
|
|
454
502
|
if (cancelButtons_2_1 && !cancelButtons_2_1.done && (_a = cancelButtons_2.return)) _a.call(cancelButtons_2);
|
|
455
503
|
}
|
|
456
|
-
finally { if (
|
|
504
|
+
finally { if (e_6) throw e_6.error; }
|
|
457
505
|
}
|
|
458
506
|
var countdownEl = thankYouElement.querySelector('.thank-you-message-countdown');
|
|
459
507
|
if (((_b = survey.appearance) === null || _b === void 0 ? void 0 : _b.autoDisappear) && countdownEl) {
|
|
@@ -489,7 +537,7 @@ export var createMultipleQuestionSurvey = function (posthog, survey) {
|
|
|
489
537
|
var multipleQuestionForm = Object.assign(document.createElement('form'), {
|
|
490
538
|
className: "survey-".concat(survey.id, "-form"),
|
|
491
539
|
onsubmit: function (e) {
|
|
492
|
-
var
|
|
540
|
+
var e_7, _a, _b;
|
|
493
541
|
var _c, _d, _e;
|
|
494
542
|
e.preventDefault();
|
|
495
543
|
var multipleQuestionResponses = {};
|
|
@@ -529,12 +577,12 @@ export var createMultipleQuestionSurvey = function (posthog, survey) {
|
|
|
529
577
|
}
|
|
530
578
|
}
|
|
531
579
|
}
|
|
532
|
-
catch (
|
|
580
|
+
catch (e_7_1) { e_7 = { error: e_7_1 }; }
|
|
533
581
|
finally {
|
|
534
582
|
try {
|
|
535
583
|
if (_g && !_g.done && (_a = _f.return)) _a.call(_f);
|
|
536
584
|
}
|
|
537
|
-
finally { if (
|
|
585
|
+
finally { if (e_7) throw e_7.error; }
|
|
538
586
|
}
|
|
539
587
|
posthog.capture('survey sent', __assign(__assign({ $survey_name: survey.name, $survey_id: survey.id, $survey_questions: survey.questions.map(function (question) { return question.question; }), sessionRecordingUrl: (_e = posthog.get_session_replay_url) === null || _e === void 0 ? void 0 : _e.call(posthog) }, multipleQuestionResponses), { $set: (_b = {},
|
|
540
588
|
_b["$survey_responded/".concat(survey.id)] = true,
|
|
@@ -592,19 +640,19 @@ function getTextColor(el) {
|
|
|
592
640
|
return hsp > 127.5 ? 'black' : 'white';
|
|
593
641
|
}
|
|
594
642
|
function setTextColors(parentEl) {
|
|
595
|
-
var
|
|
643
|
+
var e_8, _a;
|
|
596
644
|
try {
|
|
597
645
|
for (var _b = __values(parentEl.querySelectorAll('.auto-text-color')), _c = _b.next(); !_c.done; _c = _b.next()) {
|
|
598
646
|
var el = _c.value;
|
|
599
647
|
el.style.color = getTextColor(el);
|
|
600
648
|
}
|
|
601
649
|
}
|
|
602
|
-
catch (
|
|
650
|
+
catch (e_8_1) { e_8 = { error: e_8_1 }; }
|
|
603
651
|
finally {
|
|
604
652
|
try {
|
|
605
653
|
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
|
|
606
654
|
}
|
|
607
|
-
finally { if (
|
|
655
|
+
finally { if (e_8) throw e_8.error; }
|
|
608
656
|
}
|
|
609
657
|
}
|
|
610
658
|
function showQuestion(n, surveyId) {
|