survey-creator-vue 2.3.9 → 2.3.11

package/survey-creator-vue.es.js

@@ -1,8 +1,8 @@
-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 { useBase as w, SvComponent as c, key2ClickDirective as M, SurveyComponent as O, useQuestion as H, ComponentFactory as ie } from "survey-vue3-ui";
+import { defineComponent as g, computed as k, toRaw as _e, ref as P, onMounted as R, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as D, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as b, onUpdated as G, nextTick as re, withDirectives as h, toDisplayString as f, 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 De, ItemValueWrapperViewModel as Te, ImageItemValueWrapperViewModel as Ne, LogoImageViewModel as Me, PageNavigatorViewModel as Se, QuestionDropdownAdornerViewModel as Be, editableStringRendererName as Ie } from "survey-creator-core";
 import { CssClassBuilder as Ee, RendererFactory as ue, DropdownListModel as Pe } from "survey-core";
-const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ve = { class: "svc-top-bar" }, Ae = {
+const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ae = { class: "svc-top-bar" }, Ve = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
 }, ze = ["v-show"], Le = { class: "svc-creator__content-holder svc-flex-column" }, Fe = ["aria-labelledby", "id"], Ke = {
@@ -16,19 +16,19 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = $(() => _e(t.model)), o = I();
-    return f(
+  setup(u) {
+    const t = u, e = k(() => _e(t.model)), o = P();
+    return w(
       () => e.value,
       (n, r) => {
         r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
       }
-    ), P(() => {
+    ), R(() => {
       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" }),
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(D, { key: 0 }, [
+      v(s(c), { is: "survey-popup-modal" }),
       d("div", {
         class: m(e.value.getRootCss()),
         style: F(e.value.themeVariables),
@@ -36,7 +36,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ref: o
       }, [
         d("div", null, [
-          v(s(u), { is: "sv-svg-bundle" })
+          v(s(c), { is: "sv-svg-bundle" })
         ]),
         d("div", {
           class: m(["svc-full-container svc-creator__area svc-flex-column", {
@@ -49,9 +49,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }])
           }, [
             d("div", Re, [
-              d("div", Ve, [
-                e.value.showTabs ? (a(), i("div", Ae, [
-                  v(s(u), {
+              d("div", Ae, [
+                e.value.showTabs ? (a(), i("div", Ve, [
+                  v(s(c), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
                   }, null, 8, ["model"])
@@ -61,7 +61,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.showToolbar
                 }, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "sv-action-bar",
                     model: e.value.toolbar
                   }, null, 8, ["model"])
@@ -73,7 +73,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 }])
               }, [
                 d("div", Le, [
-                  (a(!0), i(T, null, V(e.value.tabs, (l) => (a(), i(T, null, [
+                  (a(!0), i(D, null, V(e.value.tabs, (l) => (a(), i(D, null, [
                     e.value.viewType == l.id && l.visible ? (a(), i("div", {
                       role: "tabpanel",
                       class: m(["svc-creator-tab", {
@@ -83,7 +83,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                       "aria-labelledby": "tab-" + l.id,
                       id: "scrollableDiv-" + l.id
                     }, [
-                      v(s(u), {
+                      v(s(c), {
                         is: l.componentContent,
                         model: l.data.model
                       }, null, 8, ["is", "model"])
@@ -96,14 +96,14 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
                 }, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "sv-action-bar",
                     model: e.value.footerToolbar
                   }, null, 8, ["model"])
                 ], 8, Ue)
               ])) : p("", !0)
             ]),
-            e.value.sidebar ? (a(), y(s(u), {
+            e.value.sidebar ? (a(), b(s(c), {
               key: 0,
               is: "svc-side-bar",
               model: e.value.sidebar
@@ -115,7 +115,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               innerHTML: e.value.licenseText
             }, null, 8, He)
           ])),
-          v(s(u), {
+          v(s(c), {
             is: "sv-notifier",
             model: e.value.notifier
           }, null, 8, ["model"])
@@ -128,11 +128,11 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = I();
-    return f(() => t.model), G(() => {
+  setup(u) {
+    const t = u, e = P();
+    return w(() => t.model), G(() => {
       t.model.initResponsivityManager(e.value);
-    }), P(() => {
+    }), R(() => {
       t.model.initResponsivityManager(e.value);
     }), K(() => {
       t.model.resetResponsivityManager();
@@ -143,7 +143,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       role: "tablist",
       style: F(o.model.getRootStyle())
     }, [
-      (a(!0), i(T, null, V(o.model.renderedActions, (r) => (a(), y(s(u), {
+      (a(!0), i(D, null, V(o.model.renderedActions, (r) => (a(), b(s(c), {
         key: r.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: r
@@ -155,9 +155,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = I(), e = c;
-    return f(() => e.item), P(() => {
+  setup(u) {
+    const t = P(), e = u;
+    return w(() => e.item), R(() => {
       const o = e.item;
       o.updateModeCallback = (n, r) => {
         o.mode = n, re(() => r(n, t.value));
@@ -171,7 +171,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref: t
     }, [
       d("div", We, [
-        v(s(u), {
+        v(s(c), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
         }, null, 8, ["is", "item"])
@@ -183,9 +183,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.item), (e, o) => C((a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.item), (e, o) => h((a(), i("div", {
       role: "tab",
       id: "tab-" + e.item.id,
       "aria-selected": e.item.active,
@@ -197,8 +197,8 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       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), {
+      }, f(e.item.title), 3)) : p("", !0),
+      e.item.hasIcon ? (a(), b(s(c), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
@@ -207,7 +207,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         title: e.item.tooltip || e.item.title
       }, null, 8, ["iconName", "class", "title"])) : p("", !0)
     ], 10, Je)), [
-      [s(N)]
+      [s(M)]
     ]);
   }
 }), Xe = { class: "svc-flex-row svc-side-bar__wrapper" }, Ye = { class: "svc-side-bar__container-wrapper" }, xe = { class: "svc-side-bar__container-content" }, eo = /* @__PURE__ */ g({
@@ -215,34 +215,34 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = I();
-    return f(() => t.model), P(() => {
+  setup(u) {
+    const t = u, e = P();
+    return w(() => t.model), R(() => {
       t.model.initResizeManager(e.value);
     }), K(() => {
       t.model.resetResizeManager();
-    }), (o, n) => C((a(), i("div", {
+    }), (o, n) => h((a(), i("div", {
       class: m(["svc-side-bar", o.model.rootCss])
     }, [
-      C(d("div", {
+      h(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, [
+        h(d("div", Ye, [
           d("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
             ref: e
           }, [
-            v(s(u), {
+            v(s(c), {
               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), {
+              (a(!0), i(D, null, V(o.model.pages, (r, l) => (a(), b(s(c), {
                 key: l,
                 is: "svc-side-bar-page",
                 model: r
@@ -252,7 +252,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ], 512), [
           [Q, o.model.renderContainer]
         ]),
-        o.model.sideAreaComponentName ? (a(), y(s(u), {
+        o.model.sideAreaComponentName ? (a(), b(s(c), {
           key: 0,
           is: o.model.sideAreaComponentName,
           model: o.model.sideAreaComponentData
@@ -270,16 +270,16 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", oo, [
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", oo, [
       d("div", so, [
-        v(s(u), {
+        v(s(c), {
           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)
+      e.model.title ? (a(), i("div", to, f(e.model.title), 1)) : p("", !0)
     ]));
   }
 }), ao = /* @__PURE__ */ g({
@@ -287,9 +287,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => e.model.visible ? (a(), y(s(u), {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => e.model.visible ? (a(), b(s(c), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
@@ -300,9 +300,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => e.model.isVisible ? (a(), y(s(u), {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => e.model.isVisible ? (a(), b(s(c), {
       key: 0,
       is: "sv-list",
       model: e.model.list
@@ -313,16 +313,16 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.rootCss)
     }, [
-      v(s(u), {
+      v(s(c), {
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
-      e.model.survey ? (a(), y(s(O), {
+      e.model.survey ? (a(), b(s(O), {
         key: 0,
         survey: e.model.survey
       }, null, 8, ["survey"])) : p("", !0)
@@ -333,9 +333,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   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), {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(!0), i(D, null, V(e.model.actions, (n, r) => (a(), b(s(c), {
       key: r,
       is: "svc-tab-button",
       model: n
@@ -348,23 +348,23 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.sideBarClassName)
     }, [
       d("div", co, [
         d("div", uo, [
-          v(s(u), {
+          v(s(c), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
           }, null, 8, ["model"])
         ]),
         po,
-        v(s(u), { is: "sv-scroll" }, {
+        v(s(c), { is: "sv-scroll" }, {
           default: X(() => [
             d("div", vo, [
-              v(s(u), {
+              v(s(c), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
               }, null, 8, ["model"])
@@ -375,7 +375,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ]),
       d("div", mo, [
         d("div", _o, [
-          v(s(u), {
+          v(s(c), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
           }, null, 8, ["model"])
@@ -391,17 +391,17 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
-      C((a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
+      h((a(), i("div", {
         class: m(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
         d("div", ho, [
           d("div", Co, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
               size: "auto"
@@ -409,23 +409,23 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           ])
         ])
       ], 10, yo)), [
-        [s(N), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
+        [s(M), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ])) : p("", !0);
   }
-}), $o = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, fo = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, To = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
+}), $o = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, fo = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, Do = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__gap" }),
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
-], -1), Do = /* @__PURE__ */ g({
+], -1), To = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
-  setup(c) {
+  setup(u) {
     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)
+        d("span", fo, f(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        d("span", wo, f(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      To
+      Do
     ]));
   }
 }), No = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Mo = {
@@ -439,38 +439,38 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   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)),
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", No, [
+      e.model.subTitle ? p("", !0) : (a(), i("div", Mo, f(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)
+        d("span", Bo, f(e.model.title), 1),
+        d("span", Io, f(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({
+}), Po = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Ro = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Ao = { class: "svc-sidebar__header-content" }, Vo = { 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, [
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", Po, [
       d("div", Ro, [
-        d("div", Vo, [
-          C((a(), i("div", {
+        d("div", Ao, [
+          h((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)
+            d("div", Vo, [
+              d("span", zo, f(e.model.title), 1),
+              d("span", Lo, f(e.model.tooltip), 1)
             ])
           ], 2)), [
-            [s(N), { processEsc: !1 }]
+            [s(M), { processEsc: !1 }]
           ]),
-          v(s(u), {
+          v(s(c), {
             is: "sv-popup",
             model: e.model.popupModel
           }, null, 8, ["model"])
@@ -486,9 +486,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     cssClasses: {},
     element: {}
   },
-  setup(c) {
+  setup(u) {
     return (t, e) => (a(), i("div", { key: t.errorKey }, [
-      v(s(u), {
+      v(s(c), {
         is: "sv-svg-icon",
         class: m(t.cssClasses.error.icon),
         iconName: "icon-alert_24x24",
@@ -499,7 +499,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-string",
           locString: t.error.locText
         }, null, 8, ["locString"])
@@ -518,53 +518,53 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     click: { type: Function },
     iconName: {}
   },
-  setup(c) {
-    const t = c, e = (n) => {
+  setup(u) {
+    const t = u, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
     }, o = () => new Ee().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
-    return (n, r) => (a(), i(T, null, [
-      n.iconName ? p("", !0) : (a(), i(T, { key: 0 }, [
+    return (n, r) => (a(), i(D, null, [
+      n.iconName ? p("", !0) : (a(), i(D, { 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", {
+        }, f(n.text), 11, Uo)) : p("", !0),
+        h((a(), i("span", {
           role: "button",
           class: m(["svc-action-button", o()]),
           onClick: e,
           title: n.title
         }, [
-          ge(k(n.text), 1)
+          ge(f(n.text), 1)
         ], 10, Qo)), [
-          [s(N)]
+          [s(M)]
         ])
       ], 64)),
-      n.iconName ? (a(), i(T, { key: 1 }, [
+      n.iconName ? (a(), i(D, { key: 1 }, [
         n.disabled ? (a(), i("span", {
           key: 0,
           class: m(o()),
           title: n.title
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
         ], 10, Ho)) : p("", !0),
-        C((a(), i("span", {
+        h((a(), i("span", {
           role: "button",
           onClick: e,
           class: m(o()),
           title: n.title
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
         ], 10, Oo)), [
-          [s(N)]
+          [s(M)]
         ])
       ], 64)) : p("", !0)
     ], 64));
@@ -582,9 +582,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.item), (e, o) => C((a(), i("button", {
+  setup(u) {
+    const t = u;
+    return w(() => t.item), (e, o) => h((a(), i("button", {
       class: m(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -602,9 +602,9 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       d("div", {
         class: m(e.item.getSwitcherIconCss())
       }, Jo, 2),
-      e.item.hasTitle ? (a(), i("span", Zo, k(e.item.title), 1)) : p("", !0)
+      e.item.hasTitle ? (a(), i("span", Zo, f(e.item.title), 1)) : p("", !0)
     ], 42, Wo)), [
-      [s(N), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
+      [s(M), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
   }
 }), xo = {
@@ -615,10 +615,10 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.model);
-    const e = $(() => t.model.simulatorFrame), o = () => {
+  setup(u) {
+    const t = u;
+    w(() => t.model);
+    const e = k(() => t.model.simulatorFrame), o = () => {
       t.model.device !== "desktop" && t.model.activateZoom();
     }, n = () => {
       t.model.device !== "desktop" && t.model.deactivateZoom();
@@ -630,7 +630,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onMouseout: l[2] || (l[2] = (_) => n())
     }, [
       r.model.hasFrame ? p("", !0) : (a(), i("div", xo, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-widget",
           model: r.model.survey
         }, null, 8, ["model"])
@@ -653,7 +653,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           })
         }, [
           d("div", es, [
-            v(s(u), {
+            v(s(c), {
               is: "survey-widget",
               model: r.model.survey
             }, null, 8, ["model"])
@@ -669,15 +669,15 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     placeholderTitleText: {},
     placeholderDescriptionText: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     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)
+        d("div", ns, f(t.placeholderTitleText), 1),
+        d("div", as, f(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
@@ -689,14 +689,14 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (a(), y(j, {
+      e.model.survey.isEmpty ? (a(), b(j, {
         key: 0,
         name: "preview",
         placeholderTitleText: e.model.placeholderTitleText,
@@ -707,18 +707,18 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: "svc-plugin-tab__content",
         onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), y(s(u), {
+        e.model.showResults ? (a(), b(s(c), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
       e.model.isPageToolbarVisible ? (a(), i("div", ls, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
@@ -731,30 +731,30 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.model.testAgainAction);
-    return f(() => e.value), (o, n) => C((a(), i("div", {
+  setup(u) {
+    const t = u, e = k(() => t.model.testAgainAction);
+    return w(() => e.value), (o, n) => h((a(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      d("span", rs, k(e.value.title), 1)
+      d("span", rs, f(e.value.title), 1)
     ])), [
-      [s(N)]
+      [s(M)]
     ]);
   }
 });
-function z(c, t, e) {
+function z(u, t, e) {
   const o = be(), n = W(
     t.map((r) => () => r()),
     () => {
-      o.value = c();
+      o.value = u();
     },
     {
       immediate: !0
     }
   );
-  return f(() => o.value, void 0, e), Y(() => {
+  return w(() => o.value, void 0, e), Y(() => {
     n();
   }), o;
 }
@@ -766,24 +766,24 @@ const cs = {
   props: {
     survey: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => t.survey ? new ye(t.survey) : void 0,
       [() => t.survey]
     );
     return (o, n) => s(e) ? (a(), i("div", cs, [
       d("div", us, [
         d("div", ps, [
-          d("div", vs, k(s(e).surveyResultsText), 1),
+          d("div", vs, f(s(e).surveyResultsText), 1),
           d("div", ms, [
-            v(s(u), {
+            v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
               click: s(e).selectTableClick,
               disabled: !1,
               selected: s(e).isTableSelected
             }, null, 8, ["text", "click", "selected"]),
-            v(s(u), {
+            v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsJsonText,
               click: s(e).selectJsonClick,
@@ -792,21 +792,21 @@ const cs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        C(d("div", _s, [
-          d("div", null, k(s(e).resultText), 1)
+        h(d("div", _s, [
+          d("div", null, f(s(e).resultText), 1)
         ], 512), [
           [Q, s(e).resultViewType === "text"]
         ]),
-        C(d("div", gs, [
+        h(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("th", ys, f(s(e).resultsTitle), 1),
+                d("th", hs, f(s(e).resultsDisplayValue), 1)
               ])
             ]),
             d("tbody", null, [
-              (a(!0), i(T, null, V(s(e).resultData, (r, l) => (a(), y(s(u), {
+              (a(!0), i(D, null, V(s(e).resultData, (r, l) => (a(), b(s(c), {
                 is: "survey-results-table-row",
                 model: r,
                 key: l
@@ -824,10 +824,10 @@ const cs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i(T, null, [
-      C((a(), i("tr", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i(D, null, [
+      h((a(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
       }, [
@@ -840,50 +840,50 @@ const cs = {
             class: m(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
             style: F({ left: e.model.markerMargin })
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-expand_16x16",
               size: 16
             })
           ], 6)) : p("", !0),
-          e.model.question ? (a(), y(s(u), {
+          e.model.question ? (a(), b(s(c), {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (a(), i("span", qs, k(e.model.title), 1))
+          }, null, 8, ["locString"])) : (a(), i("span", qs, f(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)
+        }, f(e.model.getString(e.model.displayValue)), 3)
       ])), [
-        [s(N)]
+        [s(M)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (a(!0), i(T, { key: 0 }, V(e.model.data, (n, r) => (a(), y(s(u), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), i(D, { key: 0 }, V(e.model.data, (n, r) => (a(), b(s(c), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
-}), ks = { class: "svc-creator-tab__content" }, fs = { class: "svc-json-editor-tab__content" }, ws = { class: "svc-json-editor-tab__errros_list" }, Ts = /* @__PURE__ */ g({
+}), ks = { class: "svc-creator-tab__content" }, fs = { class: "svc-json-editor-tab__content" }, ws = { class: "svc-json-editor-tab__errros_list" }, Ds = /* @__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, [
+  setup(u) {
+    const t = u, e = P();
+    return w(() => t.model), R(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", 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), {
+        h(d("div", ws, [
+          v(s(c), {
             is: "sv-list",
             model: o.model.errorList
           }, null, 8, ["model"])
@@ -893,19 +893,19 @@ const cs = {
       ])
     ]));
   }
-}), 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({
+}), Ts = { 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(() => {
+  setup(u) {
+    const t = u, e = P(), o = t.model;
+    return o.canShowErrors = !1, w(() => t.model), R(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (a(), i("div", Ds, [
+    }), (n, r) => (a(), i("div", Ts, [
       d("div", Ns, [
-        C(d("textarea", {
+        h(d("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
           disabled: s(o).readOnly,
@@ -917,8 +917,8 @@ const cs = {
       `, 40, Ms), [
           [de, s(o).text]
         ]),
-        C(d("div", Ss, [
-          v(s(u), {
+        h(d("div", Ss, [
+          v(s(c), {
             is: "sv-list",
             model: s(o).errorList
           }, null, 8, ["model"])
@@ -933,14 +933,14 @@ const cs = {
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.item);
+  setup(u) {
+    const t = u;
+    w(() => t.item);
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
-    return (o, n) => (a(), i(T, null, [
-      v(s(u), {
+    return (o, n) => (a(), i(D, null, [
+      v(s(c), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
@@ -948,12 +948,12 @@ const cs = {
       }, null, 8, ["iconName", "size"]),
       d("div", Is, [
         d("div", Es, [
-          v(s(u), {
+          v(s(c), {
             is: "survey-string",
             locString: o.item.locTitle
           }, null, 8, ["locString"])
         ]),
-        o.item.data.showFixButton ? C((a(), i("button", {
+        o.item.data.showFixButton ? h((a(), i("button", {
           key: 0,
           type: "button",
           onClick: e,
@@ -961,41 +961,41 @@ const cs = {
           "aria-label": o.item.data.fixButtonTitle,
           class: "svc-json-error__fix-button"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
         ], 8, Ps)), [
-          [s(N)]
+          [s(M)]
         ]) : p("", !0)
       ])
     ], 64));
   }
-}), Vs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
+}), As = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.model);
+  setup(u) {
+    const t = u;
+    w(() => t.model);
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
-    return (o, n) => C((a(), i("div", {
+    return (o, n) => h((a(), i("div", {
       role: "button",
       class: m(["svc-logic-tab__content-action svc-btn", {
         "svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
       }]),
       onClick: e
     }, [
-      d("span", Vs, k(o.model.title), 1)
+      d("span", As, f(o.model.title), 1)
     ], 2)), [
-      [s(N)]
+      [s(M)]
     ]);
   }
-}), As = { class: "svc-creator-tab__content" }, zs = {
+}), Vs = { class: "svc-creator-tab__content" }, zs = {
   key: 1,
   class: "svc-logic-tab__content-empty"
 }, Ls = /* @__PURE__ */ g({
@@ -1003,17 +1003,17 @@ const cs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", As, [
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", Vs, [
       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 }, [
+        e.model.hasItems ? (a(), i(D, { key: 0 }, [
           v(s(O), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
-          e.model.readOnly ? p("", !0) : (a(), y(te, {
+          e.model.readOnly ? p("", !0) : (a(), b(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
@@ -1024,7 +1024,7 @@ const cs = {
             placeholderTitleText: e.model.placeholderTitleText,
             placeholderDescriptionText: e.model.placeholderDescriptionText
           }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-          e.model.readOnly ? p("", !0) : (a(), y(te, {
+          e.model.readOnly ? p("", !0) : (a(), b(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
@@ -1043,8 +1043,8 @@ const Us = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = $(() => t.question.dropdownListModel ?? new Pe(t.question));
+  setup(u) {
+    const t = u, e = P(), o = k(() => t.question.dropdownListModel ?? new Pe(t.question));
     H(t, e, (l) => {
       he(l);
     });
@@ -1058,7 +1058,7 @@ const Us = /* @__PURE__ */ g({
     return (l, _) => (a(), i("div", {
       class: m(l.question.cssClasses.selectWrapper)
     }, [
-      l.question.isReadOnly ? p("", !0) : (a(), i(T, { key: 0 }, [
+      l.question.isReadOnly ? p("", !0) : (a(), i(D, { key: 0 }, [
         d("div", {
           class: m(l.question.getControlClass()),
           onClick: n,
@@ -1079,14 +1079,14 @@ const Us = /* @__PURE__ */ g({
           d("div", {
             class: m(l.question.cssClasses.controlValue)
           }, [
-            l.question.locReadOnlyText ? (a(), y(s(u), {
+            l.question.locReadOnlyText ? (a(), b(s(c), {
               key: 0,
               is: "survey-string",
               locString: l.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2)
         ], 42, Fs),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: l.question.popupModel
         }, null, 8, ["model"])
@@ -1097,7 +1097,7 @@ const Us = /* @__PURE__ */ g({
         class: m(l.question.getControlClass()),
         id: l.question.inputId
       }, [
-        l.question.locReadOnlyText ? (a(), y(s(u), {
+        l.question.locReadOnlyText ? (a(), b(s(c), {
           key: 0,
           is: "survey-string",
           locString: l.question.locReadOnlyText
@@ -1110,11 +1110,11 @@ const Us = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I();
+  setup(u) {
+    const t = u, e = P();
     H(t, e);
-    const o = $(() => t.question.embeddedSurvey);
-    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), y(s(u), {
+    const o = k(() => t.question.embeddedSurvey);
+    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), b(s(c), {
       key: 0,
       is: "sv-page",
       page: o.value.currentPage,
@@ -1127,10 +1127,10 @@ const Us = /* @__PURE__ */ g({
   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), {
+  setup(u) {
+    const t = u, e = P(), o = ce.getString("pe.clear");
+    return H(t, e), (n, r) => (a(), i(D, null, [
+      v(s(c), {
         is: "svc-action-button",
         text: n.question.linkValueText,
         click: n.question.doLinkClick.bind(n.question),
@@ -1140,7 +1140,7 @@ const Us = /* @__PURE__ */ g({
         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), {
+      !n.question.isReadOnly && n.question.showClear ? (a(), b(s(c), {
         key: 0,
         is: "svc-action-button",
         text: s(o),
@@ -1158,12 +1158,12 @@ const Us = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
-      e.model.isEmpty ? (a(), y(j, {
+      e.model.isEmpty ? (a(), b(j, {
         key: 0,
         name: "translation",
         placeholderTitleText: e.model.placeholderTitleText,
@@ -1185,13 +1185,13 @@ const Us = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), Zs = (c, t) => {
-  const e = c.__vccOpts || c;
+}), Zs = (u, t) => {
+  const e = u.__vccOpts || u;
   for (const [o, n] of t)
     e[o] = n;
   return e;
 }, Xs = {}, Ys = { class: "sd-translation-line-skeleton" };
-function xs(c, t) {
+function xs(u, t) {
   return a(), i("div", Ys);
 }
 const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
@@ -1199,14 +1199,14 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     item: {}
   },
-  setup(c) {
+  setup(u) {
     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), {
+      }, f(t.item.data.additionalTitle), 3),
+      v(s(c), {
         is: "sv-action-bar-item-dropdown",
         item: t.item
       }, null, 8, ["item"])
@@ -1223,32 +1223,32 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (a(), y(j, {
+      e.model.survey.isEmpty ? (a(), b(j, {
         key: 0,
         name: "theme",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
       e.model.survey.isEmpty ? p("", !0) : (a(), i("div", st, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), y(s(u), {
+        e.model.showResults ? (a(), b(s(c), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
       e.model.isPageToolbarVisible ? (a(), i("div", tt, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
@@ -1260,8 +1260,8 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    return H(c, I()), (e, o) => (a(), i("div", {
+  setup(u) {
+    return H(u, P()), (e, o) => (a(), i("div", {
       class: m(e.question.cssClasses.root),
       onKeydown: o[5] || (o[5] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
@@ -1270,7 +1270,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         class: m(e.question.getSwatchCss()),
         style: F(e.question.getSwatchStyle())
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: e.question.cssClasses.swatchIcon,
           size: "auto"
@@ -1311,17 +1311,17 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         value: e.question.renderedValue,
         class: m(e.question.cssClasses.control)
       }, null, 42, lt),
-      e.question.showDropdownAction ? (a(), i(T, { key: 0 }, [
+      e.question.showDropdownAction ? (a(), i(D, { key: 0 }, [
         d("div", {
           "aria-hidden": "true",
           class: m(e.question.cssClasses.choicesButtonWrapper)
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-action-bar-item",
             item: e.question.dropdownAction
           }, null, 8, ["item"])
         ], 2),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: e.question.dropdownAction.popupModel
         }, null, 8, ["model"])
@@ -1334,16 +1334,16 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
     model: {},
     item: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.item);
+  setup(u) {
+    const t = u;
+    w(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
-    return (o, n) => (a(), i(T, null, [
+    return (o, n) => (a(), i(D, null, [
       d("span", {
         class: "spg-color-editor__color-swatch",
         style: F(e())
       }, null, 4),
-      v(s(u), {
+      v(s(c), {
         is: "survey-string",
         locString: o.item.locTitle
       }, null, 8, ["locString"])
@@ -1354,9 +1354,9 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = I();
-    return H(c, t), (o, n) => (a(), i("div", {
+  setup(u) {
+    const t = P();
+    return H(u, t), (o, n) => (a(), i("div", {
       class: m(o.question.cssClasses.root),
       onDragenter: n[5] || (n[5] = //@ts-ignore
       (...r) => o.question.onDragEnter && o.question.onDragEnter(...r)),
@@ -1401,36 +1401,36 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
       d("div", {
         class: m(o.question.cssClasses.buttonsContainer)
       }, [
-        C((a(), i("button", {
+        h((a(), i("button", {
           title: o.question.clearButtonCaption,
           class: m(o.question.cssClasses.clearButton),
           disabled: o.question.getIsClearButtonDisabled(),
           onClick: n[3] || (n[3] = //@ts-ignore
           (...r) => o.question.doClean && o.question.doClean(...r))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.clearButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
         ], 10, ut)), [
-          [s(N)]
+          [s(M)]
         ]),
-        C((a(), i("label", {
+        h((a(), i("label", {
           class: m(o.question.getChooseButtonCss()),
           for: o.question.inputId,
           "aria-label": o.question.chooseButtonCaption,
           onClick: n[4] || (n[4] = //@ts-ignore
           (...r) => o.question.chooseFiles && o.question.chooseFiles(...r))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.chooseButtonIcon,
             size: "auto",
             title: o.question.chooseButtonCaption
           }, null, 8, ["iconName", "title"])
         ], 10, pt)), [
-          [s(N)]
+          [s(M)]
         ])
       ], 2)
     ], 34));
@@ -1440,8 +1440,8 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    return H(c, I()), (e, o) => (a(), i("div", {
+  setup(u) {
+    return H(u, P()), (e, o) => (a(), i("div", {
       class: m(e.question.cssClasses.root),
       onKeydown: o[18] || (o[18] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
@@ -1494,7 +1494,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
@@ -1518,7 +1518,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
@@ -1532,15 +1532,15 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = () => "survey-" + t.question.wrappedQuestionTemplate;
-    return H(t, I()), f(() => {
+  setup(u) {
+    const t = u, e = () => "survey-" + t.question.wrappedQuestionTemplate;
+    return H(t, P()), w(() => {
       var o;
       return (o = t.question) == null ? void 0 : o.resetValueAdorner;
     }), (o, n) => (a(), i("div", {
       class: m(o.question.getRootClass())
     }, [
-      v(s(u), {
+      v(s(c), {
         is: e(),
         question: o.question
       }, null, 8, ["is", "question"]),
@@ -1551,7 +1551,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         (...r) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...r)),
         title: o.question.resetValueAdorner.caption
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
@@ -1578,10 +1578,10 @@ const wt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I(null);
+  setup(u) {
+    const t = u, e = P(null);
     H(t, e);
-    const o = $({
+    const o = k({
       get() {
         return t.question.value;
       },
@@ -1601,18 +1601,18 @@ const wt = /* @__PURE__ */ g({
       "aria-errormessage": n.question.a11y_input_ariaErrormessage,
       onClick: r[0] || (r[0] = (l) => o.value = !o.value)
     }, [
-      C((a(), i("div", {
+      h((a(), i("div", {
         class: m(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
       }, $t, 2)), [
-        [s(N), { disableTabStop: !0 }]
+        [s(M), { disableTabStop: !0 }]
       ]),
       d("div", kt, [
         d("div", {
           class: "spg-boolean-switch__title",
           id: n.question.labelRenderedAriaID
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "survey-string",
             locString: n.question.locTitle
           }, null, 8, ["locString"])
@@ -1620,7 +1620,7 @@ const wt = /* @__PURE__ */ g({
       ])
     ], 8, ht));
   }
-}), Tt = { class: "svc-string-editor__content" }, Dt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Nt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Mt = { class: "svc-string-editor__input" }, St = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], Bt = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], It = {
+}), Dt = { class: "svc-string-editor__content" }, Tt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Nt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Mt = { class: "svc-string-editor__input" }, St = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], Bt = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], It = {
   key: 0,
   class: "svc-string-editor__error"
 }, Et = /* @__PURE__ */ g({
@@ -1628,79 +1628,79 @@ const wt = /* @__PURE__ */ g({
   props: {
     locString: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = I(), r = I(), l = z(
+  setup(u) {
+    const t = u, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = P(), r = P(), l = z(
       () => {
-        const h = new Ce(
+        const y = new Ce(
           e.value,
           o.value
         );
-        return h.setLocString(e.value), h.blurEditor = () => {
+        return y.setLocString(e.value), y.blurEditor = () => {
           n.value && (n.value.blur(), n.value.spellcheck = !1);
-        }, h.getEditorElement = () => n.value, setTimeout(() => h.afterRender()), h;
+        }, y.getEditorElement = () => n.value, setTimeout(() => y.afterRender()), y;
       },
       [() => o.value, () => e.value],
-      (h) => {
-        h && (h.blurEditor = void 0, h.getEditorElement = void 0, h.dispose());
+      (y) => {
+        y && (y.blurEditor = void 0, y.getEditorElement = void 0, y.dispose());
       }
-    ), _ = $(() => {
-      var h;
-      return (h = l.value) == null ? void 0 : h.errorText;
-    }), q = $(() => {
-      var h;
-      return (h = l.value) == null ? void 0 : h.className(e.value.renderedHtml);
-    }), b = $(() => {
-      var h;
-      return (h = l.value) == null ? void 0 : h.placeholder;
-    }), w = $(() => {
-      var h;
-      return (h = l.value) == null ? void 0 : h.contentEditable;
-    }), E = $(() => {
-      var h;
-      return (h = l.value) == null ? void 0 : h.characterCounter;
-    }), R = $(
+    ), _ = k(() => {
+      var y;
+      return (y = l.value) == null ? void 0 : y.errorText;
+    }), N = k(() => {
+      var y;
+      return (y = l.value) == null ? void 0 : y.className(e.value.renderedHtml);
+    }), $ = k(() => {
+      var y;
+      return (y = l.value) == null ? void 0 : y.placeholder;
+    }), q = k(() => {
+      var y;
+      return (y = l.value) == null ? void 0 : y.contentEditable;
+    }), C = k(() => {
+      var y;
+      return (y = l.value) == null ? void 0 : y.characterCounter;
+    }), I = k(
       () => {
-        var h;
-        return (h = l.value) == null ? void 0 : h.showCharacterCounter;
+        var y;
+        return (y = l.value) == null ? void 0 : y.showCharacterCounter;
       }
-    ), L = $(
+    ), L = k(
       () => {
-        var h;
-        return (h = l.value) == null ? void 0 : h.getCharacterCounterClass;
+        var y;
+        return (y = l.value) == null ? void 0 : y.getCharacterCounterClass;
       }
-    ), J = (h) => {
-      var D, B;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (D = l.value) == null || D.onBlur(h), (B = l.value) == null ? void 0 : B.errorText;
-    }, U = (h) => {
-      var D;
-      (D = l.value) == null || D.onFocus(h);
-    }, ve = (h) => {
-      var D;
-      (D = l.value) == null || D.onPaste(h);
-    }, se = (h) => {
-      var D, B;
-      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (B = l.value) == null || B.onClick(h);
+    ), J = (y) => {
+      var T, E;
+      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = l.value) == null || T.onBlur(y), (E = l.value) == null ? void 0 : E.errorText;
+    }, U = (y) => {
+      var T;
+      (T = l.value) == null || T.onFocus(y);
+    }, ve = (y) => {
+      var T;
+      (T = l.value) == null || T.onPaste(y);
+    }, se = (y) => {
+      var T, E;
+      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (E = l.value) == null || E.onClick(y);
     }, Z = () => {
       r.value = e.value.renderedHtml;
     }, me = W(
       () => e.value,
-      (h, D) => {
-        D && h.onStringChanged.remove(Z), h && (h.onStringChanged.add(Z), Z());
+      (y, T) => {
+        T && y.onStringChanged.remove(Z), y && (y.onStringChanged.add(Z), Z());
       },
       {
         immediate: !0
       }
     );
-    return P(() => {
-      var h;
-      e.value.__isEditing && ((h = n.value) == null || h.focus());
+    return R(() => {
+      var y;
+      e.value.__isEditing && ((y = n.value) == null || y.focus());
     }), K(() => {
       me(), e.value.onStringChanged.remove(Z);
-    }), (h, D) => (a(), i("span", {
-      class: m(q.value)
+    }), (y, T) => (a(), i("span", {
+      class: m(N.value)
     }, [
-      d("span", Tt, [
-        Dt,
+      d("span", Dt, [
+        Tt,
         Nt,
         d("span", Mt, [
           e.value.hasHtml ? p("", !0) : (a(), i("span", {
@@ -1711,46 +1711,46 @@ const wt = /* @__PURE__ */ g({
             onFocus: U,
             onPaste: ve,
             onBlur: J,
-            onInput: D[0] || (D[0] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onInput) && ((S = s(l)) == null ? void 0 : S.onInput(...B));
+            onInput: T[0] || (T[0] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onInput) && ((B = s(l)) == null ? void 0 : B.onInput(...E));
             }),
-            onBeforeinput: D[1] || (D[1] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onBeforeInput) && ((S = s(l)) == null ? void 0 : S.onBeforeInput(...B));
+            onBeforeinput: T[1] || (T[1] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onBeforeInput) && ((B = s(l)) == null ? void 0 : B.onBeforeInput(...E));
             }),
-            onKeydown: D[2] || (D[2] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onKeyDown) && ((S = s(l)) == null ? void 0 : S.onKeyDown(...B));
+            onKeydown: T[2] || (T[2] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
             }),
-            onKeyup: D[3] || (D[3] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onKeyUp) && ((S = s(l)) == null ? void 0 : S.onKeyUp(...B));
+            onKeyup: T[3] || (T[3] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
             }),
-            onCompositionstart: D[4] || (D[4] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onCompositionStart) && ((S = s(l)) == null ? void 0 : S.onCompositionStart(...B));
+            onCompositionstart: T[4] || (T[4] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
             }),
-            onCompositionend: D[5] || (D[5] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onCompositionEnd) && ((S = s(l)) == null ? void 0 : S.onCompositionEnd(...B));
+            onCompositionend: T[5] || (T[5] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
             }),
-            onMouseup: D[6] || (D[6] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onMouseUp) && ((S = s(l)) == null ? void 0 : S.onMouseUp(...B));
+            onMouseup: T[6] || (T[6] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
             }),
             onClick: se,
             textContent: r.value,
-            "aria-placeholder": b.value,
-            "aria-label": b.value || "content editable",
-            contenteditable: w.value,
+            "aria-placeholder": $.value,
+            "aria-label": $.value || "content editable",
+            contenteditable: q.value,
             tabindex: s(l).tabIndex,
             ref_key: "root",
             ref: n
@@ -1762,58 +1762,58 @@ const wt = /* @__PURE__ */ g({
             spellcheck: "false",
             onFocus: U,
             onBlur: J,
-            onKeydown: D[7] || (D[7] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onKeyDown) && ((S = s(l)) == null ? void 0 : S.onKeyDown(...B));
+            onKeydown: T[7] || (T[7] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
             }),
-            onKeyup: D[8] || (D[8] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onKeyUp) && ((S = s(l)) == null ? void 0 : S.onKeyUp(...B));
+            onKeyup: T[8] || (T[8] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
             }),
-            onCompositionstart: D[9] || (D[9] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onCompositionStart) && ((S = s(l)) == null ? void 0 : S.onCompositionStart(...B));
+            onCompositionstart: T[9] || (T[9] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
             }),
-            onCompositionend: D[10] || (D[10] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onCompositionEnd) && ((S = s(l)) == null ? void 0 : S.onCompositionEnd(...B));
+            onCompositionend: T[10] || (T[10] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
             }),
-            onMouseup: D[11] || (D[11] = //@ts-ignore
-            (...B) => {
-              var M, S;
-              return ((M = s(l)) == null ? void 0 : M.onMouseUp) && ((S = s(l)) == null ? void 0 : S.onMouseUp(...B));
+            onMouseup: T[11] || (T[11] = //@ts-ignore
+            (...E) => {
+              var S, B;
+              return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
             }),
             onClick: se,
-            "aria-placeholder": b.value,
-            "aria-label": b.value || "content editable",
-            contenteditable: w.value,
+            "aria-placeholder": $.value,
+            "aria-label": $.value || "content editable",
+            contenteditable: q.value,
             tabindex: s(l).tabIndex,
             innerHTML: r.value,
             ref_key: "root",
             ref: n
           }, null, 40, Bt)) : p("", !0),
-          R.value ? (a(), y(s(u), {
+          I.value ? (a(), b(s(c), {
             key: 2,
             is: "sv-character-counter",
-            counter: E.value,
+            counter: C.value,
             remainingCharacterCounter: L.value
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      _.value ? (a(), i("span", It, k(_.value), 1)) : p("", !0)
+      _.value ? (a(), i("span", It, f(_.value), 1)) : p("", !0)
     ], 2));
   }
 }), Pt = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, Rt = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Vt = {
+}, Rt = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), At = {
   key: 1,
   class: "svc-toolbox__placeholder"
-}, At = {
+}, Vt = {
   key: 1,
   class: "svc-toolbox__category"
 }, zt = /* @__PURE__ */ g({
@@ -1821,16 +1821,16 @@ const wt = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.model.toolbox), o = I();
-    f(() => e.value), G(() => {
+  setup(u) {
+    const t = u, e = k(() => t.model.toolbox), o = P();
+    w(() => e.value), G(() => {
       e.value.afterRender(o.value);
-    }), P(() => {
+    }), R(() => {
       e.value.afterRender(o.value);
     }), K(() => {
       e.value.beforeDestroy();
     });
-    const n = $(() => e.value.renderedActions);
+    const n = k(() => e.value.renderedActions);
     return (r, l) => (a(), i("div", {
       class: m(e.value.classNames),
       ref_key: "root",
@@ -1842,7 +1842,7 @@ const wt = /* @__PURE__ */ g({
         class: "svc-toolbox__panel"
       }, [
         e.value.showSearch ? (a(), i("div", Pt, [
-          e.value.isCompactRendered ? (a(), y(s(u), {
+          e.value.isCompactRendered ? (a(), b(s(c), {
             is: "svc-toolbox-tool",
             creator: r.model,
             key: "searchitem",
@@ -1850,23 +1850,23 @@ const wt = /* @__PURE__ */ g({
             parentModel: e.value,
             isCompact: e.value.isCompactRendered
           }, null, 8, ["creator", "item", "parentModel", "isCompact"])) : p("", !0),
-          v(s(u), {
+          v(s(c), {
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
           Rt
         ])) : p("", !0),
-        e.value.showPlaceholder ? (a(), i("div", Vt, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
-        v(s(u), { is: "sv-scroll" }, {
+        e.value.showPlaceholder ? (a(), i("div", At, f(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        v(s(c), { is: "sv-scroll" }, {
           default: X(() => [
-            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(T, { key: 0 }, V(e.value.categories, (_, q) => (a(), y(s(u), {
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(D, { key: 0 }, V(e.value.categories, (_, N) => (a(), b(s(c), {
               is: "svc-toolbox-category",
-              key: q,
+              key: N,
               category: _,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (a(), i("div", At, [
-              (a(!0), i(T, null, V(n.value, (_) => (a(), y(s(u), {
+            e.value.showInSingleCategory ? (a(), i("div", Vt, [
+              (a(!0), i(D, null, V(n.value, (_) => (a(), b(s(c), {
                 key: _.renderedId,
                 is: "svc-toolbox-tool",
                 creator: r.model,
@@ -1892,8 +1892,8 @@ const wt = /* @__PURE__ */ g({
     parentModel: {},
     isCompact: { type: Boolean }
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new qe(
         t.item,
         t.creator,
@@ -1903,8 +1903,8 @@ const wt = /* @__PURE__ */ g({
       (n) => {
         n.dispose();
       }
-    ), o = I();
-    return P(() => {
+    ), o = P();
+    return R(() => {
       const n = t.item;
       n.updateModeCallback = (r, l) => {
         n.mode = r, re(() => l(r, o.value));
@@ -1912,7 +1912,7 @@ const wt = /* @__PURE__ */ g({
     }), K(() => {
       const n = t.item;
       n.updateModeCallback = void 0;
-    }), f(() => t.item), (n, r) => {
+    }), w(() => t.item), (n, r) => {
       var l;
       return a(), i("div", {
         class: m(n.item.css),
@@ -1924,11 +1924,11 @@ const wt = /* @__PURE__ */ g({
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
           (..._) => {
-            var q, b;
-            return ((q = s(e)) == null ? void 0 : q.onPointerDown) && ((b = s(e)) == null ? void 0 : b.onPointerDown(..._));
+            var N, $;
+            return ((N = s(e)) == null ? void 0 : N.onPointerDown) && (($ = s(e)) == null ? void 0 : $.onPointerDown(..._));
           })
         }, [
-          v(s(u), {
+          v(s(c), {
             viewModel: s(e),
             is: (l = s(e)) == null ? void 0 : l.itemComponent,
             item: n.item,
@@ -1950,9 +1950,9 @@ const wt = /* @__PURE__ */ g({
     isCompact: { type: Boolean },
     viewModel: {}
   },
-  setup(c) {
-    return (t, e) => (a(), i(T, null, [
-      C((a(), i("div", {
+  setup(u) {
+    return (t, e) => (a(), i(D, null, [
+      h((a(), i("div", {
         class: m(["svc-toolbox__item", t.item.renderedCss]),
         role: "button",
         "aria-label": t.item.tooltip,
@@ -1960,7 +1960,7 @@ const wt = /* @__PURE__ */ g({
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
         d("span", Ut, [
-          t.item.iconName ? (a(), y(s(u), {
+          t.item.iconName ? (a(), b(s(c), {
             key: 0,
             is: "sv-svg-icon",
             iconName: t.item.iconName,
@@ -1968,22 +1968,22 @@ const wt = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (a(), i("span", Qt, k(t.item.title), 1))
+        t.isCompact ? p("", !0) : (a(), i("span", Qt, f(t.item.title), 1))
       ], 10, Kt)), [
-        [s(N), { disableTabStop: !t.viewModel.toolboxItem.enabled }]
+        [s(M), { disableTabStop: !t.viewModel.toolboxItem.enabled }]
       ]),
       t.isCompact ? (a(), i("span", {
         key: 0,
         class: "svc-toolbox__item-banner",
         onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: t.item.iconName,
           size: 24,
           class: "svc-toolbox__item-icon"
         }, null, 8, ["iconName"]),
-        d("span", null, k(t.item.title), 1)
+        d("span", null, f(t.item.title), 1)
       ])) : p("", !0)
     ], 64));
   }
@@ -1995,14 +1995,14 @@ const wt = /* @__PURE__ */ g({
     isCompact: { type: Boolean },
     viewModel: {}
   },
-  setup(c) {
-    const t = c, e = (n) => {
+  setup(u) {
+    const t = u, e = (n) => {
       t.viewModel.onMouseOver(t.item, n);
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
-    return (n, r) => (a(), i(T, null, [
-      v(s(u), {
+    return (n, r) => (a(), i(D, null, [
+      v(s(c), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
         item: n.item,
@@ -2014,12 +2014,12 @@ const wt = /* @__PURE__ */ g({
         onMouseover: e,
         onMouseleave: o
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: n.item.subitemsButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: n.item.popupModel
         }, null, 8, ["model"])
@@ -2035,24 +2035,24 @@ const wt = /* @__PURE__ */ g({
     category: {},
     toolbox: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.category), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.category), (e, o) => (a(), i("div", {
       class: m(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
       d("div", Gt, [
-        C((a(), i("div", {
+        h((a(), i("div", {
           class: m(["svc-toolbox__category-header", {
             "svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
           }]),
           onClick: o[0] || (o[0] = (n) => e.category.toggleState())
         }, [
-          d("span", Wt, k(e.category.title), 1),
+          d("span", Wt, f(e.category.title), 1),
           e.toolbox.canCollapseCategories ? (a(), i("div", jt, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: e.category.iconName,
               class: m(e.category.iconClassName),
@@ -2060,10 +2060,10 @@ const wt = /* @__PURE__ */ g({
             }, null, 8, ["iconName", "class"])
           ])) : p("", !0)
         ], 2)), [
-          [s(N)]
+          [s(M)]
         ])
       ]),
-      (a(!0), i(T, null, V(e.category.items, (n) => (a(), y(s(u), {
+      (a(!0), i(D, null, V(e.category.items, (n) => (a(), b(s(c), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2079,12 +2079,12 @@ const wt = /* @__PURE__ */ g({
     model: {},
     creator: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+  setup(u) {
+    const t = u;
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.cssClasses.root)
     }, [
-      (a(!0), i(T, null, V(e.model.renderedActions, (n, r) => (a(), y(s(u), {
+      (a(!0), i(D, null, V(e.model.renderedActions, (n, r) => (a(), b(s(c), {
         key: r,
         is: "svc-toolbox-tool",
         creator: e.creator,
@@ -2120,11 +2120,11 @@ const wt = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.model.survey);
-    return f(() => t.model), f(() => e.value), f(() => t.model.pagesController), (o, n) => (a(), i(T, null, [
+  setup(u) {
+    const t = u, e = k(() => t.model.survey);
+    return w(() => t.model), w(() => e.value), w(() => t.model.pagesController), (o, n) => (a(), i(D, null, [
       d("div", Xt, [
-        o.model.isToolboxVisible ? (a(), y(s(u), {
+        o.model.isToolboxVisible ? (a(), b(s(c), {
           key: 0,
           is: "svc-toolbox",
           model: o.model.creator
@@ -2135,12 +2135,12 @@ const wt = /* @__PURE__ */ g({
         onClick: n[0] || (n[0] = //@ts-ignore
         (...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
       }, [
-        v(s(u), { is: "sv-scroll" }, {
+        v(s(c), { is: "sv-scroll" }, {
           default: X(() => [
             d("div", Yt, [
-              o.model.showPlaceholder ? (a(), i(T, { key: 0 }, [
+              o.model.showPlaceholder ? (a(), i(D, { key: 0 }, [
                 o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), i("div", xt, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
@@ -2152,7 +2152,7 @@ const wt = /* @__PURE__ */ g({
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
                   d("div", on, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
@@ -2162,7 +2162,7 @@ const wt = /* @__PURE__ */ g({
                   ])
                 ])
               ], 64)) : p("", !0),
-              o.model.showPlaceholder ? p("", !0) : (a(), i(T, { key: 1 }, [
+              o.model.showPlaceholder ? p("", !0) : (a(), i(D, { key: 1 }, [
                 d("div", {
                   class: m(o.model.designerCss),
                   style: F([
@@ -2171,18 +2171,18 @@ const wt = /* @__PURE__ */ g({
                   ])
                 }, [
                   o.model.creator.allowEditSurveyTitle ? (a(), i("div", sn, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
                   ])) : p("", !0),
-                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(T, { key: 1 }, V(o.model.pages, (r) => (a(), i("div", {
+                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(D, { key: 1 }, V(o.model.pages, (r) => (a(), i("div", {
                     key: r.id,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
                     "data-sv-drop-target-page": r.name
                   }, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
@@ -2196,7 +2196,7 @@ const wt = /* @__PURE__ */ g({
                     "data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
                     "data-sv-drop-target-page": o.model.pagesController.page2Display.name
                   }, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       page: o.model.pagesController.page2Display,
                       creator: o.model.creator,
@@ -2206,14 +2206,14 @@ const wt = /* @__PURE__ */ g({
                 ], 6),
                 o.model.showSurfaceTools ? (a(), i("div", an, [
                   o.model.creator.showPageNavigator ? (a(), i("div", ln, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
                   ])) : p("", !0),
                   o.model.showSurfaceToolbar ? (a(), i("div", rn, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
                     }, null, 8, ["model"])
@@ -2244,8 +2244,8 @@ const wt = /* @__PURE__ */ g({
     page: {},
     isGhost: { type: Boolean }
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = P(), o = z(
       () => {
         const r = new $e(t.creator, t.page);
         return r.isGhost = t.isGhost, r;
@@ -2262,13 +2262,13 @@ const wt = /* @__PURE__ */ g({
       }
     ), G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), P(() => {
+    }), R(() => {
       e.value && o.value && o.value.setRootElement(e.value);
     });
     const n = (r) => {
       o.value.hover(r, r.currentTarget);
     };
-    return (r, l) => s(o).page ? C((a(), i("div", {
+    return (r, l) => s(o).page ? h((a(), i("div", {
       key: s(o).page.id,
       id: s(o).page.id,
       class: m(["svc-page__content", s(o).css]),
@@ -2284,18 +2284,18 @@ const wt = /* @__PURE__ */ g({
     }, [
       un,
       pn,
-      s(o).needRenderContent ? (a(), y(s(u), {
+      s(o).needRenderContent ? (a(), b(s(c), {
         key: 0,
         is: "sv-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"])) : p("", !0),
       s(o).needRenderContent ? p("", !0) : (a(), i("div", vn, [
-        v(s(u), { is: "sv-loading-indicator" })
+        v(s(c), { is: "sv-loading-indicator" })
       ])),
       s(o).showPlaceholder ? (a(), i("div", mn, [
         d("div", _n, [
-          d("div", gn, k(s(o).placeholderText), 1)
+          d("div", gn, f(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
@@ -2303,7 +2303,7 @@ const wt = /* @__PURE__ */ g({
         class: "svc-question__drag-area",
         onPointerdown: l[0] || (l[0] = (_) => s(o).onPointerDown(_))
       }, [
-        v(s(u), A({
+        v(s(c), A({
           is: "sv-svg-icon",
           class: "svc-question__drag-element"
         }, {
@@ -2312,11 +2312,11 @@ const wt = /* @__PURE__ */ g({
           size: "auto"
         }), null, 16),
         d("div", bn, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer
           }, null, 8, ["model"]),
-          s(o).topActionContainer.hasActions ? (a(), y(s(u), {
+          s(o).topActionContainer.hasActions ? (a(), b(s(c), {
             key: 0,
             is: "sv-action-bar",
             model: s(o).topActionContainer
@@ -2324,22 +2324,22 @@ const wt = /* @__PURE__ */ g({
         ])
       ], 32)) : p("", !0),
       !s(o).allowDragging || s(o).isGhost ? (a(), i("div", yn, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: s(o).actionContainer
         }, null, 8, ["model"]),
-        s(o).topActionContainer.hasActions ? (a(), y(s(u), {
+        s(o).topActionContainer.hasActions ? (a(), b(s(c), {
           key: 0,
           is: "sv-action-bar",
           model: s(o).topActionContainer
         }, null, 8, ["model"])) : p("", !0)
       ])) : p("", !0),
-      v(s(u), {
+      v(s(c), {
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
     ], 42, cn)), [
-      [s(N)]
+      [s(M)]
     ]) : p("", !0);
   }
 }), Cn = { class: "svc-add-new-item-button__text" }, qn = /* @__PURE__ */ g({
@@ -2349,39 +2349,39 @@ const wt = /* @__PURE__ */ g({
     buttonClass: {},
     renderPopup: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.item.data);
-    const e = $(
+  setup(u) {
+    const t = u;
+    w(() => t.item.data);
+    const e = k(
       () => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
-    ), o = $(
+    ), o = k(
       () => t.renderPopup === void 0 || t.renderPopup !== !1
     );
-    return (n, r) => (a(), i(T, null, [
-      C((a(), i("div", {
+    return (n, r) => (a(), i(D, null, [
+      h((a(), i("div", {
         class: m(e.value),
         onClick: r[0] || (r[0] = (l) => {
           n.item.data.addNewQuestion(n.item, l), l.stopPropagation();
         }),
         onMouseover: r[1] || (r[1] = (l) => n.item.data.hoverStopper && n.item.data.hoverStopper(l, l.currentTarget))
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           class: "svc-panel__add-new-question-icon",
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        d("span", Cn, k(n.item.data.addNewQuestionText), 1),
-        o.value ? (a(), y(s(u), {
+        d("span", Cn, f(n.item.data.addNewQuestionText), 1),
+        o.value ? (a(), b(s(c), {
           key: 0,
           is: "svc-add-question-type-selector",
           questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
           renderPopup: o.value
         }, null, 8, ["questionTypeSelectorModel", "renderPopup"])) : p("", !0)
       ], 34)), [
-        [s(N)]
+        [s(M)]
       ]),
-      o.value ? p("", !0) : (a(), y(s(u), {
+      o.value ? p("", !0) : (a(), b(s(c), {
         key: 0,
         is: "svc-add-question-type-selector",
         questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2395,9 +2395,9 @@ const wt = /* @__PURE__ */ g({
     questionTypeSelectorModel: {},
     renderPopup: {}
   },
-  setup(c) {
-    const t = c;
-    return f(() => t.questionTypeSelectorModel), (e, o) => C((a(), i("button", {
+  setup(u) {
+    const t = u;
+    return w(() => t.questionTypeSelectorModel), (e, o) => h((a(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2406,7 +2406,7 @@ const wt = /* @__PURE__ */ g({
       "aria-label": e.questionTypeSelectorModel.title,
       class: "svc-element__question-type-selector"
     }, [
-      v(s(u), A({
+      v(s(c), A({
         is: "sv-svg-icon",
         class: "svc-element__question-type-selector-icon"
       }, {
@@ -2414,29 +2414,29 @@ const wt = /* @__PURE__ */ g({
         size: "auto",
         title: e.questionTypeSelectorModel.title
       }), null, 16),
-      e.renderPopup ? (a(), y(s(u), {
+      e.renderPopup ? (a(), b(s(c), {
         key: 0,
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
     ], 8, $n)), [
-      [s(N)]
+      [s(M)]
     ]);
   }
-}), fn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), wn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Tn = /* @__PURE__ */ g({
+}), fn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), wn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Dn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = z(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = z(
       () => new ke(e.value, o.value, void 0),
       [() => e.value, () => o.value],
       (r) => {
         r.dispose();
       }
     );
-    return P(() => {
+    return R(() => {
       n.value && n.value.subscribeElementChanges();
     }), K(() => {
       n.value && n.value.unsubscribeElementChanges();
@@ -2448,10 +2448,10 @@ const wt = /* @__PURE__ */ g({
       x(r.$slots, "default")
     ], 2));
   }
-}), Dn = ["data-sv-drop-target-survey-element"], Nn = { class: "svc-fake-title" }, Mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Sn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), En = { class: "svc-question__top-actions" }, Pn = {
+}), Tn = ["data-sv-drop-target-survey-element"], Nn = { class: "svc-fake-title" }, Mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Sn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), En = { class: "svc-question__top-actions" }, Pn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, Rn = { class: "svc-panel__placeholder_frame" }, Vn = {
+}, Rn = { class: "svc-panel__placeholder_frame" }, An = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2466,19 +2466,19 @@ const wt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = P(), o = z(
       () => t.createModel(),
       [() => t.componentName, () => t.componentData.data, () => t.componentData.element],
       (l) => {
         l.dispose();
       }
-    ), n = $(
+    ), n = k(
       () => o.value.isBannerShowing ? o.value.createBannerParams() : null
     );
     G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), P(() => {
+    }), R(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     });
     const r = (l) => {
@@ -2489,9 +2489,9 @@ const wt = /* @__PURE__ */ g({
       class: m(["svc-question__adorner", s(o).rootCss()]),
       ref_key: "root",
       ref: e,
-      onDblclick: _[2] || (_[2] = (q) => s(o).dblclick(q)),
-      onMouseover: _[3] || (_[3] = (q) => s(o).hover(q, q.currentTarget)),
-      onMouseleave: _[4] || (_[4] = (q) => s(o).hover(q, q.currentTarget)),
+      onDblclick: _[2] || (_[2] = (N) => s(o).dblclick(N)),
+      onMouseover: _[3] || (_[3] = (N) => s(o).hover(N, N.currentTarget)),
+      onMouseleave: _[4] || (_[4] = (N) => s(o).hover(N, N.currentTarget)),
       "data-sv-drop-target-survey-element": s(o).element.name || null,
       "data-bind": "css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"
     }, [
@@ -2499,20 +2499,21 @@ const wt = /* @__PURE__ */ g({
         key: 0,
         class: m(s(o).cssCollapsedHiddenHeader)
       }, [
-        l.element.hasTitle ? (a(), y(s(u), {
+        l.element.hasTitle ? (a(), b(s(c), {
           key: 0,
           is: "survey-element-title",
-          element: l.element
+          element: l.element,
+          renderActions: !1
         }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
           class: m(s(o).cssCollapsedHiddenTitle)
         }, [
-          d("span", Nn, k(l.element.name), 1)
+          d("span", Nn, f(l.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      C((a(), i("div", {
-        onClick: _[1] || (_[1] = (q) => {
-          s(o).select(s(o), q), q.stopPropagation();
+      h((a(), i("div", {
+        onClick: _[1] || (_[1] = (N) => {
+          s(o).select(s(o), N), N.stopPropagation();
         }),
         class: m(s(o).css())
       }, [
@@ -2523,9 +2524,9 @@ const wt = /* @__PURE__ */ g({
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
-          onPointerdown: _[0] || (_[0] = (q) => s(o).onPointerDown(q))
+          onPointerdown: _[0] || (_[0] = (N) => s(o).onPointerDown(N))
         }, [
-          v(s(u), A({
+          v(s(c), A({
             is: "sv-svg-icon",
             class: "svc-question__drag-element"
           }, {
@@ -2534,38 +2535,38 @@ const wt = /* @__PURE__ */ g({
             size: "auto"
           }), null, 16),
           d("div", En, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
               handleClick: !1
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(o).needToRenderContent ? (a(), i(T, { key: 1 }, [
-          v(s(u), {
+        s(o).needToRenderContent ? (a(), i(D, { key: 1 }, [
+          v(s(c), {
             is: "sv-template-renderer",
             componentName: l.componentName,
             componentData: l.componentData
           }, null, 8, ["componentName", "componentData"]),
           s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", Pn, [
             d("div", Rn, [
-              d("div", Vn, k(s(o).placeholderText), 1)
+              d("div", An, f(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), y(s(u), A(
+          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), b(s(c), A(
             {
               key: 1,
               is: l.placeholderComponent
             },
             l.getPlaceholderComponentData && l.getPlaceholderComponentData(s(o))
           ), null, 16, ["is"])) : p("", !0),
-          l.adornerComponent ? (a(), y(s(u), {
+          l.adornerComponent ? (a(), b(s(c), {
             key: 2,
             is: l.adornerComponent,
             model: s(o),
             element: l.element
           }, null, 8, ["is", "model", "element"])) : p("", !0),
-          s(o).isBannerShowing ? (a(), y(s(u), {
+          s(o).isBannerShowing ? (a(), b(s(c), {
             key: 3,
             is: "svc-question-banner",
             model: n.value
@@ -2574,7 +2575,7 @@ const wt = /* @__PURE__ */ g({
             class: "svc-question__content-actions",
             onFocusin: r
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(o).actionContainer,
               handleClick: !1
@@ -2582,9 +2583,9 @@ const wt = /* @__PURE__ */ g({
           ], 32)
         ], 64)) : p("", !0)
       ], 2)), [
-        [s(N), { disableTabStop: !0 }]
+        [s(M), { disableTabStop: !0 }]
       ])
-    ], 42, Dn)) : p("", !0);
+    ], 42, Tn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2592,34 +2593,34 @@ const wt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new ee(
+  setup(u) {
+    const t = u, e = () => new ee(
       t.componentData.data,
       t.componentData.element,
       null
     );
-    return (o, n) => (a(), y(oe, {
+    return (o, n) => (a(), b(oe, {
       createModel: e,
       element: o.componentData.element,
       "component-name": o.componentName,
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), An = /* @__PURE__ */ g({
+}), Vn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new fe(
+  setup(u) {
+    const t = u, e = () => new fe(
       t.componentData.data,
       t.componentData.element,
       null
     ), o = (n) => ({
       question: n == null ? void 0 : n.filePresentationModel
     });
-    return (n, r) => (a(), y(oe, {
+    return (n, r) => (a(), b(oe, {
       "create-model": e,
       element: t.componentData.element,
       "show-placeholder-component": !0,
@@ -2646,10 +2647,10 @@ const wt = /* @__PURE__ */ g({
     model: {},
     element: {}
   },
-  setup(c) {
-    return (t, e) => (a(), i(T, null, [
+  setup(u) {
+    return (t, e) => (a(), i(D, null, [
       !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", zn, [
-        t.model.allowEdit ? (a(), i(T, { key: 0 }, [
+        t.model.allowEdit ? (a(), i(D, { key: 0 }, [
           d("input", {
             type: "file",
             "aria-hidden": "true",
@@ -2657,21 +2658,21 @@ const wt = /* @__PURE__ */ g({
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
           }, null, 8, Ln),
-          C((a(), i("span", Fn, [
-            v(s(u), {
+          h((a(), i("span", Fn, [
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto",
               onClick: e[0] || (e[0] = (o) => t.model.chooseFile(t.model))
             })
           ])), [
-            [s(N)]
+            [s(M)]
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
       t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Kn, [
         d("div", Un, [
-          v(s(u), { is: "sv-loading-indicator" })
+          v(s(c), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
@@ -2682,8 +2683,8 @@ const wt = /* @__PURE__ */ g({
     componentData: {},
     componentName: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new we(
         t.componentData.data,
         t.componentData.question,
@@ -2692,12 +2693,12 @@ const wt = /* @__PURE__ */ g({
       [() => t.componentData.data, () => t.componentData.question]
     );
     return (o, n) => {
-      var r, l, _, q, b, w, E, R, L;
+      var r, l, _, N, $, q, C, I, L;
       return a(), i("div", Hn, [
         d("div", {
           class: m((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
-          (l = s(e)) != null && l.allowRemove ? C((a(), i("span", {
+          (l = s(e)) != null && l.allowRemove ? h((a(), i("span", {
             key: 0,
             class: m((_ = s(e)) == null ? void 0 : _.removeClassNames),
             onClick: n[0] || (n[0] = (J) => {
@@ -2705,35 +2706,35 @@ const wt = /* @__PURE__ */ g({
               return (U = s(e)) == null ? void 0 : U.removeItem(s(e));
             }),
             role: "button",
-            "aria-label": (q = s(e)) == null ? void 0 : q.removeTooltip
+            "aria-label": (N = s(e)) == null ? void 0 : N.removeTooltip
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-remove_16x16",
               size: "auto",
-              title: (b = s(e)) == null ? void 0 : b.removeTooltip
+              title: ($ = s(e)) == null ? void 0 : $.removeTooltip
             }, null, 8, ["title"])
           ], 10, On)), [
-            [s(N)]
+            [s(M)]
           ]) : p("", !0),
-          (w = s(e)) != null && w.allowAdd ? C((a(), i("span", {
+          (q = s(e)) != null && q.allowAdd ? h((a(), i("span", {
             key: 1,
-            class: m((E = s(e)) == null ? void 0 : E.addClassNames),
+            class: m((C = s(e)) == null ? void 0 : C.addClassNames),
             onClick: n[1] || (n[1] = (J) => {
               var U;
               return (U = s(e)) == null ? void 0 : U.addItem(s(e));
             }),
             role: "button",
-            "aria-label": (R = s(e)) == null ? void 0 : R.addTooltip
+            "aria-label": (I = s(e)) == null ? void 0 : I.addTooltip
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-add_16x16",
               size: "auto",
               title: (L = s(e)) == null ? void 0 : L.addTooltip
             }, null, 8, ["title"])
           ], 10, Gn)), [
-            [s(N)]
+            [s(M)]
           ]) : p("", !0)
         ], 2),
         x(o.$slots, "default")
@@ -2748,18 +2749,18 @@ const wt = /* @__PURE__ */ g({
   props: {
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = $(() => t.componentData.column), r = $(() => t.componentData.element), l = $(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = k(() => t.componentData.column), r = k(() => t.componentData.element), l = k(
       () => t.componentData.question
     ), _ = z(
       () => {
-        var q;
-        return t.componentData ? new Te(
+        var N;
+        return t.componentData ? new De(
           e.value,
           r.value,
           l.value,
           o.value,
-          n.value || ((q = r.value.cell) == null ? void 0 : q.column)
+          n.value || ((N = r.value.cell) == null ? void 0 : N.column)
         ) : void 0;
       },
       [
@@ -2769,40 +2770,40 @@ const wt = /* @__PURE__ */ g({
         () => l.value
       ]
     );
-    return (q, b) => {
-      var w, E;
+    return (N, $) => {
+      var q, C;
       return a(), i("div", {
         tabindex: "-1",
         class: "svc-matrix-cell",
-        onClick: b[1] || (b[1] = (R) => {
+        onClick: $[1] || ($[1] = (I) => {
           var L;
-          return (L = s(_)) == null ? void 0 : L.selectContext(s(_), R);
+          return (L = s(_)) == null ? void 0 : L.selectContext(s(_), I);
         }),
-        onMouseover: b[2] || (b[2] = (R) => {
+        onMouseover: $[2] || ($[2] = (I) => {
           var L;
-          return (L = s(_)) == null ? void 0 : L.hover(R, R.currentTarget);
+          return (L = s(_)) == null ? void 0 : L.hover(I, I.currentTarget);
         }),
-        onMouseleave: b[3] || (b[3] = (R) => {
+        onMouseleave: $[3] || ($[3] = (I) => {
           var L;
-          return (L = s(_)) == null ? void 0 : L.hover(R, R.currentTarget);
+          return (L = s(_)) == null ? void 0 : L.hover(I, I.currentTarget);
         })
       }, [
         d("div", {
-          class: m(["svc-matrix-cell--selected", { "svc-visible": (w = s(_)) == null ? void 0 : w.isSelected }])
+          class: m(["svc-matrix-cell--selected", { "svc-visible": (q = s(_)) == null ? void 0 : q.isSelected }])
         }, null, 2),
-        x(q.$slots, "default"),
-        (E = s(_)) != null && E.isSupportCellEditor ? (a(), i("div", jn, [
-          C((a(), i("span", {
+        x(N.$slots, "default"),
+        (C = s(_)) != null && C.isSupportCellEditor ? (a(), i("div", jn, [
+          h((a(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
-            onClick: b[0] || (b[0] = (R) => s(_).editQuestion(s(_), R))
+            onClick: $[0] || ($[0] = (I) => s(_).editQuestion(s(_), I))
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-edit",
               size: "auto"
             })
           ])), [
-            [s(N)]
+            [s(M)]
           ])
         ])) : p("", !0)
       ], 32);
@@ -2814,13 +2815,13 @@ const wt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = $(
+  setup(u) {
+    const t = u, e = k(
       () => t.componentData.element
     );
-    return f(() => e.value), (o, n) => (a(), i("div", Zn, [
+    return w(() => e.value), (o, n) => (a(), i("div", Zn, [
       d("div", Xn, [
-        v(s(u), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
+        v(s(c), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
@@ -2836,8 +2837,8 @@ const wt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new ee(
         t.componentData.data,
         t.componentData.element,
@@ -2863,18 +2864,19 @@ const wt = /* @__PURE__ */ g({
         key: 0,
         class: m(s(e).cssCollapsedHiddenHeader)
       }, [
-        s(e).element.hasTitle ? (a(), y(s(u), {
+        s(e).element.hasTitle ? (a(), b(s(c), {
           key: 0,
           is: "survey-element-title",
-          element: s(e).element
+          element: s(e).element,
+          renderActions: !1
         }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
           class: m(s(e).cssCollapsedHiddenTitle)
         }, [
-          d("span", ea, k(s(e).element.name), 1)
+          d("span", ea, f(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      C((a(), i("div", {
+      h((a(), i("div", {
         class: m(s(e).css()),
         onClick: r[2] || (r[2] = (l) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), l) : null)
       }, [
@@ -2887,51 +2889,51 @@ const wt = /* @__PURE__ */ g({
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (l) => s(e).onPointerDown(l))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
           d("div", aa, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
               handleClick: !1
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(e).needToRenderContent ? (a(), i(T, { key: 1 }, [
-          v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+        s(e).needToRenderContent ? (a(), i(D, { key: 1 }, [
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
           s(e).isEmptyElement ? (a(), i("div", la, [
             d("div", ia, [
-              d("div", ra, k(s(e).placeholderText), 1),
-              s(e).showAddQuestionButton ? C((a(), i("div", {
+              d("div", ra, f(s(e).placeholderText), 1),
+              s(e).showAddQuestionButton ? h((a(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
               }, [
-                v(s(u), {
+                v(s(c), {
                   is: "sv-svg-icon",
                   class: "svc-panel__add-new-question-icon",
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                d("span", da, k(s(e).addNewQuestionText), 1)
+                d("span", da, f(s(e).addNewQuestionText), 1)
               ])), [
-                [s(N)]
+                [s(M)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
           !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", ca, [
             d("div", ua, [
-              v(s(u), {
+              v(s(c), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
             d("div", pa, [
-              v(s(u), {
+              v(s(c), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
                 buttonClass: "svc-action-button",
@@ -2944,7 +2946,7 @@ const wt = /* @__PURE__ */ g({
             class: "svc-question__content-actions",
             onFocusin: r[1] || (r[1] = (l) => s(e).select(s(e), l))
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(e).actionContainer,
               handleClick: !1
@@ -2952,200 +2954,244 @@ const wt = /* @__PURE__ */ g({
           ], 32)) : p("", !0)
         ], 64)) : p("", !0)
       ], 2)), [
-        [s(N), { disableTabStop: !0 }]
+        [s(M), { disableTabStop: !0 }]
       ])
     ], 42, xn)) : p("", !0);
   }
 }), ma = ["data-sv-drop-target-item-value"], _a = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ga = { class: "svc-item-value-controls" }, ba = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, ya = ["aria-label"], ha = ["aria-label"], Ca = /* @__PURE__ */ g({
+}, ya = ["aria-label"], ha = ["aria-label"], Ca = {
+  key: 0,
+  class: "svc-item-value-controls svc-choice-elements-button-container"
+}, qa = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = I(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), l = W(
+  setup(u) {
+    const t = P(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), l = W(
       () => r.value,
-      (q, b) => {
-        q && t.value && q.setRootElement(t.value), b && b.setRootElement(void 0);
+      (q, C) => {
+        q && t.value && q.setRootElement(t.value), C && C.setRootElement(void 0);
       }
     );
-    P(() => {
+    R(() => {
       t.value && r.value && r.value.setRootElement(t.value);
     }), K(() => {
       r.value.setRootElement(void 0);
     });
     const _ = z(
-      () => new De(o.value, n.value, r.value),
+      () => new Te(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
       (q) => {
         q.dispose();
       }
     );
-    return Y(() => {
+    Y(() => {
       l();
-    }), (q, b) => (a(), i("div", {
-      class: m(["svc-item-value-wrapper", {
-        "svc-item-value--new": s(_).isNew,
-        "svc-item-value--dragging": s(_).isDragging,
-        "svc-item-value--ghost": s(_).isDragDropGhost,
-        "svc-item-value--movedown": s(_).isDragDropMoveDown,
-        "svc-item-value--moveup": s(_).isDragDropMoveUp
-      }]),
-      onPointerdown: b[4] || (b[4] = (w) => s(_).onPointerDown(w)),
-      "data-sv-drop-target-item-value": s(_).isDraggable ? r.value.value : null,
-      ref_key: "root",
-      ref: t
-    }, [
-      _a,
-      d("div", ga, [
-        s(_).isDraggable ? (a(), i("span", ba, [
-          v(s(u), {
-            is: "sv-svg-icon",
-            class: "svc-item-value-controls__drag-icon",
-            iconName: "icon-drag-24x24",
-            size: "auto",
-            title: s(_).dragTooltip
-          }, null, 8, ["title"])
-        ])) : p("", !0),
-        s(_).allowAdd ? C((a(), i("span", {
-          key: 1,
-          class: "svc-item-value-controls__button svc-item-value-controls__add",
-          onClick: b[0] || (b[0] = (w) => s(_).add(s(_))),
-          role: "button",
-          "aria-label": s(_).tooltip
-        }, [
-          v(s(u), {
-            is: "sv-svg-icon",
-            iconName: "icon-add_16x16",
-            size: "auto",
-            title: s(_).tooltip
-          }, null, 8, ["title"])
-        ], 8, ya)), [
-          [s(N)]
-        ]) : p("", !0),
-        s(_).allowRemove ? C((a(), i("span", {
-          key: 2,
-          class: "svc-item-value-controls__button svc-item-value-controls__remove",
-          onClick: b[1] || (b[1] = (w) => s(_).remove(s(_))),
-          onBlur: b[2] || (b[2] = (w) => s(_).onFocusOut(w)),
-          role: "button",
-          "aria-label": s(_).tooltip
-        }, [
-          v(s(u), {
-            is: "sv-svg-icon",
-            iconName: "icon-remove_16x16",
-            size: "auto",
-            title: s(_).tooltip
-          }, null, 8, ["title"])
-        ], 40, ha)), [
-          [s(N)]
-        ]) : p("", !0)
-      ]),
+    });
+    const N = (q) => {
+      const C = o.value.survey;
+      if (C) {
+        const I = C.getElementWrapperComponentName(q);
+        if (I)
+          return I;
+      }
+      return "panel";
+    }, $ = (q) => {
+      const C = o.value.survey;
+      let I;
+      return C && (I = C.getElementWrapperComponentData(q)), {
+        componentName: "survey-panel",
+        componentData: {
+          element: q,
+          data: I
+        }
+      };
+    };
+    return (q, C) => (a(), i(D, null, [
       d("div", {
-        class: "svc-item-value__item",
-        onClick: b[3] || (b[3] = (w) => s(_).select(s(_), w))
+        class: m(["svc-item-value-wrapper", {
+          "svc-item-value--new": s(_).isNew,
+          "svc-item-value--dragging": s(_).isDragging,
+          "svc-item-value--ghost": s(_).isDragDropGhost,
+          "svc-item-value--movedown": s(_).isDragDropMoveDown,
+          "svc-item-value--moveup": s(_).isDragDropMoveUp
+        }]),
+        onPointerdown: C[5] || (C[5] = (I) => s(_).onPointerDown(I)),
+        "data-sv-drop-target-item-value": s(_).isDraggable ? r.value.value : null,
+        ref_key: "root",
+        ref: t
       }, [
-        v(s(u), A({ is: q.componentName }, q.componentData), null, 16, ["is"])
-      ])
-    ], 42, ma));
+        _a,
+        d("div", ga, [
+          s(_).isDraggable ? (a(), i("span", ba, [
+            v(s(c), {
+              is: "sv-svg-icon",
+              class: "svc-item-value-controls__drag-icon",
+              iconName: "icon-drag-24x24",
+              size: "auto",
+              title: s(_).dragTooltip
+            }, null, 8, ["title"])
+          ])) : p("", !0),
+          s(_).allowAdd ? h((a(), i("span", {
+            key: 1,
+            class: "svc-item-value-controls__button svc-item-value-controls__add",
+            onClick: C[0] || (C[0] = (I) => s(_).add(s(_))),
+            role: "button",
+            "aria-label": s(_).tooltip
+          }, [
+            v(s(c), {
+              is: "sv-svg-icon",
+              iconName: "icon-add_16x16",
+              size: "auto",
+              title: s(_).tooltip
+            }, null, 8, ["title"])
+          ], 8, ya)), [
+            [s(M)]
+          ]) : p("", !0),
+          s(_).allowRemove ? h((a(), i("span", {
+            key: 2,
+            class: "svc-item-value-controls__button svc-item-value-controls__remove",
+            onClick: C[1] || (C[1] = (I) => s(_).remove(s(_))),
+            onBlur: C[2] || (C[2] = (I) => s(_).onFocusOut(I)),
+            role: "button",
+            "aria-label": s(_).tooltip
+          }, [
+            v(s(c), {
+              is: "sv-svg-icon",
+              iconName: "icon-remove_16x16",
+              size: "auto",
+              title: s(_).tooltip
+            }, null, 8, ["title"])
+          ], 40, ha)), [
+            [s(M)]
+          ]) : p("", !0)
+        ]),
+        d("div", {
+          class: "svc-item-value__item",
+          onClick: C[3] || (C[3] = (I) => s(_).select(s(_), I))
+        }, [
+          v(s(c), A({ is: q.componentName }, q.componentData), null, 16, ["is"])
+        ]),
+        s(_).canShowPanel() ? (a(), i("div", Ca, [
+          h((a(), i("span", {
+            role: "button",
+            class: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button",
+            onClick: C[4] || (C[4] = (I) => s(_).togglePanel())
+          }, [
+            v(s(c), {
+              is: "sv-svg-icon",
+              iconName: s(_).showPanel ? "icon-collapsepanel-16x16" : "icon-expandpanel-16x16",
+              size: "auto"
+            }, null, 8, ["iconName"])
+          ])), [
+            [s(M)]
+          ])
+        ])) : p("", !0)
+      ], 42, ma),
+      s(_).showPanel ? (a(), b(s(c), A({
+        key: 0,
+        is: N(r.value.panel)
+      }, $(r.value.panel)), null, 16, ["is"])) : p("", !0)
+    ], 64));
   }
-}), qa = ["data-sv-drop-target-item-value"], $a = { class: "svc-image-item-value-wrapper__content" }, ka = ["accept"], fa = {
+}), $a = ["data-sv-drop-target-item-value"], ka = { class: "svc-image-item-value-wrapper__content" }, fa = ["accept"], wa = {
   key: 0,
   class: "svc-image-item-value__item"
-}, wa = {
+}, Da = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, Ta = { class: "svc-image-item-value__item" }, Da = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Na = { class: "sd-imagepicker__label" }, Ma = {
+}, Ta = { class: "svc-image-item-value__item" }, Na = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ma = { class: "sd-imagepicker__label" }, Sa = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Sa = {
+}, Ba = {
   key: 0,
   class: "svc-image-item-value__placeholder"
-}, Ba = { key: 1 }, Ia = /* @__PURE__ */ g({
+}, Ia = { key: 1 }, Ea = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = I(), l = z(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), r = P(), l = z(
       () => {
-        const b = new Ne(
+        const $ = new Ne(
           e.value,
           o.value,
           n.value,
           null,
           null
         );
-        return r != null && r.value && (b.itemsRoot = r.value), b;
+        return r != null && r.value && ($.itemsRoot = r.value), $;
       },
       [() => e.value, () => o.value, () => n.value],
-      (b) => {
-        b.dispose();
+      ($) => {
+        $.dispose();
       }
-    ), _ = (b) => {
-      b.preventDefault();
-    }, q = $(() => {
-      const b = !l.value.getIsNewItemSingle();
+    ), _ = ($) => {
+      $.preventDefault();
+    }, N = k(() => {
+      const $ = !l.value.getIsNewItemSingle();
       return {
-        width: b ? o.value.renderedImageWidth + "px" : void 0,
-        height: b ? o.value.renderedImageHeight + "px" : void 0
+        width: $ ? o.value.renderedImageWidth + "px" : void 0,
+        height: $ ? o.value.renderedImageHeight + "px" : void 0
       };
     });
-    return P(() => {
+    return R(() => {
       r.value && (l.value.itemsRoot = r.value);
-    }), (b, w) => (a(), i("div", {
-      onPointerdown: w[5] || (w[5] = (E) => s(l).onPointerDown(E)),
+    }), ($, q) => (a(), i("div", {
+      onPointerdown: q[5] || (q[5] = (C) => s(l).onPointerDown(C)),
       class: m(s(l).getRootCss()),
       "data-sv-drop-target-item-value": s(l).isDraggable ? n.value.value : null,
       ref_key: "root",
       ref: r,
       onDragstart: _,
-      onDragenter: w[6] || (w[6] = (E) => s(l).onDragEnter(E)),
-      onDragover: w[7] || (w[7] = (E) => s(l).onDragOver(E)),
-      onDragleave: w[8] || (w[8] = (E) => s(l).onDragLeave(E)),
-      onDrop: w[9] || (w[9] = (E) => s(l).onDrop(E))
+      onDragenter: q[6] || (q[6] = (C) => s(l).onDragEnter(C)),
+      onDragover: q[7] || (q[7] = (C) => s(l).onDragOver(C)),
+      onDragleave: q[8] || (q[8] = (C) => s(l).onDragLeave(C)),
+      onDrop: q[9] || (q[9] = (C) => s(l).onDrop(C))
     }, [
       d("div", {
         class: "svc-image-item-value-wrapper__ghost",
-        style: F(q.value)
+        style: F(N.value)
       }, null, 4),
-      d("div", $a, [
+      d("div", ka, [
         d("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(l).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, ka),
-        !s(l).isNew && !s(l).isUploading ? (a(), i(T, { key: 0 }, [
-          s(l).isNew ? p("", !0) : (a(), i("div", fa, [
-            v(s(u), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
+        }, null, 8, fa),
+        !s(l).isNew && !s(l).isUploading ? (a(), i(D, { key: 0 }, [
+          s(l).isNew ? p("", !0) : (a(), i("div", wa, [
+            v(s(c), A({ is: $.componentName }, $.componentData), null, 16, ["is"])
           ])),
           s(l).isDraggable && s(l).canRenderControls ? (a(), i("span", {
             key: 1,
             class: "svc-context-button svc-image-item-value-controls__drag-area-indicator",
-            onPointerdown: w[0] || (w[0] = (E) => s(l).onPointerDown(E)),
+            onPointerdown: q[0] || (q[0] = (C) => s(l).onPointerDown(C)),
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-drag-24x24",
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(l).canRenderControls ? (a(), i("div", wa, [
-            C((a(), i("span", {
+          s(l).canRenderControls ? (a(), i("div", Da, [
+            h((a(), i("span", {
               class: "svc-context-button",
-              onClick: w[1] || (w[1] = (E) => s(l).chooseFile(s(l))),
+              onClick: q[1] || (q[1] = (C) => s(l).chooseFile(s(l))),
               title: void 0,
               "aria-label": void 0
             }, [
-              v(s(u), {
+              v(s(c), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-choosefile",
@@ -3153,15 +3199,15 @@ const wt = /* @__PURE__ */ g({
                 title: s(l).selectFileTitle
               }, null, 8, ["title"])
             ])), [
-              [s(N)]
+              [s(M)]
             ]),
-            C((a(), i("span", {
+            h((a(), i("span", {
               class: "svc-context-button svc-context-button--danger",
-              onClick: w[2] || (w[2] = (E) => s(l).remove(s(l))),
+              onClick: q[2] || (q[2] = (C) => s(l).remove(s(l))),
               title: void 0,
               "aria-label": void 0
             }, [
-              v(s(u), {
+              v(s(c), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-delete",
@@ -3169,19 +3215,19 @@ const wt = /* @__PURE__ */ g({
                 title: s(l).removeFileTitle
               }, null, 8, ["title"])
             ])), [
-              [s(N)]
+              [s(M)]
             ])
           ])) : p("", !0)
-        ], 64)) : (a(), i(T, { key: 1 }, [
+        ], 64)) : (a(), i(D, { key: 1 }, [
           d("div", Ta, [
-            d("div", Da, [
-              d("label", Na, [
+            d("div", Na, [
+              d("label", Ma, [
                 d("div", {
-                  style: F(q.value),
+                  style: F(N.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(l).isUploading ? (a(), i("div", Ma, [
-                    v(s(u), { is: "sv-loading-indicator" })
+                  s(l).isUploading ? (a(), i("div", Sa, [
+                    v(s(c), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
               ])
@@ -3190,39 +3236,39 @@ const wt = /* @__PURE__ */ g({
           s(l).allowAdd && !s(l).isUploading ? (a(), i("div", {
             key: 0,
             class: "svc-image-item-value-controls",
-            onPointerdown: w[4] || (w[4] = (E) => E.stopPropagation())
+            onPointerdown: q[4] || (q[4] = (C) => C.stopPropagation())
           }, [
-            s(l).showPlaceholder ? (a(), i("span", Sa, k(s(l).placeholderText), 1)) : p("", !0),
-            C((a(), i("span", {
+            s(l).showPlaceholder ? (a(), i("span", Ba, f(s(l).placeholderText), 1)) : p("", !0),
+            h((a(), i("span", {
               class: m(s(l).addButtonCss),
-              onClick: w[3] || (w[3] = (E) => s(l).chooseNewFile(s(l)))
+              onClick: q[3] || (q[3] = (C) => s(l).chooseNewFile(s(l)))
             }, [
-              s(l).showChooseButtonAsIcon ? (a(), y(s(u), {
+              s(l).showChooseButtonAsIcon ? (a(), b(s(c), {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-add-lg",
                 size: "auto",
                 title: s(l).addFileTitle
-              }, null, 8, ["title"])) : (a(), i("span", Ba, k(s(l).chooseImageText), 1))
+              }, null, 8, ["title"])) : (a(), i("span", Ia, f(s(l).chooseImageText), 1))
             ], 2)), [
-              [s(N)]
+              [s(M)]
             ])
           ], 32)) : p("", !0)
         ], 64))
       ])
-    ], 42, qa));
+    ], 42, $a));
   }
-}), Ea = /* @__PURE__ */ g({
+}), Pa = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
     style: {}
   },
-  setup(c) {
-    const t = c, e = $(() => {
+  setup(u) {
+    const t = u, e = k(() => {
       var r;
       return (r = t.survey) == null ? void 0 : r.getAllQuestions()[0];
-    }), o = $(() => {
+    }), o = k(() => {
       const r = t.survey;
       if (r && e.value) {
         const l = r.getElementWrapperComponentName(e.value);
@@ -3230,7 +3276,7 @@ const wt = /* @__PURE__ */ g({
           return l;
       }
       return "survey-question";
-    }), n = $(() => {
+    }), n = k(() => {
       const r = t.survey;
       let l;
       return r && e.value && (l = r.getElementWrapperComponentData(e.value)), {
@@ -3244,41 +3290,41 @@ const wt = /* @__PURE__ */ g({
     return (r, l) => (a(), i("div", {
       style: F(t.style)
     }, [
-      v(s(u), A({ is: o.value }, n.value), null, 16, ["is"])
+      v(s(c), A({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Pa = ["accept"], Ra = /* @__PURE__ */ d("svg", null, [
+}), Ra = ["accept"], Aa = /* @__PURE__ */ d("svg", null, [
   /* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
 ], -1), Va = [
-  Ra
-], Aa = { class: "svc-context-container svc-logo-image-controls" }, za = {
+  Aa
+], za = { class: "svc-context-container svc-logo-image-controls" }, La = {
   key: 2,
   class: "svc-logo-image__loading"
-}, La = /* @__PURE__ */ g({
+}, Fa = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
-  setup(c) {
-    const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = I(), r = z(
+  setup(u) {
+    const t = u, e = k(() => t.data), o = k(() => e.value.survey), n = P(), r = z(
       () => new Me(e.value, null),
       [() => e.value]
-    ), l = I(), _ = () => {
+    ), l = P(), _ = () => {
       l.value = o.value.locLogo.renderedHtml;
     };
     return W(
       () => o.value.locLogo,
-      (q, b) => {
-        _(), q && q.onStringChanged.add(_), b && q.onStringChanged.remove(_);
+      (N, $) => {
+        _(), N && N.onStringChanged.add(_), $ && N.onStringChanged.remove(_);
       },
       {
         immediate: !0
       }
-    ), P(() => {
+    ), R(() => {
       n.value && (r.value.root = n.value);
     }), K(() => {
       r.value && (r.value.root = void 0);
-    }), (q, b) => (a(), i("div", {
+    }), (N, $) => (a(), i("div", {
       class: "svc-logo-image",
       ref_key: "root",
       ref: n
@@ -3289,117 +3335,117 @@ const wt = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Pa),
-      l.value ? p("", !0) : (a(), i(T, { key: 0 }, [
-        s(r).allowEdit && !s(r).isUploading ? C((a(), i("div", {
+      }, null, 8, Ra),
+      l.value ? p("", !0) : (a(), i(D, { key: 0 }, [
+        s(r).allowEdit && !s(r).isUploading ? h((a(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
-          onClick: b[0] || (b[0] = (w) => s(r).chooseFile(s(r)))
+          onClick: $[0] || ($[0] = (q) => s(r).chooseFile(s(r)))
         }, Va)), [
-          [s(N)]
+          [s(M)]
         ]) : p("", !0)
       ], 64)),
       l.value && !s(r).isUploading ? (a(), i("div", {
         key: 1,
         class: m(s(r).containerCss)
       }, [
-        d("div", Aa, [
-          C((a(), i("span", {
+        d("div", za, [
+          h((a(), i("span", {
             class: "svc-context-button",
-            onClick: b[1] || (b[1] = (w) => s(r).chooseFile(s(r))),
+            onClick: $[1] || ($[1] = (q) => s(r).chooseFile(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto"
             })
           ])), [
-            [s(N)]
+            [s(M)]
           ]),
-          C((a(), i("span", {
+          h((a(), i("span", {
             class: "svc-context-button svc-context-button--danger",
-            onClick: b[2] || (b[2] = (w) => s(r).remove(s(r))),
+            onClick: $[2] || ($[2] = (q) => s(r).remove(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-clear",
               size: "auto"
             })
           ])), [
-            [s(N)]
+            [s(M)]
           ])
         ]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-logo-image",
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(r).isUploading ? (a(), i("div", za, [
-        v(s(u), { is: "sv-loading-indicator" })
+      s(r).isUploading ? (a(), i("div", La, [
+        v(s(c), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), Fa = {
+}), Ka = {
   key: 0,
   class: "svc-search"
-}, Ka = { class: "svc-search__search-icon" }, Ua = ["aria-label", "placeholder", "tabindex"], Qa = { class: "svc-search__toolbar" }, Ha = { class: "svc-search__toolbar-counter" }, Oa = /* @__PURE__ */ g({
+}, Ua = { class: "svc-search__search-icon" }, Qa = ["aria-label", "placeholder", "tabindex"], Ha = { class: "svc-search__toolbar" }, Oa = { class: "svc-search__toolbar-counter" }, Ga = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.model);
-    const e = $({
+  setup(u) {
+    const t = u;
+    w(() => t.model);
+    const e = k({
       get: () => t.model.filterString,
       set: (o) => {
         const n = t.model;
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (a(), i("div", Fa, [
-      d("div", Ka, [
-        v(s(u), {
+    return (o, n) => o.model.isVisible ? (a(), i("div", Ka, [
+      d("div", Ua, [
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
         })
       ]),
-      C(d("input", {
+      h(d("input", {
         type: "text",
         class: "svc-search__input",
         "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder,
         tabindex: o.model.getTabIndex()
-      }, null, 8, Ua), [
+      }, null, 8, Qa), [
         [de, e.value]
       ]),
-      d("div", Qa, [
-        d("div", Ha, k(o.model.matchCounterText), 1),
-        v(s(u), {
+      d("div", Ha, [
+        d("div", Oa, f(o.model.matchCounterText), 1),
+        v(s(c), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
         }, null, 8, ["model"])
       ])
     ])) : p("", !0);
   }
-}), Ga = ["title"], Wa = /* @__PURE__ */ g({
+}), Wa = ["title"], ja = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
     pageEditMode: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new Se(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
-    ), o = I();
-    return P(() => {
+    ), o = P();
+    return R(() => {
       if (t.pageEditMode !== "bypage") {
         const n = o.value, r = e.value;
         n && r.attachToUI(n);
@@ -3409,34 +3455,34 @@ const wt = /* @__PURE__ */ g({
       n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
     }), K(() => {
       e.value.dispose();
-    }), (n, r) => C((a(), i("div", {
+    }), (n, r) => h((a(), i("div", {
       class: "svc-page-navigator",
       ref_key: "root",
       ref: o
     }, [
       d("div", null, [
-        C((a(), i("div", {
+        h((a(), i("div", {
           role: "button",
           class: m(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
           onClick: r[0] || (r[0] = (l) => s(e).togglePageSelector(l)),
           title: s(e).pageSelectorCaption
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-page-navigator__button-icon",
             iconName: s(e).icon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Ga)), [
-          [s(N)]
+        ], 10, Wa)), [
+          [s(M)]
         ]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
       ]),
       d("div", null, [
-        (a(!0), i(T, null, V(s(e).visibleItems, (l) => (a(), y(s(u), {
+        (a(!0), i(D, null, V(s(e).visibleItems, (l) => (a(), b(s(c), {
           is: "svc-page-navigator-item",
           key: l.id,
           model: l
@@ -3446,23 +3492,23 @@ const wt = /* @__PURE__ */ g({
       [Q, s(e).visible]
     ]);
   }
-}), ja = { class: "svc-page-navigator-item" }, Ja = ["title"], Za = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Xa = [
-  Za
-], Ya = { class: "svc-page-navigator-item__banner" }, xa = { class: "svc-page-navigator-item__text" }, el = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
+}), Ja = { class: "svc-page-navigator-item" }, Za = ["title"], Xa = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ya = [
+  Xa
+], xa = { class: "svc-page-navigator-item__banner" }, el = { class: "svc-page-navigator-item__text" }, ol = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
   /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), ol = /* @__PURE__ */ g({
+], -1), sl = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    f(() => t.model);
+  setup(u) {
+    const t = u;
+    w(() => t.model);
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (a(), i("div", ja, [
-      C((a(), i("div", {
+    return (o, n) => (a(), i("div", Ja, [
+      h((a(), i("div", {
         role: "button",
         class: m(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
@@ -3473,24 +3519,24 @@ const wt = /* @__PURE__ */ g({
         d("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Xa, 8, Ja),
-        d("div", Ya, [
-          d("span", xa, k(o.model.title), 1),
-          el
+        }, Ya, 8, Za),
+        d("div", xa, [
+          d("span", el, f(o.model.title), 1),
+          ol
         ])
       ], 2)), [
-        [s(N)]
+        [s(M)]
       ])
     ]));
   }
-}), sl = { class: "svc-question__dropdown-choices--wrapper" }, tl = { class: "svc-question__dropdown-choices" }, nl = /* @__PURE__ */ g({
+}), tl = { class: "svc-question__dropdown-choices--wrapper" }, nl = { class: "svc-question__dropdown-choices" }, al = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
     element: {}
   },
-  setup(c) {
-    const t = c, e = (n) => t.element.getItemValueWrapperComponentName(n) || t.model.itemComponent, o = (n) => ({
+  setup(u) {
+    const t = u, e = (n) => t.element.getItemValueWrapperComponentName(n) || t.model.itemComponent, o = (n) => ({
       componentName: t.model.itemComponent,
       componentData: {
         question: t.element,
@@ -3498,19 +3544,19 @@ const wt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (a(), i("div", sl, [
+    return (n, r) => (a(), i("div", tl, [
       d("div", null, [
-        d("div", tl, [
-          (a(!0), i(T, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
+        d("div", nl, [
+          (a(!0), i(D, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
             key: l.value,
             class: m(n.model.getChoiceCss())
           }, [
-            v(s(u), A({
+            v(s(c), A({
               is: e(l)
             }, o(l)), null, 16, ["is"])
           ], 2))), 128))
         ]),
-        n.model.needToCollapse ? (a(), y(s(u), {
+        n.model.needToCollapse ? (a(), b(s(c), {
           key: 0,
           is: "svc-action-button",
           text: n.model.getButtonText(),
@@ -3520,19 +3566,19 @@ const wt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), al = /* @__PURE__ */ g({
+}), ll = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new Be(
+  setup(u) {
+    const t = u, e = () => new Be(
       t.componentData.data,
       t.componentData.element,
       null
     );
-    return (o, n) => (a(), y(oe, {
+    return (o, n) => (a(), b(oe, {
       "create-model": e,
       element: o.componentData.element,
       "component-name": o.componentName,
@@ -3540,14 +3586,14 @@ const wt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), ll = { class: "svc-question__adorner" }, il = { class: "svc-question__content svc-question__content--in-popup" }, rl = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", dl = /* @__PURE__ */ g({
+}), il = { class: "svc-question__adorner" }, rl = { class: "svc-question__content svc-question__content--in-popup" }, dl = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", cl = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = $(
+  setup(u) {
+    const t = u, e = k(
       () => t.componentData.element
     ), o = (r) => e.value.getItemValueWrapperComponentName(r) || le, n = (r) => ({
       componentName: le,
@@ -3557,15 +3603,15 @@ const wt = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return f(() => e.value), (r, l) => (a(), i("div", ll, [
-      d("div", il, [
-        v(s(u), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        d("div", rl, [
-          (a(!0), i(T, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
+    return w(() => e.value), (r, l) => (a(), i("div", il, [
+      d("div", rl, [
+        v(s(c), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
+        d("div", dl, [
+          (a(!0), i(D, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
             key: _.value,
             class: "svc-question__dropdown-choice"
           }, [
-            v(s(u), A({
+            v(s(c), A({
               is: o(_)
             }, n(_)), null, 16, ["is"])
           ]))), 128))
@@ -3573,25 +3619,25 @@ const wt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), cl = ["data-sv-drop-target-survey-element"], ul = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), vl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), _l = { class: "svc-widget__content" }, gl = {
+}), ul = ["data-sv-drop-target-survey-element"], pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), vl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _l = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gl = { class: "svc-widget__content" }, bl = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, bl = /* @__PURE__ */ d("div", {
+}, yl = /* @__PURE__ */ d("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), yl = [
-  bl
-], hl = { class: "svc-question__content-actions" }, Cl = {
+}, null, -1), hl = [
+  yl
+], Cl = { class: "svc-question__content-actions" }, ql = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, ql = { class: "svc-panel__placeholder" }, $l = /* @__PURE__ */ g({
+}, $l = { class: "svc-panel__placeholder" }, kl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = P(), o = z(
       () => new ee(
         t.componentData.data,
         t.componentData.element,
@@ -3604,7 +3650,7 @@ const wt = /* @__PURE__ */ g({
     );
     return G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), P(() => {
+    }), R(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), (n, r) => s(o) ? (a(), i("div", {
       key: 0,
@@ -3615,61 +3661,61 @@ const wt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: e
     }, [
-      s(o).element.isInteractiveDesignElement ? C((a(), i("div", {
+      s(o).element.isInteractiveDesignElement ? h((a(), i("div", {
         key: 0,
         class: m(["svc-question__content", s(o).css()]),
         onClick: r[1] || (r[1] = (l) => s(o).select(s(o), l)),
         "data-bind": "clickBubble: false"
       }, [
-        ul,
         pl,
         vl,
         ml,
+        _l,
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (l) => s(o).onPointerDown(l))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           })
         ], 32)) : p("", !0),
-        d("div", _l, [
-          v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
+        d("div", gl, [
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (a(), i("div", gl, yl)) : p("", !0),
-        d("div", hl, [
-          v(s(u), {
+        s(o).isEmptyElement ? (a(), i("div", bl, hl)) : p("", !0),
+        d("div", Cl, [
+          v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
             handleClick: !1
           }, null, 8, ["model"])
         ])
       ], 2)), [
-        [s(N)]
+        [s(M)]
       ]) : p("", !0),
-      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(T, { key: 1 }, [
-        v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (a(), i("div", Cl, [
-          d("div", ql, k(s(o).placeholderText), 1)
+      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(D, { key: 1 }, [
+        v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+        s(o).isEmptyElement ? (a(), i("div", ql, [
+          d("div", $l, f(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, cl)) : p("", !0);
+    ], 42, ul)) : p("", !0);
   }
-}), kl = { class: "svc-carry-forward-panel-wrapper" }, fl = { class: "svc-carry-forward-panel" }, wl = { class: "svc-carry-forward-panel__link" }, Tl = /* @__PURE__ */ g({
+}), fl = { class: "svc-carry-forward-panel-wrapper" }, wl = { class: "svc-carry-forward-panel" }, Dl = { class: "svc-carry-forward-panel__link" }, Tl = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
-  setup(c) {
-    return (t, e) => (a(), i("div", kl, [
-      d("div", fl, [
-        d("span", null, k(t.model.text) + k(" "), 1),
-        d("span", wl, [
-          v(s(u), {
+  setup(u) {
+    return (t, e) => (a(), i("div", fl, [
+      d("div", wl, [
+        d("span", null, f(t.model.text) + f(" "), 1),
+        d("span", Dl, [
+          v(s(c), {
             is: "svc-action-button",
             text: t.model.actionText,
             click: t.model.onClick.bind(t.model)
@@ -3679,27 +3725,27 @@ const wt = /* @__PURE__ */ g({
     ]));
   }
 });
-function Dl(c, t, e) {
-  c(t, e);
+function Nl(u, t, e) {
+  u(t, e);
 }
-function pe(c) {
-  const t = Dl.bind(
+function pe(u) {
+  const t = Nl.bind(
     void 0,
-    c
+    u
   );
-  t("svc-tabbed-menu", Ge), t("svc-tabbed-menu-item-wrapper", je), t("svc-tabbed-menu-item", Ze), t("svc-side-bar", eo), t("svc-side-bar-default-header", no), t("svc-side-bar-page", ao), t("svc-tabs", ro), t("svc-tab-control", go), t("svc-tab-button", qo), t("svc-property-grid-placeholder", Do), t("svc-side-bar-header", Eo), t("svc-side-bar-property-grid-header", Fo), t("svc-property-grid", io), t("svc-object-selector", lo), t("svc-search", Oa), t("svc-switcher", Yo), t("svc-action-button", Go), t("svc-question-error", Ko), t("survey-embeddedsurvey", Qs), t("sv-logic-operator", Us), t("survey-linkvalue", Hs), t("survey-color", it), t("color-item", rt), t("sv-boolean-switch", wt), t("survey-fileedit", vt), t("survey-spinedit", bt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", os), t("svc-tab-preview", is), t("svc-complete-page", ds), t("survey-results", Cs), t("survey-results-table-row", $s), t("json-error-item", Rs), t("svc-tab-json-editor-textarea", Bs), t("svc-tab-json-editor-ace", Ts), t("svc-tab-translation", Js), t("sd-translation-line-skeleton", et), t("svc-translate-from-action", ot), t("svc-tab-logic", Ls), t("svc-tab-theme", nt), t("svc-toolbox", zt), t("svc-toolbox-list", Zt), t("svc-toolbox-category", Jt), t("svc-toolbox-tool", Ft), t("svc-toolbox-item", Ht), t("svc-toolbox-item-group", Ot), t(Ie, Et), t("svc-tab-designer", dn), t("svc-page-navigator", Wa), t("svc-page-navigator-item", ol), t("svc-page", hn), t("svc-row", Tn), t("svc-add-new-question-btn", qn), t("svc-add-question-type-selector", kn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", An), t("svc-image-question-adorner", Qn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", dl), t("svc-question-editor-content", Ea), t("svc-logo-image", La), t("svc-panel", va), t("svc-item-value", Ca), t("svc-image-item-value", Ia), t("svc-dropdown-question", al), t("svc-dropdown-question-adorner", nl), t("svc-widget-question", $l), t("svc-question-banner", Tl);
+  t("svc-tabbed-menu", Ge), t("svc-tabbed-menu-item-wrapper", je), t("svc-tabbed-menu-item", Ze), t("svc-side-bar", eo), t("svc-side-bar-default-header", no), t("svc-side-bar-page", ao), t("svc-tabs", ro), t("svc-tab-control", go), t("svc-tab-button", qo), t("svc-property-grid-placeholder", To), t("svc-side-bar-header", Eo), t("svc-side-bar-property-grid-header", Fo), t("svc-property-grid", io), t("svc-object-selector", lo), t("svc-search", Ga), t("svc-switcher", Yo), t("svc-action-button", Go), t("svc-question-error", Ko), t("survey-embeddedsurvey", Qs), t("sv-logic-operator", Us), t("survey-linkvalue", Hs), t("survey-color", it), t("color-item", rt), t("sv-boolean-switch", wt), t("survey-fileedit", vt), t("survey-spinedit", bt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", os), t("svc-tab-preview", is), t("svc-complete-page", ds), t("survey-results", Cs), t("survey-results-table-row", $s), t("json-error-item", Rs), t("svc-tab-json-editor-textarea", Bs), t("svc-tab-json-editor-ace", Ds), t("svc-tab-translation", Js), t("sd-translation-line-skeleton", et), t("svc-translate-from-action", ot), t("svc-tab-logic", Ls), t("svc-tab-theme", nt), t("svc-toolbox", zt), t("svc-toolbox-list", Zt), t("svc-toolbox-category", Jt), t("svc-toolbox-tool", Ft), t("svc-toolbox-item", Ht), t("svc-toolbox-item-group", Ot), t(Ie, Et), t("svc-tab-designer", dn), t("svc-page-navigator", ja), t("svc-page-navigator-item", sl), t("svc-page", hn), t("svc-row", Dn), t("svc-add-new-question-btn", qn), t("svc-add-question-type-selector", kn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", Vn), t("svc-image-question-adorner", Qn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", cl), t("svc-question-editor-content", Pa), t("svc-logo-image", Fa), t("svc-panel", va), t("svc-item-value", qa), t("svc-image-item-value", Ea), t("svc-dropdown-question", ll), t("svc-dropdown-question-adorner", al), t("svc-widget-question", kl), t("svc-question-banner", Tl);
 }
 pe(
-  (c, t) => ie.Instance.registerComponent(c, t)
+  (u, t) => ie.Instance.registerComponent(u, t)
 );
-const Il = {
-  install(c) {
-    c.component("SurveyCreatorComponent", Oe), pe((t, e) => {
-      c.component(t, e), ie.Instance.registerComponent(t, t);
+const El = {
+  install(u) {
+    u.component("SurveyCreatorComponent", Oe), pe((t, e) => {
+      u.component(t, e), ie.Instance.registerComponent(t, t);
     });
   }
 };
 export {
   Oe as SurveyCreatorComponent,
-  Il as surveyCreatorPlugin
+  El as surveyCreatorPlugin
 };