survey-creator-vue 2.2.0 → 2.2.2

package/survey-creator-vue.es.js

@@ -1,17 +1,17 @@
 import { useBase as T, SvComponent as u, key2ClickDirective as N, SurveyComponent as O, useQuestion as H, useComputedArray as _e, ComponentFactory as ie } from "survey-vue3-ui";
-import { defineComponent as g, computed as $, toRaw as ge, ref as I, onMounted as P, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as w, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as h, nextTick as re, withDirectives as q, toDisplayString as k, vShow as Q, withCtx as Z, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as X, vModelText as de, onUpdated as Y, mergeProps as A, renderSlot as x } from "vue";
-import { ResponsivityManager as he, CssClassBuilder as Ce, RendererFactory as ce, DropdownListModel as qe, VerticalResponsivityManager as $e } from "survey-core";
-import { editorLocalization as ue, SurveyResultsModel as ke, initLogicOperator as fe, StringEditorViewModelBase as we, ToolboxToolViewModel as Te, PageAdorner as De, RowViewModel as Ne, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as Me, QuestionRatingAdornerViewModel as Se, MatrixCellWrapperViewModel as Be, ItemValueWrapperViewModel as Ie, ImageItemValueWrapperViewModel as Ee, 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 { defineComponent as g, computed as $, toRaw as ge, ref as I, onMounted as P, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as w, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as y, onUpdated as G, nextTick as re, withDirectives as C, toDisplayString as k, vShow as Q, withCtx as X, createTextVNode as be, shallowRef as ye, watch as W, onBeforeUnmount as Y, vModelText as de, mergeProps as A, renderSlot as x } from "vue";
+import { editorLocalization as ce, SurveyResultsModel as he, initLogicOperator as Ce, StringEditorViewModelBase as qe, ToolboxToolViewModel as $e, PageAdorner as ke, RowViewModel as fe, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as we, QuestionRatingAdornerViewModel as Te, MatrixCellWrapperViewModel as De, ItemValueWrapperViewModel as Ne, ImageItemValueWrapperViewModel as Me, LogoImageViewModel as Se, PageNavigatorViewModel as Be, QuestionDropdownAdornerViewModel as Ie, editableStringRendererName as Ee } from "survey-creator-core";
+import { CssClassBuilder as Pe, RendererFactory as ue, DropdownListModel as Re } from "survey-core";
+const Ve = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ae = { class: "svc-top-bar" }, ze = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
-}, Ke = ["v-show"], Ue = { class: "svc-creator__content-holder svc-flex-column" }, Qe = ["aria-labelledby", "id"], He = {
+}, Le = ["v-show"], Fe = { class: "svc-creator__content-holder svc-flex-column" }, Ke = ["aria-labelledby", "id"], Ue = {
   key: 0,
   class: "svc-footer-bar"
-}, Oe = ["v-show"], Ge = {
+}, Qe = ["v-show"], He = {
   key: 0,
   class: "svc-creator__banner"
-}, We = ["innerHTML"], je = /* @__PURE__ */ g({
+}, Oe = ["innerHTML"], Ge = /* @__PURE__ */ g({
   __name: "Creator",
   props: {
     model: {}
@@ -48,9 +48,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               "svc-creator__side-bar--left": e.value.sidebarLocation == "left"
             }])
           }, [
-            d("div", ze, [
-              d("div", Le, [
-                e.value.showTabs ? (a(), i("div", Fe, [
+            d("div", Ve, [
+              d("div", Ae, [
+                e.value.showTabs ? (a(), i("div", ze, [
                   v(s(u), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
@@ -65,14 +65,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                     is: "sv-action-bar",
                     model: e.value.toolbar
                   }, null, 8, ["model"])
-                ], 8, Ke)) : p("", !0)
+                ], 8, Le)) : p("", !0)
               ]),
               d("div", {
                 class: m(["svc-creator__content-wrapper svc-flex-row", {
                   "svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
                 }])
               }, [
-                d("div", Ue, [
+                d("div", Fe, [
                   (a(!0), i(w, null, V(e.value.tabs, (l) => (a(), i(w, null, [
                     e.value.viewType == l.id && l.visible ? (a(), i("div", {
                       role: "tabpanel",
@@ -87,11 +87,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                         is: l.componentContent,
                         model: l.data.model
                       }, null, 8, ["is", "model"])
-                    ], 10, Qe)) : p("", !0)
+                    ], 10, Ke)) : p("", !0)
                   ], 64))), 256))
                 ])
               ], 2),
-              e.value.isMobileView ? (a(), i("div", He, [
+              e.value.isMobileView ? (a(), i("div", Ue, [
                 d("div", {
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
@@ -100,20 +100,20 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                     is: "sv-action-bar",
                     model: e.value.footerToolbar
                   }, null, 8, ["model"])
-                ], 8, Oe)
+                ], 8, Qe)
               ])) : p("", !0)
             ]),
-            e.value.sidebar ? (a(), h(s(u), {
+            e.value.sidebar ? (a(), y(s(u), {
               key: 0,
               is: "svc-side-bar",
               model: e.value.sidebar
             }, null, 8, ["model"])) : p("", !0)
           ], 2),
-          e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", Ge, [
+          e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", He, [
             d("span", {
               class: "svc-creator__non-commercial-text",
               innerHTML: e.value.licenseText
-            }, null, 8, We)
+            }, null, 8, Oe)
           ])),
           v(s(u), {
             is: "sv-notifier",
@@ -123,33 +123,34 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 6)
     ], 64));
   }
