survey-creator-vue 2.0.10 → 2.1.1

package/survey-creator-vue.es.js

@@ -1,14 +1,14 @@
-import { useBase as T, SvComponent as u, key2ClickDirective as N, SurveyComponent as Q, useQuestion as O, useComputedArray as _e, ComponentFactory as ie } from "survey-vue3-ui";
-import { defineComponent as g, computed as k, toRaw as ge, ref as I, onMounted as P, onUnmounted as K, openBlock as a, createElementBlock as l, Fragment as w, createVNode as v, unref as s, createElementVNode as d, normalizeClass as _, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as h, nextTick as re, withDirectives as C, toDisplayString as $, vShow as U, 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 qe, RendererFactory as ce, DropdownListModel as Ce, VerticalResponsivityManager as ke } from "survey-core";
-import { editorLocalization as ue, SurveyResultsModel as $e, 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";
+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 = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
-}, Ke = ["v-show"], Ue = { class: "svc-creator__content-holder svc-flex-column" }, He = ["aria-labelledby", "id"], Oe = {
+}, Ke = ["v-show"], Ue = { class: "svc-creator__content-holder svc-flex-column" }, Qe = ["aria-labelledby", "id"], He = {
   key: 0,
   class: "svc-footer-bar"
-}, Qe = ["v-show"], Ge = {
+}, Oe = ["v-show"], Ge = {
   key: 0,
   class: "svc-creator__banner"
 }, We = ["innerHTML"], je = /* @__PURE__ */ g({
@@ -17,20 +17,20 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(c) {
-    const t = c, e = k(() => ge(t.model)), o = I();
+    const t = c, e = $(() => ge(t.model)), o = I();
     return T(
       () => e.value,
-      (n, i) => {
-        i && i.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
+      (n, r) => {
+        r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
       }
     ), P(() => {
       o.value && t.model.setRootElement(o.value);
     }), K(() => {
       t.model.unsubscribeRootElement();
-    }), (n, i) => e.value.isCreatorDisposed ? p("", !0) : (a(), l(w, { key: 0 }, [
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(w, { key: 0 }, [
       v(s(u), { is: "survey-popup-modal" }),
       d("div", {
-        class: _(e.value.getRootCss()),
+        class: m(e.value.getRootCss()),
         style: F(e.value.themeVariables),
         ref_key: "root",
         ref: o
@@ -39,24 +39,24 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           v(s(u), { is: "sv-svg-bundle" })
         ]),
         d("div", {
-          class: _(["svc-full-container svc-creator__area svc-flex-column", {
+          class: m(["svc-full-container svc-creator__area svc-flex-column", {
             "svc-creator__area--with-banner": !e.value.haveCommercialLicense
           }])
         }, [
           d("div", {
-            class: _(["svc-flex-row svc-full-container", {
+            class: m(["svc-flex-row svc-full-container", {
               "svc-creator__side-bar--left": e.value.sidebarLocation == "left"
             }])
           }, [
             d("div", ze, [
               d("div", Le, [
-                e.value.showTabs ? (a(), l("div", Fe, [
+                e.value.showTabs ? (a(), i("div", Fe, [
                   v(s(u), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
                   }, null, 8, ["model"])
                 ])) : p("", !0),
-                e.value.showToolbar ? (a(), l("div", {
+                e.value.showToolbar ? (a(), i("div", {
                   key: 1,
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.showToolbar
@@ -68,30 +68,30 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 ], 8, Ke)) : p("", !0)
               ]),
               d("div", {
-                class: _(["svc-creator__content-wrapper svc-flex-row", {
+                class: m(["svc-creator__content-wrapper svc-flex-row", {
                   "svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
                 }])
               }, [
                 d("div", Ue, [
-                  (a(!0), l(w, null, V(e.value.tabs, (r) => (a(), l(w, null, [
-                    e.value.viewType == r.id && r.visible ? (a(), l("div", {
+                  (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",
-                      class: _(["svc-creator-tab", {
+                      class: m(["svc-creator-tab", {
                         "svc-creator__toolbox--right": e.value.toolboxLocation == "right"
                       }]),
-                      key: r.id,
-                      "aria-labelledby": "tab-" + r.id,
-                      id: "scrollableDiv-" + r.id
+                      key: l.id,
+                      "aria-labelledby": "tab-" + l.id,
+                      id: "scrollableDiv-" + l.id
                     }, [
                       v(s(u), {
-                        is: r.componentContent,
-                        model: r.data.model
+                        is: l.componentContent,
+                        model: l.data.model
                       }, null, 8, ["is", "model"])
-                    ], 10, He)) : p("", !0)
+                    ], 10, Qe)) : p("", !0)
                   ], 64))), 256))
                 ])
               ], 2),
-              e.value.isMobileView ? (a(), l("div", Oe, [
+              e.value.isMobileView ? (a(), i("div", He, [
                 d("div", {
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
@@ -100,7 +100,7 @@ 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, Qe)
+                ], 8, Oe)
               ])) : p("", !0)
             ]),
             e.value.sidebar ? (a(), h(s(u), {
@@ -109,7 +109,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               model: e.value.sidebar
             }, null, 8, ["model"])) : p("", !0)
           ], 2),
-          e.value.haveCommercialLicense ? p("", !0) : (a(), l("div", Ge, [
+          e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", Ge, [
             d("span", {
               class: "svc-creator__non-commercial-text",
               innerHTML: e.value.licenseText
@@ -136,16 +136,16 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       e = new he(o.value, t.model);
     }), K(() => {
       e.dispose(), e = void 0;
-    }), (n, i) => (a(), l("div", {
+    }), (n, r) => (a(), i("div", {
       class: "svc-tabbed-menu",
       ref_key: "container",
       ref: o,
       role: "tablist"
     }, [
-      (a(!0), l(w, null, V(n.model.renderedActions, (r) => (a(), h(s(u), {
-        key: r.renderedId,
+      (a(!0), i(w, null, V(n.model.renderedActions, (l) => (a(), h(s(u), {
+        key: l.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
-        item: r
+        item: l
       }, null, 8, ["item"]))), 128))
     ], 512));
   }
@@ -158,14 +158,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     const t = I(), e = c;
     return T(() => e.item), P(() => {
       const o = e.item;
-      o.updateModeCallback = (n, i) => {
-        o.mode = n, re(() => i(n, t.value));
+      o.updateModeCallback = (n, r) => {
+        o.mode = n, re(() => r(n, t.value));
       }, o.afterRender();
     }), K(() => {
       const o = e.item;
       o.updateModeCallback = void 0;
-    }), (o, n) => (a(), l("span", {
-      class: _(["svc-tabbed-menu-item-container", [o.item.isVisible ? "" : "sv-action--hidden", o.item.css]]),
+    }), (o, n) => (a(), i("span", {
+      class: m(["svc-tabbed-menu-item-container", [o.item.isVisible ? "" : "sv-action--hidden", o.item.css]]),
       ref_key: "root",
       ref: t
     }, [
@@ -184,25 +184,25 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.item), (e, o) => C((a(), l("div", {
+    return T(() => t.item), (e, o) => q((a(), i("div", {
       role: "tab",
       id: "tab-" + e.item.id,
       "aria-selected": e.item.active,
       "aria-controls": "scrollableDiv-" + e.item.id,
-      class: _(["svc-tabbed-menu-item", e.item.getRootCss()]),
+      class: m(["svc-tabbed-menu-item", e.item.getRootCss()]),
       onClick: o[0] || (o[0] = //@ts-ignore
       (...n) => e.item.action && e.item.action(...n))
     }, [
-      e.item.hasTitle ? (a(), l("span", {
+      e.item.hasTitle ? (a(), i("span", {
         key: 0,
-        class: _(e.item.getTitleCss())
-      }, $(e.item.title), 3)) : p("", !0),
+        class: m(e.item.getTitleCss())
+      }, k(e.item.title), 3)) : p("", !0),
       e.item.hasIcon ? (a(), h(s(u), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
         size: "auto",
-        class: _(e.item.getIconCss()),
+        class: m(e.item.getIconCss()),
         title: e.item.tooltip || e.item.title
       }, null, 8, ["iconName", "class", "title"])) : p("", !0)
     ], 10, Ye)), [
@@ -220,17 +220,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) => C((a(), l("div", {
-      class: _(["svc-side-bar", o.model.rootCss])
+    }), (o, n) => q((a(), i("div", {
+      class: m(["svc-side-bar", o.model.rootCss])
     }, [
-      C(d("div", {
+      q(d("div", {
         class: "svc-side-bar__shadow",
         onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
       }, null, 512), [
-        [U, o.model.renderContainer]
+        [Q, o.model.renderContainer]
       ]),
       d("div", eo, [
-        C(d("div", oo, [
+        q(d("div", oo, [
           d("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
@@ -241,15 +241,15 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
             d("div", so, [
-              (a(!0), l(w, null, V(o.model.pages, (i, r) => (a(), h(s(u), {
-                key: r,
+              (a(!0), i(w, null, V(o.model.pages, (r, l) => (a(), h(s(u), {
+                key: l,
                 is: "svc-side-bar-page",
-                model: i
+                model: r
               }, null, 8, ["model"]))), 128))
             ])
           ], 512)
         ], 512), [
-          [U, o.model.renderContainer]
+          [Q, o.model.renderContainer]
         ]),
         o.model.sideAreaComponentName ? (a(), h(s(u), {
           key: 0,
@@ -258,7 +258,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         }, null, 8, ["is", "model"])) : p("", !0)
       ])
     ], 2)), [
-      [U, o.model.renderRoot]
+      [Q, o.model.renderRoot]
     ]);
   }
 }), no = { class: "svc-side-bar__container-header" }, ao = { class: "svc-side-bar__container-actions" }, lo = {
@@ -271,14 +271,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", no, [
+    return T(() => t.model), (e, o) => (a(), i("div", no, [
       d("div", ao, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (a(), l("div", lo, $(e.model.title), 1)) : p("", !0)
+      e.model.title ? (a(), i("div", lo, k(e.model.title), 1)) : p("", !0)
     ]));
   }
 }), ro = /* @__PURE__ */ g({
@@ -314,14 +314,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", {
-      class: _(e.model.rootCss)
+    return T(() => t.model), (e, o) => (a(), i("div", {
+      class: m(e.model.rootCss)
     }, [
       v(s(u), {
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
-      e.model.survey ? (a(), h(s(Q), {
+      e.model.survey ? (a(), h(s(O), {
         key: 0,
         survey: e.model.survey
       }, null, 8, ["survey"])) : p("", !0)
@@ -334,8 +334,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(!0), l(w, null, V(e.model.actions, (n, i) => (a(), h(s(u), {
-      key: i,
+    return T(() => t.model), (e, o) => (a(!0), i(w, null, V(e.model.actions, (n, r) => (a(), h(s(u), {
+      key: r,
       is: "svc-tab-button",
       model: n
     }, null, 8, ["model"]))), 128));
@@ -349,8 +349,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", {
-      class: _(e.model.sideBarClassName)
+    return T(() => t.model), (e, o) => (a(), i("div", {
+      class: m(e.model.sideBarClassName)
     }, [
       d("div", vo, [
         d("div", mo, [
@@ -382,24 +382,24 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), qo = {
+}), Co = {
   key: 0,
   class: "svc-menu-action"
-}, Co = ["title"], ko = { class: "svc-menu-action__icon" }, $o = { class: "svc-menu-action__icon-container" }, fo = /* @__PURE__ */ g({
+}, qo = ["title"], $o = { class: "svc-menu-action__icon" }, ko = { class: "svc-menu-action__icon-container" }, fo = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => e.model.visible ? (a(), l("div", qo, [
-      C((a(), l("div", {
-        class: _(e.model.buttonClassName),
+    return T(() => t.model), (e, o) => e.model.visible ? (a(), i("div", Co, [
+      q((a(), i("div", {
+        class: m(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        d("div", ko, [
-          d("div", $o, [
+        d("div", $o, [
+          d("div", ko, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
@@ -407,7 +407,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, Co)), [
+      ], 10, qo)), [
         [s(N), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ])) : p("", !0);
@@ -419,10 +419,10 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   __name: "PropertyGridPlaceholder",
   setup(c) {
     const t = ue;
-    return (e, o) => (a(), l("div", wo, [
+    return (e, o) => (a(), i("div", wo, [
       d("div", To, [
-        d("span", Do, $(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        d("span", No, $(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+        d("span", Do, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        d("span", No, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
       Mo
     ]));
@@ -440,31 +440,31 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", Bo, [
-      e.model.subTitle ? p("", !0) : (a(), l("div", Io, $(e.model.title), 1)),
-      e.model.subTitle ? (a(), l("div", Eo, [
-        d("span", Po, $(e.model.title), 1),
-        d("span", Ro, $(e.model.subTitle), 1)
+    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)
       ])) : 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" }, Ho = /* @__PURE__ */ g({
+}), 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({
   __name: "SideBarPropertyGridHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", Ao, [
+    return T(() => t.model), (e, o) => (a(), i("div", Ao, [
       d("div", zo, [
         d("div", Lo, [
-          C((a(), l("div", {
-            class: _(e.model.buttonClassName),
+          q((a(), i("div", {
+            class: m(e.model.buttonClassName),
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
             d("div", Fo, [
-              d("span", Ko, $(e.model.title), 1),
-              d("span", Uo, $(e.model.tooltip), 1)
+              d("span", Ko, k(e.model.title), 1),
+              d("span", Uo, k(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(N), { processEsc: !1 }]
@@ -477,7 +477,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ]));
   }
-}), Oo = /* @__PURE__ */ g({
+}), Ho = /* @__PURE__ */ g({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -486,15 +486,15 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     element: {}
   },
   setup(c) {
-    return (t, e) => (a(), l("div", { key: t.errorKey }, [
+    return (t, e) => (a(), i("div", { key: t.errorKey }, [
       v(s(u), {
         is: "sv-svg-icon",
-        class: _(t.cssClasses.error.icon),
+        class: m(t.cssClasses.error.icon),
         iconName: "icon-alert_24x24",
         size: "auto"
       }, null, 8, ["class"]),
       d("span", {
-        class: _(
+        class: m(
           t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
@@ -505,7 +505,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 2)
     ]));
   }
-}), Qo = ["title"], Go = ["title"], Wo = ["title"], jo = ["title"], Jo = /* @__PURE__ */ g({
+}), Oo = ["title"], Go = ["title"], Wo = ["title"], jo = ["title"], Jo = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     classes: {},
@@ -520,29 +520,29 @@ 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 qe().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, i) => (a(), l(w, null, [
-      n.iconName ? p("", !0) : (a(), l(w, { key: 0 }, [
-        n.disabled ? (a(), l("span", {
+    }, o = () => new Ce().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
+    return (n, r) => (a(), i(w, null, [
+      n.iconName ? p("", !0) : (a(), i(w, { key: 0 }, [
+        n.disabled ? (a(), i("span", {
           key: 0,
-          class: _(["svc-action-button svc-action-button--disabled", n.classes]),
+          class: m(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
-        }, $(n.text), 11, Qo)) : p("", !0),
-        C((a(), l("span", {
+        }, k(n.text), 11, Oo)) : p("", !0),
+        q((a(), i("span", {
           role: "button",
-          class: _(["svc-action-button", o()]),
+          class: m(["svc-action-button", o()]),
           onClick: e,
           title: n.title
         }, [
-          be($(n.text), 1)
+          be(k(n.text), 1)
         ], 10, Go)), [
           [s(N)]
         ])
       ], 64)),
-      n.iconName ? (a(), l(w, { key: 1 }, [
-        n.disabled ? (a(), l("span", {
+      n.iconName ? (a(), i(w, { key: 1 }, [
+        n.disabled ? (a(), i("span", {
           key: 0,
-          class: _(o()),
+          class: m(o()),
           title: n.title
         }, [
           v(s(u), {
@@ -551,10 +551,10 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             size: "auto"
           }, null, 8, ["iconName"])
         ], 10, Wo)) : p("", !0),
-        C((a(), l("span", {
+        q((a(), i("span", {
           role: "button",
           onClick: e,
-          class: _(o()),
+          class: m(o()),
           title: n.title
         }, [
           v(s(u), {
@@ -583,8 +583,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.item), (e, o) => C((a(), l("button", {
-      class: _(e.item.getActionBarItemCss()),
+    return T(() => t.item), (e, o) => q((a(), i("button", {
+      class: m(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.item.action(e.item, !!n.pointerType);
@@ -599,9 +599,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       role: e.item.ariaRole
     }, [
       d("div", {
-        class: _(e.item.getSwitcherIconCss())
+        class: m(e.item.getSwitcherIconCss())
       }, Yo, 2),
-      e.item.hasTitle ? (a(), l("span", xo, $(e.item.title), 1)) : p("", !0)
+      e.item.hasTitle ? (a(), i("span", xo, k(e.item.title), 1)) : p("", !0)
     ], 42, Zo)), [
       [s(N), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
@@ -617,24 +617,24 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(c) {
     const t = c;
     T(() => t.model);
-    const e = k(() => t.model.simulatorFrame), o = () => {
+    const e = $(() => t.model.simulatorFrame), o = () => {
       t.model.device !== "desktop" && t.model.activateZoom();
     }, n = () => {
       t.model.device !== "desktop" && t.model.deactivateZoom();
     };
-    return (i, r) => (a(), l("div", {
-      class: _(i.model.getRootCss()),
-      onKeydown: r[0] || (r[0] = (m) => i.model.tryToZoom(void 0, m)),
-      onMouseover: r[1] || (r[1] = (m) => o()),
-      onMouseout: r[2] || (r[2] = (m) => n())
+    return (r, l) => (a(), i("div", {
+      class: m(r.model.getRootCss()),
+      onKeydown: l[0] || (l[0] = (_) => r.model.tryToZoom(void 0, _)),
+      onMouseover: l[1] || (l[1] = (_) => o()),
+      onMouseout: l[2] || (l[2] = (_) => n())
     }, [
-      i.model.hasFrame ? p("", !0) : (a(), l("div", ss, [
+      r.model.hasFrame ? p("", !0) : (a(), i("div", ss, [
         v(s(u), {
           is: "survey-widget",
-          model: i.model.survey
+          model: r.model.survey
         }, null, 8, ["model"])
       ])),
-      i.model.hasFrame ? (a(), l("div", {
+      r.model.hasFrame ? (a(), i("div", {
         key: 1,
         class: "svd-simulator-wrapper",
         id: "svd-simulator-wrapper",
@@ -654,7 +654,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           d("div", ts, [
             v(s(u), {
               is: "survey-widget",
-              model: i.model.survey
+              model: r.model.survey
             }, null, 8, ["model"])
           ])
         ], 4)
@@ -670,13 +670,13 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return (e, o) => (a(), l("div", as, [
+    return (e, o) => (a(), i("div", as, [
       d("div", {
-        class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
+        class: m(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
       }, null, 2),
       d("div", ls, [
-        d("div", is, $(t.placeholderTitleText), 1),
-        d("div", rs, $(t.placeholderDescriptionText), 1)
+        d("div", is, k(t.placeholderTitleText), 1),
+        d("div", rs, k(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
@@ -690,8 +690,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", {
-      class: _(["svc-creator-tab__content svc-test-tab__content", {
+    return T(() => t.model), (e, o) => (a(), i("div", {
+      class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
@@ -701,7 +701,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (a(), l("div", {
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", {
         key: 1,
         class: "svc-plugin-tab__content",
         onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
@@ -716,7 +716,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
-      e.model.isPageToolbarVisible ? (a(), l("div", ds, [
+      e.model.isPageToolbarVisible ? (a(), i("div", ds, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -731,13 +731,13 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.model.testAgainAction);
-    return T(() => e.value), (o, n) => C((a(), l("div", {
+    const t = c, e = $(() => t.model.testAgainAction);
+    return T(() => e.value), (o, n) => q((a(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
-      onClick: n[0] || (n[0] = (i) => e.value.action())
+      onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      d("span", us, $(e.value.title), 1)
+      d("span", us, k(e.value.title), 1)
     ])), [
       [s(N)]
     ]);
@@ -745,7 +745,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
 });
 function z(c, t, e) {
   const o = ye(), n = G(
-    t.map((i) => () => i()),
+    t.map((r) => () => r()),
     () => {
       o.value = c();
     },
@@ -760,20 +760,20 @@ function z(c, t, e) {
 const vs = {
   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" }, qs = { class: "svd-light-background-color" }, Cs = { class: "svd-dark-border-color" }, ks = { class: "svd-dark-border-color" }, $s = /* @__PURE__ */ g({
+}, 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({
   __name: "SurveyResults",
   props: {
     survey: {}
   },
   setup(c) {
     const t = c, e = z(
-      () => t.survey ? new $e(t.survey) : void 0,
+      () => t.survey ? new ke(t.survey) : void 0,
       [() => t.survey]
     );
-    return (o, n) => s(e) ? (a(), l("div", vs, [
+    return (o, n) => s(e) ? (a(), i("div", vs, [
       d("div", ms, [
         d("div", _s, [
-          d("div", gs, $(s(e).surveyResultsText), 1),
+          d("div", gs, k(s(e).surveyResultsText), 1),
           d("div", bs, [
             v(s(u), {
               is: "svc-action-button",
@@ -791,29 +791,29 @@ const vs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        C(d("div", ys, [
-          d("div", null, $(s(e).resultText), 1)
+        q(d("div", ys, [
+          d("div", null, k(s(e).resultText), 1)
         ], 512), [
-          [U, s(e).resultViewType === "text"]
+          [Q, s(e).resultViewType === "text"]
         ]),
-        C(d("div", hs, [
+        q(d("div", hs, [
           d("table", null, [
             d("thead", null, [
-              d("tr", qs, [
-                d("th", Cs, $(s(e).resultsTitle), 1),
-                d("th", ks, $(s(e).resultsDisplayValue), 1)
+              d("tr", Cs, [
+                d("th", qs, k(s(e).resultsTitle), 1),
+                d("th", $s, k(s(e).resultsDisplayValue), 1)
               ])
             ]),
             d("tbody", null, [
-              (a(!0), l(w, null, V(s(e).resultData, (i, r) => (a(), h(s(u), {
+              (a(!0), i(w, null, V(s(e).resultData, (r, l) => (a(), h(s(u), {
                 is: "survey-results-table-row",
-                model: i,
-                key: r
+                model: r,
+                key: l
               }, null, 8, ["model"]))), 128))
             ])
           ])
         ], 512), [
-          [U, s(e).resultViewType === "table"]
+          [Q, s(e).resultViewType === "table"]
         ])
       ])
     ])) : p("", !0);
@@ -825,8 +825,8 @@ const vs = {
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l(w, null, [
-      C((a(), l("tr", {
+    return T(() => t.model), (e, o) => (a(), i(w, null, [
+      q((a(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
       }, [
@@ -834,9 +834,9 @@ const vs = {
           class: "svd-dark-border-color",
           style: F({ paddingLeft: e.model.textMargin })
         }, [
-          e.model.isNode ? (a(), l("span", {
+          e.model.isNode ? (a(), i("span", {
             key: 0,
-            class: _(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
+            class: m(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
             style: F({ left: e.model.markerMargin })
           }, [
             v(s(u), {
@@ -849,21 +849,21 @@ const vs = {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (a(), l("span", fs, $(e.model.title), 1))
+          }, null, 8, ["locString"])) : (a(), i("span", fs, k(e.model.title), 1))
         ], 4),
         d("td", {
-          class: _({
+          class: m({
             "svd-test-results__node-value": e.model.isNode,
             "svd-dark-border-color": !e.model.isNode
           })
-        }, $(e.model.getString(e.model.displayValue)), 3)
+        }, k(e.model.getString(e.model.displayValue)), 3)
       ])), [
         [s(N)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (a(!0), l(w, { key: 0 }, V(e.model.data, (n, i) => (a(), h(s(u), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), i(w, { key: 0 }, V(e.model.data, (n, r) => (a(), h(s(u), {
         is: "survey-results-table-row",
         model: n,
-        key: i + 1
+        key: r + 1
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
@@ -874,20 +874,20 @@ const vs = {
   },
   setup(c) {
     const t = c, e = I();
-    return T(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), l("div", Ts, [
+    return T(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", Ts, [
       d("div", Ds, [
         d("div", {
           class: "svc-json-editor-tab__ace-editor",
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        C(d("div", Ns, [
+        q(d("div", Ns, [
           v(s(u), {
             is: "sv-list",
             model: o.model.errorList
           }, null, 8, ["model"])
         ], 512), [
-          [U, o.model.hasErrors]
+          [Q, o.model.hasErrors]
         ])
       ])
     ]));
@@ -902,27 +902,27 @@ const vs = {
     return o.canShowErrors = !1, T(() => t.model), P(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, i) => (a(), l("div", Ss, [
+    }), (n, r) => (a(), i("div", Ss, [
       d("div", Bs, [
-        C(d("textarea", {
+        q(d("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
           disabled: s(o).readOnly,
-          "onUpdate:modelValue": i[0] || (i[0] = (r) => s(o).text = r),
-          onKeydown: i[1] || (i[1] = (r) => s(o).checkKey(s(o), r)),
+          "onUpdate:modelValue": r[0] || (r[0] = (l) => s(o).text = l),
+          onKeydown: r[1] || (r[1] = (l) => s(o).checkKey(s(o), l)),
           ref_key: "inputEl",
           ref: e
         }, `
       `, 40, Is), [
           [de, s(o).text]
         ]),
-        C(d("div", Es, [
+        q(d("div", Es, [
           v(s(u), {
             is: "sv-list",
             model: s(o).errorList
           }, null, 8, ["model"])
         ], 512), [
-          [U, s(o).hasErrors]
+          [Q, s(o).hasErrors]
         ])
       ])
     ]));
@@ -938,12 +938,12 @@ const vs = {
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
-    return (o, n) => (a(), l(w, null, [
+    return (o, n) => (a(), i(w, null, [
       v(s(u), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
-        class: _("svc-json-error__icon")
+        class: m("svc-json-error__icon")
       }, null, 8, ["iconName", "size"]),
       d("div", Rs, [
         d("div", Vs, [
@@ -952,7 +952,7 @@ const vs = {
             locString: o.item.locTitle
           }, null, 8, ["locString"])
         ]),
-        o.item.data.showFixButton ? C((a(), l("button", {
+        o.item.data.showFixButton ? q((a(), i("button", {
           key: 0,
           type: "button",
           onClick: e,
@@ -982,14 +982,14 @@ const vs = {
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
-    return (o, n) => C((a(), l("div", {
+    return (o, n) => q((a(), i("div", {
       role: "button",
-      class: _(["svc-logic-tab__content-action svc-btn", {
+      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, $(o.model.title), 1)
+      d("span", Ls, k(o.model.title), 1)
     ], 2)), [
       [s(N)]
     ]);
@@ -1004,12 +1004,12 @@ const vs = {
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", Fs, [
+    return T(() => t.model), (e, o) => (a(), i("div", Fs, [
       d("div", {
-        class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
+        class: m(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
-        e.model.hasItems ? (a(), l(w, { key: 0 }, [
-          v(s(Q), {
+        e.model.hasItems ? (a(), i(w, { key: 0 }, [
+          v(s(O), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
           e.model.readOnly ? p("", !0) : (a(), h(te, {
@@ -1017,7 +1017,7 @@ const vs = {
             model: e.model.addNewButton
           }, null, 8, ["model"]))
         ], 64)) : p("", !0),
-        e.model.hasItems ? p("", !0) : (a(), l("div", Ks, [
+        e.model.hasItems ? p("", !0) : (a(), i("div", Ks, [
           v(W, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
@@ -1031,94 +1031,77 @@ const vs = {
       ], 2)
     ]));
   }
-}), Hs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage", "aria-expanded"], Os = ["id"];
+}), 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(
   "dropdown",
   "logicoperator",
   "sv-logic-operator"
 );
-const Qs = /* @__PURE__ */ g({
+const Os = /* @__PURE__ */ g({
   __name: "LogicOperator",
   props: {
     question: {}
   },
   setup(c) {
-    const t = c, e = I(), o = k(() => t.question.dropdownListModel ?? new Ce(t.question));
-    O(t, e, (m) => {
-      fe(m);
+    const t = c, e = I(), o = $(() => t.question.dropdownListModel ?? new qe(t.question));
+    H(t, e, (l) => {
+      fe(l);
     });
-    const n = (m) => {
-      var b;
-      (b = o.value) == null || b.onClick(m);
-    }, i = (m) => {
-      var b;
-      (b = o.value) == null || b.onClear(m);
-    }, r = (m) => {
-      var b;
-      (b = o.value) == null || b.keyHandler(m);
+    const n = (l) => {
+      var _;
+      (_ = o.value) == null || _.onClick(l);
+    }, r = (l) => {
+      var _;
+      (_ = o.value) == null || _.keyHandler(l);
     };
-    return (m, b) => (a(), l("div", {
-      class: _(m.question.cssClasses.selectWrapper)
+    return (l, _) => (a(), i("div", {
+      class: m(l.question.cssClasses.selectWrapper)
     }, [
-      m.question.isReadOnly ? p("", !0) : (a(), l(w, { key: 0 }, [
+      l.question.isReadOnly ? p("", !0) : (a(), i(w, { key: 0 }, [
         d("div", {
-          class: _(m.question.getControlClass()),
+          class: m(l.question.getControlClass()),
           onClick: n,
           onKeyup: r,
-          id: m.question.inputId,
-          required: m.question.isRequired,
-          tabindex: m.question.isInputReadOnly ? void 0 : 0,
-          disabled: m.question.isInputReadOnly,
-          role: m.question.ariaRole,
-          "aria-required": m.question.ariaRequired,
-          "aria-label": m.question.ariaLabel,
-          "aria-labelledby": m.question.ariaLabelledBy,
-          "aria-invalid": m.question.ariaInvalid,
-          "aria-errormessage": m.question.ariaErrormessage,
-          "aria-expanded": m.question.ariaExpanded
+          id: l.question.inputId,
+          required: l.question.isRequired,
+          tabindex: l.question.isInputReadOnly ? void 0 : 0,
+          disabled: l.question.isInputReadOnly,
+          role: o.value.ariaQuestionRole,
+          "aria-required": o.value.ariaQuestionRequired,
+          "aria-invalid": o.value.ariaQuestionInvalid,
+          "aria-errormessage": o.value.ariaQuestionErrorMessage,
+          "aria-expanded": o.value.ariaQuestionExpanded,
+          "aria-label": o.value.ariaQuestionLabel,
+          "aria-labelledby": o.value.ariaQuestionLabelledby,
+          "aria-controls": o.value.ariaQuestionControls
         }, [
           d("div", {
-            class: _(m.question.cssClasses.controlValue)
+            class: m(l.question.cssClasses.controlValue)
           }, [
-            m.question.locReadOnlyText ? (a(), h(s(u), {
+            l.question.locReadOnlyText ? (a(), h(s(u), {
               key: 0,
               is: "survey-string",
-              locString: m.question.locReadOnlyText
+              locString: l.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
-          ], 2),
-          m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? C((a(), l("div", {
-            key: 0,
-            class: _(m.question.cssClasses.cleanButton),
-            onClick: i
-          }, [
-            v(s(u), {
-              is: "sv-svg-icon",
-              class: _(m.question.cssClasses.cleanButtonSvg),
-              iconName: m.question.cssClasses.cleanButtonIconId,
-              size: "auto",
-              title: m.question.clearCaption
-            }, null, 8, ["class", "iconName", "title"])
-          ], 2)), [
-            [U, !m.question.isEmpty()]
-          ]) : p("", !0)
-        ], 42, Hs),
+          ], 2)
+        ], 42, Qs),
         v(s(u), {
           is: "sv-popup",
-          model: m.question.popupModel
+          model: l.question.popupModel
         }, null, 8, ["model"])
       ], 64)),
-      m.question.isReadOnly ? (a(), l("div", {
+      l.question.isReadOnly ? (a(), i("div", {
         key: 1,
         disabled: "",
-        class: _(m.question.getControlClass()),
-        id: m.question.inputId
+        class: m(l.question.getControlClass()),
+        id: l.question.inputId
       }, [
-        m.question.locReadOnlyText ? (a(), h(s(u), {
+        l.question.locReadOnlyText ? (a(), h(s(u), {
           key: 0,
           is: "survey-string",
-          locString: m.question.locReadOnlyText
+          locString: l.question.locReadOnlyText
         }, null, 8, ["locString"])) : p("", !0)
-      ], 10, Os)) : p("", !0)
+      ], 10, Hs)) : p("", !0)
     ], 2));
   }
 }), Gs = /* @__PURE__ */ g({
@@ -1128,9 +1111,9 @@ const Qs = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = I();
-    O(t, e);
-    const o = k(() => t.question.embeddedSurvey);
-    return (n, i) => n.question && o.value && o.value.currentPage ? (a(), h(s(u), {
+    H(t, e);
+    const o = $(() => t.question.embeddedSurvey);
+    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), h(s(u), {
       key: 0,
       is: "survey-page",
       page: o.value.currentPage,
@@ -1145,7 +1128,7 @@ const Qs = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = I(), o = ue.getString("pe.clear");
-    return O(t, e), (n, i) => (a(), l(w, null, [
+    return H(t, e), (n, r) => (a(), i(w, null, [
       v(s(u), {
         is: "svc-action-button",
         text: n.question.linkValueText,
@@ -1176,8 +1159,8 @@ const Qs = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", {
-      class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
+    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, {
         key: 0,
@@ -1185,15 +1168,15 @@ const Qs = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.isEmpty ? p("", !0) : (a(), l("div", js, [
+      e.model.isEmpty ? p("", !0) : (a(), i("div", js, [
         d("div", Js, [
           d("div", Zs, [
-            v(s(Q), {
+            v(s(O), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
           d("div", Xs, [
-            v(s(Q), {
+            v(s(O), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
           ])
@@ -1208,7 +1191,7 @@ const Qs = /* @__PURE__ */ g({
   return e;
 }, et = {}, ot = { class: "sd-translation-line-skeleton" };
 function st(c, t) {
-  return a(), l("div", ot);
+  return a(), i("div", ot);
 }
 const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
@@ -1216,12 +1199,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     item: {}
   },
   setup(c) {
-    return (t, e) => (a(), l("div", {
-      class: _(t.item.data.containerCss)
+    return (t, e) => (a(), i("div", {
+      class: m(t.item.data.containerCss)
     }, [
       d("span", {
-        class: _(t.item.data.additionalTitleCss)
-      }, $(t.item.data.additionalTitle), 3),
+        class: m(t.item.data.additionalTitleCss)
+      }, k(t.item.data.additionalTitle), 3),
       v(s(u), {
         is: "sv-action-bar-item-dropdown",
         item: t.item
@@ -1241,8 +1224,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return T(() => t.model), (e, o) => (a(), l("div", {
-      class: _(["svc-creator-tab__content svc-test-tab__content", {
+    return T(() => t.model), (e, o) => (a(), i("div", {
+      class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
@@ -1252,7 +1235,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (a(), l("div", at, [
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", at, [
         v(s(u), {
           is: "survey-simulator",
           model: e.model.simulator
@@ -1263,7 +1246,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (a(), l("div", lt, [
+      e.model.isPageToolbarVisible ? (a(), i("div", lt, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -1277,13 +1260,13 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     question: {}
   },
   setup(c) {
-    return O(c, I()), (e, o) => (a(), l("div", {
-      class: _(e.question.cssClasses.root),
+    return H(c, I()), (e, o) => (a(), i("div", {
+      class: m(e.question.cssClasses.root),
       onKeydown: o[5] || (o[5] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
     }, [
       d("label", {
-        class: _(e.question.getSwatchCss()),
+        class: m(e.question.getSwatchCss()),
         style: F(e.question.getSwatchStyle())
       }, [
         v(s(u), {
@@ -1294,7 +1277,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         d("input", {
           type: "color",
           disabled: e.question.isInputReadOnly,
-          class: _(e.question.cssClasses.colorInput),
+          class: m(e.question.cssClasses.colorInput),
           value: e.question.renderedColorValue,
           tabindex: "-1",
           onChange: o[0] || (o[0] = //@ts-ignore
@@ -1325,12 +1308,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         onBeforeinput: o[4] || (o[4] = //@ts-ignore
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
-        class: _(e.question.cssClasses.control)
+        class: m(e.question.cssClasses.control)
       }, null, 42, dt),
-      e.question.showDropdownAction ? (a(), l(w, { key: 0 }, [
+      e.question.showDropdownAction ? (a(), i(w, { key: 0 }, [
         d("div", {
           "aria-hidden": "true",
-          class: _(e.question.cssClasses.choicesButtonWrapper)
+          class: m(e.question.cssClasses.choicesButtonWrapper)
         }, [
           v(s(u), {
             is: "sv-action-bar-item",
@@ -1354,7 +1337,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     const t = c;
     T(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
-    return (o, n) => (a(), l(w, null, [
+    return (o, n) => (a(), i(w, null, [
       d("span", {
         class: "spg-color-editor__color-swatch",
         style: F(e())
@@ -1372,36 +1355,36 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = I();
-    return O(c, t), (o, n) => (a(), l("div", {
-      class: _(o.question.cssClasses.root),
+    return H(c, t), (o, n) => (a(), i("div", {
+      class: m(o.question.cssClasses.root),
       onDragenter: n[5] || (n[5] = //@ts-ignore
-      (...i) => o.question.onDragEnter && o.question.onDragEnter(...i)),
+      (...r) => o.question.onDragEnter && o.question.onDragEnter(...r)),
       onDragover: n[6] || (n[6] = //@ts-ignore
-      (...i) => o.question.onDragOver && o.question.onDragOver(...i)),
+      (...r) => o.question.onDragOver && o.question.onDragOver(...r)),
       onDrop: n[7] || (n[7] = //@ts-ignore
-      (...i) => o.question.onDrop && o.question.onDrop(...i)),
+      (...r) => o.question.onDrop && o.question.onDrop(...r)),
       onDragleave: n[8] || (n[8] = //@ts-ignore
-      (...i) => o.question.onDragLeave && o.question.onDragLeave(...i)),
+      (...r) => o.question.onDragLeave && o.question.onDragLeave(...r)),
       onKeydown: n[9] || (n[9] = //@ts-ignore
-      (...i) => o.question.onKeyDown && o.question.onKeyDown(...i)),
+      (...r) => o.question.onKeyDown && o.question.onKeyDown(...r)),
       ref_key: "root",
       ref: t
     }, [
       d("input", {
         type: "text",
         disabled: o.question.isTextInputReadOnly,
-        class: _(o.question.cssClasses.control),
+        class: m(o.question.cssClasses.control),
         value: o.question.renderedValue || "",
         onChange: n[0] || (n[0] = //@ts-ignore
-        (...i) => o.question.onInputChange && o.question.onInputChange(...i)),
+        (...r) => o.question.onInputChange && o.question.onInputChange(...r)),
         onBlur: n[1] || (n[1] = //@ts-ignore
-        (...i) => o.question.onInputBlur && o.question.onInputBlur(...i)),
+        (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
       }, null, 42, pt),
       d("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
-        class: _(o.question.cssClasses.fileInput),
+        class: m(o.question.cssClasses.fileInput),
         id: o.question.inputId,
         "aria-required": o.question.ariaRequired,
         "aria-label": o.question.ariaLabel,
@@ -1412,17 +1395,17 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         tabindex: -1,
         accept: o.question.acceptedTypes,
         onChange: n[2] || (n[2] = //@ts-ignore
-        (...i) => o.question.onFileInputChange && o.question.onFileInputChange(...i))
+        (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
       }, null, 42, vt),
       d("div", {
-        class: _(o.question.cssClasses.buttonsContainer)
+        class: m(o.question.cssClasses.buttonsContainer)
       }, [
-        C((a(), l("button", {
+        q((a(), i("button", {
           title: o.question.clearButtonCaption,
-          class: _(o.question.cssClasses.clearButton),
+          class: m(o.question.cssClasses.clearButton),
           disabled: o.question.getIsClearButtonDisabled(),
           onClick: n[3] || (n[3] = //@ts-ignore
-          (...i) => o.question.doClean && o.question.doClean(...i))
+          (...r) => o.question.doClean && o.question.doClean(...r))
         }, [
           v(s(u), {
             is: "sv-svg-icon",
@@ -1432,12 +1415,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         ], 10, mt)), [
           [s(N)]
         ]),
-        C((a(), l("label", {
-          class: _(o.question.getChooseButtonCss()),
+        q((a(), i("label", {
+          class: m(o.question.getChooseButtonCss()),
           for: o.question.inputId,
           "aria-label": o.question.chooseButtonCaption,
           onClick: n[4] || (n[4] = //@ts-ignore
-          (...i) => o.question.chooseFiles && o.question.chooseFiles(...i))
+          (...r) => o.question.chooseFiles && o.question.chooseFiles(...r))
         }, [
           v(s(u), {
             is: "sv-svg-icon",
@@ -1451,14 +1434,14 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ], 2)
     ], 34));
   }
-}), bt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], yt = ["disabled"], ht = ["disabled"], qt = /* @__PURE__ */ g({
+}), bt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], yt = ["disabled"], ht = ["disabled"], Ct = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
   },
   setup(c) {
-    return O(c, I()), (e, o) => (a(), l("div", {
-      class: _(e.question.cssClasses.root),
+    return H(c, I()), (e, o) => (a(), i("div", {
+      class: m(e.question.cssClasses.root),
       onKeydown: o[18] || (o[18] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
     }, [
@@ -1487,15 +1470,15 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         onBeforeinput: o[5] || (o[5] = //@ts-ignore
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
-        class: _(e.question.cssClasses.control)
+        class: m(e.question.cssClasses.control)
       }, null, 42, bt),
       d("span", {
-        class: _(e.question.cssClasses.buttonsContainer)
+        class: m(e.question.cssClasses.buttonsContainer)
       }, [
         d("button", {
           "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
-          class: _(e.question.cssClasses.arrowButton),
+          class: m(e.question.cssClasses.arrowButton),
           onClick: o[6] || (o[6] = //@ts-ignore
           (...n) => e.question.onDownButtonClick && e.question.onDownButtonClick(...n)),
           onMousedown: o[7] || (o[7] = //@ts-ignore
@@ -1519,7 +1502,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         d("button", {
           "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
-          class: _(e.question.cssClasses.arrowButton),
+          class: m(e.question.cssClasses.arrowButton),
           onClick: o[12] || (o[12] = //@ts-ignore
           (...n) => e.question.onUpButtonClick && e.question.onUpButtonClick(...n)),
           onMousedown: o[13] || (o[13] = //@ts-ignore
@@ -1543,25 +1526,25 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ], 2)
     ], 34));
   }
-}), Ct = ["disabled", "title"], ne = /* @__PURE__ */ g({
+}), qt = ["disabled", "title"], ne = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
   },
   setup(c) {
     const t = c, e = () => "survey-" + t.question.wrappedQuestionTemplate;
-    return O(t, I()), (o, n) => (a(), l("div", {
-      class: _(o.question.getRootClass())
+    return H(t, I()), (o, n) => (a(), i("div", {
+      class: m(o.question.getRootClass())
     }, [
       v(s(u), {
         is: e(),
         question: o.question
       }, null, 8, ["is", "question"]),
       d("button", {
-        class: _(o.question.cssClasses.resetButton),
+        class: m(o.question.cssClasses.resetButton),
         disabled: o.question.resetValueAdorner.isDisabled,
         onClick: n[0] || (n[0] = //@ts-ignore
-        (...i) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...i)),
+        (...r) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...r)),
         title: o.question.resetValueAdorner.caption
       }, [
         v(s(u), {
@@ -1569,15 +1552,15 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Ct)
+      ], 10, qt)
     ], 2));
   }
-}), kt = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], $t = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
+}), $t = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], kt = /* @__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" }, [
   /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
 ], -1), wt = [
-  $t,
+  kt,
   ft
 ], Tt = { class: "spg-boolean-switch__caption" }, Dt = ["id"];
 ce.Instance.registerRenderer(
@@ -1593,17 +1576,17 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = I(null);
-    O(t, e);
-    const o = k({
+    H(t, e);
+    const o = $({
       get() {
         return t.question.value;
       },
       set(n) {
-        const i = t.question;
-        i.value = n;
+        const r = t.question;
+        r.value = n;
       }
     });
-    return (n, i) => (a(), l("div", {
+    return (n, r) => (a(), i("div", {
       class: "spg-boolean-switch",
       role: "checkbox",
       "aria-checked": n.question.booleanValue || !1,
@@ -1612,10 +1595,10 @@ const Nt = /* @__PURE__ */ g({
       "aria-labelledby": n.question.a11y_input_ariaLabelledBy,
       "aria-invalid": n.question.a11y_input_ariaInvalid,
       "aria-errormessage": n.question.a11y_input_ariaErrormessage,
-      onClick: i[0] || (i[0] = (r) => o.value = !o.value)
+      onClick: r[0] || (r[0] = (l) => o.value = !o.value)
     }, [
-      C((a(), l("div", {
-        class: _(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
+      q((a(), i("div", {
+        class: m(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
       }, wt, 2)), [
         [s(N), { disableTabStop: !0 }]
@@ -1631,7 +1614,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["locString"])
         ], 8, Dt)
       ])
-    ], 8, kt));
+    ], 8, $t));
   }
 }), 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 = {
   key: 0,
@@ -1642,163 +1625,163 @@ const Nt = /* @__PURE__ */ g({
     locString: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = I(), i = I(), r = z(
+    const t = c, e = $(() => t.locString.locStr), o = $(() => t.locString.creator), n = I(), r = I(), l = z(
       () => {
-        const q = new we(
+        const C = new we(
           e.value,
           o.value
         );
-        return q.setLocString(e.value), q.blurEditor = () => {
+        return C.setLocString(e.value), C.blurEditor = () => {
           n.value && (n.value.blur(), n.value.spellcheck = !1);
-        }, q.getEditorElement = () => n.value, setTimeout(() => q.afterRender()), q;
+        }, C.getEditorElement = () => n.value, setTimeout(() => C.afterRender()), C;
       },
       [() => o.value, () => e.value],
-      (q) => {
-        q && (q.blurEditor = void 0, q.getEditorElement = void 0, q.dispose());
+      (C) => {
+        C && (C.blurEditor = void 0, C.getEditorElement = void 0, C.dispose());
       }
-    ), m = k(() => {
-      var q;
-      return (q = r.value) == null ? void 0 : q.errorText;
-    }), b = k(() => {
-      var q;
-      return (q = r.value) == null ? void 0 : q.className(e.value.renderedHtml);
-    }), y = k(() => {
-      var q;
-      return (q = r.value) == null ? void 0 : q.placeholder;
-    }), f = k(() => {
-      var q;
-      return (q = r.value) == null ? void 0 : q.contentEditable;
-    }), E = k(() => {
-      var q;
-      return (q = r.value) == null ? void 0 : q.characterCounter;
-    }), R = k(
+    ), _ = $(() => {
+      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);
+    }), b = $(() => {
+      var C;
+      return (C = l.value) == null ? void 0 : C.placeholder;
+    }), f = $(() => {
+      var C;
+      return (C = l.value) == null ? void 0 : C.contentEditable;
+    }), E = $(() => {
+      var C;
+      return (C = l.value) == null ? void 0 : C.characterCounter;
+    }), R = $(
       () => {
-        var q;
-        return (q = r.value) == null ? void 0 : q.showCharacterCounter;
+        var C;
+        return (C = l.value) == null ? void 0 : C.showCharacterCounter;
       }
-    ), L = k(
+    ), L = $(
       () => {
-        var q;
-        return (q = r.value) == null ? void 0 : q.getCharacterCounterClass;
+        var C;
+        return (C = l.value) == null ? void 0 : C.getCharacterCounterClass;
       }
-    ), j = (q) => {
+    ), j = (C) => {
       var D, B;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (D = r.value) == null || D.onBlur(q), (B = r.value) == null ? void 0 : B.errorText;
-    }, H = (q) => {
+      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) => {
       var D;
-      (D = r.value) == null || D.onFocus(q);
-    }, ve = (q) => {
+      (D = l.value) == null || D.onFocus(C);
+    }, ve = (C) => {
       var D;
-      (D = r.value) == null || D.onPaste(q);
-    }, se = (q) => {
+      (D = l.value) == null || D.onPaste(C);
+    }, se = (C) => {
       var D, B;
-      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (B = r.value) == null || B.onClick(q);
+      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (B = l.value) == null || B.onClick(C);
     }, J = () => {
-      i.value = e.value.renderedHtml;
+      r.value = e.value.renderedHtml;
     }, me = G(
       () => e.value,
-      (q, D) => {
-        D && q.onStringChanged.remove(J), q && (q.onStringChanged.add(J), J());
+      (C, D) => {
+        D && C.onStringChanged.remove(J), C && (C.onStringChanged.add(J), J());
       },
       {
         immediate: !0
       }
     );
     return P(() => {
-      var q;
-      e.value.__isEditing && ((q = n.value) == null || q.focus());
+      var C;
+      e.value.__isEditing && ((C = n.value) == null || C.focus());
     }), K(() => {
       me(), e.value.onStringChanged.remove(J);
-    }), (q, D) => (a(), l("span", {
-      class: _(b.value)
+    }), (C, D) => (a(), i("span", {
+      class: m(y.value)
     }, [
       d("span", Mt, [
         St,
         Bt,
         d("span", It, [
-          e.value.hasHtml ? p("", !0) : (a(), l("span", {
+          e.value.hasHtml ? p("", !0) : (a(), i("span", {
             key: 0,
             role: "textbox",
             class: "sv-string-editor",
             spellcheck: "false",
-            onFocus: H,
+            onFocus: U,
             onPaste: ve,
             onBlur: j,
             onInput: D[0] || (D[0] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onInput) && ((S = s(r)) == null ? void 0 : S.onInput(...B));
+              return ((M = s(l)) == null ? void 0 : M.onInput) && ((S = s(l)) == null ? void 0 : S.onInput(...B));
             }),
             onKeydown: D[1] || (D[1] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onKeyDown) && ((S = s(r)) == null ? void 0 : S.onKeyDown(...B));
+              return ((M = s(l)) == null ? void 0 : M.onKeyDown) && ((S = s(l)) == null ? void 0 : S.onKeyDown(...B));
             }),
             onKeyup: D[2] || (D[2] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onKeyUp) && ((S = s(r)) == null ? void 0 : S.onKeyUp(...B));
+              return ((M = s(l)) == null ? void 0 : M.onKeyUp) && ((S = s(l)) == null ? void 0 : S.onKeyUp(...B));
             }),
             onCompositionstart: D[3] || (D[3] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onCompositionStart) && ((S = s(r)) == null ? void 0 : S.onCompositionStart(...B));
+              return ((M = s(l)) == null ? void 0 : M.onCompositionStart) && ((S = s(l)) == null ? void 0 : S.onCompositionStart(...B));
             }),
             onCompositionend: D[4] || (D[4] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onCompositionEnd) && ((S = s(r)) == null ? void 0 : S.onCompositionEnd(...B));
+              return ((M = s(l)) == null ? void 0 : M.onCompositionEnd) && ((S = s(l)) == null ? void 0 : S.onCompositionEnd(...B));
             }),
             onMouseup: D[5] || (D[5] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onMouseUp) && ((S = s(r)) == null ? void 0 : S.onMouseUp(...B));
+              return ((M = s(l)) == null ? void 0 : M.onMouseUp) && ((S = s(l)) == null ? void 0 : S.onMouseUp(...B));
             }),
             onClick: se,
-            textContent: i.value,
-            "aria-placeholder": y.value,
-            "aria-label": y.value || "content editable",
+            textContent: r.value,
+            "aria-placeholder": b.value,
+            "aria-label": b.value || "content editable",
             contenteditable: f.value,
             ref_key: "root",
             ref: n
           }, null, 40, Et)),
-          e.value.hasHtml ? (a(), l("span", {
+          e.value.hasHtml ? (a(), i("span", {
             key: 1,
             role: "textbox",
             class: "sv-string-editor sv-string-editor--html",
             spellcheck: "false",
-            onFocus: H,
+            onFocus: U,
             onBlur: j,
             onKeydown: D[6] || (D[6] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onKeyDown) && ((S = s(r)) == null ? void 0 : S.onKeyDown(...B));
+              return ((M = s(l)) == null ? void 0 : M.onKeyDown) && ((S = s(l)) == null ? void 0 : S.onKeyDown(...B));
             }),
             onKeyup: D[7] || (D[7] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onKeyUp) && ((S = s(r)) == null ? void 0 : S.onKeyUp(...B));
+              return ((M = s(l)) == null ? void 0 : M.onKeyUp) && ((S = s(l)) == null ? void 0 : S.onKeyUp(...B));
             }),
             onCompositionstart: D[8] || (D[8] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onCompositionStart) && ((S = s(r)) == null ? void 0 : S.onCompositionStart(...B));
+              return ((M = s(l)) == null ? void 0 : M.onCompositionStart) && ((S = s(l)) == null ? void 0 : S.onCompositionStart(...B));
             }),
             onCompositionend: D[9] || (D[9] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onCompositionEnd) && ((S = s(r)) == null ? void 0 : S.onCompositionEnd(...B));
+              return ((M = s(l)) == null ? void 0 : M.onCompositionEnd) && ((S = s(l)) == null ? void 0 : S.onCompositionEnd(...B));
             }),
             onMouseup: D[10] || (D[10] = //@ts-ignore
             (...B) => {
               var M, S;
-              return ((M = s(r)) == null ? void 0 : M.onMouseUp) && ((S = s(r)) == null ? void 0 : S.onMouseUp(...B));
+              return ((M = s(l)) == null ? void 0 : M.onMouseUp) && ((S = s(l)) == null ? void 0 : S.onMouseUp(...B));
             }),
             onClick: se,
-            "aria-placeholder": y.value,
-            "aria-label": y.value || "content editable",
+            "aria-placeholder": b.value,
+            "aria-label": b.value || "content editable",
             contenteditable: f.value,
-            innerHTML: i.value,
+            innerHTML: r.value,
             ref_key: "root",
             ref: n
           }, null, 40, Pt)) : p("", !0),
@@ -1810,7 +1793,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      m.value ? (a(), l("span", Rt, $(m.value), 1)) : p("", !0)
+      _.value ? (a(), i("span", Rt, k(_.value), 1)) : p("", !0)
     ], 2));
   }
 }), At = {
@@ -1828,31 +1811,31 @@ const Nt = /* @__PURE__ */ g({
     model: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.model.toolbox), o = I();
+    const t = c, e = $(() => t.model.toolbox), o = I();
     T(() => e.value);
     let n;
     P(() => {
-      e.value.setRootElement(o.value), n = new ke(
+      e.value.setRootElement(o.value), n = new $e(
         e.value.containerElement,
         e.value
       );
     }), K(() => {
       n == null || n.dispose(), e.value.setRootElement(void 0);
     });
-    const i = k(() => e.value.renderedActions);
-    return (r, m) => (a(), l("div", {
-      class: _(e.value.classNames),
+    const r = $(() => e.value.renderedActions);
+    return (l, _) => (a(), i("div", {
+      class: m(e.value.classNames),
       ref_key: "root",
       ref: o
     }, [
       d("div", {
-        onFocusout: m[0] || (m[0] = (b) => e.value.focusOut(b)),
+        onFocusout: _[0] || (_[0] = (y) => e.value.focusOut(y)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (a(), l("div", At, [
+        e.value.showSearch ? (a(), i("div", At, [
           e.value.isCompactRendered ? (a(), h(s(u), {
             is: "svc-toolbox-tool",
-            creator: r.model,
+            creator: l.model,
             key: "searchitem",
             item: e.value.searchItem,
             parentModel: e.value,
@@ -1864,21 +1847,21 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["model"]),
           zt
         ])) : p("", !0),
-        e.value.showPlaceholder ? (a(), l("div", Lt, $(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        e.value.showPlaceholder ? (a(), i("div", Lt, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(s(u), { is: "sv-scroll" }, {
           default: Z(() => [
-            e.value.showInSingleCategory ? p("", !0) : (a(!0), l(w, { key: 0 }, V(e.value.categories, (b, y) => (a(), h(s(u), {
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(w, { key: 0 }, V(e.value.categories, (y, b) => (a(), h(s(u), {
               is: "svc-toolbox-category",
-              key: y,
-              category: b,
+              key: b,
+              category: y,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (a(), l("div", Ft, [
-              (a(!0), l(w, null, V(i.value, (b) => (a(), h(s(u), {
-                key: b.renderedId,
+            e.value.showInSingleCategory ? (a(), i("div", Ft, [
+              (a(!0), i(w, null, V(r.value, (y) => (a(), h(s(u), {
+                key: y.renderedId,
                 is: "svc-toolbox-tool",
-                creator: r.model,
-                item: b,
+                creator: l.model,
+                item: y,
                 parentModel: e.value,
                 isCompact: e.value.isCompactRendered
               }, null, 8, ["creator", "item", "parentModel", "isCompact"]))), 128))
@@ -1892,7 +1875,7 @@ const Nt = /* @__PURE__ */ g({
 }), Ut = {
   key: 0,
   class: "svc-toolbox__category-separator"
-}, Ht = /* @__PURE__ */ g({
+}, Qt = /* @__PURE__ */ g({
   __name: "ToolboxTool",
   props: {
     creator: {},
@@ -1914,31 +1897,31 @@ const Nt = /* @__PURE__ */ g({
     ), o = I();
     return P(() => {
       const n = t.item;
-      n.updateModeCallback = (i, r) => {
-        n.mode = i, re(() => r(i, o.value));
+      n.updateModeCallback = (r, l) => {
+        n.mode = r, re(() => l(r, o.value));
       }, n.afterRender();
     }), K(() => {
       const n = t.item;
       n.updateModeCallback = void 0;
-    }), T(() => t.item), (n, i) => {
-      var r;
-      return a(), l("div", {
-        class: _(n.item.css),
+    }), T(() => t.item), (n, r) => {
+      var l;
+      return a(), i("div", {
+        class: m(n.item.css),
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), l("div", Ut)) : p("", !0),
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Ut)) : p("", !0),
         d("div", {
           class: "svc-toolbox__tool-content sv-action__content",
-          onPointerdown: i[0] || (i[0] = //@ts-ignore
-          (...m) => {
-            var b, y;
-            return ((b = s(e)) == null ? void 0 : b.onPointerDown) && ((y = s(e)) == null ? void 0 : y.onPointerDown(...m));
+          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(..._));
           })
         }, [
           v(s(u), {
             viewModel: s(e),
-            is: (r = s(e)) == null ? void 0 : r.itemComponent,
+            is: (l = s(e)) == null ? void 0 : l.itemComponent,
             item: n.item,
             creator: n.creator,
             isCompact: n.isCompact
@@ -1947,7 +1930,7 @@ const Nt = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Ot = ["aria-label", "title"], Qt = { class: "svc-toolbox__item-container" }, Gt = {
+}), Ht = ["aria-label", "title"], Ot = { class: "svc-toolbox__item-container" }, Gt = {
   key: 0,
   class: "svc-toolbox__item-title"
 }, Wt = /* @__PURE__ */ g({
@@ -1959,15 +1942,15 @@ const Nt = /* @__PURE__ */ g({
     viewModel: {}
   },
   setup(c) {
-    return (t, e) => (a(), l(w, null, [
-      C((a(), l("div", {
-        class: _(["svc-toolbox__item", t.item.renderedCss]),
+    return (t, e) => (a(), i(w, null, [
+      q((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", Qt, [
+        d("span", Ot, [
           t.item.iconName ? (a(), h(s(u), {
             key: 0,
             is: "sv-svg-icon",
@@ -1976,11 +1959,11 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (a(), l("span", Gt, $(t.item.title), 1))
-      ], 10, Ot)), [
+        t.isCompact ? p("", !0) : (a(), i("span", Gt, k(t.item.title), 1))
+      ], 10, Ht)), [
         [s(N)]
       ]),
-      t.isCompact ? (a(), l("span", {
+      t.isCompact ? (a(), i("span", {
         key: 0,
         class: "svc-toolbox__item-banner",
         onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
@@ -1991,7 +1974,7 @@ const Nt = /* @__PURE__ */ g({
           size: 24,
           class: "svc-toolbox__item-icon"
         }, null, 8, ["iconName"]),
-        d("span", null, $(t.item.title), 1)
+        d("span", null, k(t.item.title), 1)
       ])) : p("", !0)
     ], 64));
   }
@@ -2009,7 +1992,7 @@ const Nt = /* @__PURE__ */ g({
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
-    return (n, i) => (a(), l(w, null, [
+    return (n, r) => (a(), i(w, null, [
       v(s(u), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
@@ -2045,25 +2028,25 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return T(() => t.category), (e, o) => (a(), l("div", {
-      class: _(["svc-toolbox__category", {
+    return T(() => t.category), (e, o) => (a(), i("div", {
+      class: m(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
       d("div", Jt, [
-        C((a(), l("div", {
-          class: _(["svc-toolbox__category-header", {
+        q((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, $(e.category.title), 1),
-          e.toolbox.canCollapseCategories ? (a(), l("div", Xt, [
+          d("span", Zt, k(e.category.title), 1),
+          e.toolbox.canCollapseCategories ? (a(), i("div", Xt, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: e.category.iconName,
-              class: _(e.category.iconClassName),
+              class: m(e.category.iconClassName),
               size: "auto"
             }, null, 8, ["iconName", "class"])
           ])) : p("", !0)
@@ -2071,7 +2054,7 @@ const Nt = /* @__PURE__ */ g({
           [s(N)]
         ])
       ]),
-      (a(!0), l(w, null, V(e.category.items, (n) => (a(), h(s(u), {
+      (a(!0), i(w, null, V(e.category.items, (n) => (a(), h(s(u), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2089,14 +2072,14 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c, e = _e(() => t.model.renderedActions);
-    return T(() => t.model), (o, n) => (a(), l("div", {
-      class: _(o.model.cssClasses.root)
+    return T(() => t.model), (o, n) => (a(), i("div", {
+      class: m(o.model.cssClasses.root)
     }, [
-      (a(!0), l(w, null, V(s(e), (i, r) => (a(), h(s(u), {
-        key: r,
+      (a(!0), i(w, null, V(s(e), (r, l) => (a(), h(s(u), {
+        key: l,
         is: "svc-toolbox-tool",
         creator: o.creator,
-        item: i,
+        item: r,
         parentModel: o.model,
         isCompact: !1
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
@@ -2129,8 +2112,8 @@ const Nt = /* @__PURE__ */ g({
     model: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.model.survey);
-    return T(() => t.model), T(() => e.value), (o, n) => (a(), l(w, null, [
+    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), {
           key: 0,
@@ -2139,15 +2122,15 @@ const Nt = /* @__PURE__ */ g({
         }, null, 8, ["model"])) : p("", !0)
       ]),
       d("div", {
-        class: _(["svc-tab-designer", o.model.getRootCss()]),
+        class: m(["svc-tab-designer", o.model.getRootCss()]),
         onClick: n[0] || (n[0] = //@ts-ignore
-        (...i) => o.model.clickDesigner && o.model.clickDesigner(...i))
+        (...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
       }, [
         v(s(u), { is: "sv-scroll" }, {
           default: Z(() => [
             d("div", on, [
-              o.model.showPlaceholder ? (a(), l(w, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), l("div", sn, [
+              o.model.showPlaceholder ? (a(), i(w, { key: 0 }, [
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), i("div", sn, [
                   v(s(u), {
                     is: "survey-header",
                     survey: o.model.creator.survey
@@ -2170,35 +2153,35 @@ const Nt = /* @__PURE__ */ g({
                   ])
                 ])
               ], 64)) : p("", !0),
-              o.model.showPlaceholder ? p("", !0) : (a(), l(w, { key: 1 }, [
+              o.model.showPlaceholder ? p("", !0) : (a(), i(w, { key: 1 }, [
                 d("div", {
-                  class: _(o.model.designerCss),
+                  class: m(o.model.designerCss),
                   style: F([
                     { maxWidth: o.model.survey.renderedWidth },
                     o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.allowEditSurveyTitle ? (a(), l("div", an, [
+                  o.model.creator.allowEditSurveyTitle ? (a(), i("div", an, [
                     v(s(u), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
                   ])) : p("", !0),
-                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), l(w, { key: 1 }, V(o.model.pages, (i) => (a(), l("div", {
-                    key: i.id,
+                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(w, { key: 1 }, V(o.model.pages, (r) => (a(), i("div", {
+                    key: r.id,
                     class: "svc-page",
-                    "data-sv-drop-target-survey-element": i != o.model.newPage ? i.name : "newGhostPage",
-                    "data-sv-drop-target-page": i.name
+                    "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
+                    "data-sv-drop-target-page": r.name
                   }, [
                     v(s(u), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
-                      page: i,
-                      isGhost: i == o.model.newPage
+                      page: r,
+                      isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
                   ], 8, ln))), 128)) : p("", !0),
-                  o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), l("div", {
+                  o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), i("div", {
                     key: 2,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
@@ -2212,15 +2195,15 @@ const Nt = /* @__PURE__ */ g({
                     }, null, 8, ["page", "creator", "isGhost"])
                   ], 8, rn)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (a(), l("div", dn, [
-                  o.model.creator.showPageNavigator ? (a(), l("div", cn, [
+                o.model.showSurfaceTools ? (a(), i("div", dn, [
+                  o.model.creator.showPageNavigator ? (a(), i("div", cn, [
                     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(), l("div", un, [
+                  o.model.showSurfaceToolbar ? (a(), i("div", un, [
                     v(s(u), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
@@ -2236,12 +2219,15 @@ const Nt = /* @__PURE__ */ g({
     ], 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 = {
-  key: 0,
-  class: "svc-page__placeholder_frame"
-}, bn = { class: "svc-panel__placeholder_frame" }, yn = { class: "svc-panel__placeholder" }, hn = { class: "svc-page__content-actions" }, qn = {
+  key: 1,
+  class: "svc-page__loading-content"
+}, bn = {
   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 = {
+  key: 4,
   class: "svc-page__content-actions"
-}, Cn = /* @__PURE__ */ g({
+}, $n = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2252,12 +2238,12 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = I(), o = z(
       () => {
-        const i = new De(t.creator, t.page);
-        return i.isGhost = t.isGhost, i;
+        const r = new De(t.creator, t.page);
+        return r.isGhost = t.isGhost, r;
       },
       [() => t.page],
-      (i) => {
-        i.dispose();
+      (r) => {
+        r.dispose();
       }
     );
     G(
@@ -2268,41 +2254,45 @@ const Nt = /* @__PURE__ */ g({
     ), Y(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
-      e.value && o.value && (o.value.rootElement = e.value);
+      e.value && o.value && o.value.setRootElement(e.value);
     });
-    const n = (i) => {
-      o.value.hover(i, i.currentTarget);
+    const n = (r) => {
+      o.value.hover(r, r.currentTarget);
     };
-    return (i, r) => s(o).page ? C((a(), l("div", {
+    return (r, l) => s(o).page ? q((a(), i("div", {
       key: s(o).page.id,
       id: s(o).page.id,
-      class: _(["svc-page__content", s(o).css]),
+      class: m(["svc-page__content", s(o).css]),
       "data-sv-drop-target-survey-page": s(o).dropTargetName,
-      onClick: r[1] || (r[1] = (m) => {
-        s(o).select(s(o), m), m.stopPropagation();
+      onClick: l[1] || (l[1] = (_) => {
+        s(o).select(s(o), _), _.stopPropagation();
       }),
       ref_key: "root",
       ref: e,
-      onDblclick: r[2] || (r[2] = (m) => s(o).dblclick(m)),
+      onDblclick: l[2] || (l[2] = (_) => s(o).dblclick(_)),
       onMouseover: n,
       onMouseleave: n
     }, [
       mn,
       _n,
-      v(s(u), {
+      s(o).needRenderContent ? (a(), h(s(u), {
+        key: 0,
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
-      }, null, 8, ["survey", "page"]),
-      s(o).showPlaceholder ? (a(), l("div", gn, [
-        d("div", bn, [
-          d("div", yn, $(s(o).placeholderText), 1)
+      }, null, 8, ["survey", "page"])) : p("", !0),
+      s(o).needRenderContent ? p("", !0) : (a(), i("div", gn, [
+        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)
         ])
       ])) : p("", !0),
-      s(o).allowDragging && !s(o).isGhost ? (a(), l("div", {
-        key: 1,
+      s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
+        key: 3,
         class: "svc-question__drag-area",
-        onPointerdown: r[0] || (r[0] = (m) => s(o).onPointerDown(m))
+        onPointerdown: l[0] || (l[0] = (_) => s(o).onPointerDown(_))
       }, [
         v(s(u), A({
           is: "sv-svg-icon",
@@ -2312,7 +2302,7 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        d("div", hn, [
+        d("div", Cn, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer
@@ -2324,7 +2314,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["model"])) : p("", !0)
         ])
       ], 32)) : p("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (a(), l("div", qn, [
+      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", qn, [
         v(s(u), {
           is: "sv-action-bar",
           model: s(o).actionContainer
@@ -2343,7 +2333,7 @@ const Nt = /* @__PURE__ */ g({
       [s(N)]
     ]) : p("", !0);
   }
-}), kn = { class: "svc-add-new-item-button__text" }, $n = /* @__PURE__ */ g({
+}), kn = { class: "svc-add-new-item-button__text" }, fn = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2353,18 +2343,18 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c;
     T(() => t.item.data);
-    const e = k(
+    const e = $(
       () => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
-    ), o = k(
+    ), o = $(
       () => t.renderPopup === void 0 || t.renderPopup !== !1
     );
-    return (n, i) => (a(), l(w, null, [
-      C((a(), l("div", {
-        class: _(e.value),
-        onClick: i[0] || (i[0] = (r) => {
-          n.item.data.addNewQuestion(n.item, r), r.stopPropagation();
+    return (n, r) => (a(), i(w, null, [
+      q((a(), i("div", {
+        class: m(e.value),
+        onClick: r[0] || (r[0] = (l) => {
+          n.item.data.addNewQuestion(n.item, l), l.stopPropagation();
         }),
-        onMouseover: i[1] || (i[1] = (r) => n.item.data.hoverStopper && n.item.data.hoverStopper(r, r.currentTarget))
+        onMouseover: r[1] || (r[1] = (l) => n.item.data.hoverStopper && n.item.data.hoverStopper(l, l.currentTarget))
       }, [
         v(s(u), {
           is: "sv-svg-icon",
@@ -2372,7 +2362,7 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        d("span", kn, $(n.item.data.addNewQuestionText), 1),
+        d("span", kn, k(n.item.data.addNewQuestionText), 1),
         o.value ? (a(), h(s(u), {
           key: 0,
           is: "svc-add-question-type-selector",
@@ -2390,7 +2380,7 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), fn = ["title", "aria-label"], wn = /* @__PURE__ */ g({
+}), wn = ["title", "aria-label"], Tn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2398,7 +2388,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(c) {
     const t = c;
-    return T(() => t.questionTypeSelectorModel), (e, o) => C((a(), l("button", {
+    return T(() => t.questionTypeSelectorModel), (e, o) => q((a(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2420,39 +2410,39 @@ const Nt = /* @__PURE__ */ g({
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
-    ], 8, fn)), [
+    ], 8, wn)), [
       [s(N)]
     ]);
   }
-}), Tn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Nn = /* @__PURE__ */ g({
+}), 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({
   __name: "Row",
   props: {
     componentData: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = z(
+    const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = z(
       () => new Ne(e.value, o.value, void 0),
       [() => e.value, () => o.value],
-      (i) => {
-        i.dispose();
+      (r) => {
+        r.dispose();
       }
     );
     return P(() => {
       n.value && n.value.subscribeElementChanges();
     }), K(() => {
       n.value && n.value.unsubscribeElementChanges();
-    }), (i, r) => (a(), l("div", {
-      class: _(s(n).cssClasses)
+    }), (r, l) => (a(), i("div", {
+      class: m(s(n).cssClasses)
     }, [
-      Tn,
       Dn,
-      x(i.$slots, "default")
+      Nn,
+      x(r.$slots, "default")
     ], 2));
   }
-}), Mn = ["data-sv-drop-target-survey-element"], Sn = { class: "svc-fake-title" }, Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Rn = { class: "svc-question__top-actions" }, Vn = {
+}), 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 = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, An = { class: "svc-panel__placeholder_frame" }, zn = {
+}, zn = { class: "svc-panel__placeholder_frame" }, Ln = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2471,10 +2461,10 @@ const Nt = /* @__PURE__ */ g({
     const t = c, e = I(), o = z(
       () => t.createModel(),
       [() => t.componentName, () => t.componentData],
-      (r) => {
-        r.dispose();
+      (l) => {
+        l.dispose();
       }
-    ), n = k(
+    ), n = $(
       () => o.value.isBannerShowing ? o.value.createBannerParams() : null
     );
     Y(() => {
@@ -2482,49 +2472,49 @@ const Nt = /* @__PURE__ */ g({
     }), P(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     });
-    const i = (r) => {
-      o.value.select(o.value, r), r.stopPropagation();
+    const r = (l) => {
+      o.value.select(o.value, l), l.stopPropagation();
     };
-    return (r, m) => s(o) ? (a(), l("div", {
+    return (l, _) => s(o) ? (a(), i("div", {
       key: 0,
-      class: _(["svc-question__adorner", s(o).rootCss()]),
+      class: m(["svc-question__adorner", s(o).rootCss()]),
       ref_key: "root",
       ref: e,
-      onDblclick: m[2] || (m[2] = (b) => s(o).dblclick(b)),
-      onMouseover: m[3] || (m[3] = (b) => s(o).hover(b, b.currentTarget)),
-      onMouseleave: m[4] || (m[4] = (b) => s(o).hover(b, b.currentTarget)),
+      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)),
       "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); } }"
     }, [
-      s(o).showHiddenTitle ? (a(), l("div", {
+      s(o).showHiddenTitle ? (a(), i("div", {
         key: 0,
-        class: _(s(o).cssCollapsedHiddenHeader)
+        class: m(s(o).cssCollapsedHiddenHeader)
       }, [
-        r.element.hasTitle ? (a(), h(s(u), {
+        l.element.hasTitle ? (a(), h(s(u), {
           key: 0,
           is: "survey-element-title",
-          element: r.element
-        }, null, 8, ["element"])) : (a(), l("div", {
+          element: l.element
+        }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
-          class: _(s(o).cssCollapsedHiddenTitle)
+          class: m(s(o).cssCollapsedHiddenTitle)
         }, [
-          d("span", Sn, $(r.element.name), 1)
+          d("span", Bn, k(l.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      C((a(), l("div", {
-        onClick: m[1] || (m[1] = (b) => {
-          s(o).select(s(o), b), b.stopPropagation();
+      q((a(), i("div", {
+        onClick: _[1] || (_[1] = (y) => {
+          s(o).select(s(o), y), y.stopPropagation();
         }),
-        class: _(s(o).css())
+        class: m(s(o).css())
       }, [
-        Bn,
         In,
         En,
         Pn,
-        s(o).allowDragging ? (a(), l("div", {
+        Rn,
+        s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
-          onPointerdown: m[0] || (m[0] = (b) => s(o).onPointerDown(b))
+          onPointerdown: _[0] || (_[0] = (y) => s(o).onPointerDown(y))
         }, [
           v(s(u), A({
             is: "sv-svg-icon",
@@ -2534,7 +2524,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          d("div", Rn, [
+          d("div", Vn, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
@@ -2542,29 +2532,29 @@ const Nt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(o).needToRenderContent ? (a(), l(w, { key: 1 }, [
+        s(o).needToRenderContent ? (a(), i(w, { key: 1 }, [
           v(s(u), {
             is: "sv-template-renderer",
-            componentName: r.componentName,
-            componentData: r.componentData
+            componentName: l.componentName,
+            componentData: l.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !r.showPlaceholderComponent ? (a(), l("div", Vn, [
-            d("div", An, [
-              d("div", zn, $(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", An, [
+            d("div", zn, [
+              d("div", Ln, k(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && r.showPlaceholderComponent ? (a(), h(s(u), A(
+          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), h(s(u), A(
             {
               key: 1,
-              is: r.placeholderComponent
+              is: l.placeholderComponent
             },
-            r.getPlaceholderComponentData && r.getPlaceholderComponentData(s(o))
+            l.getPlaceholderComponentData && l.getPlaceholderComponentData(s(o))
           ), null, 16, ["is"])) : p("", !0),
-          r.adornerComponent ? (a(), h(s(u), {
+          l.adornerComponent ? (a(), h(s(u), {
             key: 2,
-            is: r.adornerComponent,
+            is: l.adornerComponent,
             model: s(o),
-            element: r.element
+            element: l.element
           }, null, 8, ["is", "model", "element"])) : p("", !0),
           s(o).isBannerShowing ? (a(), h(s(u), {
             key: 3,
@@ -2573,7 +2563,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["model"])) : p("", !0),
           d("div", {
             class: "svc-question__content-actions",
-            onFocusin: i
+            onFocusin: r
           }, [
             v(s(u), {
               is: "sv-action-bar",
@@ -2585,7 +2575,7 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, Mn)) : p("", !0);
+    ], 42, Sn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2606,7 +2596,7 @@ const Nt = /* @__PURE__ */ g({
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Ln = /* @__PURE__ */ g({
+}), Fn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
@@ -2620,7 +2610,7 @@ const Nt = /* @__PURE__ */ g({
     ), o = (n) => ({
       question: n == null ? void 0 : n.filePresentationModel
     });
-    return (n, i) => (a(), h(oe, {
+    return (n, r) => (a(), h(oe, {
       "create-model": e,
       element: t.componentData.element,
       "show-placeholder-component": !0,
@@ -2631,34 +2621,34 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), Fn = {
+}), Kn = {
   key: 0,
   class: "svc-image-question-controls"
-}, Kn = ["accept"], Un = {
+}, Un = ["accept"], Qn = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
 }, Hn = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, On = { class: "svc-image-question__loading" }, Qn = /* @__PURE__ */ g({
+}, On = { class: "svc-image-question__loading" }, Gn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
     element: {}
   },
   setup(c) {
-    return (t, e) => (a(), l(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", Fn, [
-        t.model.allowEdit ? (a(), l(w, { key: 0 }, [
+    return (t, e) => (a(), i(w, null, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Kn, [
+        t.model.allowEdit ? (a(), i(w, { key: 0 }, [
           d("input", {
             type: "file",
             "aria-hidden": "true",
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Kn),
-          C((a(), l("span", Un, [
+          }, null, 8, Un),
+          q((a(), i("span", Qn, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
@@ -2670,14 +2660,14 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", Hn, [
+      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Hn, [
         d("div", On, [
           v(s(u), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Gn = { class: "svc-rating-question-content" }, Wn = /* @__PURE__ */ g({
+}), Wn = { class: "svc-rating-question-content" }, jn = ["aria-label"], Jn = ["aria-label"], Zn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2693,39 +2683,47 @@ const Nt = /* @__PURE__ */ g({
       [() => t.componentData.data, () => t.componentData.question]
     );
     return (o, n) => {
-      var i, r, m, b, y, f, E, R, L;
-      return a(), l("div", Gn, [
+      var r, l, _, y, b, f, E, R, L;
+      return a(), i("div", Wn, [
         d("div", {
-          class: _((i = s(e)) == null ? void 0 : i.controlsClassNames)
+          class: m((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
-          (r = s(e)) != null && r.allowRemove ? C((a(), h(s(u), {
+          (l = s(e)) != null && l.allowRemove ? q((a(), i("span", {
             key: 0,
-            is: "sv-svg-icon",
-            iconName: "icon-remove_16x16",
-            size: "auto",
+            class: m((_ = s(e)) == null ? void 0 : _.removeClassNames),
             onClick: n[0] || (n[0] = (j) => {
-              var H;
-              return (H = s(e)) == null ? void 0 : H.removeItem(s(e));
+              var U;
+              return (U = s(e)) == null ? void 0 : U.removeItem(s(e));
             }),
-            class: _((m = s(e)) == null ? void 0 : m.removeClassNames),
-            title: (b = s(e)) == null ? void 0 : b.removeTooltip,
+            role: "button",
             "aria-label": (y = s(e)) == null ? void 0 : y.removeTooltip
-          }, null, 8, ["class", "title", "aria-label"])), [
+          }, [
+            v(s(u), {
+              is: "sv-svg-icon",
+              iconName: "icon-remove_16x16",
+              size: "auto",
+              title: (b = s(e)) == null ? void 0 : b.removeTooltip
+            }, null, 8, ["title"])
+          ], 10, jn)), [
             [s(N)]
           ]) : p("", !0),
-          (f = s(e)) != null && f.allowAdd ? C((a(), h(s(u), {
+          (f = s(e)) != null && f.allowAdd ? q((a(), i("span", {
             key: 1,
-            is: "sv-svg-icon",
-            iconName: "icon-add_16x16",
-            size: "auto",
+            class: m((E = s(e)) == null ? void 0 : E.addClassNames),
             onClick: n[1] || (n[1] = (j) => {
-              var H;
-              return (H = s(e)) == null ? void 0 : H.addItem(s(e));
+              var U;
+              return (U = s(e)) == null ? void 0 : U.addItem(s(e));
             }),
-            class: _((E = s(e)) == null ? void 0 : E.addClassNames),
-            title: (R = s(e)) == null ? void 0 : R.addTooltip,
-            "aria-label": (L = s(e)) == null ? void 0 : L.addTooltip
-          }, null, 8, ["class", "title", "aria-label"])), [
+            role: "button",
+            "aria-label": (R = s(e)) == null ? void 0 : R.addTooltip
+          }, [
+            v(s(u), {
+              is: "sv-svg-icon",
+              iconName: "icon-add_16x16",
+              size: "auto",
+              title: (L = s(e)) == null ? void 0 : L.addTooltip
+            }, null, 8, ["title"])
+          ], 10, Jn)), [
             [s(N)]
           ]) : p("", !0)
         ], 2),
@@ -2733,61 +2731,61 @@ const Nt = /* @__PURE__ */ g({
       ]);
     };
   }
-}), jn = {
+}), Xn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, Jn = /* @__PURE__ */ g({
+}, Yn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = k(() => t.componentData.column), i = k(() => t.componentData.element), r = k(
+    const t = c, e = $(() => t.componentData.creator), o = $(() => t.componentData.row), n = $(() => t.componentData.column), r = $(() => t.componentData.element), l = $(
       () => t.componentData.question
-    ), m = z(
+    ), _ = z(
       () => {
-        var b;
+        var y;
         return t.componentData ? new Be(
           e.value,
-          i.value,
           r.value,
+          l.value,
           o.value,
-          n.value || ((b = i.value.cell) == null ? void 0 : b.column)
+          n.value || ((y = r.value.cell) == null ? void 0 : y.column)
         ) : void 0;
       },
       [
         () => e.value,
         () => o.value,
         () => n.value,
-        () => r.value
+        () => l.value
       ]
     );
-    return (b, y) => {
+    return (y, b) => {
       var f, E;
-      return a(), l("div", {
+      return a(), i("div", {
         tabindex: "-1",
         class: "svc-matrix-cell",
-        onClick: y[1] || (y[1] = (R) => {
+        onClick: b[1] || (b[1] = (R) => {
           var L;
-          return (L = s(m)) == null ? void 0 : L.selectContext(s(m), R);
+          return (L = s(_)) == null ? void 0 : L.selectContext(s(_), R);
         }),
-        onMouseover: y[2] || (y[2] = (R) => {
+        onMouseover: b[2] || (b[2] = (R) => {
           var L;
-          return (L = s(m)) == null ? void 0 : L.hover(R, R.currentTarget);
+          return (L = s(_)) == null ? void 0 : L.hover(R, R.currentTarget);
         }),
-        onMouseleave: y[3] || (y[3] = (R) => {
+        onMouseleave: b[3] || (b[3] = (R) => {
           var L;
-          return (L = s(m)) == null ? void 0 : L.hover(R, R.currentTarget);
+          return (L = s(_)) == null ? void 0 : L.hover(R, R.currentTarget);
         })
       }, [
         d("div", {
-          class: _(["svc-matrix-cell--selected", { "svc-visible": (f = s(m)) == null ? void 0 : f.isSelected }])
+          class: m(["svc-matrix-cell--selected", { "svc-visible": (f = s(_)) == null ? void 0 : f.isSelected }])
         }, null, 2),
-        x(b.$slots, "default"),
-        (E = s(m)) != null && E.isSupportCellEditor ? (a(), l("div", jn, [
-          C((a(), l("span", {
+        x(y.$slots, "default"),
+        (E = s(_)) != null && E.isSupportCellEditor ? (a(), i("div", Xn, [
+          q((a(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
-            onClick: y[0] || (y[0] = (R) => s(m).editQuestion(s(m), R))
+            onClick: b[0] || (b[0] = (R) => s(_).editQuestion(s(_), R))
           }, [
             v(s(u), {
               is: "sv-svg-icon",
@@ -2801,29 +2799,29 @@ const Nt = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), Zn = { class: "svc-question__adorner" }, Xn = { class: "svc-question__content svc-question__content--in-popup" }, Yn = /* @__PURE__ */ g({
+}), xn = { class: "svc-question__adorner" }, ea = { class: "svc-question__content svc-question__content--in-popup" }, oa = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = k(
+    const t = c, e = $(
       () => t.componentData.element
     );
-    return T(() => e.value), (o, n) => (a(), l("div", Zn, [
-      d("div", Xn, [
+    return T(() => e.value), (o, n) => (a(), i("div", xn, [
+      d("div", ea, [
         v(s(u), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
-}), xn = ["data-sv-drop-target-survey-element"], ea = { class: "svc-fake-title" }, oa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), sa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ta = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), aa = { class: "svc-question__top-actions" }, la = {
+}), 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 = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, ia = { class: "svc-panel__placeholder_frame" }, ra = { class: "svc-panel__placeholder" }, da = { class: "svc-add-new-item-button__text" }, ca = {
+}, ca = { class: "svc-panel__placeholder_frame" }, ua = { class: "svc-panel__placeholder" }, pa = { class: "svc-add-new-item-button__text" }, va = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, ua = { class: "svc-panel__question-type-selector-popup" }, pa = { class: "svc-panel__add-new-question-wrapper" }, va = /* @__PURE__ */ g({
+}, ma = { class: "svc-panel__question-type-selector-popup" }, _a = { class: "svc-panel__add-new-question-wrapper" }, ga = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2843,42 +2841,42 @@ const Nt = /* @__PURE__ */ g({
     ), o = (n) => {
       n.stopPropagation(), e.value.addNewQuestion();
     };
-    return (n, i) => s(e) && !s(e).isDisposed ? (a(), l("div", {
+    return (n, r) => s(e) && !s(e).isDisposed ? (a(), i("div", {
       key: 0,
-      class: _(["svc-question__adorner", s(e).rootCss()]),
-      onDblclick: i[3] || (i[3] = (r) => s(e).dblclick(r)),
-      onMouseover: i[4] || (i[4] = (r) => s(e).hover(r, r.currentTarget)),
-      onMouseleave: i[5] || (i[5] = (r) => s(e).hover(r, r.currentTarget)),
+      class: m(["svc-question__adorner", s(e).rootCss()]),
+      onDblclick: r[3] || (r[3] = (l) => s(e).dblclick(l)),
+      onMouseover: r[4] || (r[4] = (l) => s(e).hover(l, l.currentTarget)),
+      onMouseleave: r[5] || (r[5] = (l) => s(e).hover(l, l.currentTarget)),
       "data-sv-drop-target-survey-element": s(e).element.name || null,
       ref: "root"
     }, [
-      s(e).showHiddenTitle ? (a(), l("div", {
+      s(e).showHiddenTitle ? (a(), i("div", {
         key: 0,
-        class: _(s(e).cssCollapsedHiddenHeader)
+        class: m(s(e).cssCollapsedHiddenHeader)
       }, [
         s(e).element.hasTitle ? (a(), h(s(u), {
           key: 0,
           is: "survey-element-title",
           element: s(e).element
-        }, null, 8, ["element"])) : (a(), l("div", {
+        }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
-          class: _(s(e).cssCollapsedHiddenTitle)
+          class: m(s(e).cssCollapsedHiddenTitle)
         }, [
-          d("span", ea, $(s(e).element.name), 1)
+          d("span", ta, k(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      C((a(), l("div", {
-        class: _(s(e).css()),
-        onClick: i[2] || (i[2] = (r) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), r) : null)
+      q((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)
       }, [
-        oa,
-        sa,
-        ta,
         na,
-        s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), l("div", {
+        aa,
+        la,
+        ia,
+        s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
-          onPointerdown: i[0] || (i[0] = (r) => s(e).onPointerDown(r))
+          onPointerdown: r[0] || (r[0] = (l) => s(e).onPointerDown(l))
         }, [
           v(s(u), {
             is: "sv-svg-icon",
@@ -2886,7 +2884,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          d("div", aa, [
+          d("div", ra, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
@@ -2894,12 +2892,12 @@ const Nt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(e).needToRenderContent ? (a(), l(w, { key: 1 }, [
+        s(e).needToRenderContent ? (a(), i(w, { key: 1 }, [
           v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (a(), l("div", la, [
-            d("div", ia, [
-              d("div", ra, $(s(e).placeholderText), 1),
-              s(e).showAddQuestionButton ? C((a(), l("div", {
+          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", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
@@ -2910,20 +2908,20 @@ const Nt = /* @__PURE__ */ g({
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                d("span", da, $(s(e).addNewQuestionText), 1)
+                d("span", pa, k(s(e).addNewQuestionText), 1)
               ])), [
                 [s(N)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), l("div", ca, [
-            d("div", ua, [
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", va, [
+            d("div", ma, [
               v(s(u), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            d("div", pa, [
+            d("div", _a, [
               v(s(u), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
@@ -2932,10 +2930,10 @@ const Nt = /* @__PURE__ */ g({
               }, null, 8, ["item"])
             ])
           ])) : p("", !0),
-          s(e).element.isInteractiveDesignElement ? (a(), l("div", {
+          s(e).element.isInteractiveDesignElement ? (a(), i("div", {
             key: 2,
             class: "svc-question__content-actions",
-            onFocusin: i[1] || (i[1] = (r) => s(e).select(s(e), r))
+            onFocusin: r[1] || (r[1] = (l) => s(e).select(s(e), l))
           }, [
             v(s(u), {
               is: "sv-action-bar",
@@ -2947,179 +2945,181 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, xn)) : p("", !0);
+    ], 42, sa)) : p("", !0);
   }
-}), ma = ["data-sv-drop-target-item-value"], _a = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ga = { class: "svc-item-value-controls" }, ba = {
+}), 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 = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, ya = /* @__PURE__ */ g({
+}, qa = ["aria-label"], $a = ["aria-label"], ka = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = I(), e = c, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), i = k(() => e.componentData.item), r = G(
-      () => i.value,
-      (b, y) => {
-        b && t.value && b.setRootElement(t.value), y && y.setRootElement(void 0);
+    const t = I(), e = c, o = $(() => e.componentData.data.creator), n = $(() => e.componentData.question), r = $(() => e.componentData.item), l = G(
+      () => r.value,
+      (y, b) => {
+        y && t.value && y.setRootElement(t.value), b && b.setRootElement(void 0);
       }
     );
     P(() => {
-      t.value && i.value && i.value.setRootElement(t.value);
+      t.value && r.value && r.value.setRootElement(t.value);
     }), K(() => {
-      i.value.setRootElement(void 0);
+      r.value.setRootElement(void 0);
     });
-    const m = z(
-      () => new Ie(o.value, n.value, i.value),
-      [() => o.value, () => n.value, () => i.value],
-      (b) => {
-        b.dispose();
+    const _ = z(
+      () => new Ie(o.value, n.value, r.value),
+      [() => o.value, () => n.value, () => r.value],
+      (y) => {
+        y.dispose();
       }
     );
     return X(() => {
-      r();
-    }), (b, y) => (a(), l("div", {
-      class: _(["svc-item-value-wrapper", {
-        "svc-item-value--new": s(m).isNew,
-        "svc-item-value--dragging": s(m).isDragging,
-        "svc-item-value--ghost": s(m).isDragDropGhost,
-        "svc-item-value--movedown": s(m).isDragDropMoveDown,
-        "svc-item-value--moveup": s(m).isDragDropMoveUp
+      l();
+    }), (y, b) => (a(), i("div", {
+      class: m(["svc-item-value-wrapper", {
+        "svc-item-value--new": s(_).isNew,
+        "svc-item-value--dragging": s(_).isDragging,
+        "svc-item-value--ghost": s(_).isDragDropGhost,
+        "svc-item-value--movedown": s(_).isDragDropMoveDown,
+        "svc-item-value--moveup": s(_).isDragDropMoveUp
       }]),
-      onPointerdown: y[4] || (y[4] = (f) => s(m).onPointerDown(f)),
-      "data-sv-drop-target-item-value": s(m).isDraggable ? i.value.value : null,
+      onPointerdown: b[4] || (b[4] = (f) => s(_).onPointerDown(f)),
+      "data-sv-drop-target-item-value": s(_).isDraggable ? r.value.value : null,
       ref_key: "root",
       ref: t
     }, [
-      _a,
-      d("div", ga, [
-        s(m).isDraggable ? (a(), l("span", ba, [
+      ya,
+      d("div", ha, [
+        s(_).isDraggable ? (a(), i("span", Ca, [
           v(s(u), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
             iconName: "icon-drag-24x24",
             size: "auto",
-            title: s(m).dragTooltip
+            title: s(_).dragTooltip
           }, null, 8, ["title"])
         ])) : p("", !0),
-        s(m).allowAdd ? C((a(), l("span", {
+        s(_).allowAdd ? q((a(), i("span", {
           key: 1,
           class: "svc-item-value-controls__button svc-item-value-controls__add",
-          onClick: y[0] || (y[0] = (f) => s(m).add(s(m))),
-          "aria-label": void 0
+          onClick: b[0] || (b[0] = (f) => s(_).add(s(_))),
+          role: "button",
+          "aria-label": s(_).tooltip
         }, [
           v(s(u), {
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
             size: "auto",
-            title: void 0
-          })
-        ])), [
+            title: s(_).tooltip
+          }, null, 8, ["title"])
+        ], 8, qa)), [
           [s(N)]
         ]) : p("", !0),
-        s(m).allowRemove ? C((a(), l("span", {
+        s(_).allowRemove ? q((a(), i("span", {
           key: 2,
           class: "svc-item-value-controls__button svc-item-value-controls__remove",
-          onClick: y[1] || (y[1] = (f) => s(m).remove(s(m))),
-          onBlur: y[2] || (y[2] = (f) => s(m).onFocusOut(f)),
-          "aria-label": void 0
+          onClick: b[1] || (b[1] = (f) => s(_).remove(s(_))),
+          onBlur: b[2] || (b[2] = (f) => s(_).onFocusOut(f)),
+          role: "button",
+          "aria-label": s(_).tooltip
         }, [
           v(s(u), {
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
             size: "auto",
-            title: void 0
-          })
-        ], 32)), [
+            title: s(_).tooltip
+          }, null, 8, ["title"])
+        ], 40, $a)), [
           [s(N)]
         ]) : p("", !0)
       ]),
       d("div", {
         class: "svc-item-value__item",
-        onClick: y[3] || (y[3] = (f) => s(m).select(s(m), f))
+        onClick: b[3] || (b[3] = (f) => s(_).select(s(_), f))
       }, [
-        v(s(u), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
+        v(s(u), A({ is: y.componentName }, y.componentData), null, 16, ["is"])
       ])
-    ], 42, ma));
+    ], 42, ba));
   }
-}), ha = ["data-sv-drop-target-item-value"], qa = { class: "svc-image-item-value-wrapper__content" }, Ca = ["accept"], ka = {
+}), fa = ["data-sv-drop-target-item-value"], wa = { class: "svc-image-item-value-wrapper__content" }, Ta = ["accept"], Da = {
   key: 0,
   class: "svc-image-item-value__item"
-}, $a = {
+}, Na = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, fa = { class: "svc-image-item-value__item" }, wa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ta = { class: "sd-imagepicker__label" }, Da = {
+}, Ma = { class: "svc-image-item-value__item" }, Sa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ba = { class: "sd-imagepicker__label" }, Ia = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Na = {
+}, Ea = {
   key: 0,
   class: "svc-image-item-value__placeholder"
-}, Ma = { key: 1 }, Sa = /* @__PURE__ */ g({
+}, Pa = { key: 1 }, Ra = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), i = I(), r = z(
+    const t = c, e = $(() => t.componentData.data.creator), o = $(() => t.componentData.question), n = $(() => t.componentData.item), r = I(), l = z(
       () => {
-        const y = new Ee(
+        const b = new Ee(
           e.value,
           o.value,
           n.value,
           null,
           null
         );
-        return i != null && i.value && (y.itemsRoot = i.value), y;
+        return r != null && r.value && (b.itemsRoot = r.value), b;
       },
       [() => e.value, () => o.value, () => n.value],
-      (y) => {
-        y.dispose();
+      (b) => {
+        b.dispose();
       }
-    ), m = (y) => {
-      y.preventDefault();
-    }, b = k(() => {
-      const y = !r.value.getIsNewItemSingle();
+    ), _ = (b) => {
+      b.preventDefault();
+    }, y = $(() => {
+      const b = !l.value.getIsNewItemSingle();
       return {
-        width: y ? o.value.renderedImageWidth + "px" : void 0,
-        height: y ? o.value.renderedImageHeight + "px" : void 0
+        width: b ? o.value.renderedImageWidth + "px" : void 0,
+        height: b ? o.value.renderedImageHeight + "px" : void 0
       };
     });
     return P(() => {
-      i.value && (r.value.itemsRoot = i.value);
-    }), (y, f) => (a(), l("div", {
-      onPointerdown: f[5] || (f[5] = (E) => s(r).onPointerDown(E)),
-      class: _(s(r).getRootCss()),
-      "data-sv-drop-target-item-value": s(r).isDraggable ? n.value.value : null,
+      r.value && (l.value.itemsRoot = r.value);
+    }), (b, f) => (a(), i("div", {
+      onPointerdown: f[5] || (f[5] = (E) => s(l).onPointerDown(E)),
+      class: m(s(l).getRootCss()),
+      "data-sv-drop-target-item-value": s(l).isDraggable ? n.value.value : null,
       ref_key: "root",
-      ref: i,
-      onDragstart: m,
-      onDragenter: f[6] || (f[6] = (E) => s(r).onDragEnter(E)),
-      onDragover: f[7] || (f[7] = (E) => s(r).onDragOver(E)),
-      onDragleave: f[8] || (f[8] = (E) => s(r).onDragLeave(E)),
-      onDrop: f[9] || (f[9] = (E) => s(r).onDrop(E))
+      ref: r,
+      onDragstart: _,
+      onDragenter: f[6] || (f[6] = (E) => s(l).onDragEnter(E)),
+      onDragover: f[7] || (f[7] = (E) => s(l).onDragOver(E)),
+      onDragleave: f[8] || (f[8] = (E) => s(l).onDragLeave(E)),
+      onDrop: f[9] || (f[9] = (E) => s(l).onDrop(E))
     }, [
       d("div", {
         class: "svc-image-item-value-wrapper__ghost",
-        style: F(b.value)
+        style: F(y.value)
       }, null, 4),
-      d("div", qa, [
+      d("div", wa, [
         d("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
-          accept: s(r).acceptedTypes,
+          accept: s(l).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, Ca),
-        !s(r).isNew && !s(r).isUploading ? (a(), l(w, { key: 0 }, [
-          s(r).isNew ? p("", !0) : (a(), l("div", ka, [
-            v(s(u), A({ is: y.componentName }, y.componentData), null, 16, ["is"])
+        }, null, 8, Ta),
+        !s(l).isNew && !s(l).isUploading ? (a(), i(w, { key: 0 }, [
+          s(l).isNew ? p("", !0) : (a(), i("div", Da, [
+            v(s(u), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
-          s(r).isDraggable && s(r).canRenderControls ? (a(), l("span", {
+          s(l).isDraggable && s(l).canRenderControls ? (a(), i("span", {
             key: 1,
             class: "svc-context-button svc-image-item-value-controls__drag-area-indicator",
-            onPointerdown: f[0] || (f[0] = (E) => s(r).onPointerDown(E)),
+            onPointerdown: f[0] || (f[0] = (E) => s(l).onPointerDown(E)),
             title: void 0,
             "aria-label": void 0
           }, [
@@ -3129,10 +3129,10 @@ const Nt = /* @__PURE__ */ g({
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(r).canRenderControls ? (a(), l("div", $a, [
-            C((a(), l("span", {
+          s(l).canRenderControls ? (a(), i("div", Na, [
+            q((a(), i("span", {
               class: "svc-context-button",
-              onClick: f[1] || (f[1] = (E) => s(r).chooseFile(s(r))),
+              onClick: f[1] || (f[1] = (E) => s(l).chooseFile(s(l))),
               title: void 0,
               "aria-label": void 0
             }, [
@@ -3141,14 +3141,14 @@ const Nt = /* @__PURE__ */ g({
                 role: "button",
                 iconName: "icon-choosefile",
                 size: "auto",
-                title: s(r).selectFileTitle
+                title: s(l).selectFileTitle
               }, null, 8, ["title"])
             ])), [
               [s(N)]
             ]),
-            C((a(), l("span", {
+            q((a(), i("span", {
               class: "svc-context-button svc-context-button--danger",
-              onClick: f[2] || (f[2] = (E) => s(r).remove(s(r))),
+              onClick: f[2] || (f[2] = (E) => s(l).remove(s(l))),
               title: void 0,
               "aria-label": void 0
             }, [
@@ -3157,119 +3157,119 @@ const Nt = /* @__PURE__ */ g({
                 role: "button",
                 iconName: "icon-delete",
                 size: "auto",
-                title: s(r).removeFileTitle
+                title: s(l).removeFileTitle
               }, null, 8, ["title"])
             ])), [
               [s(N)]
             ])
           ])) : p("", !0)
-        ], 64)) : (a(), l(w, { key: 1 }, [
-          d("div", fa, [
-            d("div", wa, [
-              d("label", Ta, [
+        ], 64)) : (a(), i(w, { key: 1 }, [
+          d("div", Ma, [
+            d("div", Sa, [
+              d("label", Ba, [
                 d("div", {
-                  style: F(b.value),
+                  style: F(y.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(r).isUploading ? (a(), l("div", Da, [
+                  s(l).isUploading ? (a(), i("div", Ia, [
                     v(s(u), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
               ])
             ])
           ]),
-          s(r).allowAdd && !s(r).isUploading ? (a(), l("div", {
+          s(l).allowAdd && !s(l).isUploading ? (a(), i("div", {
             key: 0,
             class: "svc-image-item-value-controls",
             onPointerdown: f[4] || (f[4] = (E) => E.stopPropagation())
           }, [
-            s(r).showPlaceholder ? (a(), l("span", Na, $(s(r).placeholderText), 1)) : p("", !0),
-            C((a(), l("span", {
-              class: _(s(r).addButtonCss),
-              onClick: f[3] || (f[3] = (E) => s(r).chooseNewFile(s(r)))
+            s(l).showPlaceholder ? (a(), i("span", Ea, k(s(l).placeholderText), 1)) : p("", !0),
+            q((a(), i("span", {
+              class: m(s(l).addButtonCss),
+              onClick: f[3] || (f[3] = (E) => s(l).chooseNewFile(s(l)))
             }, [
-              s(r).showChooseButtonAsIcon ? (a(), h(s(u), {
+              s(l).showChooseButtonAsIcon ? (a(), h(s(u), {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-add-lg",
                 size: "auto",
-                title: s(r).addFileTitle
-              }, null, 8, ["title"])) : (a(), l("span", Ma, $(s(r).chooseImageText), 1))
+                title: s(l).addFileTitle
+              }, null, 8, ["title"])) : (a(), i("span", Pa, k(s(l).chooseImageText), 1))
             ], 2)), [
               [s(N)]
             ])
           ], 32)) : p("", !0)
         ], 64))
       ])
-    ], 42, ha));
+    ], 42, fa));
   }
-}), Ba = /* @__PURE__ */ g({
+}), Va = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
     style: {}
   },
   setup(c) {
-    const t = c, e = k(() => {
-      var i;
-      return (i = t.survey) == null ? void 0 : i.getAllQuestions()[0];
-    }), o = k(() => {
-      const i = t.survey;
-      if (i && e.value) {
-        const r = i.getElementWrapperComponentName(e.value);
-        if (r)
-          return r;
+    const t = c, e = $(() => {
+      var r;
+      return (r = t.survey) == null ? void 0 : r.getAllQuestions()[0];
+    }), o = $(() => {
+      const r = t.survey;
+      if (r && e.value) {
+        const l = r.getElementWrapperComponentName(e.value);
+        if (l)
+          return l;
       }
       return "survey-question";
-    }), n = k(() => {
-      const i = t.survey;
-      let r;
-      return i && e.value && (r = i.getElementWrapperComponentData(e.value)), {
+    }), n = $(() => {
+      const r = t.survey;
+      let l;
+      return r && e.value && (l = r.getElementWrapperComponentData(e.value)), {
         componentName: "survey-question",
         componentData: {
           element: e.value,
-          data: r
+          data: l
         }
       };
     });
-    return (i, r) => (a(), l("div", {
+    return (r, l) => (a(), i("div", {
       style: F(t.style)
     }, [
       v(s(u), A({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Ia = ["accept"], Ea = /* @__PURE__ */ d("svg", null, [
+}), Aa = ["accept"], za = /* @__PURE__ */ d("svg", null, [
   /* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Pa = [
-  Ea
-], Ra = { class: "svc-context-container svc-logo-image-controls" }, Va = {
+], -1), La = [
+  za
+], Fa = { class: "svc-context-container svc-logo-image-controls" }, Ka = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Aa = /* @__PURE__ */ g({
+}, Ua = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
   setup(c) {
-    const t = c, e = k(() => t.data), o = k(() => e.value.survey), n = I(), i = z(
+    const t = c, e = $(() => t.data), o = $(() => e.value.survey), n = I(), r = z(
       () => new Pe(e.value, null),
       [() => e.value]
-    ), r = I(), m = () => {
-      r.value = o.value.locLogo.renderedHtml;
+    ), l = I(), _ = () => {
+      l.value = o.value.locLogo.renderedHtml;
     };
     return G(
       () => o.value.locLogo,
-      (b, y) => {
-        m(), b && b.onStringChanged.add(m), y && b.onStringChanged.remove(m);
+      (y, b) => {
+        _(), y && y.onStringChanged.add(_), b && y.onStringChanged.remove(_);
       },
       {
         immediate: !0
       }
     ), P(() => {
-      n.value && (i.value.root = n.value);
+      n.value && (r.value.root = n.value);
     }), K(() => {
-      i.value && (i.value.root = void 0);
-    }), (b, y) => (a(), l("div", {
+      r.value && (r.value.root = void 0);
+    }), (y, b) => (a(), i("div", {
       class: "svc-logo-image",
       ref_key: "root",
       ref: n
@@ -3278,26 +3278,26 @@ const Nt = /* @__PURE__ */ g({
         type: "file",
         "aria-hidden": "true",
         tabindex: "-1",
-        accept: s(i).acceptedTypes,
+        accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Ia),
-      r.value ? p("", !0) : (a(), l(w, { key: 0 }, [
-        s(i).allowEdit && !s(i).isUploading ? C((a(), l("div", {
+      }, null, 8, Aa),
+      l.value ? p("", !0) : (a(), i(w, { key: 0 }, [
+        s(r).allowEdit && !s(r).isUploading ? q((a(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
-          onClick: y[0] || (y[0] = (f) => s(i).chooseFile(s(i)))
-        }, Pa)), [
+          onClick: b[0] || (b[0] = (f) => s(r).chooseFile(s(r)))
+        }, La)), [
           [s(N)]
         ]) : p("", !0)
       ], 64)),
-      r.value && !s(i).isUploading ? (a(), l("div", {
+      l.value && !s(r).isUploading ? (a(), i("div", {
         key: 1,
-        class: _(s(i).containerCss)
+        class: m(s(r).containerCss)
       }, [
-        d("div", Ra, [
-          C((a(), l("span", {
+        d("div", Fa, [
+          q((a(), i("span", {
             class: "svc-context-button",
-            onClick: y[1] || (y[1] = (f) => s(i).chooseFile(s(i))),
+            onClick: b[1] || (b[1] = (f) => s(r).chooseFile(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
@@ -3309,9 +3309,9 @@ const Nt = /* @__PURE__ */ g({
           ])), [
             [s(N)]
           ]),
-          C((a(), l("span", {
+          q((a(), i("span", {
             class: "svc-context-button svc-context-button--danger",
-            onClick: y[2] || (y[2] = (f) => s(i).remove(s(i))),
+            onClick: b[2] || (b[2] = (f) => s(r).remove(s(r))),
             title: void 0,
             "aria-label": void 0
           }, [
@@ -3329,15 +3329,15 @@ const Nt = /* @__PURE__ */ g({
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(i).isUploading ? (a(), l("div", Va, [
+      s(r).isUploading ? (a(), i("div", Ka, [
         v(s(u), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), za = {
+}), Qa = {
   key: 0,
   class: "svc-search"
-}, La = { class: "svc-search__search-icon" }, Fa = ["aria-label", "placeholder"], Ka = { class: "svc-search__toolbar" }, Ua = { class: "svc-search__toolbar-counter" }, Ha = /* @__PURE__ */ g({
+}, Ha = { class: "svc-search__search-icon" }, Oa = ["aria-label", "placeholder"], Ga = { class: "svc-search__toolbar" }, Wa = { class: "svc-search__toolbar-counter" }, ja = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
@@ -3345,32 +3345,32 @@ const Nt = /* @__PURE__ */ g({
   setup(c) {
     const t = c;
     T(() => t.model);
-    const e = k({
+    const e = $({
       get: () => t.model.filterString,
       set: (o) => {
         const n = t.model;
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (a(), l("div", za, [
-      d("div", La, [
+    return (o, n) => o.model.isVisible ? (a(), i("div", Qa, [
+      d("div", Ha, [
         v(s(u), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
         })
       ]),
-      C(d("input", {
+      q(d("input", {
         type: "text",
         class: "svc-search__input",
-        "onUpdate:modelValue": n[0] || (n[0] = (i) => e.value = i),
+        "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder
-      }, null, 8, Fa), [
+      }, null, 8, Oa), [
         [de, e.value]
       ]),
-      d("div", Ka, [
-        d("div", Ua, $(o.model.matchCounterText), 1),
+      d("div", Ga, [
+        d("div", Wa, k(o.model.matchCounterText), 1),
         v(s(u), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
@@ -3378,7 +3378,7 @@ const Nt = /* @__PURE__ */ g({
       ])
     ])) : p("", !0);
   }
-}), Oa = ["title"], Qa = /* @__PURE__ */ g({
+}), Ja = ["title"], Za = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3391,54 +3391,56 @@ const Nt = /* @__PURE__ */ g({
     ), o = I();
     return P(() => {
       if (t.pageEditMode !== "bypage") {
-        const n = o.value, i = e.value;
-        n && i.attachToUI(n);
+        const n = o.value, r = e.value;
+        n && r.attachToUI(n);
       }
     }), X(() => {
       const n = e.value;
       n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
     }), K(() => {
       e.value.dispose();
-    }), (n, i) => C((a(), l("div", {
+    }), (n, r) => q((a(), i("div", {
       class: "svc-page-navigator",
       ref_key: "root",
       ref: o
     }, [
-      C((a(), l("div", {
-        role: "button",
-        class: _(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
-        onClick: i[0] || (i[0] = (r) => s(e).togglePageSelector(r)),
-        title: s(e).pageSelectorCaption
-      }, [
-        v(s(u), {
-          is: "sv-svg-icon",
-          class: "svc-page-navigator__button-icon",
-          iconName: s(e).icon,
-          size: "auto"
-        }, null, 8, ["iconName"]),
+      d("div", null, [
+        q((a(), i("div", {
+          role: "button",
+          class: m(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
+          onClick: r[0] || (r[0] = (l) => s(e).togglePageSelector(l)),
+          title: s(e).pageSelectorCaption
+        }, [
+          v(s(u), {
+            is: "sv-svg-icon",
+            class: "svc-page-navigator__button-icon",
+            iconName: s(e).icon,
+            size: "auto"
+          }, null, 8, ["iconName"])
+        ], 10, Ja)), [
+          [s(N)]
+        ]),
         v(s(u), {
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
-      ], 10, Oa)), [
-        [s(N)]
       ]),
       d("div", null, [
-        (a(!0), l(w, null, V(s(e).visibleItems, (r) => (a(), h(s(u), {
+        (a(!0), i(w, null, V(s(e).visibleItems, (l) => (a(), h(s(u), {
           is: "svc-page-navigator-item",
-          key: r.id,
-          model: r
+          key: l.id,
+          model: l
         }, null, 8, ["model"]))), 128))
       ])
     ], 512)), [
-      [U, s(e).visible]
+      [Q, s(e).visible]
     ]);
   }
-}), Ga = { class: "svc-page-navigator-item" }, Wa = ["title"], ja = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ja = [
-  ja
-], Za = { class: "svc-page-navigator-item__banner" }, Xa = { class: "svc-page-navigator-item__text" }, Ya = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
+}), 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" }, [
   /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), xa = /* @__PURE__ */ g({
+], -1), nl = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
@@ -3449,29 +3451,29 @@ const Nt = /* @__PURE__ */ g({
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (a(), l("div", Ga, [
-      C((a(), l("div", {
+    return (o, n) => (a(), i("div", Xa, [
+      q((a(), i("div", {
         role: "button",
-        class: _(["svc-page-navigator-item-content", {
+        class: m(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
           "svc-page-navigator-item--disabled": o.model.disabled
         }]),
-        onClick: n[0] || (n[0] = (i) => e(i))
+        onClick: n[0] || (n[0] = (r) => e(r))
       }, [
         d("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Ja, 8, Wa),
-        d("div", Za, [
-          d("span", Xa, $(o.model.title), 1),
-          Ya
+        }, el, 8, Ya),
+        d("div", ol, [
+          d("span", sl, k(o.model.title), 1),
+          tl
         ])
       ], 2)), [
         [s(N)]
       ])
     ]));
   }
-}), el = { class: "svc-question__dropdown-choices--wrapper" }, ol = { class: "svc-question__dropdown-choices" }, sl = /* @__PURE__ */ g({
+}), al = { class: "svc-question__dropdown-choices--wrapper" }, ll = { class: "svc-question__dropdown-choices" }, il = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3486,16 +3488,16 @@ const Nt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, i) => (a(), l("div", el, [
+    return (n, r) => (a(), i("div", al, [
       d("div", null, [
-        d("div", ol, [
-          (a(!0), l(w, null, V(n.model.getRenderedItems(), (r) => (a(), l("div", {
-            key: r.value,
-            class: _(n.model.getChoiceCss())
+        d("div", ll, [
+          (a(!0), i(w, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
+            key: l.value,
+            class: m(n.model.getChoiceCss())
           }, [
             v(s(u), A({
-              is: e(r)
-            }, o(r)), null, 16, ["is"])
+              is: e(l)
+            }, o(l)), null, 16, ["is"])
           ], 2))), 128))
         ]),
         n.model.needToCollapse ? (a(), h(s(u), {
@@ -3508,7 +3510,7 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), tl = /* @__PURE__ */ g({
+}), rl = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
@@ -3528,51 +3530,51 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), nl = { class: "svc-question__adorner" }, al = { class: "svc-question__content svc-question__content--in-popup" }, ll = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", il = /* @__PURE__ */ g({
+}), 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({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(c) {
-    const t = c, e = k(
+    const t = c, e = $(
       () => t.componentData.element
-    ), o = (i) => e.value.getItemValueWrapperComponentName(i) || le, n = (i) => ({
+    ), o = (r) => e.value.getItemValueWrapperComponentName(r) || le, n = (r) => ({
       componentName: le,
       componentData: {
         question: e.value,
-        item: i,
-        data: e.value.getItemValueWrapperComponentData(i)
+        item: r,
+        data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return T(() => e.value), (i, r) => (a(), l("div", nl, [
-      d("div", al, [
-        v(s(u), A({ is: i.componentName }, i.componentData), null, 16, ["is"]),
-        d("div", ll, [
-          (a(!0), l(w, null, V(e.value.visibleChoices, (m) => (a(), l("div", {
-            key: m.value,
+    return T(() => e.value), (r, l) => (a(), i("div", dl, [
+      d("div", cl, [
+        v(s(u), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
+        d("div", ul, [
+          (a(!0), i(w, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
+            key: _.value,
             class: "svc-question__dropdown-choice"
           }, [
             v(s(u), A({
-              is: o(m)
-            }, n(m)), null, 16, ["is"])
+              is: o(_)
+            }, n(_)), null, 16, ["is"])
           ]))), 128))
         ])
       ])
     ]));
   }
-}), rl = ["data-sv-drop-target-survey-element"], dl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), cl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ul = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), vl = { class: "svc-widget__content" }, ml = {
+}), 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 = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, _l = /* @__PURE__ */ d("div", {
+}, Cl = /* @__PURE__ */ d("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), gl = [
-  _l
-], bl = { class: "svc-question__content-actions" }, yl = {
+}, null, -1), ql = [
+  Cl
+], $l = { class: "svc-question__content-actions" }, kl = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, hl = { class: "svc-panel__placeholder" }, ql = /* @__PURE__ */ g({
+}, fl = { class: "svc-panel__placeholder" }, wl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
@@ -3594,29 +3596,29 @@ const Nt = /* @__PURE__ */ g({
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), (n, i) => s(o) ? (a(), l("div", {
+    }), (n, r) => s(o) ? (a(), i("div", {
       key: 0,
-      class: _(["svc-question__adorner", s(o).rootCss()]),
-      onMouseover: i[2] || (i[2] = (r) => s(o).hover(r, r.currentTarget)),
-      onMouseleave: i[3] || (i[3] = (r) => s(o).hover(r, r.currentTarget)),
+      class: m(["svc-question__adorner", s(o).rootCss()]),
+      onMouseover: r[2] || (r[2] = (l) => s(o).hover(l, l.currentTarget)),
+      onMouseleave: r[3] || (r[3] = (l) => s(o).hover(l, l.currentTarget)),
       "data-sv-drop-target-survey-element": s(o).element.name || null,
       ref_key: "root",
       ref: e
     }, [
-      s(o).element.isInteractiveDesignElement ? C((a(), l("div", {
+      s(o).element.isInteractiveDesignElement ? q((a(), i("div", {
         key: 0,
-        class: _(["svc-question__content", s(o).css()]),
-        onClick: i[1] || (i[1] = (r) => s(o).select(s(o), r)),
+        class: m(["svc-question__content", s(o).css()]),
+        onClick: r[1] || (r[1] = (l) => s(o).select(s(o), l)),
         "data-bind": "clickBubble: false"
       }, [
-        dl,
-        cl,
-        ul,
-        pl,
-        s(o).allowDragging ? (a(), l("div", {
+        ml,
+        _l,
+        gl,
+        bl,
+        s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
-          onPointerdown: i[0] || (i[0] = (r) => s(o).onPointerDown(r))
+          onPointerdown: r[0] || (r[0] = (l) => s(o).onPointerDown(l))
         }, [
           v(s(u), {
             is: "sv-svg-icon",
@@ -3625,11 +3627,11 @@ const Nt = /* @__PURE__ */ g({
             size: "auto"
           })
         ], 32)) : p("", !0),
-        d("div", vl, [
+        d("div", yl, [
           v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (a(), l("div", ml, gl)) : p("", !0),
-        d("div", bl, [
+        s(o).isEmptyElement ? (a(), i("div", hl, ql)) : p("", !0),
+        d("div", $l, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
@@ -3639,24 +3641,24 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N)]
       ]) : p("", !0),
-      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), l(w, { key: 1 }, [
+      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(), l("div", yl, [
-          d("div", hl, $(s(o).placeholderText), 1)
+        s(o).isEmptyElement ? (a(), i("div", kl, [
+          d("div", fl, k(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, rl)) : p("", !0);
+    ], 42, vl)) : p("", !0);
   }
-}), Cl = { class: "svc-carry-forward-panel-wrapper" }, kl = { class: "svc-carry-forward-panel" }, $l = { class: "svc-carry-forward-panel__link" }, fl = /* @__PURE__ */ g({
+}), Tl = { class: "svc-carry-forward-panel-wrapper" }, Dl = { class: "svc-carry-forward-panel" }, Nl = { class: "svc-carry-forward-panel__link" }, Ml = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(c) {
-    return (t, e) => (a(), l("div", Cl, [
-      d("div", kl, [
-        d("span", null, $(t.model.text) + $(" "), 1),
-        d("span", $l, [
+    return (t, e) => (a(), i("div", Tl, [
+      d("div", Dl, [
+        d("span", null, k(t.model.text) + k(" "), 1),
+        d("span", Nl, [
           v(s(u), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3667,20 +3669,20 @@ const Nt = /* @__PURE__ */ g({
     ]));
   }
 });
-function wl(c, t, e) {
+function Sl(c, t, e) {
   c(t, e);
 }
 function pe(c) {
-  const t = wl.bind(
+  const t = Sl.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", Ho), t("svc-property-grid", uo), t("svc-object-selector", co), t("svc-search", Ha), t("svc-switcher", os), t("svc-action-button", Jo), t("svc-question-error", Oo), t("survey-embeddedsurvey", Gs), t("sv-logic-operator", Qs), t("survey-linkvalue", Ws), t("survey-color", ct), t("color-item", ut), t("sv-boolean-switch", Nt), t("survey-fileedit", gt), t("survey-spinedit", qt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", Q), t("survey-simulator", ns), t("svc-tab-preview", cs), t("svc-complete-page", ps), t("survey-results", $s), 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", Ht), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", jt), t(Ae, Vt), t("svc-tab-designer", pn), t("svc-page-navigator", Qa), t("svc-page-navigator-item", xa), t("svc-page", Cn), t("svc-row", Nn), t("svc-add-new-question-btn", $n), t("svc-add-question-type-selector", wn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", Ln), t("svc-image-question-adorner", Qn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", il), t("svc-question-editor-content", Ba), t("svc-logo-image", Aa), t("svc-panel", va), t("svc-item-value", ya), t("svc-image-item-value", Sa), t("svc-dropdown-question", tl), t("svc-dropdown-question-adorner", sl), t("svc-widget-question", ql), t("svc-question-banner", fl);
+  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);
 }
 pe(
   (c, t) => ie.Instance.registerComponent(c, t)
 );
-const Sl = {
+const Rl = {
   install(c) {
     c.component("SurveyCreatorComponent", je), pe((t, e) => {
       c.component(t, e), ie.Instance.registerComponent(t, t);
@@ -3689,5 +3691,5 @@ const Sl = {
 };
 export {
   je as SurveyCreatorComponent,
-  Sl as surveyCreatorPlugin
+  Rl as surveyCreatorPlugin
 };