@qaiddev/quests-embed 1.6.0 → 1.6.1
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/embed.d.ts +10 -0
- package/dist/qaid-quests.js +168 -151
- package/dist/qaid-quests.js.map +1 -1
- package/dist/qaid-quests.umd.cjs +3 -3
- package/dist/qaid-quests.umd.cjs.map +1 -1
- package/package.json +1 -1
package/dist/qaid-quests.js
CHANGED
|
@@ -20,13 +20,13 @@ function ee(t) {
|
|
|
20
20
|
const e = t.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
|
|
21
21
|
return e ? { r: parseInt(e[1]), g: parseInt(e[2]), b: parseInt(e[3]) } : null;
|
|
22
22
|
}
|
|
23
|
-
function
|
|
23
|
+
function N(t) {
|
|
24
24
|
const e = ee(t);
|
|
25
25
|
return e && Z(e.r, e.g, e.b) > 0.4 ? "black" : "white";
|
|
26
26
|
}
|
|
27
27
|
function te(t = {}) {
|
|
28
28
|
const e = {};
|
|
29
|
-
return t.accentColor !== void 0 && (e["--qaid-q-accent"] = t.accentColor, e["--qaid-q-accent-text"] =
|
|
29
|
+
return t.accentColor !== void 0 && (e["--qaid-q-accent"] = t.accentColor, e["--qaid-q-accent-text"] = N(t.accentColor)), t.errorColor !== void 0 && (e["--qaid-q-error"] = t.errorColor), t.focusColor !== void 0 && (e["--qaid-q-focus"] = t.focusColor, e["--qaid-q-focus-text"] = N(t.focusColor)), t.modalWidth !== void 0 && (e["--qaid-modal-width"] = `${t.modalWidth}px`), t.backdropOpacity !== void 0 && (e["--qaid-backdrop-opacity"] = String(t.backdropOpacity)), t.fontFamily !== void 0 && (e["--qaid-font-family"] = t.fontFamily), t.fontSize !== void 0 && (e["--qaid-font-size"] = `${t.fontSize}px`), e;
|
|
30
30
|
}
|
|
31
31
|
function ie(t, e) {
|
|
32
32
|
for (const [i, a] of Object.entries(e))
|
|
@@ -38,7 +38,7 @@ function ae() {
|
|
|
38
38
|
function ne(t) {
|
|
39
39
|
return X(t);
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function v(t) {
|
|
42
42
|
let e = null;
|
|
43
43
|
return {
|
|
44
44
|
setInvalid(i) {
|
|
@@ -104,7 +104,7 @@ function se(t, e) {
|
|
|
104
104
|
const n = a.value.trim();
|
|
105
105
|
return !(n.length === 0 || t.minLength && n.length < t.minLength);
|
|
106
106
|
},
|
|
107
|
-
...
|
|
107
|
+
...v(a)
|
|
108
108
|
};
|
|
109
109
|
}
|
|
110
110
|
function oe(t) {
|
|
@@ -147,7 +147,7 @@ function de(t, e) {
|
|
|
147
147
|
const r = n.value === "" ? null : Number(n.value);
|
|
148
148
|
return !(t.required && (r === null || Number.isNaN(r)) || r !== null && !Number.isNaN(r) && (typeof t.min == "number" && r < t.min || typeof t.max == "number" && r > t.max));
|
|
149
149
|
},
|
|
150
|
-
...
|
|
150
|
+
...v(n)
|
|
151
151
|
};
|
|
152
152
|
}
|
|
153
153
|
function le(t, e) {
|
|
@@ -169,8 +169,8 @@ function ce(t, e) {
|
|
|
169
169
|
a.className = "qaid-q-range-value";
|
|
170
170
|
const n = document.createElement("span");
|
|
171
171
|
if (a.appendChild(n), t.unit) {
|
|
172
|
-
const
|
|
173
|
-
|
|
172
|
+
const d = document.createElement("span");
|
|
173
|
+
d.className = "qaid-q-range-unit", d.textContent = t.unit, a.appendChild(d);
|
|
174
174
|
}
|
|
175
175
|
const r = typeof e.initialValue == "number" ? e.initialValue : t.defaultValue ?? t.min, s = document.createElement("input");
|
|
176
176
|
s.className = "qaid-q-range", s.type = "range", s.min = String(t.min), s.max = String(t.max), s.step = String(t.step ?? 1), s.value = String(r), s.setAttribute("aria-label", t.label), s.setAttribute("aria-valuemin", String(t.min)), s.setAttribute("aria-valuemax", String(t.max));
|
|
@@ -179,20 +179,20 @@ function ce(t, e) {
|
|
|
179
179
|
};
|
|
180
180
|
o(), s.addEventListener("input", () => {
|
|
181
181
|
o(), e.onChange(Number(s.value));
|
|
182
|
-
}), s.addEventListener("keydown", (
|
|
183
|
-
|
|
182
|
+
}), s.addEventListener("keydown", (d) => {
|
|
183
|
+
d.key === "Enter" && (d.preventDefault(), e.onSubmit());
|
|
184
184
|
});
|
|
185
185
|
const u = document.createElement("div");
|
|
186
186
|
u.className = "qaid-q-range-bounds";
|
|
187
187
|
const q = document.createElement("span");
|
|
188
188
|
q.textContent = `${t.min}${t.unit ?? ""}`;
|
|
189
|
-
const
|
|
190
|
-
return
|
|
189
|
+
const f = document.createElement("span");
|
|
190
|
+
return f.textContent = `${t.max}${t.unit ?? ""}`, u.appendChild(q), u.appendChild(f), i.appendChild(a), i.appendChild(s), i.appendChild(u), queueMicrotask(() => e.onChange(Number(s.value))), {
|
|
191
191
|
element: i,
|
|
192
192
|
focus: () => s.focus(),
|
|
193
193
|
getValue: () => Number(s.value),
|
|
194
194
|
isValid: () => !0,
|
|
195
|
-
...
|
|
195
|
+
...v(s)
|
|
196
196
|
};
|
|
197
197
|
}
|
|
198
198
|
function ue(t, e) {
|
|
@@ -206,112 +206,112 @@ function ue(t, e) {
|
|
|
206
206
|
focus: () => i.focus(),
|
|
207
207
|
getValue: () => i.value || null,
|
|
208
208
|
isValid: () => t.required ? i.value !== "" : !0,
|
|
209
|
-
...
|
|
209
|
+
...v(i)
|
|
210
210
|
};
|
|
211
211
|
}
|
|
212
212
|
function he(t, e) {
|
|
213
|
-
const i = document.createElement("div"), a = t.imageAlignment ?? "horizontal", r = t.options.some((
|
|
213
|
+
const i = document.createElement("div"), a = t.imageAlignment ?? "horizontal", r = t.options.some((d) => !!d.image) ? a === "vertical" ? " qaid-q-options--image-vertical" : " qaid-q-options--image-horizontal" : "";
|
|
214
214
|
i.className = `qaid-q-options${r}`, i.setAttribute("role", t.multiple ? "group" : "radiogroup"), i.setAttribute("aria-label", t.label), t.required && i.setAttribute("aria-required", "true");
|
|
215
215
|
const s = /* @__PURE__ */ new Set();
|
|
216
216
|
if (t.multiple && Array.isArray(e.initialValue))
|
|
217
|
-
for (const
|
|
217
|
+
for (const d of e.initialValue) s.add(d);
|
|
218
218
|
else !t.multiple && typeof e.initialValue == "string" && s.add(e.initialValue);
|
|
219
219
|
const o = [];
|
|
220
|
-
t.options.forEach((
|
|
221
|
-
const
|
|
222
|
-
|
|
223
|
-
const
|
|
224
|
-
|
|
225
|
-
const f = document.createElement("span");
|
|
226
|
-
if (f.className = "qaid-q-option-body", l.image) {
|
|
227
|
-
const d = document.createElement("img");
|
|
228
|
-
d.className = "qaid-q-option-image", d.src = l.image, d.alt = "", d.loading = "lazy", d.decoding = "async", f.appendChild(d);
|
|
229
|
-
}
|
|
220
|
+
t.options.forEach((d, h) => {
|
|
221
|
+
const l = document.createElement("button");
|
|
222
|
+
l.type = "button", l.className = `qaid-q-option${t.multiple ? " qaid-q-multi" : ""}`, l.dataset.value = d.value, l.setAttribute("role", t.multiple ? "checkbox" : "radio"), l.setAttribute("aria-checked", s.has(d.value) ? "true" : "false"), s.has(d.value) && l.classList.add("qaid-q-selected");
|
|
223
|
+
const m = document.createElement("span");
|
|
224
|
+
m.className = "qaid-q-option-marker", m.setAttribute("aria-hidden", "true");
|
|
230
225
|
const g = document.createElement("span");
|
|
231
|
-
if (g.className = "qaid-q-option-
|
|
232
|
-
const
|
|
233
|
-
|
|
226
|
+
if (g.className = "qaid-q-option-body", d.image) {
|
|
227
|
+
const c = document.createElement("img");
|
|
228
|
+
c.className = "qaid-q-option-image", c.src = d.image, c.alt = "", c.loading = "lazy", c.decoding = "async", g.appendChild(c);
|
|
234
229
|
}
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
230
|
+
const p = document.createElement("span");
|
|
231
|
+
if (p.className = "qaid-q-option-label", p.textContent = d.label, g.appendChild(p), d.description) {
|
|
232
|
+
const c = document.createElement("span");
|
|
233
|
+
c.className = "qaid-q-option-desc", c.textContent = d.description, g.appendChild(c);
|
|
238
234
|
}
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
235
|
+
if (l.appendChild(m), l.appendChild(g), h < 9) {
|
|
236
|
+
const c = document.createElement("span");
|
|
237
|
+
c.className = "qaid-q-option-key", c.textContent = String(h + 1), c.setAttribute("aria-hidden", "true"), l.appendChild(c);
|
|
238
|
+
}
|
|
239
|
+
l.addEventListener("click", () => q(h)), l.addEventListener("keydown", (c) => {
|
|
240
|
+
if (c.key === "ArrowDown" || c.key === "ArrowRight") {
|
|
241
|
+
c.preventDefault(), u((h + 1) % o.length);
|
|
242
242
|
return;
|
|
243
243
|
}
|
|
244
|
-
if (
|
|
245
|
-
|
|
244
|
+
if (c.key === "ArrowUp" || c.key === "ArrowLeft") {
|
|
245
|
+
c.preventDefault(), u((h - 1 + o.length) % o.length);
|
|
246
246
|
return;
|
|
247
247
|
}
|
|
248
|
-
!t.multiple &&
|
|
249
|
-
}), o.push(
|
|
250
|
-
}), i.addEventListener("keydown", (
|
|
251
|
-
const h =
|
|
248
|
+
!t.multiple && c.key === "Enter" && s.size > 0 && (c.preventDefault(), e.onSubmit());
|
|
249
|
+
}), o.push(l), i.appendChild(l);
|
|
250
|
+
}), i.addEventListener("keydown", (d) => {
|
|
251
|
+
const h = d.key;
|
|
252
252
|
if (h.length === 1 && h >= "1" && h <= "9") {
|
|
253
|
-
const
|
|
254
|
-
|
|
253
|
+
const l = parseInt(h, 10) - 1;
|
|
254
|
+
l < o.length && (d.preventDefault(), q(l), u(l));
|
|
255
255
|
}
|
|
256
256
|
});
|
|
257
|
-
function u(
|
|
258
|
-
o[
|
|
257
|
+
function u(d) {
|
|
258
|
+
o[d]?.focus();
|
|
259
259
|
}
|
|
260
|
-
function q(
|
|
261
|
-
const h = t.options[
|
|
262
|
-
t.multiple ? s.has(h) ? s.delete(h) : s.add(h) : (s.clear(), s.add(h)), o.forEach((
|
|
263
|
-
const
|
|
264
|
-
|
|
265
|
-
}), e.onChange(
|
|
260
|
+
function q(d) {
|
|
261
|
+
const h = t.options[d].value;
|
|
262
|
+
t.multiple ? s.has(h) ? s.delete(h) : s.add(h) : (s.clear(), s.add(h)), o.forEach((l) => {
|
|
263
|
+
const m = l.dataset.value, g = s.has(m);
|
|
264
|
+
l.classList.toggle("qaid-q-selected", g), l.setAttribute("aria-checked", g ? "true" : "false");
|
|
265
|
+
}), e.onChange(f()), !t.multiple && e.autoAdvance && setTimeout(() => e.onAutoAdvance(), 180);
|
|
266
266
|
}
|
|
267
|
-
function
|
|
267
|
+
function f() {
|
|
268
268
|
if (t.multiple) return Array.from(s);
|
|
269
|
-
const
|
|
270
|
-
return
|
|
269
|
+
const d = s.values().next();
|
|
270
|
+
return d.done ? null : d.value;
|
|
271
271
|
}
|
|
272
272
|
return {
|
|
273
273
|
element: i,
|
|
274
274
|
focus: () => {
|
|
275
275
|
(o.find((h) => h.classList.contains("qaid-q-selected")) ?? o[0])?.focus();
|
|
276
276
|
},
|
|
277
|
-
getValue: () =>
|
|
277
|
+
getValue: () => f(),
|
|
278
278
|
isValid: () => t.required ? s.size > 0 : !0,
|
|
279
|
-
...
|
|
279
|
+
...v(i)
|
|
280
280
|
};
|
|
281
281
|
}
|
|
282
|
-
function
|
|
282
|
+
function w(t, e) {
|
|
283
283
|
const i = /* @__PURE__ */ Object.create(null), a = [];
|
|
284
284
|
for (const n of t.questions)
|
|
285
|
-
n.visibleIf && !
|
|
285
|
+
n.visibleIf && !C(n.visibleIf, i) || (a.push(n), Object.prototype.hasOwnProperty.call(e, n.id) && (i[n.id] = e[n.id]));
|
|
286
286
|
return a;
|
|
287
287
|
}
|
|
288
288
|
function pe(t, e) {
|
|
289
289
|
const i = {};
|
|
290
|
-
for (const a of
|
|
290
|
+
for (const a of w(t, e))
|
|
291
291
|
Object.prototype.hasOwnProperty.call(e, a.id) && (i[a.id] = e[a.id]);
|
|
292
292
|
return i;
|
|
293
293
|
}
|
|
294
|
-
function
|
|
294
|
+
function C(t, e) {
|
|
295
295
|
if ("allOf" in t) {
|
|
296
296
|
for (const n of t.allOf)
|
|
297
|
-
if (!
|
|
297
|
+
if (!C(n, e)) return !1;
|
|
298
298
|
return !0;
|
|
299
299
|
}
|
|
300
300
|
if ("anyOf" in t) {
|
|
301
301
|
for (const n of t.anyOf)
|
|
302
|
-
if (
|
|
302
|
+
if (C(n, e)) return !0;
|
|
303
303
|
return !1;
|
|
304
304
|
}
|
|
305
305
|
const i = e[t.questionId], a = i != null && !(typeof i == "string" && i.trim() === "") && !(Array.isArray(i) && i.length === 0);
|
|
306
|
-
return "answered" in t ? t.answered ? a : !a : a ? "equals" in t ?
|
|
306
|
+
return "answered" in t ? t.answered ? a : !a : a ? "equals" in t ? y(i, t.equals) : "notEquals" in t ? !y(i, t.notEquals) : "in" in t ? t.in.some((n) => y(i, n)) : !1 : !1;
|
|
307
307
|
}
|
|
308
|
-
function
|
|
308
|
+
function y(t, e) {
|
|
309
309
|
return Array.isArray(t) ? t.some((i) => i === e) : t === e;
|
|
310
310
|
}
|
|
311
|
-
const qe = 360,
|
|
311
|
+
const qe = 360, x = 2;
|
|
312
312
|
function me(t) {
|
|
313
313
|
const e = t.scrollHeight - t.clientHeight;
|
|
314
|
-
return e <=
|
|
314
|
+
return e <= x ? "none" : t.scrollTop <= x ? "top" : t.scrollTop >= e - x ? "bottom" : "middle";
|
|
315
315
|
}
|
|
316
316
|
function fe(t, e) {
|
|
317
317
|
const i = me(t);
|
|
@@ -338,7 +338,7 @@ function be(t, e, i) {
|
|
|
338
338
|
}
|
|
339
339
|
};
|
|
340
340
|
}
|
|
341
|
-
const
|
|
341
|
+
const T = "data-qaid-a11y-live", ve = "position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;", ye = [
|
|
342
342
|
"a[href]",
|
|
343
343
|
"button",
|
|
344
344
|
"input",
|
|
@@ -351,13 +351,13 @@ function xe(t) {
|
|
|
351
351
|
}
|
|
352
352
|
function Ee(t, e) {
|
|
353
353
|
const i = e ? "assertive" : "polite", a = t.querySelector(
|
|
354
|
-
`[${
|
|
354
|
+
`[${T}="${i}"]`
|
|
355
355
|
);
|
|
356
356
|
if (a) return a;
|
|
357
357
|
const r = xe(t).createElement("div");
|
|
358
|
-
return r.setAttribute(
|
|
358
|
+
return r.setAttribute(T, i), r.setAttribute("role", e ? "alert" : "status"), r.setAttribute("aria-live", e ? "assertive" : "polite"), r.setAttribute("aria-atomic", "true"), r.style.cssText = ve, t.appendChild(r), r;
|
|
359
359
|
}
|
|
360
|
-
function
|
|
360
|
+
function b(t, e, i = {}) {
|
|
361
361
|
const a = Ee(t, !!i.assertive);
|
|
362
362
|
a.textContent = "", a.textContent = e;
|
|
363
363
|
}
|
|
@@ -375,12 +375,12 @@ function Ce(t) {
|
|
|
375
375
|
}
|
|
376
376
|
return !1;
|
|
377
377
|
}
|
|
378
|
-
function
|
|
378
|
+
function L(t) {
|
|
379
379
|
return Array.from(
|
|
380
380
|
t.querySelectorAll(ye)
|
|
381
381
|
).filter((i) => !(i.getAttribute("tabindex") === "-1" || i instanceof HTMLInputElement && i.type === "hidden" || i instanceof HTMLAnchorElement && !i.getAttribute("href") || we(i) || Ce(i)));
|
|
382
382
|
}
|
|
383
|
-
function
|
|
383
|
+
function D(t) {
|
|
384
384
|
let e = t.activeElement;
|
|
385
385
|
for (; e && e.shadowRoot && e.shadowRoot.activeElement; )
|
|
386
386
|
e = e.shadowRoot.activeElement;
|
|
@@ -391,16 +391,16 @@ function ke(t) {
|
|
|
391
391
|
let i = !1;
|
|
392
392
|
const a = (r) => {
|
|
393
393
|
if (r.key !== "Tab") return;
|
|
394
|
-
const s =
|
|
394
|
+
const s = L(t);
|
|
395
395
|
if (s.length === 0) {
|
|
396
396
|
r.preventDefault(), t.focus();
|
|
397
397
|
return;
|
|
398
398
|
}
|
|
399
|
-
const o = s[0], u = s[s.length - 1], q =
|
|
400
|
-
r.shiftKey ? (!
|
|
399
|
+
const o = s[0], u = s[s.length - 1], q = D(e), f = q ? s.indexOf(q) !== -1 : !1;
|
|
400
|
+
r.shiftKey ? (!f || q === o) && (r.preventDefault(), u.focus()) : (!f || q === u) && (r.preventDefault(), o.focus());
|
|
401
401
|
};
|
|
402
402
|
t.addEventListener("keydown", a);
|
|
403
|
-
const n =
|
|
403
|
+
const n = L(t);
|
|
404
404
|
return n.length > 0 ? n[0].focus() : (t.hasAttribute("tabindex") || (t.setAttribute("tabindex", "-1"), i = !0), t.focus()), {
|
|
405
405
|
release() {
|
|
406
406
|
t.removeEventListener("keydown", a), i && (t.removeAttribute("tabindex"), i = !1);
|
|
@@ -408,7 +408,7 @@ function ke(t) {
|
|
|
408
408
|
};
|
|
409
409
|
}
|
|
410
410
|
function Ae() {
|
|
411
|
-
return
|
|
411
|
+
return D(document);
|
|
412
412
|
}
|
|
413
413
|
function Se(t) {
|
|
414
414
|
if (!(!t || typeof t.focus != "function"))
|
|
@@ -450,8 +450,8 @@ function Te(t) {
|
|
|
450
450
|
}
|
|
451
451
|
};
|
|
452
452
|
}
|
|
453
|
-
const
|
|
454
|
-
function
|
|
453
|
+
const O = "qaid_visitor_id";
|
|
454
|
+
function P() {
|
|
455
455
|
const t = typeof crypto < "u" ? crypto : void 0;
|
|
456
456
|
if (t && typeof t.randomUUID == "function") return t.randomUUID();
|
|
457
457
|
const e = new Uint8Array(16);
|
|
@@ -465,10 +465,10 @@ function z() {
|
|
|
465
465
|
}
|
|
466
466
|
function Le() {
|
|
467
467
|
try {
|
|
468
|
-
let t = localStorage.getItem(
|
|
469
|
-
return t || (t =
|
|
468
|
+
let t = localStorage.getItem(O);
|
|
469
|
+
return t || (t = P(), localStorage.setItem(O, t)), t;
|
|
470
470
|
} catch {
|
|
471
|
-
return
|
|
471
|
+
return P();
|
|
472
472
|
}
|
|
473
473
|
}
|
|
474
474
|
const Oe = '<svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" fill="none"/></svg>', Pe = '<svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l4 4L19 7" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>';
|
|
@@ -535,6 +535,9 @@ class ze {
|
|
|
535
535
|
scrollCueEl = null;
|
|
536
536
|
overflow = null;
|
|
537
537
|
footerEl = null;
|
|
538
|
+
// The step's primary (Next / Submit) button. Kept so an answer can relabel
|
|
539
|
+
// it in place, see `syncPrimaryLabel`.
|
|
540
|
+
primaryBtn = null;
|
|
538
541
|
savingEl = null;
|
|
539
542
|
backdropEl = null;
|
|
540
543
|
currentInput = null;
|
|
@@ -728,7 +731,7 @@ ${s}
|
|
|
728
731
|
if (!this.cardEl) return;
|
|
729
732
|
this.cardEl.replaceChildren();
|
|
730
733
|
const e = document.createElement("p");
|
|
731
|
-
e.className = "qaid-q-description", e.textContent = "Loading…", this.cardEl.appendChild(e), this.shadowRoot &&
|
|
734
|
+
e.className = "qaid-q-description", e.textContent = "Loading…", this.cardEl.appendChild(e), this.shadowRoot && b(this.shadowRoot, "Loading");
|
|
732
735
|
}
|
|
733
736
|
renderError(e) {
|
|
734
737
|
if (!this.cardEl) return;
|
|
@@ -736,7 +739,7 @@ ${s}
|
|
|
736
739
|
const i = document.createElement("h3");
|
|
737
740
|
i.className = "qaid-q-title", i.textContent = "Couldn't load form";
|
|
738
741
|
const a = e instanceof Error ? e.message : String(e), n = document.createElement("p");
|
|
739
|
-
n.className = "qaid-q-description", n.textContent = a, this.cardEl.appendChild(i), this.cardEl.appendChild(n), this.shadowRoot &&
|
|
742
|
+
n.className = "qaid-q-description", n.textContent = a, this.cardEl.appendChild(i), this.cardEl.appendChild(n), this.shadowRoot && b(this.shadowRoot, `Couldn't load form. ${a}`, {
|
|
740
743
|
assertive: !0
|
|
741
744
|
});
|
|
742
745
|
}
|
|
@@ -752,25 +755,25 @@ ${s}
|
|
|
752
755
|
u.className = "qaid-q-saving-dot";
|
|
753
756
|
const q = document.createElement("span");
|
|
754
757
|
q.textContent = "Saving…", this.savingEl.appendChild(u), this.savingEl.appendChild(q), this.stepCounterEl = document.createElement("div"), this.stepCounterEl.className = "qaid-q-step-counter", this.progressEl = document.createElement("div"), this.progressEl.className = i ? "qaid-q-progress qaid-q-progress--inline" : "qaid-q-progress", this.progressFillEl = document.createElement("div"), this.progressFillEl.className = "qaid-q-progress-fill", this.progressEl.appendChild(this.progressFillEl);
|
|
755
|
-
const
|
|
756
|
-
if (
|
|
757
|
-
const
|
|
758
|
-
|
|
758
|
+
const f = n || o;
|
|
759
|
+
if (f) {
|
|
760
|
+
const d = document.createElement("div");
|
|
761
|
+
d.className = "qaid-q-header";
|
|
759
762
|
const h = document.createElement("div");
|
|
760
763
|
n && (this.titleEl = document.createElement("h2"), this.titleEl.className = "qaid-q-title", this.titleEl.textContent = this.questionnaire.title, h.appendChild(this.titleEl));
|
|
761
|
-
const
|
|
762
|
-
if (
|
|
763
|
-
const
|
|
764
|
-
|
|
764
|
+
const l = document.createElement("div");
|
|
765
|
+
if (l.style.display = "flex", l.style.alignItems = "center", l.style.gap = "0.5rem", i || (l.appendChild(this.savingEl), e || l.appendChild(this.stepCounterEl)), s) {
|
|
766
|
+
const m = document.createElement("button");
|
|
767
|
+
m.type = "button", m.className = "qaid-q-close", m.setAttribute("aria-label", "Close form"), m.innerHTML = Oe, m.addEventListener("click", () => this.close()), l.appendChild(m);
|
|
765
768
|
}
|
|
766
|
-
|
|
769
|
+
d.appendChild(h), d.appendChild(l), this.cardEl.appendChild(d);
|
|
767
770
|
}
|
|
768
771
|
if (!this.isUserContainer && this.cardEl && (this.titleEl ? (this.titleEl.id = this.titleEl.id || "qaid-q-dialog-title", this.cardEl.setAttribute("aria-labelledby", this.titleEl.id), this.cardEl.removeAttribute("aria-label")) : (this.cardEl.removeAttribute("aria-labelledby"), this.cardEl.setAttribute(
|
|
769
772
|
"aria-label",
|
|
770
773
|
this.questionnaire.title ?? "Questionnaire"
|
|
771
774
|
))), r) {
|
|
772
|
-
const
|
|
773
|
-
|
|
775
|
+
const d = document.createElement("p");
|
|
776
|
+
d.className = "qaid-q-description", d.textContent = this.questionnaire.description, d.style.marginTop = f ? "-0.5rem" : "0", d.style.marginBottom = "0.75rem", this.cardEl.appendChild(d);
|
|
774
777
|
}
|
|
775
778
|
!i && !e && this.cardEl.appendChild(this.progressEl), this.bodyEl = document.createElement("div"), this.bodyEl.className = "qaid-q-body", this.cardEl.appendChild(this.bodyEl), this.footerEl = document.createElement("div"), this.footerEl.className = "qaid-q-footer", this.cardEl.appendChild(this.footerEl), this.scrollCueEl = document.createElement("div"), this.scrollCueEl.className = "qaid-q-scroll-cue", this.scrollCueEl.setAttribute("aria-hidden", "true"), this.scrollCueEl.hidden = !0, this.scrollCueEl.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>', this.bodyEl.appendChild(this.scrollCueEl), this.overflow = be(this.bodyEl, this.cardEl, this.scrollCueEl);
|
|
776
779
|
}
|
|
@@ -788,56 +791,56 @@ ${s}
|
|
|
788
791
|
this.stepIndex >= i && (this.stepIndex = i - 1);
|
|
789
792
|
const a = this.stepIndex, n = this.visibleQuestions[a];
|
|
790
793
|
if (this.stepCounterEl && (this.stepCounterEl.textContent = `${a + 1} / ${i}`), this.progressFillEl) {
|
|
791
|
-
const
|
|
792
|
-
this.progressFillEl.style.width = `${
|
|
794
|
+
const p = (a + 1) / i * 100;
|
|
795
|
+
this.progressFillEl.style.width = `${p}%`;
|
|
793
796
|
}
|
|
794
797
|
this.progressEl && (this.progressEl.setAttribute("role", "progressbar"), this.progressEl.setAttribute("aria-label", "Progress"), this.progressEl.setAttribute("aria-valuemin", "0"), this.progressEl.setAttribute("aria-valuemax", String(i)), this.progressEl.setAttribute("aria-valuenow", String(a + 1)), this.progressEl.setAttribute(
|
|
795
798
|
"aria-valuetext",
|
|
796
799
|
`Question ${a + 1} of ${i}`
|
|
797
|
-
)), this.shadowRoot && i > 1 &&
|
|
800
|
+
)), this.shadowRoot && i > 1 && b(this.shadowRoot, `Step ${a + 1} of ${i}`);
|
|
798
801
|
const r = document.createElement("div");
|
|
799
802
|
r.className = "qaid-q-step", r.setAttribute("role", "group"), r.setAttribute("aria-labelledby", `qaid-q-label-${a}`);
|
|
800
803
|
const s = document.createElement("label");
|
|
801
804
|
if (s.id = `qaid-q-label-${a}`, s.className = "qaid-q-label", s.textContent = n.label, n.required) {
|
|
802
|
-
const
|
|
803
|
-
|
|
805
|
+
const p = document.createElement("span");
|
|
806
|
+
p.className = "qaid-q-required", p.textContent = "*", p.setAttribute("aria-label", "required"), s.appendChild(p);
|
|
804
807
|
}
|
|
805
808
|
if (r.appendChild(s), n.description) {
|
|
806
|
-
const
|
|
807
|
-
|
|
809
|
+
const p = document.createElement("p");
|
|
810
|
+
p.className = "qaid-q-description", p.textContent = n.description, r.appendChild(p);
|
|
808
811
|
}
|
|
809
812
|
const o = document.createElement("p");
|
|
810
813
|
o.className = "qaid-q-error", o.id = `qaid-q-error-${a}`, o.setAttribute("aria-live", "polite");
|
|
811
|
-
const u = this.answers[n.id] ?? null, q =
|
|
814
|
+
const u = this.answers[n.id] ?? null, q = re({
|
|
812
815
|
question: n,
|
|
813
816
|
initialValue: u,
|
|
814
|
-
onChange: (
|
|
815
|
-
this.handleAnswerChange(n,
|
|
817
|
+
onChange: (p) => {
|
|
818
|
+
this.handleAnswerChange(n, p), o.textContent && (o.textContent = "", this.currentInput?.clearInvalid());
|
|
816
819
|
},
|
|
817
820
|
onSubmit: () => this.advance(n, o),
|
|
818
821
|
onAutoAdvance: () => this.advance(n, o),
|
|
819
822
|
autoAdvance: this.config.autoAdvance
|
|
820
823
|
});
|
|
821
|
-
this.currentInput =
|
|
822
|
-
const
|
|
823
|
-
const
|
|
824
|
-
return
|
|
825
|
-
})() : null,
|
|
826
|
-
if (
|
|
827
|
-
this.footerEl.classList.add("qaid-q-footer--inline-progress"),
|
|
824
|
+
this.currentInput = q, r.appendChild(q.element), r.appendChild(o), this.bodyEl.replaceChildren(r), this.scrollCueEl && this.bodyEl.appendChild(this.scrollCueEl), this.bodyEl.scrollTop = 0, this.overflow?.refresh(), this.footerEl.replaceChildren();
|
|
825
|
+
const d = !(!!this.questionnaire.hideProgress || this.questionnaire.questions.length <= 1) && this.effectiveProgressPosition() === "bottom", h = a > 0 ? (() => {
|
|
826
|
+
const p = document.createElement("button");
|
|
827
|
+
return p.type = "button", p.className = "qaid-q-btn qaid-q-btn-secondary", p.textContent = this.questionnaire.backLabel ?? "Back", p.addEventListener("click", () => this.back()), p;
|
|
828
|
+
})() : null, l = document.createElement("button");
|
|
829
|
+
if (l.type = "button", l.className = "qaid-q-btn qaid-q-btn-primary", this.primaryBtn = l, this.syncPrimaryLabel(), l.addEventListener("click", () => this.advance(n, o)), d)
|
|
830
|
+
this.footerEl.classList.add("qaid-q-footer--inline-progress"), h && this.footerEl.appendChild(h), this.progressEl && this.footerEl.appendChild(this.progressEl), this.savingEl && this.footerEl.appendChild(this.savingEl), this.stepCounterEl && this.footerEl.appendChild(this.stepCounterEl), this.footerEl.appendChild(l);
|
|
828
831
|
else {
|
|
829
832
|
this.footerEl.classList.remove("qaid-q-footer--inline-progress");
|
|
830
|
-
const
|
|
831
|
-
|
|
832
|
-
const
|
|
833
|
-
|
|
833
|
+
const p = document.createElement("div");
|
|
834
|
+
p.className = "qaid-q-footer-left";
|
|
835
|
+
const c = document.createElement("div");
|
|
836
|
+
c.className = "qaid-q-footer-right", h && p.appendChild(h), c.appendChild(l), this.footerEl.appendChild(p), this.footerEl.appendChild(c);
|
|
834
837
|
}
|
|
835
|
-
const
|
|
836
|
-
this.hasRenderedStep = !0, !e && (!
|
|
838
|
+
const m = !this.hasRenderedStep;
|
|
839
|
+
this.hasRenderedStep = !0, !e && (!m || this.config.autoFocus) && requestAnimationFrame(() => q.focus());
|
|
837
840
|
}
|
|
838
841
|
renderDone() {
|
|
839
842
|
if (!this.cardEl || !this.questionnaire) return;
|
|
840
|
-
this.cardEl.replaceChildren();
|
|
843
|
+
this.cardEl.replaceChildren(), this.primaryBtn = null;
|
|
841
844
|
const e = document.createElement("div");
|
|
842
845
|
e.className = "qaid-q-done";
|
|
843
846
|
const i = document.createElement("div");
|
|
@@ -855,7 +858,7 @@ ${s}
|
|
|
855
858
|
}
|
|
856
859
|
if (this.cardEl.appendChild(e), requestAnimationFrame(() => a.focus()), this.shadowRoot) {
|
|
857
860
|
const r = this.questionnaire.thankYouMessage ? `${n}. ${this.questionnaire.thankYouMessage}` : n;
|
|
858
|
-
|
|
861
|
+
b(this.shadowRoot, r);
|
|
859
862
|
}
|
|
860
863
|
}
|
|
861
864
|
/**
|
|
@@ -865,7 +868,7 @@ ${s}
|
|
|
865
868
|
* if needed) without the visitor re-entering anything.
|
|
866
869
|
*/
|
|
867
870
|
renderSubmitError() {
|
|
868
|
-
if (this.state = "SUBMIT_FAILED", !this.cardEl) return;
|
|
871
|
+
if (this.state = "SUBMIT_FAILED", this.primaryBtn = null, !this.cardEl) return;
|
|
869
872
|
this.cardEl.replaceChildren();
|
|
870
873
|
const e = document.createElement("div");
|
|
871
874
|
e.className = "qaid-q-submit-error";
|
|
@@ -886,7 +889,7 @@ ${s}
|
|
|
886
889
|
const u = document.createElement("button");
|
|
887
890
|
u.type = "button", u.className = "qaid-q-btn qaid-q-btn-secondary", u.textContent = "Close", u.addEventListener("click", () => this.close()), s.appendChild(u);
|
|
888
891
|
}
|
|
889
|
-
e.appendChild(s), this.cardEl.appendChild(e), requestAnimationFrame(() => i.focus()), this.shadowRoot &&
|
|
892
|
+
e.appendChild(s), this.cardEl.appendChild(e), requestAnimationFrame(() => i.focus()), this.shadowRoot && b(this.shadowRoot, `${a}. ${r}`, { assertive: !0 });
|
|
890
893
|
}
|
|
891
894
|
// ------------------------------------------------------------------
|
|
892
895
|
// Navigation
|
|
@@ -910,10 +913,24 @@ ${s}
|
|
|
910
913
|
// Answer handling + autosave
|
|
911
914
|
// ------------------------------------------------------------------
|
|
912
915
|
recomputeVisible() {
|
|
913
|
-
this.questionnaire && (this.visibleQuestions =
|
|
916
|
+
this.questionnaire && (this.visibleQuestions = w(this.questionnaire, this.answers));
|
|
917
|
+
}
|
|
918
|
+
/**
|
|
919
|
+
* Label the step's primary button for what pressing it will do: "Submit"
|
|
920
|
+
* when no question after this one is visible under the current answers,
|
|
921
|
+
* "Next" otherwise. Uses the same test as `advance()`, so the two cannot
|
|
922
|
+
* disagree. Called on draw AND on every answer, because an answer can
|
|
923
|
+
* reveal a follow-up (Submit → Next) or hide the last one (Next → Submit).
|
|
924
|
+
* Edits the one button in place — no redraw, so focus and typed text stay.
|
|
925
|
+
*/
|
|
926
|
+
syncPrimaryLabel() {
|
|
927
|
+
const e = this.primaryBtn;
|
|
928
|
+
if (!e || !this.questionnaire) return;
|
|
929
|
+
const a = this.stepIndex >= this.visibleQuestions.length - 1 ? this.questionnaire.submitLabel ?? "Submit" : this.questionnaire.nextLabel ?? "Next";
|
|
930
|
+
e.textContent !== a && (e.textContent = a);
|
|
914
931
|
}
|
|
915
932
|
handleAnswerChange(e, i, a = {}) {
|
|
916
|
-
this.answers[e.id] = i, this.recomputeVisible();
|
|
933
|
+
this.answers[e.id] = i, this.recomputeVisible(), this.syncPrimaryLabel();
|
|
917
934
|
const n = e.type === "text" || e.type === "currency" || e.type === "range";
|
|
918
935
|
if (a.immediate || !n) {
|
|
919
936
|
this.flushPendingSave(), this.saveAnswer(e.id, i);
|
|
@@ -1117,7 +1134,7 @@ ${s}
|
|
|
1117
1134
|
const i = new Set(e.questions.map((o) => o.id)), a = {};
|
|
1118
1135
|
for (const [o, u] of Object.entries(this.answers))
|
|
1119
1136
|
i.has(o) && (a[o] = u);
|
|
1120
|
-
const n =
|
|
1137
|
+
const n = w(e, a);
|
|
1121
1138
|
if (n.length === 0) return !1;
|
|
1122
1139
|
this.flushPendingSave();
|
|
1123
1140
|
const r = this.getCurrentQuestionId();
|
|
@@ -1155,7 +1172,7 @@ function De(t) {
|
|
|
1155
1172
|
return "Please choose a value.";
|
|
1156
1173
|
}
|
|
1157
1174
|
}
|
|
1158
|
-
function
|
|
1175
|
+
function j(t) {
|
|
1159
1176
|
return document.querySelector(t)?.textContent?.trim() ?? "";
|
|
1160
1177
|
}
|
|
1161
1178
|
function je() {
|
|
@@ -1167,33 +1184,33 @@ function je() {
|
|
|
1167
1184
|
if (!e) return null;
|
|
1168
1185
|
try {
|
|
1169
1186
|
const i = JSON.parse(e);
|
|
1170
|
-
return i.cssSelector && !i.css && (i.css =
|
|
1187
|
+
return i.cssSelector && !i.css && (i.css = j(i.cssSelector), delete i.cssSelector), i;
|
|
1171
1188
|
} catch {
|
|
1172
1189
|
return null;
|
|
1173
1190
|
}
|
|
1174
1191
|
}
|
|
1175
|
-
function
|
|
1192
|
+
function k(t, e, i) {
|
|
1176
1193
|
console.warn(
|
|
1177
1194
|
`[quests-embed] Ignoring ${t}="${e}": expected ${i}.`
|
|
1178
1195
|
);
|
|
1179
1196
|
}
|
|
1180
|
-
function
|
|
1197
|
+
function z(t, e) {
|
|
1181
1198
|
if (e !== null) {
|
|
1182
1199
|
if (e === "true") return !0;
|
|
1183
1200
|
if (e === "false") return !1;
|
|
1184
|
-
|
|
1201
|
+
k(t, e, '"true" or "false"');
|
|
1185
1202
|
}
|
|
1186
1203
|
}
|
|
1187
1204
|
function Ve(t, e, i) {
|
|
1188
1205
|
if (e !== null) {
|
|
1189
1206
|
if (i.includes(e)) return e;
|
|
1190
|
-
|
|
1207
|
+
k(t, e, i.map((a) => `"${a}"`).join(" or "));
|
|
1191
1208
|
}
|
|
1192
1209
|
}
|
|
1193
1210
|
function He(t) {
|
|
1194
1211
|
return typeof t == "object" && t !== null && !Array.isArray(t);
|
|
1195
1212
|
}
|
|
1196
|
-
function
|
|
1213
|
+
function E(t, e, i, a = () => !0) {
|
|
1197
1214
|
if (e === null) return;
|
|
1198
1215
|
let n = null;
|
|
1199
1216
|
try {
|
|
@@ -1202,31 +1219,31 @@ function w(t, e, i, a = () => !0) {
|
|
|
1202
1219
|
n = null;
|
|
1203
1220
|
}
|
|
1204
1221
|
if (He(n) && a(n)) return n;
|
|
1205
|
-
|
|
1222
|
+
k(t, e, i);
|
|
1206
1223
|
}
|
|
1207
1224
|
function Re(t) {
|
|
1208
1225
|
const e = t.getAttribute("data-endpoint");
|
|
1209
1226
|
if (!e) return null;
|
|
1210
|
-
const i = t.getAttribute("data-config-url"), a = t.getAttribute("data-api-key"), n = t.getAttribute("data-container"), r = t.getAttribute("data-zindex"), s = t.getAttribute("data-accent-color"), o = t.getAttribute("data-error-color"), u = t.getAttribute("data-focus-color"), q = t.getAttribute("data-positive-color"),
|
|
1227
|
+
const i = t.getAttribute("data-config-url"), a = t.getAttribute("data-api-key"), n = t.getAttribute("data-container"), r = t.getAttribute("data-zindex"), s = t.getAttribute("data-accent-color"), o = t.getAttribute("data-error-color"), u = t.getAttribute("data-focus-color"), q = t.getAttribute("data-positive-color"), f = t.getAttribute("data-negative-color"), d = t.getAttribute("data-marker-color"), h = t.getAttribute("data-modal-width"), l = t.getAttribute("data-backdrop-opacity"), m = t.getAttribute("data-font-family"), g = t.getAttribute("data-font-size"), p = t.getAttribute("data-css"), c = t.getAttribute("data-css-selector"), V = t.getAttribute("data-auto-advance"), A = t.getAttribute("data-save-debounce-ms"), H = t.getAttribute("data-theme-url"), S = t.getAttribute("data-preset"), I = t.getAttribute("data-theme"), R = t.getAttribute("data-unstyled"), $ = z(
|
|
1211
1228
|
"data-auto-focus",
|
|
1212
1229
|
t.getAttribute("data-auto-focus")
|
|
1213
|
-
), U =
|
|
1230
|
+
), U = z(
|
|
1214
1231
|
"data-animate",
|
|
1215
1232
|
t.getAttribute("data-animate")
|
|
1216
1233
|
), F = Ve(
|
|
1217
1234
|
"data-progress-position",
|
|
1218
1235
|
t.getAttribute("data-progress-position"),
|
|
1219
1236
|
["top", "bottom"]
|
|
1220
|
-
), M =
|
|
1237
|
+
), M = E(
|
|
1221
1238
|
"data-questionnaire",
|
|
1222
1239
|
t.getAttribute("data-questionnaire"),
|
|
1223
1240
|
'a JSON questionnaire with a "questions" array',
|
|
1224
|
-
(
|
|
1225
|
-
), Q =
|
|
1241
|
+
(K) => Array.isArray(K.questions)
|
|
1242
|
+
), Q = E(
|
|
1226
1243
|
"data-theme-document",
|
|
1227
1244
|
t.getAttribute("data-theme-document"),
|
|
1228
1245
|
"a JSON theme object"
|
|
1229
|
-
),
|
|
1246
|
+
), B = E(
|
|
1230
1247
|
"data-metadata",
|
|
1231
1248
|
t.getAttribute("data-metadata"),
|
|
1232
1249
|
"a JSON object"
|
|
@@ -1243,27 +1260,27 @@ function Re(t) {
|
|
|
1243
1260
|
error: o ?? void 0,
|
|
1244
1261
|
focus: u ?? void 0,
|
|
1245
1262
|
positive: q ?? void 0,
|
|
1246
|
-
negative:
|
|
1247
|
-
marker:
|
|
1263
|
+
negative: f ?? void 0,
|
|
1264
|
+
marker: d ?? void 0
|
|
1248
1265
|
},
|
|
1249
1266
|
modalWidth: h ? parseInt(h, 10) : void 0,
|
|
1250
|
-
backdropOpacity:
|
|
1251
|
-
fontFamily:
|
|
1252
|
-
fontSize:
|
|
1267
|
+
backdropOpacity: l ? parseFloat(l) : void 0,
|
|
1268
|
+
fontFamily: m ?? void 0,
|
|
1269
|
+
fontSize: g ? parseInt(g, 10) : void 0,
|
|
1253
1270
|
// Inline CSS wins over a selector, as `css` wins over `cssSelector` in
|
|
1254
1271
|
// the JSON block.
|
|
1255
|
-
css:
|
|
1256
|
-
autoAdvance:
|
|
1257
|
-
saveDebounceMs:
|
|
1272
|
+
css: p || (c ? j(c) : void 0),
|
|
1273
|
+
autoAdvance: V === "true" ? !0 : void 0,
|
|
1274
|
+
saveDebounceMs: A ? parseInt(A, 10) : void 0,
|
|
1258
1275
|
autoFocus: $,
|
|
1259
1276
|
animate: U,
|
|
1260
1277
|
progressPosition: F,
|
|
1261
1278
|
themeUrl: H ?? void 0,
|
|
1262
1279
|
themeDocument: Q,
|
|
1263
|
-
preset:
|
|
1264
|
-
theme:
|
|
1280
|
+
preset: S || void 0,
|
|
1281
|
+
theme: I || void 0,
|
|
1265
1282
|
unstyled: R === "true" ? !0 : void 0,
|
|
1266
|
-
metadata:
|
|
1283
|
+
metadata: B
|
|
1267
1284
|
};
|
|
1268
1285
|
}
|
|
1269
1286
|
if (typeof document < "u") {
|
|
@@ -1275,8 +1292,8 @@ if (typeof document < "u") {
|
|
|
1275
1292
|
}
|
|
1276
1293
|
export {
|
|
1277
1294
|
ze as QaidQuests,
|
|
1278
|
-
|
|
1295
|
+
C as evaluateRule,
|
|
1279
1296
|
pe as getVisibleAnswers,
|
|
1280
|
-
|
|
1297
|
+
w as getVisibleQuestions
|
|
1281
1298
|
};
|
|
1282
1299
|
//# sourceMappingURL=qaid-quests.js.map
|