UNPKG

survey-creator-vue

Version:

Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.

1,474 lines (1,473 loc) 129 kB
import { useBase as f, SvComponent as u, key2ClickDirective as N, SurveyComponent as O, useQuestion as H, ComponentFactory as ie } from "survey-vue3-ui"; import { defineComponent as g, computed as $, toRaw as _e, ref as I, onMounted as P, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as T, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as y, onUpdated as G, nextTick as re, withDirectives as C, toDisplayString as k, vShow as Q, withCtx as X, createTextVNode as ge, shallowRef as be, watch as W, 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 Te, ItemValueWrapperViewModel as De, 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"], Qe = { key: 0, class: "svc-creator__banner" }, He = ["innerHTML"], Oe = /* @__PURE__ */ g({ __name: "Creator", props: { model: {} }, setup(c) { const t = c, e = $(() => _e(t.model)), o = I(); return f( () => e.value, (n, r) => { r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value); } ), P(() => { o.value && t.model.setRootElement(o.value); }), K(() => { t.model.unsubscribeRootElement(); }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(T, { key: 0 }, [ v(s(u), { 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(u), { 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(u), { 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(u), { 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(T, null, V(e.value.tabs, (l) => (a(), i(T, 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(u), { 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(u), { is: "sv-action-bar", model: e.value.footerToolbar }, null, 8, ["model"]) ], 8, Ue) ])) : p("", !0) ]), e.value.sidebar ? (a(), y(s(u), { key: 0, is: "svc-side-bar", model: e.value.sidebar }, null, 8, ["model"])) : p("", !0) ], 2), e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", Qe, [ d("span", { class: "svc-creator__non-commercial-text", innerHTML: e.value.licenseText }, null, 8, He) ])), v(s(u), { is: "sv-notifier", model: e.value.notifier }, null, 8, ["model"]) ], 2) ], 6) ], 64)); } }), Ge = /* @__PURE__ */ g({ __name: "TabbedMenu", props: { model: {} }, setup(c) { const t = c, e = I(); return f(() => t.model), G(() => { t.model.initResponsivityManager(e.value); }), P(() => { 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(T, null, V(o.model.renderedActions, (r) => (a(), y(s(u), { key: r.renderedId, is: "svc-tabbed-menu-item-wrapper", item: r }, null, 8, ["item"]))), 128)) ], 4)); } }), We = { class: "sv-action__content" }, je = /* @__PURE__ */ g({ __name: "TabbedMenuItemWrapper", props: { item: {} }, setup(c) { const t = I(), e = c; return f(() => e.item), P(() => { 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", We, [ v(s(u), { 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(c) { const t = c; return f(() => t.item), (e, o) => C((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()) }, k(e.item.title), 3)) : p("", !0), e.item.hasIcon ? (a(), y(s(u), { 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(N)] ]); } }), 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(c) { const t = c, e = I(); return f(() => t.model), P(() => { t.model.initResizeManager(e.value); }), K(() => { t.model.resetResizeManager(); }), (o, n) => C((a(), i("div", { class: m(["svc-side-bar", o.model.rootCss]) }, [ C(d("div", { class: "svc-side-bar__shadow", onClick: n[0] || (n[0] = () => o.model.collapseSidebar()) }, null, 512), [ [Q, o.model.renderContainer] ]), d("div", Xe, [ C(d("div", Ye, [ d("div", { class: "svc-side-bar__container", ref_key: "root", ref: e }, [ v(s(u), { is: o.model.header.component, model: o.model.header.componentModel }, null, 8, ["is", "model"]), d("div", xe, [ (a(!0), i(T, null, V(o.model.pages, (r, l) => (a(), y(s(u), { key: l, is: "svc-side-bar-page", model: r }, null, 8, ["model"]))), 128)) ]) ], 512) ], 512), [ [Q, o.model.renderContainer] ]), o.model.sideAreaComponentName ? (a(), y(s(u), { key: 0, is: o.model.sideAreaComponentName, model: o.model.sideAreaComponentData }, null, 8, ["is", "model"])) : p("", !0) ]) ], 2)), [ [Q, 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(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", oo, [ d("div", so, [ v(s(u), { is: "sv-action-bar", model: e.model.toolbar }, null, 8, ["model"]) ]), e.model.title ? (a(), i("div", to, k(e.model.title), 1)) : p("", !0) ])); } }), ao = /* @__PURE__ */ g({ __name: "SideBarPage", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => e.model.visible ? (a(), y(s(u), { key: 0, is: e.model.componentName, model: e.model.componentData }, null, 8, ["is", "model"])) : p("", !0); } }), lo = /* @__PURE__ */ g({ __name: "ObjectSelector", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => e.model.isVisible ? (a(), y(s(u), { key: 0, is: "sv-list", model: e.model.list }, null, 8, ["model"])) : p("", !0); } }), io = /* @__PURE__ */ g({ __name: "PropertyGrid", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", { class: m(e.model.rootCss) }, [ v(s(u), { is: "svc-search", model: e.model.searchManager }, null, 8, ["model"]), e.model.survey ? (a(), y(s(O), { key: 0, survey: e.model.survey }, null, 8, ["survey"])) : p("", !0) ], 2)); } }), ro = /* @__PURE__ */ g({ __name: "Tabs", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => (a(!0), i(T, null, V(e.model.actions, (n, r) => (a(), y(s(u), { 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(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", { class: m(e.model.sideBarClassName) }, [ d("div", co, [ d("div", uo, [ v(s(u), { is: "svc-tab-button", model: e.model.expandCollapseAction }, null, 8, ["model"]) ]), po, v(s(u), { is: "sv-scroll" }, { default: X(() => [ d("div", vo, [ v(s(u), { is: "svc-tabs", model: e.model.topToolbar }, null, 8, ["model"]) ]) ]), _: 1 }) ]), d("div", mo, [ d("div", _o, [ v(s(u), { is: "svc-tabs", 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(c) { const t = c; return f(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [ C((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(u), { is: "sv-svg-icon", iconName: e.model.iconName, size: "auto" }, null, 8, ["iconName"]) ]) ]) ], 10, yo)), [ [s(N), { 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" }, To = /* @__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), Do = /* @__PURE__ */ g({ __name: "PropertyGridPlaceholder", setup(c) { const t = ce; return (e, o) => (a(), i("div", $o, [ d("div", ko, [ d("span", fo, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1), d("span", wo, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1) ]), To ])); } }), 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(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", No, [ e.model.subTitle ? p("", !0) : (a(), i("div", Mo, k(e.model.title), 1)), e.model.subTitle ? (a(), i("div", So, [ d("span", Bo, k(e.model.title), 1), d("span", Io, k(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(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", Po, [ d("div", Ro, [ d("div", Vo, [ C((a(), i("div", { class: m(e.model.buttonClassName), onClick: o[0] || (o[0] = (n) => e.model.action()) }, [ d("div", Ao, [ d("span", zo, k(e.model.title), 1), d("span", Lo, k(e.model.tooltip), 1) ]) ], 2)), [ [s(N), { processEsc: !1 }] ]), v(s(u), { is: "sv-popup", model: e.model.popupModel }, null, 8, ["model"]) ]) ]) ])); } }), Ko = /* @__PURE__ */ g({ __name: "QuestionError", props: { errorKey: {}, error: {}, cssClasses: {}, element: {} }, setup(c) { return (t, e) => (a(), i("div", { key: t.errorKey }, [ v(s(u), { 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(u), { is: "survey-string", locString: t.error.locText }, null, 8, ["locString"]) ], 2) ])); } }), Uo = ["title"], Qo = ["title"], Ho = ["title"], Oo = ["title"], Go = /* @__PURE__ */ g({ __name: "ActionButton", props: { classes: {}, selected: { type: Boolean }, disabled: { type: Boolean }, text: {}, title: {}, allowBubble: { type: Boolean }, click: { type: Function }, iconName: {} }, setup(c) { const t = c, 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(T, null, [ n.iconName ? p("", !0) : (a(), i(T, { key: 0 }, [ n.disabled ? (a(), i("span", { key: 0, class: m(["svc-action-button svc-action-button--disabled", n.classes]), title: n.title }, k(n.text), 11, Uo)) : p("", !0), C((a(), i("span", { role: "button", class: m(["svc-action-button", o()]), onClick: e, title: n.title }, [ ge(k(n.text), 1) ], 10, Qo)), [ [s(N)] ]) ], 64)), n.iconName ? (a(), i(T, { key: 1 }, [ n.disabled ? (a(), i("span", { key: 0, class: m(o()), title: n.title }, [ v(s(u), { is: "sv-svg-icon", iconName: n.iconName, size: "auto" }, null, 8, ["iconName"]) ], 10, Ho)) : p("", !0), C((a(), i("span", { role: "button", onClick: e, class: m(o()), title: n.title }, [ v(s(u), { is: "sv-svg-icon", iconName: n.iconName, size: "auto" }, null, 8, ["iconName"]) ], 10, Oo)), [ [s(N)] ]) ], 64)) : p("", !0) ], 64)); } }), Wo = ["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(c) { const t = c; return f(() => t.item), (e, o) => C((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, k(e.item.title), 1)) : p("", !0) ], 42, Wo)), [ [s(N), { 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(c) { const t = c; f(() => t.model); const e = $(() => 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(u), { 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(u), { is: "survey-widget", model: r.model.survey }, null, 8, ["model"]) ]) ], 4) ], 4)) : p("", !0) ], 34)); } }), ss = { class: "svc-surface-placeholder" }, ts = { class: "svc-surface-placeholder__text" }, ns = { class: "svc-surface-placeholder__title" }, as = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({ __name: "SurfacePlaceholder", props: { name: {}, placeholderTitleText: {}, placeholderDescriptionText: {} }, setup(c) { const t = c; return (e, o) => (a(), i("div", ss, [ d("div", { class: m(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name]) }, null, 2), d("div", ts, [ d("div", ns, k(t.placeholderTitleText), 1), d("div", as, k(t.placeholderDescriptionText), 1) ]) ])); } }), ls = { key: 2, class: "svc-plugin-tab__content-actions svc-test-tab__content-actions" }, is = /* @__PURE__ */ g({ __name: "Test", props: { model: {} }, setup(c) { const t = c; return f(() => 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(), y(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(u), { is: "survey-simulator", model: e.model.simulator }, null, 8, ["model"]), e.model.showResults ? (a(), y(s(u), { key: 0, is: "survey-results", survey: e.model.survey }, null, 8, ["survey"])) : p("", !0) ], 32)), e.model.isPageToolbarVisible ? (a(), i("div", ls, [ v(s(u), { is: "sv-action-bar", model: e.model.pages }, null, 8, ["model"]) ])) : p("", !0) ], 2)); } }), rs = { class: "svc-btn__text" }, ds = /* @__PURE__ */ g({ inheritAttrs: !1, __name: "TestAgain", props: { model: {} }, setup(c) { const t = c, e = $(() => t.model.testAgainAction); return f(() => e.value), (o, n) => C((a(), i("div", { role: "button", class: "svc-preview__test-again svc-btn", onClick: n[0] || (n[0] = (r) => e.value.action()) }, [ d("span", rs, k(e.value.title), 1) ])), [ [s(N)] ]); } }); function z(c, t, e) { const o = be(), n = W( t.map((r) => () => r()), () => { o.value = c(); }, { immediate: !0 } ); return f(() => o.value, void 0, e), Y(() => { n(); }), o; } const cs = { key: 0, class: "svd-test-results" }, us = { class: "svd-test-results__content" }, ps = { class: "svd-test-results__header" }, vs = { class: "svd-test-results__header-text" }, ms = { class: "svd-test-results__header-types" }, _s = { class: "svd-test-results__text svd-light-bg-color" }, gs = { class: "svd-test-results__table svd-light-bg-color" }, bs = { class: "svd-light-background-color" }, ys = { class: "svd-dark-border-color" }, hs = { class: "svd-dark-border-color" }, Cs = /* @__PURE__ */ g({ __name: "SurveyResults", props: { survey: {} }, setup(c) { const t = c, e = z( () => t.survey ? new ye(t.survey) : void 0, [() => t.survey] ); return (o, n) => s(e) ? (a(), i("div", cs, [ d("div", us, [ d("div", ps, [ d("div", vs, k(s(e).surveyResultsText), 1), d("div", ms, [ v(s(u), { 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(u), { is: "svc-action-button", text: s(e).surveyResultsJsonText, click: s(e).selectJsonClick, disabled: !1, selected: s(e).isJsonSelected }, null, 8, ["text", "click", "selected"]) ]) ]), C(d("div", _s, [ d("div", null, k(s(e).resultText), 1) ], 512), [ [Q, s(e).resultViewType === "text"] ]), C(d("div", gs, [ d("table", null, [ d("thead", null, [ d("tr", bs, [ d("th", ys, k(s(e).resultsTitle), 1), d("th", hs, k(s(e).resultsDisplayValue), 1) ]) ]), d("tbody", null, [ (a(!0), i(T, null, V(s(e).resultData, (r, l) => (a(), y(s(u), { is: "survey-results-table-row", model: r, key: l }, null, 8, ["model"]))), 128)) ]) ]) ], 512), [ [Q, s(e).resultViewType === "table"] ]) ]) ])) : p("", !0); } }), qs = { key: 2 }, $s = /* @__PURE__ */ g({ __name: "SurveyResultsRow", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => (a(), i(T, null, [ C((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(u), { is: "sv-svg-icon", iconName: "icon-expand_16x16", size: 16 }) ], 6)) : p("", !0), e.model.question ? (a(), y(s(u), { key: 1, is: "survey-string", locString: e.model.question.locTitle }, null, 8, ["locString"])) : (a(), i("span", qs, k(e.model.title), 1)) ], 4), d("td", { class: m({ "svd-test-results__node-value": e.model.isNode, "svd-dark-border-color": !e.model.isNode }) }, k(e.model.getString(e.model.displayValue)), 3) ])), [ [s(N)] ]), e.model.isNode && !e.model.collapsed ? (a(!0), i(T, { key: 0 }, V(e.model.data, (n, r) => (a(), y(s(u), { is: "survey-results-table-row", model: n, key: r + 1 }, null, 8, ["model"]))), 128)) : p("", !0) ], 64)); } }), ks = { class: "svc-creator-tab__content" }, fs = { class: "svc-json-editor-tab__content" }, ws = { class: "svc-json-editor-tab__errros_list" }, Ts = /* @__PURE__ */ g({ __name: "JsonEditorAce", props: { model: {} }, setup(c) { const t = c, e = I(); return f(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", ks, [ d("div", fs, [ d("div", { class: "svc-json-editor-tab__ace-editor", ref_key: "inputEl", ref: e }, null, 512), C(d("div", ws, [ v(s(u), { is: "sv-list", model: o.model.errorList }, null, 8, ["model"]) ], 512), [ [Q, o.model.hasErrors] ]) ]) ])); } }), Ds = { class: "svc-creator-tab__content" }, Ns = { class: "svc-json-editor-tab__content" }, Ms = ["aria-label", "disabled"], Ss = { class: "svc-json-editor-tab__errros_list" }, Bs = /* @__PURE__ */ g({ __name: "JsonEditorTextArea", props: { model: {} }, setup(c) { const t = c, e = I(), o = t.model; return o.canShowErrors = !1, f(() => t.model), P(() => { const n = t.model; n.textElement = e.value; }), (n, r) => (a(), i("div", Ds, [ d("div", Ns, [ C(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, Ms), [ [de, s(o).text] ]), C(d("div", Ss, [ v(s(u), { is: "sv-list", model: s(o).errorList }, null, 8, ["model"]) ], 512), [ [Q, s(o).hasErrors] ]) ]) ])); } }), Is = { class: "svc-json-error__container" }, Es = { class: "svc-json-error__title" }, Ps = ["title", "aria-label"], Rs = /* @__PURE__ */ g({ __name: "JsonEditorErrorItem", props: { item: {} }, setup(c) { const t = c; f(() => t.item); const e = (o) => { o.stopPropagation(), t.item.data.fixError(); }; return (o, n) => (a(), i(T, null, [ v(s(u), { is: "sv-svg-icon", iconName: o.item.iconName, size: o.item.iconSize, class: m("svc-json-error__icon") }, null, 8, ["iconName", "size"]), d("div", Is, [ d("div", Es, [ v(s(u), { is: "survey-string", locString: o.item.locTitle }, null, 8, ["locString"]) ]), o.item.data.showFixButton ? C((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(u), { is: "sv-svg-icon", iconName: o.item.data.fixButtonIcon, size: "auto" }, null, 8, ["iconName"]) ], 8, Ps)), [ [s(N)] ]) : p("", !0) ]) ], 64)); } }), Vs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({ __name: "LogicAddButton", props: { model: {} }, setup(c) { const t = c; f(() => t.model); const e = (o) => { o.stopPropagation(), t.model.action(); }; return (o, n) => C((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", Vs, k(o.model.title), 1) ], 2)), [ [s(N)] ]); } }), As = { class: "svc-creator-tab__content" }, zs = { key: 1, class: "svc-logic-tab__content-empty" }, Ls = /* @__PURE__ */ g({ __name: "Logic", props: { model: {} }, setup(c) { const t = c; return f(() => t.model), (e, o) => (a(), i("div", As, [ d("div", { class: m(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }]) }, [ e.model.hasItems ? (a(), i(T, { key: 0 }, [ v(s(O), { model: e.model.itemsSurvey }, null, 8, ["model"]), e.model.readOnly ? p("", !0) : (a(), y(te, { key: 0, model: e.model.addNewButton }, null, 8, ["model"])) ], 64)) : p("", !0), e.model.hasItems ? p("", !0) : (a(), i("div", zs, [ v(j, { name: "logic", placeholderTitleText: e.model.placeholderTitleText, placeholderDescriptionText: e.model.placeholderDescriptionText }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]), e.model.readOnly ? p("", !0) : (a(), y(te, { key: 0, model: e.model.addNewButton }, null, 8, ["model"])) ])) ], 2) ])); } }), Fs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Ks = ["id"]; ue.Instance.registerRenderer( "dropdown", "logicoperator", "sv-logic-operator" ); const Us = /* @__PURE__ */ g({ __name: "LogicOperator", props: { question: {} }, setup(c) { const t = c, e = I(), o = $(() => t.question.dropdownListModel ?? new Pe(t.question)); H(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(T, { 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(), y(s(u), { key: 0, is: "survey-string", locString: l.question.locReadOnlyText }, null, 8, ["locString"])) : p("", !0) ], 2) ], 42, Fs), v(s(u), { 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(), y(s(u), { key: 0, is: "survey-string", locString: l.question.locReadOnlyText }, null, 8, ["locString"])) : p("", !0) ], 10, Ks)) : p("", !0) ], 2)); } }), Qs = /* @__PURE__ */ g({ __name: "EmbeddedSurvey", props: { question: {} }, setup(c) { const t = c, e = I(); H(t, e); const o = $(() => t.question.embeddedSurvey); return (n, r) => n.question && o.value && o.value.currentPage ? (a(), y(s(u), { key: 0, is: "sv-page", page: o.value.currentPage, survey: o.value }, null, 8, ["page", "survey"])) : p("", !0); } }), Hs = /* @__PURE__ */ g({ inheritAttrs: !1, __name: "LinkValue", props: { question: {} }, setup(c) { const t = c, e = I(), o = ce.getString("pe.clear"); return H(t, e), (n, r) => (a(), i(T, null, [ v(s(u), { 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(), y(s(u), { 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)); } }), Os = { key: 1, class: "st-content" }, Gs = { class: "svc-flex-column st-strings-wrapper" }, Ws = { class: "svc-flex-row st-strings-header" }, js = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Js = /* @__PURE__ */ g({ __name: "Translation", props: { model: {} }, setup(c) { const t = c; return f(() => 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(), y(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", Os, [ d("div", Gs, [ d("div", Ws, [ v(s(O), { model: e.model.stringsHeaderSurvey }, null, 8, ["model"]) ]), d("div", js, [ v(s(O), { model: e.model.stringsSurvey }, null, 8, ["model"]) ]) ]) ])) ], 2)); } }), Zs = (c, t) => { const e = c.__vccOpts || c; for (const [o, n] of t) e[o] = n; return e; }, Xs = {}, Ys = { class: "sd-translation-line-skeleton" }; function xs(c, t) { return a(), i("div", Ys); } const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({ __name: "TranslateFromAction", props: { item: {} }, setup(c) { return (t, e) => (a(), i("div", { class: m(t.item.data.containerCss) }, [ d("span", { class: m(t.item.data.additionalTitleCss) }, k(t.item.data.additionalTitle), 3), v(s(u), { is: "sv-action-bar-item-dropdown", item: t.item }, null, 8, ["item"]) ], 2)); } }), st = { key: 1, class: "svc-plugin-tab__content" }, tt = { key: 2, class: "svc-plugin-tab__content-actions svc-test-tab__content-actions" }, nt = /* @__PURE__ */ g({ __name: "Theme", props: { model: {} }, setup(c) { const t = c; return f(() => 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(), y(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", st, [ v(s(u), { is: "survey-simulator", model: e.model.simulator }, null, 8, ["model"]), e.model.showResults ? (a(), y(s(u), { key: 0, is: "survey-results", survey: e.model.survey }, null, 8, ["survey"])) : p("", !0) ])), e.model.isPageToolbarVisible ? (a(), i("div", tt, [ v(s(u), { is: "sv-action-bar", model: e.model.pages }, null, 8, ["model"]) ])) : p("", !0) ], 2)); } }), at = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], lt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], it = /* @__PURE__ */ g({ __name: "Color", props: { question: {} }, setup(c) { return H(c, I()), (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(u), { 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, at) ], 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, lt), e.question.showDropdownAction ? (a(), i(T, { key: 0 }, [ d("div", { "aria-hidden": "true", class: m(e.question.cssClasses.choicesButtonWrapper) }, [ v(s(u), { is: "sv-action-bar-item", item: e.question.dropdownAction }, null, 8, ["item"]) ], 2), v(s(u), { is: "sv-popup", model: e.question.dropdownAction.popupModel }, null, 8, ["model"]) ], 64)) : p("", !0) ], 34)); } }), rt = /* @__PURE__ */ g({ __name: "ColorItem", props: { model: {}, item: {} }, setup(c) { const t = c; f(() => t.item); const e = () => ({ backgroundColor: t.item.value }); return (o, n) => (a(), i(T, null, [ d("span", { class: "spg-color-editor__color-swatch", style: F(e()) }, null, 4), v(s(u), { is: "survey-string", locString: o.item.locTitle }, null, 8, ["locString"]) ], 64)); } }), dt = ["disabled", "value", "placeholder"], ct = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], ut = ["title", "disabled"], pt = ["for", "aria-label"], vt = /* @__PURE__ */ g({ __name: "File", props: { question: {} }, setup(c) { const t = I(); return H(c, 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, dt), 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, ct), d("div", { class: m(o.question.cssClasses.buttonsContainer) }, [ C((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(u), { is: "sv-svg-icon", iconName: o.question.cssClasses.clearButtonIcon, size: "auto" }, null, 8, ["iconName"]) ], 10, ut)), [ [s(N)] ]), C((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(u), { is: "sv-svg-icon", iconName: o.question.cssClasses.chooseButtonIcon, size: "auto", title: o.question.chooseButtonCaption }, null, 8, ["iconName", "title"]) ], 10, pt)), [ [s(N)] ]) ], 2) ], 34)); } }), mt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], _t = ["disabled"], gt = ["disabled"], bt = /* @__PURE__ */ g({ __name: "SpinEditor", props: { question: {} }, setup(c) { return H(c, I()), (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,