survey-creator-vue 2.0.0-rc.7 → 2.0.0-rc.8

package/survey-creator-vue.es.js

@@ -1,7 +1,7 @@
-import { useBase as k, SvComponent as u, key2ClickDirective as D, SurveyComponent as Q, useQuestion as H, ComponentFactory as re } from "survey-vue3-ui";
-import { defineComponent as g, computed as $, toRaw as ge, ref as E, onMounted as B, onUnmounted as L, openBlock as l, createElementBlock as i, Fragment as f, createVNode as v, unref as s, createElementVNode as a, normalizeClass as _, normalizeStyle as K, createCommentVNode as p, renderList as R, createBlock as h, nextTick as de, withDirectives as C, toDisplayString as w, vShow as F, renderSlot as X, withCtx as Y, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as x, vModelText as ce, onUpdated as ee, mergeProps as V } from "vue";
+import { useBase as f, SvComponent as u, key2ClickDirective as D, SurveyComponent as Q, useQuestion as H, ComponentFactory as re } from "survey-vue3-ui";
+import { defineComponent as g, computed as $, toRaw as ge, ref as B, onMounted as E, onUnmounted as L, openBlock as l, createElementBlock as i, Fragment as k, createVNode as v, unref as s, createElementVNode as a, normalizeClass as _, normalizeStyle as K, createCommentVNode as p, renderList as R, createBlock as h, nextTick as de, withDirectives as C, toDisplayString as w, vShow as F, renderSlot as X, withCtx as Y, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as x, vModelText as ce, onUpdated as ee, mergeProps as V } from "vue";
 import { ResponsivityManager as he, CssClassBuilder as Ce, RendererFactory as ue, DropdownListModel as qe, VerticalResponsivityManager as $e } from "survey-core";
-import { ScrollViewModel as we, editorLocalization as pe, SurveyResultsModel as fe, initLogicOperator as ke, StringEditorViewModelBase as Te, ToolboxToolViewModel as De, PageAdorner as Ne, RowViewModel as Me, QuestionAdornerViewModel as oe, QuestionImageAdornerViewModel as Se, QuestionRatingAdornerViewModel as Ie, MatrixCellWrapperViewModel as Ee, ItemValueWrapperViewModel as Be, ImageItemValueWrapperViewModel as Pe, LogoImageViewModel as Re, PageNavigatorViewModel as Ve, QuestionDropdownAdornerViewModel as Ae, editableStringRendererName as ze } from "survey-creator-core";
+import { ScrollViewModel as we, editorLocalization as pe, SurveyResultsModel as ke, initLogicOperator as fe, StringEditorViewModelBase as Te, ToolboxToolViewModel as De, PageAdorner as Ne, RowViewModel as Me, QuestionAdornerViewModel as oe, QuestionImageAdornerViewModel as Se, QuestionRatingAdornerViewModel as Ie, MatrixCellWrapperViewModel as Be, ItemValueWrapperViewModel as Ee, ImageItemValueWrapperViewModel as Pe, LogoImageViewModel as Re, PageNavigatorViewModel as Ve, QuestionDropdownAdornerViewModel as Ae, editableStringRendererName as ze } from "survey-creator-core";
 const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Fe = { class: "svc-top-bar" }, Ke = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
