survey-creator-vue
Version:
A white-label drag-and-drop form builder for Vue.js that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your Vue.js app.
3,772 lines • 131 kB
JavaScript
import { useBase as w, SvComponent as c, key2ClickDirective as M, SurveyComponent as O, useQuestion as Q, ComponentFactory as ie } from "survey-vue3-ui";
import { defineComponent as g, computed as k, toRaw as _e, ref as P, onMounted as R, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as f, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as b, onUpdated as W, nextTick as re, withDirectives as h, toDisplayString as D, vShow as H, withCtx as X, createTextVNode as ge, shallowRef as be, watch as G, onBeforeUnmount as Y, vModelText as de, mergeProps as A, renderSlot as x } from "vue";
import { editorLocalization as ce, SurveyResultsModel as ye, initLogicOperator as he, StringEditorViewModelBase as Ce, ToolboxToolViewModel as qe, PageAdorner as $e, RowViewModel as ke, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as fe, QuestionRatingAdornerViewModel as we, MatrixCellWrapperViewModel as De, ItemValueWrapperViewModel as Te, ImageItemValueWrapperViewModel as Ne, LogoImageViewModel as Me, PageNavigatorViewModel as Se, QuestionDropdownAdornerViewModel as Be, editableStringRendererName as Ie } from "survey-creator-core";
import { CssClassBuilder as Ee, RendererFactory as ue, DropdownListModel as Pe } from "survey-core";
const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ve = { class: "svc-top-bar" }, Ae = {
key: 0,
class: "svc-tabbed-menu-wrapper"
}, ze = ["v-show"], Le = { class: "svc-creator__content-holder svc-flex-column" }, Fe = ["aria-labelledby", "id"], Ke = {
key: 0,
class: "svc-footer-bar"
}, Ue = ["v-show"], He = {
key: 0,
class: "svc-creator__banner"
}, Qe = ["innerHTML"], Oe = /* @__PURE__ */ g({
__name: "Creator",
props: {
model: {}
},
setup(u) {
const t = u, e = k(() => _e(t.model)), o = P();
return w(
() => e.value,
(n, r) => {
r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
}
), R(() => {
o.value && t.model.setRootElement(o.value);
}), K(() => {
t.model.unsubscribeRootElement();
}), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(f, { key: 0 }, [
v(s(c), { is: "survey-popup-modal" }),
d("div", {
class: m(e.value.getRootCss()),
style: F(e.value.themeVariables),
ref_key: "root",
ref: o
}, [
d("div", null, [
v(s(c), { is: "sv-svg-bundle" })
]),
d("div", {
class: m(["svc-full-container svc-creator__area svc-flex-column", {
"svc-creator__area--with-banner": !e.value.haveCommercialLicense
}])
}, [
d("div", {
class: m(["svc-flex-row svc-full-container", {
"svc-creator__side-bar--left": e.value.sidebarLocation == "left"
}])
}, [
d("div", Re, [
d("div", Ve, [
e.value.showTabs ? (a(), i("div", Ae, [
v(s(c), {
is: "svc-tabbed-menu",
model: e.value.tabbedMenu
}, null, 8, ["model"])
])) : p("", !0),
e.value.showToolbar ? (a(), i("div", {
key: 1,
class: "svc-toolbar-wrapper",
"v-show": e.value.showToolbar
}, [
v(s(c), {
is: "sv-action-bar",
model: e.value.toolbar
}, null, 8, ["model"])
], 8, ze)) : p("", !0)
]),
d("div", {
class: m(["svc-creator__content-wrapper svc-flex-row", {
"svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
}])
}, [
d("div", Le, [
(a(!0), i(f, null, V(e.value.tabs, (l) => (a(), i(f, null, [
e.value.viewType == l.id && l.visible ? (a(), i("div", {
role: "tabpanel",
class: m(["svc-creator-tab", {
"svc-creator__toolbox--right": e.value.toolboxLocation == "right"
}]),
key: l.id,
"aria-labelledby": "tab-" + l.id,
id: "scrollableDiv-" + l.id
}, [
v(s(c), {
is: l.componentContent,
model: l.data.model
}, null, 8, ["is", "model"])
], 10, Fe)) : p("", !0)
], 64))), 256))
])
], 2),
e.value.isMobileView ? (a(), i("div", Ke, [
d("div", {
class: "svc-toolbar-wrapper",
"v-show": e.value.isMobileView
}, [
v(s(c), {
is: "sv-action-bar",
model: e.value.footerToolbar
}, null, 8, ["model"])
], 8, Ue)
])) : p("", !0)
]),
e.value.isSidebarVisible ? (a(), b(s(c), {
key: 0,
is: "svc-side-bar",
model: e.value.sidebar
}, null, 8, ["model"])) : p("", !0)
], 2),
e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", He, [
d("span", {
class: "svc-creator__non-commercial-text",
innerHTML: e.value.licenseText
}, null, 8, Qe)
])),
v(s(c), {
is: "sv-notifier",
model: e.value.notifier
}, null, 8, ["model"])
], 2)
], 6)
], 64));
}
}), We = /* @__PURE__ */ g({
__name: "TabbedMenu",
props: {
model: {}
},
setup(u) {
const t = u, e = P();
return w(() => t.model), W(() => {
t.model.initResponsivityManager(e.value);
}), R(() => {
t.model.initResponsivityManager(e.value);
}), K(() => {
t.model.resetResponsivityManager();
}), (o, n) => (a(), i("div", {
class: "svc-tabbed-menu",
ref_key: "container",
ref: e,
role: "tablist",
style: F(o.model.getRootStyle())
}, [
(a(!0), i(f, null, V(o.model.renderedActions, (r) => (a(), b(s(c), {
key: r.renderedId,
is: "svc-tabbed-menu-item-wrapper",
item: r
}, null, 8, ["item"]))), 128))
], 4));
}
}), Ge = { class: "sv-action__content" }, je = /* @__PURE__ */ g({
__name: "TabbedMenuItemWrapper",
props: {
item: {}
},
setup(u) {
const t = P(), e = u;
return w(() => e.item), R(() => {
const o = e.item;
o.updateModeCallback = (n, r) => {
o.mode = n, re(() => r(n, t.value));
}, o.afterRender();
}), K(() => {
const o = e.item;
o.updateModeCallback = void 0;
}), (o, n) => (a(), i("span", {
class: m(["svc-tabbed-menu-item-container", [o.item.isVisible ? "" : "sv-action--hidden", o.item.css]]),
ref_key: "root",
ref: t
}, [
d("div", Ge, [
v(s(c), {
is: o.item.component || "svc-tabbed-menu-item",
item: o.item
}, null, 8, ["is", "item"])
])
], 2));
}
}), Je = ["id", "aria-selected", "aria-controls"], Ze = /* @__PURE__ */ g({
__name: "TabbedMenuItem",
props: {
item: {}
},
setup(u) {
const t = u;
return w(() => t.item), (e, o) => h((a(), i("div", {
role: "tab",
id: "tab-" + e.item.id,
"aria-selected": e.item.active,
"aria-controls": "scrollableDiv-" + e.item.id,
class: m(["svc-tabbed-menu-item", e.item.getRootCss()]),
onClick: o[0] || (o[0] = //@ts-ignore
(...n) => e.item.doAction && e.item.doAction(...n))
}, [
e.item.hasTitle ? (a(), i("span", {
key: 0,
class: m(e.item.getTitleCss())
}, D(e.item.title), 3)) : p("", !0),
e.item.hasIcon ? (a(), b(s(c), {
key: 1,
is: "sv-svg-icon",
iconName: e.item.iconName,
size: "auto",
class: m(e.item.getIconCss()),
title: e.item.tooltip || e.item.title
}, null, 8, ["iconName", "class", "title"])) : p("", !0)
], 10, Je)), [
[s(M)]
]);
}
}), Xe = { class: "svc-flex-row svc-side-bar__wrapper" }, Ye = { class: "svc-side-bar__container-wrapper" }, xe = { class: "svc-side-bar__container-content" }, eo = /* @__PURE__ */ g({
__name: "SideBar",
props: {
model: {}
},
setup(u) {
const t = u, e = P();
return w(() => t.model), R(() => {
t.model.initResizeManager(e.value);
}), K(() => {
t.model.resetResizeManager();
}), (o, n) => h((a(), i("div", {
class: m(["svc-side-bar", o.model.rootCss])
}, [
h(d("div", {
class: "svc-side-bar__shadow",
onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
}, null, 512), [
[H, o.model.renderContainer]
]),
d("div", Xe, [
h(d("div", Ye, [
d("div", {
class: "svc-side-bar__container",
ref_key: "root",
ref: e
}, [
v(s(c), {
is: o.model.header.component,
model: o.model.header.componentModel
}, null, 8, ["is", "model"]),
d("div", xe, [
(a(!0), i(f, null, V(o.model.pages, (r, l) => (a(), b(s(c), {
key: l,
is: "svc-side-bar-page",
model: r
}, null, 8, ["model"]))), 128))
])
], 512)
], 512), [
[H, o.model.renderContainer]
]),
o.model.sideAreaComponentName ? (a(), b(s(c), {
key: 0,
is: o.model.sideAreaComponentName,
model: o.model.sideAreaComponentData
}, null, 8, ["is", "model"])) : p("", !0)
])
], 2)), [
[H, o.model.renderRoot]
]);
}
}), oo = { class: "svc-side-bar__container-header" }, so = { class: "svc-side-bar__container-actions" }, to = {
key: 0,
class: "svc-side-bar__container-title"
}, no = /* @__PURE__ */ g({
__name: "SideBarDefaultHeader",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", oo, [
d("div", so, [
v(s(c), {
is: "sv-action-bar",
model: e.model.toolbar
}, null, 8, ["model"])
]),
e.model.title ? (a(), i("div", to, D(e.model.title), 1)) : p("", !0)
]));
}
}), ao = /* @__PURE__ */ g({
__name: "SideBarPage",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => e.model.visible ? (a(), b(s(c), {
key: 0,
is: e.model.componentName,
model: e.model.componentData
}, null, 8, ["is", "model"])) : p("", !0);
}
}), lo = /* @__PURE__ */ g({
__name: "ObjectSelector",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => e.model.isVisible ? (a(), b(s(c), {
key: 0,
is: "sv-list",
model: e.model.list
}, null, 8, ["model"])) : p("", !0);
}
}), io = /* @__PURE__ */ g({
__name: "PropertyGrid",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(e.model.rootCss)
}, [
v(s(c), {
is: "svc-search",
model: e.model.searchManager
}, null, 8, ["model"]),
e.model.survey ? (a(), b(s(O), {
key: 0,
survey: e.model.survey
}, null, 8, ["survey"])) : p("", !0)
], 2));
}
}), ro = /* @__PURE__ */ g({
__name: "Tabs",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(!0), i(f, null, V(e.model.actions, (n, r) => (a(), b(s(c), {
key: r,
is: "svc-tab-button",
model: n
}, null, 8, ["model"]))), 128));
}
}), co = { class: "svc-sidebar-tabs__top-container" }, uo = { class: "svc-sidebar-tabs__collapse-button" }, po = /* @__PURE__ */ d("div", { class: "svc-sidebar-tabs__separator" }, [
/* @__PURE__ */ d("div")
], -1), vo = { class: "svc-sidebar-tabs__items" }, mo = { class: "svc-sidebar-tabs__bottom-container" }, _o = { class: "svc-sidebar-tabs__items" }, go = /* @__PURE__ */ g({
__name: "TabControl",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(e.model.sideBarClassName)
}, [
d("div", co, [
d("div", uo, [
v(s(c), {
is: "svc-tab-button",
model: e.model.expandCollapseAction
}, null, 8, ["model"])
]),
po,
v(s(c), { is: "sv-scroll" }, {
default: X(() => [
d("div", vo, [
v(s(c), {
is: "svc-tabs",
model: e.model.topToolbar
}, null, 8, ["model"])
])
]),
_: 1
})
]),
d("div", mo, [
d("div", _o, [
v(s(c), {
is: "sv-action-bar",
model: e.model.bottomToolbar
}, null, 8, ["model"])
])
])
], 2));
}
}), bo = {
key: 0,
class: "svc-menu-action"
}, yo = ["title"], ho = { class: "svc-menu-action__icon" }, Co = { class: "svc-menu-action__icon-container" }, qo = /* @__PURE__ */ g({
__name: "TabButton",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
h((a(), i("div", {
class: m(e.model.buttonClassName),
title: e.model.tooltip,
onClick: o[0] || (o[0] = (n) => e.model.action())
}, [
d("div", ho, [
d("div", Co, [
v(s(c), {
is: "sv-svg-icon",
iconName: e.model.iconName,
size: "auto"
}, null, 8, ["iconName"])
])
])
], 10, yo)), [
[s(M), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
])
])) : p("", !0);
}
}), $o = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, fo = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, Do = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
/* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__gap" }),
/* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
], -1), To = /* @__PURE__ */ g({
__name: "PropertyGridPlaceholder",
setup(u) {
const t = ce;
return (e, o) => (a(), i("div", $o, [
d("div", ko, [
d("span", fo, D(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
d("span", wo, D(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
]),
Do
]));
}
}), No = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Mo = {
key: 0,
class: "svc-side-bar__container-title"
}, So = {
key: 1,
class: "svc-sidebar__header-caption"
}, Bo = { class: "svc-sidebar__header-title" }, Io = { class: "svc-sidebar__header-subtitle" }, Eo = /* @__PURE__ */ g({
__name: "SideBarHeader",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", No, [
e.model.subTitle ? p("", !0) : (a(), i("div", Mo, D(e.model.title), 1)),
e.model.subTitle ? (a(), i("div", So, [
d("span", Bo, D(e.model.title), 1),
d("span", Io, D(e.model.subTitle), 1)
])) : p("", !0)
]));
}
}), Po = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Ro = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Vo = { class: "svc-sidebar__header-content" }, Ao = { class: "svc-sidebar__header-caption" }, zo = { class: "svc-sidebar__header-title" }, Lo = { class: "svc-sidebar__header-subtitle" }, Fo = /* @__PURE__ */ g({
__name: "SideBarPropertyGridHeader",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", Po, [
d("div", Ro, [
d("div", Vo, [
h((a(), i("div", {
class: m(e.model.buttonClassName),
onClick: o[0] || (o[0] = (n) => e.model.action())
}, [
d("div", Ao, [
d("span", zo, D(e.model.title), 1),
d("span", Lo, D(e.model.tooltip), 1)
])
], 2)), [
[s(M), { processEsc: !1 }]
]),
v(s(c), {
is: "sv-popup",
model: e.model.popupModel
}, null, 8, ["model"])
])
])
]));
}
}), Ko = /* @__PURE__ */ g({
__name: "QuestionError",
props: {
errorKey: {},
error: {},
cssClasses: {},
element: {}
},
setup(u) {
return (t, e) => (a(), i("div", { key: t.errorKey }, [
v(s(c), {
is: "sv-svg-icon",
class: m(t.cssClasses.error.icon),
iconName: "icon-alert_24x24",
size: "auto"
}, null, 8, ["class"]),
d("span", {
class: m(
t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
)
}, [
v(s(c), {
is: "survey-string",
locString: t.error.locText
}, null, 8, ["locString"])
], 2)
]));
}
}), Uo = ["title"], Ho = ["title"], Qo = ["title"], Oo = ["title"], Wo = /* @__PURE__ */ g({
__name: "ActionButton",
props: {
classes: {},
selected: { type: Boolean },
disabled: { type: Boolean },
text: {},
title: {},
allowBubble: { type: Boolean },
click: { type: Function },
iconName: {}
},
setup(u) {
const t = u, e = (n) => {
t.click(), t.allowBubble || n.stopPropagation();
}, o = () => new Ee().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
return (n, r) => (a(), i(f, null, [
n.iconName ? p("", !0) : (a(), i(f, { key: 0 }, [
n.disabled ? (a(), i("span", {
key: 0,
class: m(["svc-action-button svc-action-button--disabled", n.classes]),
title: n.title
}, D(n.text), 11, Uo)) : p("", !0),
h((a(), i("span", {
role: "button",
class: m(["svc-action-button", o()]),
onClick: e,
title: n.title
}, [
ge(D(n.text), 1)
], 10, Ho)), [
[s(M)]
])
], 64)),
n.iconName ? (a(), i(f, { key: 1 }, [
n.disabled ? (a(), i("span", {
key: 0,
class: m(o()),
title: n.title
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: n.iconName,
size: "auto"
}, null, 8, ["iconName"])
], 10, Qo)) : p("", !0),
h((a(), i("span", {
role: "button",
onClick: e,
class: m(o()),
title: n.title
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: n.iconName,
size: "auto"
}, null, 8, ["iconName"])
], 10, Oo)), [
[s(M)]
])
], 64)) : p("", !0)
], 64));
}
}), Go = ["disabled", "title", "aria-checked", "aria-expanded", "role"], jo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Jo = [
jo
], Zo = {
key: 0,
class: "svc-switcher__title"
}, Xo = {
inheritAttrs: !1
}, Yo = /* @__PURE__ */ g({
...Xo,
__name: "Switcher",
props: {
item: {}
},
setup(u) {
const t = u;
return w(() => t.item), (e, o) => h((a(), i("button", {
class: m(e.item.getActionBarItemCss()),
type: "button",
onClick: o[0] || (o[0] = (n) => {
e.item.action(e.item, !!n.pointerType);
}),
onKeyup: o[1] || (o[1] = (n) => {
n.stopPropagation();
}),
disabled: e.item.disabled,
title: e.item.tooltip || e.item.title,
"aria-checked": e.item.ariaChecked,
"aria-expanded": e.item.ariaExpanded,
role: e.item.ariaRole
}, [
d("div", {
class: m(e.item.getSwitcherIconCss())
}, Jo, 2),
e.item.hasTitle ? (a(), i("span", Zo, D(e.item.title), 1)) : p("", !0)
], 42, Go)), [
[s(M), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
]);
}
}), xo = {
key: 0,
class: "svd-simulator-content"
}, es = { class: "svd-simulator-content" }, os = /* @__PURE__ */ g({
__name: "Simulator",
props: {
model: {}
},
setup(u) {
const t = u;
w(() => t.model);
const e = k(() => t.model.simulatorFrame), o = () => {
t.model.device !== "desktop" && t.model.activateZoom();
}, n = () => {
t.model.device !== "desktop" && t.model.deactivateZoom();
};
return (r, l) => (a(), i("div", {
class: m(r.model.getRootCss()),
onKeydown: l[0] || (l[0] = (_) => r.model.tryToZoom(void 0, _)),
onMouseover: l[1] || (l[1] = (_) => o()),
onMouseout: l[2] || (l[2] = (_) => n())
}, [
r.model.hasFrame ? p("", !0) : (a(), i("div", xo, [
v(s(c), {
is: "survey-widget",
model: r.model.survey
}, null, 8, ["model"])
])),
r.model.hasFrame ? (a(), i("div", {
key: 1,
class: "svd-simulator-wrapper",
id: "svd-simulator-wrapper",
style: F({
width: e.value.frameWidth + "px",
height: e.value.frameHeight + "px"
})
}, [
d("div", {
class: "svd-simulator",
style: F({
width: e.value.deviceWidth + "px",
height: e.value.deviceHeight + "px",
transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
})
}, [
d("div", es, [
v(s(c), {
is: "survey-widget",
model: r.model.survey
}, null, 8, ["model"])
])
], 4)
], 4)) : p("", !0)
], 34));
}
}), ss = { class: "svc-component-container" }, ts = /* @__PURE__ */ g({
__name: "ComponentContainer",
props: {
model: {}
},
setup(u) {
const t = u;
return (e, o) => (a(), i("div", ss, [
(a(!0), i(f, null, V(t.model.elements, (n, r) => (a(), b(s(c), {
is: n.componentName,
model: n.componentData,
key: r
}, null, 8, ["is", "model"]))), 128))
]));
}
}), ns = { class: "svc-surface-placeholder" }, as = { class: "svc-surface-placeholder__text" }, ls = { class: "svc-surface-placeholder__title" }, is = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
__name: "SurfacePlaceholder",
props: {
name: {},
placeholderTitleText: {},
placeholderDescriptionText: {}
},
setup(u) {
const t = u;
return (e, o) => (a(), i("div", ns, [
d("div", {
class: m(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
}, null, 2),
d("div", as, [
d("div", ls, D(t.placeholderTitleText), 1),
d("div", is, D(t.placeholderDescriptionText), 1)
])
]));
}
}), rs = {
key: 2,
class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
}, ds = /* @__PURE__ */ g({
__name: "Test",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(["svc-creator-tab__content svc-test-tab__content", {
"svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
}])
}, [
e.model.survey.isEmpty ? (a(), b(j, {
key: 0,
name: "preview",
placeholderTitleText: e.model.placeholderTitleText,
placeholderDescriptionText: e.model.placeholderDescriptionText
}, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
e.model.survey.isEmpty ? p("", !0) : (a(), i("div", {
key: 1,
class: "svc-plugin-tab__content",
onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
}, [
v(s(c), {
is: "survey-simulator",
model: e.model.simulator
}, null, 8, ["model"]),
e.model.showResults ? (a(), b(s(c), {
key: 0,
is: "survey-results",
survey: e.model.survey
}, null, 8, ["survey"])) : p("", !0)
], 32)),
e.model.isPageToolbarVisible ? (a(), i("div", rs, [
v(s(c), {
is: "sv-action-bar",
model: e.model.pages
}, null, 8, ["model"])
])) : p("", !0)
], 2));
}
}), cs = { class: "svc-btn__text" }, us = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "TestAgain",
props: {
model: {}
},
setup(u) {
const t = u, e = k(() => t.model.testAgainAction);
return w(() => e.value), (o, n) => h((a(), i("div", {
role: "button",
class: "svc-preview__test-again svc-btn",
onClick: n[0] || (n[0] = (r) => e.value.action())
}, [
d("span", cs, D(e.value.title), 1)
])), [
[s(M)]
]);
}
});
function z(u, t, e) {
const o = be(), n = G(
t.map((r) => () => r()),
() => {
o.value = u();
},
{
immediate: !0
}
);
return w(() => o.value, void 0, e), Y(() => {
n();
}), o;
}
const ps = {
key: 0,
class: "svd-test-results"
}, vs = { class: "svd-test-results__content" }, ms = { class: "svd-test-results__header" }, _s = { class: "svd-test-results__header-text" }, gs = { class: "svd-test-results__header-types" }, bs = { class: "svd-test-results__text svd-light-bg-color" }, ys = { class: "svd-test-results__table svd-light-bg-color" }, hs = { class: "svd-light-background-color" }, Cs = { class: "svd-dark-border-color" }, qs = { class: "svd-dark-border-color" }, $s = /* @__PURE__ */ g({
__name: "SurveyResults",
props: {
survey: {}
},
setup(u) {
const t = u, e = z(
() => t.survey ? new ye(t.survey) : void 0,
[() => t.survey]
);
return (o, n) => s(e) ? (a(), i("div", ps, [
d("div", vs, [
d("div", ms, [
d("div", _s, D(s(e).surveyResultsText), 1),
d("div", gs, [
v(s(c), {
is: "svc-action-button",
text: s(e).surveyResultsTableText,
click: s(e).selectTableClick,
disabled: !1,
selected: s(e).isTableSelected
}, null, 8, ["text", "click", "selected"]),
v(s(c), {
is: "svc-action-button",
text: s(e).surveyResultsJsonText,
click: s(e).selectJsonClick,
disabled: !1,
selected: s(e).isJsonSelected
}, null, 8, ["text", "click", "selected"])
])
]),
h(d("div", bs, [
d("div", null, D(s(e).resultText), 1)
], 512), [
[H, s(e).resultViewType === "text"]
]),
h(d("div", ys, [
d("table", null, [
d("thead", null, [
d("tr", hs, [
d("th", Cs, D(s(e).resultsTitle), 1),
d("th", qs, D(s(e).resultsDisplayValue), 1)
])
]),
d("tbody", null, [
(a(!0), i(f, null, V(s(e).resultData, (r, l) => (a(), b(s(c), {
is: "survey-results-table-row",
model: r,
key: l
}, null, 8, ["model"]))), 128))
])
])
], 512), [
[H, s(e).resultViewType === "table"]
])
])
])) : p("", !0);
}
}), ks = { key: 2 }, fs = /* @__PURE__ */ g({
__name: "SurveyResultsRow",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i(f, null, [
h((a(), i("tr", {
onClick: o[0] || (o[0] = //@ts-ignore
(...n) => e.model.toggle && e.model.toggle(...n))
}, [
d("td", {
class: "svd-dark-border-color",
style: F({ paddingLeft: e.model.textMargin })
}, [
e.model.isNode ? (a(), i("span", {
key: 0,
class: m(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
style: F({ left: e.model.markerMargin })
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-expand_16x16",
size: 16
})
], 6)) : p("", !0),
e.model.question ? (a(), b(s(c), {
key: 1,
is: "survey-string",
locString: e.model.question.locTitle
}, null, 8, ["locString"])) : (a(), i("span", ks, D(e.model.title), 1))
], 4),
d("td", {
class: m({
"svd-test-results__node-value": e.model.isNode,
"svd-dark-border-color": !e.model.isNode
})
}, D(e.model.getString(e.model.displayValue)), 3)
])), [
[s(M)]
]),
e.model.isNode && !e.model.collapsed ? (a(!0), i(f, { key: 0 }, V(e.model.data, (n, r) => (a(), b(s(c), {
is: "survey-results-table-row",
model: n,
key: r + 1
}, null, 8, ["model"]))), 128)) : p("", !0)
], 64));
}
}), ws = { class: "svc-creator-tab__content" }, Ds = { class: "svc-json-editor-tab__content" }, Ts = { class: "svc-json-editor-tab__errros_list" }, Ns = /* @__PURE__ */ g({
__name: "JsonEditorAce",
props: {
model: {}
},
setup(u) {
const t = u, e = P();
return w(() => t.model), R(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", ws, [
d("div", Ds, [
d("div", {
class: "svc-json-editor-tab__ace-editor",
ref_key: "inputEl",
ref: e
}, null, 512),
h(d("div", Ts, [
v(s(c), {
is: "sv-list",
model: o.model.errorList
}, null, 8, ["model"])
], 512), [
[H, o.model.hasErrors]
])
])
]));
}
}), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Bs = ["aria-label", "disabled"], Is = { class: "svc-json-editor-tab__errros_list" }, Es = /* @__PURE__ */ g({
__name: "JsonEditorTextArea",
props: {
model: {}
},
setup(u) {
const t = u, e = P(), o = t.model;
return o.canShowErrors = !1, w(() => t.model), R(() => {
const n = t.model;
n.textElement = e.value;
}), (n, r) => (a(), i("div", Ms, [
d("div", Ss, [
h(d("textarea", {
class: "svc-json-editor-tab__content-area",
"aria-label": s(o).ariaLabel,
disabled: s(o).readOnly,
"onUpdate:modelValue": r[0] || (r[0] = (l) => s(o).text = l),
onKeydown: r[1] || (r[1] = (l) => s(o).checkKey(s(o), l)),
ref_key: "inputEl",
ref: e
}, `
`, 40, Bs), [
[de, s(o).text]
]),
h(d("div", Is, [
v(s(c), {
is: "sv-list",
model: s(o).errorList
}, null, 8, ["model"])
], 512), [
[H, s(o).hasErrors]
])
])
]));
}
}), Ps = { class: "svc-json-error__container" }, Rs = { class: "svc-json-error__title" }, Vs = ["title", "aria-label"], As = /* @__PURE__ */ g({
__name: "JsonEditorErrorItem",
props: {
item: {}
},
setup(u) {
const t = u;
w(() => t.item);
const e = (o) => {
o.stopPropagation(), t.item.data.fixError();
};
return (o, n) => (a(), i(f, null, [
v(s(c), {
is: "sv-svg-icon",
iconName: o.item.iconName,
size: o.item.iconSize,
class: m("svc-json-error__icon")
}, null, 8, ["iconName", "size"]),
d("div", Ps, [
d("div", Rs, [
v(s(c), {
is: "survey-string",
locString: o.item.locTitle
}, null, 8, ["locString"])
]),
o.item.data.showFixButton ? h((a(), i("button", {
key: 0,
type: "button",
onClick: e,
title: o.item.data.fixButtonTitle,
"aria-label": o.item.data.fixButtonTitle,
class: "svc-json-error__fix-button"
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: o.item.data.fixButtonIcon,
size: "auto"
}, null, 8, ["iconName"])
], 8, Vs)), [
[s(M)]
]) : p("", !0)
])
], 64));
}
}), zs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
__name: "LogicAddButton",
props: {
model: {}
},
setup(u) {
const t = u;
w(() => t.model);
const e = (o) => {
o.stopPropagation(), t.model.action();
};
return (o, n) => h((a(), i("div", {
role: "button",
class: m(["svc-logic-tab__content-action svc-btn", {
"svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
}]),
onClick: e
}, [
d("span", zs, D(o.model.title), 1)
], 2)), [
[s(M)]
]);
}
}), Ls = { class: "svc-creator-tab__content" }, Fs = {
key: 1,
class: "svc-logic-tab__content-empty"
}, Ks = /* @__PURE__ */ g({
__name: "Logic",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", Ls, [
d("div", {
class: m(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
}, [
e.model.hasItems ? (a(), i(f, { key: 0 }, [
v(s(O), {
model: e.model.itemsSurvey
}, null, 8, ["model"]),
e.model.readOnly ? p("", !0) : (a(), b(te, {
key: 0,
model: e.model.addNewButton
}, null, 8, ["model"]))
], 64)) : p("", !0),
e.model.hasItems ? p("", !0) : (a(), i("div", Fs, [
v(j, {
name: "logic",
placeholderTitleText: e.model.placeholderTitleText,
placeholderDescriptionText: e.model.placeholderDescriptionText
}, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
e.model.readOnly ? p("", !0) : (a(), b(te, {
key: 0,
model: e.model.addNewButton
}, null, 8, ["model"]))
]))
], 2)
]));
}
}), Us = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Hs = ["id"];
ue.Instance.registerRenderer(
"dropdown",
"logicoperator",
"sv-logic-operator"
);
const Qs = /* @__PURE__ */ g({
__name: "LogicOperator",
props: {
question: {}
},
setup(u) {
const t = u, e = P(), o = k(() => t.question.dropdownListModel ?? new Pe(t.question));
Q(t, e, (l) => {
he(l);
});
const n = (l) => {
var _;
(_ = o.value) == null || _.onClick(l);
}, r = (l) => {
var _;
(_ = o.value) == null || _.keyHandler(l);
};
return (l, _) => (a(), i("div", {
class: m(l.question.cssClasses.selectWrapper)
}, [
l.question.isReadOnly ? p("", !0) : (a(), i(f, { key: 0 }, [
d("div", {
class: m(l.question.getControlClass()),
onClick: n,
onKeyup: r,
id: l.question.inputId,
required: l.question.isRequired,
tabindex: l.question.isInputReadOnly ? void 0 : 0,
disabled: l.question.isInputReadOnly,
role: o.value.ariaQuestionRole,
"aria-required": o.value.ariaQuestionRequired,
"aria-invalid": o.value.ariaQuestionInvalid,
"aria-errormessage": o.value.ariaQuestionErrorMessage,
"aria-expanded": o.value.ariaQuestionExpanded,
"aria-label": o.value.ariaQuestionLabel,
"aria-labelledby": o.value.ariaQuestionLabelledby,
"aria-controls": o.value.ariaQuestionControls
}, [
d("div", {
class: m(l.question.cssClasses.controlValue)
}, [
l.question.locReadOnlyText ? (a(), b(s(c), {
key: 0,
is: "survey-string",
locString: l.question.locReadOnlyText
}, null, 8, ["locString"])) : p("", !0)
], 2)
], 42, Us),
v(s(c), {
is: "sv-popup",
model: l.question.popupModel
}, null, 8, ["model"])
], 64)),
l.question.isReadOnly ? (a(), i("div", {
key: 1,
disabled: "",
class: m(l.question.getControlClass()),
id: l.question.inputId
}, [
l.question.locReadOnlyText ? (a(), b(s(c), {
key: 0,
is: "survey-string",
locString: l.question.locReadOnlyText
}, null, 8, ["locString"])) : p("", !0)
], 10, Hs)) : p("", !0)
], 2));
}
}), Os = /* @__PURE__ */ g({
__name: "EmbeddedSurvey",
props: {
question: {}
},
setup(u) {
const t = u, e = P();
Q(t, e);
const o = k(() => t.question.embeddedSurvey);
return (n, r) => n.question && o.value && o.value.currentPage ? (a(), b(s(c), {
key: 0,
is: "sv-page",
page: o.value.currentPage,
survey: o.value
}, null, 8, ["page", "survey"])) : p("", !0);
}
}), Ws = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "LinkValue",
props: {
question: {}
},
setup(u) {
const t = u, e = P(), o = ce.getString("pe.clear");
return Q(t, e), (n, r) => (a(), i(f, null, [
v(s(c), {
is: "svc-action-button",
text: n.question.linkValueText,
click: n.question.doLinkClick.bind(n.question),
selected: n.question.isSelected,
disabled: !n.question.isClickable,
classes: n.question.linkSetButtonCssClasses,
title: n.question.tooltip,
iconName: n.question.iconName
}, null, 8, ["text", "click", "selected", "disabled", "classes", "title", "iconName"]),
!n.question.isReadOnly && n.question.showClear ? (a(), b(s(c), {
key: 0,
is: "svc-action-button",
text: s(o),
click: n.question.doClearClick.bind(n.question),
disabled: !1,
classes: n.question.linkClearButtonCssClasses
}, null, 8, ["text", "click", "classes"])) : p("", !0)
], 64));
}
}), Gs = {
key: 1,
class: "st-content"
}, js = { class: "svc-flex-column st-strings-wrapper" }, Js = { class: "svc-flex-row st-strings-header" }, Zs = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Xs = /* @__PURE__ */ g({
__name: "Translation",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
}, [
e.model.isEmpty ? (a(), b(j, {
key: 0,
name: "translation",
placeholderTitleText: e.model.placeholderTitleText,
placeholderDescriptionText: e.model.placeholderDescriptionText
}, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
e.model.isEmpty ? p("", !0) : (a(), i("div", Gs, [
d("div", js, [
d("div", Js, [
v(s(O), {
model: e.model.stringsHeaderSurvey
}, null, 8, ["model"])
]),
d("div", Zs, [
v(s(O), {
model: e.model.stringsSurvey
}, null, 8, ["model"])
])
])
]))
], 2));
}
}), Ys = (u, t) => {
const e = u.__vccOpts || u;
for (const [o, n] of t)
e[o] = n;
return e;
}, xs = {}, et = { class: "sd-translation-line-skeleton" };
function ot(u, t) {
return a(), i("div", et);
}
const st = /* @__PURE__ */ Ys(xs, [["render", ot]]), tt = /* @__PURE__ */ g({
__name: "TranslateFromAction",
props: {
item: {}
},
setup(u) {
return (t, e) => (a(), i("div", {
class: m(t.item.data.containerCss)
}, [
d("span", {
class: m(t.item.data.additionalTitleCss)
}, D(t.item.data.additionalTitle), 3),
v(s(c), {
is: "sv-action-bar-item-dropdown",
item: t.item
}, null, 8, ["item"])
], 2));
}
}), nt = {
key: 1,
class: "svc-plugin-tab__content"
}, at = {
key: 2,
class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
}, lt = /* @__PURE__ */ g({
__name: "Theme",
props: {
model: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(["svc-creator-tab__content svc-test-tab__content", {
"svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
}])
}, [
e.model.survey.isEmpty ? (a(), b(j, {
key: 0,
name: "theme",
placeholderTitleText: e.model.placeholderTitleText,
placeholderDescriptionText: e.model.placeholderDescriptionText
}, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
e.model.survey.isEmpty ? p("", !0) : (a(), i("div", nt, [
v(s(c), {
is: "survey-simulator",
model: e.model.simulator
}, null, 8, ["model"]),
e.model.showResults ? (a(), b(s(c), {
key: 0,
is: "survey-results",
survey: e.model.survey
}, null, 8, ["survey"])) : p("", !0)
])),
e.model.isPageToolbarVisible ? (a(), i("div", at, [
v(s(c), {
is: "sv-action-bar",
model: e.model.pages
}, null, 8, ["model"])
])) : p("", !0)
], 2));
}
}), it = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], rt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], dt = /* @__PURE__ */ g({
__name: "Color",
props: {
question: {}
},
setup(u) {
return Q(u, P()), (e, o) => (a(), i("div", {
class: m(e.question.cssClasses.root),
onKeydown: o[5] || (o[5] = //@ts-ignore
(...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
}, [
d("label", {
class: m(e.question.getSwatchCss()),
style: F(e.question.getSwatchStyle())
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: e.question.cssClasses.swatchIcon,
size: "auto"
}, null, 8, ["iconName"]),
d("input", {
type: "color",
disabled: e.question.isInputReadOnly,
class: m(e.question.cssClasses.colorInput),
value: e.question.renderedColorValue,
tabindex: "-1",
onChange: o[0] || (o[0] = //@ts-ignore
(...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n)),
"aria-required": e.question.a11y_input_ariaRequired,
"aria-labelledby": e.question.a11y_input_ariaLabelledBy,
"aria-label": e.question.a11y_input_ariaLabel,
"aria-invalid": e.question.a11y_input_ariaInvalid,
"aria-describedby": e.question.a11y_input_ariaDescribedBy
}, null, 42, it)
], 6),
d("input", {
autocomplete: "off",
disabled: e.question.isInputReadOnly,
id: e.question.inputId,
placeholder: e.question.renderedPlaceholder,
"aria-required": e.question.a11y_input_ariaRequired,
"aria-labelledby": e.question.a11y_input_ariaLabelledBy,
"aria-label": e.question.a11y_input_ariaLabel,
"aria-invalid": e.question.a11y_input_ariaInvalid,
"aria-describedby": e.question.a11y_input_ariaDescribedBy,
onChange: o[1] || (o[1] = //@ts-ignore
(...n) => e.question.onChange && e.question.onChange(...n)),
onKeyup: o[2] || (o[2] = //@ts-ignore
(...n) => e.question.onKeyUp && e.question.onKeyUp(...n)),
onBlur: o[3] || (o[3] = //@ts-ignore
(...n) => e.question.onBlur && e.question.onBlur(...n)),
onBeforeinput: o[4] || (o[4] = //@ts-ignore
(...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
value: e.question.renderedValue,
class: m(e.question.cssClasses.control)
}, null, 42, rt),
e.question.showDropdownAction ? (a(), i(f, { key: 0 }, [
d("div", {
"aria-hidden": "true",
class: m(e.question.cssClasses.choicesButtonWrapper)
}, [
v(s(c), {
is: "sv-action-bar-item",
item: e.question.dropdownAction
}, null, 8, ["item"])
], 2),
v(s(c), {
is: "sv-popup",
model: e.question.dropdownAction.popupModel
}, null, 8, ["model"])
], 64)) : p("", !0)
], 34));
}
}), ct = /* @__PURE__ */ g({
__name: "ColorItem",
props: {
model: {},
item: {}
},
setup(u) {
const t = u;
w(() => t.item);
const e = () => ({ backgroundColor: t.item.value });
return (o, n) => (a(), i(f, null, [
d("span", {
class: "spg-color-editor__color-swatch",
style: F(e())
}, null, 4),
v(s(c), {
is: "survey-string",
locString: o.item.locTitle
}, null, 8, ["locString"])
], 64));
}
}), ut = ["disabled", "value", "placeholder"], pt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], vt = ["title", "disabled"], mt = ["for", "aria-label"], _t = /* @__PURE__ */ g({
__name: "File",
props: {
question: {}
},
setup(u) {
const t = P();
return Q(u, t), (o, n) => (a(), i("div", {
class: m(o.question.cssClasses.root),
onDragenter: n[5] || (n[5] = //@ts-ignore
(...r) => o.question.onDragEnter && o.question.onDragEnter(...r)),
onDragover: n[6] || (n[6] = //@ts-ignore
(...r) => o.question.onDragOver && o.question.onDragOver(...r)),
onDrop: n[7] || (n[7] = //@ts-ignore
(...r) => o.question.onDrop && o.question.onDrop(...r)),
onDragleave: n[8] || (n[8] = //@ts-ignore
(...r) => o.question.onDragLeave && o.question.onDragLeave(...r)),
onKeydown: n[9] || (n[9] = //@ts-ignore
(...r) => o.question.onKeyDown && o.question.onKeyDown(...r)),
ref_key: "root",
ref: t
}, [
d("input", {
type: "text",
disabled: o.question.isTextInputReadOnly,
class: m(o.question.cssClasses.control),
value: o.question.renderedValue || "",
onChange: n[0] || (n[0] = //@ts-ignore
(...r) => o.question.onInputChange && o.question.onInputChange(...r)),
onBlur: n[1] || (n[1] = //@ts-ignore
(...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
placeholder: o.question.renderedPlaceholder
}, null, 42, ut),
d("input", {
type: "file",
disabled: o.question.isInputReadOnly,
class: m(o.question.cssClasses.fileInput),
id: o.question.inputId,
"aria-required": o.question.ariaRequired,
"aria-label": o.question.ariaLabel,
"aria-invalid": o.question.ariaInvalid,
"aria-describedby": o.question.ariaDescribedBy,
multiple: !1,
title: o.question.inputTitle,
tabindex: -1,
accept: o.question.acceptedTypes,
onChange: n[2] || (n[2] = //@ts-ignore
(...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
}, null, 42, pt),
d("div", {
class: m(o.question.cssClasses.buttonsContainer)
}, [
h((a(), i("button", {
title: o.question.clearButtonCaption,
class: m(o.question.cssClasses.clearButton),
disabled: o.question.getIsClearButtonDisabled(),
onClick: n[3] || (n[3] = //@ts-ignore
(...r) => o.question.doClean && o.question.doClean(...r))
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: o.question.cssClasses.clearButtonIcon,
size: "auto"
}, null, 8, ["iconName"])
], 10, vt)), [
[s(M)]
]),
h((a(), i("label", {
class: m(o.question.getChooseButtonCss()),
for: o.question.inputId,
"aria-label": o.question.chooseButtonCaption,
onClick: n[4] || (n[4] = //@ts-ignore
(...r) => o.question.chooseFiles && o.question.chooseFiles(...r))
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: o.question.cssClasses.chooseButtonIcon,
size: "auto",
title: o.question.chooseButtonCaption
}, null, 8, ["iconName", "title"])
], 10, mt)), [
[s(M)]
])
], 2)
], 34));
}
}), gt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], bt = ["disabled"], yt = ["disabled"], ht = /* @__PURE__ */ g({
__name: "SpinEditor",
props: {
question: {}
},
setup(u) {
return Q(u, P()), (e, o) => (a(), i("div", {
class: m(e.question.cssClasses.root),
onKeydown: o[18] || (o[18] = //@ts-ignore
(...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
}, [
d("input", {
role: "spinbutton",
autocomplete: "off",
disabled: e.question.isInputReadOnly,
id: e.question.inputId,
placeholder: e.question.renderedPlaceholder,
"aria-required": e.question.a11y_input_ariaRequired,
"aria-label": e.question.a11y_input_ariaLabel,
"aria-labelledby": e.question.a11y_input_ariaLabelledBy,
"aria-describedby": e.question.a11y_input_ariaDescribedBy,
"aria-invalid": e.question.a11y_input_ariaInvalid,
"aria-errormessage": e.question.a11y_input_ariaErrormessage,
onChange: o[0] || (o[0] = //@ts-ignore
(...n) => e.question.onChange && e.question.onChange(...n)),
onKeydown: o[1] || (o[1] = //@ts-ignore
(...n) => e.question.onInputKeyDown && e.question.onInputKeyDown(...n)),
onKeyup: o[2] || (o[2] = //@ts-ignore
(...n) => e.question.onKeyUp && e.question.onKeyUp(...n)),
onBlur: o[3] || (o[3] = //@ts-ignore
(...n) => e.question.onBlur && e.question.onBlur(...n)),
onFocus: o[4] || (o[4] = //@ts-ignore
(...n) => e.question.onFocus && e.question.onFocus(...n)),
onBeforeinput: o[5] || (o[5] = //@ts-ignore
(...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
value: e.question.renderedValue,
class: m(e.question.cssClasses.control)
}, null, 42, gt),
d("span", {
class: m(e.question.cssClasses.buttonsContainer)
}, [
d("button", {
"aria-hidden": "true",
disabled: e.question.isInputReadOnly,
class: m(e.question.cssClasses.arrowButton),
onClick: o[6] || (o[6] = //@ts-ignore
(...n) => e.question.onDownButtonClick && e.question.onDownButtonClick(...n)),
onMousedown: o[7] || (o[7] = //@ts-ignore
(...n) => e.question.onDownButtonMouseDown && e.question.onDownButtonMouseDown(...n)),
onMouseup: o[8] || (o[8] = //@ts-ignore
(...n) => e.question.onButtonMouseUp && e.question.onButtonMouseUp(...n)),
onMouseleave: o[9] || (o[9] = //@ts-ignore
(...n) => e.question.onButtonMouseLeave && e.question.onButtonMouseLeave(...n)),
onBlur: o[10] || (o[10] = //@ts-ignore
(...n) => e.question.onBlur && e.question.onBlur(...n)),
onFocus: o[11] || (o[11] = //@ts-ignore
(...n) => e.question.onFocus && e.question.onFocus(...n)),
tabindex: "-1"
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: e.question.cssClasses.decreaseButtonIcon,
size: "auto"
}, null, 8, ["iconName"])
], 42, bt),
d("button", {
"aria-hidden": "true",
disabled: e.question.isInputReadOnly,
class: m(e.question.cssClasses.arrowButton),
onClick: o[12] || (o[12] = //@ts-ignore
(...n) => e.question.onUpButtonClick && e.question.onUpButtonClick(...n)),
onMousedown: o[13] || (o[13] = //@ts-ignore
(...n) => e.question.onUpButtonMouseDown && e.question.onUpButtonMouseDown(...n)),
onMouseup: o[14] || (o[14] = //@ts-ignore
(...n) => e.question.onButtonMouseUp && e.question.onButtonMouseUp(...n)),
onMouseleave: o[15] || (o[15] = //@ts-ignore
(...n) => e.question.onButtonMouseLeave && e.question.onButtonMouseLeave(...n)),
onBlur: o[16] || (o[16] = //@ts-ignore
(...n) => e.question.onBlur && e.question.onBlur(...n)),
onFocus: o[17] || (o[17] = //@ts-ignore
(...n) => e.question.onFocus && e.question.onFocus(...n)),
tabindex: "-1"
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: e.question.cssClasses.increaseButtonIcon,
size: "auto"
}, null, 8, ["iconName"])
], 42, yt)
], 2)
], 34));
}
}), Ct = ["disabled", "title"], ne = /* @__PURE__ */ g({
__name: "TextWithReset",
props: {
question: {}
},
setup(u) {
const t = u, e = () => "survey-" + t.question.wrappedQuestionTemplate;
return Q(t, P()), w(() => {
var o;
return (o = t.question) == null ? void 0 : o.resetValueAdorner;
}), (o, n) => (a(), i("div", {
class: m(o.question.getRootClass())
}, [
v(s(c), {
is: e(),
question: o.question
}, null, 8, ["is", "question"]),
d("button", {
class: m(o.question.cssClasses.resetButton),
disabled: o.question.resetValueAdorner.isDisabled,
onClick: n[0] || (n[0] = //@ts-ignore
(...r) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...r)),
title: o.question.resetValueAdorner.caption
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: o.question.cssClasses.resetButtonIcon,
size: "auto"
}, null, 8, ["iconName"])
], 10, Ct)
], 2));
}
}), qt = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], $t = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
/* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
], -1), kt = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
/* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
], -1), ft = [
$t,
kt
], wt = { class: "spg-boolean-switch__caption" }, Dt = ["id"];
ue.Instance.registerRenderer(
"boolean",
"switch",
"sv-boolean-switch"
);
const Tt = /* @__PURE__ */ g({
inheritAttrs: !1,
__name: "BooleanSwitch",
props: {
question: {}
},
setup(u) {
const t = u, e = P(null);
Q(t, e);
const o = k({
get() {
return t.question.booleanValue;
},
set(n) {
const r = t.question;
r.booleanValue = n;
}
});
return (n, r) => (a(), i("div", {
class: "spg-boolean-switch",
role: "checkbox",
"aria-checked": n.question.booleanValue || !1,
"aria-required": n.question.a11y_input_ariaRequired,
"aria-label": n.question.a11y_input_ariaLabel,
"aria-labelledby": n.question.a11y_input_ariaLabelledBy,
"aria-invalid": n.question.a11y_input_ariaInvalid,
"aria-errormessage": n.question.a11y_input_ariaErrormessage,
onClick: r[0] || (r[0] = (l) => o.value = !o.value)
}, [
h((a(), i("div", {
class: m(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
tabindex: "0"
}, ft, 2)), [
[s(M), { disableTabStop: !0 }]
]),
d("div", wt, [
d("div", {
class: "spg-boolean-switch__title",
id: n.question.labelRenderedAriaID
}, [
v(s(c), {
is: "survey-string",
locString: n.question.locTitle
}, null, 8, ["locString"])
], 8, Dt)
])
], 8, qt));
}
}), Nt = { class: "svc-string-editor__content" }, Mt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), St = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Bt = { class: "svc-string-editor__input" }, It = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], Et = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], Pt = {
key: 0,
class: "svc-string-editor__error"
}, Rt = /* @__PURE__ */ g({
__name: "StringEditor",
props: {
locString: {}
},
setup(u) {
const t = u, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = P(), r = P(), l = z(
() => {
const y = new Ce(
e.value,
o.value
);
return y.setLocString(e.value), y.blurEditor = () => {
n.value && (n.value.blur(), n.value.spellcheck = !1);
}, y.getEditorElement = () => n.value, setTimeout(() => y.afterRender()), y;
},
[() => o.value, () => e.value],
(y) => {
y && (y.blurEditor = void 0, y.getEditorElement = void 0, y.dispose());
}
), _ = k(() => {
var y;
return (y = l.value) == null ? void 0 : y.errorText;
}), N = k(() => {
var y;
return (y = l.value) == null ? void 0 : y.className(e.value.renderedHtml);
}), $ = k(() => {
var y;
return (y = l.value) == null ? void 0 : y.placeholder;
}), q = k(() => {
var y;
return (y = l.value) == null ? void 0 : y.contentEditable;
}), C = k(() => {
var y;
return (y = l.value) == null ? void 0 : y.characterCounter;
}), I = k(
() => {
var y;
return (y = l.value) == null ? void 0 : y.showCharacterCounter;
}
), L = k(
() => {
var y;
return (y = l.value) == null ? void 0 : y.getCharacterCounterClass;
}
), J = (y) => {
var T, E;
return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = l.value) == null || T.onBlur(y), (E = l.value) == null ? void 0 : E.errorText;
}, U = (y) => {
var T;
(T = l.value) == null || T.onFocus(y);
}, ve = (y) => {
var T;
(T = l.value) == null || T.onPaste(y);
}, se = (y) => {
var T, E;
(T = n.value) == null || T.focus(), e.value.__isEditing = !0, (E = l.value) == null || E.onClick(y);
}, Z = () => {
r.value = e.value.renderedHtml;
}, me = G(
() => e.value,
(y, T) => {
T && y.onStringChanged.remove(Z), y && (y.onStringChanged.add(Z), Z());
},
{
immediate: !0
}
);
return R(() => {
var y;
e.value.__isEditing && ((y = n.value) == null || y.focus());
}), K(() => {
me(), e.value.onStringChanged.remove(Z);
}), (y, T) => (a(), i("span", {
class: m(N.value)
}, [
d("span", Nt, [
Mt,
St,
d("span", Bt, [
e.value.hasHtml ? p("", !0) : (a(), i("span", {
key: 0,
role: "textbox",
class: "sv-string-editor",
spellcheck: "false",
onFocus: U,
onPaste: ve,
onBlur: J,
onInput: T[0] || (T[0] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onInput) && ((B = s(l)) == null ? void 0 : B.onInput(...E));
}),
onBeforeinput: T[1] || (T[1] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onBeforeInput) && ((B = s(l)) == null ? void 0 : B.onBeforeInput(...E));
}),
onKeydown: T[2] || (T[2] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
}),
onKeyup: T[3] || (T[3] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
}),
onCompositionstart: T[4] || (T[4] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
}),
onCompositionend: T[5] || (T[5] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
}),
onMouseup: T[6] || (T[6] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
}),
onClick: se,
textContent: r.value,
"aria-placeholder": $.value,
"aria-label": $.value || "content editable",
contenteditable: q.value,
tabindex: s(l).tabIndex,
ref_key: "root",
ref: n
}, null, 40, It)),
e.value.hasHtml ? (a(), i("span", {
key: 1,
role: "textbox",
class: "sv-string-editor sv-string-editor--html",
spellcheck: "false",
onFocus: U,
onBlur: J,
onKeydown: T[7] || (T[7] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
}),
onKeyup: T[8] || (T[8] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
}),
onCompositionstart: T[9] || (T[9] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
}),
onCompositionend: T[10] || (T[10] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
}),
onMouseup: T[11] || (T[11] = //@ts-ignore
(...E) => {
var S, B;
return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
}),
onClick: se,
"aria-placeholder": $.value,
"aria-label": $.value || "content editable",
contenteditable: q.value,
tabindex: s(l).tabIndex,
innerHTML: r.value,
ref_key: "root",
ref: n
}, null, 40, Et)) : p("", !0),
I.value ? (a(), b(s(c), {
key: 2,
is: "sv-character-counter",
counter: C.value,
remainingCharacterCounter: L.value
}, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
])
]),
_.value ? (a(), i("span", Pt, D(_.value), 1)) : p("", !0)
], 2));
}
}), Vt = {
key: 0,
class: "svc-toolbox__search-container"
}, At = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), zt = {
key: 1,
class: "svc-toolbox__placeholder"
}, Lt = {
key: 1,
class: "svc-toolbox__category"
}, Ft = /* @__PURE__ */ g({
__name: "AdaptiveToolbox",
props: {
model: {}
},
setup(u) {
const t = u, e = k(() => t.model.toolbox), o = P();
w(() => e.value), W(() => {
e.value.afterRender(o.value);
}), R(() => {
e.value.afterRender(o.value);
}), K(() => {
e.value.beforeDestroy();
});
const n = k(() => e.value.renderedActions);
return (r, l) => (a(), i("div", {
class: m(e.value.classNames),
ref_key: "root",
ref: o,
style: F(e.value.getRootStyle())
}, [
d("div", {
onFocusout: l[0] || (l[0] = (_) => e.value.focusOut(_)),
class: "svc-toolbox__panel"
}, [
e.value.showSearch ? (a(), i("div", Vt, [
e.value.isCompactRendered ? (a(), b(s(c), {
is: "svc-toolbox-tool",
creator: r.model,
key: "searchitem",
item: e.value.searchItem,
parentModel: e.value,
isCompact: e.value.isCompactRendered
}, null, 8, ["creator", "item", "parentModel", "isCompact"])) : p("", !0),
v(s(c), {
is: "svc-search",
model: e.value.searchManager
}, null, 8, ["model"]),
At
])) : p("", !0),
e.value.showPlaceholder ? (a(), i("div", zt, D(e.value.toolboxNoResultsFound), 1)) : p("", !0),
v(s(c), { is: "sv-scroll" }, {
default: X(() => [
e.value.showInSingleCategory ? p("", !0) : (a(!0), i(f, { key: 0 }, V(e.value.categories, (_, N) => (a(), b(s(c), {
is: "svc-toolbox-category",
key: N,
category: _,
toolbox: e.value
}, null, 8, ["category", "toolbox"]))), 128)),
e.value.showInSingleCategory ? (a(), i("div", Lt, [
(a(!0), i(f, null, V(n.value, (_) => (a(), b(s(c), {
key: _.renderedId,
is: "svc-toolbox-tool",
creator: r.model,
item: _,
parentModel: e.value,
isCompact: e.value.isCompactRendered
}, null, 8, ["creator", "item", "parentModel", "isCompact"]))), 128))
])) : p("", !0)
]),
_: 1
})
], 32)
], 6));
}
}), Kt = {
key: 0,
class: "svc-toolbox__category-separator"
}, Ut = /* @__PURE__ */ g({
__name: "ToolboxTool",
props: {
creator: {},
item: {},
parentModel: {},
isCompact: { type: Boolean }
},
setup(u) {
const t = u, e = z(
() => new qe(
t.item,
t.creator,
t.parentModel
),
[() => t.creator, () => t.item],
(n) => {
n.dispose();
}
), o = P();
return R(() => {
const n = t.item;
n.updateModeCallback = (r, l) => {
n.mode = r, re(() => l(r, o.value));
}, n.afterRender();
}), K(() => {
const n = t.item;
n.updateModeCallback = void 0;
}), w(() => t.item), (n, r) => {
var l;
return a(), i("div", {
class: m(n.item.css),
ref_key: "root",
ref: o
}, [
n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Kt)) : p("", !0),
d("div", {
class: "svc-toolbox__tool-content sv-action__content",
onPointerdown: r[0] || (r[0] = //@ts-ignore
(..._) => {
var N, $;
return ((N = s(e)) == null ? void 0 : N.onPointerDown) && (($ = s(e)) == null ? void 0 : $.onPointerDown(..._));
})
}, [
v(s(c), {
viewModel: s(e),
is: (l = s(e)) == null ? void 0 : l.itemComponent,
item: n.item,
creator: n.creator,
isCompact: n.isCompact
}, null, 8, ["viewModel", "is", "item", "creator", "isCompact"])
], 32)
], 2);
};
}
}), Ht = ["aria-label", "title"], Qt = { class: "svc-toolbox__item-container" }, Ot = {
key: 0,
class: "svc-toolbox__item-title"
}, Wt = /* @__PURE__ */ g({
__name: "ToolboxItem",
props: {
creator: {},
item: {},
isCompact: { type: Boolean },
viewModel: {}
},
setup(u) {
return (t, e) => (a(), i(f, null, [
h((a(), i("div", {
class: m(["svc-toolbox__item", t.item.renderedCss]),
role: "button",
"aria-label": t.item.getTooltip(),
title: t.item.getTooltip(),
onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
}, [
d("span", Qt, [
t.item.iconName ? (a(), b(s(c), {
key: 0,
is: "sv-svg-icon",
iconName: t.item.iconName,
size: "auto",
class: "svc-toolbox__item-icon"
}, null, 8, ["iconName"])) : p("", !0)
]),
t.isCompact ? p("", !0) : (a(), i("span", Ot, D(t.item.title), 1))
], 10, Ht)), [
[s(M), { disableTabStop: !t.viewModel.toolboxItem.enabled }]
]),
t.isCompact ? (a(), i("span", {
key: 0,
class: "svc-toolbox__item-banner",
onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: t.item.iconName,
size: 24,
class: "svc-toolbox__item-icon"
}, null, 8, ["iconName"]),
d("span", null, D(t.item.title), 1)
])) : p("", !0)
], 64));
}
}), Gt = /* @__PURE__ */ g({
__name: "ToolboxItemGroup",
props: {
creator: {},
item: {},
isCompact: { type: Boolean },
viewModel: {}
},
setup(u) {
const t = u, e = (n) => {
t.viewModel.onMouseOver(t.item, n);
}, o = (n) => {
t.viewModel.onMouseLeave(t.item, n);
};
return (n, r) => (a(), i(f, null, [
v(s(c), {
is: "svc-toolbox-item",
viewModel: n.viewModel,
item: n.item,
creator: n.creator,
isCompact: n.isCompact
}, null, 8, ["viewModel", "item", "creator", "isCompact"]),
d("div", {
class: "svc-toolbox__item-submenu-button",
onMouseover: e,
onMouseleave: o
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: n.item.subitemsButtonIcon,
size: "auto"
}, null, 8, ["iconName"]),
v(s(c), {
is: "sv-popup",
model: n.item.popupModel
}, null, 8, ["model"])
], 32)
], 64));
}
}), jt = { className: "svc-toolbox__category-header-wrapper" }, Jt = { class: "svc-toolbox__category-title" }, Zt = {
key: 0,
class: "svc-toolbox__category-header__controls"
}, Xt = /* @__PURE__ */ g({
__name: "ToolboxCategory",
props: {
category: {},
toolbox: {}
},
setup(u) {
const t = u;
return w(() => t.category), (e, o) => (a(), i("div", {
class: m(["svc-toolbox__category", {
"svc-toolbox__category--collapsed": e.category.collapsed,
"svc-toolbox__category--empty": e.category.empty
}])
}, [
d("div", jt, [
h((a(), i("div", {
class: m(["svc-toolbox__category-header", {
"svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
}]),
onClick: o[0] || (o[0] = (n) => e.category.toggleState())
}, [
d("span", Jt, [
v(s(c), {
is: "survey-string",
locString: e.category.locTitle
}, null, 8, ["locString"])
]),
e.toolbox.canCollapseCategories ? (a(), i("div", Zt, [
v(s(c), {
is: "sv-svg-icon",
iconName: e.category.iconName,
class: m(e.category.iconClassName),
size: "auto"
}, null, 8, ["iconName", "class"])
])) : p("", !0)
], 2)), [
[s(M)]
])
]),
(a(!0), i(f, null, V(e.category.items, (n) => (a(), b(s(c), {
is: "svc-toolbox-tool",
item: n,
key: n.renderedId,
creator: e.toolbox.creator,
parentModel: e.toolbox,
isCompact: !1
}, null, 8, ["item", "creator", "parentModel"]))), 128))
], 2));
}
}), Yt = /* @__PURE__ */ g({
__name: "ToolboxList",
props: {
model: {},
creator: {}
},
setup(u) {
const t = u;
return w(() => t.model), (e, o) => (a(), i("div", {
class: m(e.model.cssClasses.root)
}, [
(a(!0), i(f, null, V(e.model.renderedActions, (n, r) => (a(), b(s(c), {
key: r,
is: "svc-toolbox-tool",
creator: e.creator,
item: n,
parentModel: e.model,
isCompact: !1
}, null, 8, ["creator", "item", "parentModel"]))), 128))
], 2));
}
}), xt = { class: "svc-flex-column" }, en = { class: "svc-tab-designer_content" }, on = {
key: 0,
class: "svc-designer-header"
}, sn = {
class: "svc-designer__placeholder-container",
"data-sv-drop-target-survey-element": "newGhostPage"
}, tn = {
className: "svc-designer-placeholder-page",
"data-sv-drop-target-survey-element": "newGhostPage"
}, nn = {
key: 0,
class: "svc-designer-header"
}, an = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], ln = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], rn = {
key: 0,
class: "svc-tab-designer__tools"
}, dn = {
key: 0,
class: "svc-tab-designer__page-navigator"
}, cn = {
key: 1,
class: "svc-tab-designer__toolbar"
}, un = /* @__PURE__ */ g({
__name: "Designer",
props: {
model: {}
},
setup(u) {
const t = u, e = k(() => t.model.survey);
return w(() => t.model), w(() => e.value), w(() => t.model.pagesController), (o, n) => (a(), i(f, null, [
d("div", xt, [
o.model.isToolboxVisible ? (a(), b(s(c), {
key: 0,
is: "svc-toolbox",
model: o.model.creator
}, null, 8, ["model"])) : p("", !0)
]),
d("div", {
class: m(["svc-tab-designer", o.model.getRootCss()]),
onClick: n[0] || (n[0] = //@ts-ignore
(...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
}, [
v(s(c), { is: "sv-scroll" }, {
default: X(() => [
d("div", en, [
o.model.showPlaceholder ? (a(), i(f, { key: 0 }, [
o.model.creator.showHeaderInEmptySurvey && o.model.creator.showSurveyHeader ? (a(), i("div", on, [
v(s(c), {
is: "survey-header",
survey: o.model.creator.survey
}, null, 8, ["survey"])
])) : p("", !0),
d("div", sn, [
v(j, {
name: "designer",
placeholderTitleText: o.model.placeholderTitleText,
placeholderDescriptionText: o.model.placeholderDescriptionText
}, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
d("div", tn, [
v(s(c), {
is: "svc-page",
survey: o.model.creator.survey,
creator: o.model.creator,
page: o.model.newPage,
isGhost: !0
}, null, 8, ["survey", "creator", "page"])
])
])
], 64)) : p("", !0),
o.model.showPlaceholder ? p("", !0) : (a(), i(f, { key: 1 }, [
d("div", {
class: m(o.model.designerCss),
style: F([
{ maxWidth: o.model.survey.renderedWidth },
o.model.surfaceCssVariables
])
}, [
o.model.creator.showSurveyHeader ? (a(), i("div", nn, [
v(s(c), {
is: "survey-header",
survey: o.model.creator.survey
}, null, 8, ["survey"])
])) : p("", !0),
o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(f, { key: 1 }, V(o.model.pages, (r) => (a(), i("div", {
key: r.id,
class: "svc-page",
"data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
"data-sv-drop-target-page": r.name
}, [
v(s(c), {
is: "svc-page",
survey: o.model.creator.survey,
creator: o.model.creator,
page: r,
isGhost: r == o.model.newPage
}, null, 8, ["survey", "creator", "page", "isGhost"])
], 8, an))), 128)) : p("", !0),
o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), i("div", {
key: 2,
class: "svc-page",
"data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
"data-sv-drop-target-page": o.model.pagesController.page2Display.name
}, [
v(s(c), {
is: "svc-page",
page: o.model.pagesController.page2Display,
creator: o.model.creator,
isGhost: o.model.pagesController.page2Display == o.model.newPage
}, null, 8, ["page", "creator", "isGhost"])
], 8, ln)) : p("", !0)
], 6),
o.model.showSurfaceTools ? (a(), i("div", rn, [
o.model.creator.showPageNavigator ? (a(), i("div", dn, [
v(s(c), {
is: "svc-page-navigator",
pagesController: o.model.pagesController,
pageEditMode: o.model.creator.pageEditMode
}, null, 8, ["pagesController", "pageEditMode"])
])) : p("", !0),
o.model.showSurfaceToolbar ? (a(), i("div", cn, [
v(s(c), {
is: "sv-action-bar",
model: o.model.surfaceToolbar
}, null, 8, ["model"])
])) : p("", !0)
])) : p("", !0)
], 64))
])
]),
_: 1
})
], 2)
], 64));
}
}), pn = ["id", "data-sv-drop-target-survey-page"], vn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), _n = {
key: 1,
class: "svc-page__loading-content"
}, gn = {
key: 2,
class: "svc-page__placeholder_frame"
}, bn = { class: "svc-panel__placeholder_frame" }, yn = { class: "svc-panel__placeholder" }, hn = { class: "svc-page__content-actions" }, Cn = {
key: 4,
class: "svc-page__content-actions"
}, qn = /* @__PURE__ */ g({
__name: "Page",
props: {
creator: {},
survey: {},
page: {},
isGhost: { type: Boolean }
},
setup(u) {
const t = u, e = P(), o = z(
() => {
const r = new $e(t.creator, t.page);
return r.isGhost = t.isGhost, r;
},
[() => t.page],
(r) => {
r.dispose();
}
);
G(
() => t.isGhost,
() => {
o.value && (o.value.isGhost = t.isGhost);
}
), W(() => {
e.value && o.value && (o.value.rootElement = e.value);
}), R(() => {
e.value && o.value && o.value.setRootElement(e.value);
});
const n = (r) => {
o.value.hover(r, r.currentTarget);
};
return (r, l) => s(o).page ? h((a(), i("div", {
key: s(o).page.id,
id: s(o).page.id,
class: m(["svc-page__content", s(o).css]),
"data-sv-drop-target-survey-page": s(o).dropTargetName,
onClick: l[1] || (l[1] = (_) => {
s(o).select(s(o), _), _.stopPropagation();
}),
ref_key: "root",
ref: e,
onDblclick: l[2] || (l[2] = (_) => s(o).dblclick(_)),
onMouseover: n,
onMouseleave: n
}, [
vn,
mn,
s(o).needRenderContent ? (a(), b(s(c), {
key: 0,
is: "sv-page",
survey: s(o).creator.survey,
page: s(o).page
}, null, 8, ["survey", "page"])) : p("", !0),
s(o).needRenderContent ? p("", !0) : (a(), i("div", _n, [
v(s(c), { is: "sv-loading-indicator" })
])),
s(o).showPlaceholder ? (a(), i("div", gn, [
d("div", bn, [
d("div", yn, D(s(o).placeholderText), 1)
])
])) : p("", !0),
s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
key: 3,
class: "svc-question__drag-area",
onPointerdown: l[0] || (l[0] = (_) => s(o).onPointerDown(_))
}, [
v(s(c), A({
is: "sv-svg-icon",
class: "svc-question__drag-element"
}, {
css: "svc-question__drag-element",
iconName: "icon-drag-area-indicator_24x16",
size: "auto"
}), null, 16),
d("div", hn, [
v(s(c), {
is: "sv-action-bar",
model: s(o).actionContainer
}, null, 8, ["model"]),
s(o).topActionContainer.hasActions ? (a(), b(s(c), {
key: 0,
is: "sv-action-bar",
model: s(o).topActionContainer
}, null, 8, ["model"])) : p("", !0)
])
], 32)) : p("", !0),
!s(o).allowDragging || s(o).isGhost ? (a(), i("div", Cn, [
v(s(c), {
is: "sv-action-bar",
model: s(o).actionContainer
}, null, 8, ["model"]),
s(o).topActionContainer.hasActions ? (a(), b(s(c), {
key: 0,
is: "sv-action-bar",
model: s(o).topActionContainer
}, null, 8, ["model"])) : p("", !0)
])) : p("", !0),
v(s(c), {
is: "sv-action-bar",
model: s(o).footerActionsBar
}, null, 8, ["model"])
], 42, pn)), [
[s(M)]
]) : p("", !0);
}
}), $n = { class: "svc-add-new-item-button__text" }, kn = /* @__PURE__ */ g({
__name: "AddQuestion",
props: {
item: {},
buttonClass: {},
renderPopup: {}
},
setup(u) {
const t = u;
w(() => t.item.data);
const e = k(
() => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
), o = k(
() => t.renderPopup === void 0 || t.renderPopup !== !1
);
return (n, r) => (a(), i(f, null, [
h((a(), i("div", {
class: m(e.value),
onClick: r[0] || (r[0] = (l) => {
n.item.data.addNewQuestion(n.item, l), l.stopPropagation();
}),
onMouseover: r[1] || (r[1] = (l) => n.item.data.hoverStopper && n.item.data.hoverStopper(l, l.currentTarget))
}, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-panel__add-new-question-icon",
iconName: "icon-add_24x24",
size: "auto"
}),
d("span", $n, D(n.item.data.addNewQuestionText), 1),
o.value ? (a(), b(s(c), {
key: 0,
is: "svc-add-question-type-selector",
questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
renderPopup: o.value
}, null, 8, ["questionTypeSelectorModel", "renderPopup"])) : p("", !0)
], 34)), [
[s(M)]
]),
o.value ? p("", !0) : (a(), b(s(c), {
key: 0,
is: "svc-add-question-type-selector",
questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
renderPopup: o.value
}, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
], 64));
}
}), fn = ["title", "aria-label"], wn = /* @__PURE__ */ g({
__name: "AddQuestionTypeSelector",
props: {
questionTypeSelectorModel: {},
renderPopup: {}
},
setup(u) {
const t = u;
return w(() => t.questionTypeSelectorModel), (e, o) => h((a(), i("button", {
type: "button",
onClick: o[0] || (o[0] = (n) => {
e.questionTypeSelectorModel.action(), n.stopPropagation();
}),
title: e.questionTypeSelectorModel.title,
"aria-label": e.questionTypeSelectorModel.title,
class: "svc-element__question-type-selector"
}, [
v(s(c), A({
is: "sv-svg-icon",
class: "svc-element__question-type-selector-icon"
}, {
iconName: e.questionTypeSelectorModel.iconName,
size: "auto",
title: e.questionTypeSelectorModel.title
}), null, 16),
e.renderPopup ? (a(), b(s(c), {
key: 0,
is: "sv-popup",
model: e.questionTypeSelectorModel.popupModel
}, null, 8, ["model"])) : p("", !0)
], 8, fn)), [
[s(M)]
]);
}
}), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Tn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Nn = /* @__PURE__ */ g({
__name: "Row",
props: {
componentData: {}
},
setup(u) {
const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = z(
() => new ke(e.value, o.value, void 0),
[() => e.value, () => o.value],
(r) => {
r.dispose();
}
);
return R(() => {
n.value && n.value.subscribeElementChanges();
}), K(() => {
n.value && n.value.unsubscribeElementChanges();
}), (r, l) => (a(), i("div", {
class: m(s(n).cssClasses)
}, [
Dn,
Tn,
x(r.$slots, "default")
], 2));
}
}), Mn = ["data-sv-drop-target-survey-element"], Sn = { class: "svc-fake-title" }, Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Rn = { class: "svc-question__top-actions" }, Vn = {
key: 0,
class: "svc-panel__placeholder_frame-wrapper"
}, An = { class: "svc-panel__placeholder_frame" }, zn = {
class: "svc-panel__placeholder",
"data-bind": "text: placeholderText"
}, oe = /* @__PURE__ */ g({
__name: "QuestionBase",
props: {
createModel: { type: Function },
element: {},
adornerComponent: {},
showPlaceholderComponent: { type: Boolean },
placeholderComponent: {},
getPlaceholderComponentData: { type: Function },
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = P(), o = z(
() => t.createModel(),
[() => t.componentName, () => t.componentData.data, () => t.componentData.element],
(l) => {
l.dispose();
}
), n = k(
() => o.value.isBannerShowing ? o.value.createBannerParams() : null
);
W(() => {
e.value && o.value && (o.value.rootElement = e.value);
}), R(() => {
e.value && o.value && (o.value.rootElement = e.value);
});
const r = (l) => {
o.value.select(o.value, l), l.stopPropagation();
};
return (l, _) => s(o) ? (a(), i("div", {
key: 0,
class: m(["svc-question__adorner", s(o).rootCss()]),
ref_key: "root",
ref: e,
onDblclick: _[2] || (_[2] = (N) => s(o).dblclick(N)),
onMouseover: _[3] || (_[3] = (N) => s(o).hover(N, N.currentTarget)),
onMouseleave: _[4] || (_[4] = (N) => s(o).hover(N, N.currentTarget)),
"data-sv-drop-target-survey-element": s(o).element.name || null,
"data-bind": "css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"
}, [
s(o).showHiddenTitle ? (a(), i("div", {
key: 0,
class: m(s(o).cssCollapsedHiddenHeader)
}, [
l.element.hasTitle ? (a(), b(s(c), {
key: 0,
is: "survey-element-title",
element: l.element,
renderActions: !1
}, null, 8, ["element"])) : (a(), i("div", {
key: 1,
class: m(s(o).cssCollapsedHiddenTitle)
}, [
d("span", Sn, D(l.element.name), 1)
], 2))
], 2)) : p("", !0),
h((a(), i("div", {
onClick: _[1] || (_[1] = (N) => {
s(o).select(s(o), N), N.stopPropagation();
}),
class: m(s(o).css())
}, [
Bn,
In,
En,
Pn,
s(o).allowDragging ? (a(), i("div", {
key: 0,
class: "svc-question__drag-area",
onPointerdown: _[0] || (_[0] = (N) => s(o).onPointerDown(N))
}, [
v(s(c), A({
is: "sv-svg-icon",
class: "svc-question__drag-element"
}, {
css: "svc-question__drag-element",
iconName: "icon-drag-area-indicator_24x16",
size: "auto"
}), null, 16),
d("div", Rn, [
v(s(c), {
is: "sv-action-bar",
model: s(o).topActionContainer,
handleClick: !1
}, null, 8, ["model"])
])
], 32)) : p("", !0),
s(o).needToRenderContent ? (a(), i(f, { key: 1 }, [
v(s(c), {
is: "sv-template-renderer",
componentName: l.componentName,
componentData: l.componentData
}, null, 8, ["componentName", "componentData"]),
s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", Vn, [
d("div", An, [
d("div", zn, D(s(o).placeholderText), 1)
])
])) : p("", !0),
s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), b(s(c), A(
{
key: 1,
is: l.placeholderComponent
},
l.getPlaceholderComponentData && l.getPlaceholderComponentData(s(o))
), null, 16, ["is"])) : p("", !0),
l.adornerComponent ? (a(), b(s(c), {
key: 2,
is: l.adornerComponent,
model: s(o),
element: l.element
}, null, 8, ["is", "model", "element"])) : p("", !0),
s(o).isBannerShowing ? (a(), b(s(c), {
key: 3,
is: "svc-question-banner",
model: n.value
}, null, 8, ["model"])) : p("", !0),
d("div", {
class: "svc-question__content-actions",
onFocusin: r
}, [
v(s(c), {
is: "sv-action-bar",
model: s(o).actionContainer,
handleClick: !1
}, null, 8, ["model"])
], 32)
], 64)) : p("", !0)
], 2)), [
[s(M), { disableTabStop: !0 }]
])
], 42, Mn)) : p("", !0);
}
}), ae = /* @__PURE__ */ g({
__name: "Question",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = () => new ee(
t.componentData.data,
t.componentData.element,
null
);
return (o, n) => (a(), b(oe, {
createModel: e,
element: o.componentData.element,
"component-name": o.componentName,
"component-data": o.componentData
}, null, 8, ["element", "component-name", "component-data"]));
}
}), Ln = /* @__PURE__ */ g({
__name: "QuestionImage",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = () => new fe(
t.componentData.data,
t.componentData.element,
null
), o = (n) => ({
question: n == null ? void 0 : n.filePresentationModel
});
return (n, r) => (a(), b(oe, {
"create-model": e,
element: t.componentData.element,
"show-placeholder-component": !0,
"component-data": n.componentData,
"component-name": n.componentName,
"placeholder-component": "survey-file",
"get-placeholder-component-data": o,
"adorner-component": "svc-image-question-adorner"
}, null, 8, ["element", "component-data", "component-name"]));
}
}), Fn = {
key: 0,
class: "svc-image-question-controls"
}, Kn = ["accept"], Un = {
class: "svc-context-button",
title: void 0,
"aria-label": void 0
}, Hn = {
key: 1,
class: "svc-image-question__loading-placeholder"
}, Qn = { class: "svc-image-question__loading" }, On = /* @__PURE__ */ g({
__name: "Image",
props: {
model: {},
element: {}
},
setup(u) {
return (t, e) => (a(), i(f, null, [
!t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Fn, [
t.model.allowEdit ? (a(), i(f, { key: 0 }, [
d("input", {
type: "file",
"aria-hidden": "true",
tabindex: "-1",
accept: t.model.acceptedTypes,
class: "svc-choose-file-input"
}, null, 8, Kn),
h((a(), i("span", Un, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-choosefile",
size: "auto",
onClick: e[0] || (e[0] = (o) => t.model.chooseFile(t.model))
})
])), [
[s(M)]
])
], 64)) : p("", !0)
])) : p("", !0),
t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Hn, [
d("div", Qn, [
v(s(c), { is: "sv-loading-indicator" })
])
])) : p("", !0)
], 64));
}
}), Wn = { class: "svc-rating-question-content" }, Gn = ["aria-label"], jn = ["aria-label"], Jn = /* @__PURE__ */ g({
__name: "Rating",
props: {
componentData: {},
componentName: {}
},
setup(u) {
const t = u, e = z(
() => new we(
t.componentData.data,
t.componentData.question,
null
),
[() => t.componentData.data, () => t.componentData.question]
);
return (o, n) => {
var r, l, _, N, $, q, C, I, L;
return a(), i("div", Wn, [
d("div", {
class: m((r = s(e)) == null ? void 0 : r.controlsClassNames)
}, [
(l = s(e)) != null && l.allowRemove ? h((a(), i("span", {
key: 0,
class: m((_ = s(e)) == null ? void 0 : _.removeClassNames),
onClick: n[0] || (n[0] = (J) => {
var U;
return (U = s(e)) == null ? void 0 : U.removeItem(s(e));
}),
role: "button",
"aria-label": (N = s(e)) == null ? void 0 : N.removeTooltip
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-remove_16x16",
size: "auto",
title: ($ = s(e)) == null ? void 0 : $.removeTooltip
}, null, 8, ["title"])
], 10, Gn)), [
[s(M)]
]) : p("", !0),
(q = s(e)) != null && q.allowAdd ? h((a(), i("span", {
key: 1,
class: m((C = s(e)) == null ? void 0 : C.addClassNames),
onClick: n[1] || (n[1] = (J) => {
var U;
return (U = s(e)) == null ? void 0 : U.addItem(s(e));
}),
role: "button",
"aria-label": (I = s(e)) == null ? void 0 : I.addTooltip
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-add_16x16",
size: "auto",
title: (L = s(e)) == null ? void 0 : L.addTooltip
}, null, 8, ["title"])
], 10, jn)), [
[s(M)]
]) : p("", !0)
], 2),
x(o.$slots, "default")
]);
};
}
}), Zn = {
key: 0,
class: "svc-matrix-cell__question-controls"
}, Xn = /* @__PURE__ */ g({
__name: "MatrixCell",
props: {
componentData: {}
},
setup(u) {
const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = k(() => t.componentData.column), r = k(() => t.componentData.element), l = k(
() => t.componentData.question
), _ = z(
() => {
var N;
return t.componentData ? new De(
e.value,
r.value,
l.value,
o.value,
n.value || ((N = r.value.cell) == null ? void 0 : N.column)
) : void 0;
},
[
() => e.value,
() => o.value,
() => n.value,
() => l.value
]
);
return (N, $) => {
var q, C;
return a(), i("div", {
tabindex: "-1",
class: "svc-matrix-cell",
onClick: $[1] || ($[1] = (I) => {
var L;
return (L = s(_)) == null ? void 0 : L.selectContext(s(_), I);
}),
onMouseover: $[2] || ($[2] = (I) => {
var L;
return (L = s(_)) == null ? void 0 : L.hover(I, I.currentTarget);
}),
onMouseleave: $[3] || ($[3] = (I) => {
var L;
return (L = s(_)) == null ? void 0 : L.hover(I, I.currentTarget);
})
}, [
d("div", {
class: m(["svc-matrix-cell--selected", { "svc-visible": (q = s(_)) == null ? void 0 : q.isSelected }])
}, null, 2),
x(N.$slots, "default"),
(C = s(_)) != null && C.isSupportCellEditor ? (a(), i("div", Zn, [
h((a(), i("span", {
class: "svc-matrix-cell__question-controls-button svc-context-button",
onClick: $[0] || ($[0] = (I) => s(_).editQuestion(s(_), I))
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-edit",
size: "auto"
})
])), [
[s(M)]
])
])) : p("", !0)
], 32);
};
}
}), Yn = { class: "svc-question__adorner" }, xn = { class: "svc-question__content svc-question__content--in-popup" }, ea = /* @__PURE__ */ g({
__name: "CellQuestion",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = k(
() => t.componentData.element
);
return w(() => e.value), (o, n) => (a(), i("div", Yn, [
d("div", xn, [
v(s(c), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
])
]));
}
}), oa = ["data-sv-drop-target-survey-element"], sa = { class: "svc-fake-title" }, ta = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), aa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), la = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ia = { class: "svc-question__top-actions" }, ra = {
key: 0,
class: "svc-panel__placeholder_frame-wrapper"
}, da = { class: "svc-panel__placeholder_frame" }, ca = { class: "svc-panel__placeholder" }, ua = { class: "svc-add-new-item-button__text" }, pa = {
key: 1,
class: "svc-panel__add-new-question-container"
}, va = { class: "svc-panel__question-type-selector-popup" }, ma = { class: "svc-panel__add-new-question-wrapper" }, _a = /* @__PURE__ */ g({
__name: "Panel",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = z(
() => new ee(
t.componentData.data,
t.componentData.element,
null
),
[() => t.componentData.data, () => t.componentData.element],
(n) => {
n.dispose();
}
), o = (n) => {
n.stopPropagation(), e.value.addNewQuestion();
};
return (n, r) => s(e) && !s(e).isDisposed ? (a(), i("div", {
key: 0,
class: m(["svc-question__adorner", s(e).rootCss()]),
onDblclick: r[3] || (r[3] = (l) => s(e).dblclick(l)),
onMouseover: r[4] || (r[4] = (l) => s(e).hover(l, l.currentTarget)),
onMouseleave: r[5] || (r[5] = (l) => s(e).hover(l, l.currentTarget)),
"data-sv-drop-target-survey-element": s(e).element.name || null,
ref: "root"
}, [
s(e).showHiddenTitle ? (a(), i("div", {
key: 0,
class: m(s(e).cssCollapsedHiddenHeader)
}, [
s(e).element.hasTitle ? (a(), b(s(c), {
key: 0,
is: "survey-element-title",
element: s(e).element,
renderActions: !1
}, null, 8, ["element"])) : (a(), i("div", {
key: 1,
class: m(s(e).cssCollapsedHiddenTitle)
}, [
d("span", sa, D(s(e).element.name), 1)
], 2))
], 2)) : p("", !0),
h((a(), i("div", {
class: m(s(e).css()),
onClick: r[2] || (r[2] = (l) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), l) : null)
}, [
ta,
na,
aa,
la,
s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), i("div", {
key: 0,
class: "svc-question__drag-area",
onPointerdown: r[0] || (r[0] = (l) => s(e).onPointerDown(l))
}, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-question__drag-element",
iconName: "icon-drag-area-indicator_24x16",
size: "auto"
}),
d("div", ia, [
v(s(c), {
is: "sv-action-bar",
model: s(e).topActionContainer,
handleClick: !1
}, null, 8, ["model"])
])
], 32)) : p("", !0),
s(e).needToRenderContent ? (a(), i(f, { key: 1 }, [
v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
s(e).isEmptyElement ? (a(), i("div", ra, [
d("div", da, [
d("div", ca, D(s(e).placeholderText), 1),
s(e).showAddQuestionButton ? h((a(), i("div", {
key: 0,
class: "svc-panel__add-new-question svc-action-button",
onClick: o
}, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-panel__add-new-question-icon",
iconName: "icon-add_24x24",
size: "auto"
}),
d("span", ua, D(s(e).addNewQuestionText), 1)
])), [
[s(M)]
]) : p("", !0)
])
])) : p("", !0),
!s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", pa, [
d("div", va, [
v(s(c), {
is: "sv-popup",
model: s(e).questionTypeSelectorModel.popupModel
}, null, 8, ["model"])
]),
d("div", ma, [
v(s(c), {
is: "svc-add-new-question-btn",
item: { data: s(e) },
buttonClass: "svc-action-button",
renderPopup: !1
}, null, 8, ["item"])
])
])) : p("", !0),
s(e).element.isInteractiveDesignElement ? (a(), i("div", {
key: 2,
class: "svc-question__content-actions",
onFocusin: r[1] || (r[1] = (l) => s(e).select(s(e), l))
}, [
v(s(c), {
is: "sv-action-bar",
model: s(e).actionContainer,
handleClick: !1
}, null, 8, ["model"])
], 32)) : p("", !0)
], 64)) : p("", !0)
], 2)), [
[s(M), { disableTabStop: !0 }]
])
], 42, oa)) : p("", !0);
}
}), ga = ["data-sv-drop-target-item-value"], ba = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ya = { class: "svc-item-value-controls" }, ha = {
key: 0,
class: "svc-item-value-controls__button svc-item-value-controls__drag"
}, Ca = ["aria-label"], qa = ["aria-label"], $a = {
key: 0,
class: "svc-item-value-controls svc-choice-elements-button-container"
}, ka = /* @__PURE__ */ g({
__name: "ItemValue",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = P(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), l = G(
() => r.value,
(q, C) => {
q && t.value && q.setRootElement(t.value), C && C.setRootElement(void 0);
}
);
R(() => {
t.value && r.value && r.value.setRootElement(t.value);
}), K(() => {
r.value.setRootElement(void 0);
});
const _ = z(
() => new Te(o.value, n.value, r.value),
[() => o.value, () => n.value, () => r.value],
(q) => {
q.dispose();
}
);
Y(() => {
l();
});
const N = (q) => {
const C = o.value.survey;
if (C) {
const I = C.getElementWrapperComponentName(q);
if (I)
return I;
}
return "panel";
}, $ = (q) => {
const C = o.value.survey;
let I;
return C && (I = C.getElementWrapperComponentData(q)), {
componentName: "survey-panel",
componentData: {
element: q,
data: I
}
};
};
return (q, C) => (a(), i(f, null, [
d("div", {
class: m(["svc-item-value-wrapper", {
"svc-item-value--new": s(_).isNew,
"svc-item-value--dragging": s(_).isDragging,
"svc-item-value--ghost": s(_).isDragDropGhost,
"svc-item-value--movedown": s(_).isDragDropMoveDown,
"svc-item-value--moveup": s(_).isDragDropMoveUp
}]),
onPointerdown: C[5] || (C[5] = (I) => s(_).onPointerDown(I)),
"data-sv-drop-target-item-value": s(_).isDraggable ? r.value.value : null,
ref_key: "root",
ref: t
}, [
ba,
d("div", ya, [
s(_).isDraggable ? (a(), i("span", ha, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-item-value-controls__drag-icon",
iconName: "icon-drag-24x24",
size: "auto",
title: s(_).dragTooltip
}, null, 8, ["title"])
])) : p("", !0),
s(_).allowAdd ? h((a(), i("span", {
key: 1,
class: "svc-item-value-controls__button svc-item-value-controls__add",
onClick: C[0] || (C[0] = (I) => s(_).add(s(_))),
role: "button",
"aria-label": s(_).tooltip
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-add_16x16",
size: "auto",
title: s(_).tooltip
}, null, 8, ["title"])
], 8, Ca)), [
[s(M)]
]) : p("", !0),
s(_).allowRemove ? h((a(), i("span", {
key: 2,
class: "svc-item-value-controls__button svc-item-value-controls__remove",
onClick: C[1] || (C[1] = (I) => s(_).remove(s(_))),
onBlur: C[2] || (C[2] = (I) => s(_).onFocusOut(I)),
role: "button",
"aria-label": s(_).tooltip
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-remove_16x16",
size: "auto",
title: s(_).tooltip
}, null, 8, ["title"])
], 40, qa)), [
[s(M)]
]) : p("", !0)
]),
d("div", {
class: "svc-item-value__item",
onClick: C[3] || (C[3] = (I) => s(_).select(s(_), I))
}, [
v(s(c), A({ is: q.componentName }, q.componentData), null, 16, ["is"])
]),
s(_).canShowPanel() ? (a(), i("div", $a, [
h((a(), i("span", {
role: "button",
class: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button",
onClick: C[4] || (C[4] = (I) => s(_).togglePanel())
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: s(_).showPanel ? "icon-collapsepanel-16x16" : "icon-expandpanel-16x16",
size: "auto"
}, null, 8, ["iconName"])
])), [
[s(M)]
])
])) : p("", !0)
], 42, ga),
s(_).showPanel ? (a(), b(s(c), A({
key: 0,
is: N(r.value.panel)
}, $(r.value.panel)), null, 16, ["is"])) : p("", !0)
], 64));
}
}), fa = ["data-sv-drop-target-item-value"], wa = { class: "svc-image-item-value-wrapper__content" }, Da = ["accept"], Ta = {
key: 0,
class: "svc-image-item-value__item"
}, Na = {
key: 2,
class: "svc-context-container svc-image-item-value-controls"
}, Ma = { class: "svc-image-item-value__item" }, Sa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ba = { class: "sd-imagepicker__label" }, Ia = {
key: 0,
class: "svc-image-item-value__loading"
}, Ea = {
key: 0,
class: "svc-image-item-value__placeholder"
}, Pa = { key: 1 }, Ra = /* @__PURE__ */ g({
__name: "ImageItemValue",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), r = P(), l = z(
() => {
const $ = new Ne(
e.value,
o.value,
n.value,
null,
null
);
return r != null && r.value && ($.itemsRoot = r.value), $;
},
[() => e.value, () => o.value, () => n.value],
($) => {
$.dispose();
}
), _ = ($) => {
$.preventDefault();
}, N = k(() => {
const $ = !l.value.getIsNewItemSingle();
return {
width: $ ? o.value.renderedImageWidth + "px" : void 0,
height: $ ? o.value.renderedImageHeight + "px" : void 0
};
});
return R(() => {
r.value && (l.value.itemsRoot = r.value);
}), ($, q) => (a(), i("div", {
onPointerdown: q[5] || (q[5] = (C) => s(l).onPointerDown(C)),
class: m(s(l).getRootCss()),
"data-sv-drop-target-item-value": s(l).isDraggable ? n.value.value : null,
ref_key: "root",
ref: r,
onDragstart: _,
onDragenter: q[6] || (q[6] = (C) => s(l).onDragEnter(C)),
onDragover: q[7] || (q[7] = (C) => s(l).onDragOver(C)),
onDragleave: q[8] || (q[8] = (C) => s(l).onDragLeave(C)),
onDrop: q[9] || (q[9] = (C) => s(l).onDrop(C))
}, [
d("div", {
class: "svc-image-item-value-wrapper__ghost",
style: F(N.value)
}, null, 4),
d("div", wa, [
d("input", {
type: "file",
"aria-hidden": "true",
tabindex: "-1",
accept: s(l).acceptedTypes,
class: "svc-choose-file-input"
}, null, 8, Da),
!s(l).isNew && !s(l).isUploading ? (a(), i(f, { key: 0 }, [
s(l).isNew ? p("", !0) : (a(), i("div", Ta, [
v(s(c), A({ is: $.componentName }, $.componentData), null, 16, ["is"])
])),
s(l).isDraggable && s(l).canRenderControls ? (a(), i("span", {
key: 1,
class: "svc-context-button svc-image-item-value-controls__drag-area-indicator",
onPointerdown: q[0] || (q[0] = (C) => s(l).onPointerDown(C)),
title: void 0,
"aria-label": void 0
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-drag-24x24",
size: "auto"
})
], 32)) : p("", !0),
s(l).canRenderControls ? (a(), i("div", Na, [
h((a(), i("span", {
class: "svc-context-button",
onClick: q[1] || (q[1] = (C) => s(l).chooseFile(s(l))),
title: void 0,
"aria-label": void 0
}, [
v(s(c), {
is: "sv-svg-icon",
role: "button",
iconName: "icon-choosefile",
size: "auto",
title: s(l).selectFileTitle
}, null, 8, ["title"])
])), [
[s(M)]
]),
h((a(), i("span", {
class: "svc-context-button svc-context-button--danger",
onClick: q[2] || (q[2] = (C) => s(l).remove(s(l))),
title: void 0,
"aria-label": void 0
}, [
v(s(c), {
is: "sv-svg-icon",
role: "button",
iconName: "icon-delete",
size: "auto",
title: s(l).removeFileTitle
}, null, 8, ["title"])
])), [
[s(M)]
])
])) : p("", !0)
], 64)) : (a(), i(f, { key: 1 }, [
d("div", Ma, [
d("div", Sa, [
d("label", Ba, [
d("div", {
style: F(N.value),
class: "sd-imagepicker__image"
}, [
s(l).isUploading ? (a(), i("div", Ia, [
v(s(c), { is: "sv-loading-indicator" })
])) : p("", !0)
], 4)
])
])
]),
s(l).allowAdd && !s(l).isUploading ? (a(), i("div", {
key: 0,
class: "svc-image-item-value-controls",
onPointerdown: q[4] || (q[4] = (C) => C.stopPropagation())
}, [
s(l).showPlaceholder ? (a(), i("span", Ea, D(s(l).placeholderText), 1)) : p("", !0),
h((a(), i("span", {
class: m(s(l).addButtonCss),
onClick: q[3] || (q[3] = (C) => s(l).chooseNewFile(s(l)))
}, [
s(l).showChooseButtonAsIcon ? (a(), b(s(c), {
key: 0,
is: "sv-svg-icon",
iconName: "icon-add-lg",
size: "auto",
title: s(l).addFileTitle
}, null, 8, ["title"])) : (a(), i("span", Pa, D(s(l).chooseImageText), 1))
], 2)), [
[s(M)]
])
], 32)) : p("", !0)
], 64))
])
], 42, fa));
}
}), Va = /* @__PURE__ */ g({
__name: "QuestionEditor",
props: {
survey: {},
style: {}
},
setup(u) {
const t = u, e = k(() => {
var r;
return (r = t.survey) == null ? void 0 : r.getAllQuestions()[0];
}), o = k(() => {
const r = t.survey;
if (r && e.value) {
const l = r.getElementWrapperComponentName(e.value);
if (l)
return l;
}
return "survey-question";
}), n = k(() => {
const r = t.survey;
let l;
return r && e.value && (l = r.getElementWrapperComponentData(e.value)), {
componentName: "survey-question",
componentData: {
element: e.value,
data: l
}
};
});
return (r, l) => (a(), i("div", {
style: F(t.style)
}, [
v(s(c), A({ is: o.value }, n.value), null, 16, ["is"])
], 4));
}
}), Aa = ["accept"], za = /* @__PURE__ */ d("svg", null, [
/* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
], -1), La = [
za
], Fa = { class: "svc-context-container svc-logo-image-controls" }, Ka = {
key: 2,
class: "svc-logo-image__loading"
}, Ua = /* @__PURE__ */ g({
__name: "Logo",
props: {
data: {}
},
setup(u) {
const t = u, e = k(() => t.data), o = k(() => e.value.survey), n = P(), r = z(
() => new Me(e.value, null),
[() => e.value]
), l = P(), _ = () => {
l.value = o.value.locLogo.renderedHtml;
};
return G(
() => o.value.locLogo,
(N, $) => {
_(), N && N.onStringChanged.add(_), $ && N.onStringChanged.remove(_);
},
{
immediate: !0
}
), R(() => {
n.value && (r.value.root = n.value);
}), K(() => {
r.value && (r.value.root = void 0);
}), (N, $) => (a(), i("div", {
class: "svc-logo-image",
ref_key: "root",
ref: n
}, [
d("input", {
type: "file",
"aria-hidden": "true",
tabindex: "-1",
accept: s(r).acceptedTypes,
class: "svc-choose-file-input"
}, null, 8, Aa),
l.value ? p("", !0) : (a(), i(f, { key: 0 }, [
s(r).allowEdit && !s(r).isUploading ? h((a(), i("div", {
key: 0,
class: "svc-logo-image-placeholder",
onClick: $[0] || ($[0] = (q) => s(r).chooseFile(s(r)))
}, La)), [
[s(M)]
]) : p("", !0)
], 64)),
l.value && !s(r).isUploading ? (a(), i("div", {
key: 1,
class: m(s(r).containerCss)
}, [
d("div", Fa, [
h((a(), i("span", {
class: "svc-context-button",
onClick: $[1] || ($[1] = (q) => s(r).chooseFile(s(r))),
title: void 0,
"aria-label": void 0
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-choosefile",
size: "auto"
})
])), [
[s(M)]
]),
h((a(), i("span", {
class: "svc-context-button svc-context-button--danger",
onClick: $[2] || ($[2] = (q) => s(r).remove(s(r))),
title: void 0,
"aria-label": void 0
}, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-clear",
size: "auto"
})
])), [
[s(M)]
])
]),
v(s(c), {
is: "sv-logo-image",
data: o.value
}, null, 8, ["data"])
], 2)) : p("", !0),
s(r).isUploading ? (a(), i("div", Ka, [
v(s(c), { is: "sv-loading-indicator" })
])) : p("", !0)
], 512));
}
}), Ha = {
key: 0,
class: "svc-search"
}, Qa = { class: "svc-search__search-icon" }, Oa = ["aria-label", "placeholder", "tabindex"], Wa = { class: "svc-search__toolbar" }, Ga = { class: "svc-search__toolbar-counter" }, ja = /* @__PURE__ */ g({
__name: "Search",
props: {
model: {}
},
setup(u) {
const t = u;
w(() => t.model);
const e = k({
get: () => t.model.filterString,
set: (o) => {
const n = t.model;
n.filterString = o;
}
});
return (o, n) => o.model.isVisible ? (a(), i("div", Ha, [
d("div", Qa, [
v(s(c), {
is: "sv-svg-icon",
iconName: "icon-search",
size: "auto"
})
]),
h(d("input", {
type: "text",
class: "svc-search__input",
"onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
"aria-label": o.model.filterStringPlaceholder,
placeholder: o.model.filterStringPlaceholder,
tabindex: o.model.getTabIndex()
}, null, 8, Oa), [
[de, e.value]
]),
d("div", Wa, [
d("div", Ga, D(o.model.matchCounterText), 1),
v(s(c), {
is: "sv-action-bar",
model: o.model.searchActionBar
}, null, 8, ["model"])
])
])) : p("", !0);
}
}), Ja = ["title"], Za = /* @__PURE__ */ g({
__name: "PageNavigator",
props: {
pagesController: {},
pageEditMode: {}
},
setup(u) {
const t = u, e = z(
() => new Se(t.pagesController, t.pageEditMode),
[() => t.pagesController, () => t.pageEditMode]
), o = P();
return R(() => {
if (t.pageEditMode !== "bypage") {
const n = o.value, r = e.value;
n && r.attachToUI(n);
}
}), Y(() => {
const n = e.value;
n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
}), K(() => {
e.value.dispose();
}), (n, r) => h((a(), i("div", {
class: "svc-page-navigator",
ref_key: "root",
ref: o
}, [
d("div", null, [
h((a(), i("div", {
role: "button",
class: m(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
onClick: r[0] || (r[0] = (l) => s(e).togglePageSelector(l)),
title: s(e).pageSelectorCaption
}, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-page-navigator__button-icon",
iconName: s(e).icon,
size: "auto"
}, null, 8, ["iconName"])
], 10, Ja)), [
[s(M)]
]),
v(s(c), {
is: "sv-popup",
model: s(e).popupModel
}, null, 8, ["model"])
]),
d("div", null, [
(a(!0), i(f, null, V(s(e).visibleItems, (l) => (a(), b(s(c), {
is: "svc-page-navigator-item",
key: l.id,
model: l
}, null, 8, ["model"]))), 128))
])
], 512)), [
[H, s(e).visible]
]);
}
}), Xa = { class: "svc-page-navigator-item" }, Ya = ["title"], xa = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), el = [
xa
], ol = { class: "svc-page-navigator-item__banner" }, sl = { class: "svc-page-navigator-item__text" }, tl = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
/* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot-content" })
], -1), nl = /* @__PURE__ */ g({
__name: "PageNavigatorItem",
props: {
model: {}
},
setup(u) {
const t = u;
w(() => t.model);
const e = (o) => {
t.model.action(), o.stopPropagation(), o.preventDefault();
};
return (o, n) => (a(), i("div", Xa, [
h((a(), i("div", {
role: "button",
class: m(["svc-page-navigator-item-content", {
"svc-page-navigator-item--selected": o.model.active,
"svc-page-navigator-item--disabled": o.model.disabled
}]),
onClick: n[0] || (n[0] = (r) => e(r))
}, [
d("div", {
class: "svc-page-navigator-item__dot",
title: o.model.title
}, el, 8, Ya),
d("div", ol, [
d("span", sl, D(o.model.title), 1),
tl
])
], 2)), [
[s(M)]
])
]));
}
}), al = { class: "svc-question__dropdown-choices--wrapper" }, ll = { class: "svc-question__dropdown-choices" }, il = /* @__PURE__ */ g({
__name: "Dropdown",
props: {
model: {},
element: {}
},
setup(u) {
const t = u, e = (n) => t.element.getItemValueWrapperComponentName(n) || t.model.itemComponent, o = (n) => ({
componentName: t.model.itemComponent,
componentData: {
question: t.element,
item: n,
data: t.element.getItemValueWrapperComponentData(n)
}
});
return (n, r) => (a(), i("div", al, [
d("div", null, [
d("div", ll, [
(a(!0), i(f, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
key: l.value,
class: m(n.model.getChoiceCss())
}, [
v(s(c), A({
is: e(l)
}, o(l)), null, 16, ["is"])
], 2))), 128))
]),
n.model.needToCollapse ? (a(), b(s(c), {
key: 0,
is: "svc-action-button",
text: n.model.getButtonText(),
click: n.model.switchCollapse.bind(n.model),
allowBubble: !0
}, null, 8, ["text", "click"])) : p("", !0)
])
]));
}
}), rl = /* @__PURE__ */ g({
__name: "QuestionDropdown",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = () => new Be(
t.componentData.data,
t.componentData.element,
null
);
return (o, n) => (a(), b(oe, {
"create-model": e,
element: o.componentData.element,
"component-name": o.componentName,
"component-data": o.componentData,
"adorner-component": "svc-dropdown-question-adorner"
}, null, 8, ["element", "component-name", "component-data"]));
}
}), dl = { class: "svc-question__adorner" }, cl = { class: "svc-question__content svc-question__content--in-popup" }, ul = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", pl = /* @__PURE__ */ g({
__name: "CellQuestionDropdown",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = k(
() => t.componentData.element
), o = (r) => e.value.getItemValueWrapperComponentName(r) || le, n = (r) => ({
componentName: le,
componentData: {
question: e.value,
item: r,
data: e.value.getItemValueWrapperComponentData(r)
}
});
return w(() => e.value), (r, l) => (a(), i("div", dl, [
d("div", cl, [
v(s(c), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
d("div", ul, [
(a(!0), i(f, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
key: _.value,
class: "svc-question__dropdown-choice"
}, [
v(s(c), A({
is: o(_)
}, n(_)), null, 16, ["is"])
]))), 128))
])
])
]));
}
}), vl = ["data-sv-drop-target-survey-element"], ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), _l = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), gl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), bl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), yl = { class: "svc-widget__content" }, hl = {
key: 1,
class: "svc-panel__placeholder_frame"
}, Cl = /* @__PURE__ */ d("div", {
class: "svc-panel__placeholder",
"data-bind": "text: placeholderText"
}, null, -1), ql = [
Cl
], $l = { class: "svc-question__content-actions" }, kl = {
key: 0,
class: "svc-panel__placeholder_frame"
}, fl = { class: "svc-panel__placeholder" }, wl = /* @__PURE__ */ g({
__name: "CustomWidget",
props: {
componentName: {},
componentData: {}
},
setup(u) {
const t = u, e = P(), o = z(
() => new ee(
t.componentData.data,
t.componentData.element,
null
),
[() => t.componentData.data, () => t.componentData.element],
(n) => {
n.dispose();
}
);
return W(() => {
e.value && o.value && (o.value.rootElement = e.value);
}), R(() => {
e.value && o.value && (o.value.rootElement = e.value);
}), (n, r) => s(o) ? (a(), i("div", {
key: 0,
class: m(["svc-question__adorner", s(o).rootCss()]),
onMouseover: r[2] || (r[2] = (l) => s(o).hover(l, l.currentTarget)),
onMouseleave: r[3] || (r[3] = (l) => s(o).hover(l, l.currentTarget)),
"data-sv-drop-target-survey-element": s(o).element.name || null,
ref_key: "root",
ref: e
}, [
s(o).element.isInteractiveDesignElement ? h((a(), i("div", {
key: 0,
class: m(["svc-question__content", s(o).css()]),
onClick: r[1] || (r[1] = (l) => s(o).select(s(o), l)),
"data-bind": "clickBubble: false"
}, [
ml,
_l,
gl,
bl,
s(o).allowDragging ? (a(), i("div", {
key: 0,
class: "svc-question__drag-area",
onPointerdown: r[0] || (r[0] = (l) => s(o).onPointerDown(l))
}, [
v(s(c), {
is: "sv-svg-icon",
class: "svc-question__drag-element",
iconName: "icon-drag-area-indicator_24x16",
size: "auto"
})
], 32)) : p("", !0),
d("div", yl, [
v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
]),
s(o).isEmptyElement ? (a(), i("div", hl, ql)) : p("", !0),
d("div", $l, [
v(s(c), {
is: "sv-action-bar",
model: s(o).actionContainer,
handleClick: !1
}, null, 8, ["model"])
])
], 2)), [
[s(M)]
]) : p("", !0),
s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(f, { key: 1 }, [
v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
s(o).isEmptyElement ? (a(), i("div", kl, [
d("div", fl, D(s(o).placeholderText), 1)
])) : p("", !0)
], 64))
], 42, vl)) : p("", !0);
}
}), Dl = { class: "svc-carry-forward-panel-wrapper" }, Tl = { class: "svc-carry-forward-panel" }, Nl = { class: "svc-carry-forward-panel__link" }, Ml = /* @__PURE__ */ g({
__name: "QuestionBanner",
props: {
model: {}
},
setup(u) {
return (t, e) => (a(), i("div", Dl, [
d("div", Tl, [
d("span", null, D(t.model.text) + D(" "), 1),
d("span", Nl, [
v(s(c), {
is: "svc-action-button",
text: t.model.actionText,
click: t.model.onClick.bind(t.model)
}, null, 8, ["text", "click"])
])
])
]));
}
});
function Sl(u, t, e) {
u(t, e);
}
function pe(u) {
const t = Sl.bind(
void 0,
u
);
t("svc-tabbed-menu", We), t("svc-tabbed-menu-item-wrapper", je), t("svc-tabbed-menu-item", Ze), t("svc-side-bar", eo), t("svc-side-bar-default-header", no), t("svc-side-bar-page", ao), t("svc-tabs", ro), t("svc-tab-control", go), t("svc-tab-button", qo), t("svc-property-grid-placeholder", To), t("svc-side-bar-header", Eo), t("svc-side-bar-property-grid-header", Fo), t("svc-property-grid", io), t("svc-object-selector", lo), t("svc-search", ja), t("svc-switcher", Yo), t("svc-action-button", Wo), t("svc-question-error", Ko), t("survey-embeddedsurvey", Os), t("sv-logic-operator", Qs), t("survey-linkvalue", Ws), t("survey-color", dt), t("color-item", ct), t("sv-boolean-switch", Tt), t("survey-fileedit", _t), t("survey-spinedit", ht), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", os), t("svc-tab-preview", ds), t("svc-complete-page", us), t("survey-results", $s), t("survey-results-table-row", fs), t("json-error-item", As), t("svc-tab-json-editor-textarea", Es), t("svc-tab-json-editor-ace", Ns), t("svc-tab-translation", Xs), t("sd-translation-line-skeleton", st), t("svc-translate-from-action", tt), t("svc-tab-logic", Ks), t("svc-tab-theme", lt), t("svc-component-container", ts), t("svc-toolbox", Ft), t("svc-toolbox-list", Yt), t("svc-toolbox-category", Xt), t("svc-toolbox-tool", Ut), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", Gt), t(Ie, Rt), t("svc-tab-designer", un), t("svc-page-navigator", Za), t("svc-page-navigator-item", nl), t("svc-page", qn), t("svc-row", Nn), t("svc-add-new-question-btn", kn), t("svc-add-question-type-selector", wn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Jn), t("svc-image-question", Ln), t("svc-image-question-adorner", On), t("svc-matrix-cell", Xn), t("svc-cell-question", ea), t("svc-cell-dropdown-question", pl), t("svc-question-editor-content", Va), t("svc-logo-image", Ua), t("svc-panel", _a), t("svc-item-value", ka), t("svc-image-item-value", Ra), t("svc-dropdown-question", rl), t("svc-dropdown-question-adorner", il), t("svc-widget-question", wl), t("svc-question-banner", Ml);
}
pe(
(u, t) => ie.Instance.registerComponent(u, t)
);
const Rl = {
install(u) {
u.component("SurveyCreatorComponent", Oe), pe((t, e) => {
u.component(t, e), ie.Instance.registerComponent(t, t);
});
}
};
export {
Oe as SurveyCreatorComponent,
Rl as surveyCreatorPlugin
};