@sprig-technologies/sprig-browser
Version:
npm package for the sprig web sdk
502 lines • 68.9 kB
JavaScript
import { a as J, h as Y, u as e, c as H, f as Be, b as ie, F as ye, p as te, g as xe, e as be, _ as se, T as Te, A as dr, M as we, D as Ee, i as cr, P as ur, o as pr, q as mr, r as pe, s as Ke, v as gr, m as hr, x as vr, j as br, k as yr, l as fr, z as Sr, B as xr, t as Pe, n as Ve } from "./view-BFJhGEb5.js";
import { t as ce } from "./metricsReporter-CNrl9aag.js";
import { b as Re, D as Je, g as Xe, A as kr } from "./core-hnPqe1SX.js";
import { b as oe, a as de, H as Ne, M as he, Q as ge, O as Ie, B as ne, L as Ce, S as Ir, u as _r, g as Tr, p as Cr, v as Nr, R as le, c as wr, s as qr, d as Lr } from "./videoPlayer-DYBcNpo7.js";
const Dr = ({ className: n, message: i, next: c, properties: r, questionId: t, type: s }) => {
const { useMobileStyling: g, border: b, isLongFormSurvey: u, focusedQuestionId: h } = J((m) => ({ useMobileStyling: m.useMobileStyling, border: m.border, isLongFormSurvey: ce(m.studyType), focusedQuestionId: m.focusedQuestionId })), [l, v] = Y(!1), [o, N] = Y(""), [a, y] = Y(!1), p = u && h === t, k = r == null ? void 0 : r.collectName, S = (r == null ? void 0 : r.nameLabelText) || "Full Name", w = (r == null ? void 0 : r.consentText) || "I agree to the stated conditions", q = (r == null ? void 0 : r.submitButtonText) || "Submit", F = !!o.trim(), P = l && (!k || F), A = (m, f = !1) => {
m.preventDefault(), m.stopPropagation();
let L = null;
if (!f) {
if (!P) return void y(!0);
L = { submitted: !0 }, k && (L.name = o);
}
c({ value: L, questionId: t, type: s }, P);
};
return e("div", { className: H(n, u && !p && "ul-card--unfocused", "ul-card__consent-legal", "fade-in-transition"), children: [e(oe, { isRequired: u && (r == null ? void 0 : r.required), message: i, properties: { questionHtml: r.questionHtml } }), r != null && r.richTextBody ? e(de, { children: e(Ne, { className: "ul-rich-text-body", html: r.richTextBody, id: "ul-card__consent-legal-body-container" }) }) : null, e(he, { embeddedType: "pdf", properties: r, children: e(ge, { children: [e("div", { className: "sprig-stretch", children: [e(Ie, { allowTextEntry: !1, border: b, error: a && !l, id: "consent", isRadio: !1, isSelected: l, label: w, onUserInputChanged: ({ selected: m }) => {
m !== l && v(!l);
}, useMobileStyling: g }), k && e("input", { "aria-label": S, "aria-placeholder": S, className: H(ie("ul-consent-legal__name-input", g)), "data-gramm": "false", maxLength: 250, name: "name", onBlur: (m) => {
m.currentTarget.style.borderColor = a && !F ? Re : Je;
}, onFocus: (m) => {
m.currentTarget.style.borderColor = a && !F ? Re : b;
}, onInput: (m) => {
m.preventDefault(), m.stopPropagation(), N(m.currentTarget.value);
}, placeholder: S, style: a && !F ? { borderColor: Re } : {}, tabIndex: 0, value: o })] }), e("div", { className: "ul-card__button-wrapper ul-card-vertical__button-wrapper", children: [e(ne, { className: P ? "" : "sprig-button-disabled", onClick: A, children: q }), r.required === !1 && !u && e("button", { className: "ul-card-skip__button", onClick: (m) => A(m, !0), children: Be(r) })] })] }) })] }, t);
}, _e = (n) => (i) => {
i.pointerType !== "touch" && n();
}, Pr = ({ activeValue: n, border: i, icon: c, isPressed: r, onSubmit: t, range: s, scaleLabelType: g, selectedValue: b, setSelectedValue: u, setActiveValue: h, setIsPressed: l, useMobileStyling: v, value: o, viewDocument: N }) => {
const { isLongFormSurvey: a, enableCspTrustedTypes: y } = J((f) => ({ isLongFormSurvey: ce(f.studyType), enableCspTrustedTypes: f.enableCspTrustedTypes })), p = `option-${o}`, k = g === "number", S = g === "star", w = g === "smiley", q = k && o === n || o === b, [F, P] = (() => {
const f = S && b !== null && o <= b;
return S && o <= n || w && o === n || f || o === n || o === b ? [i, r || f || o === b ? 1 : 0.3] : ["", 1];
})(), A = ye(() => {
const f = b === o, L = { borderColor: q && !v || f ? F : "", fillOpacity: q ? "" : P, zIndex: q ? 3 : "auto", color: f ? "#fff" : "" };
return k ? { ...L, backgroundColor: f ? F : "" } : { ...L, color: S || w || f ? F : "" };
}, [q, F, P, b, o, k, S, w, v]), m = ye(() => Xe((({ icon: f, scaleLabelType: L, value: R, selectedValue: O }) => {
if (L === "smiley" && R === O) {
let C = 0;
return f.replace(/black/g, () => ++C == 1 ? "black" : "white");
}
return f;
})({ icon: c, scaleLabelType: g, value: o, selectedValue: b }), y), [y, c, g, b, o]);
return e("button", { "aria-label": k ? void 0 : String(o), className: (() => {
switch (g) {
case "star":
return H(ie("likert-star", v), ie(`likert-star-${o}`, v));
case "smiley":
return H(ie("likert-smiley", v), ie(`likert-smiley-${o}`, v));
default:
return o === s ? H(ie("likert-number", v), ie(`likert-number-${o}`, v), ie("likert-last-option", v)) : H(ie("likert-number", v), ie(`likert-number-${o}`, v));
}
})(), dangerouslySetInnerHTML: { __html: m }, id: p, onClick: (f) => {
a && (f.preventDefault(), f.stopPropagation(), u(o)), t();
}, onKeyDown: (f) => {
var O, C;
const L = N.querySelectorAll(`.likert-${g ?? "number"}`), R = o - 1;
f.key === "ArrowRight" ? (O = L[R + 1]) == null || O.focus() : f.key === "ArrowLeft" ? (C = L[R - 1]) == null || C.focus() : f.key !== "Enter" && f.key !== " " || (a && (f.preventDefault(), f.stopPropagation(), u(o)), t());
}, onPointerCancel: _e(() => l(!1)), onPointerDown: _e(() => {
l(!0), h(o);
}), onPointerEnter: _e(() => h(o)), onPointerLeave: _e(() => {
h(-1), l(!1);
}), onPointerUp: _e(() => l(!1)), style: A, tabIndex: 0 });
}, Rr = ({ className: n, labels: i, message: c, next: r, properties: t, questionId: s, type: g }) => {
const { border: b, useMobileStyling: u, viewDocument: h, isLongFormSurvey: l, focusedQuestionId: v } = J((R) => ({ border: R.border, useMobileStyling: R.useMobileStyling, viewDocument: R.viewDocument, isLongFormSurvey: ce(R.studyType), focusedQuestionId: R.focusedQuestionId })), [o, N] = Y(-1), [a, y] = Y(!1), [p, k] = Y(null);
te(() => {
N(-1), y(!1), k(null);
}, [s]);
const S = l && v === s, w = i && i.left, q = i && i.right;
let F;
const { range: P, scaleLabelType: A, ratingIcons: m } = t;
P && (F = Number(P));
const f = F || 5, L = (R) => {
var O, C;
switch (A) {
case "star":
return (O = m[0]) == null ? void 0 : O.svg;
case "smiley":
return (C = m[R]) == null ? void 0 : C.svg;
default:
return String(R + 1);
}
};
return e("form", { className: H(n, "ul-card--likert", "fade-in-transition", l && !S && "ul-card--unfocused"), children: [e(oe, { isRequired: l && (t == null ? void 0 : t.required), message: c, properties: t }), e(he, { properties: t, children: e(xe, { children: [e(de, { children: [e("div", { "aria-label": `Rating (1 - ${f})`, className: "ul-card--likert__numbers", role: "radiogroup", children: [...Array(f)].map((R, O) => {
const C = O + 1;
return e(Pr, { activeValue: o, border: b, icon: L(O), isPressed: a, onSubmit: () => r({ value: C, questionId: s, type: g }, !0), range: f, scaleLabelType: A, selectedValue: p, setActiveValue: N, setIsPressed: y, setSelectedValue: k, useMobileStyling: u, value: C, viewDocument: h }, O);
}) }), e("div", { className: "ul-card--likert__labels", children: [e("span", { children: w }), e("span", { children: q })] })] }), !t.required && !l && e(ge, { children: e("div", { className: "ul-vertical-centered-container", children: e(ne, { onClick: (R) => {
R.preventDefault(), R.stopPropagation(), r({ value: null, questionId: s, type: g }, !0);
}, children: be(t) }) }) })] }) })] }, s);
}, Mr = ({ columns: n, onSelect: i, options: c, selectedOptions: r }) => {
const t = se([]), { border: s, useMobileStyling: g, cards: b, index: u } = J((a) => ({ border: a.border, useMobileStyling: a.useMobileStyling, cards: a.cards, index: a.index })), h = c.findIndex((a) => r[a.id] === null), [l, v] = Y(h), o = Te((a, y) => {
var S;
i(a, y);
const p = l + 1, k = c[p];
if (k && r[k.id] === null) {
v(p);
const w = b[u];
(w == null ? void 0 : w.groupId) != null || ((S = t.current[p]) == null || S.scrollIntoView({ block: "nearest", behavior: "smooth" }));
}
}, [i, c, r, l, b, u]), N = Te((a, y) => {
const p = l === a;
return e(dr, { animate: !0, header: y.label, isOpen: p, onClick: () => {
var k;
return v(p && !((k = window.UserLeap) != null && k.isMobileSDK) ? -1 : a);
}, ref: (k) => {
k && (t.current[a] = k);
}, showHeaderCheck: r[y.id] !== null, children: e("div", { style: { paddingTop: "12px" }, children: n.map((k) => e(Ie, { allowTextEntry: !1, ariaLabel: `${y.label}-${k.label}`, border: s, error: !1, id: `${y.id}-${k.value}`, isRadio: !0, isSelected: r[y.id] === k.value, label: k.label, onUserInputChanged: () => o(y.id, k.value), useMobileStyling: g }, k.label)) }) }, y.id);
}, [s, n, l, o, r, g]);
return e("div", { children: c.map((a, y) => N(y, a)) });
}, Er = ({ columns: n, onSelect: i, options: c, selectedOptions: r }) => {
const { border: t, useMobileStyling: s, isLongFormSurvey: g } = J((a) => ({ border: a.border, useMobileStyling: a.useMobileStyling, isLongFormSurvey: ce(a.studyType) })), b = c.length, u = n.length, h = se(null), [l, v] = Y(!1), [o, N] = Y(!1);
return te(() => {
const a = h.current, y = new ResizeObserver((p) => {
window.requestAnimationFrame(() => {
a && (v(Math.round(p[0].contentRect.width) < a.scrollWidth), N(Math.round(p[0].contentRect.width) < a.scrollWidth));
});
});
return a && y.observe(a), () => {
a && y.unobserve(a);
};
}, []), e("div", { className: "ul-card--matrix_question_container", children: [e("div", { className: H("ul-card--matrix_container", l && "ul-matrix-scroll-gradient"), onScroll: () => {
(() => {
const a = h.current;
a && v(a.clientWidth + Math.abs(a.scrollLeft) < a.scrollWidth);
})();
}, ref: h, children: e("div", { className: H(g && "ul-card--matrix_grid_longform", "ul-card--matrix_grid"), style: `--numColumns: ${u}; --numRows: ${b + 1};`, children: [e("div", {}), " ", n.map((a) => e("div", { className: "ul-matrix-column-label", children: a.label }, a.label)), c.map((a) => e(xe, { children: [e("div", { "aria-label": a.label, className: "ul-matrix-row-label", children: a.label }, a.label), e("div", { className: "ul-matrix-row-options", role: "radiogroup", children: n.map((y, p) => e("div", { className: H("ul-matrix-option-wrapper", p === u - 1 && "ul-matrix-last-option"), children: e(Ie, { allowTextEntry: !1, ariaLabel: `${a.label}-${y.label}`, border: t, choiceStyle: { background: "transparent", border: "none", marginBottom: "0", padding: "0" }, error: !1, id: `${a.id}-${y.value}`, isRadio: !0, isSelected: r[a.id] === y.value, onUserInputChanged: () => i(a.id, y.value), useMobileStyling: s }) }, y.value)) })] }))] }) }), (l || o) && e("button", { className: o && !l ? "ul-matrix-scroll-arrow left" : "ul-matrix-scroll-arrow", onClick: o && !l ? (a) => {
a.preventDefault();
const y = h.current;
if (y) {
const p = getComputedStyle(y).direction === "rtl";
y.scrollTo({ left: p ? y.scrollWidth - y.clientWidth : 0, behavior: "smooth" });
}
} : (a) => {
a.preventDefault();
const y = h.current;
if (y) {
const p = getComputedStyle(y).direction === "rtl";
y.scrollTo({ left: p ? y.clientWidth - y.scrollWidth : y.scrollWidth, behavior: "smooth" });
}
}, children: e(o && !l ? Fr : Ur, {}) })] });
}, Fr = () => e("svg", { fill: "currentColor", height: "32", transform: "matrix(-1,0,0,1,0,0)", version: "1.1", viewBox: "0 0 256 256", width: "32", xmlns: "http://www.w3.org/2000/svg", children: e("path", { d: "M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" }) }), Ur = () => e("svg", { fill: "currentColor", height: "32", viewBox: "0 0 256 256", width: "32", xmlns: "http://www.w3.org/2000/svg", children: e("path", { d: "M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z" }) }), Qr = ({ className: n, message: i, next: c, options: r, properties: t, questionId: s, type: g, showIndividualSubmit: b = !1, onSubmitButtonClick: u }) => {
const { useMobileStyling: h, isLongFormSurvey: l, focusedQuestionId: v, setFocusedQuestionId: o } = J((m) => ({ useMobileStyling: m.useMobileStyling, isLongFormSurvey: ce(m.studyType), focusedQuestionId: m.focusedQuestionId, setFocusedQuestionId: m.setFocusedQuestionId })), N = t.matrixColumn, a = t.required, y = l && v === s, p = (m) => Object.values(m).every((f) => f == null), k = (m) => a && p(m), S = (m) => {
if (m.preventDefault(), m.stopPropagation(), c({ value: q, questionId: s, type: g }, !0), u) {
const f = !p(q);
u(f);
}
}, w = r.reduce((m, f) => (m[f.id] = null, m), {}), [q, F] = Y(w), P = (m, f) => {
l && c({ value: { ...q, [m]: f }, questionId: s, type: g }, !k({ ...q, [m]: f })), F((L) => ({ ...L, [m]: f }));
}, A = t.displayMatrixAsAccordion || h;
return e("form", { className: H(n, !l && "ul-card__matrix", "fade-in-transition", l && !y && "ul-card--unfocused"), id: "text-form", onClick: () => {
y && o(s);
}, onSubmit: S, children: [e(oe, { isRequired: l && (t == null ? void 0 : t.required), message: i, properties: t }), e(he, { properties: t, children: [e(de, { children: [e(A ? Mr : Er, { columns: N, onSelect: P, options: r, selectedOptions: q }), b && e(Ce, { handleSubmit: S, isSubmitDisabled: k(q) })] }), !l && e(ge, { children: e("div", { className: "ul-card__button-wrapper", children: e(ne, { disabled: k(q), children: be(t) }) }) })] })] }, s);
}, er = ({ className: n, message: i, onSubmit: c, options: r = [], properties: t, questionId: s, type: g, showIndividualSubmit: b = !1, onSubmitButtonClick: u }) => {
const { border: h, useMobileStyling: l, isLongFormSurvey: v, focusedQuestionId: o, setFocusedQuestionId: N } = J((I) => ({ border: I.border, useMobileStyling: I.useMobileStyling, isLongFormSurvey: ce(I.studyType), focusedQuestionId: I.focusedQuestionId, setFocusedQuestionId: I.setFocusedQuestionId })), a = v && o === s, y = r.reduce((I, B) => (I[B.id] = { isSelected: !1 }, I), {}), [p, k] = Y(y), S = g === "multiplechoice", w = t.required, q = r.find((I) => {
var B;
return (B = I.optionProperties) == null ? void 0 : B.noneOfTheAbove;
}), F = (I) => Object.entries(I).some(([B, j]) => {
var ue;
const re = r.find((d) => `${d.id}` === B), W = j.userText === void 0 || j.userText.trim() === "";
return ((ue = re == null ? void 0 : re.optionProperties) == null ? void 0 : ue.allowsTextEntry) && W && j.isSelected;
}), P = (I) => Object.values(I).filter((B) => B.isSelected).length, A = (I) => {
const { minSelect: B = 0, maxSelect: j = 1 / 0, maxSelectMode: re } = t, W = P(I);
switch (re) {
case we.Maximum:
return W <= j;
case we.Range:
return W === 0 || W >= B;
default:
return !0;
}
}, m = t.minSelect && t.minSelect > 0 && t.maxSelectMode === we.Range && P(p) < t.minSelect && (w || P(p) > 0), f = (I) => F(I) || w && !P(I) || !A(I), L = (I) => A(I) && !F(I) && P(I) > 0, R = Object.entries(p).some(([I, B]) => {
var j, re;
return B.isSelected && ((re = (j = r.find((W) => `${W.id}` === I)) == null ? void 0 : j.optionProperties) == null ? void 0 : re.allowsTextEntry);
}), O = b && (!S || R), C = (I) => {
$(I.id, I.selected, I.userText, I.noneOfTheAbove), I.selected && v && !S && !a && N(s);
}, U = (I) => {
var B;
return (t == null ? void 0 : t.maxSelectMode) !== we.Unlimited && P(p) === (t == null ? void 0 : t.maxSelect) && !((B = p[I]) != null && B.isSelected);
}, x = (I) => {
if (I.preventDefault(), I.stopPropagation(), c(p, !0), u) {
const B = L(p);
u(B);
}
}, $ = (I, B, j, re) => {
const W = Object.assign({}, p);
if ((S || re) && B) for (const _ of Object.values(W)) _.isSelected = !1, delete _.userText;
else q && !re && p[q.id].isSelected && (W[q.id].isSelected = !1);
W[I] = { isSelected: B, userText: j };
const ue = S && Object.entries(W).some(([_, D]) => {
var Q, E;
return D.isSelected && ((E = (Q = r.find((z) => `${z.id}` === _)) == null ? void 0 : Q.optionProperties) == null ? void 0 : E.allowsTextEntry);
}), d = !f(W);
if (v && (c(W, d), S && !ue && d && u)) {
const _ = L(W);
u(_);
}
k(W);
};
return e("form", { className: H(n, "ul-card--multiple", "fade-in-transition", v && !a && "ul-card--unfocused"), id: "text-form", onClick: g === "multipleselect" ? () => {
v && o !== s && g === "multipleselect" && N(s);
} : void 0, onSubmit: x, children: [e(oe, { isRequired: v && (t == null ? void 0 : t.required), message: i, properties: t }), e(he, { properties: t, children: e(xe, { children: [e(de, { children: [t.isDropdown ? e(Ir, { disabledOptions: r.filter((I) => U(I.id)), dropdownFooter: m ? e("div", { className: "ul-card__min-select-counter", style: { marginLeft: "16px" }, children: [P(p), "/", t.minSelect] }) : void 0, isMultiSelect: !S, multiselectText: t.dropdownMultiselectedText ?? "choices selected", onChange: (I) => {
const B = { ...p };
for (const j of r) I.includes(j) ? B[j.id].isSelected = !0 : B[j.id].isSelected = !1;
v && c(B, !f(B)), k(B);
}, options: r, placeholderText: t.dropdownPlaceholderText ?? (S ? "Select choice" : "Select choice(s)"), value: r.filter((I) => p[I.id].isSelected) }) : e("div", { className: H(ie("ul-card__choices", l)), role: S ? "radiogroup" : "group", children: [r.map(({ id: I, label: B, value: j, optionProperties: re }) => {
var _, D;
const W = `${I}`, { allowsTextEntry: ue, noneOfTheAbove: d } = { allowsTextEntry: !1, noneOfTheAbove: !1, ...re };
return e(Ie, { allowTextEntry: ue, border: h, disabled: U(W), error: F(p), id: W, isRadio: S, isSelected: !!((_ = p[W]) != null && _.isSelected), label: B, noneOfTheAbove: d, onUserInputChanged: C, promptText: (re == null ? void 0 : re.otherOptionPlaceholder) || "Please specify", text: (D = p[I]) == null ? void 0 : D.userText, useMobileStyling: l, value: j }, W);
}), !!m && e("div", { className: "ul-card__min-select-counter", children: [P(p), "/", t.minSelect] })] }), O && e(Ce, { handleSubmit: x, isSubmitDisabled: f(p) })] }), !v && e(ge, { children: e("div", { className: "ul-card__button-wrapper", children: e(ne, { disabled: f(p), onClick: x, children: be(t) }) }) })] }) })] }, s);
}, Br = (n) => {
const { questionId: i, type: c, next: r, options: t } = n, { setFocusedQuestionId: s } = J((g) => ({ setFocusedQuestionId: g.setFocusedQuestionId }));
return e(er, { ...n, onSubmit: (g, b) => {
var N;
const u = Object.entries(g).find(([, a]) => a.isSelected) || [void 0, void 0], [h, l] = u, v = t.find((a) => `${a.id}` === h);
!((N = v == null ? void 0 : v.optionProperties) != null && N.allowsTextEntry) || l != null && l.userText && l.userText.trim() !== "" || s(i);
const o = l != null && l.userText ? { [h]: { userText: l.userText } } : null;
r({ value: v && h ? { [h]: v.value } : {}, secondaryValue: o, questionId: i, type: c }, b);
} });
}, Ar = (n) => {
const { questionId: i, type: c, next: r } = n;
return e(er, { ...n, onSubmit: (t, s) => {
const g = Object.entries(t).reduce((u, [h, l]) => (u[h] = l.isSelected, u), {}), b = Object.entries(t).reduce((u, [h, l]) => {
if (!l.userText) return u;
const v = u || {};
return v[h] = { userText: l.userText }, v;
}, null);
r({ value: g, secondaryValue: b, questionId: i, type: c }, s);
} });
}, Or = ({ className: n, labels: i, message: c, properties: r, next: t, questionId: s, type: g }) => {
const [b, u] = Y(null), { border: h, useMobileStyling: l, viewDocument: v, isLongFormSurvey: o, focusedQuestionId: N } = J((k) => ({ border: k.border, useMobileStyling: k.useMobileStyling, viewDocument: k.viewDocument, isLongFormSurvey: ce(k.studyType), focusedQuestionId: k.focusedQuestionId })), a = o && N === s, y = i && i.left, p = i && i.right;
return e("form", { className: H(n, "ul-card--nps", "fade-in-transition", o && !a && "ul-card--unfocused"), children: [e(oe, { isRequired: o && (r == null ? void 0 : r.required), message: c, properties: r }), e(he, { properties: r, children: [e(de, { children: [e("div", { className: "ul-card--nps__numbers", children: [...Array(11)].map((k, S) => e("button", { className: H(ie("nps-number", l), ie(`nps-number-${S}`, l)), id: `option-${S}`, onClick: (w) => {
o && (w.preventDefault(), w.stopPropagation(), u(S)), t({ value: S, questionId: s, type: g }, !0);
}, onKeyDown: (w) => {
var F, P;
const q = v.querySelectorAll("button.nps-number");
w.key === "ArrowRight" ? (F = q[S + 1]) == null || F.focus() : w.key === "ArrowLeft" ? (P = q[S - 1]) == null || P.focus() : w.key !== "Enter" && w.key !== " " || (o && (w.preventDefault(), w.stopPropagation(), u(S)), t({ value: S, questionId: s, type: g }, !0));
}, onPointerDown: (w) => {
w.currentTarget.style.zIndex = "2", w.currentTarget.style.borderColor = h;
}, onPointerLeave: (w) => {
w.currentTarget.style.zIndex = "auto";
}, style: b === S ? { backgroundColor: h, color: "#fff" } : void 0, tabIndex: 0, children: S }, S)) }), e("div", { className: "ul-card--nps__labels", children: [e("span", { children: y }), e("span", { children: p })] })] }), !r.required && !o && e(ge, { children: e("div", { className: "ul-vertical-centered-container", children: e(ne, { onClick: (k) => {
k.preventDefault(), k.stopPropagation(), t({ value: null, questionId: s, type: g }, !0);
}, children: be(r) }) }) })] })] }, s);
}, $r = (n) => {
const { className: i, message: c, next: r, properties: t, questionId: s, type: g, showIndividualSubmit: b = !1, onSubmitButtonClick: u } = n, h = g === "aidynamicfollowup" || g === "aidynamicstandalone", l = h ? n.loading : void 0, { border: v, useMobileStyling: o, update: N, isLongFormSurvey: a, focusedQuestionId: y, setFocusedQuestionId: p, isPreview: k } = J((C) => ({ border: C.border, useMobileStyling: C.useMobileStyling, update: C.update, isLongFormSurvey: ce(C.studyType), focusedQuestionId: C.focusedQuestionId, setFocusedQuestionId: C.setFocusedQuestionId, isPreview: C.isPreview })), [S, w] = Y(""), q = se(null), F = a && y === s;
te(() => {
var C, U;
a && !k && (F ? (C = q.current) == null || C.focus() : (U = q.current) == null || U.blur());
}, [a, F, k]);
const P = S.trim(), A = t.required === !0 && !P, m = _r(q, () => N()), f = (C) => {
C.preventDefault(), C.stopPropagation();
const U = P.length > 0, x = !t.required || U;
r({ value: S, questionId: s, type: g }, x), u && u(U);
}, L = t && t.openTextPlaceholder ? t.openTextPlaceholder : "";
if ((l === Ee.failure || l === void 0) && h) return e(xe, {});
const R = l === Ee.inFlight, O = R ? "Preparing your next question" : c;
return e("form", { className: H(i, "ul-card-text", "fade-in-transition", a && !F && "ul-card--unfocused"), id: "text-form", onClick: () => {
a && y !== s && p(s);
}, children: [e(oe, { isRequired: a && (t == null ? void 0 : t.required), message: O, properties: t }), e(he, { properties: t, children: e("div", { className: "ul-card-text", children: e(de, { children: [e("div", { className: "ul-card-text__container", children: e("textarea", { "aria-describedby": "ul-caption", "aria-labelledby": "ul-question", "aria-multiline": "true", "aria-placeholder": L, className: H(R && "ul-card-text__input__loading", ie("ul-card-text__input", o)), "data-gramm": "false", disabled: R, maxLength: 5e3, name: "text", onBlur: (C) => {
C.currentTarget.style.borderColor = Je;
}, onChange: (C) => {
const { value: U } = C.currentTarget;
if (m(), C.preventDefault(), C.stopPropagation(), w(U), a) {
const x = U.trim().length > 0;
r({ value: U, questionId: s, type: g }, x);
}
}, onFocus: (C) => {
C.currentTarget.style.borderColor = v, p(s);
}, placeholder: L, ref: q, role: "textbox", tabIndex: 0 }) }), t.footerHtml && e(Ne, { className: "footer", html: t.footerHtml }), b && e(Ce, { handleSubmit: f, isSubmitDisabled: A }), e(ge, { children: !a && e(ne, { disabled: A || R, onClick: f, children: be(t) }) })] }) }) })] }, s);
}, Fe = 1, rr = 2, tr = 3, qe = (n) => n.type === "av_permission", He = (n) => n.type === "screen_permission", nr = (n, i) => n === void 0 ? Fe : n ? ((c, r) => !(qe(r) ? r.permissionDescriptors : []).includes("camera") || c.getVideoTracks().length > 0)(n, i) ? tr : Fe : rr, Ge = { avStream: null, currentPage: null, mediaRecordingUids: null, nextQuestion: () => {
}, passthroughData: void 0, recordingMediaTypes: void 0, screenPermissionRequested: !1, type: void 0 }, me = cr((n) => ({ ...Ge, reset: () => {
n(Ge);
}, updatePage: (i) => {
n(i);
} }));
function Ue({ currentPage: n, pages: i }) {
const { avStream: c, recordingMediaTypes: r, updatePage: t } = me.getState(), { recorderEventEmitter: s } = J.getState();
s.emit("av.permission", { "permission.descriptors": n.permissionDescriptors, "stream.ready": (g, b) => {
if (c === g) return;
let u = n;
if (g && !n.permissionDescriptors.includes("camera")) {
const h = i.indexOf(n), l = b != null && b.active ? h + 2 : h + 1;
b != null && b.active && r && s.emit("begin.recording", { "recording.media.types": r, "start.recording.callback": (v) => t({ mediaRecordingUids: v }) }), u = i[l];
}
t({ currentPage: u, avStream: g });
} });
}
function Qe({ status: n }) {
const { nextQuestion: i, passthroughData: c, mediaRecordingUids: r, reset: t } = me.getState(), { recorderEventEmitter: s, handleUploadUpdate: g, index: b } = J.getState(), u = { value: { taskStatus: n }, type: "recordedtask", questionId: (c == null ? void 0 : c.questionId) || 1 };
c && s.emit("finish.task", { "begin.callback": (h) => {
g({ mediaRecordingUid: h, isSubmitted: !0, progressPct: 0, isComplete: !1 });
}, "progress.callback": (h, l) => {
g({ mediaRecordingUid: h, progressPct: l.detail, isSubmitted: !1, isComplete: !1 });
}, "upload.callback": (h) => {
h && g({ mediaRecordingUid: h, isComplete: !0, isSubmitted: !0, progressPct: 100 });
}, "passthrough.data": c, "current.index": b, "task.response": u, "task.complete.callback": (h) => {
u.value.taskDurationMillisecond = h, r && (u.value.mediaRecordingUids = r), t(), i(u);
} });
}
function Ae({ pages: n, setIsRequestingPermission: i }) {
const { recorderEventEmitter: c, eventEmitFn: r } = J.getState(), { updatePage: t, currentPage: s, recordingMediaTypes: g, screenPermissionRequested: b } = me.getState();
if (!s) return;
const u = n.indexOf(s);
switch (s.type) {
case "av_permission": {
const h = b ? u + 2 : u + 1;
return b && g && c.emit("begin.recording", { "recording.media.types": g, "start.recording.callback": (l) => {
t({ mediaRecordingUids: l });
} }), void t({ currentPage: n[h] });
}
case "screen_permission":
return void c.emit("screen.permission", { "screen.permission.requested": i, "stream.ready.callback": (h, l) => {
const v = l ? n[u + 1] : s;
l && g && c.emit("begin.recording", { "recording.media.types": g, "start.recording.callback": (o) => {
t({ captureStream: l, mediaRecordingUids: o });
} }), t({ currentPage: v, screenPermissionRequested: !0, captureStream: l });
} });
case "start_task":
return r("recorded.task.start"), c.emit("recorded.task.start"), c.emit("start.task"), void t({ currentPage: n[u + 1], screenPermissionRequested: !0 });
case "complete_task":
return;
}
}
const ir = "ul-permission-graphics-container", sr = "ul-permission-body", ar = H(ir, "ul_recorded-task-inset-spacing"), Le = H("ul-horizontal-button-container", "ul-horizontal-button-container-left"), lr = ({ richTextBody: n }) => e(Ne, { className: "ul-rich-text-body", html: n, id: "ul-task-detail-container" }), De = ({ required: n, skipButtonText: i, bottom: c = !1 }) => n ? null : e(ne, { className: H(c && "ul-skip-button-below", "ul-button-inactive"), onClick: Qe.bind(null, { status: "abandoned" }), children: i || "Skip" }), Oe = (n) => {
const { avStream: i, captureStream: c, recordingMediaTypes: r, updatePage: t } = me.getState(), s = (r == null ? void 0 : r.includes("audio")) || (r == null ? void 0 : r.includes("video"));
te(() => {
const g = setInterval(() => {
s && i && !i.active ? t({ avStream: null, currentPage: n[0] }) : c && c.active || t({ captureStream: void 0, currentPage: n[s ? 1 : 0] });
}, 1e3);
return () => clearInterval(g);
}, [i, c, s, n, r, t]);
}, Vr = ({ content: n, pages: i, required: c }) => {
const { buttonText: r, skipButtonText: t, taskDetail: s } = n;
return Oe(i), e("div", { className: "ul-task-page", children: [s && e(lr, { richTextBody: s }), e("div", { className: Le, children: [e(ne, { onClick: Ae.bind(null, { pages: i }), children: r }), e(De, { required: c, skipButtonText: t })] })] }, "start-task");
}, Hr = ({ content: n, pages: i, properties: c }) => {
const { buttonText: r, skipButtonText: t } = n;
return Oe(i), e("div", { className: "ul-task-page", children: [n.taskDetail && e(lr, { richTextBody: n.taskDetail }), e(he, { properties: c, children: e("div", { className: Le, children: [e(ne, { className: "ul-complete-task-button", onClick: Qe.bind(null, { status: "completed" }), children: r }), e(ne, { className: H("ul-button-inactive"), onClick: Qe.bind(null, { status: "given.up" }), children: t })] }) })] }, "complete-task");
}, Gr = ({ content: n, pages: i, required: c }) => {
const { buttonText: r, skipButtonText: t } = n, [s] = J((u) => [u.tabTitle]), [g, b] = Y(!1);
return e("div", { children: [e("div", { className: ar, children: [e("p", { style: { marginTop: "auto" }, children: n.selectTabText }), e("div", { className: "ul-select-tab-container", children: e("p", { className: sr, children: s }) })] }), e("div", { className: c ? "" : Le, children: [e(ne, { disabled: g, onClick: Ae.bind(null, { pages: i, setIsRequestingPermission: b }), children: r }), e(De, { required: c, skipButtonText: t })] })] });
}, jr = ({ content: n }) => e(Ne, { className: H(ir, "ul_permission_svg_container", "ul_recorded-task-inset-spacing", "ul-center-horizontally"), html: n.svg }, "ul-permission-request-graphic"), Zr = ({ content: n, pages: i, required: c }) => {
const { permissionDeniedHeadline: r, permissionDeniedBody: t, skipButtonText: s, tryAgainButtonText: g } = n, b = qe(i[0]) ? i[0] : null;
return te(() => {
const u = setInterval(() => {
b !== null && Ue({ currentPage: b, pages: i });
}, 1e3);
return () => clearInterval(u);
}, [b, i]), b ? e("div", { children: [e("div", { className: ar, children: e("p", { className: "ul-av-permission-denied-paragraph", children: [e("span", { className: "ul-av-permission-denied-headline", children: r }), e("span", { className: sr, children: t })] }) }), e("div", { className: Le, children: [e(ne, { onClick: Ue.bind(null, { currentPage: b, pages: i }), children: g }), e(De, { required: c, skipButtonText: s })] })] }) : null;
}, zr = ({ stream: n }) => e("video", { autoPlay: !0, className: H("ul_recorded-task-inset-spacing"), id: "ul-record-task-video-preview", muted: !0, ref: (i) => {
i && (i.srcObject = n || null);
} }), Wr = ({ content: n, pages: i, required: c }) => {
const { skipButtonText: r } = n, { avStream: t } = me.getState();
return Oe(i), e("div", { children: [e(zr, { stream: t }), e("div", { className: "ul-vertical-button-container-center", children: [e(ne, { onClick: Ae.bind(null, { pages: i }), children: n.buttonText }), e(De, { bottom: !0, required: c, skipButtonText: r })] })] });
}, Yr = ({ properties: n }) => {
const { pages: i, required: c } = n, { avStream: r, currentPage: t } = me.getState();
if (t === void 0) return null;
switch (t == null ? void 0 : t.type) {
case "av_permission": {
const s = nr(r, t);
return s === Fe ? e(jr, { content: t }) : e(s === rr ? Zr : Wr, { content: t, pages: i, required: c });
}
case "screen_permission":
return e(Gr, { content: t, pages: i, required: c });
case "start_task":
return e(Vr, { content: t, pages: i, required: c });
case "complete_task":
return e(Hr, { content: t, pages: i, properties: n });
default:
return null;
}
}, Kr = ({ className: n, properties: i, next: c, questionId: r }) => {
const t = J(), { surveyId: s, responseGroupUid: g, userId: b, update: u } = t, h = me(), { screenPermissionRequested: l } = h, v = me((p) => p.avStream);
let o = me((p) => p.currentPage);
o || (o = function({ pages: p, userId: k, responseGroupUid: S, surveyId: w, questionId: q, next: F }) {
const { updatePage: P } = me.getState(), { eventEmitFn: A, recorderEventEmitter: m } = J.getState(), f = { questionId: q, surveyId: w, visitorId: k, responseGroupUid: S };
let L = 0;
m.emit("recorded.task.permission.screen"), A("recorded.task.permission.screen"), m.emit("permission.status", { "permission.status.callback": (O, C, U, x) => {
const $ = p[L], { type: I } = $, B = ["screen"];
if (qe($)) {
const { permissionDescriptors: j } = $, re = j == null ? void 0 : j.includes("microphone"), W = j == null ? void 0 : j.includes("camera");
re && B.push("audio"), W && B.push("video"), (O != null && O.active && !W || O != null && O.active && C) && L++;
}
He(p[L]) && U && (L++, m.emit("begin.recording", { "recording.media.types": B, "start.recording.callback": (j) => P({ mediaRecordingUids: j }) })), P({ currentPage: p[L], avStream: O, screenPermissionRequested: U, nextQuestion: F, type: I, passthroughData: f, recordingMediaTypes: B, captureStream: x });
} });
const R = p[L];
return R.type === "av_permission" && Ue({ currentPage: R, pages: p }), R;
}({ questionId: r, surveyId: s, next: (p) => {
c(p, !0);
}, pages: i.pages, responseGroupUid: g, userId: b }));
let N = o.headline, a = o.captionText;
const y = nr(v, o);
return He(o) && l && (N = o.permissionDeniedHeadline, a = o.permissionDeniedCaptionText), qe(o) && y === tr && (N = o.permissionGrantedHeadline, a = o.permissionGrantedCaptionText), te(() => {
u();
}, [u]), e("div", { className: H(n, "ul-center-horizontally", "fade-in-transition"), children: [e(oe, { isRequired: i == null ? void 0 : i.required, message: N, properties: { captionText: a } }), e(de, { children: e(Yr, { properties: i }) })] });
}, Jr = ({ richTextBody: n, plaintextBody: i }) => n ? e(Ne, { className: "ul-rich-text-body", html: n, id: "ul-card__text-url-body-container" }) : i ? e("div", { className: "ul-rich-text-body", id: "ul-card__text-url-body-container", children: (i ? i.split(/\n\s*\n/g) : []).map((c, r) => e("p", { children: c }, r)) }) : null, Xr = ({ className: n, message: i, next: c, properties: r, questionId: t, type: s }) => {
const { visitorAttributes: g, isLongFormSurvey: b } = J((v) => ({ visitorAttributes: v.visitorAttributes, isLongFormSurvey: ce(v.studyType) })), u = (v, o = !1) => {
c({ value: o ? { skipped: !0 } : void 0, questionId: t, type: s }, !0);
}, h = Tr(r && r.buttonUrl, g), l = b && r.promptActionType === ur.NO_BUTTON;
return e("div", { className: H(n, "ul-card__text-url-prompt", "fade-in-transition"), children: [e(oe, { isRequired: b && (r == null ? void 0 : r.required), message: i, properties: { questionHtml: r.questionHtml } }), e(de, { children: e(Jr, { plaintextBody: r == null ? void 0 : r.body, richTextBody: r == null ? void 0 : r.richTextBody }) }), e(he, { properties: r, children: !l && e(ge, { children: e("div", { className: "ul-card-button-group", children: [e("a", { className: "ul-card-text__button ul-card__text-url-prompt-button", href: h, id: "ul-card-text__button", onClick: u, onKeyPress: (v) => {
v.key !== "Enter" && v.key !== " " || c({ value: void 0, questionId: t, type: s }, !0);
}, rel: "noreferrer", role: h ? "link" : "button", tabIndex: 0, target: "_blank", children: be(r) }), r.required === !1 && e("button", { className: "ul-card-skip__button", onClick: (v) => u(0, !0), children: Be(r) })] }) }) })] }, t);
}, et = ({ className: n, questionId: i }) => {
const { border: c, destroy: r, endCard: t, forceBrandedLogo: s, update: g } = J((h) => ({ border: h.border, destroy: h.destroy, endCard: h.endCard, forceBrandedLogo: h.forceBrandedLogo, update: h.update }));
te(() => {
setTimeout(() => {
r(kr);
}, s ? 4e3 : 2e3);
}, [r, s]);
const b = t && t.subheader ? e("p", { className: "ul-caption", children: t.subheader }) : null, u = t && t.headline ? t.headline : "";
return te(() => {
g();
}, [g]), e("div", { className: H(n, "ul-card--thanks", "fade-in-transition"), children: e("div", { children: e("div", { className: "ul-card--thanks-content", children: [e("div", { className: "ul-thanks-check", children: e("svg", { "aria-labelledby": "title", fill: "none", height: "99", viewBox: "0 0 81 99", width: "81", xmlns: "http://www.w3.org/2000/svg", children: [e("path", { clipRule: "evenodd", d: "M40.5 77C60.9345 77 77.5 60.4345 77.5 40C77.5 19.5655 60.9345 3 40.5 3C20.0655 3 3.5 19.5655 3.5 40C3.5 60.4345 20.0655 77 40.5 77ZM80.5 40C80.5 62.0914 62.5914 80 40.5 80C18.4086 80 0.5 62.0914 0.5 40C0.5 17.9086 18.4086 0 40.5 0C62.5914 0 80.5 17.9086 80.5 40Z", fill: c, fillRule: "evenodd" }), e("path", { clipRule: "evenodd", d: "M55.025 22.9046C55.6299 23.4705 55.6616 24.4198 55.0956 25.0247C54.8724 25.2634 54.6109 25.5285 54.3157 25.8277C52.2547 27.9168 48.5549 31.667 44.8135 39.6658C43.2818 42.9406 42.0864 45.8386 41.0823 48.2729C40.6539 49.3116 40.2603 50.2659 39.8902 51.129C39.287 52.5359 38.7248 53.7508 38.1744 54.625C37.8997 55.0613 37.5806 55.4905 37.2017 55.8245C36.8201 56.1607 36.2613 56.5 35.5457 56.5C34.6742 56.5 34.0892 55.9692 33.7774 55.6083C33.4502 55.2296 33.1752 54.7511 32.9396 54.301C32.7305 53.9013 32.5088 53.4367 32.2797 52.9565C32.2429 52.8794 32.2059 52.8019 32.1688 52.7243C31.8942 52.1499 31.5959 51.534 31.2537 50.8868C29.8886 48.305 27.8539 45.2878 24.2343 43.1382C23.522 42.7152 23.2875 41.7949 23.7105 41.0826C24.1335 40.3703 25.0539 40.1358 25.7662 40.5588C30.0556 43.1062 32.4149 46.6647 33.9058 49.4845C34.2776 50.1876 34.5973 50.8487 34.8753 51.4302C34.9147 51.5124 34.9529 51.5926 34.9902 51.6707C35.2222 52.1567 35.4164 52.5637 35.5978 52.9102C35.6151 52.9434 35.6321 52.9754 35.6485 53.0061C36.0565 52.3531 36.5341 51.3434 37.133 49.9468C37.4781 49.1418 37.8572 48.2229 38.2761 47.2074C39.2886 44.7532 40.5339 41.7347 42.0961 38.3948C46.0591 29.9221 50.0641 25.8648 52.1535 23.7482C52.4423 23.4556 52.6944 23.2002 52.9048 22.9753C53.4708 22.3703 54.42 22.3387 55.025 22.9046ZM35.1994 53.5892C35.1994 53.5892 35.2 53.5888 35.2012 53.5879C35.2 53.5889 35.1994 53.5893 35.1994 53.5892ZM36.0666 53.6682C36.0732 53.674 36.0765 53.6775 36.0765 53.6777C36.0765 53.678 36.0732 53.6751 36.0666 53.6682Z", fill: c, fillRule: "evenodd" }), e("path", { d: "M69.5 97C69.5 98.1046 56.2924 99 40 99C23.7076 99 10.5 98.1046 10.5 97C10.5 95.8954 23.7076 95 40 95C56.2924 95 69.5 95.8954 69.5 97Z", fill: "black", fillOpacity: "0.2" })] }) }), e(oe, { message: u }), b] }) }) }, i);
}, Se = "ul-card-video__player_recorder", je = "ul-video-btn", Me = 0, Ze = 1, rt = ({ className: n, message: i, next: c, properties: r, questionId: t, type: s }) => {
const { apiURL: g, envId: b, handleUploadUpdate: u, headers: h, responseGroupUid: l, surveyId: v, update: o, viewDocument: N, visitorId: a } = J((x) => ({ apiURL: x.apiURL, envId: x.envId, handleUploadUpdate: x.handleUploadUpdate, headers: x.headers, responseGroupUid: x.responseGroupUid, surveyId: x.surveyId, update: x.update, viewDocument: x.viewDocument, visitorId: x.userId })), [y, p] = Y(!1), [k, S] = Y(null), [w, q] = Y(null), [F, P] = Y(Me), [A, m] = Y(null), [f, L] = Y(null), R = r && r.videoUrl, O = Te((x) => {
x && m(x);
}, [m]);
te(() => {
const x = new ResizeObserver(() => {
setTimeout(o, 0);
});
return f && x.observe(f), A && x.observe(A), () => {
x.disconnect();
};
}, [o, f, A]);
const C = (x, $) => {
x === le.UPLOAD_STARTED ? (S($[le.UPLOAD_ID]), q($[le.MEDIA_RECORDING_UID]), p(!0)) : x === le.DELETE ? (S(null), q(null), p(!1)) : x === le.UPLOAD_PROGRESS ? isNaN($[le.UPLOAD_PROGRESS_PCT]) ? u({ mediaRecordingUid: $[le.MEDIA_RECORDING_UID], isComplete: !0 }) : u({ mediaRecordingUid: $[le.MEDIA_RECORDING_UID], progressPct: $[le.UPLOAD_PROGRESS_PCT] }) : x === le.UPLOAD_FINISHED && u({ mediaRecordingUid: $[le.MEDIA_RECORDING_UID], isComplete: !0 });
}, U = (x) => {
x.preventDefault(), x.stopPropagation(), document.getElementById(Se) && qr(Se), k && w ? (u({ mediaRecordingUid: w, isSubmitted: !0 }), c({ value: { mediaRecordingUid: w }, questionId: t, type: s }, !0)) : c({ value: null, questionId: t, type: s }, !0);
};
return e("form", { className: H(n, "ul-card--video", "fade-in-transition"), id: "ul-video-interview-form", children: [e(oe, { isRequired: r == null ? void 0 : r.required, message: i, properties: r }), e(de, { children: [e("div", { id: "ul-question-player-container", ref: O, style: { display: F === Me ? "" : "none" }, children: [e("div", { id: Se, ref: (x) => {
if (x && x.children.length === 0 && !r.hideRecordedPrompt) {
L(x);
const $ = Nr(Se, { src: R, type: "application/x-mpegURL" }, void 0, r.mediaType === le.MEDIA_TYPE_AUDIO, g, N);
x.appendChild($);
}
} }), e(he, { properties: r, children: e("button", { className: `${je} ul-record-response-btn`, onClick: (x) => {
x.preventDefault(), x.stopPropagation(), document.getElementById(Se) && Cr(Se), P(Ze);
} }) })] }), e("div", { style: { display: F === Ze ? "block" : "none" }, children: [e("button", { className: `${je} ul-back-question-btn`, onClick: (x) => {
x.preventDefault(), x.stopPropagation(), P(Me);
}, style: { display: r.hideRecordedPrompt ? "none" : "block" } }), e("div", { id: "ul-recorder-player-container", ref: (x) => {
if (x && x.children.length === 0) {
L(x);
const $ = wr(Se, { surveyId: v, responseGroupUid: l, questionId: t, visitorId: a, envId: b }, g, C, void 0, { ...h, "x-ul-video-recorder-origin": "sdk" }, r.mediaType === le.MEDIA_TYPE_AUDIO, N);
x.appendChild($);
}
} })] })] }), e(ge, { children: [e(ne, { disabled: !y, onClick: U, children: be(r) }), e("button", { className: "ul-card-text__button ul-button-inactive ul-card-skip__button", id: "ul-card-video__skip_button", onClick: U, style: { display: r.required ? "none" : "block", ...y ? { display: "none" } : {} }, children: Be(r) })] })] });
}, tt = ({ className: n }) => {
const { uploadProgress: i } = J((s) => ({ uploadProgress: s.uploadProgress }));
let c, r;
Object.values(i).filter((s) => s.isSubmitted).length > 1 ? (c = "Your responses are processing", r = "Please keep this tab open until your responses are fully processed.") : (c = "Your response is processing", r = "Please keep this tab open until your response is fully processed.");
const t = Math.round(Math.min(99, ...Object.values(i).filter((s) => s.isSubmitted).map((s) => s.progressPct || 0)));
return e("div", { className: H(n, "ul-card--uploading", "fade-in-transition"), children: [e("div", { "aria-busy": "true", "aria-label": "Processing...", "aria-live": "polite", className: "ul-loading-spinner-container", role: "progressbar", children: e("div", { className: "ul-loading-spinner", children: [e("div", { className: "first" }), e("div", { className: "second" }), e("div", { className: "third" }), e("div", { className: "fourth" })] }) }), e(oe, { message: `${c} (${t}% complete)` }), e("p", { className: "ul-caption", children: r })] });
}, or = pr(void 0), nt = ({ value: n, children: i }) => e(or.Provider, { value: n, children: i }), it = ({ isRightLabel: n, isLeftLabel: i }) => n ? pe.RIGHT : i ? pe.LEFT : null, st = "Best", at = "Worst", lt = ({ className: n, labels: i, message: c, properties: r, options: t, questionId: s, type: g, next: b }) => {
var q, F, P, A;
const [u, h] = Y(t.map((m, f) => ({ ...m, label: m.label === "" ? `Item ${f + 1}` : m.label, isRightLabel: !1, isLeftLabel: !1 }))), l = (() => {
const m = mr(or);
if (m === void 0) throw new Error("usePreviousResponses must be used within a PreviousResponsesProvider");
return m;
})(), v = { padding: "24px", display: "flex", cursor: "pointer", width: "auto" }, [o, N] = Y(!1);
te(() => {
const m = u.findIndex(($) => $.isRightLabel), f = u.findIndex(($) => $.isLeftLabel), L = m !== -1 && f !== -1;
N(L);
const R = !r.required || r.required && L, O = u.map(($) => ({ id: $.id, option: $.label, selected: it($) })), C = Math.floor(s), U = Object.keys(l).filter(($) => $.startsWith(C.toString())).map(Number).sort(($, I) => $ - I).at(-1), x = [];
if (typeof U == "number") {
const $ = l[U], I = JSON.parse($);
x.push(...I);
}
x.push(O), setTimeout(() => {
b({ value: x, questionId: s, type: g }, R, L), N(!1);
}, L ? 500 : 0);
}, [u]);
const { border: a, useMobileStyling: y, enableCspTrustedTypes: p } = J((m) => ({ border: m.border, useMobileStyling: m.useMobileStyling, enableCspTrustedTypes: m.enableCspTrustedTypes })), k = (m, f) => () => {
o || h((L) => ((R, O, C) => R.map((U) => U.id === O ? { ...U, isRightLabel: C === pe.RIGHT, isLeftLabel: C === pe.LEFT } : C === pe.RIGHT && U.isRightLabel || C === pe.LEFT && U.isLeftLabel ? { ...U, isRightLabel: !1, isLeftLabel: !1 } : U))(L, m, f));
}, S = (q = r.ratingIcons) == null ? void 0 : q[0].svg, w = (F = r.ratingIcons) == null ? void 0 : F[1].svg;
return e("form", { className: H(n, "ul-card-maxdiff", "fade-in-transition"), children: [e(oe, { isRequired: r == null ? void 0 : r.required, message: c, properties: r }), e(de, { children: e("div", { className: "ul-card--maxdiff__question-inner-container", children: [e("div", { className: "ul-card-maxdiff__label", children: (i == null ? void 0 : i.left) || ((P = r == null ? void 0 : r.labels) == null ? void 0 : P.left) || st }), e("div", { children: " " }), e("div", { className: "ul-card-maxdiff__label", children: (i == null ? void 0 : i.right) || ((A = r == null ? void 0 : r.labels) == null ? void 0 : A.right) || at }), u.map(({ id: m, label: f, isLeftLabel: L, isRightLabel: R }) => e(xe, { children: [e("div", { className: "ul-card-maxdiff__option-control " + (w ? "smiley" : ""), children: w ? e(ze, { ariaPressed: L, className: L ? "ul-card-maxdiff__option-btn ul-card-maxdiff__option-selected good" : "ul-card-maxdiff__option-btn", enableCspTrustedTypes: p, html: w, id: `smiley-good-${m}`, onClick: k(m, pe.LEFT) }) : e(Ie, { allowTextEntry: !1, ariaLabel: `bestLabel-${f}`, border: a, choiceStyle: v, error: !1, id: `${m}`, isRadio: !0, isSelected: L, onUserInputChanged: k(m, pe.LEFT), useMobileStyling: y }) }), e("div", { className: "ul-card-maxdiff__option-label", children: f }), e("div", { className: "ul-card-maxdiff__option-control " + (S ? "smiley" : ""), children: S ? e(ze, { ariaPressed: R, className: R ? "ul-card-maxdiff__option-btn ul-card-maxdiff__option-selected bad" : "ul-card-maxdiff__option-btn", enableCspTrustedTypes: p, html: S, id: `smiley-bad-${m}`, onClick: k(m, pe.RIGHT) }) : e(Ie, { allowTextEntry: !1, ariaLabel: `worstLabel-${f}`, border: a, choiceStyle: v, error: !1, id: `${m}`, isRadio: !0, isSelected: R, onUserInputChanged: k(m, pe.RIGHT), useMobileStyling: y }) })] }))] }) })] }, s);
}, ze = ({ enableCspTrustedTypes: n, ariaPressed: i, className: c, html: r, id: t, onClick: s }) => {
const g = ye(() => Xe(r, n), [n, r]);
return e("span", { "aria-pressed": i, className: c, dangerouslySetInnerHTML: { __html: g }, id: t, onClick: s, tabIndex: 0, type: "button" });
}, ot = ({ className: n, labels: i, message: c, next: r, properties: t, questionId: s, type: g, onSubmitButtonClick: b, options: u, showIndividualSubmit: h = !1 }) => {
const l = se(null), v = se(0), o = se(0), N = se(null), a = se(!1), y = se([]), [p, k] = Y(() => (t == null ? void 0 : t.required) === !0), [S, w] = Y(!1), [q, F] = Y(() => u.map((T) => ({ ...T, rank: null }))), P = ye(() => Array.from({ length: u.length }, (T, G) => G + 1), [u.length]), { isLongFormSurvey: A, focusedQuestionId: m, setFocusedQuestionId: f, useMobileStyling: L, isPreview: R, headers: O } = J((T) => ({ useMobileStyling: T.useMobileStyling, isLongFormSurvey: ce(T.studyType), focusedQuestionId: T.focusedQuestionId, setFocusedQuestionId: T.setFocusedQuestionId, isPreview: T.isPreview, headers: T.headers })), C = (O == null ? void 0 : O["userleap-platform"]) === "android", U = L && !R && !C, x = !U && !C, $ = A && m === s, I = (T) => {
T.preventDefault(), _(q), b && b(S);
}, B = (T, G) => {
F((V) => {
const M = parseInt(G), Z = V.map((K) => ({ ...K }));
Z.some((K) => K.rank == null) && Z.forEach((K, ke) => K.rank = ke + 1);
const ae = Z.findIndex((K) => K.id === T);
if (ae === -1) return V;
const ee = Z[ae].rank;
return M < ee ? Z.forEach((K) => {
K.id !== T && K.rank >= M && K.rank < ee && (K.rank = K.rank + 1);
}) : M > ee && Z.forEach((K) => {
K.id !== T && K.rank > ee && K.rank <= M && (K.rank = K.rank - 1);
}), Z[ae].rank = M, Z.sort((K, ke) => K.rank - ke.rank), D(Z), Z;
});
}, j = (T, G) => {
for (let V = 0; V < y.current.length; V++) {
const M = y.current[V];
if (!M || M === N.current) continue;
const Z = M.getBoundingClientRect();
if (T >= Z.left && T <= Z.right && G >= Z.top && G <= Z.bottom) return { element: M, index: V };
}
return null;
}, re = (T) => (G) => {
if (!U) return;
G.preventDefault(), G.stopPropagation(), a.current = !0, l.current = T;
const V = G.