@@ -17,17 +17,17 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(c) {
-    const t = c, e = $(() => ge(t.model)), o = E();
-    return k(
+    const t = c, e = $(() => ge(t.model)), o = B();
+    return f(
       () => e.value,
       (n, r) => {
         r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
       }
-    ), B(() => {
+    ), E(() => {
       o.value && t.model.setRootElement(o.value);
     }), L(() => {
       t.model.unsubscribeRootElement();
-    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (l(), i(f, { key: 0 }, [
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (l(), i(k, { key: 0 }, [
       v(s(u), { is: "survey-popup-modal" }),
       a("div", {
         class: _(e.value.getRootCss()),
@@ -73,7 +73,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 }])
               }, [
                 a("div", He, [
-                  (l(!0), i(f, null, R(e.value.tabs, (d) => (l(), i(f, null, [
+                  (l(!0), i(k, null, R(e.value.tabs, (d) => (l(), i(k, null, [
                     e.value.viewType == d.id && d.visible ? (l(), i("div", {
                       class: _(["svc-creator-tab", {
                         "svc-creator__toolbox--right": e.value.toolboxLocation == "right"
@@ -129,8 +129,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(c) {
     const t = c;
     let e;
-    const o = E();
-    return k(() => t.model), B(() => {
+    const o = B();
+    return f(() => t.model), E(() => {
       e = new he(o.value, t.model);
     }), L(() => {
       e.dispose(), e = void 0;
@@ -139,7 +139,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref_key: "container",
       ref: o
     }, [
-      (l(!0), i(f, null, R(n.model.renderedActions, (d) => (l(), h(s(u), {
+      (l(!0), i(k, null, R(n.model.renderedActions, (d) => (l(), h(s(u), {
         key: d.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: d
@@ -152,8 +152,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     item: {}
   },
   setup(c) {
-    const t = E(), e = c;
-    return k(() => e.item), B(() => {
+    const t = B(), e = c;
+    return f(() => e.item), E(() => {
       const o = e.item;
       o.updateModeCallback = (n, r) => {
         o.mode = n, de(() => r(n, t.value));
@@ -181,7 +181,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.item), (e, o) => C((l(), i("div", {
+    return f(() => t.item), (e, o) => C((l(), i("div", {
       class: _(["svc-tabbed-menu-item", e.item.getRootCss()]),
       onClick: o[0] || (o[0] = //@ts-ignore
       (...n) => e.item.action && e.item.action(...n))
@@ -208,8 +208,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(c) {
-    const t = c, e = E();
-    return k(() => t.model), B(() => {
+    const t = c, e = B();
+    return f(() => t.model), E(() => {
       t.model.initResizeManager(e.value);
     }), L(() => {
       t.model.resetResizeManager();
@@ -234,7 +234,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
             a("div", so, [
-              (l(!0), i(f, null, R(o.model.pages, (r, d) => (l(), h(s(u), {
+              (l(!0), i(k, null, R(o.model.pages, (r, d) => (l(), h(s(u), {
                 key: d,
                 is: "svc-side-bar-page",
                 model: r
@@ -264,7 +264,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", no, [
+    return f(() => t.model), (e, o) => (l(), i("div", no, [
       a("div", lo, [
         v(s(u), {
           is: "sv-action-bar",
@@ -281,7 +281,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => e.model.visible ? (l(), h(s(u), {
+    return f(() => t.model), (e, o) => e.model.visible ? (l(), h(s(u), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
@@ -294,7 +294,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => e.model.isVisible ? (l(), h(s(u), {
+    return f(() => t.model), (e, o) => e.model.isVisible ? (l(), h(s(u), {
       key: 0,
       is: "sv-list",
       model: e.model.list
@@ -305,8 +305,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
 ], W = /* @__PURE__ */ g({
   __name: "Scroll",
   setup(c) {
-    const t = new we(), e = E();
-    return B(() => {
+    const t = new we(), e = B();
+    return E(() => {
       t.setRootElement(e.value);
     }), L(() => {
       t.setRootElement(void 0), t.unsubscribeRootElement();
@@ -336,7 +336,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(e.model.rootCss)
     }, [
       v(s(u), {
@@ -361,7 +361,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(!0), i(f, null, R(e.model.actions, (n, r) => (l(), h(s(u), {
+    return f(() => t.model), (e, o) => (l(!0), i(k, null, R(e.model.actions, (n, r) => (l(), h(s(u), {
       key: r,
       is: "svc-tab-button",
       model: n
@@ -376,7 +376,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(e.model.sideBarClassName)
     }, [
       a("div", go, [
@@ -409,20 +409,20 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), wo = { class: "svc-menu-action" }, fo = ["title"], ko = { class: "svc-menu-action__icon" }, To = { class: "svc-menu-action__icon-container" }, Do = /* @__PURE__ */ g({
+}), wo = { class: "svc-menu-action" }, ko = ["title"], fo = { class: "svc-menu-action__icon" }, To = { class: "svc-menu-action__icon-container" }, Do = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", wo, [
+    return f(() => t.model), (e, o) => (l(), i("div", wo, [
       C((l(), i("div", {
         class: _(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        a("div", ko, [
+        a("div", fo, [
           a("div", To, [
             v(s(u), {
               is: "sv-svg-icon",
@@ -431,15 +431,15 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, fo)), [
+      ], 10, ko)), [
         [s(D), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ]));
   }
-}), No = { class: "svc-property-grid-placeholder" }, Mo = { class: "svc-property-grid-placeholder__header" }, So = { class: "svc-property-grid-placeholder__title" }, Io = { class: "svc-property-grid-placeholder__description" }, Eo = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
+}), No = { class: "svc-property-grid-placeholder" }, Mo = { class: "svc-property-grid-placeholder__header" }, So = { class: "svc-property-grid-placeholder__title" }, Io = { class: "svc-property-grid-placeholder__description" }, Bo = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
   /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__gap" }),
   /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__image" })
-], -1), Bo = /* @__PURE__ */ g({
+], -1), Eo = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(c) {
     const t = pe;
@@ -448,7 +448,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         a("span", So, w(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
         a("span", Io, w(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      Eo
+      Bo
     ]));
   }
 }), Po = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Ro = {
@@ -464,7 +464,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Po, [
+    return f(() => t.model), (e, o) => (l(), i("div", Po, [
       e.model.subTitle ? p("", !0) : (l(), i("div", Ro, w(e.model.title), 1)),
       e.model.subTitle ? (l(), i("div", Vo, [
         a("span", Ao, w(e.model.title), 1),
@@ -479,7 +479,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Fo, [
+    return f(() => t.model), (e, o) => (l(), i("div", Fo, [
       a("div", Ko, [
         a("div", Uo, [
           C((l(), i("div", {
@@ -545,8 +545,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     const t = c, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
     }, o = () => new Ce().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) => (l(), i(f, null, [
-      n.iconName ? p("", !0) : (l(), i(f, { key: 0 }, [
+    return (n, r) => (l(), i(k, null, [
+      n.iconName ? p("", !0) : (l(), i(k, { key: 0 }, [
         n.disabled ? (l(), i("span", {
           key: 0,
           class: _(["svc-action-button svc-action-button--disabled", n.classes]),
@@ -563,7 +563,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           [s(D)]
         ])
       ], 64)),
-      n.iconName ? (l(), i(f, { key: 1 }, [
+      n.iconName ? (l(), i(k, { key: 1 }, [
         n.disabled ? (l(), i("span", {
           key: 0,
           class: _(o()),
@@ -607,7 +607,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.item), (e, o) => C((l(), i("button", {
+    return f(() => t.item), (e, o) => C((l(), i("button", {
       class: _(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -640,7 +640,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    k(() => t.model);
+    f(() => t.model);
     const e = $(() => t.model.simulatorFrame), o = () => {
       t.model.device !== "desktop" && t.model.activateZoom();
     }, n = () => {
@@ -713,7 +713,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
@@ -755,7 +755,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c, e = $(() => t.model.testAgainAction);
-    return k(() => e.value), (o, n) => C((l(), i("div", {
+    return f(() => e.value), (o, n) => C((l(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
@@ -776,21 +776,21 @@ function A(c, t, e) {
       immediate: !0
     }
   );
-  return k(() => o.value, void 0, e), x(() => {
+  return f(() => o.value, void 0, e), x(() => {
     n();
   }), o;
 }
 const gs = {
   key: 0,
   class: "svd-test-results"
-}, bs = { class: "svd-test-results__content" }, ys = { class: "svd-test-results__header" }, hs = { class: "svd-test-results__header-text" }, Cs = { class: "svd-test-results__header-types" }, qs = { class: "svd-test-results__text svd-light-bg-color" }, $s = { class: "svd-test-results__table svd-light-bg-color" }, ws = { class: "svd-light-background-color" }, fs = { class: "svd-dark-border-color" }, ks = { class: "svd-dark-border-color" }, Ts = /* @__PURE__ */ g({
+}, bs = { class: "svd-test-results__content" }, ys = { class: "svd-test-results__header" }, hs = { class: "svd-test-results__header-text" }, Cs = { class: "svd-test-results__header-types" }, qs = { class: "svd-test-results__text svd-light-bg-color" }, $s = { class: "svd-test-results__table svd-light-bg-color" }, ws = { class: "svd-light-background-color" }, ks = { class: "svd-dark-border-color" }, fs = { class: "svd-dark-border-color" }, Ts = /* @__PURE__ */ g({
   __name: "SurveyResults",
   props: {
     survey: {}
   },
   setup(c) {
     const t = c, e = A(
-      () => t.survey ? new fe(t.survey) : void 0,
+      () => t.survey ? new ke(t.survey) : void 0,
       [() => t.survey]
     );
     return (o, n) => s(e) ? (l(), i("div", gs, [
@@ -823,12 +823,12 @@ const gs = {
           a("table", null, [
             a("thead", null, [
               a("tr", ws, [
-                a("th", fs, w(s(e).resultsTitle), 1),
-                a("th", ks, w(s(e).resultsDisplayValue), 1)
+                a("th", ks, w(s(e).resultsTitle), 1),
+                a("th", fs, w(s(e).resultsDisplayValue), 1)
               ])
             ]),
             a("tbody", null, [
-              (l(!0), i(f, null, R(s(e).resultData, (r, d) => (l(), h(s(u), {
+              (l(!0), i(k, null, R(s(e).resultData, (r, d) => (l(), h(s(u), {
                 is: "survey-results-table-row",
                 model: r,
                 key: d
@@ -848,7 +848,7 @@ const gs = {
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i(f, null, [
+    return f(() => t.model), (e, o) => (l(), i(k, null, [
       C((l(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
@@ -883,21 +883,21 @@ const gs = {
       ])), [
         [s(D)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (l(!0), i(f, { key: 0 }, R(e.model.data, (n, r) => (l(), h(s(u), {
+      e.model.isNode && !e.model.collapsed ? (l(!0), i(k, { key: 0 }, R(e.model.data, (n, r) => (l(), h(s(u), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
-}), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Is = { class: "svc-json-editor-tab__errros_list" }, Es = /* @__PURE__ */ g({
+}), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Is = { class: "svc-json-editor-tab__errros_list" }, Bs = /* @__PURE__ */ g({
   __name: "JsonEditorAce",
   props: {
     model: {}
   },
   setup(c) {
-    const t = c, e = E();
-    return k(() => t.model), B(() => t.model.init(window.ace.edit(e.value))), (o, n) => (l(), i("div", Ms, [
+    const t = c, e = B();
+    return f(() => t.model), E(() => t.model.init(window.ace.edit(e.value))), (o, n) => (l(), i("div", Ms, [
       a("div", Ss, [
         a("div", {
           class: "svc-json-editor-tab__ace-editor",
@@ -915,17 +915,17 @@ const gs = {
       ])
     ]));
   }
-}), Bs = { class: "svc-creator-tab__content" }, Ps = { class: "svc-json-editor-tab__content" }, Rs = ["aria-label", "disabled"], Vs = { class: "svc-json-editor-tab__errros_list" }, As = /* @__PURE__ */ g({
+}), Es = { class: "svc-creator-tab__content" }, Ps = { class: "svc-json-editor-tab__content" }, Rs = ["aria-label", "disabled"], Vs = { class: "svc-json-editor-tab__errros_list" }, As = /* @__PURE__ */ g({
   __name: "JsonEditorTextArea",
   props: {
     model: {}
   },
   setup(c) {
-    const t = c, e = E(), o = t.model;
-    return o.canShowErrors = !1, k(() => t.model), B(() => {
+    const t = c, e = B(), o = t.model;
+    return o.canShowErrors = !1, f(() => t.model), E(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (l(), i("div", Bs, [
+    }), (n, r) => (l(), i("div", Es, [
       a("div", Ps, [
         C(a("textarea", {
           class: "svc-json-editor-tab__content-area",
@@ -957,11 +957,11 @@ const gs = {
   },
   setup(c) {
     const t = c;
-    k(() => t.item);
+    f(() => t.item);
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
-    return (o, n) => (l(), i(f, null, [
+    return (o, n) => (l(), i(k, null, [
       v(s(u), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
@@ -1001,7 +1001,7 @@ const gs = {
   },
   setup(c) {
     const t = c;
-    k(() => t.model);
+    f(() => t.model);
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
@@ -1027,11 +1027,11 @@ const gs = {
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Hs, [
+    return f(() => t.model), (e, o) => (l(), i("div", Hs, [
       a("div", {
         class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
-        e.model.hasItems ? (l(), i(f, { key: 0 }, [
+        e.model.hasItems ? (l(), i(k, { key: 0 }, [
           v(s(Q), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
@@ -1066,9 +1066,9 @@ const js = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    const t = c, e = E(), o = $(() => t.question.dropdownListModel ?? new qe(t.question));
+    const t = c, e = B(), o = $(() => t.question.dropdownListModel ?? new qe(t.question));
     H(t, e, (m) => {
-      ke(m);
+      fe(m);
     });
     const n = (m) => {
       var b;
@@ -1083,7 +1083,7 @@ const js = /* @__PURE__ */ g({
     return (m, b) => (l(), i("div", {
       class: _(m.question.cssClasses.selectWrapper)
     }, [
-      m.question.isReadOnly ? p("", !0) : (l(), i(f, { key: 0 }, [
+      m.question.isReadOnly ? p("", !0) : (l(), i(k, { key: 0 }, [
         a("div", {
           class: _(m.question.getControlClass()),
           onClick: n,
@@ -1150,7 +1150,7 @@ const js = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    const t = c, e = E();
+    const t = c, e = B();
     H(t, e);
     const o = $(() => t.question.embeddedSurvey);
     return (n, r) => n.question && o.value && o.value.currentPage ? (l(), h(s(u), {
@@ -1167,8 +1167,8 @@ const js = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    const t = c, e = E(), o = pe.getString("pe.clear");
-    return H(t, e), (n, r) => (l(), i(f, null, [
+    const t = c, e = B(), o = pe.getString("pe.clear");
+    return H(t, e), (n, r) => (l(), i(k, null, [
       v(s(u), {
         is: "svc-action-button",
         text: n.question.linkValueText,
@@ -1199,7 +1199,7 @@ const js = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
       e.model.isEmpty ? (l(), h(j, {
@@ -1264,7 +1264,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
@@ -1300,7 +1300,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    return H(c, E()), (e, o) => (l(), i("div", {
+    return H(c, B()), (e, o) => (l(), i("div", {
       class: _(e.question.cssClasses.root),
       onKeydown: o[5] || (o[5] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
@@ -1344,7 +1344,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
       }, null, 42, pt),
-      e.question.showDropdownAction ? (l(), i(f, { key: 0 }, [
+      e.question.showDropdownAction ? (l(), i(k, { key: 0 }, [
         v(s(u), {
           is: "sv-action-bar-item",
           item: e.question.dropdownAction
@@ -1364,9 +1364,9 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    k(() => t.item);
+    f(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
-    return (o, n) => (l(), i(f, null, [
+    return (o, n) => (l(), i(k, null, [
       a("span", {
         class: "spg-color-editor__color-swatch",
         style: K(e())
@@ -1383,7 +1383,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    const t = E();
+    const t = B();
     return H(c, t), (o, n) => (l(), i("div", {
       class: _(o.question.cssClasses.root),
       onDragenter: n[5] || (n[5] = //@ts-ignore
@@ -1471,9 +1471,9 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    return H(c, E()), (e, o) => (l(), i("div", {
+    return H(c, B()), (e, o) => (l(), i("div", {
       class: _(e.question.cssClasses.root),
-      onKeydown: o[16] || (o[16] = //@ts-ignore
+      onKeydown: o[18] || (o[18] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
     }, [
       a("input", {
@@ -1506,15 +1506,17 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         a("button", {
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
-          onMousedown: o[6] || (o[6] = //@ts-ignore
+          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[7] || (o[7] = //@ts-ignore
+          onMouseup: o[8] || (o[8] = //@ts-ignore
           (...n) => e.question.onButtonMouseUp && e.question.onButtonMouseUp(...n)),
-          onMouseleave: o[8] || (o[8] = //@ts-ignore
+          onMouseleave: o[9] || (o[9] = //@ts-ignore
           (...n) => e.question.onButtonMouseLeave && e.question.onButtonMouseLeave(...n)),
-          onBlur: o[9] || (o[9] = //@ts-ignore
+          onBlur: o[10] || (o[10] = //@ts-ignore
           (...n) => e.question.onBlur && e.question.onBlur(...n)),
-          onFocus: o[10] || (o[10] = //@ts-ignore
+          onFocus: o[11] || (o[11] = //@ts-ignore
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
@@ -1527,15 +1529,17 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         a("button", {
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
-          onMousedown: o[11] || (o[11] = //@ts-ignore
+          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[12] || (o[12] = //@ts-ignore
+          onMouseup: o[14] || (o[14] = //@ts-ignore
           (...n) => e.question.onButtonMouseUp && e.question.onButtonMouseUp(...n)),
-          onMouseleave: o[13] || (o[13] = //@ts-ignore
+          onMouseleave: o[15] || (o[15] = //@ts-ignore
           (...n) => e.question.onButtonMouseLeave && e.question.onButtonMouseLeave(...n)),
-          onBlur: o[14] || (o[14] = //@ts-ignore
+          onBlur: o[16] || (o[16] = //@ts-ignore
           (...n) => e.question.onBlur && e.question.onBlur(...n)),
-          onFocus: o[15] || (o[15] = //@ts-ignore
+          onFocus: o[17] || (o[17] = //@ts-ignore
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
@@ -1548,14 +1552,14 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
       ], 2)
     ], 34));
   }
-}), ft = ["disabled", "title"], le = /* @__PURE__ */ g({
+}), kt = ["disabled", "title"], le = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
   },
   setup(c) {
     const t = c, e = () => "survey-" + t.question.wrappedQuestionTemplate;
-    return H(t, E()), (o, n) => (l(), i("div", {
+    return H(t, B()), (o, n) => (l(), i("div", {
       class: _(o.question.getRootClass())
     }, [
       v(s(u), {
@@ -1574,10 +1578,10 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, ft)
+      ], 10, kt)
     ], 2));
   }
-}), kt = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Tt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
+}), ft = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Tt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
 ], -1), Dt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
@@ -1597,7 +1601,7 @@ const It = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    const t = c, e = E(null);
+    const t = c, e = B(null);
     return H(t, e), (o, n) => (l(), i("div", {
       class: "spg-boolean-switch",
       role: "checkbox",
@@ -1621,9 +1625,9 @@ const It = /* @__PURE__ */ g({
           }, null, 8, ["locString"])
         ])
       ])
-    ], 8, kt));
+    ], 8, ft));
   }
-}), Et = { class: "svc-string-editor__content" }, Bt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Pt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Rt = { class: "svc-string-editor__input" }, Vt = ["textContent", "aria-placeholder", "contenteditable"], At = ["aria-placeholder", "contenteditable", "innerHTML"], zt = {
+}), Bt = { class: "svc-string-editor__content" }, Et = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Pt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Rt = { class: "svc-string-editor__input" }, Vt = ["textContent", "aria-placeholder", "contenteditable"], At = ["aria-placeholder", "contenteditable", "innerHTML"], zt = {
   key: 0,
   class: "svc-string-editor__error"
 }, Lt = /* @__PURE__ */ g({
@@ -1632,7 +1636,7 @@ const It = /* @__PURE__ */ g({
     locString: {}
   },
   setup(c) {
-    const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = E(), r = E(), d = A(
+    const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = B(), r = B(), d = A(
       () => {
         const q = new Te(
           e.value,
@@ -1694,7 +1698,7 @@ const It = /* @__PURE__ */ g({
         immediate: !0
       }
     );
-    return B(() => {
+    return E(() => {
       var q;
       e.value.__isEditing && ((q = n.value) == null || q.focus());
     }), L(() => {
@@ -1702,8 +1706,8 @@ const It = /* @__PURE__ */ g({
     }), (q, T) => (l(), i("span", {
       class: _(b.value)
     }, [
-      a("span", Et, [
-        Bt,
+      a("span", Bt, [
+        Et,
         Pt,
         a("span", Rt, [
           e.value.hasHtml ? p("", !0) : (l(), i("span", {
@@ -1816,10 +1820,10 @@ const It = /* @__PURE__ */ g({
     model: {}
   },
   setup(c) {
-    const t = c, e = $(() => t.model.toolbox), o = E();
-    k(() => e.value);
+    const t = c, e = $(() => t.model.toolbox), o = B();
+    f(() => e.value);
     let n;
-    B(() => {
+    E(() => {
       e.value.setRootElement(o.value), n = new $e(
         e.value.containerElement,
         e.value
@@ -1855,14 +1859,14 @@ const It = /* @__PURE__ */ g({
         e.value.showPlaceholder ? (l(), i("div", Ut, w(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(W, null, {
           default: Y(() => [
-            e.value.showInSingleCategory ? p("", !0) : (l(!0), i(f, { key: 0 }, R(e.value.categories, (b, y) => (l(), h(s(u), {
+            e.value.showInSingleCategory ? p("", !0) : (l(!0), i(k, { key: 0 }, R(e.value.categories, (b, y) => (l(), h(s(u), {
               is: "svc-toolbox-category",
               key: y,
               category: b,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
             e.value.showInSingleCategory ? (l(), i("div", Ht, [
-              (l(!0), i(f, null, R(r.value, (b) => (l(), h(s(u), {
+              (l(!0), i(k, null, R(r.value, (b) => (l(), h(s(u), {
                 key: b.renderedId,
                 is: "svc-toolbox-tool",
                 creator: d.model,
@@ -1899,8 +1903,8 @@ const It = /* @__PURE__ */ g({
       (n) => {
         n.dispose();
       }
-    ), o = E();
-    return B(() => {
+    ), o = B();
+    return E(() => {
       const n = t.item;
       n.updateModeCallback = (r, d) => {
         n.mode = r, de(() => d(r, o.value));
@@ -1908,7 +1912,7 @@ const It = /* @__PURE__ */ g({
     }), L(() => {
       const n = t.item;
       n.updateModeCallback = void 0;
-    }), k(() => t.item), (n, r) => {
+    }), f(() => t.item), (n, r) => {
       var d;
       return l(), i("div", {
         class: _(n.item.css),
@@ -1947,7 +1951,7 @@ const It = /* @__PURE__ */ g({
     viewModel: {}
   },
   setup(c) {
-    return (t, e) => (l(), i(f, null, [
+    return (t, e) => (l(), i(k, null, [
       C((l(), i("div", {
         class: _(["svc-toolbox__item", t.item.renderedCss]),
         role: "button",
@@ -1997,7 +2001,7 @@ const It = /* @__PURE__ */ g({
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
-    return (n, r) => (l(), i(f, null, [
+    return (n, r) => (l(), i(k, null, [
       v(s(u), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
@@ -2033,7 +2037,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return k(() => t.category), (e, o) => (l(), i("div", {
+    return f(() => t.category), (e, o) => (l(), i("div", {
       class: _(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
         "svc-toolbox__category--empty": e.category.empty
@@ -2071,7 +2075,7 @@ const It = /* @__PURE__ */ g({
           [s(D)]
         ])
       ]),
-      (l(!0), i(f, null, R(e.category.items, (n) => (l(), h(s(u), {
+      (l(!0), i(k, null, R(e.category.items, (n) => (l(), h(s(u), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2091,7 +2095,7 @@ const It = /* @__PURE__ */ g({
     return (t, e) => (l(), i("div", {
       class: _(t.model.cssClasses.root)
     }, [
-      (l(!0), i(f, null, R(t.model.renderedActions, (o, n) => (l(), h(s(u), {
+      (l(!0), i(k, null, R(t.model.renderedActions, (o, n) => (l(), h(s(u), {
         key: n,
         is: "svc-toolbox-tool",
         creator: t.creator,
@@ -2129,7 +2133,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = $(() => t.model.survey);
-    return k(() => t.model), k(() => e.value), (o, n) => (l(), i(f, null, [
+    return f(() => t.model), f(() => e.value), (o, n) => (l(), i(k, null, [
       a("div", nn, [
         o.model.isToolboxVisible ? (l(), h(s(u), {
           key: 0,
@@ -2145,7 +2149,7 @@ const It = /* @__PURE__ */ g({
         v(W, null, {
           default: Y(() => [
             a("div", ln, [
-              o.model.showPlaceholder ? (l(), i(f, { key: 0 }, [
+              o.model.showPlaceholder ? (l(), i(k, { key: 0 }, [
                 o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", an, [
                   v(s(u), {
                     is: "survey-header",
@@ -2169,7 +2173,7 @@ const It = /* @__PURE__ */ g({
                   ])
                 ])
               ], 64)) : p("", !0),
-              o.model.showPlaceholder ? p("", !0) : (l(), i(f, { key: 1 }, [
+              o.model.showPlaceholder ? p("", !0) : (l(), i(k, { key: 1 }, [
                 a("div", {
                   class: _(o.model.designerCss),
                   style: K([
@@ -2183,7 +2187,7 @@ const It = /* @__PURE__ */ g({
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
                   ])) : p("", !0),
-                  o.model.creator.pageEditMode !== "bypage" ? (l(!0), i(f, { key: 1 }, R(o.model.pages, (r) => (l(), i("div", {
+                  o.model.creator.pageEditMode !== "bypage" ? (l(!0), i(k, { key: 1 }, R(o.model.pages, (r) => (l(), i("div", {
                     key: r.id,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
@@ -2240,7 +2244,7 @@ const It = /* @__PURE__ */ g({
 }, $n = {
   key: 2,
   class: "svc-page__placeholder_frame"
-}, wn = { class: "svc-panel__placeholder_frame" }, fn = { class: "svc-panel__placeholder" }, kn = /* @__PURE__ */ g({
+}, wn = { class: "svc-panel__placeholder_frame" }, kn = { class: "svc-panel__placeholder" }, fn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2249,7 +2253,7 @@ const It = /* @__PURE__ */ g({
     isGhost: { type: Boolean }
   },
   setup(c) {
-    const t = c, e = E(), o = A(
+    const t = c, e = B(), o = A(
       () => {
         const r = new Ne(t.creator, t.page);
         return r.isGhost = t.isGhost, r;
@@ -2266,7 +2270,7 @@ const It = /* @__PURE__ */ g({
       }
     ), ee(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), B(() => {
+    }), E(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     });
     const n = (r) => {
@@ -2331,7 +2335,7 @@ const It = /* @__PURE__ */ g({
       }, null, 8, ["survey", "page"]),
       s(o).showPlaceholder ? (l(), i("div", $n, [
         a("div", wn, [
-          a("div", fn, w(s(o).placeholderText), 1)
+          a("div", kn, w(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       v(s(u), {
@@ -2351,9 +2355,9 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    k(() => t.item.data);
+    f(() => t.item.data);
     const e = $(() => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")), o = $(() => t.renderPopup === void 0 || t.renderPopup !== !1);
-    return (n, r) => (l(), i(f, null, [
+    return (n, r) => (l(), i(k, null, [
       C((l(), i("div", {
         class: _(e.value),
         onClick: r[0] || (r[0] = (d) => {
@@ -2393,7 +2397,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return k(() => t.questionTypeSelectorModel), (e, o) => C((l(), i("button", {
+    return f(() => t.questionTypeSelectorModel), (e, o) => C((l(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2419,7 +2423,7 @@ const It = /* @__PURE__ */ g({
       [s(D)]
     ]);
   }
-}), Sn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), En = /* @__PURE__ */ g({
+}), Sn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Bn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
@@ -2432,7 +2436,7 @@ const It = /* @__PURE__ */ g({
         r.dispose();
       }
     );
-    return B(() => {
+    return E(() => {
       n.value && n.value.subscribeElementChanges();
     }), L(() => {
       n.value && n.value.unsubscribeElementChanges();
@@ -2444,7 +2448,7 @@ const It = /* @__PURE__ */ g({
       X(r.$slots, "default")
     ], 2));
   }
-}), Bn = ["data-sv-drop-target-survey-element"], Pn = { class: "svc-fake-title" }, Rn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Vn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Ln = { class: "svc-question__top-actions" }, Fn = {
+}), En = ["data-sv-drop-target-survey-element"], Pn = { class: "svc-fake-title" }, Rn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Vn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Ln = { class: "svc-question__top-actions" }, Fn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
 }, Kn = { class: "svc-panel__placeholder_frame" }, Un = {
@@ -2463,7 +2467,7 @@ const It = /* @__PURE__ */ g({
     componentData: {}
   },
   setup(c) {
-    const t = c, e = E(), o = A(
+    const t = c, e = B(), o = A(
       () => t.createModel(),
       [() => t.componentName, () => t.componentData],
       (d) => {
@@ -2474,7 +2478,7 @@ const It = /* @__PURE__ */ g({
     );
     ee(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), B(() => {
+    }), E(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     });
     const r = (d) => {
@@ -2537,7 +2541,7 @@ const It = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(o).needToRenderContent ? (l(), i(f, { key: 1 }, [
+        s(o).needToRenderContent ? (l(), i(k, { key: 1 }, [
           v(s(u), {
             is: "sv-template-renderer",
             componentName: d.componentName,
@@ -2580,7 +2584,7 @@ const It = /* @__PURE__ */ g({
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, Bn)) : p("", !0);
+    ], 42, En)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2643,9 +2647,9 @@ const It = /* @__PURE__ */ g({
     element: {}
   },
   setup(c) {
-    return (t, e) => (l(), i(f, null, [
+    return (t, e) => (l(), i(k, null, [
       !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", On, [
-        t.model.allowEdit ? (l(), i(f, { key: 0 }, [
+        t.model.allowEdit ? (l(), i(k, { key: 0 }, [
           a("input", {
             type: "file",
             "aria-hidden": "true",
@@ -2742,7 +2746,7 @@ const It = /* @__PURE__ */ g({
     ), m = A(
       () => {
         var b;
-        return t.componentData ? new Ee(
+        return t.componentData ? new Be(
           e.value,
           r.value,
           d.value,
@@ -2806,7 +2810,7 @@ const It = /* @__PURE__ */ g({
     const t = c, e = $(
       () => t.componentData.element
     );
-    return k(() => e.value), (o, n) => (l(), i("div", el, [
+    return f(() => e.value), (o, n) => (l(), i("div", el, [
       a("div", ol, [
         v(s(u), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
@@ -2889,7 +2893,7 @@ const It = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(e).needToRenderContent ? (l(), i(f, { key: 1 }, [
+        s(e).needToRenderContent ? (l(), i(k, { key: 1 }, [
           v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
           s(e).isEmptyElement ? (l(), i("div", cl, [
             a("div", ul, [
@@ -2954,19 +2958,19 @@ const It = /* @__PURE__ */ g({
     componentData: {}
   },
   setup(c) {
-    const t = E(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), d = G(
+    const t = B(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), d = G(
       () => r.value,
       (b, y) => {
         b && t.value && b.setRootElement(t.value), y && y.setRootElement(void 0);
       }
     );
-    B(() => {
+    E(() => {
       t.value && r.value && r.value.setRootElement(t.value);
     }), L(() => {
       r.value.setRootElement(void 0);
     });
     const m = A(
-      () => new Be(o.value, n.value, r.value),
+      () => new Ee(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
       (b) => {
         b.dispose();
@@ -3038,7 +3042,7 @@ const It = /* @__PURE__ */ g({
       ])
     ], 42, yl));
   }
-}), wl = ["data-sv-drop-target-item-value"], fl = { class: "svc-image-item-value-wrapper__content" }, kl = ["accept"], Tl = {
+}), wl = ["data-sv-drop-target-item-value"], kl = { class: "svc-image-item-value-wrapper__content" }, fl = ["accept"], Tl = {
   key: 0,
   class: "svc-image-item-value__item"
 }, Dl = {
@@ -3054,7 +3058,7 @@ const It = /* @__PURE__ */ g({
     componentData: {}
   },
   setup(c) {
-    const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = E(), d = A(
+    const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = B(), d = A(
       () => {
         const b = new Pe(
           e.value,
@@ -3076,7 +3080,7 @@ const It = /* @__PURE__ */ g({
         height: b ? o.value.renderedImageHeight + "px" : void 0
       };
     });
-    return B(() => {
+    return E(() => {
       r.value && (d.value.itemsRoot = r.value);
     }), (b, y) => (l(), i("div", {
       onPointerdown: y[8] || (y[8] = (N) => s(d).onPointerDown(N)),
@@ -3089,15 +3093,15 @@ const It = /* @__PURE__ */ g({
         class: "svc-image-item-value-wrapper__ghost",
         style: K(m.value)
       }, null, 4),
-      a("div", fl, [
+      a("div", kl, [
         a("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(d).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, kl),
-        !s(d).isNew && !s(d).isUploading ? (l(), i(f, { key: 0 }, [
+        }, null, 8, fl),
+        !s(d).isNew && !s(d).isUploading ? (l(), i(k, { key: 0 }, [
           s(d).isNew ? p("", !0) : (l(), i("div", Tl, [
             v(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
@@ -3149,7 +3153,7 @@ const It = /* @__PURE__ */ g({
             ])
           ])) : p("", !0)
         ], 64)) : p("", !0),
-        s(d).isNew || s(d).isUploading ? (l(), i(f, { key: 1 }, [
+        s(d).isNew || s(d).isUploading ? (l(), i(k, { key: 1 }, [
           a("div", {
             class: "svc-image-item-value__item",
             onDragover: y[3] || (y[3] = (N) => s(d).onDragOver(N)),
@@ -3194,7 +3198,7 @@ const It = /* @__PURE__ */ g({
       ])
     ], 42, wl));
   }
-}), El = /* @__PURE__ */ g({
+}), Bl = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {}
@@ -3224,7 +3228,7 @@ const It = /* @__PURE__ */ g({
     });
     return (r, d) => (l(), h(s(u), V({ is: o.value }, n.value), null, 16, ["is"]));
   }
-}), Bl = ["accept"], Pl = /* @__PURE__ */ a("svg", null, [
+}), El = ["accept"], Pl = /* @__PURE__ */ a("svg", null, [
   /* @__PURE__ */ a("use", { "xlink:href": "#icon-image-48x48" })
 ], -1), Rl = [
   Pl
@@ -3237,10 +3241,10 @@ const It = /* @__PURE__ */ g({
     data: {}
   },
   setup(c) {
-    const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = E(), r = A(
+    const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = B(), r = A(
       () => new Re(e.value, null),
       [() => e.value]
-    ), d = E(), m = () => {
+    ), d = B(), m = () => {
       d.value = o.value.locLogo.renderedHtml;
     };
     return G(
@@ -3251,7 +3255,7 @@ const It = /* @__PURE__ */ g({
       {
         immediate: !0
       }
-    ), B(() => {
+    ), E(() => {
       n.value && (r.value.root = n.value);
     }), L(() => {
       r.value && (r.value.root = void 0);
@@ -3266,8 +3270,8 @@ const It = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Bl),
-      d.value ? p("", !0) : (l(), i(f, { key: 0 }, [
+      }, null, 8, El),
+      d.value ? p("", !0) : (l(), i(k, { key: 0 }, [
         s(r).allowEdit && !s(r).isUploading ? C((l(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
@@ -3330,7 +3334,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    k(() => t.model);
+    f(() => t.model);
     const e = $({
       get: () => t.model.filterString,
       set: (o) => {
@@ -3374,8 +3378,8 @@ const It = /* @__PURE__ */ g({
     const t = c, e = A(
       () => new Ve(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
-    ), o = E();
-    return B(() => {
+    ), o = B();
+    return E(() => {
       if (t.pageEditMode !== "bypage") {
         const n = o.value;
         e.value.attachToUI(n);
@@ -3410,7 +3414,7 @@ const It = /* @__PURE__ */ g({
         [s(D)]
       ]),
       a("div", null, [
-        (l(!0), i(f, null, R(s(e).visibleItems, (d) => (l(), h(s(u), {
+        (l(!0), i(k, null, R(s(e).visibleItems, (d) => (l(), h(s(u), {
           is: "svc-page-navigator-item",
           key: d.id,
           model: d
@@ -3431,7 +3435,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    k(() => t.model);
+    f(() => t.model);
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
@@ -3474,7 +3478,7 @@ const It = /* @__PURE__ */ g({
     return (n, r) => (l(), i("div", oa, [
       a("div", null, [
         a("div", sa, [
-          (l(!0), i(f, null, R(n.model.getRenderedItems(), (d) => (l(), i("div", {
+          (l(!0), i(k, null, R(n.model.getRenderedItems(), (d) => (l(), i("div", {
             key: d.value,
             class: _(n.model.getChoiceCss())
           }, [
@@ -3530,11 +3534,11 @@ const It = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return k(() => e.value), (r, d) => (l(), i("div", la, [
+    return f(() => e.value), (r, d) => (l(), i("div", la, [
       a("div", aa, [
         v(s(u), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
         a("div", ia, [
-          (l(!0), i(f, null, R(e.value.visibleChoices, (m) => (l(), i("div", {
+          (l(!0), i(k, null, R(e.value.visibleChoices, (m) => (l(), i("div", {
             key: m.value,
             class: "svc-question__dropdown-choice"
           }, [
@@ -3564,7 +3568,7 @@ const It = /* @__PURE__ */ g({
     componentData: {}
   },
   setup(c) {
-    const t = c, e = E(), o = A(
+    const t = c, e = B(), o = A(
       () => new oe(
         t.componentData.data,
         t.componentData.element,
@@ -3577,7 +3581,7 @@ const It = /* @__PURE__ */ g({
     );
     return ee(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), B(() => {
+    }), E(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), (n, r) => s(o) ? (l(), i("div", {
       key: 0,
@@ -3624,7 +3628,7 @@ const It = /* @__PURE__ */ g({
       ], 2)), [
         [s(D)]
       ]) : p("", !0),
-      s(o).element.isInteractiveDesignElement ? p("", !0) : (l(), i(f, { key: 1 }, [
+      s(o).element.isInteractiveDesignElement ? p("", !0) : (l(), i(k, { key: 1 }, [
         v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
         s(o).isEmptyElement ? (l(), i("div", ha, [
           a("div", Ca, w(s(o).placeholderText), 1)
@@ -3632,7 +3636,7 @@ const It = /* @__PURE__ */ g({
       ], 64))
     ], 42, da)) : p("", !0);
   }
-}), $a = { class: "svc-carry-forward-panel-wrapper" }, wa = { class: "svc-carry-forward-panel" }, fa = { class: "svc-carry-forward-panel__link" }, ka = /* @__PURE__ */ g({
+}), $a = { class: "svc-carry-forward-panel-wrapper" }, wa = { class: "svc-carry-forward-panel" }, ka = { class: "svc-carry-forward-panel__link" }, fa = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
@@ -3641,7 +3645,7 @@ const It = /* @__PURE__ */ g({
     return (t, e) => (l(), i("div", $a, [
       a("div", wa, [
         a("span", null, w(t.model.text) + w(" "), 1),
-        a("span", fa, [
+        a("span", ka, [
           v(s(u), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3660,7 +3664,7 @@ function ve(c) {
     void 0,
     c
   );
-  t("svc-tabbed-menu", Ze), t("svc-tabbed-menu-item-wrapper", Ye), t("svc-tabbed-menu-item", xe), t("svc-side-bar", to), t("svc-side-bar-default-header", io), t("svc-side-bar-page", ro), t("svc-tabs", _o), t("svc-tab-control", $o), t("svc-tab-button", Do), t("svc-property-grid-placeholder", Bo), t("svc-side-bar-header", Lo), t("svc-side-bar-property-grid-header", Go), t("svc-property-grid", mo), t("svc-object-selector", co), t("svc-search", Ol), t("svc-scroll", W), t("svc-switcher", ns), t("svc-action-button", Yo), t("svc-question-error", Wo), t("survey-embeddedsurvey", Js), t("sv-logic-operator", js), t("survey-linkvalue", Zs), t("survey-color", vt), t("color-item", mt), t("sv-boolean-switch", It), t("survey-fileedit", ht), t("survey-spinedit", wt), t("survey-textwithreset", le), t("survey-commentwithreset", le), t("survey-widget", Q), t("survey-simulator", is), t("svc-tab-preview", vs), t("svc-complete-page", _s), t("survey-results", Ts), t("survey-results-table-row", Ns), t("json-error-item", Ks), t("svc-tab-json-editor-textarea", As), t("svc-tab-json-editor-ace", Es), t("svc-tab-translation", ot), t("sd-translation-line-skeleton", at), t("svc-translate-from-action", it), t("svc-tab-logic", Qs), t("svc-tab-theme", ct), t("svc-toolbox", Ot), t("svc-toolbox-list", tn), t("svc-toolbox-category", sn), t("svc-toolbox-tool", Gt), t("svc-toolbox-item", Zt), t("svc-toolbox-item-group", Xt), t(ze, Lt), t("svc-tab-designer", gn), t("svc-page-navigator", Gl), t("svc-page-navigator-item", ea), t("svc-page", kn), t("svc-row", En), t("svc-add-new-question-btn", Dn), t("svc-add-question-type-selector", Mn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Xn), t("svc-image-question", Hn), t("svc-image-question-adorner", Jn), t("svc-matrix-cell", xn), t("svc-cell-question", sl), t("svc-cell-dropdown-question", ra), t("svc-question-editor-content", El), t("svc-logo-image", zl), t("svc-panel", bl), t("svc-item-value", $l), t("svc-image-item-value", Il), t("svc-dropdown-question", na), t("svc-dropdown-question-adorner", ta), t("svc-widget-question", qa), t("svc-question-banner", ka);
+  t("svc-tabbed-menu", Ze), t("svc-tabbed-menu-item-wrapper", Ye), t("svc-tabbed-menu-item", xe), t("svc-side-bar", to), t("svc-side-bar-default-header", io), t("svc-side-bar-page", ro), t("svc-tabs", _o), t("svc-tab-control", $o), t("svc-tab-button", Do), t("svc-property-grid-placeholder", Eo), t("svc-side-bar-header", Lo), t("svc-side-bar-property-grid-header", Go), t("svc-property-grid", mo), t("svc-object-selector", co), t("svc-search", Ol), t("svc-scroll", W), t("svc-switcher", ns), t("svc-action-button", Yo), t("svc-question-error", Wo), t("survey-embeddedsurvey", Js), t("sv-logic-operator", js), t("survey-linkvalue", Zs), t("survey-color", vt), t("color-item", mt), t("sv-boolean-switch", It), t("survey-fileedit", ht), t("survey-spinedit", wt), t("survey-textwithreset", le), t("survey-commentwithreset", le), t("survey-widget", Q), t("survey-simulator", is), t("svc-tab-preview", vs), t("svc-complete-page", _s), t("survey-results", Ts), t("survey-results-table-row", Ns), t("json-error-item", Ks), t("svc-tab-json-editor-textarea", As), t("svc-tab-json-editor-ace", Bs), t("svc-tab-translation", ot), t("sd-translation-line-skeleton", at), t("svc-translate-from-action", it), t("svc-tab-logic", Qs), t("svc-tab-theme", ct), t("svc-toolbox", Ot), t("svc-toolbox-list", tn), t("svc-toolbox-category", sn), t("svc-toolbox-tool", Gt), t("svc-toolbox-item", Zt), t("svc-toolbox-item-group", Xt), t(ze, Lt), t("svc-tab-designer", gn), t("svc-page-navigator", Gl), t("svc-page-navigator-item", ea), t("svc-page", fn), t("svc-row", Bn), t("svc-add-new-question-btn", Dn), t("svc-add-question-type-selector", Mn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Xn), t("svc-image-question", Hn), t("svc-image-question-adorner", Jn), t("svc-matrix-cell", xn), t("svc-cell-question", sl), t("svc-cell-dropdown-question", ra), t("svc-question-editor-content", Bl), t("svc-logo-image", zl), t("svc-panel", bl), t("svc-item-value", $l), t("svc-image-item-value", Il), t("svc-dropdown-question", na), t("svc-dropdown-question-adorner", ta), t("svc-widget-question", qa), t("svc-question-banner", fa);
 }
 ve(
   (c, t) => re.Instance.registerComponent(c, t)