survey-creator-vue 2.0.0-rc.3 → 2.0.0-rc.4

package/survey-creator-vue.es.js

@@ -1,23 +1,23 @@
-import { useBase as k, SvComponent as u, key2ClickDirective as D, SurveyComponent as Q, useQuestion as H, ComponentFactory as ie } from "survey-vue3-ui";
-import { defineComponent as g, computed as $, toRaw as _e, ref as E, onMounted as B, onUnmounted as L, openBlock as l, createElementBlock as i, Fragment as f, createVNode as p, unref as s, createElementVNode as a, normalizeClass as _, normalizeStyle as K, createCommentVNode as v, renderList as R, createBlock as q, nextTick as re, withDirectives as h, toDisplayString as w, vShow as F, renderSlot as X, withCtx as Y, createTextVNode as ge, shallowRef as be, watch as G, onBeforeUnmount as x, vModelText as de, onUpdated as ee, mergeProps as V } from "vue";
-import { ResponsivityManager as ye, CssClassBuilder as he, RendererFactory as ce, DropdownListModel as Ce, VerticalResponsivityManager as qe } from "survey-core";
-import { ScrollViewModel as $e, editorLocalization as ue, SurveyResultsModel as we, initLogicOperator as fe, StringEditorViewModelBase as ke, ToolboxToolViewModel as Te, PageAdorner as De, RowViewModel as Ne, QuestionAdornerViewModel as oe, QuestionImageAdornerViewModel as Me, QuestionRatingAdornerViewModel as Se, MatrixCellWrapperViewModel as Ie, ItemValueWrapperViewModel as Ee, ImageItemValueWrapperViewModel as Be, LogoImageViewModel as Pe, PageNavigatorViewModel as Re, QuestionDropdownAdornerViewModel as Ve, editableStringRendererName as Ae } from "survey-creator-core";
-const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Le = { class: "svc-top-bar" }, Fe = {
+import { useBase as k, SvComponent as u, key2ClickDirective as D, SurveyComponent as Q, useQuestion as H, ComponentFactory as re } from "survey-vue3-ui";
+import { defineComponent as g, computed as $, toRaw as ge, ref as E, onMounted as B, onUnmounted as L, openBlock as l, createElementBlock as i, Fragment as f, createVNode as v, unref as s, createElementVNode as a, normalizeClass as _, normalizeStyle as K, createCommentVNode as p, renderList as R, createBlock as h, nextTick as de, withDirectives as C, toDisplayString as w, vShow as F, renderSlot as X, withCtx as Y, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as x, vModelText as ce, onUpdated as ee, mergeProps as V } from "vue";
+import { ResponsivityManager as he, CssClassBuilder as Ce, RendererFactory as ue, DropdownListModel as qe, VerticalResponsivityManager as $e } from "survey-core";
+import { ScrollViewModel as we, editorLocalization as pe, SurveyResultsModel as fe, initLogicOperator as ke, StringEditorViewModelBase as Te, ToolboxToolViewModel as De, PageAdorner as Ne, RowViewModel as Me, QuestionAdornerViewModel as oe, QuestionImageAdornerViewModel as Se, QuestionRatingAdornerViewModel as Ie, MatrixCellWrapperViewModel as Ee, ItemValueWrapperViewModel as Be, ImageItemValueWrapperViewModel as Pe, LogoImageViewModel as Re, PageNavigatorViewModel as Ve, QuestionDropdownAdornerViewModel as Ae, editableStringRendererName as ze } from "survey-creator-core";
+const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Fe = { class: "svc-top-bar" }, Ke = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
-}, Ke = ["v-show"], Ue = { class: "svc-creator__content-holder svc-flex-column" }, He = ["id"], Oe = {
+}, Ue = ["v-show"], He = { class: "svc-creator__content-holder svc-flex-column" }, Oe = ["id"], Qe = {
   key: 0,
   class: "svc-footer-bar"
-}, Qe = ["v-show"], Ge = {
+}, Ge = ["v-show"], We = {
   key: 0,
   class: "svc-creator__banner"
-}, We = ["innerHTML"], je = /* @__PURE__ */ g({
+}, je = ["innerHTML"], Je = /* @__PURE__ */ g({
   __name: "Creator",
   props: {
     model: {}
   },
   setup(c) {
-    const t = c, e = $(() => _e(t.model)), o = E();
+    const t = c, e = $(() => ge(t.model)), o = E();
     return k(
       () => e.value,
       (n, r) => {
@@ -27,8 +27,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       o.value && t.model.setRootElement(o.value);
     }), L(() => {
       t.model.unsubscribeRootElement();
-    }), (n, r) => e.value.isCreatorDisposed ? v("", !0) : (l(), i(f, { key: 0 }, [
-      p(s(u), { is: "survey-popup-modal" }),
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (l(), i(f, { key: 0 }, [
+      v(s(u), { is: "survey-popup-modal" }),
       a("div", {
         class: _(e.value.getRootCss()),
         style: K(e.value.themeVariables),
@@ -36,7 +36,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ref: o
       }, [
         a("div", null, [
-          p(s(u), { is: "sv-svg-bundle" })
+          v(s(u), { is: "sv-svg-bundle" })
         ]),
         a("div", {
           class: _(["svc-full-container svc-creator__area svc-flex-column", {
@@ -48,31 +48,31 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               "svc-creator__side-bar--left": e.value.sidebarLocation == "left"
             }])
           }, [
-            a("div", ze, [
-              a("div", Le, [
-                e.value.showTabs ? (l(), i("div", Fe, [
-                  p(s(u), {
+            a("div", Le, [
+              a("div", Fe, [
+                e.value.showTabs ? (l(), i("div", Ke, [
+                  v(s(u), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
                   }, null, 8, ["model"])
-                ])) : v("", !0),
+                ])) : p("", !0),
                 e.value.showToolbar ? (l(), i("div", {
                   key: 1,
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.showToolbar
                 }, [
-                  p(s(u), {
+                  v(s(u), {
                     is: "sv-action-bar",
                     model: e.value.toolbar
                   }, null, 8, ["model"])
-                ], 8, Ke)) : v("", !0)
+                ], 8, Ue)) : p("", !0)
               ]),
               a("div", {
                 class: _(["svc-creator__content-wrapper svc-flex-row", {
                   "svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
                 }])
               }, [
-                a("div", Ue, [
+                a("div", He, [
                   (l(!0), i(f, null, R(e.value.tabs, (d) => (l(), i(f, null, [
                     e.value.viewType == d.id && d.visible ? (l(), i("div", {
                       class: _(["svc-creator-tab", {
@@ -81,39 +81,39 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                       key: d.id,
                       id: "scrollableDiv-" + d.id
                     }, [
-                      p(s(u), {
+                      v(s(u), {
                         is: d.componentContent,
                         model: d.data.model
                       }, null, 8, ["is", "model"])
-                    ], 10, He)) : v("", !0)
+                    ], 10, Oe)) : p("", !0)
                   ], 64))), 256))
                 ])
               ], 2),
-              e.value.isMobileView ? (l(), i("div", Oe, [
+              e.value.isMobileView ? (l(), i("div", Qe, [
                 a("div", {
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
                 }, [
-                  p(s(u), {
+                  v(s(u), {
                     is: "sv-action-bar",
                     model: e.value.footerToolbar
                   }, null, 8, ["model"])
-                ], 8, Qe)
-              ])) : v("", !0)
+                ], 8, Ge)
+              ])) : p("", !0)
             ]),
-            e.value.sidebar ? (l(), q(s(u), {
+            e.value.sidebar ? (l(), h(s(u), {
               key: 0,
               is: "svc-side-bar",
               model: e.value.sidebar
-            }, null, 8, ["model"])) : v("", !0)
+            }, null, 8, ["model"])) : p("", !0)
           ], 2),
-          e.value.haveCommercialLicense ? v("", !0) : (l(), i("div", Ge, [
+          e.value.haveCommercialLicense ? p("", !0) : (l(), i("div", We, [
             a("span", {
               class: "svc-creator__non-commercial-text",
               innerHTML: e.value.licenseText
-            }, null, 8, We)
+            }, null, 8, je)
           ])),
-          p(s(u), {
+          v(s(u), {
             is: "sv-notifier",
             model: e.value.notifier
           }, null, 8, ["model"])
@@ -121,7 +121,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 6)
     ], 64));
   }
-}), Je = /* @__PURE__ */ g({
+}), Ze = /* @__PURE__ */ g({
   __name: "TabbedMenu",
   props: {
     model: {}
@@ -131,7 +131,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     let e;
     const o = E();
     return k(() => t.model), B(() => {
-      e = new ye(o.value, t.model);
+      e = new he(o.value, t.model);
     }), L(() => {
       e.dispose(), e = void 0;
     }), (n, r) => (l(), i("div", {
@@ -139,14 +139,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref_key: "container",
       ref: o
     }, [
-      (l(!0), i(f, null, R(n.model.renderedActions, (d) => (l(), q(s(u), {
+      (l(!0), i(f, null, R(n.model.renderedActions, (d) => (l(), h(s(u), {
         key: d.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: d
       }, null, 8, ["item"]))), 128))
     ], 512));
   }
-}), Ze = { class: "sv-action__content" }, Xe = /* @__PURE__ */ g({
+}), Xe = { class: "sv-action__content" }, Ye = /* @__PURE__ */ g({
   __name: "TabbedMenuItemWrapper",
   props: {
     item: {}
@@ -156,7 +156,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     return k(() => e.item), B(() => {
       const o = e.item;
       o.updateModeCallback = (n, r) => {
-        o.mode = n, re(() => r(n, t.value));
+        o.mode = n, de(() => r(n, t.value));
       }, o.afterRender();
     }), L(() => {
       const o = e.item;
@@ -166,22 +166,22 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref_key: "root",
       ref: t
     }, [
-      a("div", Ze, [
-        p(s(u), {
+      a("div", Xe, [
+        v(s(u), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
         }, null, 8, ["is", "item"])
       ])
     ], 2));
   }
-}), Ye = /* @__PURE__ */ g({
+}), xe = /* @__PURE__ */ g({
   __name: "TabbedMenuItem",
   props: {
     item: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.item), (e, o) => h((l(), i("div", {
+    return k(() => t.item), (e, o) => C((l(), i("div", {
       class: _(["svc-tabbed-menu-item", e.item.getRootCss()]),
       onClick: o[0] || (o[0] = //@ts-ignore
       (...n) => e.item.action && e.item.action(...n))
@@ -189,20 +189,20 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       e.item.hasTitle ? (l(), i("span", {
         key: 0,
         class: _(e.item.getTitleCss())
-      }, w(e.item.title), 3)) : v("", !0),
-      e.item.hasIcon ? (l(), q(s(u), {
+      }, w(e.item.title), 3)) : p("", !0),
+      e.item.hasIcon ? (l(), h(s(u), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
         size: "auto",
         class: _(e.item.getIconCss()),
         title: e.item.tooltip || e.item.title
-      }, null, 8, ["iconName", "class", "title"])) : v("", !0)
+      }, null, 8, ["iconName", "class", "title"])) : p("", !0)
     ], 2)), [
       [s(D)]
     ]);
   }
-}), xe = { class: "svc-flex-row svc-side-bar__wrapper" }, eo = { class: "svc-side-bar__container-wrapper" }, oo = { class: "svc-side-bar__container-content" }, so = /* @__PURE__ */ g({
+}), eo = { class: "svc-flex-row svc-side-bar__wrapper" }, oo = { class: "svc-side-bar__container-wrapper" }, so = { class: "svc-side-bar__container-content" }, to = /* @__PURE__ */ g({
   __name: "SideBar",
   props: {
     model: {}
@@ -213,28 +213,28 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       t.model.initResizeManager(e.value);
     }), L(() => {
       t.model.resetResizeManager();
-    }), (o, n) => h((l(), i("div", {
+    }), (o, n) => C((l(), i("div", {
       class: _(["svc-side-bar", o.model.rootCss])
     }, [
-      h(a("div", {
+      C(a("div", {
         class: "svc-side-bar__shadow",
         onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
       }, null, 512), [
         [F, o.model.renderContainer]
       ]),
-      a("div", xe, [
-        h(a("div", eo, [
+      a("div", eo, [
+        C(a("div", oo, [
           a("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
             ref: e
           }, [
-            p(s(u), {
+            v(s(u), {
               is: o.model.header.component,
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
-            a("div", oo, [
-              (l(!0), i(f, null, R(o.model.pages, (r, d) => (l(), q(s(u), {
+            a("div", so, [
+              (l(!0), i(f, null, R(o.model.pages, (r, d) => (l(), h(s(u), {
                 key: d,
                 is: "svc-side-bar-page",
                 model: r
@@ -244,68 +244,68 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ], 512), [
           [F, o.model.renderContainer]
         ]),
-        o.model.sideAreaComponentName ? (l(), q(s(u), {
+        o.model.sideAreaComponentName ? (l(), h(s(u), {
           key: 0,
           is: o.model.sideAreaComponentName,
           model: o.model.sideAreaComponentData
-        }, null, 8, ["is", "model"])) : v("", !0)
+        }, null, 8, ["is", "model"])) : p("", !0)
       ])
     ], 2)), [
       [F, o.model.renderRoot]
     ]);
   }
-}), to = { class: "svc-side-bar__container-header" }, no = { class: "svc-side-bar__container-actions" }, lo = {
+}), no = { class: "svc-side-bar__container-header" }, lo = { class: "svc-side-bar__container-actions" }, ao = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, ao = /* @__PURE__ */ g({
+}, io = /* @__PURE__ */ g({
   __name: "SideBarDefaultHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", to, [
-      a("div", no, [
-        p(s(u), {
+    return k(() => t.model), (e, o) => (l(), i("div", no, [
+      a("div", lo, [
+        v(s(u), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (l(), i("div", lo, w(e.model.title), 1)) : v("", !0)
+      e.model.title ? (l(), i("div", ao, w(e.model.title), 1)) : p("", !0)
     ]));
   }
-}), io = /* @__PURE__ */ g({
+}), ro = /* @__PURE__ */ g({
   __name: "SideBarPage",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => e.model.visible ? (l(), q(s(u), {
+    return k(() => t.model), (e, o) => e.model.visible ? (l(), h(s(u), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
-    }, null, 8, ["is", "model"])) : v("", !0);
+    }, null, 8, ["is", "model"])) : p("", !0);
   }
-}), ro = /* @__PURE__ */ g({
+}), co = /* @__PURE__ */ g({
   __name: "ObjectSelector",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => e.model.isVisible ? (l(), q(s(u), {
+    return k(() => t.model), (e, o) => e.model.isVisible ? (l(), h(s(u), {
       key: 0,
       is: "sv-list",
       model: e.model.list
-    }, null, 8, ["model"])) : v("", !0);
+    }, null, 8, ["model"])) : p("", !0);
   }
-}), co = { class: "svc-scroll__container" }, uo = /* @__PURE__ */ a("div", { class: "svc-scroll__scrollbar-sizer" }, null, -1), vo = [
-  uo
+}), uo = { class: "svc-scroll__container" }, po = /* @__PURE__ */ a("div", { class: "svc-scroll__scrollbar-sizer" }, null, -1), vo = [
+  po
 ], W = /* @__PURE__ */ g({
   __name: "Scroll",
   setup(c) {
-    const t = new $e(), e = E();
+    const t = new we(), e = E();
     return B(() => {
       t.setRootElement(e.value);
     }), L(() => {
@@ -319,7 +319,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: "svc-scroll__scroller sv-drag-target-skipped",
         onScroll: n[0] || (n[0] = () => s(t).onScrollContainer())
       }, [
-        a("div", co, [
+        a("div", uo, [
           X(o.$slots, "default")
         ])
       ], 32),
@@ -329,7 +329,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       }, vo, 32)
     ], 512));
   }
-}), po = /* @__PURE__ */ g({
+}), mo = /* @__PURE__ */ g({
   __name: "PropertyGrid",
   props: {
     model: {}
@@ -339,37 +339,37 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     return k(() => t.model), (e, o) => (l(), i("div", {
       class: _(e.model.rootCss)
     }, [
-      p(s(u), {
+      v(s(u), {
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
-      p(W, null, {
+      v(W, null, {
         default: Y(() => [
-          e.model.survey ? (l(), q(s(Q), {
+          e.model.survey ? (l(), h(s(Q), {
             key: 0,
             survey: e.model.survey
-          }, null, 8, ["survey"])) : v("", !0)
+          }, null, 8, ["survey"])) : p("", !0)
         ]),
         _: 1
       })
     ], 2));
   }
-}), mo = /* @__PURE__ */ g({
+}), _o = /* @__PURE__ */ g({
   __name: "Tabs",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(!0), i(f, null, R(e.model.actions, (n, r) => (l(), q(s(u), {
+    return k(() => t.model), (e, o) => (l(!0), i(f, null, R(e.model.actions, (n, r) => (l(), h(s(u), {
       key: r,
       is: "svc-tab-button",
       model: n
     }, null, 8, ["model"]))), 128));
   }
-}), _o = { class: "svc-sidebar-tabs__top-container" }, go = { class: "svc-sidebar-tabs__collapse-button" }, bo = /* @__PURE__ */ a("div", { class: "svc-sidebar-tabs__separator" }, [
+}), go = { class: "svc-sidebar-tabs__top-container" }, bo = { class: "svc-sidebar-tabs__collapse-button" }, yo = /* @__PURE__ */ a("div", { class: "svc-sidebar-tabs__separator" }, [
   /* @__PURE__ */ a("div")
-], -1), yo = { class: "svc-sidebar-tabs__items" }, ho = { class: "svc-sidebar-tabs__bottom-container" }, Co = { class: "svc-sidebar-tabs__items" }, qo = /* @__PURE__ */ g({
+], -1), ho = { class: "svc-sidebar-tabs__items" }, Co = { class: "svc-sidebar-tabs__bottom-container" }, qo = { class: "svc-sidebar-tabs__items" }, $o = /* @__PURE__ */ g({
   __name: "TabControl",
   props: {
     model: {}
@@ -379,18 +379,18 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     return k(() => t.model), (e, o) => (l(), i("div", {
       class: _(e.model.sideBarClassName)
     }, [
-      a("div", _o, [
-        a("div", go, [
-          p(s(u), {
+      a("div", go, [
+        a("div", bo, [
+          v(s(u), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
           }, null, 8, ["model"])
         ]),
-        bo,
-        p(W, null, {
+        yo,
+        v(W, null, {
           default: Y(() => [
-            a("div", yo, [
-              p(s(u), {
+            a("div", ho, [
+              v(s(u), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
               }, null, 8, ["model"])
@@ -399,9 +399,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           _: 1
         })
       ]),
-      a("div", ho, [
-        a("div", Co, [
-          p(s(u), {
+      a("div", Co, [
+        a("div", qo, [
+          v(s(u), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
           }, null, 8, ["model"])
@@ -409,91 +409,91 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), $o = { class: "svc-menu-action" }, wo = ["title"], fo = { class: "svc-menu-action__icon" }, ko = { class: "svc-menu-action__icon-container" }, To = /* @__PURE__ */ g({
+}), wo = { class: "svc-menu-action" }, fo = ["title"], ko = { class: "svc-menu-action__icon" }, To = { class: "svc-menu-action__icon-container" }, Do = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", $o, [
-      h((l(), i("div", {
+    return k(() => t.model), (e, o) => (l(), i("div", wo, [
+      C((l(), i("div", {
         class: _(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        a("div", fo, [
-          a("div", ko, [
-            p(s(u), {
+        a("div", ko, [
+          a("div", To, [
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
               size: "auto"
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, wo)), [
+      ], 10, fo)), [
         [s(D), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ]));
   }
-}), Do = { class: "svc-property-grid-placeholder" }, No = { class: "svc-property-grid-placeholder__header" }, Mo = { class: "svc-property-grid-placeholder__title" }, So = { class: "svc-property-grid-placeholder__description" }, Io = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
+}), No = { class: "svc-property-grid-placeholder" }, Mo = { class: "svc-property-grid-placeholder__header" }, So = { class: "svc-property-grid-placeholder__title" }, Io = { class: "svc-property-grid-placeholder__description" }, Eo = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
   /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__gap" }),
   /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__image" })
-], -1), Eo = /* @__PURE__ */ g({
+], -1), Bo = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(c) {
-    const t = ue;
-    return (e, o) => (l(), i("div", Do, [
-      a("div", No, [
-        a("span", Mo, w(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        a("span", So, w(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+    const t = pe;
+    return (e, o) => (l(), i("div", No, [
+      a("div", Mo, [
+        a("span", So, w(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        a("span", Io, w(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      Io
+      Eo
     ]));
   }
-}), Bo = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Po = {
+}), Po = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Ro = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, Ro = {
+}, Vo = {
   key: 1,
   class: "svc-sidebar__header-caption"
-}, Vo = { class: "svc-sidebar__header-title" }, Ao = { class: "svc-sidebar__header-subtitle" }, zo = /* @__PURE__ */ g({
+}, Ao = { class: "svc-sidebar__header-title" }, zo = { class: "svc-sidebar__header-subtitle" }, Lo = /* @__PURE__ */ g({
   __name: "SideBarHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Bo, [
-      e.model.subTitle ? v("", !0) : (l(), i("div", Po, w(e.model.title), 1)),
-      e.model.subTitle ? (l(), i("div", Ro, [
-        a("span", Vo, w(e.model.title), 1),
-        a("span", Ao, w(e.model.subTitle), 1)
-      ])) : v("", !0)
+    return k(() => t.model), (e, o) => (l(), i("div", Po, [
+      e.model.subTitle ? p("", !0) : (l(), i("div", Ro, w(e.model.title), 1)),
+      e.model.subTitle ? (l(), i("div", Vo, [
+        a("span", Ao, w(e.model.title), 1),
+        a("span", zo, w(e.model.subTitle), 1)
+      ])) : p("", !0)
     ]));
   }
-}), Lo = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Fo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Ko = { class: "svc-sidebar__header-content" }, Uo = { class: "svc-sidebar__header-caption" }, Ho = { class: "svc-sidebar__header-title" }, Oo = { class: "svc-sidebar__header-subtitle" }, Qo = /* @__PURE__ */ g({
+}), Fo = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Ko = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Uo = { class: "svc-sidebar__header-content" }, Ho = { class: "svc-sidebar__header-caption" }, Oo = { class: "svc-sidebar__header-title" }, Qo = { class: "svc-sidebar__header-subtitle" }, Go = /* @__PURE__ */ g({
   __name: "SideBarPropertyGridHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Lo, [
-      a("div", Fo, [
-        a("div", Ko, [
-          h((l(), i("div", {
+    return k(() => t.model), (e, o) => (l(), i("div", Fo, [
+      a("div", Ko, [
+        a("div", Uo, [
+          C((l(), i("div", {
             class: _(e.model.buttonClassName),
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
-            a("div", Uo, [
-              a("span", Ho, w(e.model.title), 1),
-              a("span", Oo, w(e.model.tooltip), 1)
+            a("div", Ho, [
+              a("span", Oo, w(e.model.title), 1),
+              a("span", Qo, w(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(D), { processEsc: !1 }]
           ]),
-          p(s(u), {
+          v(s(u), {
             is: "sv-popup",
             model: e.model.popupModel
           }, null, 8, ["model"])
@@ -501,7 +501,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ]));
   }
-}), Go = /* @__PURE__ */ g({
+}), Wo = /* @__PURE__ */ g({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -511,7 +511,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     return (t, e) => (l(), i("div", { key: t.errorKey }, [
-      p(s(u), {
+      v(s(u), {
         is: "sv-svg-icon",
         class: _(t.cssClasses.error.icon),
         iconName: "icon-alert_24x24",
@@ -522,14 +522,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "survey-string",
           locString: t.error.locText
         }, null, 8, ["locString"])
       ], 2)
     ]));
   }
-}), Wo = ["title"], jo = ["title"], Jo = ["title"], Zo = ["title"], Xo = /* @__PURE__ */ g({
+}), jo = ["title"], Jo = ["title"], Zo = ["title"], Xo = ["title"], Yo = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     classes: {},
@@ -544,22 +544,22 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(c) {
     const t = c, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
-    }, o = () => new he().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();
+    }, o = () => new Ce().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
     return (n, r) => (l(), i(f, null, [
-      n.iconName ? v("", !0) : (l(), i(f, { key: 0 }, [
+      n.iconName ? p("", !0) : (l(), i(f, { key: 0 }, [
         n.disabled ? (l(), i("span", {
           key: 0,
           class: _(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
-        }, w(n.text), 11, Wo)) : v("", !0),
-        h((l(), i("span", {
+        }, w(n.text), 11, jo)) : p("", !0),
+        C((l(), i("span", {
           role: "button",
           class: _(["svc-action-button", o()]),
           onClick: e,
           title: n.title
         }, [
-          ge(w(n.text), 1)
-        ], 10, jo)), [
+          be(w(n.text), 1)
+        ], 10, Jo)), [
           [s(D)]
         ])
       ], 64)),
@@ -569,45 +569,45 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           class: _(o()),
           title: n.title
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Jo)) : v("", !0),
-        h((l(), i("span", {
+        ], 10, Zo)) : p("", !0),
+        C((l(), i("span", {
           role: "button",
           onClick: e,
           class: _(o()),
           title: n.title
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Zo)), [
+        ], 10, Xo)), [
           [s(D)]
         ])
-      ], 64)) : v("", !0)
+      ], 64)) : p("", !0)
     ], 64));
   }
-}), Yo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], xo = /* @__PURE__ */ a("div", { class: "svc-switcher__icon-thumb" }, null, -1), es = [
-  xo
-], os = {
+}), xo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], es = /* @__PURE__ */ a("div", { class: "svc-switcher__icon-thumb" }, null, -1), os = [
+  es
+], ss = {
   key: 0,
   class: "svc-switcher__title"
-}, ss = {
+}, ts = {
   inheritAttrs: !1
-}, ts = /* @__PURE__ */ g({
-  ...ss,
+}, ns = /* @__PURE__ */ g({
+  ...ts,
   __name: "Switcher",
   props: {
     item: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.item), (e, o) => h((l(), i("button", {
+    return k(() => t.item), (e, o) => C((l(), i("button", {
       class: _(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -624,16 +624,16 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }, [
       a("div", {
         class: _(e.item.getSwitcherIconCss())
-      }, es, 2),
-      e.item.hasTitle ? (l(), i("span", os, w(e.item.title), 1)) : v("", !0)
-    ], 42, Yo)), [
+      }, os, 2),
+      e.item.hasTitle ? (l(), i("span", ss, w(e.item.title), 1)) : p("", !0)
+    ], 42, xo)), [
       [s(D), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
   }
-}), ns = {
+}), ls = {
   key: 0,
   class: "svd-simulator-content"
-}, ls = { class: "svd-simulator-content" }, as = /* @__PURE__ */ g({
+}, as = { class: "svd-simulator-content" }, is = /* @__PURE__ */ g({
   __name: "Simulator",
   props: {
     model: {}
@@ -652,8 +652,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onMouseover: d[1] || (d[1] = (m) => o()),
       onMouseout: d[2] || (d[2] = (m) => n())
     }, [
-      r.model.hasFrame ? v("", !0) : (l(), i("div", ns, [
-        p(s(u), {
+      r.model.hasFrame ? p("", !0) : (l(), i("div", ls, [
+        v(s(u), {
           is: "survey-widget",
           model: r.model.survey
         }, null, 8, ["model"])
@@ -675,17 +675,17 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
           })
         }, [
-          a("div", ls, [
-            p(s(u), {
+          a("div", as, [
+            v(s(u), {
               is: "survey-widget",
               model: r.model.survey
             }, null, 8, ["model"])
           ])
         ], 4)
-      ], 4)) : v("", !0)
+      ], 4)) : p("", !0)
     ], 34));
   }
-}), is = { class: "svc-surface-placeholder" }, rs = { class: "svc-surface-placeholder__text" }, ds = { class: "svc-surface-placeholder__title" }, cs = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
+}), rs = { class: "svc-surface-placeholder" }, ds = { class: "svc-surface-placeholder__text" }, cs = { class: "svc-surface-placeholder__title" }, us = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
   __name: "SurfacePlaceholder",
   props: {
     name: {},
@@ -693,23 +693,20 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     placeholderDescriptionText: {}
   },
   setup(c) {
-    return (t, e) => (l(), i("div", is, [
+    return (t, e) => (l(), i("div", rs, [
       a("div", {
         class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + t.name])
       }, null, 2),
-      a("div", rs, [
-        a("div", ds, w(t.placeholderTitleText), 1),
-        a("div", cs, w(t.placeholderDescriptionText), 1)
+      a("div", ds, [
+        a("div", cs, w(t.placeholderTitleText), 1),
+        a("div", us, w(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
-}), us = {
-  key: 0,
-  class: "svc-test-tab--empty"
-}, vs = {
+}), ps = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, ps = /* @__PURE__ */ g({
+}, vs = /* @__PURE__ */ g({
   __name: "Test",
   props: {
     model: {}
@@ -721,34 +718,33 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (l(), i("div", us, [
-        p(j, {
-          name: "preview",
-          placeholderTitleText: e.model.placeholderTitleText,
-          placeholderDescriptionText: e.model.placeholderDescriptionText
-        }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])
-      ])) : v("", !0),
-      e.model.survey.isEmpty ? v("", !0) : (l(), i("div", {
+      e.model.survey.isEmpty ? (l(), h(j, {
+        key: 0,
+        name: "preview",
+        placeholderTitleText: e.model.placeholderTitleText,
+        placeholderDescriptionText: e.model.placeholderDescriptionText
+      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
+      e.model.survey.isEmpty ? p("", !0) : (l(), i("div", {
         key: 1,
         class: "svc-plugin-tab__content",
         onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (l(), q(s(u), {
+        e.model.showResults ? (l(), h(s(u), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
-        }, null, 8, ["survey"])) : v("", !0)
+        }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
-      e.model.isPageToolbarVisible ? (l(), i("div", vs, [
-        p(s(u), {
+      e.model.isPageToolbarVisible ? (l(), i("div", ps, [
+        v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
-      ])) : v("", !0)
+      ])) : p("", !0)
     ], 2));
   }
 }), ms = { class: "svc-btn__text" }, _s = /* @__PURE__ */ g({
@@ -759,7 +755,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c, e = $(() => t.model.testAgainAction);
-    return k(() => e.value), (o, n) => h((l(), i("div", {
+    return k(() => e.value), (o, n) => C((l(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
@@ -771,7 +767,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   }
 });
 function A(c, t, e) {
-  const o = be(), n = G(
+  const o = ye(), n = G(
     t.map((r) => () => r()),
     () => {
       o.value = c();
@@ -794,7 +790,7 @@ const gs = {
   },
   setup(c) {
     const t = c, e = A(
-      () => t.survey ? new we(t.survey) : void 0,
+      () => t.survey ? new fe(t.survey) : void 0,
       [() => t.survey]
     );
     return (o, n) => s(e) ? (l(), i("div", gs, [
@@ -802,14 +798,14 @@ const gs = {
         a("div", ys, [
           a("div", hs, w(s(e).surveyResultsText), 1),
           a("div", Cs, [
-            p(s(u), {
+            v(s(u), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
               click: s(e).selectTableClick,
               disabled: !1,
               selected: s(e).isTableSelected
             }, null, 8, ["text", "click", "selected"]),
-            p(s(u), {
+            v(s(u), {
               is: "svc-action-button",
               text: s(e).surveyResultsJsonText,
               click: s(e).selectJsonClick,
@@ -818,12 +814,12 @@ const gs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        h(a("div", qs, [
+        C(a("div", qs, [
           a("div", null, w(s(e).resultText), 1)
         ], 512), [
           [F, s(e).resultViewType === "text"]
         ]),
-        h(a("div", $s, [
+        C(a("div", $s, [
           a("table", null, [
             a("thead", null, [
               a("tr", ws, [
@@ -832,7 +828,7 @@ const gs = {
               ])
             ]),
             a("tbody", null, [
-              (l(!0), i(f, null, R(s(e).resultData, (r, d) => (l(), q(s(u), {
+              (l(!0), i(f, null, R(s(e).resultData, (r, d) => (l(), h(s(u), {
                 is: "survey-results-table-row",
                 model: r,
                 key: d
@@ -843,7 +839,7 @@ const gs = {
           [F, s(e).resultViewType === "table"]
         ])
       ])
-    ])) : v("", !0);
+    ])) : p("", !0);
   }
 }), Ds = { key: 2 }, Ns = /* @__PURE__ */ g({
   __name: "SurveyResultsRow",
@@ -853,7 +849,7 @@ const gs = {
   setup(c) {
     const t = c;
     return k(() => t.model), (e, o) => (l(), i(f, null, [
-      h((l(), i("tr", {
+      C((l(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
       }, [
@@ -866,13 +862,13 @@ const gs = {
             class: _(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
             style: K({ left: e.model.markerMargin })
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-expand_16x16",
               size: 16
             })
-          ], 6)) : v("", !0),
-          e.model.question ? (l(), q(s(u), {
+          ], 6)) : p("", !0),
+          e.model.question ? (l(), h(s(u), {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
@@ -887,11 +883,11 @@ const gs = {
       ])), [
         [s(D)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (l(!0), i(f, { key: 0 }, R(e.model.data, (n, r) => (l(), q(s(u), {
+      e.model.isNode && !e.model.collapsed ? (l(!0), i(f, { key: 0 }, R(e.model.data, (n, r) => (l(), h(s(u), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
-      }, null, 8, ["model"]))), 128)) : v("", !0)
+      }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
 }), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Is = { class: "svc-json-editor-tab__errros_list" }, Es = /* @__PURE__ */ g({
@@ -908,8 +904,8 @@ const gs = {
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        h(a("div", Is, [
-          p(s(u), {
+        C(a("div", Is, [
+          v(s(u), {
             is: "sv-list",
             model: o.model.errorList
           }, null, 8, ["model"])
@@ -931,7 +927,7 @@ const gs = {
       n.textElement = e.value;
     }), (n, r) => (l(), i("div", Bs, [
       a("div", Ps, [
-        h(a("textarea", {
+        C(a("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
           disabled: s(o).readOnly,
@@ -941,10 +937,10 @@ const gs = {
           ref: e
         }, `
       `, 40, Rs), [
-          [de, s(o).text]
+          [ce, s(o).text]
         ]),
-        h(a("div", Vs, [
-          p(s(u), {
+        C(a("div", Vs, [
+          v(s(u), {
             is: "sv-list",
             model: s(o).errorList
           }, null, 8, ["model"])
@@ -966,7 +962,7 @@ const gs = {
       o.stopPropagation(), t.item.data.fixError();
     };
     return (o, n) => (l(), i(f, null, [
-      p(s(u), {
+      v(s(u), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
@@ -974,12 +970,12 @@ const gs = {
       }, null, 8, ["iconName", "size"]),
       a("div", zs, [
         a("div", Ls, [
-          p(s(u), {
+          v(s(u), {
             is: "survey-string",
             locString: o.item.locTitle
           }, null, 8, ["locString"])
         ]),
-        o.item.data.showFixButton ? h((l(), i("button", {
+        o.item.data.showFixButton ? C((l(), i("button", {
           key: 0,
           type: "button",
           onClick: e,
@@ -987,18 +983,18 @@ const gs = {
           "aria-label": o.item.data.fixButtonTitle,
           class: "svc-json-error__fix-button"
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
         ], 8, Fs)), [
           [s(D)]
-        ]) : v("", !0)
+        ]) : p("", !0)
       ])
     ], 64));
   }
-}), Us = { class: "svc-btn__text" }, Hs = /* @__PURE__ */ g({
+}), Us = { class: "svc-btn__text" }, ne = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
@@ -1009,7 +1005,7 @@ const gs = {
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
-    return (o, n) => h((l(), i("div", {
+    return (o, n) => C((l(), i("div", {
       role: "button",
       class: _(["svc-logic-tab__content-action svc-btn", {
         "svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
@@ -1021,52 +1017,58 @@ const gs = {
       [s(D)]
     ]);
   }
-}), Os = { class: "svc-creator-tab__content" }, Qs = {
-  key: 0,
+}), Hs = { class: "svc-creator-tab__content" }, Os = {
+  key: 1,
   class: "svc-logic-tab__content-empty"
-}, Gs = /* @__PURE__ */ g({
+}, Qs = /* @__PURE__ */ g({
   __name: "Logic",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return k(() => t.model), (e, o) => (l(), i("div", Os, [
+    return k(() => t.model), (e, o) => (l(), i("div", Hs, [
       a("div", {
         class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
-        p(s(Q), {
-          model: e.model.itemsSurvey
-        }, null, 8, ["model"]),
-        e.model.hasItems ? v("", !0) : (l(), i("div", Qs, [
-          p(j, {
+        e.model.hasItems ? (l(), i(f, { key: 0 }, [
+          v(s(Q), {
+            model: e.model.itemsSurvey
+          }, null, 8, ["model"]),
+          e.model.readOnly ? p("", !0) : (l(), h(ne, {
+            key: 0,
+            model: e.model.addNewButton
+          }, null, 8, ["model"]))
+        ], 64)) : p("", !0),
+        e.model.hasItems ? p("", !0) : (l(), i("div", Os, [
+          v(j, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
             placeholderDescriptionText: e.model.placeholderDescriptionText
-          }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])
-        ])),
-        e.model.readOnly ? v("", !0) : (l(), q(Hs, {
-          key: 1,
-          model: e.model.addNewButton
-        }, null, 8, ["model"]))
+          }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
+          e.model.readOnly ? p("", !0) : (l(), h(ne, {
+            key: 0,
+            model: e.model.addNewButton
+          }, null, 8, ["model"]))
+        ]))
       ], 2)
     ]));
   }
-}), Ws = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], js = ["id"];
-ce.Instance.registerRenderer(
+}), Gs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Ws = ["id"];
+ue.Instance.registerRenderer(
   "dropdown",
   "logicoperator",
   "sv-logic-operator"
 );
-const Js = /* @__PURE__ */ g({
+const js = /* @__PURE__ */ g({
   __name: "LogicOperator",
   props: {
     question: {}
   },
   setup(c) {
-    const t = c, e = E(), o = $(() => t.question.dropdownListModel ?? new Ce(t.question));
+    const t = c, e = E(), o = $(() => t.question.dropdownListModel ?? new qe(t.question));
     H(t, e, (m) => {
-      fe(m);
+      ke(m);
     });
     const n = (m) => {
       var b;
@@ -1081,7 +1083,7 @@ const Js = /* @__PURE__ */ g({
     return (m, b) => (l(), i("div", {
       class: _(m.question.cssClasses.selectWrapper)
     }, [
-      m.question.isReadOnly ? v("", !0) : (l(), i(f, { key: 0 }, [
+      m.question.isReadOnly ? p("", !0) : (l(), i(f, { key: 0 }, [
         a("div", {
           class: _(m.question.getControlClass()),
           onClick: n,
@@ -1099,19 +1101,19 @@ const Js = /* @__PURE__ */ g({
           a("div", {
             class: _(m.question.cssClasses.controlValue)
           }, [
-            m.question.selectedItemLocText ? (l(), q(s(u), {
+            m.question.selectedItemLocText ? (l(), h(s(u), {
               key: 0,
               is: "survey-string",
               locString: m.question.selectedItemLocText
-            }, null, 8, ["locString"])) : v("", !0),
+            }, null, 8, ["locString"])) : p("", !0),
             a("div", null, w(m.question.readOnlyText), 1)
           ], 2),
-          m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? h((l(), i("div", {
+          m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? C((l(), i("div", {
             key: 0,
             class: _(m.question.cssClasses.cleanButton),
             onClick: r
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               class: _(m.question.cssClasses.cleanButtonSvg),
               iconName: m.question.cssClasses.cleanButtonIconId,
@@ -1120,9 +1122,9 @@ const Js = /* @__PURE__ */ g({
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
             [F, !m.question.isEmpty()]
-          ]) : v("", !0)
-        ], 42, Ws),
-        p(s(u), {
+          ]) : p("", !0)
+        ], 42, Gs),
+        v(s(u), {
           is: "sv-popup",
           model: m.question.popupModel
         }, null, 8, ["model"])
@@ -1133,16 +1135,16 @@ const Js = /* @__PURE__ */ g({
         class: _(m.question.getControlClass()),
         id: m.question.inputId
       }, [
-        m.question.selectedItemLocText ? (l(), q(s(u), {
+        m.question.selectedItemLocText ? (l(), h(s(u), {
           key: 0,
           is: "survey-string",
           locString: m.question.selectedItemLocText
-        }, null, 8, ["locString"])) : v("", !0),
+        }, null, 8, ["locString"])) : p("", !0),
         a("div", null, w(m.question.readOnlyText), 1)
-      ], 10, js)) : v("", !0)
+      ], 10, Ws)) : p("", !0)
     ], 2));
   }
-}), Zs = /* @__PURE__ */ g({
+}), Js = /* @__PURE__ */ g({
   __name: "EmbeddedSurvey",
   props: {
     question: {}
@@ -1151,23 +1153,23 @@ const Js = /* @__PURE__ */ g({
     const t = c, e = E();
     H(t, e);
     const o = $(() => t.question.embeddedSurvey);
-    return (n, r) => n.question && o.value && o.value.currentPage ? (l(), q(s(u), {
+    return (n, r) => n.question && o.value && o.value.currentPage ? (l(), h(s(u), {
       key: 0,
       is: "survey-page",
       page: o.value.currentPage,
       survey: o.value
-    }, null, 8, ["page", "survey"])) : v("", !0);
+    }, null, 8, ["page", "survey"])) : p("", !0);
   }
-}), Xs = /* @__PURE__ */ g({
+}), Zs = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "LinkValue",
   props: {
     question: {}
   },
   setup(c) {
-    const t = c, e = E(), o = ue.getString("pe.clear");
+    const t = c, e = E(), o = pe.getString("pe.clear");
     return H(t, e), (n, r) => (l(), i(f, null, [
-      p(s(u), {
+      v(s(u), {
         is: "svc-action-button",
         text: n.question.linkValueText,
         click: n.question.doLinkClick.bind(n.question),
@@ -1177,20 +1179,20 @@ const Js = /* @__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 ? (l(), q(s(u), {
+      !n.question.isReadOnly && n.question.showClear ? (l(), h(s(u), {
         key: 0,
         is: "svc-action-button",
         text: s(o),
         click: n.question.doClearClick.bind(n.question),
         disabled: !1,
         classes: n.question.linkClearButtonCssClasses
-      }, null, 8, ["text", "click", "classes"])) : v("", !0)
+      }, null, 8, ["text", "click", "classes"])) : p("", !0)
     ], 64));
   }
-}), Ys = {
+}), Xs = {
   key: 1,
   class: "st-content"
-}, xs = { class: "svc-flex-column st-strings-wrapper" }, et = { class: "svc-flex-row st-strings-header" }, ot = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, st = /* @__PURE__ */ g({
+}, Ys = { class: "svc-flex-column st-strings-wrapper" }, xs = { class: "svc-flex-row st-strings-header" }, et = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, ot = /* @__PURE__ */ g({
   __name: "Translation",
   props: {
     model: {}
@@ -1200,21 +1202,21 @@ const Js = /* @__PURE__ */ g({
     return k(() => t.model), (e, o) => (l(), i("div", {
       class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
-      e.model.isEmpty ? (l(), q(j, {
+      e.model.isEmpty ? (l(), h(j, {
         key: 0,
         name: "translation",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
-      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : v("", !0),
-      e.model.isEmpty ? v("", !0) : (l(), i("div", Ys, [
-        a("div", xs, [
-          a("div", et, [
-            p(s(Q), {
+      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
+      e.model.isEmpty ? p("", !0) : (l(), i("div", Xs, [
+        a("div", Ys, [
+          a("div", xs, [
+            v(s(Q), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
-          a("div", ot, [
-            p(s(Q), {
+          a("div", et, [
+            v(s(Q), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
           ])
@@ -1222,16 +1224,16 @@ const Js = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), tt = (c, t) => {
+}), st = (c, t) => {
   const e = c.__vccOpts || c;
   for (const [o, n] of t)
     e[o] = n;
   return e;
-}, nt = {}, lt = { class: "sd-translation-line-skeleton" };
-function at(c, t) {
-  return l(), i("div", lt);
+}, tt = {}, nt = { class: "sd-translation-line-skeleton" };
+function lt(c, t) {
+  return l(), i("div", nt);
 }
-const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
+const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
   props: {
     item: {}
@@ -1243,22 +1245,19 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
       a("span", {
         class: _(t.item.data.additionalTitleCss)
       }, w(t.item.data.additionalTitle), 3),
-      p(s(u), {
+      v(s(u), {
         is: "sv-action-bar-item-dropdown",
         item: t.item
       }, null, 8, ["item"])
     ], 2));
   }
-}), dt = {
-  key: 0,
-  class: "svc-test-tab--empty"
-}, ct = {
+}), rt = {
   key: 1,
   class: "svc-plugin-tab__content"
-}, ut = {
+}, dt = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, vt = /* @__PURE__ */ g({
+}, ct = /* @__PURE__ */ g({
   __name: "Theme",
   props: {
     model: {}
@@ -1270,33 +1269,32 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (l(), i("div", dt, [
-        p(j, {
-          name: "theme",
-          placeholderTitleText: e.model.placeholderTitleText,
-          placeholderDescriptionText: e.model.placeholderDescriptionText
-        }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])
-      ])) : v("", !0),
-      e.model.survey.isEmpty ? v("", !0) : (l(), i("div", ct, [
-        p(s(u), {
+      e.model.survey.isEmpty ? (l(), h(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) : (l(), i("div", rt, [
+        v(s(u), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (l(), q(s(u), {
+        e.model.showResults ? (l(), h(s(u), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
-        }, null, 8, ["survey"])) : v("", !0)
+        }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (l(), i("div", ut, [
-        p(s(u), {
+      e.model.isPageToolbarVisible ? (l(), i("div", dt, [
+        v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
-      ])) : v("", !0)
+      ])) : p("", !0)
     ], 2));
   }
-}), pt = ["disabled", "value"], mt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], _t = /* @__PURE__ */ g({
+}), ut = ["disabled", "value"], pt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], vt = /* @__PURE__ */ g({
   __name: "Color",
   props: {
     question: {}
@@ -1311,7 +1309,7 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         class: _(e.question.getSwatchCss()),
         style: K(e.question.getSwatchStyle())
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           iconName: e.question.cssClasses.swatchIcon,
           size: "auto"
@@ -1324,7 +1322,7 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
           tabindex: "-1",
           onChange: o[0] || (o[0] = //@ts-ignore
           (...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n))
-        }, null, 42, pt)
+        }, null, 42, ut)
       ], 6),
       a("input", {
         autocomplete: "off",
@@ -1345,20 +1343,20 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
-      }, null, 42, mt),
+      }, null, 42, pt),
       e.question.showDropdownAction ? (l(), i(f, { key: 0 }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-action-bar-item",
           item: e.question.dropdownAction
         }, null, 8, ["item"]),
-        p(s(u), {
+        v(s(u), {
           is: "sv-popup",
           model: e.question.dropdownAction.popupModel
         }, null, 8, ["model"])
-      ], 64)) : v("", !0)
+      ], 64)) : p("", !0)
     ], 34));
   }
-}), gt = /* @__PURE__ */ g({
+}), mt = /* @__PURE__ */ g({
   __name: "ColorItem",
   props: {
     model: {},
@@ -1373,13 +1371,13 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         class: "spg-color-editor__color-swatch",
         style: K(e())
       }, null, 4),
-      p(s(u), {
+      v(s(u), {
         is: "survey-string",
         locString: o.item.locTitle
       }, null, 8, ["locString"])
     ], 64));
   }
-}), bt = ["disabled", "value", "placeholder"], yt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], ht = ["disabled"], Ct = ["for", "aria-label"], qt = /* @__PURE__ */ g({
+}), _t = ["disabled", "value", "placeholder"], gt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], bt = ["disabled"], yt = ["for", "aria-label"], ht = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
@@ -1411,7 +1409,7 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         onBlur: n[1] || (n[1] = //@ts-ignore
         (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
-      }, null, 42, bt),
+      }, null, 42, _t),
       a("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
@@ -1427,27 +1425,27 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         accept: o.question.acceptedTypes,
         onChange: n[2] || (n[2] = //@ts-ignore
         (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
-      }, null, 42, yt),
+      }, null, 42, gt),
       a("div", {
         class: _(o.question.cssClasses.buttonsContainer)
       }, [
-        h((l(), i("button", {
+        C((l(), i("button", {
           type: "button",
           class: _(o.question.cssClasses.clearButton),
           disabled: o.question.getIsClearButtonDisabled(),
           onClick: n[3] || (n[3] = //@ts-ignore
           (...r) => o.question.doClean && o.question.doClean(...r))
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.clearButtonIcon,
             size: "auto",
             title: o.question.clearButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, ht)), [
+        ], 10, bt)), [
           [s(D)]
         ]),
-        h((l(), i("label", {
+        C((l(), i("label", {
           role: "button",
           class: _(o.question.getChooseButtonCss()),
           for: o.question.inputId,
@@ -1455,19 +1453,19 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
           onClick: n[4] || (n[4] = //@ts-ignore
           (...r) => o.question.chooseFiles && o.question.chooseFiles(...r))
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.chooseButtonIcon,
             size: "auto",
             title: o.question.chooseButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, Ct)), [
+        ], 10, yt)), [
           [s(D)]
         ])
       ], 2)
     ], 34));
   }
-}), $t = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], wt = ["disabled"], ft = ["disabled"], kt = /* @__PURE__ */ g({
+}), Ct = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], qt = ["disabled"], $t = ["disabled"], wt = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
@@ -1501,7 +1499,7 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
-      }, null, 42, $t),
+      }, null, 42, Ct),
       a("span", {
         class: _(e.question.cssClasses.buttonsContainer)
       }, [
@@ -1520,12 +1518,12 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, wt),
+        ], 42, qt),
         a("button", {
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
@@ -1541,16 +1539,16 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, ft)
+        ], 42, $t)
       ], 2)
     ], 34));
   }
-}), Tt = ["disabled", "title"], ne = /* @__PURE__ */ g({
+}), ft = ["disabled", "title"], le = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
@@ -1560,7 +1558,7 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
     return H(t, E()), (o, n) => (l(), i("div", {
       class: _(o.question.getRootClass())
     }, [
-      p(s(u), {
+      v(s(u), {
         is: e(),
         question: o.question
       }, null, 8, ["is", "question"]),
@@ -1571,28 +1569,28 @@ const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
         (...r) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...r)),
         title: o.question.resetValueAdorner.caption
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Tt)
+      ], 10, ft)
     ], 2));
   }
-}), Dt = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Nt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
+}), kt = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Tt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
-], -1), Mt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
+], -1), Dt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
-], -1), St = [
-  Nt,
-  Mt
-], It = { class: "spg-boolean-switch__caption" }, Et = { class: "spg-boolean-switch__title" };
-ce.Instance.registerRenderer(
+], -1), Nt = [
+  Tt,
+  Dt
+], Mt = { class: "spg-boolean-switch__caption" }, St = { class: "spg-boolean-switch__title" };
+ue.Instance.registerRenderer(
   "boolean",
   "switch",
   "sv-boolean-switch"
 );
-const Bt = /* @__PURE__ */ g({
+const It = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -1609,26 +1607,26 @@ const Bt = /* @__PURE__ */ g({
       "aria-errormessage": o.question.ariaErrormessage,
       onClick: n[0] || (n[0] = (r) => o.question.value = !o.question.value)
     }, [
-      h((l(), i("div", {
+      C((l(), i("div", {
         class: _(["spg-boolean-switch__button", o.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
-      }, St, 2)), [
+      }, Nt, 2)), [
         [s(D), { disableTabStop: !0 }]
       ]),
-      a("div", It, [
-        a("div", Et, [
-          p(s(u), {
+      a("div", Mt, [
+        a("div", St, [
+          v(s(u), {
             is: "survey-string",
             locString: o.question.locTitle
           }, null, 8, ["locString"])
         ])
       ])
-    ], 8, Dt));
+    ], 8, kt));
   }
-}), Pt = { class: "svc-string-editor__content" }, Rt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Vt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), At = { class: "svc-string-editor__input" }, zt = ["textContent", "aria-placeholder", "contenteditable"], Lt = ["aria-placeholder", "contenteditable", "innerHTML"], Ft = {
+}), Et = { class: "svc-string-editor__content" }, Bt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Pt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Rt = { class: "svc-string-editor__input" }, Vt = ["textContent", "aria-placeholder", "contenteditable"], At = ["aria-placeholder", "contenteditable", "innerHTML"], zt = {
   key: 0,
   class: "svc-string-editor__error"
-}, Kt = /* @__PURE__ */ g({
+}, Lt = /* @__PURE__ */ g({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -1636,85 +1634,85 @@ const Bt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = E(), r = E(), d = A(
       () => {
-        const C = new ke(
+        const q = new Te(
           e.value,
           o.value
         );
-        return C.setLocString(e.value), C.blurEditor = () => {
+        return q.setLocString(e.value), q.blurEditor = () => {
           n.value && (n.value.blur(), n.value.spellcheck = !1);
-        }, C.getEditorElement = () => n.value, setTimeout(() => C.afterRender()), C;
+        }, q.getEditorElement = () => n.value, setTimeout(() => q.afterRender()), q;
       },
       [() => o.value, () => e.value],
-      (C) => {
-        C && (C.blurEditor = void 0, C.getEditorElement = void 0, C.dispose());
+      (q) => {
+        q && (q.blurEditor = void 0, q.getEditorElement = void 0, q.dispose());
       }
     ), m = $(() => {
-      var C;
-      return (C = d.value) == null ? void 0 : C.errorText;
+      var q;
+      return (q = d.value) == null ? void 0 : q.errorText;
     }), b = $(() => {
-      var C;
-      return (C = d.value) == null ? void 0 : C.className(e.value.renderedHtml);
+      var q;
+      return (q = d.value) == null ? void 0 : q.className(e.value.renderedHtml);
     }), y = $(() => {
-      var C;
-      return (C = d.value) == null ? void 0 : C.placeholder;
+      var q;
+      return (q = d.value) == null ? void 0 : q.placeholder;
     }), N = $(() => {
-      var C;
-      return (C = d.value) == null ? void 0 : C.contentEditable;
+      var q;
+      return (q = d.value) == null ? void 0 : q.contentEditable;
     }), O = $(() => {
-      var C;
-      return (C = d.value) == null ? void 0 : C.characterCounter;
+      var q;
+      return (q = d.value) == null ? void 0 : q.characterCounter;
     }), P = $(
       () => {
-        var C;
-        return (C = d.value) == null ? void 0 : C.showCharacterCounter;
+        var q;
+        return (q = d.value) == null ? void 0 : q.showCharacterCounter;
       }
     ), z = $(
       () => {
-        var C;
-        return (C = d.value) == null ? void 0 : C.getCharacterCounterClass;
+        var q;
+        return (q = d.value) == null ? void 0 : q.getCharacterCounterClass;
       }
-    ), J = (C) => {
+    ), J = (q) => {
       var T, I;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = d.value) == null || T.onBlur(C), (I = d.value) == null ? void 0 : I.errorText;
-    }, U = (C) => {
+      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = d.value) == null || T.onBlur(q), (I = d.value) == null ? void 0 : I.errorText;
+    }, U = (q) => {
       var T;
-      (T = d.value) == null || T.onFocus(C);
-    }, pe = (C) => {
+      (T = d.value) == null || T.onFocus(q);
+    }, me = (q) => {
       var T;
-      (T = d.value) == null || T.onPaste(C);
-    }, te = (C) => {
+      (T = d.value) == null || T.onPaste(q);
+    }, te = (q) => {
       var T, I;
-      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (I = d.value) == null || I.onClick(C);
+      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (I = d.value) == null || I.onClick(q);
     }, Z = () => {
       r.value = e.value.renderedHtml;
-    }, me = G(
+    }, _e = G(
       () => e.value,
-      (C, T) => {
-        T && C.onStringChanged.remove(Z), C && (C.onStringChanged.add(Z), Z());
+      (q, T) => {
+        T && q.onStringChanged.remove(Z), q && (q.onStringChanged.add(Z), Z());
       },
       {
         immediate: !0
       }
     );
     return B(() => {
-      var C;
-      e.value.__isEditing && ((C = n.value) == null || C.focus());
+      var q;
+      e.value.__isEditing && ((q = n.value) == null || q.focus());
     }), L(() => {
-      me(), e.value.onStringChanged.remove(Z);
-    }), (C, T) => (l(), i("span", {
+      _e(), e.value.onStringChanged.remove(Z);
+    }), (q, T) => (l(), i("span", {
       class: _(b.value)
     }, [
-      a("span", Pt, [
-        Rt,
-        Vt,
-        a("span", At, [
-          e.value.hasHtml ? v("", !0) : (l(), i("span", {
+      a("span", Et, [
+        Bt,
+        Pt,
+        a("span", Rt, [
+          e.value.hasHtml ? p("", !0) : (l(), i("span", {
             key: 0,
             role: "textbox",
             class: "sv-string-editor",
             spellcheck: "false",
             onFocus: U,
-            onPaste: pe,
+            onPaste: me,
             onBlur: J,
             onInput: T[0] || (T[0] = //@ts-ignore
             (...I) => {
@@ -1752,7 +1750,7 @@ const Bt = /* @__PURE__ */ g({
             contenteditable: N.value,
             ref_key: "root",
             ref: n
-          }, null, 40, zt)),
+          }, null, 40, Vt)),
           e.value.hasHtml ? (l(), i("span", {
             key: 1,
             role: "textbox",
@@ -1791,28 +1789,28 @@ const Bt = /* @__PURE__ */ g({
             innerHTML: r.value,
             ref_key: "root",
             ref: n
-          }, null, 40, Lt)) : v("", !0),
-          P.value ? (l(), q(s(u), {
+          }, null, 40, At)) : p("", !0),
+          P.value ? (l(), h(s(u), {
             key: 2,
             is: "sv-character-counter",
             counter: O.value,
             remainingCharacterCounter: z.value
-          }, null, 8, ["counter", "remainingCharacterCounter"])) : v("", !0)
+          }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      m.value ? (l(), i("span", Ft, w(m.value), 1)) : v("", !0)
+      m.value ? (l(), i("span", zt, w(m.value), 1)) : p("", !0)
     ], 2));
   }
-}), Ut = {
+}), Ft = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, Ht = /* @__PURE__ */ a("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Ot = {
+}, Kt = /* @__PURE__ */ a("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Ut = {
   key: 1,
   class: "svc-toolbox__placeholder"
-}, Qt = {
+}, Ht = {
   key: 1,
   class: "svc-toolbox__category"
-}, Gt = /* @__PURE__ */ g({
+}, Ot = /* @__PURE__ */ g({
   __name: "AdaptiveToolbox",
   props: {
     model: {}
@@ -1822,7 +1820,7 @@ const Bt = /* @__PURE__ */ g({
     k(() => e.value);
     let n;
     B(() => {
-      e.value.setRootElement(o.value), n = new qe(
+      e.value.setRootElement(o.value), n = new $e(
         e.value.containerElement,
         e.value
       );
@@ -1839,32 +1837,32 @@ const Bt = /* @__PURE__ */ g({
         onFocusout: m[0] || (m[0] = (b) => e.value.focusOut(b)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (l(), i("div", Ut, [
-          e.value.isCompactRendered ? (l(), q(s(u), {
+        e.value.showSearch ? (l(), i("div", Ft, [
+          e.value.isCompactRendered ? (l(), h(s(u), {
             is: "svc-toolbox-tool",
             creator: d.model,
             key: "searchitem",
             item: e.value.searchItem,
             parentModel: e.value,
             isCompact: e.value.isCompactRendered
-          }, null, 8, ["creator", "item", "parentModel", "isCompact"])) : v("", !0),
-          p(s(u), {
+          }, null, 8, ["creator", "item", "parentModel", "isCompact"])) : p("", !0),
+          v(s(u), {
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
-          Ht
-        ])) : v("", !0),
-        e.value.showPlaceholder ? (l(), i("div", Ot, w(e.value.toolboxNoResultsFound), 1)) : v("", !0),
-        p(W, null, {
+          Kt
+        ])) : p("", !0),
+        e.value.showPlaceholder ? (l(), i("div", Ut, w(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        v(W, null, {
           default: Y(() => [
-            e.value.showInSingleCategory ? v("", !0) : (l(!0), i(f, { key: 0 }, R(e.value.categories, (b, y) => (l(), q(s(u), {
+            e.value.showInSingleCategory ? p("", !0) : (l(!0), i(f, { key: 0 }, R(e.value.categories, (b, y) => (l(), h(s(u), {
               is: "svc-toolbox-category",
               key: y,
               category: b,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (l(), i("div", Qt, [
-              (l(!0), i(f, null, R(r.value, (b) => (l(), q(s(u), {
+            e.value.showInSingleCategory ? (l(), i("div", Ht, [
+              (l(!0), i(f, null, R(r.value, (b) => (l(), h(s(u), {
                 key: b.renderedId,
                 is: "svc-toolbox-tool",
                 creator: d.model,
@@ -1872,17 +1870,17 @@ const Bt = /* @__PURE__ */ g({
                 parentModel: e.value,
                 isCompact: e.value.isCompactRendered
               }, null, 8, ["creator", "item", "parentModel", "isCompact"]))), 128))
-            ])) : v("", !0)
+            ])) : p("", !0)
           ]),
           _: 1
         })
       ], 32)
     ], 2));
   }
-}), Wt = {
+}), Qt = {
   key: 0,
   class: "svc-toolbox__category-separator"
-}, jt = /* @__PURE__ */ g({
+}, Gt = /* @__PURE__ */ g({
   __name: "ToolboxTool",
   props: {
     creator: {},
@@ -1892,7 +1890,7 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = A(
-      () => new Te(
+      () => new De(
         t.item,
         t.creator,
         t.parentModel
@@ -1905,7 +1903,7 @@ const Bt = /* @__PURE__ */ g({
     return B(() => {
       const n = t.item;
       n.updateModeCallback = (r, d) => {
-        n.mode = r, re(() => d(r, o.value));
+        n.mode = r, de(() => d(r, o.value));
       }, n.afterRender();
     }), L(() => {
       const n = t.item;
@@ -1917,7 +1915,7 @@ const Bt = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (l(), i("div", Wt)) : v("", !0),
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (l(), i("div", Qt)) : p("", !0),
         a("div", {
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
@@ -1926,7 +1924,7 @@ const Bt = /* @__PURE__ */ g({
             return ((b = s(e)) == null ? void 0 : b.onPointerDown) && ((y = s(e)) == null ? void 0 : y.onPointerDown(...m));
           })
         }, [
-          p(s(u), {
+          v(s(u), {
             viewModel: s(e),
             is: (d = s(e)) == null ? void 0 : d.itemComponent,
             item: n.item,
@@ -1937,10 +1935,10 @@ const Bt = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Jt = ["aria-label", "title"], Zt = { class: "svc-toolbox__item-container" }, Xt = {
+}), Wt = ["aria-label", "title"], jt = { class: "svc-toolbox__item-container" }, Jt = {
   key: 0,
   class: "svc-toolbox__item-title"
-}, Yt = /* @__PURE__ */ g({
+}, Zt = /* @__PURE__ */ g({
   __name: "ToolboxItem",
   props: {
     creator: {},
@@ -1950,24 +1948,24 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     return (t, e) => (l(), i(f, null, [
-      h((l(), i("div", {
+      C((l(), i("div", {
         class: _(["svc-toolbox__item", t.item.renderedCss]),
         role: "button",
         "aria-label": t.item.tooltip,
         title: t.item.tooltip,
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
-        a("span", Zt, [
-          t.item.iconName ? (l(), q(s(u), {
+        a("span", jt, [
+          t.item.iconName ? (l(), h(s(u), {
             key: 0,
             is: "sv-svg-icon",
             iconName: t.item.iconName,
             size: "auto",
             class: "svc-toolbox__item-icon"
-          }, null, 8, ["iconName"])) : v("", !0)
+          }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? v("", !0) : (l(), i("span", Xt, w(t.item.title), 1))
-      ], 10, Jt)), [
+        t.isCompact ? p("", !0) : (l(), i("span", Jt, w(t.item.title), 1))
+      ], 10, Wt)), [
         [s(D)]
       ]),
       t.isCompact ? (l(), i("span", {
@@ -1975,17 +1973,17 @@ const Bt = /* @__PURE__ */ g({
         class: "svc-toolbox__item-banner",
         onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           iconName: t.item.iconName,
           size: 24,
           class: "svc-toolbox__item-icon"
         }, null, 8, ["iconName"]),
         a("span", null, w(t.item.title), 1)
-      ])) : v("", !0)
+      ])) : p("", !0)
     ], 64));
   }
-}), xt = /* @__PURE__ */ g({
+}), Xt = /* @__PURE__ */ g({
   __name: "ToolboxItemGroup",
   props: {
     creator: {},
@@ -2000,7 +1998,7 @@ const Bt = /* @__PURE__ */ g({
       t.viewModel.onMouseLeave(t.item, n);
     };
     return (n, r) => (l(), i(f, null, [
-      p(s(u), {
+      v(s(u), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
         item: n.item,
@@ -2012,22 +2010,22 @@ const Bt = /* @__PURE__ */ g({
         onMouseover: e,
         onMouseleave: o
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           iconName: n.item.subitemsButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        p(s(u), {
+        v(s(u), {
           is: "sv-popup",
           model: n.item.popupModel
         }, null, 8, ["model"])
       ], 32)
     ], 64));
   }
-}), en = { className: "svc-toolbox__category-header-wrapper" }, on = { class: "svc-toolbox__category-title" }, sn = {
+}), Yt = { className: "svc-toolbox__category-header-wrapper" }, xt = { class: "svc-toolbox__category-title" }, en = {
   key: 0,
   class: "svc-toolbox__category-header__controls"
-}, tn = { className: "svc-toolbox__category-header-wrapper" }, nn = /* @__PURE__ */ g({
+}, on = { className: "svc-toolbox__category-header-wrapper" }, sn = /* @__PURE__ */ g({
   __name: "ToolboxCategory",
   props: {
     category: {},
@@ -2041,17 +2039,17 @@ const Bt = /* @__PURE__ */ g({
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
-      a("div", en, [
-        h((l(), i("div", {
+      a("div", Yt, [
+        C((l(), i("div", {
           class: _(["svc-toolbox__category-header", {
             "svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
           }]),
           onClick: o[0] || (o[0] = (n) => e.category.toggleState())
         }, [
-          a("span", on, w(e.category.title), 1),
-          e.toolbox.canCollapseCategories ? (l(), i("div", sn, [
-            a("div", tn, [
-              h(p(s(u), {
+          a("span", xt, w(e.category.title), 1),
+          e.toolbox.canCollapseCategories ? (l(), i("div", en, [
+            a("div", on, [
+              C(v(s(u), {
                 is: "sv-svg-icon",
                 iconName: "icon-arrow-down",
                 class: "svc-toolbox__category-header__button svc-string-editor__button--expand",
@@ -2060,7 +2058,7 @@ const Bt = /* @__PURE__ */ g({
                 [F, e.category.collapsed]
               ])
             ]),
-            h(p(s(u), {
+            C(v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-arrow-up",
               class: "svc-toolbox__category-header__button svc-string-editor__button--collapse",
@@ -2068,12 +2066,12 @@ const Bt = /* @__PURE__ */ g({
             }, null, 512), [
               [F, !e.category.collapsed]
             ])
-          ])) : v("", !0)
+          ])) : p("", !0)
         ], 2)), [
           [s(D)]
         ])
       ]),
-      (l(!0), i(f, null, R(e.category.items, (n) => (l(), q(s(u), {
+      (l(!0), i(f, null, R(e.category.items, (n) => (l(), h(s(u), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2083,7 +2081,7 @@ const Bt = /* @__PURE__ */ g({
       }, null, 8, ["item", "creator", "parentModel"]))), 128))
     ], 2));
   }
-}), ln = /* @__PURE__ */ g({
+}), tn = /* @__PURE__ */ g({
   __name: "ToolboxList",
   props: {
     model: {},
@@ -2093,7 +2091,7 @@ const Bt = /* @__PURE__ */ g({
     return (t, e) => (l(), i("div", {
       class: _(t.model.cssClasses.root)
     }, [
-      (l(!0), i(f, null, R(t.model.renderedActions, (o, n) => (l(), q(s(u), {
+      (l(!0), i(f, null, R(t.model.renderedActions, (o, n) => (l(), h(s(u), {
         key: n,
         is: "svc-toolbox-tool",
         creator: t.creator,
@@ -2103,28 +2101,28 @@ const Bt = /* @__PURE__ */ g({
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
     ], 2));
   }
-}), an = { class: "svc-flex-column" }, rn = { class: "svc-tab-designer_content" }, dn = {
+}), nn = { class: "svc-flex-column" }, ln = { class: "svc-tab-designer_content" }, an = {
   key: 0,
   class: "svc-designer-header"
-}, cn = {
+}, rn = {
   class: "svc-designer__placeholder-container",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, un = {
+}, dn = {
   className: "svc-designer-placeholder-page",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, vn = {
+}, cn = {
   key: 0,
   class: "svc-designer-header"
-}, pn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], mn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], _n = {
+}, un = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], pn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], vn = {
   key: 0,
   class: "svc-tab-designer__tools"
-}, gn = {
+}, mn = {
   key: 0,
   class: "svc-tab-designer__page-navigator"
-}, bn = {
+}, _n = {
   key: 1,
   class: "svc-tab-designer__toolbar"
-}, yn = /* @__PURE__ */ g({
+}, gn = /* @__PURE__ */ g({
   __name: "Designer",
   props: {
     model: {}
@@ -2132,36 +2130,36 @@ const Bt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.model.survey);
     return k(() => t.model), k(() => e.value), (o, n) => (l(), i(f, null, [
-      a("div", an, [
-        o.model.isToolboxVisible ? (l(), q(s(u), {
+      a("div", nn, [
+        o.model.isToolboxVisible ? (l(), h(s(u), {
           key: 0,
           is: "svc-toolbox",
           model: o.model.creator
-        }, null, 8, ["model"])) : v("", !0)
+        }, null, 8, ["model"])) : p("", !0)
       ]),
       a("div", {
         class: _(["svc-tab-designer", o.model.getRootCss()]),
         onClick: n[0] || (n[0] = //@ts-ignore
         (...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
       }, [
-        p(W, null, {
+        v(W, null, {
           default: Y(() => [
-            a("div", rn, [
+            a("div", ln, [
               o.model.showPlaceholder ? (l(), i(f, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", dn, [
-                  p(s(u), {
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", an, [
+                  v(s(u), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
-                ])) : v("", !0),
-                a("div", cn, [
-                  p(j, {
+                ])) : p("", !0),
+                a("div", rn, [
+                  v(j, {
                     name: "designer",
                     placeholderTitleText: o.model.placeholderTitleText,
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-                  a("div", un, [
-                    p(s(u), {
+                  a("div", dn, [
+                    v(s(u), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
@@ -2170,64 +2168,64 @@ const Bt = /* @__PURE__ */ g({
                     }, null, 8, ["survey", "creator", "page"])
                   ])
                 ])
-              ], 64)) : v("", !0),
-              o.model.showPlaceholder ? v("", !0) : (l(), i(f, { key: 1 }, [
+              ], 64)) : p("", !0),
+              o.model.showPlaceholder ? p("", !0) : (l(), i(f, { key: 1 }, [
                 a("div", {
                   class: _(o.model.designerCss),
                   style: K([
                     { maxWidth: o.model.survey.renderedWidth },
-                    o.model.surveyThemeVariables
+                    o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.allowEditSurveyTitle ? (l(), i("div", vn, [
-                    p(s(u), {
+                  o.model.creator.allowEditSurveyTitle ? (l(), i("div", cn, [
+                    v(s(u), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
-                  ])) : v("", !0),
+                  ])) : p("", !0),
                   o.model.creator.pageEditMode !== "bypage" ? (l(!0), i(f, { key: 1 }, R(o.model.pages, (r) => (l(), i("div", {
                     key: r.id,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
                     "data-sv-drop-target-page": r.name
                   }, [
-                    p(s(u), {
+                    v(s(u), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
                       page: r,
                       isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
-                  ], 8, pn))), 128)) : v("", !0),
+                  ], 8, un))), 128)) : p("", !0),
                   o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (l(), i("div", {
                     key: 2,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
                     "data-sv-drop-target-page": o.model.pagesController.page2Display.name
                   }, [
-                    p(s(u), {
+                    v(s(u), {
                       is: "svc-page",
                       page: o.model.pagesController.page2Display,
                       creator: o.model.creator,
                       isGhost: o.model.pagesController.page2Display == o.model.newPage
                     }, null, 8, ["page", "creator", "isGhost"])
-                  ], 8, mn)) : v("", !0)
+                  ], 8, pn)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (l(), i("div", _n, [
-                  o.model.creator.showPageNavigator ? (l(), i("div", gn, [
-                    p(s(u), {
+                o.model.showSurfaceTools ? (l(), i("div", vn, [
+                  o.model.creator.showPageNavigator ? (l(), i("div", mn, [
+                    v(s(u), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
-                  ])) : v("", !0),
-                  o.model.showSurfaceToolbar ? (l(), i("div", bn, [
-                    p(s(u), {
+                  ])) : p("", !0),
+                  o.model.showSurfaceToolbar ? (l(), i("div", _n, [
+                    v(s(u), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
                     }, null, 8, ["model"])
-                  ])) : v("", !0)
-                ])) : v("", !0)
+                  ])) : p("", !0)
+                ])) : p("", !0)
               ], 64))
             ])
           ]),
@@ -2236,13 +2234,13 @@ const Bt = /* @__PURE__ */ g({
       ], 2)
     ], 64));
   }
-}), hn = ["id", "data-sv-drop-target-survey-page"], Cn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), qn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), $n = { class: "svc-page__content-actions" }, wn = {
+}), bn = ["id", "data-sv-drop-target-survey-page"], yn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), hn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Cn = { class: "svc-page__content-actions" }, qn = {
   key: 1,
   class: "svc-page__content-actions"
-}, fn = {
+}, $n = {
   key: 2,
   class: "svc-page__placeholder_frame"
-}, kn = { class: "svc-panel__placeholder_frame" }, Tn = { class: "svc-panel__placeholder" }, Dn = /* @__PURE__ */ g({
+}, wn = { class: "svc-panel__placeholder_frame" }, fn = { class: "svc-panel__placeholder" }, kn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2253,7 +2251,7 @@ const Bt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = E(), o = A(
       () => {
-        const r = new De(t.creator, t.page);
+        const r = new Ne(t.creator, t.page);
         return r.isGhost = t.isGhost, r;
       },
       [() => t.page],
@@ -2274,7 +2272,7 @@ const Bt = /* @__PURE__ */ g({
     const n = (r) => {
       o.value.hover(r, r.currentTarget);
     };
-    return (r, d) => s(o).page ? h((l(), i("div", {
+    return (r, d) => s(o).page ? C((l(), i("div", {
       key: s(o).page.id,
       id: s(o).page.id,
       class: _(["svc-page__content", s(o).css]),
@@ -2288,14 +2286,14 @@ const Bt = /* @__PURE__ */ g({
       onMouseover: n,
       onMouseleave: n
     }, [
-      Cn,
-      qn,
+      yn,
+      hn,
       s(o).allowDragging && !s(o).isGhost ? (l(), i("div", {
         key: 0,
         class: "svc-question__drag-area",
         onPointerdown: d[0] || (d[0] = (m) => s(o).onPointerDown(m))
       }, [
-        p(s(u), V({
+        v(s(u), V({
           is: "sv-svg-icon",
           class: "svc-question__drag-element"
         }, {
@@ -2303,48 +2301,48 @@ const Bt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        a("div", $n, [
-          p(s(u), {
+        a("div", Cn, [
+          v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer
           }, null, 8, ["model"]),
-          s(o).topActionContainer.hasActions ? (l(), q(s(u), {
+          s(o).topActionContainer.hasActions ? (l(), h(s(u), {
             key: 0,
             is: "sv-action-bar",
             model: s(o).topActionContainer
-          }, null, 8, ["model"])) : v("", !0)
+          }, null, 8, ["model"])) : p("", !0)
         ])
-      ], 32)) : v("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (l(), i("div", wn, [
-        p(s(u), {
+      ], 32)) : p("", !0),
+      !s(o).allowDragging || s(o).isGhost ? (l(), i("div", qn, [
+        v(s(u), {
           is: "sv-action-bar",
           model: s(o).actionContainer
         }, null, 8, ["model"]),
-        s(o).topActionContainer.hasActions ? (l(), q(s(u), {
+        s(o).topActionContainer.hasActions ? (l(), h(s(u), {
           key: 0,
           is: "sv-action-bar",
           model: s(o).topActionContainer
-        }, null, 8, ["model"])) : v("", !0)
-      ])) : v("", !0),
-      p(s(u), {
+        }, null, 8, ["model"])) : p("", !0)
+      ])) : p("", !0),
+      v(s(u), {
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"]),
-      s(o).showPlaceholder ? (l(), i("div", fn, [
-        a("div", kn, [
-          a("div", Tn, w(s(o).placeholderText), 1)
+      s(o).showPlaceholder ? (l(), i("div", $n, [
+        a("div", wn, [
+          a("div", fn, w(s(o).placeholderText), 1)
         ])
-      ])) : v("", !0),
-      p(s(u), {
+      ])) : p("", !0),
+      v(s(u), {
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
-    ], 42, hn)), [
+    ], 42, bn)), [
       [s(D)]
-    ]) : v("", !0);
+    ]) : p("", !0);
   }
-}), Nn = { class: "svc-add-new-item-button__text" }, Mn = /* @__PURE__ */ g({
+}), Tn = { class: "svc-add-new-item-button__text" }, Dn = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2356,30 +2354,30 @@ const Bt = /* @__PURE__ */ g({
     k(() => t.item.data);
     const e = $(() => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")), o = $(() => t.renderPopup === void 0 || t.renderPopup !== !1);
     return (n, r) => (l(), i(f, null, [
-      h((l(), i("div", {
+      C((l(), i("div", {
         class: _(e.value),
         onClick: r[0] || (r[0] = (d) => {
           n.item.data.addNewQuestion(n.item, d), d.stopPropagation();
         }),
         onMouseover: r[1] || (r[1] = (d) => n.item.data.hoverStopper && n.item.data.hoverStopper(d, d.currentTarget))
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           class: "svc-panel__add-new-question-icon",
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        a("span", Nn, w(n.item.data.addNewQuestionText), 1),
-        o.value ? (l(), q(s(u), {
+        a("span", Tn, w(n.item.data.addNewQuestionText), 1),
+        o.value ? (l(), h(s(u), {
           key: 0,
           is: "svc-add-question-type-selector",
           questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
           renderPopup: o.value
-        }, null, 8, ["questionTypeSelectorModel", "renderPopup"])) : v("", !0)
+        }, null, 8, ["questionTypeSelectorModel", "renderPopup"])) : p("", !0)
       ], 34)), [
         [s(D)]
       ]),
-      o.value ? v("", !0) : (l(), q(s(u), {
+      o.value ? p("", !0) : (l(), h(s(u), {
         key: 0,
         is: "svc-add-question-type-selector",
         questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2387,7 +2385,7 @@ const Bt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), Sn = ["title", "aria-label"], In = /* @__PURE__ */ g({
+}), Nn = ["title", "aria-label"], Mn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2395,7 +2393,7 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return k(() => t.questionTypeSelectorModel), (e, o) => h((l(), i("button", {
+    return k(() => t.questionTypeSelectorModel), (e, o) => C((l(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2404,7 +2402,7 @@ const Bt = /* @__PURE__ */ g({
       "aria-label": e.questionTypeSelectorModel.title,
       class: "svc-element__question-type-selector"
     }, [
-      p(s(u), V({
+      v(s(u), V({
         is: "sv-svg-icon",
         class: "svc-element__question-type-selector-icon"
       }, {
@@ -2412,23 +2410,23 @@ const Bt = /* @__PURE__ */ g({
         size: "auto",
         title: e.questionTypeSelectorModel.title
       }), null, 16),
-      e.renderPopup ? (l(), q(s(u), {
+      e.renderPopup ? (l(), h(s(u), {
         key: 0,
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
-      }, null, 8, ["model"])) : v("", !0)
-    ], 8, Sn)), [
+      }, null, 8, ["model"])) : p("", !0)
+    ], 8, Nn)), [
       [s(D)]
     ]);
   }
-}), En = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Bn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Pn = /* @__PURE__ */ g({
+}), Sn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), En = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
   },
   setup(c) {
     const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = A(
-      () => new Ne(e.value, o.value, void 0),
+      () => new Me(e.value, o.value, void 0),
       [() => e.value, () => o.value],
       (r) => {
         r.dispose();
@@ -2441,15 +2439,15 @@ const Bt = /* @__PURE__ */ g({
     }), (r, d) => (l(), i("div", {
       class: _(s(n).cssClasses)
     }, [
-      En,
-      Bn,
+      Sn,
+      In,
       X(r.$slots, "default")
     ], 2));
   }
-}), Rn = ["data-sv-drop-target-survey-element"], Vn = { class: "svc-fake-title" }, An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Ln = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Fn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Kn = { class: "svc-question__top-actions" }, Un = {
+}), Bn = ["data-sv-drop-target-survey-element"], Pn = { class: "svc-fake-title" }, Rn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Vn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Ln = { class: "svc-question__top-actions" }, Fn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, Hn = { class: "svc-panel__placeholder_frame" }, On = {
+}, Kn = { class: "svc-panel__placeholder_frame" }, Un = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, se = /* @__PURE__ */ g({
@@ -2497,7 +2495,7 @@ const Bt = /* @__PURE__ */ g({
         key: 0,
         class: _(s(o).cssCollapsedHiddenHeader)
       }, [
-        d.element.hasTitle ? (l(), q(s(u), {
+        d.element.hasTitle ? (l(), h(s(u), {
           key: 0,
           is: "survey-element-title",
           element: d.element
@@ -2505,25 +2503,25 @@ const Bt = /* @__PURE__ */ g({
           key: 1,
           class: _(s(o).cssCollapsedHiddenTitle)
         }, [
-          a("span", Vn, w(d.element.name), 1)
+          a("span", Pn, w(d.element.name), 1)
         ], 2))
-      ], 2)) : v("", !0),
-      h((l(), i("div", {
+      ], 2)) : p("", !0),
+      C((l(), i("div", {
         onClick: m[1] || (m[1] = (b) => {
           s(o).select(s(o), b), b.stopPropagation();
         }),
         class: _(s(o).css())
       }, [
+        Rn,
+        Vn,
         An,
         zn,
-        Ln,
-        Fn,
         s(o).allowDragging ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: m[0] || (m[0] = (b) => s(o).onPointerDown(b))
         }, [
-          p(s(u), V({
+          v(s(u), V({
             is: "sv-svg-icon",
             class: "svc-question__drag-element"
           }, {
@@ -2531,60 +2529,60 @@ const Bt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          a("div", Kn, [
-            p(s(u), {
+          a("div", Ln, [
+            v(s(u), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
               handleClick: !1
             }, null, 8, ["model"])
           ])
-        ], 32)) : v("", !0),
+        ], 32)) : p("", !0),
         s(o).needToRenderContent ? (l(), i(f, { key: 1 }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-template-renderer",
             componentName: d.componentName,
             componentData: d.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !d.showPlaceholderComponent ? (l(), i("div", Un, [
-            a("div", Hn, [
-              a("div", On, w(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !d.showPlaceholderComponent ? (l(), i("div", Fn, [
+            a("div", Kn, [
+              a("div", Un, w(s(o).placeholderText), 1)
             ])
-          ])) : v("", !0),
-          s(o).isEmptyElement && d.showPlaceholderComponent ? (l(), q(s(u), V(
+          ])) : p("", !0),
+          s(o).isEmptyElement && d.showPlaceholderComponent ? (l(), h(s(u), V(
             {
               key: 1,
               is: d.placeholderComponent
             },
             d.getPlaceholderComponentData && d.getPlaceholderComponentData(s(o))
-          ), null, 16, ["is"])) : v("", !0),
-          d.adornerComponent ? (l(), q(s(u), {
+          ), null, 16, ["is"])) : p("", !0),
+          d.adornerComponent ? (l(), h(s(u), {
             key: 2,
             is: d.adornerComponent,
             model: s(o),
             element: d.element
-          }, null, 8, ["is", "model", "element"])) : v("", !0),
-          s(o).isBannerShowing ? (l(), q(s(u), {
+          }, null, 8, ["is", "model", "element"])) : p("", !0),
+          s(o).isBannerShowing ? (l(), h(s(u), {
             key: 3,
             is: "svc-question-banner",
             model: n.value
-          }, null, 8, ["model"])) : v("", !0),
+          }, null, 8, ["model"])) : p("", !0),
           a("div", {
             class: "svc-question__content-actions",
             onFocusin: r
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-action-bar",
               model: s(o).actionContainer,
               handleClick: !1
             }, null, 8, ["model"])
           ], 32)
-        ], 64)) : v("", !0)
+        ], 64)) : p("", !0)
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, Rn)) : v("", !0);
+    ], 42, Bn)) : p("", !0);
   }
-}), le = /* @__PURE__ */ g({
+}), ae = /* @__PURE__ */ g({
   __name: "Question",
   props: {
     componentName: {},
@@ -2596,28 +2594,28 @@ const Bt = /* @__PURE__ */ g({
       t.componentData.element,
       null
     );
-    return (o, n) => (l(), q(se, {
+    return (o, n) => (l(), h(se, {
       createModel: e,
       element: o.componentData.element,
       "component-name": o.componentName,
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Qn = /* @__PURE__ */ g({
+}), Hn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = () => new Me(
+    const t = c, e = () => new Se(
       t.componentData.data,
       t.componentData.element,
       null
     ), o = (n) => ({
       question: n == null ? void 0 : n.filePresentationModel
     });
-    return (n, r) => (l(), q(se, {
+    return (n, r) => (l(), h(se, {
       "create-model": e,
       element: t.componentData.element,
       "show-placeholder-component": !0,
@@ -2628,17 +2626,17 @@ const Bt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), Gn = {
+}), On = {
   key: 0,
   class: "svc-image-question-controls"
-}, Wn = ["accept"], jn = {
+}, Qn = ["accept"], Gn = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, Jn = {
+}, Wn = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, Zn = { class: "svc-image-question__loading" }, Xn = /* @__PURE__ */ g({
+}, jn = { class: "svc-image-question__loading" }, Jn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
@@ -2646,7 +2644,7 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     return (t, e) => (l(), i(f, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Gn, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", On, [
         t.model.allowEdit ? (l(), i(f, { key: 0 }, [
           a("input", {
             type: "file",
@@ -2654,9 +2652,9 @@ const Bt = /* @__PURE__ */ g({
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Wn),
-          h((l(), i("span", jn, [
-            p(s(u), {
+          }, null, 8, Qn),
+          C((l(), i("span", Gn, [
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto",
@@ -2665,16 +2663,16 @@ const Bt = /* @__PURE__ */ g({
           ])), [
             [s(D)]
           ])
-        ], 64)) : v("", !0)
-      ])) : v("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Jn, [
-        a("div", Zn, [
-          p(s(u), { is: "sv-loading-indicator" })
+        ], 64)) : p("", !0)
+      ])) : p("", !0),
+      t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Wn, [
+        a("div", jn, [
+          v(s(u), { is: "sv-loading-indicator" })
         ])
-      ])) : v("", !0)
+      ])) : p("", !0)
     ], 64));
   }
-}), Yn = { class: "svc-rating-question-content" }, xn = /* @__PURE__ */ g({
+}), Zn = { class: "svc-rating-question-content" }, Xn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2682,7 +2680,7 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = A(
-      () => new Se(
+      () => new Ie(
         t.componentData.data,
         t.componentData.question,
         null
@@ -2691,11 +2689,11 @@ const Bt = /* @__PURE__ */ g({
     );
     return (o, n) => {
       var r, d, m, b, y, N, O, P, z;
-      return l(), i("div", Yn, [
+      return l(), i("div", Zn, [
         a("div", {
           class: _((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
-          (d = s(e)) != null && d.allowRemove ? h((l(), q(s(u), {
+          (d = s(e)) != null && d.allowRemove ? C((l(), h(s(u), {
             key: 0,
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
@@ -2709,8 +2707,8 @@ const Bt = /* @__PURE__ */ g({
             "aria-label": (y = s(e)) == null ? void 0 : y.removeTooltip
           }, null, 8, ["class", "title", "aria-label"])), [
             [s(D)]
-          ]) : v("", !0),
-          (N = s(e)) != null && N.allowAdd ? h((l(), q(s(u), {
+          ]) : p("", !0),
+          (N = s(e)) != null && N.allowAdd ? C((l(), h(s(u), {
             key: 1,
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
@@ -2724,16 +2722,16 @@ const Bt = /* @__PURE__ */ g({
             "aria-label": (z = s(e)) == null ? void 0 : z.addTooltip
           }, null, 8, ["class", "title", "aria-label"])), [
             [s(D)]
-          ]) : v("", !0)
+          ]) : p("", !0)
         ], 2),
         X(o.$slots, "default")
       ]);
     };
   }
-}), el = {
+}), Yn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, ol = /* @__PURE__ */ g({
+}, xn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
@@ -2744,7 +2742,7 @@ const Bt = /* @__PURE__ */ g({
     ), m = A(
       () => {
         var b;
-        return t.componentData ? new Ie(
+        return t.componentData ? new Ee(
           e.value,
           r.value,
           d.value,
@@ -2781,12 +2779,12 @@ const Bt = /* @__PURE__ */ g({
           class: _(["svc-matrix-cell--selected", { "svc-visible": (N = s(m)) == null ? void 0 : N.isSelected }])
         }, null, 2),
         X(b.$slots, "default"),
-        (O = s(m)) != null && O.isSupportCellEditor ? (l(), i("div", el, [
-          h((l(), i("span", {
+        (O = s(m)) != null && O.isSupportCellEditor ? (l(), i("div", Yn, [
+          C((l(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: y[0] || (y[0] = (P) => s(m).editQuestion(s(m), P))
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-edit",
               size: "auto"
@@ -2794,11 +2792,11 @@ const Bt = /* @__PURE__ */ g({
           ])), [
             [s(D)]
           ])
-        ])) : v("", !0)
+        ])) : p("", !0)
       ], 32);
     };
   }
-}), sl = { class: "svc-question__adorner" }, tl = { class: "svc-question__content svc-question__content--in-popup" }, nl = /* @__PURE__ */ g({
+}), el = { class: "svc-question__adorner" }, ol = { class: "svc-question__content svc-question__content--in-popup" }, sl = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
@@ -2808,19 +2806,19 @@ const Bt = /* @__PURE__ */ g({
     const t = c, e = $(
       () => t.componentData.element
     );
-    return k(() => e.value), (o, n) => (l(), i("div", sl, [
-      a("div", tl, [
-        p(s(u), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
+    return k(() => e.value), (o, n) => (l(), i("div", el, [
+      a("div", ol, [
+        v(s(u), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
-}), ll = ["data-sv-drop-target-survey-element"], al = { class: "svc-fake-title" }, il = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), rl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), dl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), cl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ul = { class: "svc-question__top-actions" }, vl = {
+}), tl = ["data-sv-drop-target-survey-element"], nl = { class: "svc-fake-title" }, ll = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), al = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), il = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), rl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), dl = { class: "svc-question__top-actions" }, cl = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, pl = { class: "svc-panel__placeholder_frame" }, ml = { class: "svc-panel__placeholder" }, _l = { class: "svc-add-new-item-button__text" }, gl = {
+}, ul = { class: "svc-panel__placeholder_frame" }, pl = { class: "svc-panel__placeholder" }, vl = { class: "svc-add-new-item-button__text" }, ml = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, bl = { class: "svc-panel__question-type-selector-popup" }, yl = { class: "svc-panel__add-new-question-wrapper" }, hl = /* @__PURE__ */ g({
+}, _l = { class: "svc-panel__question-type-selector-popup" }, gl = { class: "svc-panel__add-new-question-wrapper" }, bl = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2853,7 +2851,7 @@ const Bt = /* @__PURE__ */ g({
         key: 0,
         class: _(s(e).cssCollapsedHiddenHeader)
       }, [
-        s(e).element.hasTitle ? (l(), q(s(u), {
+        s(e).element.hasTitle ? (l(), h(s(u), {
           key: 0,
           is: "survey-element-title",
           element: s(e).element
@@ -2861,95 +2859,95 @@ const Bt = /* @__PURE__ */ g({
           key: 1,
           class: _(s(e).cssCollapsedHiddenTitle)
         }, [
-          a("span", al, w(s(e).element.name), 1)
+          a("span", nl, w(s(e).element.name), 1)
         ], 2))
-      ], 2)) : v("", !0),
-      h((l(), i("div", {
+      ], 2)) : p("", !0),
+      C((l(), i("div", {
         class: _(s(e).css()),
         onClick: r[2] || (r[2] = (d) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), d) : null)
       }, [
+        ll,
+        al,
         il,
         rl,
-        dl,
-        cl,
         s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (d) => s(e).onPointerDown(d))
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          a("div", ul, [
-            p(s(u), {
+          a("div", dl, [
+            v(s(u), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
               handleClick: !1
             }, null, 8, ["model"])
           ])
-        ], 32)) : v("", !0),
+        ], 32)) : p("", !0),
         s(e).needToRenderContent ? (l(), i(f, { key: 1 }, [
-          p(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (l(), i("div", vl, [
-            a("div", pl, [
-              a("div", ml, w(s(e).placeholderText), 1),
-              s(e).showAddQuestionButton ? h((l(), i("div", {
+          v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+          s(e).isEmptyElement ? (l(), i("div", cl, [
+            a("div", ul, [
+              a("div", pl, w(s(e).placeholderText), 1),
+              s(e).showAddQuestionButton ? C((l(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
               }, [
-                p(s(u), {
+                v(s(u), {
                   is: "sv-svg-icon",
                   class: "svc-panel__add-new-question-icon",
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                a("span", _l, w(s(e).addNewQuestionText), 1)
+                a("span", vl, w(s(e).addNewQuestionText), 1)
               ])), [
                 [s(D)]
-              ]) : v("", !0)
+              ]) : p("", !0)
             ])
-          ])) : v("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (l(), i("div", gl, [
-            a("div", bl, [
-              p(s(u), {
+          ])) : p("", !0),
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (l(), i("div", ml, [
+            a("div", _l, [
+              v(s(u), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            a("div", yl, [
-              p(s(u), {
+            a("div", gl, [
+              v(s(u), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
                 buttonClass: "svc-action-button",
                 renderPopup: !1
               }, null, 8, ["item"])
             ])
-          ])) : v("", !0),
+          ])) : p("", !0),
           s(e).element.isInteractiveDesignElement ? (l(), i("div", {
             key: 2,
             class: "svc-question__content-actions",
             onFocusin: r[1] || (r[1] = (d) => s(e).select(s(e), d))
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-action-bar",
               model: s(e).actionContainer,
               handleClick: !1
             }, null, 8, ["model"])
-          ], 32)) : v("", !0)
-        ], 64)) : v("", !0)
+          ], 32)) : p("", !0)
+        ], 64)) : p("", !0)
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, ll)) : v("", !0);
+    ], 42, tl)) : p("", !0);
   }
-}), Cl = ["data-sv-drop-target-item-value"], ql = /* @__PURE__ */ a("div", { class: "svc-item-value__ghost" }, null, -1), $l = { class: "svc-item-value-controls" }, wl = {
+}), yl = ["data-sv-drop-target-item-value"], hl = /* @__PURE__ */ a("div", { class: "svc-item-value__ghost" }, null, -1), Cl = { class: "svc-item-value-controls" }, ql = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, fl = /* @__PURE__ */ g({
+}, $l = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
@@ -2968,7 +2966,7 @@ const Bt = /* @__PURE__ */ g({
       r.value.setRootElement(void 0);
     });
     const m = A(
-      () => new Ee(o.value, n.value, r.value),
+      () => new Be(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
       (b) => {
         b.dispose();
@@ -2989,24 +2987,24 @@ const Bt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      ql,
-      a("div", $l, [
-        s(m).isDraggable ? (l(), i("span", wl, [
-          p(s(u), {
+      hl,
+      a("div", Cl, [
+        s(m).isDraggable ? (l(), i("span", ql, [
+          v(s(u), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
             iconName: "icon-drag-24x24",
             size: "auto",
             title: s(m).dragTooltip
           }, null, 8, ["title"])
-        ])) : v("", !0),
-        s(m).allowAdd ? h((l(), i("span", {
+        ])) : p("", !0),
+        s(m).allowAdd ? C((l(), i("span", {
           key: 1,
           class: "svc-item-value-controls__button svc-item-value-controls__add",
           onClick: y[0] || (y[0] = (N) => s(m).add(s(m))),
           "aria-label": void 0
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
             size: "auto",
@@ -3014,15 +3012,15 @@ const Bt = /* @__PURE__ */ g({
           })
         ])), [
           [s(D)]
-        ]) : v("", !0),
-        s(m).allowRemove ? h((l(), i("span", {
+        ]) : p("", !0),
+        s(m).allowRemove ? C((l(), i("span", {
           key: 2,
           class: "svc-item-value-controls__button svc-item-value-controls__remove",
           onClick: y[1] || (y[1] = (N) => s(m).remove(s(m))),
           onBlur: y[2] || (y[2] = (N) => s(m).onFocusOut(N)),
           "aria-label": void 0
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
             size: "auto",
@@ -3030,26 +3028,26 @@ const Bt = /* @__PURE__ */ g({
           })
         ], 32)), [
           [s(D)]
-        ]) : v("", !0)
+        ]) : p("", !0)
       ]),
       a("div", {
         class: "svc-item-value__item",
         onClick: y[3] || (y[3] = (N) => s(m).select(s(m), N))
       }, [
-        p(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
+        v(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
       ])
-    ], 42, Cl));
+    ], 42, yl));
   }
-}), kl = ["data-sv-drop-target-item-value"], Tl = { class: "svc-image-item-value-wrapper__content" }, Dl = ["accept"], Nl = {
+}), wl = ["data-sv-drop-target-item-value"], fl = { class: "svc-image-item-value-wrapper__content" }, kl = ["accept"], Tl = {
   key: 0,
   class: "svc-image-item-value__item"
-}, Ml = {
+}, Dl = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, Sl = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Il = { class: "sd-imagepicker__label" }, El = {
+}, Nl = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ml = { class: "sd-imagepicker__label" }, Sl = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Bl = /* @__PURE__ */ g({
+}, Il = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
@@ -3058,7 +3056,7 @@ const Bt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = E(), d = A(
       () => {
-        const b = new Be(
+        const b = new Pe(
           e.value,
           o.value,
           n.value,
@@ -3091,17 +3089,17 @@ const Bt = /* @__PURE__ */ g({
         class: "svc-image-item-value-wrapper__ghost",
         style: K(m.value)
       }, null, 4),
-      a("div", Tl, [
+      a("div", fl, [
         a("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(d).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, Dl),
+        }, null, 8, kl),
         !s(d).isNew && !s(d).isUploading ? (l(), i(f, { key: 0 }, [
-          s(d).isNew ? v("", !0) : (l(), i("div", Nl, [
-            p(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
+          s(d).isNew ? p("", !0) : (l(), i("div", Tl, [
+            v(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
           s(d).isDraggable && s(d).canRenderControls ? (l(), i("span", {
             key: 1,
@@ -3110,20 +3108,20 @@ const Bt = /* @__PURE__ */ g({
             title: void 0,
             "aria-label": void 0
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-drag-24x24",
               size: "auto"
             })
-          ], 32)) : v("", !0),
-          s(d).canRenderControls ? (l(), i("div", Ml, [
-            h((l(), i("span", {
+          ], 32)) : p("", !0),
+          s(d).canRenderControls ? (l(), i("div", Dl, [
+            C((l(), i("span", {
               class: "svc-context-button",
               onClick: y[1] || (y[1] = (N) => s(d).chooseFile(s(d))),
               title: void 0,
               "aria-label": void 0
             }, [
-              p(s(u), {
+              v(s(u), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-choosefile",
@@ -3133,13 +3131,13 @@ const Bt = /* @__PURE__ */ g({
             ])), [
               [s(D)]
             ]),
-            h((l(), i("span", {
+            C((l(), i("span", {
               class: "svc-context-button svc-context-button--danger",
               onClick: y[2] || (y[2] = (N) => s(d).remove(s(d))),
               title: void 0,
               "aria-label": void 0
             }, [
-              p(s(u), {
+              v(s(u), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-delete",
@@ -3149,8 +3147,8 @@ const Bt = /* @__PURE__ */ g({
             ])), [
               [s(D)]
             ])
-          ])) : v("", !0)
-        ], 64)) : v("", !0),
+          ])) : p("", !0)
+        ], 64)) : p("", !0),
         s(d).isNew || s(d).isUploading ? (l(), i(f, { key: 1 }, [
           a("div", {
             class: "svc-image-item-value__item",
@@ -3158,15 +3156,15 @@ const Bt = /* @__PURE__ */ g({
             onDragleave: y[4] || (y[4] = (N) => s(d).onDragLeave(N)),
             onDrop: y[5] || (y[5] = (N) => s(d).onDrop(N))
           }, [
-            a("div", Sl, [
-              a("label", Il, [
+            a("div", Nl, [
+              a("label", Ml, [
                 a("div", {
                   style: K(m.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(d).isUploading ? (l(), i("div", El, [
-                    p(s(u), { is: "sv-loading-indicator" })
-                  ])) : v("", !0)
+                  s(d).isUploading ? (l(), i("div", Sl, [
+                    v(s(u), { is: "sv-loading-indicator" })
+                  ])) : p("", !0)
                 ], 4)
               ])
             ])
@@ -3175,14 +3173,14 @@ const Bt = /* @__PURE__ */ g({
             class: "svc-image-item-value-controls",
             onPointerdown: y[7] || (y[7] = (N) => N.stopPropagation())
           }, [
-            s(d).allowAdd && !s(d).isUploading ? h((l(), i("span", {
+            s(d).allowAdd && !s(d).isUploading ? C((l(), i("span", {
               key: 0,
               class: "svc-context-button svc-image-item-value-controls__add",
               onClick: y[6] || (y[6] = (N) => s(d).chooseNewFile(s(d))),
               title: void 0,
               "aria-label": void 0
             }, [
-              p(s(u), {
+              v(s(u), {
                 is: "sv-svg-icon",
                 iconName: "icon-add-lg",
                 size: "auto",
@@ -3190,13 +3188,13 @@ const Bt = /* @__PURE__ */ g({
               }, null, 8, ["title"])
             ])), [
               [s(D)]
-            ]) : v("", !0)
+            ]) : p("", !0)
           ], 32)
-        ], 64)) : v("", !0)
+        ], 64)) : p("", !0)
       ])
-    ], 42, kl));
+    ], 42, wl));
   }
-}), Pl = /* @__PURE__ */ g({
+}), El = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {}
@@ -3224,23 +3222,23 @@ const Bt = /* @__PURE__ */ g({
         }
       };
     });
-    return (r, d) => (l(), q(s(u), V({ is: o.value }, n.value), null, 16, ["is"]));
+    return (r, d) => (l(), h(s(u), V({ is: o.value }, n.value), null, 16, ["is"]));
   }
-}), Rl = ["accept"], Vl = /* @__PURE__ */ a("svg", null, [
+}), Bl = ["accept"], Pl = /* @__PURE__ */ a("svg", null, [
   /* @__PURE__ */ a("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Al = [
-  Vl
-], zl = { class: "svc-context-container svc-logo-image-controls" }, Ll = {
+], -1), Rl = [
+  Pl
+], Vl = { class: "svc-context-container svc-logo-image-controls" }, Al = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Fl = /* @__PURE__ */ g({
+}, zl = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
   setup(c) {
     const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = E(), r = A(
-      () => new Pe(e.value, null),
+      () => new Re(e.value, null),
       [() => e.value]
     ), d = E(), m = () => {
       d.value = o.value.locLogo.renderedHtml;
@@ -3268,28 +3266,28 @@ const Bt = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Rl),
-      d.value ? v("", !0) : (l(), i(f, { key: 0 }, [
-        s(r).allowEdit && !s(r).isUploading ? h((l(), i("div", {
+      }, null, 8, Bl),
+      d.value ? p("", !0) : (l(), i(f, { key: 0 }, [
+        s(r).allowEdit && !s(r).isUploading ? C((l(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: y[0] || (y[0] = (N) => s(r).chooseFile(s(r)))
-        }, Al)), [
+        }, Rl)), [
           [s(D)]
-        ]) : v("", !0)
+        ]) : p("", !0)
       ], 64)),
       d.value && !s(r).isUploading ? (l(), i("div", {
         key: 1,
         class: _(s(r).containerCss)
       }, [
-        a("div", zl, [
-          h((l(), i("span", {
+        a("div", Vl, [
+          C((l(), i("span", {
             class: "svc-context-button",
             onClick: y[1] || (y[1] = (N) => s(r).chooseFile(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto"
@@ -3297,13 +3295,13 @@ const Bt = /* @__PURE__ */ g({
           ])), [
             [s(D)]
           ]),
-          h((l(), i("span", {
+          C((l(), i("span", {
             class: "svc-context-button svc-context-button--danger",
             onClick: y[2] || (y[2] = (N) => s(r).remove(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
-            p(s(u), {
+            v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-clear",
               size: "auto"
@@ -3312,20 +3310,20 @@ const Bt = /* @__PURE__ */ g({
             [s(D)]
           ])
         ]),
-        p(s(u), {
+        v(s(u), {
           is: "sv-logo-image",
           data: o.value
         }, null, 8, ["data"])
-      ], 2)) : v("", !0),
-      s(r).isUploading ? (l(), i("div", Ll, [
-        p(s(u), { is: "sv-loading-indicator" })
-      ])) : v("", !0)
+      ], 2)) : p("", !0),
+      s(r).isUploading ? (l(), i("div", Al, [
+        v(s(u), { is: "sv-loading-indicator" })
+      ])) : p("", !0)
     ], 512));
   }
-}), Kl = {
+}), Ll = {
   key: 0,
   class: "svc-search"
-}, Ul = { class: "svc-search__search-icon" }, Hl = ["aria-label", "placeholder"], Ol = { class: "svc-search__toolbar" }, Ql = { class: "svc-search__toolbar-counter" }, Gl = /* @__PURE__ */ g({
+}, Fl = { class: "svc-search__search-icon" }, Kl = ["aria-label", "placeholder"], Ul = { class: "svc-search__toolbar" }, Hl = { class: "svc-search__toolbar-counter" }, Ol = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
@@ -3340,33 +3338,33 @@ const Bt = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (l(), i("div", Kl, [
-      a("div", Ul, [
-        p(s(u), {
+    return (o, n) => o.model.isVisible ? (l(), i("div", Ll, [
+      a("div", Fl, [
+        v(s(u), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
         })
       ]),
-      h(a("input", {
+      C(a("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
-      }, null, 8, Hl), [
-        [de, e.value]
+      }, null, 8, Kl), [
+        [ce, e.value]
       ]),
-      a("div", Ol, [
-        a("div", Ql, w(o.model.matchCounterText), 1),
-        p(s(u), {
+      a("div", Ul, [
+        a("div", Hl, w(o.model.matchCounterText), 1),
+        v(s(u), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
         }, null, 8, ["model"])
       ])
-    ])) : v("", !0);
+    ])) : p("", !0);
   }
-}), Wl = ["title"], jl = /* @__PURE__ */ g({
+}), Ql = ["title"], Gl = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3374,7 +3372,7 @@ const Bt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = A(
-      () => new Re(t.pagesController, t.pageEditMode),
+      () => new Ve(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
     ), o = E();
     return B(() => {
@@ -3388,31 +3386,31 @@ const Bt = /* @__PURE__ */ g({
       n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
     }), L(() => {
       e.value.dispose();
-    }), (n, r) => h((l(), i("div", {
+    }), (n, r) => C((l(), i("div", {
       class: "svc-page-navigator",
       ref_key: "root",
       ref: o
     }, [
-      h((l(), i("div", {
+      C((l(), i("div", {
         class: _(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
         onClick: r[0] || (r[0] = (d) => s(e).togglePageSelector(d)),
         title: s(e).pageSelectorCaption
       }, [
-        p(s(u), {
+        v(s(u), {
           is: "sv-svg-icon",
           class: "svc-page-navigator__button-icon",
           iconName: s(e).icon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        p(s(u), {
+        v(s(u), {
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
-      ], 10, Wl)), [
+      ], 10, Ql)), [
         [s(D)]
       ]),
       a("div", null, [
-        (l(!0), i(f, null, R(s(e).visibleItems, (d) => (l(), q(s(u), {
+        (l(!0), i(f, null, R(s(e).visibleItems, (d) => (l(), h(s(u), {
           is: "svc-page-navigator-item",
           key: d.id,
           model: d
@@ -3422,11 +3420,11 @@ const Bt = /* @__PURE__ */ g({
       [F, s(e).visible]
     ]);
   }
-}), Jl = { class: "svc-page-navigator-item" }, Zl = ["title"], Xl = /* @__PURE__ */ a("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Yl = [
-  Xl
-], xl = { class: "svc-page-navigator-item__banner" }, ea = { class: "svc-page-navigator-item__text" }, oa = /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot" }, [
+}), Wl = { class: "svc-page-navigator-item" }, jl = ["title"], Jl = /* @__PURE__ */ a("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Zl = [
+  Jl
+], Xl = { class: "svc-page-navigator-item__banner" }, Yl = { class: "svc-page-navigator-item__text" }, xl = /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot" }, [
   /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), sa = /* @__PURE__ */ g({
+], -1), ea = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
@@ -3437,8 +3435,8 @@ const Bt = /* @__PURE__ */ g({
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (l(), i("div", Jl, [
-      h((l(), i("div", {
+    return (o, n) => (l(), i("div", Wl, [
+      C((l(), i("div", {
         class: _(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
           "svc-page-navigator-item--disabled": o.model.disabled
@@ -3448,17 +3446,17 @@ const Bt = /* @__PURE__ */ g({
         a("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Yl, 8, Zl),
-        a("div", xl, [
-          a("span", ea, w(o.model.title), 1),
-          oa
+        }, Zl, 8, jl),
+        a("div", Xl, [
+          a("span", Yl, w(o.model.title), 1),
+          xl
         ])
       ], 2)), [
         [s(D)]
       ])
     ]));
   }
-}), ta = { class: "svc-question__dropdown-choices--wrapper" }, na = { class: "svc-question__dropdown-choices" }, la = /* @__PURE__ */ g({
+}), oa = { class: "svc-question__dropdown-choices--wrapper" }, sa = { class: "svc-question__dropdown-choices" }, ta = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3473,41 +3471,41 @@ const Bt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (l(), i("div", ta, [
+    return (n, r) => (l(), i("div", oa, [
       a("div", null, [
-        a("div", na, [
+        a("div", sa, [
           (l(!0), i(f, null, R(n.model.getRenderedItems(), (d) => (l(), i("div", {
             key: d.value,
             class: _(n.model.getChoiceCss())
           }, [
-            p(s(u), V({
+            v(s(u), V({
               is: e(d)
             }, o(d)), null, 16, ["is"])
           ], 2))), 128))
         ]),
-        n.model.needToCollapse ? (l(), q(s(u), {
+        n.model.needToCollapse ? (l(), h(s(u), {
           key: 0,
           is: "svc-action-button",
           text: n.model.getButtonText(),
           click: n.model.switchCollapse.bind(n.model),
           allowBubble: !0
-        }, null, 8, ["text", "click"])) : v("", !0)
+        }, null, 8, ["text", "click"])) : p("", !0)
       ])
     ]));
   }
-}), aa = /* @__PURE__ */ g({
+}), na = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = () => new Ve(
+    const t = c, e = () => new Ae(
       t.componentData.data,
       t.componentData.element,
       null
     );
-    return (o, n) => (l(), q(se, {
+    return (o, n) => (l(), h(se, {
       "create-model": e,
       element: o.componentData.element,
       "component-name": o.componentName,
@@ -3515,7 +3513,7 @@ const Bt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), ia = { class: "svc-question__adorner" }, ra = { class: "svc-question__content svc-question__content--in-popup" }, da = { class: "svc-question__dropdown-choices" }, ae = "survey-radiogroup-item", ca = /* @__PURE__ */ g({
+}), la = { class: "svc-question__adorner" }, aa = { class: "svc-question__content svc-question__content--in-popup" }, ia = { class: "svc-question__dropdown-choices" }, ie = "survey-radiogroup-item", ra = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
@@ -3524,23 +3522,23 @@ const Bt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(
       () => t.componentData.element
-    ), o = (r) => e.value.getItemValueWrapperComponentName(r) || ae, n = (r) => ({
-      componentName: ae,
+    ), o = (r) => e.value.getItemValueWrapperComponentName(r) || ie, n = (r) => ({
+      componentName: ie,
       componentData: {
         question: e.value,
         item: r,
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return k(() => e.value), (r, d) => (l(), i("div", ia, [
-      a("div", ra, [
-        p(s(u), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        a("div", da, [
+    return k(() => e.value), (r, d) => (l(), i("div", la, [
+      a("div", aa, [
+        v(s(u), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
+        a("div", ia, [
           (l(!0), i(f, null, R(e.value.visibleChoices, (m) => (l(), i("div", {
             key: m.value,
             class: "svc-question__dropdown-choice"
           }, [
-            p(s(u), V({
+            v(s(u), V({
               is: o(m)
             }, n(m)), null, 16, ["is"])
           ]))), 128))
@@ -3548,18 +3546,18 @@ const Bt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), ua = ["data-sv-drop-target-survey-element"], va = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), pa = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ma = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _a = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ga = { class: "svc-widget__content" }, ba = {
+}), da = ["data-sv-drop-target-survey-element"], ca = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ua = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), pa = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), va = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ma = { class: "svc-widget__content" }, _a = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, ya = /* @__PURE__ */ a("div", {
+}, ga = /* @__PURE__ */ a("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), ha = [
-  ya
-], Ca = { class: "svc-question__content-actions" }, qa = {
+}, null, -1), ba = [
+  ga
+], ya = { class: "svc-question__content-actions" }, ha = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, $a = { class: "svc-panel__placeholder" }, wa = /* @__PURE__ */ g({
+}, Ca = { class: "svc-panel__placeholder" }, qa = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
@@ -3590,34 +3588,34 @@ const Bt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: e
     }, [
-      s(o).element.isInteractiveDesignElement ? h((l(), i("div", {
+      s(o).element.isInteractiveDesignElement ? C((l(), i("div", {
         key: 0,
         class: _(["svc-question__content", s(o).css()]),
         onClick: r[1] || (r[1] = (d) => s(o).select(s(o), d)),
         "data-bind": "clickBubble: false"
       }, [
-        va,
+        ca,
+        ua,
         pa,
-        ma,
-        _a,
+        va,
         s(o).allowDragging ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (d) => s(o).onPointerDown(d))
         }, [
-          p(s(u), {
+          v(s(u), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           })
-        ], 32)) : v("", !0),
-        a("div", ga, [
-          p(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"])
+        ], 32)) : p("", !0),
+        a("div", ma, [
+          v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (l(), i("div", ba, ha)) : v("", !0),
-        a("div", Ca, [
-          p(s(u), {
+        s(o).isEmptyElement ? (l(), i("div", _a, ba)) : p("", !0),
+        a("div", ya, [
+          v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
             handleClick: !1
@@ -3625,26 +3623,26 @@ const Bt = /* @__PURE__ */ g({
         ])
       ], 2)), [
         [s(D)]
-      ]) : v("", !0),
-      s(o).element.isInteractiveDesignElement ? v("", !0) : (l(), i(f, { key: 1 }, [
-        p(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (l(), i("div", qa, [
-          a("div", $a, w(s(o).placeholderText), 1)
-        ])) : v("", !0)
+      ]) : p("", !0),
+      s(o).element.isInteractiveDesignElement ? p("", !0) : (l(), i(f, { key: 1 }, [
+        v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+        s(o).isEmptyElement ? (l(), i("div", ha, [
+          a("div", Ca, w(s(o).placeholderText), 1)
+        ])) : p("", !0)
       ], 64))
-    ], 42, ua)) : v("", !0);
+    ], 42, da)) : p("", !0);
   }
-}), fa = { class: "svc-carry-forward-panel-wrapper" }, ka = { class: "svc-carry-forward-panel" }, Ta = { class: "svc-carry-forward-panel__link" }, Da = /* @__PURE__ */ g({
+}), $a = { class: "svc-carry-forward-panel-wrapper" }, wa = { class: "svc-carry-forward-panel" }, fa = { class: "svc-carry-forward-panel__link" }, ka = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(c) {
-    return (t, e) => (l(), i("div", fa, [
-      a("div", ka, [
+    return (t, e) => (l(), i("div", $a, [
+      a("div", wa, [
         a("span", null, w(t.model.text) + w(" "), 1),
-        a("span", Ta, [
-          p(s(u), {
+        a("span", fa, [
+          v(s(u), {
             is: "svc-action-button",
             text: t.model.actionText,
             click: t.model.onClick.bind(t.model)
@@ -3654,27 +3652,27 @@ const Bt = /* @__PURE__ */ g({
     ]));
   }
 });
-function Na(c, t, e) {
+function Ta(c, t, e) {
   c(t, e);
 }
 function ve(c) {
-  const t = Na.bind(
+  const t = Ta.bind(
     void 0,
     c
   );
-  t("svc-tabbed-menu", Je), t("svc-tabbed-menu-item-wrapper", Xe), t("svc-tabbed-menu-item", Ye), t("svc-side-bar", so), t("svc-side-bar-default-header", ao), t("svc-side-bar-page", io), t("svc-tabs", mo), t("svc-tab-control", qo), t("svc-tab-button", To), t("svc-property-grid-placeholder", Eo), t("svc-side-bar-header", zo), t("svc-side-bar-property-grid-header", Qo), t("svc-property-grid", po), t("svc-object-selector", ro), t("svc-search", Gl), t("svc-scroll", W), t("svc-switcher", ts), t("svc-action-button", Xo), t("svc-question-error", Go), t("survey-embeddedsurvey", Zs), t("sv-logic-operator", Js), t("survey-linkvalue", Xs), t("survey-color", _t), t("color-item", gt), t("sv-boolean-switch", Bt), t("survey-fileedit", qt), t("survey-spinedit", kt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", Q), t("survey-simulator", as), t("svc-tab-preview", ps), t("svc-complete-page", _s), t("survey-results", Ts), t("survey-results-table-row", Ns), t("json-error-item", Ks), t("svc-tab-json-editor-textarea", As), t("svc-tab-json-editor-ace", Es), t("svc-tab-translation", st), t("sd-translation-line-skeleton", it), t("svc-translate-from-action", rt), t("svc-tab-logic", Gs), t("svc-tab-theme", vt), t("svc-toolbox", Gt), t("svc-toolbox-list", ln), t("svc-toolbox-category", nn), t("svc-toolbox-tool", jt), t("svc-toolbox-item", Yt), t("svc-toolbox-item-group", xt), t(Ae, Kt), t("svc-tab-designer", yn), t("svc-page-navigator", jl), t("svc-page-navigator-item", sa), t("svc-page", Dn), t("svc-row", Pn), t("svc-add-new-question-btn", Mn), t("svc-add-question-type-selector", In), t("svc-question", le), t("svc-rating-question", le), t("svc-rating-question-content", xn), t("svc-image-question", Qn), t("svc-image-question-adorner", Xn), t("svc-matrix-cell", ol), t("svc-cell-question", nl), t("svc-cell-dropdown-question", ca), t("svc-question-editor-content", Pl), t("svc-logo-image", Fl), t("svc-panel", hl), t("svc-item-value", fl), t("svc-image-item-value", Bl), t("svc-dropdown-question", aa), t("svc-dropdown-question-adorner", la), t("svc-widget-question", wa), t("svc-question-banner", Da);
+  t("svc-tabbed-menu", Ze), t("svc-tabbed-menu-item-wrapper", Ye), t("svc-tabbed-menu-item", xe), t("svc-side-bar", to), t("svc-side-bar-default-header", io), t("svc-side-bar-page", ro), t("svc-tabs", _o), t("svc-tab-control", $o), t("svc-tab-button", Do), t("svc-property-grid-placeholder", Bo), t("svc-side-bar-header", Lo), t("svc-side-bar-property-grid-header", Go), t("svc-property-grid", mo), t("svc-object-selector", co), t("svc-search", Ol), t("svc-scroll", W), t("svc-switcher", ns), t("svc-action-button", Yo), t("svc-question-error", Wo), t("survey-embeddedsurvey", Js), t("sv-logic-operator", js), t("survey-linkvalue", Zs), t("survey-color", vt), t("color-item", mt), t("sv-boolean-switch", It), t("survey-fileedit", ht), t("survey-spinedit", wt), t("survey-textwithreset", le), t("survey-commentwithreset", le), t("survey-widget", Q), t("survey-simulator", is), t("svc-tab-preview", vs), t("svc-complete-page", _s), t("survey-results", Ts), t("survey-results-table-row", Ns), t("json-error-item", Ks), t("svc-tab-json-editor-textarea", As), t("svc-tab-json-editor-ace", Es), t("svc-tab-translation", ot), t("sd-translation-line-skeleton", at), t("svc-translate-from-action", it), t("svc-tab-logic", Qs), t("svc-tab-theme", ct), t("svc-toolbox", Ot), t("svc-toolbox-list", tn), t("svc-toolbox-category", sn), t("svc-toolbox-tool", Gt), t("svc-toolbox-item", Zt), t("svc-toolbox-item-group", Xt), t(ze, Lt), t("svc-tab-designer", gn), t("svc-page-navigator", Gl), t("svc-page-navigator-item", ea), t("svc-page", kn), t("svc-row", En), t("svc-add-new-question-btn", Dn), t("svc-add-question-type-selector", Mn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Xn), t("svc-image-question", Hn), t("svc-image-question-adorner", Jn), t("svc-matrix-cell", xn), t("svc-cell-question", sl), t("svc-cell-dropdown-question", ra), t("svc-question-editor-content", El), t("svc-logo-image", zl), t("svc-panel", bl), t("svc-item-value", $l), t("svc-image-item-value", Il), t("svc-dropdown-question", na), t("svc-dropdown-question-adorner", ta), t("svc-widget-question", qa), t("svc-question-banner", ka);
 }
 ve(
-  (c, t) => ie.Instance.registerComponent(c, t)
+  (c, t) => re.Instance.registerComponent(c, t)
 );
-const Ba = {
+const Ia = {
   install(c) {
-    c.component("SurveyCreatorComponent", je), ve((t, e) => {
-      c.component(t, e), ie.Instance.registerComponent(t, t);
+    c.component("SurveyCreatorComponent", Je), ve((t, e) => {
+      c.component(t, e), re.Instance.registerComponent(t, t);
     });
   }
 };
 export {
-  je as SurveyCreatorComponent,
-  Ba as surveyCreatorPlugin
+  Je as SurveyCreatorComponent,
+  Ia as surveyCreatorPlugin
 };