survey-vue3-ui
Version:
survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.
1,460 lines • 284 kB
JavaScript
var Me = Object.defineProperty;
var Ie = (u, e, n) => e in u ? Me(u, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : u[e] = n;
var J = (u, e, n) => (Ie(u, typeof e != "symbol" ? e + "" : e, n), n);
import { defineComponent as y, computed as H, openBlock as i, createBlock as g, resolveDynamicComponent as ce, normalizeProps as ue, guardReactiveProps as de, createSlots as Ve, renderList as V, withCtx as D, renderSlot as x, shallowReactive as Se, watch as W, onBeforeUnmount as O, onMounted as B, ref as f, shallowRef as E, watchEffect as Re, triggerRef as te, unref as w, isRef as Te, nextTick as ge, createElementBlock as a, normalizeClass as r, createVNode as c, createCommentVNode as p, Fragment as M, mergeProps as $, normalizeStyle as k, createElementVNode as v, onUnmounted as P, withDirectives as Z, vShow as A, toDisplayString as I, vModelCheckbox as oe, vModelRadio as ye, vModelSelect as Be, onUpdated as z, vModelText as Ze, getCurrentInstance as he, createStaticVNode as $e, toRaw as De, Teleport as Ae, useSlots as Pe } from "vue";
import { Base as Ne, ScrollViewModel as Ee, RendererFactory as G, Helpers as We, DropdownMultiSelectListModel as Fe, doKey2ClickUp as qe, createSvg as Oe, doKey2ClickDown as ze, doKey2ClickBlur as Ue, ActionDropdownViewModel as Qe, createPopupViewModel as Ke, SurveyProgressModel as me, ProgressButtonsResponsivityManager as je, addIconsToThemeSet as we, SvgRegistry as _, PopupSurveyModel as Ge, settings as ne, createPopupModalViewModel as Xe, ButtonGroupItemModel as Je, SurveyModel as Ye } from "survey-core";
const ee = class ee {
constructor() {
J(this, "creatorHash", {});
}
registerComponent(e, n) {
this.creatorHash[e] = n;
}
getComponent(e) {
return this.creatorHash[e] || e;
}
getAllTypes() {
const e = new Array();
for (const n in this.creatorHash)
e.push(n);
return e.sort();
}
isComponentRegistered(e) {
return !!this.creatorHash[e];
}
};
J(ee, "Instance", new ee());
let F = ee;
const m = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "SvComponent",
props: {
is: {}
},
setup(u) {
const e = u, n = H(
() => F.Instance.getComponent(e.is)
);
return (s, o) => (i(), g(ce(n.value), ue(de(s.$attrs)), Ve({ _: 2 }, [
V(s.$slots, (t, l) => ({
name: l,
fn: D((d) => [
x(s.$slots, l, ue(de(d)))
])
}))
]), 1040));
}
});
Ne.createPropertiesHash = () => Se({});
class _e {
constructor(e) {
J(this, "currentNextTickPromise");
this.element = e;
}
async add() {
const e = ge();
this.currentNextTickPromise !== e && (this.currentNextTickPromise = e, await e, e == this.currentNextTickPromise && this.element.afterRerender());
}
}
function xe(u) {
if (u) {
if (u.__vueImplemented = u.__vueImplemented ?? 0, u.__vueImplemented <= 0) {
const e = new _e(u);
u.createArrayCoreHandler = (n, s) => {
const o = [], t = E(o);
return o.onArrayChanged = () => {
te(t), e.add();
}, n[s] = t, w(n[s]);
}, u.iteratePropertiesHash((n, s) => {
if (Array.isArray(n[s])) {
const o = E(n[s]);
n[s].onArrayChanged = () => {
te(o), e.add();
}, n[s] = o;
}
}), u.getPropertyValueCoreHandler = (n, s) => w(n[s]), u.setPropertyValueCoreHandler = (n, s, o) => {
Te(n[s]) ? n[s].value = o : n[s] = o, e.add();
};
}
u.enableOnElementRerenderedEvent(), u.__vueImplemented++;
}
}
function es(u) {
return !!u.__vueImplemented;
}
function pe(u) {
u && (u.__vueImplemented = u.__vueImplemented ?? 0, u.__vueImplemented--, u.__vueImplemented <= 0 && (u.iteratePropertiesHash((e, n) => {
e[n] = w(e[n]), Array.isArray(e[n]) && (e[n].onArrayChanged = void 0);
}), delete u.__vueImplemented, u.disableOnElementRerenderedEvent(), u.createArrayCoreHandler = void 0, u.getPropertyValueCoreHandler = void 0, u.setPropertyValueCoreHandler = void 0));
}
function S(u, e, n) {
const s = W(
u,
(t, l) => {
t && e && e(t, l), l && (pe(l), n && n(l)), xe(t);
},
{
immediate: !0
}
);
let o = !1;
O(() => {
if (!o) {
const t = u();
t && (pe(t), s(), n && n(t)), o = !0;
}
});
}
function T(u, e, n, s) {
S(() => u.question, n, s), B(() => {
u.question && u.question.afterRenderQuestionElement(e.value);
}), O(() => {
u.question.beforeDestroyQuestionElement(e.value);
});
}
function U(u) {
const e = f(), n = (t) => {
e.value = t.renderedHtml;
}, s = (t) => {
e.value = t.renderedHtml, t.onStringChanged.add(n);
}, o = W(
u,
(t, l) => {
l && l.onStringChanged.remove(n), s(t);
},
{ immediate: !0 }
);
return O(() => {
const t = u();
t && t.onStringChanged.remove(n), o();
}), e;
}
function ie(u) {
return u.customWidget ? "survey-customwidget" : u.isDefaultRendering && u.isDefaultRendering() || u.isPanel ? "survey-" + u.getTemplate() : u.getComponentName();
}
function se(u) {
const e = E(), n = Re(() => {
e.value = u(), te(e);
});
return O(() => {
n();
}), e;
}
const ss = /* @__PURE__ */ y({
__name: "Page",
props: {
survey: {},
page: {},
css: {}
},
setup(u) {
const e = u, n = f(null), s = () => {
e.survey && n.value && e.survey.afterRenderPage(n.value);
}, o = H(() => e.page._showDescription);
return S(
() => e.page,
() => {
s();
}
), B(() => {
s();
}), (t, l) => (i(), a("div", {
class: r(t.page.cssRoot),
ref_key: "root",
ref: n
}, [
c(m, {
is: "survey-element-title",
element: t.page,
css: t.css
}, null, 8, ["element", "css"]),
o.value ? (i(), a("div", {
key: 0,
class: r(t.page.cssClasses.page.description)
}, [
c(m, {
is: "survey-string",
locString: t.page.locDescription
}, null, 8, ["locString"])
], 2)) : p("", !0),
c(m, {
is: "survey-errors",
element: t.page
}, null, 8, ["element"]),
(i(!0), a(M, null, V(t.page.visibleRows, (d) => (i(), g(m, $({
key: d.id,
is: t.page.getSurvey().getRowWrapperComponentName(d)
}, {
componentData: t.page.getSurvey().getRowWrapperComponentData(d)
}), {
default: D(() => [
c(m, {
is: "survey-row",
row: d,
survey: t.survey,
css: t.css
}, null, 8, ["row", "survey", "css"])
]),
_: 2
}, 1040, ["is"]))), 128))
], 2));
}
}), ns = /* @__PURE__ */ y({
__name: "Header",
props: {
survey: {}
},
setup(u) {
const e = u, n = f();
return B(() => {
var s = n.value;
s && e.survey && e.survey.afterRenderHeader(s);
}), (s, o) => s.survey.renderedHasHeader ? (i(), a("div", {
key: 0,
class: r(s.survey.css.header),
ref_key: "root",
ref: n
}, [
s.survey.isLogoBefore ? (i(), g(m, {
key: 0,
is: s.survey.getElementWrapperComponentName(s.survey, "logo-image"),
data: s.survey.getElementWrapperComponentData(s.survey, "logo-image")
}, null, 8, ["is", "data"])) : p("", !0),
s.survey.renderedHasTitle ? (i(), a("div", {
key: 1,
class: r(s.survey.css.headerText),
style: k({ maxWidth: s.survey.titleMaxWidth })
}, [
c(m, {
is: "survey-element-title",
element: s.survey,
css: s.survey.css
}, null, 8, ["element", "css"]),
s.survey.renderedHasDescription ? (i(), a("div", {
key: 0,
class: r(s.survey.css.description)
}, [
c(m, {
is: "survey-string",
locString: s.survey.locDescription
}, null, 8, ["locString"])
], 2)) : p("", !0)
], 6)) : p("", !0),
s.survey.isLogoAfter ? (i(), g(m, {
key: 2,
is: s.survey.getElementWrapperComponentName(s.survey, "logo-image"),
data: s.survey.getElementWrapperComponentData(s.survey, "logo-image")
}, null, 8, ["is", "data"])) : p("", !0),
v("div", {
class: r(s.survey.css.headerClose)
}, null, 2)
], 2)) : p("", !0);
}
}), ts = /* @__PURE__ */ y({
__name: "Row",
props: {
row: {},
css: {},
survey: {}
},
setup(u) {
const e = u, n = f();
let s;
return S(
() => e.row,
(o, t) => {
o.setRootElement(n.value), t && (o.isNeedRender = t.isNeedRender);
},
(o) => {
es(o) || (clearTimeout(s), o.setRootElement(void 0), o.stopLazyRendering(), o.isNeedRender = !o.isLazyRendering());
}
), B(() => {
if (e.row && (e.row.setRootElement(n.value), !e.row.isNeedRender)) {
const o = n.value;
setTimeout(() => {
e.row.startLazyRendering(o);
}, 10);
}
}), (o, t) => (i(), a("div", {
class: r(o.row.getRowCss()),
ref_key: "root",
ref: n
}, [
(i(!0), a(M, null, V(o.row.visibleElements, (l) => (i(), g(m, {
is: "survey-element",
row: o.row,
css: o.css,
element: l,
key: l.id
}, null, 8, ["row", "css", "element"]))), 128))
], 2));
}
}), os = ["id", "role", "aria-required", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], is = ["aria-hidden"], rs = ["id"], ls = {
inheritAttrs: !1
}, as = /* @__PURE__ */ y({
...ls,
__name: "Question",
props: {
survey: {},
element: {},
css: {}
},
setup(u) {
const e = u, n = f(null), s = (q) => q.cssContent, o = () => e.element.getRootStyle(), t = H(() => e.element.singleInputQuestion);
S(() => e.element);
const l = () => {
n.value && e.element.afterRender(n.value);
}, d = W(
() => n.value,
() => {
l();
}
), C = H(() => e.element.customWidget ? "survey-customwidget" : e.element.isDefaultRendering() ? "survey-" + e.element.getTemplate() : e.element.getComponentName()), L = H(() => e.element.survey.getQuestionContentWrapperComponentName(e.element)), h = H(() => ({
componentData: {
question: e.element,
data: e.element.survey.getElementWrapperComponentData(e.element)
}
}));
return P(() => {
d();
}), (q, b) => (i(), a("div", {
class: r(q.element.getRootCss()),
style: k(o()),
ref_key: "root",
ref: n,
onFocusin: b[0] || (b[0] = (R) => q.element.focusIn()),
id: q.element.id,
role: q.element.ariaRole,
"aria-required": q.element.ariaRequired,
"aria-invalid": q.element.ariaInvalid,
"aria-label": q.element.ariaLabel,
"aria-labelledby": q.element.ariaLabelledBy,
"aria-describedby": q.element.ariaDescribedBy,
"aria-expanded": q.element.ariaExpanded,
"data-name": q.element.name
}, [
q.element.singleInputHasActions ? (i(), g(m, {
key: 0,
is: "sv-breadcrumbs",
model: q.element.singleInputActions,
css: q.element.cssClasses
}, null, 8, ["model", "css"])) : p("", !0),
q.element.showErrorsAboveQuestion ? (i(), g(m, {
key: 1,
is: "survey-errors",
element: q.element,
location: "top"
}, null, 8, ["element"])) : p("", !0),
!q.element.singleInputHideHeader && q.element.hasTitleOnLeftTop ? (i(), g(m, {
key: 2,
is: "survey-element-header",
element: q.element,
css: q.element.cssClasses
}, null, 8, ["element", "css"])) : p("", !0),
q.element.singleInputSummary ? (i(), g(m, {
key: 3,
is: "sv-single-input-summary",
css: q.element.cssClasses,
summary: q.element.singleInputSummary
}, null, 8, ["css", "summary"])) : t.value ? (i(), g(m, {
is: "survey-question",
css: q.css,
element: t.value,
survey: q.survey,
key: t.value.id
}, null, 8, ["css", "element", "survey"])) : (i(), g(m, $({
key: 5,
is: L.value
}, h.value), {
default: D(() => [
v("div", {
class: r(s(q.element) || void 0),
"aria-hidden": q.element.contentAriaHidden,
style: k({ display: q.element.renderedIsExpanded ? void 0 : "none" }),
role: "presentation"
}, [
c(m, {
is: C.value,
question: q.element
}, null, 8, ["is", "question"]),
q.element.hasComment ? (i(), a("div", {
key: 0,
class: r(q.element.getCommentAreaCss())
}, [
v("div", null, [
c(m, {
is: "survey-string",
locString: q.element.locCommentText
}, null, 8, ["locString"])
]),
c(m, {
is: "survey-question-comment",
question: q.element
}, null, 8, ["question"])
], 2)) : p("", !0),
q.element.hasDescriptionUnderInput ? (i(), a("div", {
key: 1,
class: r(q.element.cssDescription),
id: q.element.ariaDescriptionId
}, [
c(m, {
is: "survey-string",
locString: q.element.locDescription
}, null, 8, ["locString"])
], 10, rs)) : p("", !0)
], 14, is)
]),
_: 1
}, 16, ["is"])),
q.element.hasTitleOnBottom ? (i(), g(m, {
key: 6,
is: "survey-element-header",
element: q.element,
css: q.css
}, null, 8, ["element", "css"])) : p("", !0),
q.element.showErrorsBelowQuestion ? (i(), g(m, {
key: 7,
is: "survey-errors",
element: q.element,
location: "bottom"
}, null, 8, ["element"])) : p("", !0)
], 46, os));
}
}), us = ["id"], ds = ["id", "role", "aria-labelledby", "aria-label"], ms = {
inheritAttrs: !1
}, ps = /* @__PURE__ */ y({
...ms,
inheritAttrs: !1,
__name: "Panel",
props: {
element: {},
isEditMode: { type: Boolean },
css: {}
},
setup(u) {
const e = u, n = f(null), s = H(() => e.element.survey);
return S(() => e.element), B(() => {
e.element.survey && e.element.afterRender(n.value);
}), (o, t) => o.element.getIsContentVisible() ? (i(), a("div", {
key: 0,
class: r(o.element.getContainerCss()),
id: o.element.id,
onFocusin: t[0] || (t[0] = (l) => o.element.focusIn()),
ref_key: "root",
ref: n
}, [
o.element.showErrorsAbovePanel ? (i(), g(m, {
key: 0,
is: "survey-errors",
element: o.element
}, null, 8, ["element"])) : p("", !0),
o.element.hasTitle || o.element.hasDescription ? (i(), g(m, {
key: 1,
is: "survey-element-header",
element: o.element,
css: o.css
}, null, 8, ["element", "css"])) : p("", !0),
o.element.showErrorsAbovePanel ? p("", !0) : (i(), g(m, {
key: 2,
is: "survey-errors",
element: o.element
}, null, 8, ["element"])),
o.element.renderedIsExpanded ? (i(), a("div", {
key: 3,
id: o.element.contentId,
style: k({ paddingLeft: o.element.innerPaddingLeft }),
class: r(o.element.cssClasses.panel.content),
role: o.element.ariaRole,
"aria-labelledby": o.element.ariaLabelledBy,
"aria-label": o.element.ariaLabel
}, [
(i(!0), a(M, null, V(o.element.visibleRows, (l) => (i(), g(m, $({
key: l.id,
is: o.element.getSurvey().getRowWrapperComponentName(l)
}, {
componentData: o.element.getSurvey().getRowWrapperComponentData(l)
}), {
default: D(() => [
c(m, {
is: "survey-row",
row: l,
survey: s.value,
css: o.css
}, null, 8, ["row", "survey", "css"])
]),
_: 2
}, 1040, ["is"]))), 128)),
c(m, {
is: "sv-action-bar",
model: o.element.getFooterToolbar()
}, null, 8, ["model"])
], 14, ds)) : p("", !0)
], 42, us)) : p("", !0);
}
}), vs = ["id"], Cs = /* @__PURE__ */ y({
__name: "ElementHeader",
props: {
element: {},
css: {}
},
setup(u) {
const e = u, n = (o) => {
typeof e.element.clickTitleFunction == "function" && e.element.clickTitleFunction(o);
}, s = () => {
const o = { width: void 0 };
return "titleWidth" in e.element && (o.width = e.element.titleWidth), o;
};
return (o, t) => (i(), a("div", {
class: r(o.element.cssHeader),
onClick: n,
style: k(s())
}, [
c(m, {
is: "survey-element-title",
element: o.element,
css: o.css
}, null, 8, ["element", "css"]),
o.element.hasDescriptionUnderTitle ? Z((i(), a("div", {
key: 0,
class: r(o.element.cssDescription),
id: o.element.ariaDescriptionId
}, [
c(m, {
is: "survey-string",
locString: o.element.locDescription
}, null, 8, ["locString"])
], 10, vs)), [
[A, o.element.hasDescription]
]) : p("", !0),
o.element.hasAdditionalTitleToolbar ? (i(), g(m, {
key: 1,
is: "sv-action-bar",
model: o.element.additionalTitleToolbar
}, null, 8, ["model"])) : p("", !0)
], 6));
}
}), cs = /* @__PURE__ */ y({
__name: "String",
props: {
locString: {}
},
setup(u) {
return (e, n) => (i(), g(m, {
is: e.locString.renderAs,
locString: e.locString.renderAsData
}, null, 8, ["is", "locString"]));
}
}), gs = ["innerHTML"], ys = /* @__PURE__ */ y({
__name: "StringViewer",
props: {
locString: {}
},
setup(u) {
const e = u, n = U(() => e.locString), s = e.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
return (o, t) => o.locString.hasHtml ? (i(), a("span", {
key: 0,
class: r(w(s)),
innerHTML: w(n)
}, null, 10, gs)) : (i(), a("span", {
key: 1,
class: r(w(s))
}, I(w(n)), 3));
}
}), hs = ["innerHTML"], qs = /* @__PURE__ */ y({
__name: "StringEditor",
props: {
locString: {}
},
setup(u) {
const e = u, n = (o) => {
const t = e.locString;
t.text = o.target.innerText;
}, s = (o) => {
o.preventDefault(), o.stopPropagation();
};
return (o, t) => o.locString.hasHtml ? (i(), a("span", {
key: 0,
class: "sv-string-editor",
contenteditable: "true",
innerHTML: o.locString.renderedHtml,
onBlur: n,
onClick: s
}, null, 40, hs)) : (i(), a("span", {
key: 1,
class: "sv-string-editor",
contenteditable: "true",
onBlur: n,
onClick: s
}, I(o.locString.renderedHtml), 33));
}
}), ws = ["id"], bs = /* @__PURE__ */ y({
__name: "Skeleton",
props: {
element: {}
},
setup(u) {
const e = u;
return S(() => e.element), (n, s) => (i(), a("div", {
class: "sv-skeleton-element",
id: n.element.id,
style: k({ height: n.element.skeletonHeight })
}, null, 12, ws));
}
}), Ls = { class: "sv-scroll__container" }, ks = /* @__PURE__ */ v("div", { class: "sv-scroll__scrollbar-sizer" }, null, -1), fs = [
ks
], Hs = /* @__PURE__ */ y({
__name: "Scroll",
props: {
disabled: {},
onInnerHeightChanged: { type: Function }
},
setup(u) {
const e = u, n = new Ee();
n.onInnerHeightChanged = (o) => {
e.onInnerHeightChanged && e.onInnerHeightChanged(o);
};
const s = f();
return B(() => {
n.setRootElement(s.value);
}), P(() => {
n.setRootElement(void 0), n.unsubscribeRootElement();
}), (o, t) => e.disabled ? x(o.$slots, "default", { key: 0 }) : (i(), a("div", {
key: 1,
ref_key: "root",
ref: s,
class: "sv-scroll__wrapper"
}, [
v("div", {
class: "sv-scroll__scroller sv-drag-target-skipped",
onScroll: t[0] || (t[0] = () => w(n).onScrollContainer())
}, [
v("div", Ls, [
x(o.$slots, "default")
])
], 32),
v("div", {
class: "sv-scroll__scrollbar",
onScroll: t[1] || (t[1] = () => w(n).onScrollScrollbar())
}, fs, 32)
], 512));
}
}), Ms = ["id"], Is = ["value"], Vs = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Text",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
return T(e, n), (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), a("div", {
key: 0,
ref_key: "root",
ref: n
}, I(s.question.value), 513)) : s.question.dataListId ? (i(), a("div", {
key: 1,
ref_key: "root",
ref: n
}, [
c(m, {
is: "survey-text-input",
question: s.question
}, null, 8, ["question"]),
v("datalist", {
id: s.question.dataListId
}, [
(i(!0), a(M, null, V(s.question.dataList, (t, l) => (i(), a("option", {
key: l,
value: t
}, null, 8, Is))), 128))
], 8, Ms)
], 512)) : (i(), g(m, {
key: 2,
is: "survey-text-input",
question: s.question,
"get-ref": (t) => {
n.value = t;
}
}, null, 8, ["question", "get-ref"]));
}
}), Ss = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Rs = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Ts = /* @__PURE__ */ y({
__name: "TextInput",
props: {
question: {},
getRef: { type: Function }
},
setup(u, { expose: e }) {
const n = u, s = function(l) {
n.getRef && n.getRef(l);
}, o = f(null);
e({ root: o }), S(() => n.question);
const t = H(() => n.question.inputStyle);
return (l, d) => l.question.getMaxLength() ? (i(), a("div", {
key: 1,
ref: (C) => s(C)
}, [
v("input", {
disabled: l.question.isDisabledAttr,
readonly: l.question.isReadOnlyAttr,
class: r(l.question.getControlClass()),
type: l.question.inputType,
maxlength: l.question.getMaxLength(),
min: l.question.renderedMin,
max: l.question.renderedMax,
step: l.question.renderedStep,
size: l.question.renderedInputSize,
style: k(t.value),
id: l.question.inputId,
list: l.question.dataListId,
placeholder: l.question.renderedPlaceholder,
autocomplete: l.question.autocomplete,
value: l.question.inputValue,
onChange: d[8] || (d[8] = //@ts-ignore
(...C) => l.question.onChange && l.question.onChange(...C)),
onClick: d[9] || (d[9] = //@ts-ignore
(...C) => l.question.readOnlyBlocker && l.question.readOnlyBlocker(...C)),
onPointerdown: d[10] || (d[10] = //@ts-ignore
(...C) => l.question.readOnlyBlocker && l.question.readOnlyBlocker(...C)),
onKeyup: d[11] || (d[11] = //@ts-ignore
(...C) => l.question.onKeyUp && l.question.onKeyUp(...C)),
onKeydown: d[12] || (d[12] = //@ts-ignore
(...C) => l.question.onKeyDown && l.question.onKeyDown(...C)),
onCompositionUpdate: d[13] || (d[13] = //@ts-ignore
(...C) => l.question.onCompositionUpdate && l.question.onCompositionUpdate(...C)),
onBlur: d[14] || (d[14] = //@ts-ignore
(...C) => l.question.onBlur && l.question.onBlur(...C)),
onFocus: d[15] || (d[15] = //@ts-ignore
(...C) => l.question.onFocus && l.question.onFocus(...C)),
"aria-required": l.question.a11y_input_ariaRequired,
"aria-label": l.question.a11y_input_ariaLabel,
"aria-labelledby": l.question.a11y_input_ariaLabelledBy,
"aria-describedby": l.question.a11y_input_ariaDescribedBy,
"aria-invalid": l.question.a11y_input_ariaInvalid,
"aria-errormessage": l.question.a11y_input_ariaErrormessage
}, null, 46, Rs),
c(m, {
is: "sv-character-counter",
counter: l.question.characterCounter,
remainingCharacterCounter: l.question.cssClasses.remainingCharacterCounter
}, null, 8, ["counter", "remainingCharacterCounter"])
], 512)) : (i(), a("input", {
key: 0,
ref: (C) => s(C),
disabled: l.question.isDisabledAttr,
readonly: l.question.isReadOnlyAttr,
class: r(l.question.getControlClass()),
type: l.question.inputType,
maxlength: l.question.getMaxLength(),
min: l.question.renderedMin,
max: l.question.renderedMax,
step: l.question.renderedStep,
size: l.question.renderedInputSize,
style: k(t.value),
id: l.question.inputId,
list: l.question.dataListId,
placeholder: l.question.renderedPlaceholder,
autocomplete: l.question.autocomplete,
value: l.question.inputValue,
onChange: d[0] || (d[0] = //@ts-ignore
(...C) => l.question.onChange && l.question.onChange(...C)),
onClick: d[1] || (d[1] = //@ts-ignore
(...C) => l.question.readOnlyBlocker && l.question.readOnlyBlocker(...C)),
onPointerdown: d[2] || (d[2] = //@ts-ignore
(...C) => l.question.readOnlyBlocker && l.question.readOnlyBlocker(...C)),
onKeyup: d[3] || (d[3] = //@ts-ignore
(...C) => l.question.onKeyUp && l.question.onKeyUp(...C)),
onKeydown: d[4] || (d[4] = //@ts-ignore
(...C) => l.question.onKeyDown && l.question.onKeyDown(...C)),
onCompositionUpdate: d[5] || (d[5] = //@ts-ignore
(...C) => l.question.onCompositionUpdate && l.question.onCompositionUpdate(...C)),
onBlur: d[6] || (d[6] = //@ts-ignore
(...C) => l.question.onBlur && l.question.onBlur(...C)),
onFocus: d[7] || (d[7] = //@ts-ignore
(...C) => l.question.onFocus && l.question.onFocus(...C)),
"aria-required": l.question.a11y_input_ariaRequired,
"aria-label": l.question.a11y_input_ariaLabel,
"aria-labelledby": l.question.a11y_input_ariaLabelledBy,
"aria-describedby": l.question.a11y_input_ariaDescribedBy,
"aria-invalid": l.question.a11y_input_ariaInvalid,
"aria-errormessage": l.question.a11y_input_ariaErrormessage
}, null, 46, Ss));
}
}), Bs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Zs = {
key: 0,
class: "sv-hidden"
}, $s = { key: 6 }, Ds = ["value"], be = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "SelectBase",
props: {
question: {},
showLegend: { type: Boolean }
},
setup(u) {
const e = u, n = f(null);
T(e, n);
const s = (t) => e.question.getItemValueWrapperComponentName(t) || e.question.itemComponent, o = (t) => ({
componentName: e.question.itemComponent,
componentData: {
question: e.question,
item: t,
data: e.question.getItemValueWrapperComponentData(t)
}
});
return (t, l) => (i(), a("fieldset", {
class: r(t.question.getSelectBaseRootCss()),
ref_key: "root",
ref: n,
role: t.question.a11y_input_ariaRole,
"aria-required": t.question.a11y_input_ariaRequired,
"aria-label": t.question.a11y_input_ariaLabel,
"aria-labelledby": t.question.a11y_input_ariaLabelledBy,
"aria-describedby": t.question.a11y_input_ariaDescribedBy,
"aria-invalid": t.question.a11y_input_ariaInvalid,
"aria-errormessage": t.question.a11y_input_ariaErrormessage
}, [
t.showLegend ? (i(), a("legend", Zs, I(t.question.locTitle.renderedHtml), 1)) : p("", !0),
t.question.hasHeadItems ? (i(!0), a(M, { key: 1 }, V(t.question.headItems, (d) => (i(), g(m, $({
key: d.value,
is: s(d)
}, o(d)), null, 16, ["is"]))), 128)) : p("", !0),
!t.question.hasColumns && !t.question.blockedRow ? (i(!0), a(M, { key: 2 }, V(t.question.bodyItems, (d) => (i(), g(m, $({
key: d.value,
is: s(d)
}, o(d)), null, 16, ["is"]))), 128)) : p("", !0),
t.question.blockedRow ? (i(), a("div", {
key: 3,
class: r(t.question.cssClasses.rootRow)
}, [
!t.question.hasColumns && t.question.blockedRow ? (i(!0), a(M, { key: 0 }, V(t.question.dataChoices, (d) => (i(), g(m, $({
key: d.value,
is: s(d)
}, o(d)), null, 16, ["is"]))), 128)) : p("", !0)
], 2)) : p("", !0),
t.question.hasColumns ? (i(), a("div", {
key: 4,
class: r(t.question.cssClasses.rootMultiColumn)
}, [
t.question.hasColumns ? (i(!0), a(M, { key: 0 }, V(t.question.columns, (d, C) => (i(), a("div", {
key: C,
class: r(t.question.getColumnClass()),
role: "presentation"
}, [
(i(!0), a(M, null, V(d, (L) => (i(), g(m, $({
key: L.value,
is: s(L)
}, o(L)), null, 16, ["is"]))), 128))
], 2))), 128)) : p("", !0)
], 2)) : p("", !0),
t.question.hasFootItems ? (i(!0), a(M, { key: 5 }, V(t.question.footItems, (d) => (i(), g(m, $({
key: d.value,
is: s(d)
}, o(d)), null, 16, ["is"]))), 128)) : p("", !0),
t.question.showClearButtonInContent ? (i(), a("div", $s, [
v("input", {
type: "button",
class: r(t.question.cssClasses.clearButton),
onClick: l[0] || (l[0] = () => {
t.question.clearValue(!0);
}),
value: t.question.clearButtonCaption
}, null, 10, Ds)
])) : p("", !0)
], 10, Bs));
}
}), As = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Checkbox",
props: {
question: {}
},
setup(u) {
return (e, n) => (i(), g(be, {
question: e.question,
"show-legend": !0
}, null, 8, ["question"]));
}
});
function Le(u, e, n) {
B(() => {
n.value && (e().isDesignMode || u().setRootElement(n.value));
}), P(() => {
e().isDesignMode || u().setRootElement(void 0);
}), S(u, (s, o) => {
e().isDesignMode || (s && n.value && s.setRootElement(n.value), o && o.setRootElement(void 0));
});
}
const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required", "aria-label"], Ns = ["xlink:href"], Es = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "CheckboxItem",
props: {
question: {},
item: {},
hideLabel: { type: Boolean },
ariaLabel: {}
},
setup(u) {
const e = f(), n = u;
Le(
() => n.item,
() => n.question,
e
);
const s = (o) => {
n.question.clickItemHandler(n.item, o.target.checked);
};
return (o, t) => (i(), a(M, null, [
v("div", {
role: "presentation",
class: r(o.question.getItemClass(o.item)),
ref_key: "root",
ref: e
}, [
v("label", {
class: r(o.question.getLabelClass(o.item))
}, [
v("input", {
type: "checkbox",
name: o.question.name + o.item.id,
checked: o.question.isItemSelected(o.item),
onInput: t[0] || (t[0] = (l) => {
s(l);
}),
value: o.item.value,
id: o.question.getItemId(o.item),
disabled: !o.question.getItemEnabled(o.item),
readonly: o.question.isReadOnlyAttr,
class: r(o.question.cssClasses.itemControl),
required: o.question.hasRequiredError(),
"aria-label": o.ariaLabel
}, null, 42, Ps),
o.question.cssClasses.materialDecorator ? (i(), a("span", {
key: 0,
class: r(o.question.cssClasses.materialDecorator)
}, [
o.question.itemSvgIcon ? (i(), a("svg", {
key: 0,
class: r(o.question.cssClasses.itemDecorator)
}, [
v("use", {
"xlink:href": o.question.itemSvgIcon
}, null, 8, Ns)
], 2)) : p("", !0)
], 2)) : p("", !0),
o.hideLabel ? p("", !0) : (i(), a("span", {
key: 1,
class: r(o.question.cssClasses.controlLabel)
}, [
c(m, {
is: "survey-string",
locString: o.item.locText
}, null, 8, ["locString"])
], 2))
], 2)
], 2),
o.item.isCommentShowing ? (i(), g(m, {
key: 0,
is: "survey-other-choice",
question: o.question,
item: o.item
}, null, 8, ["question", "item"])) : p("", !0)
], 64));
}
}), Ws = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Radiogroup",
props: {
question: {}
},
setup(u) {
return (e, n) => (i(), g(be, { question: e.question }, null, 8, ["question"]));
}
}), Fs = ["name", "value", "id", "aria-errormessage", "checked", "disabled", "readonly", "aria-label"], Os = ["xlink:href"], zs = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "RadiogroupItem",
props: {
question: {},
item: {},
hideLabel: { type: Boolean },
ariaLabel: {}
},
setup(u) {
const e = f(), n = u, s = (l) => n.question.getLabelClass(l), o = (l) => n.question.getControlLabelClass(l), t = () => {
n.question.clickItemHandler(n.item);
};
return Le(
() => n.item,
() => n.question,
e
), (l, d) => (i(), a(M, null, [
v("div", {
role: "presentation",
class: r(l.question.getItemClass(l.item)),
ref_key: "root",
ref: e
}, [
v("label", {
onMousedown: d[1] || (d[1] = (C) => l.question.onMouseDown()),
class: r(s(l.item))
}, [
v("input", {
type: "radio",
name: l.question.questionName,
value: l.item.value,
id: l.question.getItemId(l.item),
"aria-errormessage": l.question.ariaErrormessage,
checked: l.question.isItemSelected(l.item),
onInput: d[0] || (d[0] = (C) => {
t();
}),
disabled: !l.question.getItemEnabled(l.item),
readonly: l.question.isReadOnlyAttr,
class: r(l.question.cssClasses.itemControl),
"aria-label": l.ariaLabel
}, null, 42, Fs),
l.question.cssClasses.materialDecorator ? (i(), a("span", {
key: 0,
class: r(l.question.cssClasses.materialDecorator)
}, [
l.question.itemSvgIcon ? (i(), a("svg", {
key: 0,
class: r(l.question.cssClasses.itemDecorator)
}, [
v("use", {
"xlink:href": l.question.itemSvgIcon
}, null, 8, Os)
], 2)) : p("", !0)
], 2)) : p("", !0),
l.hideLabel ? p("", !0) : (i(), a("span", {
key: 1,
class: r(o(l.item))
}, [
c(m, {
is: "survey-string",
locString: l.item.locText
}, null, 8, ["locString"])
], 2))
], 34)
], 2),
l.item.isCommentShowing ? (i(), g(m, {
key: 0,
is: "survey-other-choice",
question: l.question,
item: l.item
}, null, 8, ["question", "item"])) : p("", !0)
], 64));
}
}), Us = ["src"], Qs = ["title"], Ks = { key: 0 }, js = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Signaturepad",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
return T(e, n), (s, o) => (i(), a("div", {
class: r(s.question.cssClasses.root),
ref_key: "root",
ref: n,
style: k({
width: s.question.renderedCanvasWidth
})
}, [
Z(v("div", {
class: r(s.question.cssClasses.placeholder)
}, [
c(m, {
is: "survey-string",
locString: s.question.locRenderedPlaceholder
}, null, 8, ["locString"])
], 2), [
[A, s.question.needShowPlaceholder()]
]),
v("div", null, [
s.question.backgroundImage ? (i(), a("img", {
key: 0,
role: "presentation",
class: r(s.question.cssClasses.backgroundImage),
src: s.question.backgroundImage,
style: k({
width: s.question.renderedCanvasWidth
})
}, null, 14, Us)) : p("", !0),
v("canvas", {
tabindex: "-1",
class: r(s.question.cssClasses.canvas),
onBlur: o[0] || (o[0] = //@ts-ignore
(...t) => s.question.onBlur && s.question.onBlur(...t))
}, null, 34)
]),
s.question.canShowClearButton ? (i(), a("div", {
key: 0,
class: r(s.question.cssClasses.controls)
}, [
v("button", {
type: "button",
class: r(s.question.cssClasses.clearButton),
title: s.question.clearButtonCaption,
onClick: o[1] || (o[1] = () => {
s.question.clearValue(!0);
})
}, [
s.question.cssClasses.clearButtonIconId ? p("", !0) : (i(), a("span", Ks, "✖")),
s.question.cssClasses.clearButtonIconId ? (i(), g(m, {
key: 1,
is: "sv-svg-icon",
iconName: s.question.cssClasses.clearButtonIconId,
size: "auto"
}, null, 8, ["iconName"])) : p("", !0)
], 10, Qs)
], 2)) : p("", !0),
s.question.showLoadingIndicator ? (i(), a("div", {
key: 1,
class: r(s.question.cssClasses.loadingIndicator)
}, [
c(m, { is: "sv-loading-indicator" })
], 2)) : p("", !0)
], 6));
}
}), Gs = ["innerHTML"], Xs = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Html",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
T(e, n);
const s = U(() => e.question.locHtml);
return (o, t) => (i(), a("div", {
ref_key: "root",
ref: n,
class: r(o.question.renderCssRoot),
innerHTML: w(s)
}, null, 10, Gs));
}
}), Js = ["src", "alt", "width", "height"], Ys = ["src", "width", "height"], _s = ["src", "title", "width", "height"], xs = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Image",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
T(e, n);
const s = U(() => e.question.locImageLink);
return (o, t) => (i(), a("div", {
class: r(o.question.cssClasses.root),
ref_key: "root",
ref: n
}, [
o.question.renderedMode === "image" ? Z((i(), a("img", {
key: 0,
class: r(o.question.getImageCss()),
src: w(s),
alt: o.question.altText || o.question.title,
width: o.question.renderedWidth,
height: o.question.renderedHeight,
style: k({
objectFit: o.question.imageFit,
width: o.question.renderedStyleWidth,
height: o.question.renderedStyleHeight
}),
onLoad: t[0] || (t[0] = (l) => {
o.question.onLoadHandler();
}),
onError: t[1] || (t[1] = (l) => {
o.question.onErrorHandler();
})
}, null, 46, Js)), [
[A, w(s) && !o.question.contentNotLoaded]
]) : p("", !0),
o.question.renderedMode === "video" ? Z((i(), a("video", {
key: 1,
controls: "",
class: r(o.question.getImageCss()),
src: w(s),
width: o.question.renderedWidth,
height: o.question.renderedHeight,
style: k({
objectFit: o.question.imageFit,
width: o.question.renderedStyleWidth,
height: o.question.renderedStyleHeight
}),
onLoadedmetadata: t[2] || (t[2] = (l) => {
o.question.onLoadHandler();
}),
onError: t[3] || (t[3] = (l) => {
o.question.onErrorHandler();
})
}, null, 46, Ys)), [
[A, w(s) && !o.question.contentNotLoaded]
]) : p("", !0),
o.question.renderedMode === "youtube" ? (i(), a("iframe", {
key: 2,
class: r(o.question.getImageCss()),
src: w(s),
title: o.question.renderedAltText,
width: o.question.renderedWidth,
height: o.question.renderedHeight,
style: k({
objectFit: o.question.imageFit,
width: o.question.renderedStyleWidth,
height: o.question.renderedStyleHeight
})
}, null, 14, _s)) : p("", !0),
!w(s) || o.question.contentNotLoaded ? (i(), a("div", {
key: 3,
class: r(o.question.cssClasses.noImage)
}, [
c(m, {
is: "sv-svg-icon",
iconName: o.question.cssClasses.noImageSvgIconId,
size: 48
}, null, 8, ["iconName"])
], 2)) : p("", !0)
], 2));
}
}), e1 = ["aria-label"], s1 = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Expression",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
return T(e, n), (s, o) => (i(), a("div", {
class: r(s.question.cssClasses.root),
ref_key: "root",
ref: n,
"aria-live": "polite",
"aria-label": s.question.formatedValue
}, I(s.question.formatedValue), 11, e1));
}
}), n1 = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], t1 = ["id", "multiple", "placeholder"], o1 = ["id", "multiple", "placeholder"], i1 = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "File",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
return T(e, n), (s, o) => (i(), a("div", {
class: r(s.question.fileRootCss),
ref_key: "root",
ref: n
}, [
!s.question.isReadOnlyAttr && !s.question.isDisabledAttr && s.question.hasFileUI ? (i(), a("input", {
key: 0,
class: r(s.question.cssClasses.fileInput),
tabindex: "-1",
type: "file",
id: s.question.inputId,
"aria-required": s.question.ariaRequired,
"aria-label": s.question.ariaLabel,
"aria-invalid": s.question.ariaInvalid,
"aria-errormessage": s.question.ariaErrormessage,
multiple: s.question.allowMultiple,
title: s.question.inputTitle,
accept: s.question.acceptedTypes,
capture: s.question.renderCapture
}, null, 10, n1)) : p("", !0),
s.question.isReadOnlyAttr ? (i(), a("input", {
key: 1,
type: "file",
readonly: "",
id: s.question.inputId,
class: r(s.question.getReadOnlyFileCss()),
multiple: s.question.allowMultiple,
placeholder: s.question.title,
style: { color: "transparent" }
}, null, 10, t1)) : p("", !0),
s.question.isDisabledAttr ? (i(), a("input", {
key: 2,
type: "file",
disabled: "",
id: s.question.inputId,
class: r(s.question.getReadOnlyFileCss()),
multiple: s.question.allowMultiple,
placeholder: s.question.title,
style: { color: "transparent" }
}, null, 10, o1)) : p("", !0),
v("div", {
class: r(s.question.cssClasses.dragArea),
onDrop: o[0] || (o[0] = //@ts-ignore
(...t) => s.question.onDrop && s.question.onDrop(...t)),
onDragover: o[1] || (o[1] = //@ts-ignore
(...t) => s.question.onDragOver && s.question.onDragOver(...t)),
onDragleave: o[2] || (o[2] = //@ts-ignore
(...t) => s.question.onDragLeave && s.question.onDragLeave(...t)),
onDragenter: o[3] || (o[3] = //@ts-ignore
(...t) => s.question.onDragEnter && s.question.onDragEnter(...t))
}, [
s.question.showFileDecorator ? (i(), a("div", {
key: 0,
class: r(s.question.getFileDecoratorCss())
}, [
s.question.showDragAreaPlaceholder ? (i(), a("span", {
key: 0,
class: r(s.question.cssClasses.dragAreaPlaceholder)
}, [
c(m, {
is: "survey-string",
locString: s.question.locRenderedPlaceholder
}, null, 8, ["locString"])
], 2)) : p("", !0),
v("div", {
class: r(s.question.cssClasses.wrapper)
}, [
s.question.actionsContainerVisible ? (i(), g(m, {
key: 0,
is: "sv-action-bar",
model: s.question.actionsContainer
}, null, 8, ["model"])) : p("", !0)
], 2)
], 2)) : p("", !0),
s.question.showLoadingIndicator ? (i(), a("div", {
key: 1,
class: r(s.question.cssClasses.loadingIndicator)
}, [
c(m, { is: "sv-loading-indicator" })
], 2)) : p("", !0),
s.question.isPlayingVideo ? (i(), g(m, {
key: 2,
is: "sv-file-video",
question: s.question
}, null, 8, ["question"])) : p("", !0),
s.question.allowShowPreview ? (i(), g(m, {
key: 3,
is: "sv-file-preview",
question: s.question
}, null, 8, ["question"])) : p("", !0),
s.question.fileNavigatorVisible ? (i(), g(m, {
key: 4,
is: "sv-action-bar",
model: s.question.fileNavigator
}, null, 8, ["model"])) : p("", !0)
], 34)
], 2));
}
}), r1 = { class: "sv-hidden" }, ve = "survey-imagepicker-item", l1 = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "Imagepicker",
props: {
question: {}
},
setup(u) {
const e = u, n = f(null);
T(e, n);
const s = (t) => e.question.getItemValueWrapperComponentName(t) || ve, o = (t) => ({
componentName: ve,
componentData: {
question: e.question,
item: t,
data: e.question.getItemValueWrapperComponentData(t)
}
});
return (t, l) => (i(), a("fieldset", {
class: r(t.question.getSelectBaseRootCss()),
style: k(t.question.getContainerStyle()),
ref_key: "root",
ref: n
}, [
v("legend", r1, I(t.question.locTitle.renderedHtml), 1),
t.question.hasColumns ? p("", !0) : (i(!0), a(M, { key: 0 }, V(t.question.visibleChoices, (d) => (i(), g(m, $({
key: d.value,
is: s(d)
}, o(d)), null, 16, ["is"]))), 128)),
t.question.hasColumns ? (i(!0), a(M, { key: 1 }, V(t.question.columns, (d, C) => (i(), a("div", {
class: r(t.question.getColumnClass()),
key: C,
role: "presentation"
}, [
(i(!0), a(M, null, V(d, (L) => (i(), g(m, $({
key: L.value,
is: s(L)
}, o(L)), null, 16, ["is"]))), 128))
], 2))), 128)) : p("", !0)
], 6));
}
}), a1 = ["name", "value", "id", "disabled", "readonly", "required", "aria-label", "aria-invalid", "aria-errormessage"], u1 = ["name", "value", "id", "disabled", "readonly", "required", "aria-label", "aria-invalid", "aria-errormessage"], d1 = ["src", "width", "height", "alt"], m1 = ["src", "width", "height"], p1 = /* @__PURE__ */ y({
inheritAttrs: !1,
__name: "ImagepickerItem",
props: {
question: {},
item: {}
},
setup(u) {
const e = u, n = (t) => e.question.getItemClass(t), s = H({
get() {
return e.question.value;
},
set(t) {
const l = e.question;
l.isReadOnlyAttr || (l.value = t);
}
});
S(() => e.item);
const o = U(() => e.item.locImageLink);
return (t, l) => (i(), a("div", {
class: r(n(t.item))
}, [
v("label", {
class: r(t.question.cssClasses.label)
}, [
t.question.multiSelect ? Z((i(), a("input", {
key: 0,
type: "checkbox",
name: t.question.questionName,
value: t.item.value,
id: t.question.getItemId(t.item),
"onUpdate:modelValue": l[0] || (l[0] = (d) => s.value = d),
disabled: !t.question.getItemEnabled(t.item),
readonly: t.question.isReadOnlyAttr,
required: t.question.inputRequiredAttribute,
"aria-label": t.item.locText.renderedHtml,
"aria-invalid": t.question.ariaInvalid,
"aria-errormessage": t.question.ariaErrormessage,
class: r(t.question.cssClasses.itemControl)
}, null, 10, a1)), [
[oe, s.value]
]) : Z((i(), a("input", {
key: 1,
type: "radio",
name: t.question.questionName,
value: t.item.value,
id: t.question.getItemId(t.item),
"onUpdate:modelValue": l[1] || (l[1] = (d) => s.value = d),
disabled: !t.question.getItemEnabled(t.item),
readonly: t.question.isReadOnlyAttr,
required: t.question.hasRequiredError(),
"aria-label": t.item.locText.renderedHtml,
"aria-invalid": t.question.ariaInvalid,
"aria-errormessage": t.question.ariaErrormessage,
class: r(t.question.cssClasses.itemControl)
}, null, 10, u1)), [
[ye, s.value]
]),
v("div", {
class: r(t.question.cssClasses.itemDecorator)
}, [
v("div", {
class: r(t.question.cssClasses.imageContainer)
}, [
t.question.cssClasses.checkedItemDecorator ? (i(), a("span", {
key: 0,
class: r(t.question.cssClasses.checkedItemDecorator),
"aria-hidden": "true"
}, [
t.question.cssClasses.checkedItemSvgIconId ? (i(), g(m, {
key: 0,
is: "sv-svg-icon",
class: r(t.question.cssClasses.checkedItemSvgIcon),
size: "auto",
iconName: t.question.cssClasses.checkedItemSvgIconId
}, null, 8, ["class", "iconName"])) : p("", !0)
], 2)) : p("", !0),
w(o) && !t.item.contentNotLoaded && t.question.contentMode === "image" ? (i(), a("img", {
key: 1,
class: r(t.question.cssClasses.image),
src: w(o),
width: t.question.renderedImageWidth,
height: t.qu