-}), Je = /* @__PURE__ */ g({
+}), We = /* @__PURE__ */ g({
   __name: "TabbedMenu",
   props: {
     model: {}
   },
   setup(c) {
-    const t = c;
-    let e;
-    const o = I();
-    return T(() => t.model), P(() => {
-      e = new he(o.value, t.model);
+    const t = c, e = I();
+    return T(() => t.model), G(() => {
+      t.model.initResponsivityManager(e.value);
+    }), P(() => {
+      t.model.initResponsivityManager(e.value);
     }), K(() => {
-      e.dispose(), e = void 0;
-    }), (n, r) => (a(), i("div", {
+      t.model.resetResponsivityManager();
+    }), (o, n) => (a(), i("div", {
       class: "svc-tabbed-menu",
       ref_key: "container",
-      ref: o,
-      role: "tablist"
+      ref: e,
+      role: "tablist",
+      style: F(o.model.getRootStyle())
     }, [
-      (a(!0), i(w, null, V(n.model.renderedActions, (l) => (a(), h(s(u), {
-        key: l.renderedId,
+      (a(!0), i(w, null, V(o.model.renderedActions, (r) => (a(), y(s(u), {
+        key: r.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
-        item: l
+        item: r
       }, null, 8, ["item"]))), 128))
-    ], 512));
+    ], 4));
   }
-}), Ze = { class: "sv-action__content" }, Xe = /* @__PURE__ */ g({
+}), je = { class: "sv-action__content" }, Je = /* @__PURE__ */ g({
   __name: "TabbedMenuItemWrapper",
   props: {
     item: {}
@@ -169,7 +170,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref_key: "root",
       ref: t
     }, [
-      d("div", Ze, [
+      d("div", je, [
         v(s(u), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
@@ -177,14 +178,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), Ye = ["id", "aria-selected", "aria-controls"], xe = /* @__PURE__ */ g({
+}), Ze = ["id", "aria-selected", "aria-controls"], Xe = /* @__PURE__ */ g({
   __name: "TabbedMenuItem",
   props: {
     item: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.item), (e, o) => q((a(), i("div", {
+    return T(() => t.item), (e, o) => C((a(), i("div", {
       role: "tab",
       id: "tab-" + e.item.id,
       "aria-selected": e.item.active,
@@ -197,7 +198,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         key: 0,
         class: m(e.item.getTitleCss())
       }, k(e.item.title), 3)) : p("", !0),
-      e.item.hasIcon ? (a(), h(s(u), {
+      e.item.hasIcon ? (a(), y(s(u), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
@@ -205,11 +206,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: m(e.item.getIconCss()),
         title: e.item.tooltip || e.item.title
       }, null, 8, ["iconName", "class", "title"])) : p("", !0)
-    ], 10, Ye)), [
+    ], 10, Ze)), [
       [s(N)]
     ]);
   }
-}), 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({
+}), Ye = { class: "svc-flex-row svc-side-bar__wrapper" }, xe = { class: "svc-side-bar__container-wrapper" }, eo = { class: "svc-side-bar__container-content" }, oo = /* @__PURE__ */ g({
   __name: "SideBar",
   props: {
     model: {}
@@ -220,17 +221,17 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       t.model.initResizeManager(e.value);
     }), K(() => {
       t.model.resetResizeManager();
-    }), (o, n) => q((a(), i("div", {
+    }), (o, n) => C((a(), i("div", {
       class: m(["svc-side-bar", o.model.rootCss])
     }, [
-      q(d("div", {
+      C(d("div", {
         class: "svc-side-bar__shadow",
         onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
       }, null, 512), [
         [Q, o.model.renderContainer]
       ]),
-      d("div", eo, [
-        q(d("div", oo, [
+      d("div", Ye, [
+        C(d("div", xe, [
           d("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
@@ -240,8 +241,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               is: o.model.header.component,
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
-            d("div", so, [
-              (a(!0), i(w, null, V(o.model.pages, (r, l) => (a(), h(s(u), {
+            d("div", eo, [
+              (a(!0), i(w, null, V(o.model.pages, (r, l) => (a(), y(s(u), {
                 key: l,
                 is: "svc-side-bar-page",
                 model: r
@@ -251,7 +252,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ], 512), [
           [Q, o.model.renderContainer]
         ]),
-        o.model.sideAreaComponentName ? (a(), h(s(u), {
+        o.model.sideAreaComponentName ? (a(), y(s(u), {
           key: 0,
           is: o.model.sideAreaComponentName,
           model: o.model.sideAreaComponentData
@@ -261,53 +262,53 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       [Q, o.model.renderRoot]
     ]);
   }
-}), no = { class: "svc-side-bar__container-header" }, ao = { class: "svc-side-bar__container-actions" }, lo = {
+}), so = { class: "svc-side-bar__container-header" }, to = { class: "svc-side-bar__container-actions" }, no = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, io = /* @__PURE__ */ g({
+}, ao = /* @__PURE__ */ g({
   __name: "SideBarDefaultHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), i("div", no, [
-      d("div", ao, [
+    return T(() => t.model), (e, o) => (a(), i("div", so, [
+      d("div", to, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (a(), i("div", lo, k(e.model.title), 1)) : p("", !0)
+      e.model.title ? (a(), i("div", no, k(e.model.title), 1)) : p("", !0)
     ]));
   }
-}), ro = /* @__PURE__ */ g({
+}), lo = /* @__PURE__ */ g({
   __name: "SideBarPage",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => e.model.visible ? (a(), h(s(u), {
+    return T(() => t.model), (e, o) => e.model.visible ? (a(), y(s(u), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
     }, null, 8, ["is", "model"])) : p("", !0);
   }
-}), co = /* @__PURE__ */ g({
+}), io = /* @__PURE__ */ g({
   __name: "ObjectSelector",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => e.model.isVisible ? (a(), h(s(u), {
+    return T(() => t.model), (e, o) => e.model.isVisible ? (a(), y(s(u), {
       key: 0,
       is: "sv-list",
       model: e.model.list
     }, null, 8, ["model"])) : p("", !0);
   }
-}), uo = /* @__PURE__ */ g({
+}), ro = /* @__PURE__ */ g({
   __name: "PropertyGrid",
   props: {
     model: {}
@@ -321,28 +322,28 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
-      e.model.survey ? (a(), h(s(O), {
+      e.model.survey ? (a(), y(s(O), {
         key: 0,
         survey: e.model.survey
       }, null, 8, ["survey"])) : p("", !0)
     ], 2));
   }
-}), po = /* @__PURE__ */ g({
+}), co = /* @__PURE__ */ g({
   __name: "Tabs",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(!0), i(w, null, V(e.model.actions, (n, r) => (a(), h(s(u), {
+    return T(() => t.model), (e, o) => (a(!0), i(w, null, V(e.model.actions, (n, r) => (a(), y(s(u), {
       key: r,
       is: "svc-tab-button",
       model: n
     }, null, 8, ["model"]))), 128));
   }
-}), vo = { class: "svc-sidebar-tabs__top-container" }, mo = { class: "svc-sidebar-tabs__collapse-button" }, _o = /* @__PURE__ */ d("div", { class: "svc-sidebar-tabs__separator" }, [
+}), uo = { class: "svc-sidebar-tabs__top-container" }, po = { class: "svc-sidebar-tabs__collapse-button" }, vo = /* @__PURE__ */ d("div", { class: "svc-sidebar-tabs__separator" }, [
   /* @__PURE__ */ d("div")
-], -1), go = { class: "svc-sidebar-tabs__items" }, bo = { class: "svc-sidebar-tabs__bottom-container" }, yo = { class: "svc-sidebar-tabs__items" }, ho = /* @__PURE__ */ g({
+], -1), mo = { class: "svc-sidebar-tabs__items" }, _o = { class: "svc-sidebar-tabs__bottom-container" }, go = { class: "svc-sidebar-tabs__items" }, bo = /* @__PURE__ */ g({
   __name: "TabControl",
   props: {
     model: {}
@@ -352,17 +353,17 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     return T(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.sideBarClassName)
     }, [
-      d("div", vo, [
-        d("div", mo, [
+      d("div", uo, [
+        d("div", po, [
           v(s(u), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
           }, null, 8, ["model"])
         ]),
-        _o,
+        vo,
         v(s(u), { is: "sv-scroll" }, {
-          default: Z(() => [
-            d("div", go, [
+          default: X(() => [
+            d("div", mo, [
               v(s(u), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
@@ -372,8 +373,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           _: 1
         })
       ]),
-      d("div", bo, [
-        d("div", yo, [
+      d("div", _o, [
+        d("div", go, [
           v(s(u), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
@@ -382,24 +383,24 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), Co = {
+}), yo = {
   key: 0,
   class: "svc-menu-action"
-}, qo = ["title"], $o = { class: "svc-menu-action__icon" }, ko = { class: "svc-menu-action__icon-container" }, fo = /* @__PURE__ */ g({
+}, ho = ["title"], Co = { class: "svc-menu-action__icon" }, qo = { class: "svc-menu-action__icon-container" }, $o = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => e.model.visible ? (a(), i("div", Co, [
-      q((a(), i("div", {
+    return T(() => t.model), (e, o) => e.model.visible ? (a(), i("div", yo, [
+      C((a(), i("div", {
         class: m(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        d("div", $o, [
-          d("div", ko, [
+        d("div", Co, [
+          d("div", qo, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
@@ -407,64 +408,64 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, qo)), [
+      ], 10, ho)), [
         [s(N), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ])) : p("", !0);
   }
-}), wo = { class: "svc-property-grid-placeholder" }, To = { class: "svc-property-grid-placeholder__header" }, Do = { class: "svc-property-grid-placeholder__title" }, No = { class: "svc-property-grid-placeholder__description" }, Mo = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
+}), ko = { class: "svc-property-grid-placeholder" }, fo = { class: "svc-property-grid-placeholder__header" }, wo = { class: "svc-property-grid-placeholder__title" }, To = { class: "svc-property-grid-placeholder__description" }, Do = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__gap" }),
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
-], -1), So = /* @__PURE__ */ g({
+], -1), No = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(c) {
-    const t = ue;
-    return (e, o) => (a(), i("div", wo, [
-      d("div", To, [
-        d("span", Do, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        d("span", No, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+    const t = ce;
+    return (e, o) => (a(), i("div", ko, [
+      d("div", fo, [
+        d("span", wo, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        d("span", To, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      Mo
+      Do
     ]));
   }
-}), Bo = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Io = {
+}), Mo = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, So = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, Eo = {
+}, Bo = {
   key: 1,
   class: "svc-sidebar__header-caption"
-}, Po = { class: "svc-sidebar__header-title" }, Ro = { class: "svc-sidebar__header-subtitle" }, Vo = /* @__PURE__ */ g({
+}, Io = { class: "svc-sidebar__header-title" }, Eo = { class: "svc-sidebar__header-subtitle" }, Po = /* @__PURE__ */ g({
   __name: "SideBarHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), i("div", Bo, [
-      e.model.subTitle ? p("", !0) : (a(), i("div", Io, k(e.model.title), 1)),
-      e.model.subTitle ? (a(), i("div", Eo, [
-        d("span", Po, k(e.model.title), 1),
-        d("span", Ro, k(e.model.subTitle), 1)
+    return T(() => t.model), (e, o) => (a(), i("div", Mo, [
+      e.model.subTitle ? p("", !0) : (a(), i("div", So, k(e.model.title), 1)),
+      e.model.subTitle ? (a(), i("div", Bo, [
+        d("span", Io, k(e.model.title), 1),
+        d("span", Eo, k(e.model.subTitle), 1)
       ])) : p("", !0)
     ]));
   }
-}), Ao = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, zo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Lo = { class: "svc-sidebar__header-content" }, Fo = { class: "svc-sidebar__header-caption" }, Ko = { class: "svc-sidebar__header-title" }, Uo = { class: "svc-sidebar__header-subtitle" }, Qo = /* @__PURE__ */ g({
+}), Ro = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Vo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Ao = { class: "svc-sidebar__header-content" }, zo = { class: "svc-sidebar__header-caption" }, Lo = { class: "svc-sidebar__header-title" }, Fo = { class: "svc-sidebar__header-subtitle" }, Ko = /* @__PURE__ */ g({
   __name: "SideBarPropertyGridHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), i("div", Ao, [
-      d("div", zo, [
-        d("div", Lo, [
-          q((a(), i("div", {
+    return T(() => t.model), (e, o) => (a(), i("div", Ro, [
+      d("div", Vo, [
+        d("div", Ao, [
+          C((a(), i("div", {
             class: m(e.model.buttonClassName),
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
-            d("div", Fo, [
-              d("span", Ko, k(e.model.title), 1),
-              d("span", Uo, k(e.model.tooltip), 1)
+            d("div", zo, [
+              d("span", Lo, k(e.model.title), 1),
+              d("span", Fo, k(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(N), { processEsc: !1 }]
@@ -477,7 +478,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ]));
   }
-}), Ho = /* @__PURE__ */ g({
+}), Uo = /* @__PURE__ */ g({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -505,7 +506,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 2)
     ]));
   }
-}), Oo = ["title"], Go = ["title"], Wo = ["title"], jo = ["title"], Jo = /* @__PURE__ */ g({
+}), Qo = ["title"], Ho = ["title"], Oo = ["title"], Go = ["title"], Wo = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     classes: {},
@@ -520,22 +521,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 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();
+    }, o = () => new Pe().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
     return (n, r) => (a(), i(w, null, [
       n.iconName ? p("", !0) : (a(), i(w, { key: 0 }, [
         n.disabled ? (a(), i("span", {
           key: 0,
           class: m(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
-        }, k(n.text), 11, Oo)) : p("", !0),
-        q((a(), i("span", {
+        }, k(n.text), 11, Qo)) : p("", !0),
+        C((a(), i("span", {
           role: "button",
           class: m(["svc-action-button", o()]),
           onClick: e,
           title: n.title
         }, [
           be(k(n.text), 1)
-        ], 10, Go)), [
+        ], 10, Ho)), [
           [s(N)]
         ])
       ], 64)),
@@ -550,8 +551,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Wo)) : p("", !0),
-        q((a(), i("span", {
+        ], 10, Oo)) : p("", !0),
+        C((a(), i("span", {
           role: "button",
           onClick: e,
           class: m(o()),
@@ -562,28 +563,28 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, jo)), [
+        ], 10, Go)), [
           [s(N)]
         ])
       ], 64)) : p("", !0)
     ], 64));
   }
-}), Zo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], Xo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Yo = [
-  Xo
-], xo = {
+}), jo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], Jo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Zo = [
+  Jo
+], Xo = {
   key: 0,
   class: "svc-switcher__title"
-}, es = {
+}, Yo = {
   inheritAttrs: !1
-}, os = /* @__PURE__ */ g({
-  ...es,
+}, xo = /* @__PURE__ */ g({
+  ...Yo,
   __name: "Switcher",
   props: {
     item: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.item), (e, o) => q((a(), i("button", {
+    return T(() => t.item), (e, o) => C((a(), i("button", {
       class: m(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -600,16 +601,16 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }, [
       d("div", {
         class: m(e.item.getSwitcherIconCss())
-      }, Yo, 2),
-      e.item.hasTitle ? (a(), i("span", xo, k(e.item.title), 1)) : p("", !0)
-    ], 42, Zo)), [
+      }, Zo, 2),
+      e.item.hasTitle ? (a(), i("span", Xo, k(e.item.title), 1)) : p("", !0)
+    ], 42, jo)), [
       [s(N), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
   }
-}), ss = {
+}), es = {
   key: 0,
   class: "svd-simulator-content"
-}, ts = { class: "svd-simulator-content" }, ns = /* @__PURE__ */ g({
+}, os = { class: "svd-simulator-content" }, ss = /* @__PURE__ */ g({
   __name: "Simulator",
   props: {
     model: {}
@@ -628,7 +629,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onMouseover: l[1] || (l[1] = (_) => o()),
       onMouseout: l[2] || (l[2] = (_) => n())
     }, [
-      r.model.hasFrame ? p("", !0) : (a(), i("div", ss, [
+      r.model.hasFrame ? p("", !0) : (a(), i("div", es, [
         v(s(u), {
           is: "survey-widget",
           model: r.model.survey
@@ -651,7 +652,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
           })
         }, [
-          d("div", ts, [
+          d("div", os, [
             v(s(u), {
               is: "survey-widget",
               model: r.model.survey
@@ -661,7 +662,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 4)) : p("", !0)
     ], 34));
   }
-}), as = { class: "svc-surface-placeholder" }, ls = { class: "svc-surface-placeholder__text" }, is = { class: "svc-surface-placeholder__title" }, rs = { class: "svc-surface-placeholder__description" }, W = /* @__PURE__ */ g({
+}), ts = { class: "svc-surface-placeholder" }, ns = { class: "svc-surface-placeholder__text" }, as = { class: "svc-surface-placeholder__title" }, ls = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
   __name: "SurfacePlaceholder",
   props: {
     name: {},
@@ -670,20 +671,20 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return (e, o) => (a(), i("div", as, [
+    return (e, o) => (a(), i("div", ts, [
       d("div", {
         class: m(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
       }, null, 2),
-      d("div", ls, [
-        d("div", is, k(t.placeholderTitleText), 1),
-        d("div", rs, k(t.placeholderDescriptionText), 1)
+      d("div", ns, [
+        d("div", as, k(t.placeholderTitleText), 1),
+        d("div", ls, k(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
-}), ds = {
+}), is = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, cs = /* @__PURE__ */ g({
+}, rs = /* @__PURE__ */ g({
   __name: "Test",
   props: {
     model: {}
@@ -695,7 +696,7 @@ 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 ? (a(), h(W, {
+      e.model.survey.isEmpty ? (a(), y(j, {
         key: 0,
         name: "preview",
         placeholderTitleText: e.model.placeholderTitleText,
@@ -710,13 +711,13 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), h(s(u), {
+        e.model.showResults ? (a(), y(s(u), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
-      e.model.isPageToolbarVisible ? (a(), i("div", ds, [
+      e.model.isPageToolbarVisible ? (a(), i("div", is, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -724,7 +725,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])) : p("", !0)
     ], 2));
   }
-}), us = { class: "svc-btn__text" }, ps = /* @__PURE__ */ g({
+}), ds = { class: "svc-btn__text" }, cs = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "TestAgain",
   props: {
@@ -732,19 +733,19 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c, e = $(() => t.model.testAgainAction);
-    return T(() => e.value), (o, n) => q((a(), i("div", {
+    return T(() => e.value), (o, n) => C((a(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      d("span", us, k(e.value.title), 1)
+      d("span", ds, k(e.value.title), 1)
     ])), [
       [s(N)]
     ]);
   }
 });
 function z(c, t, e) {
-  const o = ye(), n = G(
+  const o = ye(), n = W(
     t.map((r) => () => r()),
     () => {
       o.value = c();
@@ -753,28 +754,28 @@ function z(c, t, e) {
       immediate: !0
     }
   );
-  return T(() => o.value, void 0, e), X(() => {
+  return T(() => o.value, void 0, e), Y(() => {
     n();
   }), o;
 }
-const vs = {
+const us = {
   key: 0,
   class: "svd-test-results"
-}, ms = { class: "svd-test-results__content" }, _s = { class: "svd-test-results__header" }, gs = { class: "svd-test-results__header-text" }, bs = { class: "svd-test-results__header-types" }, ys = { class: "svd-test-results__text svd-light-bg-color" }, hs = { class: "svd-test-results__table svd-light-bg-color" }, Cs = { class: "svd-light-background-color" }, qs = { class: "svd-dark-border-color" }, $s = { class: "svd-dark-border-color" }, ks = /* @__PURE__ */ g({
+}, ps = { class: "svd-test-results__content" }, vs = { class: "svd-test-results__header" }, ms = { class: "svd-test-results__header-text" }, _s = { class: "svd-test-results__header-types" }, gs = { class: "svd-test-results__text svd-light-bg-color" }, bs = { class: "svd-test-results__table svd-light-bg-color" }, ys = { class: "svd-light-background-color" }, hs = { class: "svd-dark-border-color" }, Cs = { class: "svd-dark-border-color" }, qs = /* @__PURE__ */ g({
   __name: "SurveyResults",
   props: {
     survey: {}
   },
   setup(c) {
     const t = c, e = z(
-      () => t.survey ? new ke(t.survey) : void 0,
+      () => t.survey ? new he(t.survey) : void 0,
       [() => t.survey]
     );
-    return (o, n) => s(e) ? (a(), i("div", vs, [
-      d("div", ms, [
-        d("div", _s, [
-          d("div", gs, k(s(e).surveyResultsText), 1),
-          d("div", bs, [
+    return (o, n) => s(e) ? (a(), i("div", us, [
+      d("div", ps, [
+        d("div", vs, [
+          d("div", ms, k(s(e).surveyResultsText), 1),
+          d("div", _s, [
             v(s(u), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
@@ -791,21 +792,21 @@ const vs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        q(d("div", ys, [
+        C(d("div", gs, [
           d("div", null, k(s(e).resultText), 1)
         ], 512), [
           [Q, s(e).resultViewType === "text"]
         ]),
-        q(d("div", hs, [
+        C(d("div", bs, [
           d("table", null, [
             d("thead", null, [
-              d("tr", Cs, [
-                d("th", qs, k(s(e).resultsTitle), 1),
-                d("th", $s, k(s(e).resultsDisplayValue), 1)
+              d("tr", ys, [
+                d("th", hs, k(s(e).resultsTitle), 1),
+                d("th", Cs, k(s(e).resultsDisplayValue), 1)
               ])
             ]),
             d("tbody", null, [
-              (a(!0), i(w, null, V(s(e).resultData, (r, l) => (a(), h(s(u), {
+              (a(!0), i(w, null, V(s(e).resultData, (r, l) => (a(), y(s(u), {
                 is: "survey-results-table-row",
                 model: r,
                 key: l
@@ -818,7 +819,7 @@ const vs = {
       ])
     ])) : p("", !0);
   }
-}), fs = { key: 2 }, ws = /* @__PURE__ */ g({
+}), $s = { key: 2 }, ks = /* @__PURE__ */ g({
   __name: "SurveyResultsRow",
   props: {
     model: {}
@@ -826,7 +827,7 @@ const vs = {
   setup(c) {
     const t = c;
     return T(() => t.model), (e, o) => (a(), i(w, null, [
-      q((a(), i("tr", {
+      C((a(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
       }, [
@@ -845,11 +846,11 @@ const vs = {
               size: 16
             })
           ], 6)) : p("", !0),
-          e.model.question ? (a(), h(s(u), {
+          e.model.question ? (a(), y(s(u), {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (a(), i("span", fs, k(e.model.title), 1))
+          }, null, 8, ["locString"])) : (a(), i("span", $s, k(e.model.title), 1))
         ], 4),
         d("td", {
           class: m({
@@ -860,28 +861,28 @@ const vs = {
       ])), [
         [s(N)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (a(!0), i(w, { key: 0 }, V(e.model.data, (n, r) => (a(), h(s(u), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), i(w, { key: 0 }, V(e.model.data, (n, r) => (a(), y(s(u), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
-}), Ts = { class: "svc-creator-tab__content" }, Ds = { class: "svc-json-editor-tab__content" }, Ns = { class: "svc-json-editor-tab__errros_list" }, Ms = /* @__PURE__ */ g({
+}), fs = { class: "svc-creator-tab__content" }, ws = { class: "svc-json-editor-tab__content" }, Ts = { class: "svc-json-editor-tab__errros_list" }, Ds = /* @__PURE__ */ g({
   __name: "JsonEditorAce",
   props: {
     model: {}
   },
   setup(c) {
     const t = c, e = I();
-    return T(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", Ts, [
-      d("div", Ds, [
+    return T(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", fs, [
+      d("div", ws, [
         d("div", {
           class: "svc-json-editor-tab__ace-editor",
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        q(d("div", Ns, [
+        C(d("div", Ts, [
           v(s(u), {
             is: "sv-list",
             model: o.model.errorList
@@ -892,7 +893,7 @@ const vs = {
       ])
     ]));
   }
-}), Ss = { class: "svc-creator-tab__content" }, Bs = { class: "svc-json-editor-tab__content" }, Is = ["aria-label", "disabled"], Es = { class: "svc-json-editor-tab__errros_list" }, Ps = /* @__PURE__ */ g({
+}), Ns = { class: "svc-creator-tab__content" }, Ms = { class: "svc-json-editor-tab__content" }, Ss = ["aria-label", "disabled"], Bs = { class: "svc-json-editor-tab__errros_list" }, Is = /* @__PURE__ */ g({
   __name: "JsonEditorTextArea",
   props: {
     model: {}
@@ -902,9 +903,9 @@ const vs = {
     return o.canShowErrors = !1, T(() => t.model), P(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (a(), i("div", Ss, [
-      d("div", Bs, [
-        q(d("textarea", {
+    }), (n, r) => (a(), i("div", Ns, [
+      d("div", Ms, [
+        C(d("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
           disabled: s(o).readOnly,
@@ -913,10 +914,10 @@ const vs = {
           ref_key: "inputEl",
           ref: e
         }, `
-      `, 40, Is), [
+      `, 40, Ss), [
           [de, s(o).text]
         ]),
-        q(d("div", Es, [
+        C(d("div", Bs, [
           v(s(u), {
             is: "sv-list",
             model: s(o).errorList
@@ -927,7 +928,7 @@ const vs = {
       ])
     ]));
   }
-}), Rs = { class: "svc-json-error__container" }, Vs = { class: "svc-json-error__title" }, As = ["title", "aria-label"], zs = /* @__PURE__ */ g({
+}), Es = { class: "svc-json-error__container" }, Ps = { class: "svc-json-error__title" }, Rs = ["title", "aria-label"], Vs = /* @__PURE__ */ g({
   __name: "JsonEditorErrorItem",
   props: {
     item: {}
@@ -945,14 +946,14 @@ const vs = {
         size: o.item.iconSize,
         class: m("svc-json-error__icon")
       }, null, 8, ["iconName", "size"]),
-      d("div", Rs, [
-        d("div", Vs, [
+      d("div", Es, [
+        d("div", Ps, [
           v(s(u), {
             is: "survey-string",
             locString: o.item.locTitle
           }, null, 8, ["locString"])
         ]),
-        o.item.data.showFixButton ? q((a(), i("button", {
+        o.item.data.showFixButton ? C((a(), i("button", {
           key: 0,
           type: "button",
           onClick: e,
@@ -965,13 +966,13 @@ const vs = {
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 8, As)), [
+        ], 8, Rs)), [
           [s(N)]
         ]) : p("", !0)
       ])
     ], 64));
   }
-}), Ls = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
+}), As = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
@@ -982,29 +983,29 @@ const vs = {
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
-    return (o, n) => q((a(), i("div", {
+    return (o, n) => C((a(), i("div", {
       role: "button",
       class: m(["svc-logic-tab__content-action svc-btn", {
         "svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
       }]),
       onClick: e
     }, [
-      d("span", Ls, k(o.model.title), 1)
+      d("span", As, k(o.model.title), 1)
     ], 2)), [
       [s(N)]
     ]);
   }
-}), Fs = { class: "svc-creator-tab__content" }, Ks = {
+}), zs = { class: "svc-creator-tab__content" }, Ls = {
   key: 1,
   class: "svc-logic-tab__content-empty"
-}, Us = /* @__PURE__ */ g({
+}, Fs = /* @__PURE__ */ g({
   __name: "Logic",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), i("div", Fs, [
+    return T(() => t.model), (e, o) => (a(), i("div", zs, [
       d("div", {
         class: m(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
@@ -1012,18 +1013,18 @@ const vs = {
           v(s(O), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
-          e.model.readOnly ? p("", !0) : (a(), h(te, {
+          e.model.readOnly ? p("", !0) : (a(), y(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
         ], 64)) : p("", !0),
-        e.model.hasItems ? p("", !0) : (a(), i("div", Ks, [
-          v(W, {
+        e.model.hasItems ? p("", !0) : (a(), i("div", Ls, [
+          v(j, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
             placeholderDescriptionText: e.model.placeholderDescriptionText
           }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-          e.model.readOnly ? p("", !0) : (a(), h(te, {
+          e.model.readOnly ? p("", !0) : (a(), y(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
@@ -1031,21 +1032,21 @@ const vs = {
       ], 2)
     ]));
   }
-}), Qs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Hs = ["id"];
-ce.Instance.registerRenderer(
+}), Ks = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Us = ["id"];
+ue.Instance.registerRenderer(
   "dropdown",
   "logicoperator",
   "sv-logic-operator"
 );
-const Os = /* @__PURE__ */ g({
+const Qs = /* @__PURE__ */ g({
   __name: "LogicOperator",
   props: {
     question: {}
   },
   setup(c) {
-    const t = c, e = I(), o = $(() => t.question.dropdownListModel ?? new qe(t.question));
+    const t = c, e = I(), o = $(() => t.question.dropdownListModel ?? new Re(t.question));
     H(t, e, (l) => {
-      fe(l);
+      Ce(l);
     });
     const n = (l) => {
       var _;
@@ -1078,13 +1079,13 @@ const Os = /* @__PURE__ */ g({
           d("div", {
             class: m(l.question.cssClasses.controlValue)
           }, [
-            l.question.locReadOnlyText ? (a(), h(s(u), {
+            l.question.locReadOnlyText ? (a(), y(s(u), {
               key: 0,
               is: "survey-string",
               locString: l.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2)
-        ], 42, Qs),
+        ], 42, Ks),
         v(s(u), {
           is: "sv-popup",
           model: l.question.popupModel
@@ -1096,15 +1097,15 @@ const Os = /* @__PURE__ */ g({
         class: m(l.question.getControlClass()),
         id: l.question.inputId
       }, [
-        l.question.locReadOnlyText ? (a(), h(s(u), {
+        l.question.locReadOnlyText ? (a(), y(s(u), {
           key: 0,
           is: "survey-string",
           locString: l.question.locReadOnlyText
         }, null, 8, ["locString"])) : p("", !0)
-      ], 10, Hs)) : p("", !0)
+      ], 10, Us)) : p("", !0)
     ], 2));
   }
-}), Gs = /* @__PURE__ */ g({
+}), Hs = /* @__PURE__ */ g({
   __name: "EmbeddedSurvey",
   props: {
     question: {}
@@ -1113,21 +1114,21 @@ const Os = /* @__PURE__ */ g({
     const t = c, e = I();
     H(t, e);
     const o = $(() => t.question.embeddedSurvey);
-    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), h(s(u), {
+    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), y(s(u), {
       key: 0,
       is: "survey-page",
       page: o.value.currentPage,
       survey: o.value
     }, null, 8, ["page", "survey"])) : p("", !0);
   }
-}), Ws = /* @__PURE__ */ g({
+}), Os = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "LinkValue",
   props: {
     question: {}
   },
   setup(c) {
-    const t = c, e = I(), o = ue.getString("pe.clear");
+    const t = c, e = I(), o = ce.getString("pe.clear");
     return H(t, e), (n, r) => (a(), i(w, null, [
       v(s(u), {
         is: "svc-action-button",
@@ -1139,7 +1140,7 @@ const Os = /* @__PURE__ */ g({
         title: n.question.tooltip,
         iconName: n.question.iconName
       }, null, 8, ["text", "click", "selected", "disabled", "classes", "title", "iconName"]),
-      !n.question.isReadOnly && n.question.showClear ? (a(), h(s(u), {
+      !n.question.isReadOnly && n.question.showClear ? (a(), y(s(u), {
         key: 0,
         is: "svc-action-button",
         text: s(o),
@@ -1149,10 +1150,10 @@ const Os = /* @__PURE__ */ g({
       }, null, 8, ["text", "click", "classes"])) : p("", !0)
     ], 64));
   }
-}), js = {
+}), Gs = {
   key: 1,
   class: "st-content"
-}, Js = { class: "svc-flex-column st-strings-wrapper" }, Zs = { class: "svc-flex-row st-strings-header" }, Xs = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Ys = /* @__PURE__ */ g({
+}, Ws = { class: "svc-flex-column st-strings-wrapper" }, js = { class: "svc-flex-row st-strings-header" }, Js = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Zs = /* @__PURE__ */ g({
   __name: "Translation",
   props: {
     model: {}
@@ -1162,20 +1163,20 @@ const Os = /* @__PURE__ */ g({
     return T(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
-      e.model.isEmpty ? (a(), h(W, {
+      e.model.isEmpty ? (a(), y(j, {
         key: 0,
         name: "translation",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.isEmpty ? p("", !0) : (a(), i("div", js, [
-        d("div", Js, [
-          d("div", Zs, [
+      e.model.isEmpty ? p("", !0) : (a(), i("div", Gs, [
+        d("div", Ws, [
+          d("div", js, [
             v(s(O), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
-          d("div", Xs, [
+          d("div", Js, [
             v(s(O), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
@@ -1184,16 +1185,16 @@ const Os = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), xs = (c, t) => {
+}), Xs = (c, t) => {
   const e = c.__vccOpts || c;
   for (const [o, n] of t)
     e[o] = n;
   return e;
-}, et = {}, ot = { class: "sd-translation-line-skeleton" };
-function st(c, t) {
-  return a(), i("div", ot);
+}, Ys = {}, xs = { class: "sd-translation-line-skeleton" };
+function et(c, t) {
+  return a(), i("div", xs);
 }
-const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
+const ot = /* @__PURE__ */ Xs(Ys, [["render", et]]), st = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
   props: {
     item: {}
@@ -1211,13 +1212,13 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       }, null, 8, ["item"])
     ], 2));
   }
-}), at = {
+}), tt = {
   key: 1,
   class: "svc-plugin-tab__content"
-}, lt = {
+}, nt = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, it = /* @__PURE__ */ g({
+}, at = /* @__PURE__ */ g({
   __name: "Theme",
   props: {
     model: {}
@@ -1229,24 +1230,24 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (a(), h(W, {
+      e.model.survey.isEmpty ? (a(), y(j, {
         key: 0,
         name: "theme",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", at, [
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", tt, [
         v(s(u), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), h(s(u), {
+        e.model.showResults ? (a(), y(s(u), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (a(), i("div", lt, [
+      e.model.isPageToolbarVisible ? (a(), i("div", nt, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -1254,7 +1255,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 2));
   }
-}), rt = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], dt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], ct = /* @__PURE__ */ g({
+}), lt = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], it = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], rt = /* @__PURE__ */ g({
   __name: "Color",
   props: {
     question: {}
@@ -1287,7 +1288,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           "aria-label": e.question.a11y_input_ariaLabel,
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy
-        }, null, 42, rt)
+        }, null, 42, lt)
       ], 6),
       d("input", {
         autocomplete: "off",
@@ -1309,7 +1310,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: m(e.question.cssClasses.control)
-      }, null, 42, dt),
+      }, null, 42, it),
       e.question.showDropdownAction ? (a(), i(w, { key: 0 }, [
         d("div", {
           "aria-hidden": "true",
@@ -1327,7 +1328,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ], 64)) : p("", !0)
     ], 34));
   }
-}), ut = /* @__PURE__ */ g({
+}), dt = /* @__PURE__ */ g({
   __name: "ColorItem",
   props: {
     model: {},
@@ -1348,7 +1349,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       }, null, 8, ["locString"])
     ], 64));
   }
-}), pt = ["disabled", "value", "placeholder"], vt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], mt = ["title", "disabled"], _t = ["for", "aria-label"], gt = /* @__PURE__ */ g({
+}), ct = ["disabled", "value", "placeholder"], ut = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], pt = ["title", "disabled"], vt = ["for", "aria-label"], mt = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
@@ -1380,7 +1381,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         onBlur: n[1] || (n[1] = //@ts-ignore
         (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
-      }, null, 42, pt),
+      }, null, 42, ct),
       d("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
@@ -1396,11 +1397,11 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         accept: o.question.acceptedTypes,
         onChange: n[2] || (n[2] = //@ts-ignore
         (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
-      }, null, 42, vt),
+      }, null, 42, ut),
       d("div", {
         class: m(o.question.cssClasses.buttonsContainer)
       }, [
-        q((a(), i("button", {
+        C((a(), i("button", {
           title: o.question.clearButtonCaption,
           class: m(o.question.cssClasses.clearButton),
           disabled: o.question.getIsClearButtonDisabled(),
@@ -1412,10 +1413,10 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
             iconName: o.question.cssClasses.clearButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, mt)), [
+        ], 10, pt)), [
           [s(N)]
         ]),
-        q((a(), i("label", {
+        C((a(), i("label", {
           class: m(o.question.getChooseButtonCss()),
           for: o.question.inputId,
           "aria-label": o.question.chooseButtonCaption,
@@ -1428,13 +1429,13 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
             size: "auto",
             title: o.question.chooseButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, _t)), [
+        ], 10, vt)), [
           [s(N)]
         ])
       ], 2)
     ], 34));
   }
-}), bt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], yt = ["disabled"], ht = ["disabled"], Ct = /* @__PURE__ */ g({
+}), _t = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], gt = ["disabled"], bt = ["disabled"], yt = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
@@ -1471,7 +1472,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: m(e.question.cssClasses.control)
-      }, null, 42, bt),
+      }, null, 42, _t),
       d("span", {
         class: m(e.question.cssClasses.buttonsContainer)
       }, [
@@ -1498,7 +1499,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, yt),
+        ], 42, gt),
         d("button", {
           "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
@@ -1522,11 +1523,11 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, ht)
+        ], 42, bt)
       ], 2)
     ], 34));
   }
-}), qt = ["disabled", "title"], ne = /* @__PURE__ */ g({
+}), ht = ["disabled", "title"], ne = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
@@ -1552,23 +1553,23 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, qt)
+      ], 10, ht)
     ], 2));
   }
-}), $t = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], kt = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
+}), Ct = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], qt = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
-], -1), ft = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
+], -1), $t = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
-], -1), wt = [
-  kt,
-  ft
-], Tt = { class: "spg-boolean-switch__caption" }, Dt = ["id"];
-ce.Instance.registerRenderer(
+], -1), kt = [
+  qt,
+  $t
+], ft = { class: "spg-boolean-switch__caption" }, wt = ["id"];
+ue.Instance.registerRenderer(
   "boolean",
   "switch",
   "sv-boolean-switch"
 );
-const Nt = /* @__PURE__ */ g({
+const Tt = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -1597,13 +1598,13 @@ const Nt = /* @__PURE__ */ g({
       "aria-errormessage": n.question.a11y_input_ariaErrormessage,
       onClick: r[0] || (r[0] = (l) => o.value = !o.value)
     }, [
-      q((a(), i("div", {
+      C((a(), i("div", {
         class: m(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
-      }, wt, 2)), [
+      }, kt, 2)), [
         [s(N), { disableTabStop: !0 }]
       ]),
-      d("div", Tt, [
+      d("div", ft, [
         d("div", {
           class: "spg-boolean-switch__title",
           id: n.question.labelRenderedAriaID
@@ -1612,14 +1613,14 @@ const Nt = /* @__PURE__ */ g({
             is: "survey-string",
             locString: n.question.locTitle
           }, null, 8, ["locString"])
-        ], 8, Dt)
+        ], 8, wt)
       ])
-    ], 8, $t));
+    ], 8, Ct));
   }
-}), Mt = { class: "svc-string-editor__content" }, St = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Bt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), It = { class: "svc-string-editor__input" }, Et = ["textContent", "aria-placeholder", "aria-label", "contenteditable"], Pt = ["aria-placeholder", "aria-label", "contenteditable", "innerHTML"], Rt = {
+}), Dt = { class: "svc-string-editor__content" }, Nt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Mt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), St = { class: "svc-string-editor__input" }, Bt = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], It = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], Et = {
   key: 0,
   class: "svc-string-editor__error"
-}, Vt = /* @__PURE__ */ g({
+}, Pt = /* @__PURE__ */ g({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -1627,78 +1628,78 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = I(), r = I(), l = z(
       () => {
-        const C = new we(
+        const h = new qe(
           e.value,
           o.value
         );
-        return C.setLocString(e.value), C.blurEditor = () => {
+        return h.setLocString(e.value), h.blurEditor = () => {
           n.value && (n.value.blur(), n.value.spellcheck = !1);
-        }, C.getEditorElement = () => n.value, setTimeout(() => C.afterRender()), C;
+        }, h.getEditorElement = () => n.value, setTimeout(() => h.afterRender()), h;
       },
       [() => o.value, () => e.value],
-      (C) => {
-        C && (C.blurEditor = void 0, C.getEditorElement = void 0, C.dispose());
+      (h) => {
+        h && (h.blurEditor = void 0, h.getEditorElement = void 0, h.dispose());
       }
     ), _ = $(() => {
-      var C;
-      return (C = l.value) == null ? void 0 : C.errorText;
-    }), y = $(() => {
-      var C;
-      return (C = l.value) == null ? void 0 : C.className(e.value.renderedHtml);
+      var h;
+      return (h = l.value) == null ? void 0 : h.errorText;
+    }), q = $(() => {
+      var h;
+      return (h = l.value) == null ? void 0 : h.className(e.value.renderedHtml);
     }), b = $(() => {
-      var C;
-      return (C = l.value) == null ? void 0 : C.placeholder;
+      var h;
+      return (h = l.value) == null ? void 0 : h.placeholder;
     }), f = $(() => {
-      var C;
-      return (C = l.value) == null ? void 0 : C.contentEditable;
+      var h;
+      return (h = l.value) == null ? void 0 : h.contentEditable;
     }), E = $(() => {
-      var C;
-      return (C = l.value) == null ? void 0 : C.characterCounter;
+      var h;
+      return (h = l.value) == null ? void 0 : h.characterCounter;
     }), R = $(
       () => {
-        var C;
-        return (C = l.value) == null ? void 0 : C.showCharacterCounter;
+        var h;
+        return (h = l.value) == null ? void 0 : h.showCharacterCounter;
       }
     ), L = $(
       () => {
-        var C;
-        return (C = l.value) == null ? void 0 : C.getCharacterCounterClass;
+        var h;
+        return (h = l.value) == null ? void 0 : h.getCharacterCounterClass;
       }
-    ), j = (C) => {
+    ), J = (h) => {
       var D, B;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (D = l.value) == null || D.onBlur(C), (B = l.value) == null ? void 0 : B.errorText;
-    }, U = (C) => {
+      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (D = l.value) == null || D.onBlur(h), (B = l.value) == null ? void 0 : B.errorText;
+    }, U = (h) => {
       var D;
-      (D = l.value) == null || D.onFocus(C);
-    }, ve = (C) => {
+      (D = l.value) == null || D.onFocus(h);
+    }, ve = (h) => {
       var D;
-      (D = l.value) == null || D.onPaste(C);
-    }, se = (C) => {
+      (D = l.value) == null || D.onPaste(h);
+    }, se = (h) => {
       var D, B;
-      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (B = l.value) == null || B.onClick(C);
-    }, J = () => {
+      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (B = l.value) == null || B.onClick(h);
+    }, Z = () => {
       r.value = e.value.renderedHtml;
-    }, me = G(
+    }, me = W(
       () => e.value,
-      (C, D) => {
-        D && C.onStringChanged.remove(J), C && (C.onStringChanged.add(J), J());
+      (h, D) => {
+        D && h.onStringChanged.remove(Z), h && (h.onStringChanged.add(Z), Z());
       },
       {
         immediate: !0
       }
     );
     return P(() => {
-      var C;
-      e.value.__isEditing && ((C = n.value) == null || C.focus());
+      var h;
+      e.value.__isEditing && ((h = n.value) == null || h.focus());
     }), K(() => {
-      me(), e.value.onStringChanged.remove(J);
-    }), (C, D) => (a(), i("span", {
-      class: m(y.value)
+      me(), e.value.onStringChanged.remove(Z);
+    }), (h, D) => (a(), i("span", {
+      class: m(q.value)
     }, [
-      d("span", Mt, [
-        St,
-        Bt,
-        d("span", It, [
+      d("span", Dt, [
+        Nt,
+        Mt,
+        d("span", St, [
           e.value.hasHtml ? p("", !0) : (a(), i("span", {
             key: 0,
             role: "textbox",
@@ -1706,7 +1707,7 @@ const Nt = /* @__PURE__ */ g({
             spellcheck: "false",
             onFocus: U,
             onPaste: ve,
-            onBlur: j,
+            onBlur: J,
             onInput: D[0] || (D[0] = //@ts-ignore
             (...B) => {
               var M, S;
@@ -1742,16 +1743,17 @@ const Nt = /* @__PURE__ */ g({
             "aria-placeholder": b.value,
             "aria-label": b.value || "content editable",
             contenteditable: f.value,
+            tabindex: s(l).tabIndex,
             ref_key: "root",
             ref: n
-          }, null, 40, Et)),
+          }, null, 40, Bt)),
           e.value.hasHtml ? (a(), i("span", {
             key: 1,
             role: "textbox",
             class: "sv-string-editor sv-string-editor--html",
             spellcheck: "false",
             onFocus: U,
-            onBlur: j,
+            onBlur: J,
             onKeydown: D[6] || (D[6] = //@ts-ignore
             (...B) => {
               var M, S;
@@ -1781,11 +1783,12 @@ const Nt = /* @__PURE__ */ g({
             "aria-placeholder": b.value,
             "aria-label": b.value || "content editable",
             contenteditable: f.value,
+            tabindex: s(l).tabIndex,
             innerHTML: r.value,
             ref_key: "root",
             ref: n
-          }, null, 40, Pt)) : p("", !0),
-          R.value ? (a(), h(s(u), {
+          }, null, 40, It)) : p("", !0),
+          R.value ? (a(), y(s(u), {
             key: 2,
             is: "sv-character-counter",
             counter: E.value,
@@ -1793,49 +1796,47 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      _.value ? (a(), i("span", Rt, k(_.value), 1)) : p("", !0)
+      _.value ? (a(), i("span", Et, k(_.value), 1)) : p("", !0)
     ], 2));
   }
-}), At = {
+}), Rt = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, zt = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Lt = {
+}, Vt = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), At = {
   key: 1,
   class: "svc-toolbox__placeholder"
-}, Ft = {
+}, zt = {
   key: 1,
   class: "svc-toolbox__category"
-}, Kt = /* @__PURE__ */ g({
+}, Lt = /* @__PURE__ */ g({
   __name: "AdaptiveToolbox",
   props: {
     model: {}
   },
   setup(c) {
     const t = c, e = $(() => t.model.toolbox), o = I();
-    T(() => e.value);
-    let n;
-    P(() => {
-      e.value.setRootElement(o.value), n = new $e(
-        e.value.containerElement,
-        e.value
-      );
+    T(() => e.value), G(() => {
+      e.value.afterRender(o.value);
+    }), P(() => {
+      e.value.afterRender(o.value);
     }), K(() => {
-      n == null || n.dispose(), e.value.setRootElement(void 0);
+      e.value.beforeDestroy();
     });
-    const r = $(() => e.value.renderedActions);
-    return (l, _) => (a(), i("div", {
+    const n = $(() => e.value.renderedActions);
+    return (r, l) => (a(), i("div", {
       class: m(e.value.classNames),
       ref_key: "root",
-      ref: o
+      ref: o,
+      style: F(e.value.getRootStyle())
     }, [
       d("div", {
-        onFocusout: _[0] || (_[0] = (y) => e.value.focusOut(y)),
+        onFocusout: l[0] || (l[0] = (_) => e.value.focusOut(_)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (a(), i("div", At, [
-          e.value.isCompactRendered ? (a(), h(s(u), {
+        e.value.showSearch ? (a(), i("div", Rt, [
+          e.value.isCompactRendered ? (a(), y(s(u), {
             is: "svc-toolbox-tool",
-            creator: l.model,
+            creator: r.model,
             key: "searchitem",
             item: e.value.searchItem,
             parentModel: e.value,
@@ -1845,23 +1846,23 @@ const Nt = /* @__PURE__ */ g({
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
-          zt
+          Vt
         ])) : p("", !0),
-        e.value.showPlaceholder ? (a(), i("div", Lt, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        e.value.showPlaceholder ? (a(), i("div", At, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(s(u), { is: "sv-scroll" }, {
-          default: Z(() => [
-            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(w, { key: 0 }, V(e.value.categories, (y, b) => (a(), h(s(u), {
+          default: X(() => [
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(w, { key: 0 }, V(e.value.categories, (_, q) => (a(), y(s(u), {
               is: "svc-toolbox-category",
-              key: b,
-              category: y,
+              key: q,
+              category: _,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (a(), i("div", Ft, [
-              (a(!0), i(w, null, V(r.value, (y) => (a(), h(s(u), {
-                key: y.renderedId,
+            e.value.showInSingleCategory ? (a(), i("div", zt, [
+              (a(!0), i(w, null, V(n.value, (_) => (a(), y(s(u), {
+                key: _.renderedId,
                 is: "svc-toolbox-tool",
-                creator: l.model,
-                item: y,
+                creator: r.model,
+                item: _,
                 parentModel: e.value,
                 isCompact: e.value.isCompactRendered
               }, null, 8, ["creator", "item", "parentModel", "isCompact"]))), 128))
@@ -1870,12 +1871,12 @@ const Nt = /* @__PURE__ */ g({
           _: 1
         })
       ], 32)
-    ], 2));
+    ], 6));
   }
-}), Ut = {
+}), Ft = {
   key: 0,
   class: "svc-toolbox__category-separator"
-}, Qt = /* @__PURE__ */ g({
+}, Kt = /* @__PURE__ */ g({
   __name: "ToolboxTool",
   props: {
     creator: {},
@@ -1885,7 +1886,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = z(
-      () => new Te(
+      () => new $e(
         t.item,
         t.creator,
         t.parentModel
@@ -1910,13 +1911,13 @@ const Nt = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Ut)) : p("", !0),
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Ft)) : p("", !0),
         d("div", {
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
           (..._) => {
-            var y, b;
-            return ((y = s(e)) == null ? void 0 : y.onPointerDown) && ((b = s(e)) == null ? void 0 : b.onPointerDown(..._));
+            var q, b;
+            return ((q = s(e)) == null ? void 0 : q.onPointerDown) && ((b = s(e)) == null ? void 0 : b.onPointerDown(..._));
           })
         }, [
           v(s(u), {
@@ -1930,10 +1931,10 @@ const Nt = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Ht = ["aria-label", "title"], Ot = { class: "svc-toolbox__item-container" }, Gt = {
+}), Ut = ["aria-label", "title"], Qt = { class: "svc-toolbox__item-container" }, Ht = {
   key: 0,
   class: "svc-toolbox__item-title"
-}, Wt = /* @__PURE__ */ g({
+}, Ot = /* @__PURE__ */ g({
   __name: "ToolboxItem",
   props: {
     creator: {},
@@ -1943,15 +1944,15 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     return (t, e) => (a(), i(w, null, [
-      q((a(), i("div", {
+      C((a(), i("div", {
         class: m(["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))
       }, [
-        d("span", Ot, [
-          t.item.iconName ? (a(), h(s(u), {
+        d("span", Qt, [
+          t.item.iconName ? (a(), y(s(u), {
             key: 0,
             is: "sv-svg-icon",
             iconName: t.item.iconName,
@@ -1959,8 +1960,8 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (a(), i("span", Gt, k(t.item.title), 1))
-      ], 10, Ht)), [
+        t.isCompact ? p("", !0) : (a(), i("span", Ht, k(t.item.title), 1))
+      ], 10, Ut)), [
         [s(N)]
       ]),
       t.isCompact ? (a(), i("span", {
@@ -1978,7 +1979,7 @@ const Nt = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 64));
   }
-}), jt = /* @__PURE__ */ g({
+}), Gt = /* @__PURE__ */ g({
   __name: "ToolboxItemGroup",
   props: {
     creator: {},
@@ -2017,10 +2018,10 @@ const Nt = /* @__PURE__ */ g({
       ], 32)
     ], 64));
   }
-}), Jt = { className: "svc-toolbox__category-header-wrapper" }, Zt = { class: "svc-toolbox__category-title" }, Xt = {
+}), Wt = { className: "svc-toolbox__category-header-wrapper" }, jt = { class: "svc-toolbox__category-title" }, Jt = {
   key: 0,
   class: "svc-toolbox__category-header__controls"
-}, Yt = /* @__PURE__ */ g({
+}, Zt = /* @__PURE__ */ g({
   __name: "ToolboxCategory",
   props: {
     category: {},
@@ -2034,15 +2035,15 @@ const Nt = /* @__PURE__ */ g({
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
-      d("div", Jt, [
-        q((a(), i("div", {
+      d("div", Wt, [
+        C((a(), i("div", {
           class: m(["svc-toolbox__category-header", {
             "svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
           }]),
           onClick: o[0] || (o[0] = (n) => e.category.toggleState())
         }, [
-          d("span", Zt, k(e.category.title), 1),
-          e.toolbox.canCollapseCategories ? (a(), i("div", Xt, [
+          d("span", jt, k(e.category.title), 1),
+          e.toolbox.canCollapseCategories ? (a(), i("div", Jt, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: e.category.iconName,
@@ -2054,7 +2055,7 @@ const Nt = /* @__PURE__ */ g({
           [s(N)]
         ])
       ]),
-      (a(!0), i(w, null, V(e.category.items, (n) => (a(), h(s(u), {
+      (a(!0), i(w, null, V(e.category.items, (n) => (a(), y(s(u), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2064,7 +2065,7 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["item", "creator", "parentModel"]))), 128))
     ], 2));
   }
-}), xt = /* @__PURE__ */ g({
+}), Xt = /* @__PURE__ */ g({
   __name: "ToolboxList",
   props: {
     model: {},
@@ -2075,7 +2076,7 @@ const Nt = /* @__PURE__ */ g({
     return T(() => t.model), (o, n) => (a(), i("div", {
       class: m(o.model.cssClasses.root)
     }, [
-      (a(!0), i(w, null, V(s(e), (r, l) => (a(), h(s(u), {
+      (a(!0), i(w, null, V(s(e), (r, l) => (a(), y(s(u), {
         key: l,
         is: "svc-toolbox-tool",
         creator: o.creator,
@@ -2085,28 +2086,28 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
     ], 2));
   }
-}), en = { class: "svc-flex-column" }, on = { class: "svc-tab-designer_content" }, sn = {
+}), Yt = { class: "svc-flex-column" }, xt = { class: "svc-tab-designer_content" }, en = {
   key: 0,
   class: "svc-designer-header"
-}, tn = {
+}, on = {
   class: "svc-designer__placeholder-container",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, nn = {
+}, sn = {
   className: "svc-designer-placeholder-page",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, an = {
+}, tn = {
   key: 0,
   class: "svc-designer-header"
-}, ln = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], rn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], dn = {
+}, nn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], an = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], ln = {
   key: 0,
   class: "svc-tab-designer__tools"
-}, cn = {
+}, rn = {
   key: 0,
   class: "svc-tab-designer__page-navigator"
-}, un = {
+}, dn = {
   key: 1,
   class: "svc-tab-designer__toolbar"
-}, pn = /* @__PURE__ */ g({
+}, cn = /* @__PURE__ */ g({
   __name: "Designer",
   props: {
     model: {}
@@ -2114,8 +2115,8 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.model.survey);
     return T(() => t.model), T(() => e.value), (o, n) => (a(), i(w, null, [
-      d("div", en, [
-        o.model.isToolboxVisible ? (a(), h(s(u), {
+      d("div", Yt, [
+        o.model.isToolboxVisible ? (a(), y(s(u), {
           key: 0,
           is: "svc-toolbox",
           model: o.model.creator
@@ -2127,22 +2128,22 @@ const Nt = /* @__PURE__ */ g({
         (...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
       }, [
         v(s(u), { is: "sv-scroll" }, {
-          default: Z(() => [
-            d("div", on, [
+          default: X(() => [
+            d("div", xt, [
               o.model.showPlaceholder ? (a(), i(w, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), i("div", sn, [
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), i("div", en, [
                   v(s(u), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
                 ])) : p("", !0),
-                d("div", tn, [
-                  v(W, {
+                d("div", on, [
+                  v(j, {
                     name: "designer",
                     placeholderTitleText: o.model.placeholderTitleText,
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-                  d("div", nn, [
+                  d("div", sn, [
                     v(s(u), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
@@ -2161,7 +2162,7 @@ const Nt = /* @__PURE__ */ g({
                     o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.allowEditSurveyTitle ? (a(), i("div", an, [
+                  o.model.creator.allowEditSurveyTitle ? (a(), i("div", tn, [
                     v(s(u), {
                       is: "survey-header",
                       survey: o.model.creator.survey
@@ -2180,7 +2181,7 @@ const Nt = /* @__PURE__ */ g({
                       page: r,
                       isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
-                  ], 8, ln))), 128)) : p("", !0),
+                  ], 8, nn))), 128)) : p("", !0),
                   o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), i("div", {
                     key: 2,
                     class: "svc-page",
@@ -2193,17 +2194,17 @@ const Nt = /* @__PURE__ */ g({
                       creator: o.model.creator,
                       isGhost: o.model.pagesController.page2Display == o.model.newPage
                     }, null, 8, ["page", "creator", "isGhost"])
-                  ], 8, rn)) : p("", !0)
+                  ], 8, an)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (a(), i("div", dn, [
-                  o.model.creator.showPageNavigator ? (a(), i("div", cn, [
+                o.model.showSurfaceTools ? (a(), i("div", ln, [
+                  o.model.creator.showPageNavigator ? (a(), i("div", rn, [
                     v(s(u), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
                   ])) : p("", !0),
-                  o.model.showSurfaceToolbar ? (a(), i("div", un, [
+                  o.model.showSurfaceToolbar ? (a(), i("div", dn, [
                     v(s(u), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
@@ -2218,16 +2219,16 @@ const Nt = /* @__PURE__ */ g({
       ], 2)
     ], 64));
   }
-}), vn = ["id", "data-sv-drop-target-survey-page"], mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _n = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gn = {
+}), un = ["id", "data-sv-drop-target-survey-page"], pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), vn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), mn = {
   key: 1,
   class: "svc-page__loading-content"
-}, bn = {
+}, _n = {
   key: 2,
   class: "svc-page__placeholder_frame"
-}, yn = { class: "svc-panel__placeholder_frame" }, hn = { class: "svc-panel__placeholder" }, Cn = { class: "svc-page__content-actions" }, qn = {
+}, gn = { class: "svc-panel__placeholder_frame" }, bn = { class: "svc-panel__placeholder" }, yn = { class: "svc-page__content-actions" }, hn = {
   key: 4,
   class: "svc-page__content-actions"
-}, $n = /* @__PURE__ */ g({
+}, Cn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2238,7 +2239,7 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = I(), o = z(
       () => {
-        const r = new De(t.creator, t.page);
+        const r = new ke(t.creator, t.page);
         return r.isGhost = t.isGhost, r;
       },
       [() => t.page],
@@ -2246,12 +2247,12 @@ const Nt = /* @__PURE__ */ g({
         r.dispose();
       }
     );
-    G(
+    W(
       () => t.isGhost,
       () => {
         o.value && (o.value.isGhost = t.isGhost);
       }
-    ), Y(() => {
+    ), G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
       e.value && o.value && o.value.setRootElement(e.value);
@@ -2259,7 +2260,7 @@ const Nt = /* @__PURE__ */ g({
     const n = (r) => {
       o.value.hover(r, r.currentTarget);
     };
-    return (r, l) => s(o).page ? q((a(), i("div", {
+    return (r, l) => s(o).page ? C((a(), i("div", {
       key: s(o).page.id,
       id: s(o).page.id,
       class: m(["svc-page__content", s(o).css]),
@@ -2273,20 +2274,20 @@ const Nt = /* @__PURE__ */ g({
       onMouseover: n,
       onMouseleave: n
     }, [
-      mn,
-      _n,
-      s(o).needRenderContent ? (a(), h(s(u), {
+      pn,
+      vn,
+      s(o).needRenderContent ? (a(), y(s(u), {
         key: 0,
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"])) : p("", !0),
-      s(o).needRenderContent ? p("", !0) : (a(), i("div", gn, [
+      s(o).needRenderContent ? p("", !0) : (a(), i("div", mn, [
         v(s(u), { is: "sv-loading-indicator" })
       ])),
-      s(o).showPlaceholder ? (a(), i("div", bn, [
-        d("div", yn, [
-          d("div", hn, k(s(o).placeholderText), 1)
+      s(o).showPlaceholder ? (a(), i("div", _n, [
+        d("div", gn, [
+          d("div", bn, k(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
@@ -2302,24 +2303,24 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        d("div", Cn, [
+        d("div", yn, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer
           }, null, 8, ["model"]),
-          s(o).topActionContainer.hasActions ? (a(), h(s(u), {
+          s(o).topActionContainer.hasActions ? (a(), y(s(u), {
             key: 0,
             is: "sv-action-bar",
             model: s(o).topActionContainer
           }, null, 8, ["model"])) : p("", !0)
         ])
       ], 32)) : p("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", qn, [
+      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", hn, [
         v(s(u), {
           is: "sv-action-bar",
           model: s(o).actionContainer
         }, null, 8, ["model"]),
-        s(o).topActionContainer.hasActions ? (a(), h(s(u), {
+        s(o).topActionContainer.hasActions ? (a(), y(s(u), {
           key: 0,
           is: "sv-action-bar",
           model: s(o).topActionContainer
@@ -2329,11 +2330,11 @@ const Nt = /* @__PURE__ */ g({
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
-    ], 42, vn)), [
+    ], 42, un)), [
       [s(N)]
     ]) : p("", !0);
   }
-}), kn = { class: "svc-add-new-item-button__text" }, fn = /* @__PURE__ */ g({
+}), qn = { class: "svc-add-new-item-button__text" }, $n = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2349,7 +2350,7 @@ const Nt = /* @__PURE__ */ g({
       () => t.renderPopup === void 0 || t.renderPopup !== !1
     );
     return (n, r) => (a(), i(w, null, [
-      q((a(), i("div", {
+      C((a(), i("div", {
         class: m(e.value),
         onClick: r[0] || (r[0] = (l) => {
           n.item.data.addNewQuestion(n.item, l), l.stopPropagation();
@@ -2362,8 +2363,8 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        d("span", kn, k(n.item.data.addNewQuestionText), 1),
-        o.value ? (a(), h(s(u), {
+        d("span", qn, k(n.item.data.addNewQuestionText), 1),
+        o.value ? (a(), y(s(u), {
           key: 0,
           is: "svc-add-question-type-selector",
           questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2372,7 +2373,7 @@ const Nt = /* @__PURE__ */ g({
       ], 34)), [
         [s(N)]
       ]),
-      o.value ? p("", !0) : (a(), h(s(u), {
+      o.value ? p("", !0) : (a(), y(s(u), {
         key: 0,
         is: "svc-add-question-type-selector",
         questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2380,7 +2381,7 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), wn = ["title", "aria-label"], Tn = /* @__PURE__ */ g({
+}), kn = ["title", "aria-label"], fn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2388,7 +2389,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return T(() => t.questionTypeSelectorModel), (e, o) => q((a(), i("button", {
+    return T(() => t.questionTypeSelectorModel), (e, o) => C((a(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2405,23 +2406,23 @@ const Nt = /* @__PURE__ */ g({
         size: "auto",
         title: e.questionTypeSelectorModel.title
       }), null, 16),
-      e.renderPopup ? (a(), h(s(u), {
+      e.renderPopup ? (a(), y(s(u), {
         key: 0,
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
-    ], 8, wn)), [
+    ], 8, kn)), [
       [s(N)]
     ]);
   }
-}), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Nn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Mn = /* @__PURE__ */ g({
+}), wn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Tn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Dn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
   },
   setup(c) {
     const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = z(
-      () => new Ne(e.value, o.value, void 0),
+      () => new fe(e.value, o.value, void 0),
       [() => e.value, () => o.value],
       (r) => {
         r.dispose();
@@ -2434,15 +2435,15 @@ const Nt = /* @__PURE__ */ g({
     }), (r, l) => (a(), i("div", {
       class: m(s(n).cssClasses)
     }, [
-      Dn,
-      Nn,
+      wn,
+      Tn,
       x(r.$slots, "default")
     ], 2));
   }
-}), Sn = ["data-sv-drop-target-survey-element"], Bn = { class: "svc-fake-title" }, In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Rn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Vn = { class: "svc-question__top-actions" }, An = {
+}), Nn = ["data-sv-drop-target-survey-element"], Mn = { class: "svc-fake-title" }, Sn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Pn = { class: "svc-question__top-actions" }, Rn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, zn = { class: "svc-panel__placeholder_frame" }, Ln = {
+}, Vn = { class: "svc-panel__placeholder_frame" }, An = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2467,7 +2468,7 @@ const Nt = /* @__PURE__ */ g({
     ), n = $(
       () => o.value.isBannerShowing ? o.value.createBannerParams() : null
     );
-    Y(() => {
+    G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
       e.value && o.value && (o.value.rootElement = e.value);
@@ -2480,9 +2481,9 @@ const Nt = /* @__PURE__ */ g({
       class: m(["svc-question__adorner", s(o).rootCss()]),
       ref_key: "root",
       ref: e,
-      onDblclick: _[2] || (_[2] = (y) => s(o).dblclick(y)),
-      onMouseover: _[3] || (_[3] = (y) => s(o).hover(y, y.currentTarget)),
-      onMouseleave: _[4] || (_[4] = (y) => s(o).hover(y, y.currentTarget)),
+      onDblclick: _[2] || (_[2] = (q) => s(o).dblclick(q)),
+      onMouseover: _[3] || (_[3] = (q) => s(o).hover(q, q.currentTarget)),
+      onMouseleave: _[4] || (_[4] = (q) => s(o).hover(q, q.currentTarget)),
       "data-sv-drop-target-survey-element": s(o).element.name || null,
       "data-bind": "css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"
     }, [
@@ -2490,7 +2491,7 @@ const Nt = /* @__PURE__ */ g({
         key: 0,
         class: m(s(o).cssCollapsedHiddenHeader)
       }, [
-        l.element.hasTitle ? (a(), h(s(u), {
+        l.element.hasTitle ? (a(), y(s(u), {
           key: 0,
           is: "survey-element-title",
           element: l.element
@@ -2498,23 +2499,23 @@ const Nt = /* @__PURE__ */ g({
           key: 1,
           class: m(s(o).cssCollapsedHiddenTitle)
         }, [
-          d("span", Bn, k(l.element.name), 1)
+          d("span", Mn, k(l.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      q((a(), i("div", {
-        onClick: _[1] || (_[1] = (y) => {
-          s(o).select(s(o), y), y.stopPropagation();
+      C((a(), i("div", {
+        onClick: _[1] || (_[1] = (q) => {
+          s(o).select(s(o), q), q.stopPropagation();
         }),
         class: m(s(o).css())
       }, [
+        Sn,
+        Bn,
         In,
         En,
-        Pn,
-        Rn,
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
-          onPointerdown: _[0] || (_[0] = (y) => s(o).onPointerDown(y))
+          onPointerdown: _[0] || (_[0] = (q) => s(o).onPointerDown(q))
         }, [
           v(s(u), A({
             is: "sv-svg-icon",
@@ -2524,7 +2525,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          d("div", Vn, [
+          d("div", Pn, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
@@ -2538,25 +2539,25 @@ const Nt = /* @__PURE__ */ g({
             componentName: l.componentName,
             componentData: l.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", An, [
-            d("div", zn, [
-              d("div", Ln, k(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", Rn, [
+            d("div", Vn, [
+              d("div", An, k(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), h(s(u), A(
+          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), y(s(u), A(
             {
               key: 1,
               is: l.placeholderComponent
             },
             l.getPlaceholderComponentData && l.getPlaceholderComponentData(s(o))
           ), null, 16, ["is"])) : p("", !0),
-          l.adornerComponent ? (a(), h(s(u), {
+          l.adornerComponent ? (a(), y(s(u), {
             key: 2,
             is: l.adornerComponent,
             model: s(o),
             element: l.element
           }, null, 8, ["is", "model", "element"])) : p("", !0),
-          s(o).isBannerShowing ? (a(), h(s(u), {
+          s(o).isBannerShowing ? (a(), y(s(u), {
             key: 3,
             is: "svc-question-banner",
             model: n.value
@@ -2575,7 +2576,7 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, Sn)) : p("", !0);
+    ], 42, Nn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2589,28 +2590,28 @@ const Nt = /* @__PURE__ */ g({
       t.componentData.element,
       null
     );
-    return (o, n) => (a(), h(oe, {
+    return (o, n) => (a(), y(oe, {
       createModel: e,
       element: o.componentData.element,
       "component-name": o.componentName,
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Fn = /* @__PURE__ */ g({
+}), zn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = () => new Me(
+    const t = c, e = () => new we(
       t.componentData.data,
       t.componentData.element,
       null
     ), o = (n) => ({
       question: n == null ? void 0 : n.filePresentationModel
     });
-    return (n, r) => (a(), h(oe, {
+    return (n, r) => (a(), y(oe, {
       "create-model": e,
       element: t.componentData.element,
       "show-placeholder-component": !0,
@@ -2621,17 +2622,17 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), Kn = {
+}), Ln = {
   key: 0,
   class: "svc-image-question-controls"
-}, Un = ["accept"], Qn = {
+}, Fn = ["accept"], Kn = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, Hn = {
+}, Un = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, On = { class: "svc-image-question__loading" }, Gn = /* @__PURE__ */ g({
+}, Qn = { class: "svc-image-question__loading" }, Hn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
@@ -2639,7 +2640,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     return (t, e) => (a(), i(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Kn, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Ln, [
         t.model.allowEdit ? (a(), i(w, { key: 0 }, [
           d("input", {
             type: "file",
@@ -2647,8 +2648,8 @@ const Nt = /* @__PURE__ */ g({
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Un),
-          q((a(), i("span", Qn, [
+          }, null, 8, Fn),
+          C((a(), i("span", Kn, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
@@ -2660,14 +2661,14 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Hn, [
-        d("div", On, [
+      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Un, [
+        d("div", Qn, [
           v(s(u), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Wn = { class: "svc-rating-question-content" }, jn = ["aria-label"], Jn = ["aria-label"], Zn = /* @__PURE__ */ g({
+}), On = { class: "svc-rating-question-content" }, Gn = ["aria-label"], Wn = ["aria-label"], jn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2675,7 +2676,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = z(
-      () => new Se(
+      () => new Te(
         t.componentData.data,
         t.componentData.question,
         null
@@ -2683,20 +2684,20 @@ const Nt = /* @__PURE__ */ g({
       [() => t.componentData.data, () => t.componentData.question]
     );
     return (o, n) => {
-      var r, l, _, y, b, f, E, R, L;
-      return a(), i("div", Wn, [
+      var r, l, _, q, b, f, E, R, L;
+      return a(), i("div", On, [
         d("div", {
           class: m((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
-          (l = s(e)) != null && l.allowRemove ? q((a(), i("span", {
+          (l = s(e)) != null && l.allowRemove ? C((a(), i("span", {
             key: 0,
             class: m((_ = s(e)) == null ? void 0 : _.removeClassNames),
-            onClick: n[0] || (n[0] = (j) => {
+            onClick: n[0] || (n[0] = (J) => {
               var U;
               return (U = s(e)) == null ? void 0 : U.removeItem(s(e));
             }),
             role: "button",
-            "aria-label": (y = s(e)) == null ? void 0 : y.removeTooltip
+            "aria-label": (q = s(e)) == null ? void 0 : q.removeTooltip
           }, [
             v(s(u), {
               is: "sv-svg-icon",
@@ -2704,13 +2705,13 @@ const Nt = /* @__PURE__ */ g({
               size: "auto",
               title: (b = s(e)) == null ? void 0 : b.removeTooltip
             }, null, 8, ["title"])
-          ], 10, jn)), [
+          ], 10, Gn)), [
             [s(N)]
           ]) : p("", !0),
-          (f = s(e)) != null && f.allowAdd ? q((a(), i("span", {
+          (f = s(e)) != null && f.allowAdd ? C((a(), i("span", {
             key: 1,
             class: m((E = s(e)) == null ? void 0 : E.addClassNames),
-            onClick: n[1] || (n[1] = (j) => {
+            onClick: n[1] || (n[1] = (J) => {
               var U;
               return (U = s(e)) == null ? void 0 : U.addItem(s(e));
             }),
@@ -2723,7 +2724,7 @@ const Nt = /* @__PURE__ */ g({
               size: "auto",
               title: (L = s(e)) == null ? void 0 : L.addTooltip
             }, null, 8, ["title"])
-          ], 10, Jn)), [
+          ], 10, Wn)), [
             [s(N)]
           ]) : p("", !0)
         ], 2),
@@ -2731,10 +2732,10 @@ const Nt = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Xn = {
+}), Jn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, Yn = /* @__PURE__ */ g({
+}, Zn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
@@ -2744,13 +2745,13 @@ const Nt = /* @__PURE__ */ g({
       () => t.componentData.question
     ), _ = z(
       () => {
-        var y;
-        return t.componentData ? new Be(
+        var q;
+        return t.componentData ? new De(
           e.value,
           r.value,
           l.value,
           o.value,
-          n.value || ((y = r.value.cell) == null ? void 0 : y.column)
+          n.value || ((q = r.value.cell) == null ? void 0 : q.column)
         ) : void 0;
       },
       [
@@ -2760,7 +2761,7 @@ const Nt = /* @__PURE__ */ g({
         () => l.value
       ]
     );
-    return (y, b) => {
+    return (q, b) => {
       var f, E;
       return a(), i("div", {
         tabindex: "-1",
@@ -2781,9 +2782,9 @@ const Nt = /* @__PURE__ */ g({
         d("div", {
           class: m(["svc-matrix-cell--selected", { "svc-visible": (f = s(_)) == null ? void 0 : f.isSelected }])
         }, null, 2),
-        x(y.$slots, "default"),
-        (E = s(_)) != null && E.isSupportCellEditor ? (a(), i("div", Xn, [
-          q((a(), i("span", {
+        x(q.$slots, "default"),
+        (E = s(_)) != null && E.isSupportCellEditor ? (a(), i("div", Jn, [
+          C((a(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: b[0] || (b[0] = (R) => s(_).editQuestion(s(_), R))
           }, [
@@ -2799,7 +2800,7 @@ const Nt = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), xn = { class: "svc-question__adorner" }, ea = { class: "svc-question__content svc-question__content--in-popup" }, oa = /* @__PURE__ */ g({
+}), Xn = { class: "svc-question__adorner" }, Yn = { class: "svc-question__content svc-question__content--in-popup" }, xn = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
@@ -2809,19 +2810,19 @@ const Nt = /* @__PURE__ */ g({
     const t = c, e = $(
       () => t.componentData.element
     );
-    return T(() => e.value), (o, n) => (a(), i("div", xn, [
-      d("div", ea, [
+    return T(() => e.value), (o, n) => (a(), i("div", Xn, [
+      d("div", Yn, [
         v(s(u), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
-}), sa = ["data-sv-drop-target-survey-element"], ta = { class: "svc-fake-title" }, na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), aa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), la = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), ia = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ra = { class: "svc-question__top-actions" }, da = {
+}), ea = ["data-sv-drop-target-survey-element"], oa = { class: "svc-fake-title" }, sa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ta = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), aa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), la = { class: "svc-question__top-actions" }, ia = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, ca = { class: "svc-panel__placeholder_frame" }, ua = { class: "svc-panel__placeholder" }, pa = { class: "svc-add-new-item-button__text" }, va = {
+}, ra = { class: "svc-panel__placeholder_frame" }, da = { class: "svc-panel__placeholder" }, ca = { class: "svc-add-new-item-button__text" }, ua = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, ma = { class: "svc-panel__question-type-selector-popup" }, _a = { class: "svc-panel__add-new-question-wrapper" }, ga = /* @__PURE__ */ g({
+}, pa = { class: "svc-panel__question-type-selector-popup" }, va = { class: "svc-panel__add-new-question-wrapper" }, ma = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2854,7 +2855,7 @@ const Nt = /* @__PURE__ */ g({
         key: 0,
         class: m(s(e).cssCollapsedHiddenHeader)
       }, [
-        s(e).element.hasTitle ? (a(), h(s(u), {
+        s(e).element.hasTitle ? (a(), y(s(u), {
           key: 0,
           is: "survey-element-title",
           element: s(e).element
@@ -2862,17 +2863,17 @@ const Nt = /* @__PURE__ */ g({
           key: 1,
           class: m(s(e).cssCollapsedHiddenTitle)
         }, [
-          d("span", ta, k(s(e).element.name), 1)
+          d("span", oa, k(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      q((a(), i("div", {
+      C((a(), i("div", {
         class: m(s(e).css()),
         onClick: r[2] || (r[2] = (l) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), l) : null)
       }, [
+        sa,
+        ta,
         na,
         aa,
-        la,
-        ia,
         s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -2884,7 +2885,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          d("div", ra, [
+          d("div", la, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
@@ -2894,10 +2895,10 @@ const Nt = /* @__PURE__ */ g({
         ], 32)) : p("", !0),
         s(e).needToRenderContent ? (a(), i(w, { key: 1 }, [
           v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (a(), i("div", da, [
-            d("div", ca, [
-              d("div", ua, k(s(e).placeholderText), 1),
-              s(e).showAddQuestionButton ? q((a(), i("div", {
+          s(e).isEmptyElement ? (a(), i("div", ia, [
+            d("div", ra, [
+              d("div", da, k(s(e).placeholderText), 1),
+              s(e).showAddQuestionButton ? C((a(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
@@ -2908,20 +2909,20 @@ const Nt = /* @__PURE__ */ g({
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                d("span", pa, k(s(e).addNewQuestionText), 1)
+                d("span", ca, k(s(e).addNewQuestionText), 1)
               ])), [
                 [s(N)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", va, [
-            d("div", ma, [
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", ua, [
+            d("div", pa, [
               v(s(u), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            d("div", _a, [
+            d("div", va, [
               v(s(u), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
@@ -2945,22 +2946,22 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, sa)) : p("", !0);
+    ], 42, ea)) : p("", !0);
   }
-}), ba = ["data-sv-drop-target-item-value"], ya = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ha = { class: "svc-item-value-controls" }, Ca = {
+}), _a = ["data-sv-drop-target-item-value"], ga = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ba = { class: "svc-item-value-controls" }, ya = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, qa = ["aria-label"], $a = ["aria-label"], ka = /* @__PURE__ */ g({
+}, ha = ["aria-label"], Ca = ["aria-label"], qa = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = I(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), l = G(
+    const t = I(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), l = W(
       () => r.value,
-      (y, b) => {
-        y && t.value && y.setRootElement(t.value), b && b.setRootElement(void 0);
+      (q, b) => {
+        q && t.value && q.setRootElement(t.value), b && b.setRootElement(void 0);
       }
     );
     P(() => {
@@ -2969,15 +2970,15 @@ const Nt = /* @__PURE__ */ g({
       r.value.setRootElement(void 0);
     });
     const _ = z(
-      () => new Ie(o.value, n.value, r.value),
+      () => new Ne(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
-      (y) => {
-        y.dispose();
+      (q) => {
+        q.dispose();
       }
     );
-    return X(() => {
+    return Y(() => {
       l();
-    }), (y, b) => (a(), i("div", {
+    }), (q, b) => (a(), i("div", {
       class: m(["svc-item-value-wrapper", {
         "svc-item-value--new": s(_).isNew,
         "svc-item-value--dragging": s(_).isDragging,
@@ -2990,9 +2991,9 @@ const Nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      ya,
-      d("div", ha, [
-        s(_).isDraggable ? (a(), i("span", Ca, [
+      ga,
+      d("div", ba, [
+        s(_).isDraggable ? (a(), i("span", ya, [
           v(s(u), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
@@ -3001,7 +3002,7 @@ const Nt = /* @__PURE__ */ g({
             title: s(_).dragTooltip
           }, null, 8, ["title"])
         ])) : p("", !0),
-        s(_).allowAdd ? q((a(), i("span", {
+        s(_).allowAdd ? C((a(), i("span", {
           key: 1,
           class: "svc-item-value-controls__button svc-item-value-controls__add",
           onClick: b[0] || (b[0] = (f) => s(_).add(s(_))),
@@ -3014,10 +3015,10 @@ const Nt = /* @__PURE__ */ g({
             size: "auto",
             title: s(_).tooltip
           }, null, 8, ["title"])
-        ], 8, qa)), [
+        ], 8, ha)), [
           [s(N)]
         ]) : p("", !0),
-        s(_).allowRemove ? q((a(), i("span", {
+        s(_).allowRemove ? C((a(), i("span", {
           key: 2,
           class: "svc-item-value-controls__button svc-item-value-controls__remove",
           onClick: b[1] || (b[1] = (f) => s(_).remove(s(_))),
@@ -3031,7 +3032,7 @@ const Nt = /* @__PURE__ */ g({
             size: "auto",
             title: s(_).tooltip
           }, null, 8, ["title"])
-        ], 40, $a)), [
+        ], 40, Ca)), [
           [s(N)]
         ]) : p("", !0)
       ]),
@@ -3039,23 +3040,23 @@ const Nt = /* @__PURE__ */ g({
         class: "svc-item-value__item",
         onClick: b[3] || (b[3] = (f) => s(_).select(s(_), f))
       }, [
-        v(s(u), A({ is: y.componentName }, y.componentData), null, 16, ["is"])
+        v(s(u), A({ is: q.componentName }, q.componentData), null, 16, ["is"])
       ])
-    ], 42, ba));
+    ], 42, _a));
   }
-}), fa = ["data-sv-drop-target-item-value"], wa = { class: "svc-image-item-value-wrapper__content" }, Ta = ["accept"], Da = {
+}), $a = ["data-sv-drop-target-item-value"], ka = { class: "svc-image-item-value-wrapper__content" }, fa = ["accept"], wa = {
   key: 0,
   class: "svc-image-item-value__item"
-}, Na = {
+}, Ta = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, Ma = { class: "svc-image-item-value__item" }, Sa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ba = { class: "sd-imagepicker__label" }, Ia = {
+}, Da = { class: "svc-image-item-value__item" }, Na = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ma = { class: "sd-imagepicker__label" }, Sa = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Ea = {
+}, Ba = {
   key: 0,
   class: "svc-image-item-value__placeholder"
-}, Pa = { key: 1 }, Ra = /* @__PURE__ */ g({
+}, Ia = { key: 1 }, Ea = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
@@ -3064,7 +3065,7 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = I(), l = z(
       () => {
-        const b = new Ee(
+        const b = new Me(
           e.value,
           o.value,
           n.value,
@@ -3079,7 +3080,7 @@ const Nt = /* @__PURE__ */ g({
       }
     ), _ = (b) => {
       b.preventDefault();
-    }, y = $(() => {
+    }, q = $(() => {
       const b = !l.value.getIsNewItemSingle();
       return {
         width: b ? o.value.renderedImageWidth + "px" : void 0,
@@ -3102,18 +3103,18 @@ const Nt = /* @__PURE__ */ g({
     }, [
       d("div", {
         class: "svc-image-item-value-wrapper__ghost",
-        style: F(y.value)
+        style: F(q.value)
       }, null, 4),
-      d("div", wa, [
+      d("div", ka, [
         d("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(l).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, Ta),
+        }, null, 8, fa),
         !s(l).isNew && !s(l).isUploading ? (a(), i(w, { key: 0 }, [
-          s(l).isNew ? p("", !0) : (a(), i("div", Da, [
+          s(l).isNew ? p("", !0) : (a(), i("div", wa, [
             v(s(u), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
           s(l).isDraggable && s(l).canRenderControls ? (a(), i("span", {
@@ -3129,8 +3130,8 @@ const Nt = /* @__PURE__ */ g({
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(l).canRenderControls ? (a(), i("div", Na, [
-            q((a(), i("span", {
+          s(l).canRenderControls ? (a(), i("div", Ta, [
+            C((a(), i("span", {
               class: "svc-context-button",
               onClick: f[1] || (f[1] = (E) => s(l).chooseFile(s(l))),
               title: void 0,
@@ -3146,7 +3147,7 @@ const Nt = /* @__PURE__ */ g({
             ])), [
               [s(N)]
             ]),
-            q((a(), i("span", {
+            C((a(), i("span", {
               class: "svc-context-button svc-context-button--danger",
               onClick: f[2] || (f[2] = (E) => s(l).remove(s(l))),
               title: void 0,
@@ -3164,14 +3165,14 @@ const Nt = /* @__PURE__ */ g({
             ])
           ])) : p("", !0)
         ], 64)) : (a(), i(w, { key: 1 }, [
-          d("div", Ma, [
-            d("div", Sa, [
-              d("label", Ba, [
+          d("div", Da, [
+            d("div", Na, [
+              d("label", Ma, [
                 d("div", {
-                  style: F(y.value),
+                  style: F(q.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(l).isUploading ? (a(), i("div", Ia, [
+                  s(l).isUploading ? (a(), i("div", Sa, [
                     v(s(u), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
@@ -3183,27 +3184,27 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-image-item-value-controls",
             onPointerdown: f[4] || (f[4] = (E) => E.stopPropagation())
           }, [
-            s(l).showPlaceholder ? (a(), i("span", Ea, k(s(l).placeholderText), 1)) : p("", !0),
-            q((a(), i("span", {
+            s(l).showPlaceholder ? (a(), i("span", Ba, k(s(l).placeholderText), 1)) : p("", !0),
+            C((a(), i("span", {
               class: m(s(l).addButtonCss),
               onClick: f[3] || (f[3] = (E) => s(l).chooseNewFile(s(l)))
             }, [
-              s(l).showChooseButtonAsIcon ? (a(), h(s(u), {
+              s(l).showChooseButtonAsIcon ? (a(), y(s(u), {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-add-lg",
                 size: "auto",
                 title: s(l).addFileTitle
-              }, null, 8, ["title"])) : (a(), i("span", Pa, k(s(l).chooseImageText), 1))
+              }, null, 8, ["title"])) : (a(), i("span", Ia, k(s(l).chooseImageText), 1))
             ], 2)), [
               [s(N)]
             ])
           ], 32)) : p("", !0)
         ], 64))
       ])
-    ], 42, fa));
+    ], 42, $a));
   }
-}), Va = /* @__PURE__ */ g({
+}), Pa = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
@@ -3238,29 +3239,29 @@ const Nt = /* @__PURE__ */ g({
       v(s(u), A({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Aa = ["accept"], za = /* @__PURE__ */ d("svg", null, [
+}), Ra = ["accept"], Va = /* @__PURE__ */ d("svg", null, [
   /* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
-], -1), La = [
-  za
-], Fa = { class: "svc-context-container svc-logo-image-controls" }, Ka = {
+], -1), Aa = [
+  Va
+], za = { class: "svc-context-container svc-logo-image-controls" }, La = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Ua = /* @__PURE__ */ g({
+}, Fa = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
   setup(c) {
     const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = I(), r = z(
-      () => new Pe(e.value, null),
+      () => new Se(e.value, null),
       [() => e.value]
     ), l = I(), _ = () => {
       l.value = o.value.locLogo.renderedHtml;
     };
-    return G(
+    return W(
       () => o.value.locLogo,
-      (y, b) => {
-        _(), y && y.onStringChanged.add(_), b && y.onStringChanged.remove(_);
+      (q, b) => {
+        _(), q && q.onStringChanged.add(_), b && q.onStringChanged.remove(_);
       },
       {
         immediate: !0
@@ -3269,7 +3270,7 @@ const Nt = /* @__PURE__ */ g({
       n.value && (r.value.root = n.value);
     }), K(() => {
       r.value && (r.value.root = void 0);
-    }), (y, b) => (a(), i("div", {
+    }), (q, b) => (a(), i("div", {
       class: "svc-logo-image",
       ref_key: "root",
       ref: n
@@ -3280,13 +3281,13 @@ const Nt = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Aa),
+      }, null, 8, Ra),
       l.value ? p("", !0) : (a(), i(w, { key: 0 }, [
-        s(r).allowEdit && !s(r).isUploading ? q((a(), i("div", {
+        s(r).allowEdit && !s(r).isUploading ? C((a(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: b[0] || (b[0] = (f) => s(r).chooseFile(s(r)))
-        }, La)), [
+        }, Aa)), [
           [s(N)]
         ]) : p("", !0)
       ], 64)),
@@ -3294,8 +3295,8 @@ const Nt = /* @__PURE__ */ g({
         key: 1,
         class: m(s(r).containerCss)
       }, [
-        d("div", Fa, [
-          q((a(), i("span", {
+        d("div", za, [
+          C((a(), i("span", {
             class: "svc-context-button",
             onClick: b[1] || (b[1] = (f) => s(r).chooseFile(s(r))),
             title: void 0,
@@ -3309,7 +3310,7 @@ const Nt = /* @__PURE__ */ g({
           ])), [
             [s(N)]
           ]),
-          q((a(), i("span", {
+          C((a(), i("span", {
             class: "svc-context-button svc-context-button--danger",
             onClick: b[2] || (b[2] = (f) => s(r).remove(s(r))),
             title: void 0,
@@ -3329,15 +3330,15 @@ const Nt = /* @__PURE__ */ g({
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(r).isUploading ? (a(), i("div", Ka, [
+      s(r).isUploading ? (a(), i("div", La, [
         v(s(u), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), Qa = {
+}), Ka = {
   key: 0,
   class: "svc-search"
-}, Ha = { class: "svc-search__search-icon" }, Oa = ["aria-label", "placeholder"], Ga = { class: "svc-search__toolbar" }, Wa = { class: "svc-search__toolbar-counter" }, ja = /* @__PURE__ */ g({
+}, Ua = { class: "svc-search__search-icon" }, Qa = ["aria-label", "placeholder"], Ha = { class: "svc-search__toolbar" }, Oa = { class: "svc-search__toolbar-counter" }, Ga = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
@@ -3352,25 +3353,25 @@ const Nt = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (a(), i("div", Qa, [
-      d("div", Ha, [
+    return (o, n) => o.model.isVisible ? (a(), i("div", Ka, [
+      d("div", Ua, [
         v(s(u), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
         })
       ]),
-      q(d("input", {
+      C(d("input", {
         type: "text",
         class: "svc-search__input",
         "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder
-      }, null, 8, Oa), [
+      }, null, 8, Qa), [
         [de, e.value]
       ]),
-      d("div", Ga, [
-        d("div", Wa, k(o.model.matchCounterText), 1),
+      d("div", Ha, [
+        d("div", Oa, k(o.model.matchCounterText), 1),
         v(s(u), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
@@ -3378,7 +3379,7 @@ const Nt = /* @__PURE__ */ g({
       ])
     ])) : p("", !0);
   }
-}), Ja = ["title"], Za = /* @__PURE__ */ g({
+}), Wa = ["title"], ja = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3386,7 +3387,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = z(
-      () => new Re(t.pagesController, t.pageEditMode),
+      () => new Be(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
     ), o = I();
     return P(() => {
@@ -3394,18 +3395,18 @@ const Nt = /* @__PURE__ */ g({
         const n = o.value, r = e.value;
         n && r.attachToUI(n);
       }
-    }), X(() => {
+    }), Y(() => {
       const n = e.value;
       n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
     }), K(() => {
       e.value.dispose();
-    }), (n, r) => q((a(), i("div", {
+    }), (n, r) => C((a(), i("div", {
       class: "svc-page-navigator",
       ref_key: "root",
       ref: o
     }, [
       d("div", null, [
-        q((a(), i("div", {
+        C((a(), i("div", {
           role: "button",
           class: m(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
           onClick: r[0] || (r[0] = (l) => s(e).togglePageSelector(l)),
@@ -3417,7 +3418,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: s(e).icon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Ja)), [
+        ], 10, Wa)), [
           [s(N)]
         ]),
         v(s(u), {
@@ -3426,7 +3427,7 @@ const Nt = /* @__PURE__ */ g({
         }, null, 8, ["model"])
       ]),
       d("div", null, [
-        (a(!0), i(w, null, V(s(e).visibleItems, (l) => (a(), h(s(u), {
+        (a(!0), i(w, null, V(s(e).visibleItems, (l) => (a(), y(s(u), {
           is: "svc-page-navigator-item",
           key: l.id,
           model: l
@@ -3436,11 +3437,11 @@ const Nt = /* @__PURE__ */ g({
       [Q, s(e).visible]
     ]);
   }
-}), Xa = { class: "svc-page-navigator-item" }, Ya = ["title"], xa = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), el = [
-  xa
-], ol = { class: "svc-page-navigator-item__banner" }, sl = { class: "svc-page-navigator-item__text" }, tl = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
+}), Ja = { class: "svc-page-navigator-item" }, Za = ["title"], Xa = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ya = [
+  Xa
+], xa = { class: "svc-page-navigator-item__banner" }, el = { class: "svc-page-navigator-item__text" }, ol = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
   /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), nl = /* @__PURE__ */ g({
+], -1), sl = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
@@ -3451,8 +3452,8 @@ const Nt = /* @__PURE__ */ g({
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (a(), i("div", Xa, [
-      q((a(), i("div", {
+    return (o, n) => (a(), i("div", Ja, [
+      C((a(), i("div", {
         role: "button",
         class: m(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
@@ -3463,17 +3464,17 @@ const Nt = /* @__PURE__ */ g({
         d("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, el, 8, Ya),
-        d("div", ol, [
-          d("span", sl, k(o.model.title), 1),
-          tl
+        }, Ya, 8, Za),
+        d("div", xa, [
+          d("span", el, k(o.model.title), 1),
+          ol
         ])
       ], 2)), [
         [s(N)]
       ])
     ]));
   }
-}), al = { class: "svc-question__dropdown-choices--wrapper" }, ll = { class: "svc-question__dropdown-choices" }, il = /* @__PURE__ */ g({
+}), tl = { class: "svc-question__dropdown-choices--wrapper" }, nl = { class: "svc-question__dropdown-choices" }, al = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3488,9 +3489,9 @@ const Nt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (a(), i("div", al, [
+    return (n, r) => (a(), i("div", tl, [
       d("div", null, [
-        d("div", ll, [
+        d("div", nl, [
           (a(!0), i(w, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
             key: l.value,
             class: m(n.model.getChoiceCss())
@@ -3500,7 +3501,7 @@ const Nt = /* @__PURE__ */ g({
             }, o(l)), null, 16, ["is"])
           ], 2))), 128))
         ]),
-        n.model.needToCollapse ? (a(), h(s(u), {
+        n.model.needToCollapse ? (a(), y(s(u), {
           key: 0,
           is: "svc-action-button",
           text: n.model.getButtonText(),
@@ -3510,19 +3511,19 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), rl = /* @__PURE__ */ g({
+}), ll = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = () => new Ve(
+    const t = c, e = () => new Ie(
       t.componentData.data,
       t.componentData.element,
       null
     );
-    return (o, n) => (a(), h(oe, {
+    return (o, n) => (a(), y(oe, {
       "create-model": e,
       element: o.componentData.element,
       "component-name": o.componentName,
@@ -3530,7 +3531,7 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), dl = { class: "svc-question__adorner" }, cl = { class: "svc-question__content svc-question__content--in-popup" }, ul = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", pl = /* @__PURE__ */ g({
+}), il = { class: "svc-question__adorner" }, rl = { class: "svc-question__content svc-question__content--in-popup" }, dl = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", cl = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
@@ -3547,10 +3548,10 @@ const Nt = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return T(() => e.value), (r, l) => (a(), i("div", dl, [
-      d("div", cl, [
+    return T(() => e.value), (r, l) => (a(), i("div", il, [
+      d("div", rl, [
         v(s(u), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        d("div", ul, [
+        d("div", dl, [
           (a(!0), i(w, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
             key: _.value,
             class: "svc-question__dropdown-choice"
@@ -3563,18 +3564,18 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), vl = ["data-sv-drop-target-survey-element"], ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), _l = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), gl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), bl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), yl = { class: "svc-widget__content" }, hl = {
+}), ul = ["data-sv-drop-target-survey-element"], pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), vl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _l = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gl = { class: "svc-widget__content" }, bl = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, Cl = /* @__PURE__ */ d("div", {
+}, yl = /* @__PURE__ */ d("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), ql = [
-  Cl
-], $l = { class: "svc-question__content-actions" }, kl = {
+}, null, -1), hl = [
+  yl
+], Cl = { class: "svc-question__content-actions" }, ql = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, fl = { class: "svc-panel__placeholder" }, wl = /* @__PURE__ */ g({
+}, $l = { class: "svc-panel__placeholder" }, kl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
@@ -3592,7 +3593,7 @@ const Nt = /* @__PURE__ */ g({
         n.dispose();
       }
     );
-    return Y(() => {
+    return G(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
       e.value && o.value && (o.value.rootElement = e.value);
@@ -3605,16 +3606,16 @@ const Nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: e
     }, [
-      s(o).element.isInteractiveDesignElement ? q((a(), i("div", {
+      s(o).element.isInteractiveDesignElement ? C((a(), i("div", {
         key: 0,
         class: m(["svc-question__content", s(o).css()]),
         onClick: r[1] || (r[1] = (l) => s(o).select(s(o), l)),
         "data-bind": "clickBubble: false"
       }, [
+        pl,
+        vl,
         ml,
         _l,
-        gl,
-        bl,
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -3627,11 +3628,11 @@ const Nt = /* @__PURE__ */ g({
             size: "auto"
           })
         ], 32)) : p("", !0),
-        d("div", yl, [
+        d("div", gl, [
           v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (a(), i("div", hl, ql)) : p("", !0),
-        d("div", $l, [
+        s(o).isEmptyElement ? (a(), i("div", bl, hl)) : p("", !0),
+        d("div", Cl, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
@@ -3643,22 +3644,22 @@ const Nt = /* @__PURE__ */ g({
       ]) : p("", !0),
       s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(w, { key: 1 }, [
         v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (a(), i("div", kl, [
-          d("div", fl, k(s(o).placeholderText), 1)
+        s(o).isEmptyElement ? (a(), i("div", ql, [
+          d("div", $l, k(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, vl)) : p("", !0);
+    ], 42, ul)) : p("", !0);
   }
-}), Tl = { class: "svc-carry-forward-panel-wrapper" }, Dl = { class: "svc-carry-forward-panel" }, Nl = { class: "svc-carry-forward-panel__link" }, Ml = /* @__PURE__ */ g({
+}), fl = { class: "svc-carry-forward-panel-wrapper" }, wl = { class: "svc-carry-forward-panel" }, Tl = { class: "svc-carry-forward-panel__link" }, Dl = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(c) {
-    return (t, e) => (a(), i("div", Tl, [
-      d("div", Dl, [
+    return (t, e) => (a(), i("div", fl, [
+      d("div", wl, [
         d("span", null, k(t.model.text) + k(" "), 1),
-        d("span", Nl, [
+        d("span", Tl, [
           v(s(u), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3669,27 +3670,27 @@ const Nt = /* @__PURE__ */ g({
     ]));
   }
 });
-function Sl(c, t, e) {
+function Nl(c, t, e) {
   c(t, e);
 }
 function pe(c) {
-  const t = Sl.bind(
+  const t = Nl.bind(
     void 0,
     c
   );
-  t("svc-tabbed-menu", Je), t("svc-tabbed-menu-item-wrapper", Xe), 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", po), t("svc-tab-control", ho), t("svc-tab-button", fo), t("svc-property-grid-placeholder", So), t("svc-side-bar-header", Vo), t("svc-side-bar-property-grid-header", Qo), t("svc-property-grid", uo), t("svc-object-selector", co), t("svc-search", ja), t("svc-switcher", os), t("svc-action-button", Jo), t("svc-question-error", Ho), t("survey-embeddedsurvey", Gs), t("sv-logic-operator", Os), t("survey-linkvalue", Ws), t("survey-color", ct), t("color-item", ut), t("sv-boolean-switch", Nt), t("survey-fileedit", gt), t("survey-spinedit", Ct), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", ns), t("svc-tab-preview", cs), t("svc-complete-page", ps), t("survey-results", ks), t("survey-results-table-row", ws), t("json-error-item", zs), t("svc-tab-json-editor-textarea", Ps), t("svc-tab-json-editor-ace", Ms), t("svc-tab-translation", Ys), t("sd-translation-line-skeleton", tt), t("svc-translate-from-action", nt), t("svc-tab-logic", Us), t("svc-tab-theme", it), t("svc-toolbox", Kt), t("svc-toolbox-list", xt), t("svc-toolbox-category", Yt), t("svc-toolbox-tool", Qt), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", jt), t(Ae, Vt), t("svc-tab-designer", pn), t("svc-page-navigator", Za), t("svc-page-navigator-item", nl), t("svc-page", $n), t("svc-row", Mn), t("svc-add-new-question-btn", fn), t("svc-add-question-type-selector", Tn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Zn), t("svc-image-question", Fn), t("svc-image-question-adorner", Gn), t("svc-matrix-cell", Yn), t("svc-cell-question", oa), t("svc-cell-dropdown-question", pl), t("svc-question-editor-content", Va), t("svc-logo-image", Ua), t("svc-panel", ga), t("svc-item-value", ka), t("svc-image-item-value", Ra), t("svc-dropdown-question", rl), t("svc-dropdown-question-adorner", il), t("svc-widget-question", wl), t("svc-question-banner", Ml);
+  t("svc-tabbed-menu", We), t("svc-tabbed-menu-item-wrapper", Je), t("svc-tabbed-menu-item", Xe), t("svc-side-bar", oo), t("svc-side-bar-default-header", ao), t("svc-side-bar-page", lo), t("svc-tabs", co), t("svc-tab-control", bo), t("svc-tab-button", $o), t("svc-property-grid-placeholder", No), t("svc-side-bar-header", Po), t("svc-side-bar-property-grid-header", Ko), t("svc-property-grid", ro), t("svc-object-selector", io), t("svc-search", Ga), t("svc-switcher", xo), t("svc-action-button", Wo), t("svc-question-error", Uo), t("survey-embeddedsurvey", Hs), t("sv-logic-operator", Qs), t("survey-linkvalue", Os), t("survey-color", rt), t("color-item", dt), t("sv-boolean-switch", Tt), t("survey-fileedit", mt), t("survey-spinedit", yt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", ss), t("svc-tab-preview", rs), t("svc-complete-page", cs), t("survey-results", qs), t("survey-results-table-row", ks), t("json-error-item", Vs), t("svc-tab-json-editor-textarea", Is), t("svc-tab-json-editor-ace", Ds), t("svc-tab-translation", Zs), t("sd-translation-line-skeleton", ot), t("svc-translate-from-action", st), t("svc-tab-logic", Fs), t("svc-tab-theme", at), t("svc-toolbox", Lt), t("svc-toolbox-list", Xt), t("svc-toolbox-category", Zt), t("svc-toolbox-tool", Kt), t("svc-toolbox-item", Ot), t("svc-toolbox-item-group", Gt), t(Ee, Pt), t("svc-tab-designer", cn), t("svc-page-navigator", ja), t("svc-page-navigator-item", sl), t("svc-page", Cn), t("svc-row", Dn), t("svc-add-new-question-btn", $n), t("svc-add-question-type-selector", fn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", jn), t("svc-image-question", zn), t("svc-image-question-adorner", Hn), t("svc-matrix-cell", Zn), t("svc-cell-question", xn), t("svc-cell-dropdown-question", cl), t("svc-question-editor-content", Pa), t("svc-logo-image", Fa), t("svc-panel", ma), t("svc-item-value", qa), t("svc-image-item-value", Ea), t("svc-dropdown-question", ll), t("svc-dropdown-question-adorner", al), t("svc-widget-question", kl), t("svc-question-banner", Dl);
 }
 pe(
   (c, t) => ie.Instance.registerComponent(c, t)
 );
-const Rl = {
+const El = {
   install(c) {
-    c.component("SurveyCreatorComponent", je), pe((t, e) => {
+    c.component("SurveyCreatorComponent", Ge), pe((t, e) => {
       c.component(t, e), ie.Instance.registerComponent(t, t);
     });
   }
 };
 export {
-  je as SurveyCreatorComponent,
-  Rl as surveyCreatorPlugin
+  Ge as SurveyCreatorComponent,
+  El as surveyCreatorPlugin
 };