survey-creator-vue 2.5.0 → 2.5.2

package/survey-creator-vue.es.js

@@ -1,6 +1,6 @@
-import { useBase as f, SvComponent as c, key2ClickDirective as M, SurveyComponent as O, useQuestion as Q, ComponentFactory as ie } from "survey-vue3-ui";
-import { defineComponent as g, computed as k, toRaw as _e, ref as P, onMounted as R, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as w, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as A, createBlock as b, onUpdated as G, nextTick as re, withDirectives as h, toDisplayString as T, vShow as H, withCtx as X, createTextVNode as ge, shallowRef as be, watch as W, onBeforeUnmount as Y, vModelText as de, mergeProps as V, renderSlot as x } from "vue";
-import { editorLocalization as ce, SurveyResultsModel as ye, initLogicOperator as he, StringEditorViewModelBase as Ce, ToolboxToolViewModel as qe, PageAdorner as $e, RowViewModel as ke, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as fe, QuestionRatingAdornerViewModel as we, MatrixCellWrapperViewModel as Te, ItemValueWrapperViewModel as De, ImageItemValueWrapperViewModel as Ne, LogoImageViewModel as Me, PageNavigatorViewModel as Se, QuestionDropdownAdornerViewModel as Be, editableStringRendererName as Ie } from "survey-creator-core";
+import { useBase as w, SvComponent as c, key2ClickDirective as M, SurveyComponent as O, useQuestion as Q, ComponentFactory as ie } from "survey-vue3-ui";
+import { defineComponent as g, computed as k, toRaw as _e, ref as P, onMounted as R, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as f, createVNode as v, unref as s, createElementVNode as d, normalizeClass as m, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as b, onUpdated as W, nextTick as re, withDirectives as h, toDisplayString as D, vShow as H, withCtx as X, createTextVNode as ge, shallowRef as be, watch as G, onBeforeUnmount as Y, vModelText as de, mergeProps as A, renderSlot as x } from "vue";
+import { editorLocalization as ce, SurveyResultsModel as ye, initLogicOperator as he, StringEditorViewModelBase as Ce, ToolboxToolViewModel as qe, PageAdorner as $e, RowViewModel as ke, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as fe, QuestionRatingAdornerViewModel as we, MatrixCellWrapperViewModel as De, ItemValueWrapperViewModel as Te, ImageItemValueWrapperViewModel as Ne, LogoImageViewModel as Me, PageNavigatorViewModel as Se, QuestionDropdownAdornerViewModel as Be, editableStringRendererName as Ie } from "survey-creator-core";
 import { CssClassBuilder as Ee, RendererFactory as ue, DropdownListModel as Pe } from "survey-core";
 const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ve = { class: "svc-top-bar" }, Ae = {
   key: 0,
@@ -18,7 +18,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u, e = k(() => _e(t.model)), o = P();
-    return f(
+    return w(
       () => e.value,
       (n, r) => {
         r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
@@ -27,7 +27,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       o.value && t.model.setRootElement(o.value);
     }), K(() => {
       t.model.unsubscribeRootElement();
-    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(w, { key: 0 }, [
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(f, { key: 0 }, [
       v(s(c), { is: "survey-popup-modal" }),
       d("div", {
         class: m(e.value.getRootCss()),
@@ -73,7 +73,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 }])
               }, [
                 d("div", Le, [
-                  (a(!0), i(w, null, A(e.value.tabs, (l) => (a(), i(w, null, [
+                  (a(!0), i(f, null, V(e.value.tabs, (l) => (a(), i(f, null, [
                     e.value.viewType == l.id && l.visible ? (a(), i("div", {
                       role: "tabpanel",
                       class: m(["svc-creator-tab", {
@@ -123,14 +123,14 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 6)
     ], 64));
   }
-}), Ge = /* @__PURE__ */ g({
+}), We = /* @__PURE__ */ g({
   __name: "TabbedMenu",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = P();
-    return f(() => t.model), G(() => {
+    return w(() => t.model), W(() => {
       t.model.initResponsivityManager(e.value);
     }), R(() => {
       t.model.initResponsivityManager(e.value);
@@ -143,21 +143,21 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       role: "tablist",
       style: F(o.model.getRootStyle())
     }, [
-      (a(!0), i(w, null, A(o.model.renderedActions, (r) => (a(), b(s(c), {
+      (a(!0), i(f, null, V(o.model.renderedActions, (r) => (a(), b(s(c), {
         key: r.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: r
       }, null, 8, ["item"]))), 128))
     ], 4));
   }
-}), We = { class: "sv-action__content" }, je = /* @__PURE__ */ g({
+}), Ge = { class: "sv-action__content" }, je = /* @__PURE__ */ g({
   __name: "TabbedMenuItemWrapper",
   props: {
     item: {}
   },
   setup(u) {
     const t = P(), e = u;
-    return f(() => e.item), R(() => {
+    return w(() => e.item), R(() => {
       const o = e.item;
       o.updateModeCallback = (n, r) => {
         o.mode = n, re(() => r(n, t.value));
@@ -170,7 +170,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref_key: "root",
       ref: t
     }, [
-      d("div", We, [
+      d("div", Ge, [
         v(s(c), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
@@ -185,7 +185,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.item), (e, o) => h((a(), i("div", {
+    return w(() => t.item), (e, o) => h((a(), i("div", {
       role: "tab",
       id: "tab-" + e.item.id,
       "aria-selected": e.item.active,
@@ -197,7 +197,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       e.item.hasTitle ? (a(), i("span", {
         key: 0,
         class: m(e.item.getTitleCss())
-      }, T(e.item.title), 3)) : p("", !0),
+      }, D(e.item.title), 3)) : p("", !0),
       e.item.hasIcon ? (a(), b(s(c), {
         key: 1,
         is: "sv-svg-icon",
@@ -217,7 +217,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u, e = P();
-    return f(() => t.model), R(() => {
+    return w(() => t.model), R(() => {
       t.model.initResizeManager(e.value);
     }), K(() => {
       t.model.resetResizeManager();
@@ -242,7 +242,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
             d("div", xe, [
-              (a(!0), i(w, null, A(o.model.pages, (r, l) => (a(), b(s(c), {
+              (a(!0), i(f, null, V(o.model.pages, (r, l) => (a(), b(s(c), {
                 key: l,
                 is: "svc-side-bar-page",
                 model: r
@@ -272,14 +272,14 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", oo, [
+    return w(() => t.model), (e, o) => (a(), i("div", oo, [
       d("div", so, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (a(), i("div", to, T(e.model.title), 1)) : p("", !0)
+      e.model.title ? (a(), i("div", to, D(e.model.title), 1)) : p("", !0)
     ]));
   }
 }), ao = /* @__PURE__ */ g({
@@ -289,7 +289,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.visible ? (a(), b(s(c), {
+    return w(() => t.model), (e, o) => e.model.visible ? (a(), b(s(c), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
@@ -302,7 +302,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.isVisible ? (a(), b(s(c), {
+    return w(() => t.model), (e, o) => e.model.isVisible ? (a(), b(s(c), {
       key: 0,
       is: "sv-list",
       model: e.model.list
@@ -315,7 +315,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.rootCss)
     }, [
       v(s(c), {
@@ -335,7 +335,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(!0), i(w, null, A(e.model.actions, (n, r) => (a(), b(s(c), {
+    return w(() => t.model), (e, o) => (a(!0), i(f, null, V(e.model.actions, (n, r) => (a(), b(s(c), {
       key: r,
       is: "svc-tab-button",
       model: n
@@ -350,7 +350,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.sideBarClassName)
     }, [
       d("div", co, [
@@ -393,7 +393,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
+    return w(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
       h((a(), i("div", {
         class: m(e.model.buttonClassName),
         title: e.model.tooltip,
@@ -413,19 +413,19 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ])) : p("", !0);
   }
-}), $o = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, fo = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, To = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
+}), $o = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, fo = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, Do = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__gap" }),
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
-], -1), Do = /* @__PURE__ */ g({
+], -1), To = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(u) {
     const t = ce;
     return (e, o) => (a(), i("div", $o, [
       d("div", ko, [
-        d("span", fo, T(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        d("span", wo, T(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+        d("span", fo, D(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        d("span", wo, D(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      To
+      Do
     ]));
   }
 }), No = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Mo = {
@@ -441,11 +441,11 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", No, [
-      e.model.subTitle ? p("", !0) : (a(), i("div", Mo, T(e.model.title), 1)),
+    return w(() => t.model), (e, o) => (a(), i("div", No, [
+      e.model.subTitle ? p("", !0) : (a(), i("div", Mo, D(e.model.title), 1)),
       e.model.subTitle ? (a(), i("div", So, [
-        d("span", Bo, T(e.model.title), 1),
-        d("span", Io, T(e.model.subTitle), 1)
+        d("span", Bo, D(e.model.title), 1),
+        d("span", Io, D(e.model.subTitle), 1)
       ])) : p("", !0)
     ]));
   }
@@ -456,7 +456,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", Po, [
+    return w(() => t.model), (e, o) => (a(), i("div", Po, [
       d("div", Ro, [
         d("div", Vo, [
           h((a(), i("div", {
@@ -464,8 +464,8 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
             d("div", Ao, [
-              d("span", zo, T(e.model.title), 1),
-              d("span", Lo, T(e.model.tooltip), 1)
+              d("span", zo, D(e.model.title), 1),
+              d("span", Lo, D(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(M), { processEsc: !1 }]
@@ -506,7 +506,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 2)
     ]));
   }
-}), Uo = ["title"], Ho = ["title"], Qo = ["title"], Oo = ["title"], Go = /* @__PURE__ */ g({
+}), Uo = ["title"], Ho = ["title"], Qo = ["title"], Oo = ["title"], Wo = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     classes: {},
@@ -522,25 +522,25 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     const t = u, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
     }, o = () => new Ee().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
-    return (n, r) => (a(), i(w, null, [
-      n.iconName ? p("", !0) : (a(), i(w, { key: 0 }, [
+    return (n, r) => (a(), i(f, null, [
+      n.iconName ? p("", !0) : (a(), i(f, { key: 0 }, [
         n.disabled ? (a(), i("span", {
           key: 0,
           class: m(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
-        }, T(n.text), 11, Uo)) : p("", !0),
+        }, D(n.text), 11, Uo)) : p("", !0),
         h((a(), i("span", {
           role: "button",
           class: m(["svc-action-button", o()]),
           onClick: e,
           title: n.title
         }, [
-          ge(T(n.text), 1)
+          ge(D(n.text), 1)
         ], 10, Ho)), [
           [s(M)]
         ])
       ], 64)),
-      n.iconName ? (a(), i(w, { key: 1 }, [
+      n.iconName ? (a(), i(f, { key: 1 }, [
         n.disabled ? (a(), i("span", {
           key: 0,
           class: m(o()),
@@ -569,7 +569,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 64)) : p("", !0)
     ], 64));
   }
-}), Wo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], jo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Jo = [
+}), Go = ["disabled", "title", "aria-checked", "aria-expanded", "role"], jo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Jo = [
   jo
 ], Zo = {
   key: 0,
@@ -584,7 +584,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.item), (e, o) => h((a(), i("button", {
+    return w(() => t.item), (e, o) => h((a(), i("button", {
       class: m(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -602,8 +602,8 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       d("div", {
         class: m(e.item.getSwitcherIconCss())
       }, Jo, 2),
-      e.item.hasTitle ? (a(), i("span", Zo, T(e.item.title), 1)) : p("", !0)
-    ], 42, Wo)), [
+      e.item.hasTitle ? (a(), i("span", Zo, D(e.item.title), 1)) : p("", !0)
+    ], 42, Go)), [
       [s(M), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
   }
@@ -617,7 +617,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    f(() => t.model);
+    w(() => t.model);
     const e = k(() => t.model.simulatorFrame), o = () => {
       t.model.device !== "desktop" && t.model.activateZoom();
     }, n = () => {
@@ -662,7 +662,22 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 4)) : p("", !0)
     ], 34));
   }
-}), ss = { class: "svc-surface-placeholder" }, ts = { class: "svc-surface-placeholder__text" }, ns = { class: "svc-surface-placeholder__title" }, as = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
+}), ss = { class: "svc-component-container" }, ts = /* @__PURE__ */ g({
+  __name: "ComponentContainer",
+  props: {
+    model: {}
+  },
+  setup(u) {
+    const t = u;
+    return (e, o) => (a(), i("div", ss, [
+      (a(!0), i(f, null, V(t.model.elements, (n, r) => (a(), b(s(c), {
+        is: n.componentName,
+        model: n.componentData,
+        key: r
+      }, null, 8, ["is", "model"]))), 128))
+    ]));
+  }
+}), ns = { class: "svc-surface-placeholder" }, as = { class: "svc-surface-placeholder__text" }, ls = { class: "svc-surface-placeholder__title" }, is = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
   __name: "SurfacePlaceholder",
   props: {
     name: {},
@@ -671,27 +686,27 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return (e, o) => (a(), i("div", ss, [
+    return (e, o) => (a(), i("div", ns, [
       d("div", {
         class: m(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
       }, null, 2),
-      d("div", ts, [
-        d("div", ns, T(t.placeholderTitleText), 1),
-        d("div", as, T(t.placeholderDescriptionText), 1)
+      d("div", as, [
+        d("div", ls, D(t.placeholderTitleText), 1),
+        d("div", is, D(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
-}), ls = {
+}), rs = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, is = /* @__PURE__ */ g({
+}, ds = /* @__PURE__ */ g({
   __name: "Test",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
@@ -717,7 +732,7 @@ const Re = { 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(), i("div", ls, [
+      e.model.isPageToolbarVisible ? (a(), i("div", rs, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -725,7 +740,7 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])) : p("", !0)
     ], 2));
   }
-}), rs = { class: "svc-btn__text" }, ds = /* @__PURE__ */ g({
+}), cs = { class: "svc-btn__text" }, us = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "TestAgain",
   props: {
@@ -733,19 +748,19 @@ const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u, e = k(() => t.model.testAgainAction);
-    return f(() => e.value), (o, n) => h((a(), i("div", {
+    return w(() => e.value), (o, n) => h((a(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      d("span", rs, T(e.value.title), 1)
+      d("span", cs, D(e.value.title), 1)
     ])), [
       [s(M)]
     ]);
   }
 });
 function z(u, t, e) {
-  const o = be(), n = W(
+  const o = be(), n = G(
     t.map((r) => () => r()),
     () => {
       o.value = u();
@@ -754,14 +769,14 @@ function z(u, t, e) {
       immediate: !0
     }
   );
-  return f(() => o.value, void 0, e), Y(() => {
+  return w(() => o.value, void 0, e), Y(() => {
     n();
   }), o;
 }
-const cs = {
+const ps = {
   key: 0,
   class: "svd-test-results"
-}, us = { class: "svd-test-results__content" }, ps = { class: "svd-test-results__header" }, vs = { class: "svd-test-results__header-text" }, ms = { class: "svd-test-results__header-types" }, _s = { class: "svd-test-results__text svd-light-bg-color" }, gs = { class: "svd-test-results__table svd-light-bg-color" }, bs = { class: "svd-light-background-color" }, ys = { class: "svd-dark-border-color" }, hs = { class: "svd-dark-border-color" }, Cs = /* @__PURE__ */ g({
+}, vs = { class: "svd-test-results__content" }, ms = { class: "svd-test-results__header" }, _s = { class: "svd-test-results__header-text" }, gs = { class: "svd-test-results__header-types" }, bs = { class: "svd-test-results__text svd-light-bg-color" }, ys = { class: "svd-test-results__table svd-light-bg-color" }, hs = { class: "svd-light-background-color" }, Cs = { class: "svd-dark-border-color" }, qs = { class: "svd-dark-border-color" }, $s = /* @__PURE__ */ g({
   __name: "SurveyResults",
   props: {
     survey: {}
@@ -771,11 +786,11 @@ const cs = {
       () => t.survey ? new ye(t.survey) : void 0,
       [() => t.survey]
     );
-    return (o, n) => s(e) ? (a(), i("div", cs, [
-      d("div", us, [
-        d("div", ps, [
-          d("div", vs, T(s(e).surveyResultsText), 1),
-          d("div", ms, [
+    return (o, n) => s(e) ? (a(), i("div", ps, [
+      d("div", vs, [
+        d("div", ms, [
+          d("div", _s, D(s(e).surveyResultsText), 1),
+          d("div", gs, [
             v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
@@ -792,21 +807,21 @@ const cs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        h(d("div", _s, [
-          d("div", null, T(s(e).resultText), 1)
+        h(d("div", bs, [
+          d("div", null, D(s(e).resultText), 1)
         ], 512), [
           [H, s(e).resultViewType === "text"]
         ]),
-        h(d("div", gs, [
+        h(d("div", ys, [
           d("table", null, [
             d("thead", null, [
-              d("tr", bs, [
-                d("th", ys, T(s(e).resultsTitle), 1),
-                d("th", hs, T(s(e).resultsDisplayValue), 1)
+              d("tr", hs, [
+                d("th", Cs, D(s(e).resultsTitle), 1),
+                d("th", qs, D(s(e).resultsDisplayValue), 1)
               ])
             ]),
             d("tbody", null, [
-              (a(!0), i(w, null, A(s(e).resultData, (r, l) => (a(), b(s(c), {
+              (a(!0), i(f, null, V(s(e).resultData, (r, l) => (a(), b(s(c), {
                 is: "survey-results-table-row",
                 model: r,
                 key: l
@@ -819,14 +834,14 @@ const cs = {
       ])
     ])) : p("", !0);
   }
-}), qs = { key: 2 }, $s = /* @__PURE__ */ g({
+}), ks = { key: 2 }, fs = /* @__PURE__ */ g({
   __name: "SurveyResultsRow",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i(w, null, [
+    return w(() => t.model), (e, o) => (a(), i(f, null, [
       h((a(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
@@ -850,39 +865,39 @@ const cs = {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (a(), i("span", qs, T(e.model.title), 1))
+          }, null, 8, ["locString"])) : (a(), i("span", ks, D(e.model.title), 1))
         ], 4),
         d("td", {
           class: m({
             "svd-test-results__node-value": e.model.isNode,
             "svd-dark-border-color": !e.model.isNode
           })
-        }, T(e.model.getString(e.model.displayValue)), 3)
+        }, D(e.model.getString(e.model.displayValue)), 3)
       ])), [
         [s(M)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (a(!0), i(w, { key: 0 }, A(e.model.data, (n, r) => (a(), b(s(c), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), i(f, { key: 0 }, V(e.model.data, (n, r) => (a(), b(s(c), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
-}), ks = { class: "svc-creator-tab__content" }, fs = { class: "svc-json-editor-tab__content" }, ws = { class: "svc-json-editor-tab__errros_list" }, Ts = /* @__PURE__ */ g({
+}), ws = { class: "svc-creator-tab__content" }, Ds = { class: "svc-json-editor-tab__content" }, Ts = { class: "svc-json-editor-tab__errros_list" }, Ns = /* @__PURE__ */ g({
   __name: "JsonEditorAce",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = P();
-    return f(() => t.model), R(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", ks, [
-      d("div", fs, [
+    return w(() => t.model), R(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", ws, [
+      d("div", Ds, [
         d("div", {
           class: "svc-json-editor-tab__ace-editor",
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        h(d("div", ws, [
+        h(d("div", Ts, [
           v(s(c), {
             is: "sv-list",
             model: o.model.errorList
@@ -893,18 +908,18 @@ const cs = {
       ])
     ]));
   }
-}), Ds = { class: "svc-creator-tab__content" }, Ns = { class: "svc-json-editor-tab__content" }, Ms = ["aria-label", "disabled"], Ss = { class: "svc-json-editor-tab__errros_list" }, Bs = /* @__PURE__ */ g({
+}), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Bs = ["aria-label", "disabled"], Is = { class: "svc-json-editor-tab__errros_list" }, Es = /* @__PURE__ */ g({
   __name: "JsonEditorTextArea",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = P(), o = t.model;
-    return o.canShowErrors = !1, f(() => t.model), R(() => {
+    return o.canShowErrors = !1, w(() => t.model), R(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (a(), i("div", Ds, [
-      d("div", Ns, [
+    }), (n, r) => (a(), i("div", Ms, [
+      d("div", Ss, [
         h(d("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
@@ -914,10 +929,10 @@ const cs = {
           ref_key: "inputEl",
           ref: e
         }, `
-      `, 40, Ms), [
+      `, 40, Bs), [
           [de, s(o).text]
         ]),
-        h(d("div", Ss, [
+        h(d("div", Is, [
           v(s(c), {
             is: "sv-list",
             model: s(o).errorList
@@ -928,26 +943,26 @@ const cs = {
       ])
     ]));
   }
-}), Is = { class: "svc-json-error__container" }, Es = { class: "svc-json-error__title" }, Ps = ["title", "aria-label"], Rs = /* @__PURE__ */ g({
+}), Ps = { class: "svc-json-error__container" }, Rs = { class: "svc-json-error__title" }, Vs = ["title", "aria-label"], As = /* @__PURE__ */ g({
   __name: "JsonEditorErrorItem",
   props: {
     item: {}
   },
   setup(u) {
     const t = u;
-    f(() => t.item);
+    w(() => t.item);
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
-    return (o, n) => (a(), i(w, null, [
+    return (o, n) => (a(), i(f, null, [
       v(s(c), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
         class: m("svc-json-error__icon")
       }, null, 8, ["iconName", "size"]),
-      d("div", Is, [
-        d("div", Es, [
+      d("div", Ps, [
+        d("div", Rs, [
           v(s(c), {
             is: "survey-string",
             locString: o.item.locTitle
@@ -966,20 +981,20 @@ const cs = {
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 8, Ps)), [
+        ], 8, Vs)), [
           [s(M)]
         ]) : p("", !0)
       ])
     ], 64));
   }
-}), Vs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
+}), zs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    f(() => t.model);
+    w(() => t.model);
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
@@ -990,26 +1005,26 @@ const cs = {
       }]),
       onClick: e
     }, [
-      d("span", Vs, T(o.model.title), 1)
+      d("span", zs, D(o.model.title), 1)
     ], 2)), [
       [s(M)]
     ]);
   }
-}), As = { class: "svc-creator-tab__content" }, zs = {
+}), Ls = { class: "svc-creator-tab__content" }, Fs = {
   key: 1,
   class: "svc-logic-tab__content-empty"
-}, Ls = /* @__PURE__ */ g({
+}, Ks = /* @__PURE__ */ g({
   __name: "Logic",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", As, [
+    return w(() => t.model), (e, o) => (a(), i("div", Ls, [
       d("div", {
         class: m(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
-        e.model.hasItems ? (a(), i(w, { key: 0 }, [
+        e.model.hasItems ? (a(), i(f, { key: 0 }, [
           v(s(O), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
@@ -1018,7 +1033,7 @@ const cs = {
             model: e.model.addNewButton
           }, null, 8, ["model"]))
         ], 64)) : p("", !0),
-        e.model.hasItems ? p("", !0) : (a(), i("div", zs, [
+        e.model.hasItems ? p("", !0) : (a(), i("div", Fs, [
           v(j, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
@@ -1032,13 +1047,13 @@ const cs = {
       ], 2)
     ]));
   }
-}), Fs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Ks = ["id"];
+}), Us = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Hs = ["id"];
 ue.Instance.registerRenderer(
   "dropdown",
   "logicoperator",
   "sv-logic-operator"
 );
-const Us = /* @__PURE__ */ g({
+const Qs = /* @__PURE__ */ g({
   __name: "LogicOperator",
   props: {
     question: {}
@@ -1058,7 +1073,7 @@ const Us = /* @__PURE__ */ g({
     return (l, _) => (a(), i("div", {
       class: m(l.question.cssClasses.selectWrapper)
     }, [
-      l.question.isReadOnly ? p("", !0) : (a(), i(w, { key: 0 }, [
+      l.question.isReadOnly ? p("", !0) : (a(), i(f, { key: 0 }, [
         d("div", {
           class: m(l.question.getControlClass()),
           onClick: n,
@@ -1085,7 +1100,7 @@ const Us = /* @__PURE__ */ g({
               locString: l.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2)
-        ], 42, Fs),
+        ], 42, Us),
         v(s(c), {
           is: "sv-popup",
           model: l.question.popupModel
@@ -1102,10 +1117,10 @@ const Us = /* @__PURE__ */ g({
           is: "survey-string",
           locString: l.question.locReadOnlyText
         }, null, 8, ["locString"])) : p("", !0)
-      ], 10, Ks)) : p("", !0)
+      ], 10, Hs)) : p("", !0)
     ], 2));
   }
-}), Hs = /* @__PURE__ */ g({
+}), Os = /* @__PURE__ */ g({
   __name: "EmbeddedSurvey",
   props: {
     question: {}
@@ -1121,7 +1136,7 @@ const Us = /* @__PURE__ */ g({
       survey: o.value
     }, null, 8, ["page", "survey"])) : p("", !0);
   }
-}), Qs = /* @__PURE__ */ g({
+}), Ws = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "LinkValue",
   props: {
@@ -1129,7 +1144,7 @@ const Us = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u, e = P(), o = ce.getString("pe.clear");
-    return Q(t, e), (n, r) => (a(), i(w, null, [
+    return Q(t, e), (n, r) => (a(), i(f, null, [
       v(s(c), {
         is: "svc-action-button",
         text: n.question.linkValueText,
@@ -1150,17 +1165,17 @@ const Us = /* @__PURE__ */ g({
       }, null, 8, ["text", "click", "classes"])) : p("", !0)
     ], 64));
   }
-}), Os = {
+}), Gs = {
   key: 1,
   class: "st-content"
-}, Gs = { class: "svc-flex-column st-strings-wrapper" }, Ws = { class: "svc-flex-row st-strings-header" }, js = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Js = /* @__PURE__ */ g({
+}, js = { class: "svc-flex-column st-strings-wrapper" }, Js = { class: "svc-flex-row st-strings-header" }, Zs = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, Xs = /* @__PURE__ */ g({
   __name: "Translation",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
       e.model.isEmpty ? (a(), b(j, {
@@ -1169,14 +1184,14 @@ const Us = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.isEmpty ? p("", !0) : (a(), i("div", Os, [
-        d("div", Gs, [
-          d("div", Ws, [
+      e.model.isEmpty ? p("", !0) : (a(), i("div", Gs, [
+        d("div", js, [
+          d("div", Js, [
             v(s(O), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
-          d("div", js, [
+          d("div", Zs, [
             v(s(O), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
@@ -1185,16 +1200,16 @@ const Us = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), Zs = (u, t) => {
+}), Ys = (u, t) => {
   const e = u.__vccOpts || u;
   for (const [o, n] of t)
     e[o] = n;
   return e;
-}, Xs = {}, Ys = { class: "sd-translation-line-skeleton" };
-function xs(u, t) {
-  return a(), i("div", Ys);
+}, xs = {}, et = { class: "sd-translation-line-skeleton" };
+function ot(u, t) {
+  return a(), i("div", et);
 }
-const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
+const st = /* @__PURE__ */ Ys(xs, [["render", ot]]), tt = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
   props: {
     item: {}
@@ -1205,27 +1220,27 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
     }, [
       d("span", {
         class: m(t.item.data.additionalTitleCss)
-      }, T(t.item.data.additionalTitle), 3),
+      }, D(t.item.data.additionalTitle), 3),
       v(s(c), {
         is: "sv-action-bar-item-dropdown",
         item: t.item
       }, null, 8, ["item"])
     ], 2));
   }
-}), st = {
+}), nt = {
   key: 1,
   class: "svc-plugin-tab__content"
-}, tt = {
+}, at = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, nt = /* @__PURE__ */ g({
+}, lt = /* @__PURE__ */ g({
   __name: "Theme",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
@@ -1236,7 +1251,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", st, [
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", nt, [
         v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
@@ -1247,7 +1262,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (a(), i("div", tt, [
+      e.model.isPageToolbarVisible ? (a(), i("div", at, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -1255,7 +1270,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 2));
   }
-}), at = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], lt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], it = /* @__PURE__ */ g({
+}), it = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], rt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], dt = /* @__PURE__ */ g({
   __name: "Color",
   props: {
     question: {}
@@ -1288,7 +1303,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
           "aria-label": e.question.a11y_input_ariaLabel,
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy
-        }, null, 42, at)
+        }, null, 42, it)
       ], 6),
       d("input", {
         autocomplete: "off",
@@ -1310,8 +1325,8 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: m(e.question.cssClasses.control)
-      }, null, 42, lt),
-      e.question.showDropdownAction ? (a(), i(w, { key: 0 }, [
+      }, null, 42, rt),
+      e.question.showDropdownAction ? (a(), i(f, { key: 0 }, [
         d("div", {
           "aria-hidden": "true",
           class: m(e.question.cssClasses.choicesButtonWrapper)
@@ -1328,7 +1343,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
       ], 64)) : p("", !0)
     ], 34));
   }
-}), rt = /* @__PURE__ */ g({
+}), ct = /* @__PURE__ */ g({
   __name: "ColorItem",
   props: {
     model: {},
@@ -1336,9 +1351,9 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    f(() => t.item);
+    w(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
-    return (o, n) => (a(), i(w, null, [
+    return (o, n) => (a(), i(f, null, [
       d("span", {
         class: "spg-color-editor__color-swatch",
         style: F(e())
@@ -1349,7 +1364,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
       }, null, 8, ["locString"])
     ], 64));
   }
-}), dt = ["disabled", "value", "placeholder"], ct = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], ut = ["title", "disabled"], pt = ["for", "aria-label"], vt = /* @__PURE__ */ g({
+}), ut = ["disabled", "value", "placeholder"], pt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], vt = ["title", "disabled"], mt = ["for", "aria-label"], _t = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
@@ -1381,7 +1396,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         onBlur: n[1] || (n[1] = //@ts-ignore
         (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
-      }, null, 42, dt),
+      }, null, 42, ut),
       d("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
@@ -1397,7 +1412,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         accept: o.question.acceptedTypes,
         onChange: n[2] || (n[2] = //@ts-ignore
         (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
-      }, null, 42, ct),
+      }, null, 42, pt),
       d("div", {
         class: m(o.question.cssClasses.buttonsContainer)
       }, [
@@ -1413,7 +1428,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
             iconName: o.question.cssClasses.clearButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, ut)), [
+        ], 10, vt)), [
           [s(M)]
         ]),
         h((a(), i("label", {
@@ -1429,13 +1444,13 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
             size: "auto",
             title: o.question.chooseButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, pt)), [
+        ], 10, mt)), [
           [s(M)]
         ])
       ], 2)
     ], 34));
   }
-}), mt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], _t = ["disabled"], gt = ["disabled"], bt = /* @__PURE__ */ g({
+}), gt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], bt = ["disabled"], yt = ["disabled"], ht = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
@@ -1472,7 +1487,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: m(e.question.cssClasses.control)
-      }, null, 42, mt),
+      }, null, 42, gt),
       d("span", {
         class: m(e.question.cssClasses.buttonsContainer)
       }, [
@@ -1499,7 +1514,7 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, _t),
+        ], 42, bt),
         d("button", {
           "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
@@ -1523,18 +1538,18 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, gt)
+        ], 42, yt)
       ], 2)
     ], 34));
   }
-}), yt = ["disabled", "title"], ne = /* @__PURE__ */ g({
+}), Ct = ["disabled", "title"], ne = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
   },
   setup(u) {
     const t = u, e = () => "survey-" + t.question.wrappedQuestionTemplate;
-    return Q(t, P()), f(() => {
+    return Q(t, P()), w(() => {
       var o;
       return (o = t.question) == null ? void 0 : o.resetValueAdorner;
     }), (o, n) => (a(), i("div", {
@@ -1556,23 +1571,23 @@ const et = /* @__PURE__ */ Zs(Xs, [["render", xs]]), ot = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, yt)
+      ], 10, Ct)
     ], 2));
   }
-}), ht = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], Ct = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
+}), qt = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], $t = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
-], -1), qt = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
+], -1), kt = /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ d("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
-], -1), $t = [
-  Ct,
-  qt
-], kt = { class: "spg-boolean-switch__caption" }, ft = ["id"];
+], -1), ft = [
+  $t,
+  kt
+], wt = { class: "spg-boolean-switch__caption" }, Dt = ["id"];
 ue.Instance.registerRenderer(
   "boolean",
   "switch",
   "sv-boolean-switch"
 );
-const wt = /* @__PURE__ */ g({
+const Tt = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -1604,10 +1619,10 @@ const wt = /* @__PURE__ */ g({
       h((a(), i("div", {
         class: m(["spg-boolean-switch__button", n.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
-      }, $t, 2)), [
+      }, ft, 2)), [
         [s(M), { disableTabStop: !0 }]
       ]),
-      d("div", kt, [
+      d("div", wt, [
         d("div", {
           class: "spg-boolean-switch__title",
           id: n.question.labelRenderedAriaID
@@ -1616,14 +1631,14 @@ const wt = /* @__PURE__ */ g({
             is: "survey-string",
             locString: n.question.locTitle
           }, null, 8, ["locString"])
-        ], 8, ft)
+        ], 8, Dt)
       ])
-    ], 8, ht));
+    ], 8, qt));
   }
-}), Tt = { class: "svc-string-editor__content" }, Dt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Nt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Mt = { class: "svc-string-editor__input" }, St = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], Bt = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], It = {
+}), Nt = { class: "svc-string-editor__content" }, Mt = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), St = /* @__PURE__ */ d("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Bt = { class: "svc-string-editor__input" }, It = ["textContent", "aria-placeholder", "aria-label", "contenteditable", "tabindex"], Et = ["aria-placeholder", "aria-label", "contenteditable", "tabindex", "innerHTML"], Pt = {
   key: 0,
   class: "svc-string-editor__error"
-}, Et = /* @__PURE__ */ g({
+}, Rt = /* @__PURE__ */ g({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -1669,23 +1684,23 @@ const wt = /* @__PURE__ */ g({
         return (y = l.value) == null ? void 0 : y.getCharacterCounterClass;
       }
     ), J = (y) => {
-      var D, E;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (D = l.value) == null || D.onBlur(y), (E = l.value) == null ? void 0 : E.errorText;
+      var T, E;
+      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = l.value) == null || T.onBlur(y), (E = l.value) == null ? void 0 : E.errorText;
     }, U = (y) => {
-      var D;
-      (D = l.value) == null || D.onFocus(y);
+      var T;
+      (T = l.value) == null || T.onFocus(y);
     }, ve = (y) => {
-      var D;
-      (D = l.value) == null || D.onPaste(y);
+      var T;
+      (T = l.value) == null || T.onPaste(y);
     }, se = (y) => {
-      var D, E;
-      (D = n.value) == null || D.focus(), e.value.__isEditing = !0, (E = l.value) == null || E.onClick(y);
+      var T, E;
+      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (E = l.value) == null || E.onClick(y);
     }, Z = () => {
       r.value = e.value.renderedHtml;
-    }, me = W(
+    }, me = G(
       () => e.value,
-      (y, D) => {
-        D && y.onStringChanged.remove(Z), y && (y.onStringChanged.add(Z), Z());
+      (y, T) => {
+        T && y.onStringChanged.remove(Z), y && (y.onStringChanged.add(Z), Z());
       },
       {
         immediate: !0
@@ -1696,13 +1711,13 @@ const wt = /* @__PURE__ */ g({
       e.value.__isEditing && ((y = n.value) == null || y.focus());
     }), K(() => {
       me(), e.value.onStringChanged.remove(Z);
-    }), (y, D) => (a(), i("span", {
+    }), (y, T) => (a(), i("span", {
       class: m(N.value)
     }, [
-      d("span", Tt, [
-        Dt,
-        Nt,
-        d("span", Mt, [
+      d("span", Nt, [
+        Mt,
+        St,
+        d("span", Bt, [
           e.value.hasHtml ? p("", !0) : (a(), i("span", {
             key: 0,
             role: "textbox",
@@ -1711,37 +1726,37 @@ const wt = /* @__PURE__ */ g({
             onFocus: U,
             onPaste: ve,
             onBlur: J,
-            onInput: D[0] || (D[0] = //@ts-ignore
+            onInput: T[0] || (T[0] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onInput) && ((B = s(l)) == null ? void 0 : B.onInput(...E));
             }),
-            onBeforeinput: D[1] || (D[1] = //@ts-ignore
+            onBeforeinput: T[1] || (T[1] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onBeforeInput) && ((B = s(l)) == null ? void 0 : B.onBeforeInput(...E));
             }),
-            onKeydown: D[2] || (D[2] = //@ts-ignore
+            onKeydown: T[2] || (T[2] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
             }),
-            onKeyup: D[3] || (D[3] = //@ts-ignore
+            onKeyup: T[3] || (T[3] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
             }),
-            onCompositionstart: D[4] || (D[4] = //@ts-ignore
+            onCompositionstart: T[4] || (T[4] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
             }),
-            onCompositionend: D[5] || (D[5] = //@ts-ignore
+            onCompositionend: T[5] || (T[5] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
             }),
-            onMouseup: D[6] || (D[6] = //@ts-ignore
+            onMouseup: T[6] || (T[6] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
@@ -1754,7 +1769,7 @@ const wt = /* @__PURE__ */ g({
             tabindex: s(l).tabIndex,
             ref_key: "root",
             ref: n
-          }, null, 40, St)),
+          }, null, 40, It)),
           e.value.hasHtml ? (a(), i("span", {
             key: 1,
             role: "textbox",
@@ -1762,27 +1777,27 @@ const wt = /* @__PURE__ */ g({
             spellcheck: "false",
             onFocus: U,
             onBlur: J,
-            onKeydown: D[7] || (D[7] = //@ts-ignore
+            onKeydown: T[7] || (T[7] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onKeyDown) && ((B = s(l)) == null ? void 0 : B.onKeyDown(...E));
             }),
-            onKeyup: D[8] || (D[8] = //@ts-ignore
+            onKeyup: T[8] || (T[8] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onKeyUp) && ((B = s(l)) == null ? void 0 : B.onKeyUp(...E));
             }),
-            onCompositionstart: D[9] || (D[9] = //@ts-ignore
+            onCompositionstart: T[9] || (T[9] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onCompositionStart) && ((B = s(l)) == null ? void 0 : B.onCompositionStart(...E));
             }),
-            onCompositionend: D[10] || (D[10] = //@ts-ignore
+            onCompositionend: T[10] || (T[10] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onCompositionEnd) && ((B = s(l)) == null ? void 0 : B.onCompositionEnd(...E));
             }),
-            onMouseup: D[11] || (D[11] = //@ts-ignore
+            onMouseup: T[11] || (T[11] = //@ts-ignore
             (...E) => {
               var S, B;
               return ((S = s(l)) == null ? void 0 : S.onMouseUp) && ((B = s(l)) == null ? void 0 : B.onMouseUp(...E));
@@ -1795,7 +1810,7 @@ const wt = /* @__PURE__ */ g({
             innerHTML: r.value,
             ref_key: "root",
             ref: n
-          }, null, 40, Bt)) : p("", !0),
+          }, null, 40, Et)) : p("", !0),
           I.value ? (a(), b(s(c), {
             key: 2,
             is: "sv-character-counter",
@@ -1804,26 +1819,26 @@ const wt = /* @__PURE__ */ g({
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      _.value ? (a(), i("span", It, T(_.value), 1)) : p("", !0)
+      _.value ? (a(), i("span", Pt, D(_.value), 1)) : p("", !0)
     ], 2));
   }
-}), Pt = {
+}), Vt = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, Rt = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Vt = {
+}, At = /* @__PURE__ */ d("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), zt = {
   key: 1,
   class: "svc-toolbox__placeholder"
-}, At = {
+}, Lt = {
   key: 1,
   class: "svc-toolbox__category"
-}, zt = /* @__PURE__ */ g({
+}, Ft = /* @__PURE__ */ g({
   __name: "AdaptiveToolbox",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = k(() => t.model.toolbox), o = P();
-    f(() => e.value), G(() => {
+    w(() => e.value), W(() => {
       e.value.afterRender(o.value);
     }), R(() => {
       e.value.afterRender(o.value);
@@ -1841,7 +1856,7 @@ const wt = /* @__PURE__ */ g({
         onFocusout: l[0] || (l[0] = (_) => e.value.focusOut(_)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (a(), i("div", Pt, [
+        e.value.showSearch ? (a(), i("div", Vt, [
           e.value.isCompactRendered ? (a(), b(s(c), {
             is: "svc-toolbox-tool",
             creator: r.model,
@@ -1854,19 +1869,19 @@ const wt = /* @__PURE__ */ g({
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
-          Rt
+          At
         ])) : p("", !0),
-        e.value.showPlaceholder ? (a(), i("div", Vt, T(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        e.value.showPlaceholder ? (a(), i("div", zt, D(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(s(c), { is: "sv-scroll" }, {
           default: X(() => [
-            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(w, { key: 0 }, A(e.value.categories, (_, N) => (a(), b(s(c), {
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(f, { key: 0 }, V(e.value.categories, (_, N) => (a(), b(s(c), {
               is: "svc-toolbox-category",
               key: N,
               category: _,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (a(), i("div", At, [
-              (a(!0), i(w, null, A(n.value, (_) => (a(), b(s(c), {
+            e.value.showInSingleCategory ? (a(), i("div", Lt, [
+              (a(!0), i(f, null, V(n.value, (_) => (a(), b(s(c), {
                 key: _.renderedId,
                 is: "svc-toolbox-tool",
                 creator: r.model,
@@ -1881,10 +1896,10 @@ const wt = /* @__PURE__ */ g({
       ], 32)
     ], 6));
   }
-}), Lt = {
+}), Kt = {
   key: 0,
   class: "svc-toolbox__category-separator"
-}, Ft = /* @__PURE__ */ g({
+}, Ut = /* @__PURE__ */ g({
   __name: "ToolboxTool",
   props: {
     creator: {},
@@ -1912,14 +1927,14 @@ const wt = /* @__PURE__ */ g({
     }), K(() => {
       const n = t.item;
       n.updateModeCallback = void 0;
-    }), f(() => t.item), (n, r) => {
+    }), w(() => t.item), (n, r) => {
       var l;
       return a(), i("div", {
         class: m(n.item.css),
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Lt)) : p("", !0),
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Kt)) : p("", !0),
         d("div", {
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
@@ -1939,10 +1954,10 @@ const wt = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Kt = ["aria-label", "title"], Ut = { class: "svc-toolbox__item-container" }, Ht = {
+}), Ht = ["aria-label", "title"], Qt = { class: "svc-toolbox__item-container" }, Ot = {
   key: 0,
   class: "svc-toolbox__item-title"
-}, Qt = /* @__PURE__ */ g({
+}, Wt = /* @__PURE__ */ g({
   __name: "ToolboxItem",
   props: {
     creator: {},
@@ -1951,7 +1966,7 @@ const wt = /* @__PURE__ */ g({
     viewModel: {}
   },
   setup(u) {
-    return (t, e) => (a(), i(w, null, [
+    return (t, e) => (a(), i(f, null, [
       h((a(), i("div", {
         class: m(["svc-toolbox__item", t.item.renderedCss]),
         role: "button",
@@ -1959,7 +1974,7 @@ const wt = /* @__PURE__ */ g({
         title: t.item.getTooltip(),
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
-        d("span", Ut, [
+        d("span", Qt, [
           t.item.iconName ? (a(), b(s(c), {
             key: 0,
             is: "sv-svg-icon",
@@ -1968,8 +1983,8 @@ const wt = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (a(), i("span", Ht, T(t.item.title), 1))
-      ], 10, Kt)), [
+        t.isCompact ? p("", !0) : (a(), i("span", Ot, D(t.item.title), 1))
+      ], 10, Ht)), [
         [s(M), { disableTabStop: !t.viewModel.toolboxItem.enabled }]
       ]),
       t.isCompact ? (a(), i("span", {
@@ -1983,11 +1998,11 @@ const wt = /* @__PURE__ */ g({
           size: 24,
           class: "svc-toolbox__item-icon"
         }, null, 8, ["iconName"]),
-        d("span", null, T(t.item.title), 1)
+        d("span", null, D(t.item.title), 1)
       ])) : p("", !0)
     ], 64));
   }
-}), Ot = /* @__PURE__ */ g({
+}), Gt = /* @__PURE__ */ g({
   __name: "ToolboxItemGroup",
   props: {
     creator: {},
@@ -2001,7 +2016,7 @@ const wt = /* @__PURE__ */ g({
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
-    return (n, r) => (a(), i(w, null, [
+    return (n, r) => (a(), i(f, null, [
       v(s(c), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
@@ -2026,10 +2041,10 @@ const wt = /* @__PURE__ */ g({
       ], 32)
     ], 64));
   }
-}), Gt = { className: "svc-toolbox__category-header-wrapper" }, Wt = { class: "svc-toolbox__category-title" }, jt = {
+}), jt = { className: "svc-toolbox__category-header-wrapper" }, Jt = { class: "svc-toolbox__category-title" }, Zt = {
   key: 0,
   class: "svc-toolbox__category-header__controls"
-}, Jt = /* @__PURE__ */ g({
+}, Xt = /* @__PURE__ */ g({
   __name: "ToolboxCategory",
   props: {
     category: {},
@@ -2037,26 +2052,26 @@ const wt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.category), (e, o) => (a(), i("div", {
+    return w(() => t.category), (e, o) => (a(), i("div", {
       class: m(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
-      d("div", Gt, [
+      d("div", jt, [
         h((a(), i("div", {
           class: m(["svc-toolbox__category-header", {
             "svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
           }]),
           onClick: o[0] || (o[0] = (n) => e.category.toggleState())
         }, [
-          d("span", Wt, [
+          d("span", Jt, [
             v(s(c), {
               is: "survey-string",
               locString: e.category.locTitle
             }, null, 8, ["locString"])
           ]),
-          e.toolbox.canCollapseCategories ? (a(), i("div", jt, [
+          e.toolbox.canCollapseCategories ? (a(), i("div", Zt, [
             v(s(c), {
               is: "sv-svg-icon",
               iconName: e.category.iconName,
@@ -2068,7 +2083,7 @@ const wt = /* @__PURE__ */ g({
           [s(M)]
         ])
       ]),
-      (a(!0), i(w, null, A(e.category.items, (n) => (a(), b(s(c), {
+      (a(!0), i(f, null, V(e.category.items, (n) => (a(), b(s(c), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2078,7 +2093,7 @@ const wt = /* @__PURE__ */ g({
       }, null, 8, ["item", "creator", "parentModel"]))), 128))
     ], 2));
   }
-}), Zt = /* @__PURE__ */ g({
+}), Yt = /* @__PURE__ */ g({
   __name: "ToolboxList",
   props: {
     model: {},
@@ -2086,10 +2101,10 @@ const wt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (a(), i("div", {
+    return w(() => t.model), (e, o) => (a(), i("div", {
       class: m(e.model.cssClasses.root)
     }, [
-      (a(!0), i(w, null, A(e.model.renderedActions, (n, r) => (a(), b(s(c), {
+      (a(!0), i(f, null, V(e.model.renderedActions, (n, r) => (a(), b(s(c), {
         key: r,
         is: "svc-toolbox-tool",
         creator: e.creator,
@@ -2099,36 +2114,36 @@ const wt = /* @__PURE__ */ g({
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
     ], 2));
   }
-}), Xt = { class: "svc-flex-column" }, Yt = { class: "svc-tab-designer_content" }, xt = {
+}), xt = { class: "svc-flex-column" }, en = { class: "svc-tab-designer_content" }, on = {
   key: 0,
   class: "svc-designer-header"
-}, en = {
+}, sn = {
   class: "svc-designer__placeholder-container",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, on = {
+}, tn = {
   className: "svc-designer-placeholder-page",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, sn = {
+}, nn = {
   key: 0,
   class: "svc-designer-header"
-}, tn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], nn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], an = {
+}, an = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], ln = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], rn = {
   key: 0,
   class: "svc-tab-designer__tools"
-}, ln = {
+}, dn = {
   key: 0,
   class: "svc-tab-designer__page-navigator"
-}, rn = {
+}, cn = {
   key: 1,
   class: "svc-tab-designer__toolbar"
-}, dn = /* @__PURE__ */ g({
+}, un = /* @__PURE__ */ g({
   __name: "Designer",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = k(() => t.model.survey);
-    return f(() => t.model), f(() => e.value), f(() => t.model.pagesController), (o, n) => (a(), i(w, null, [
-      d("div", Xt, [
+    return w(() => t.model), w(() => e.value), w(() => t.model.pagesController), (o, n) => (a(), i(f, null, [
+      d("div", xt, [
         o.model.isToolboxVisible ? (a(), b(s(c), {
           key: 0,
           is: "svc-toolbox",
@@ -2142,21 +2157,21 @@ const wt = /* @__PURE__ */ g({
       }, [
         v(s(c), { is: "sv-scroll" }, {
           default: X(() => [
-            d("div", Yt, [
-              o.model.showPlaceholder ? (a(), i(w, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.showSurveyHeader ? (a(), i("div", xt, [
+            d("div", en, [
+              o.model.showPlaceholder ? (a(), i(f, { key: 0 }, [
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.showSurveyHeader ? (a(), i("div", on, [
                   v(s(c), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
                 ])) : p("", !0),
-                d("div", en, [
+                d("div", sn, [
                   v(j, {
                     name: "designer",
                     placeholderTitleText: o.model.placeholderTitleText,
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-                  d("div", on, [
+                  d("div", tn, [
                     v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
@@ -2167,7 +2182,7 @@ const wt = /* @__PURE__ */ g({
                   ])
                 ])
               ], 64)) : p("", !0),
-              o.model.showPlaceholder ? p("", !0) : (a(), i(w, { key: 1 }, [
+              o.model.showPlaceholder ? p("", !0) : (a(), i(f, { key: 1 }, [
                 d("div", {
                   class: m(o.model.designerCss),
                   style: F([
@@ -2175,13 +2190,13 @@ const wt = /* @__PURE__ */ g({
                     o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.showSurveyHeader ? (a(), i("div", sn, [
+                  o.model.creator.showSurveyHeader ? (a(), i("div", nn, [
                     v(s(c), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
                   ])) : p("", !0),
-                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(w, { key: 1 }, A(o.model.pages, (r) => (a(), i("div", {
+                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(f, { key: 1 }, V(o.model.pages, (r) => (a(), i("div", {
                     key: r.id,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
@@ -2194,7 +2209,7 @@ const wt = /* @__PURE__ */ g({
                       page: r,
                       isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
-                  ], 8, tn))), 128)) : p("", !0),
+                  ], 8, an))), 128)) : p("", !0),
                   o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), i("div", {
                     key: 2,
                     class: "svc-page",
@@ -2207,17 +2222,17 @@ const wt = /* @__PURE__ */ g({
                       creator: o.model.creator,
                       isGhost: o.model.pagesController.page2Display == o.model.newPage
                     }, null, 8, ["page", "creator", "isGhost"])
-                  ], 8, nn)) : p("", !0)
+                  ], 8, ln)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (a(), i("div", an, [
-                  o.model.creator.showPageNavigator ? (a(), i("div", ln, [
+                o.model.showSurfaceTools ? (a(), i("div", rn, [
+                  o.model.creator.showPageNavigator ? (a(), i("div", dn, [
                     v(s(c), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
                   ])) : p("", !0),
-                  o.model.showSurfaceToolbar ? (a(), i("div", rn, [
+                  o.model.showSurfaceToolbar ? (a(), i("div", cn, [
                     v(s(c), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
@@ -2232,16 +2247,16 @@ const wt = /* @__PURE__ */ g({
       ], 2)
     ], 64));
   }
-}), cn = ["id", "data-sv-drop-target-survey-page"], un = /* @__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), vn = {
+}), pn = ["id", "data-sv-drop-target-survey-page"], vn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), _n = {
   key: 1,
   class: "svc-page__loading-content"
-}, mn = {
+}, gn = {
   key: 2,
   class: "svc-page__placeholder_frame"
-}, _n = { class: "svc-panel__placeholder_frame" }, gn = { class: "svc-panel__placeholder" }, bn = { class: "svc-page__content-actions" }, yn = {
+}, bn = { class: "svc-panel__placeholder_frame" }, yn = { class: "svc-panel__placeholder" }, hn = { class: "svc-page__content-actions" }, Cn = {
   key: 4,
   class: "svc-page__content-actions"
-}, hn = /* @__PURE__ */ g({
+}, qn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2260,12 +2275,12 @@ const wt = /* @__PURE__ */ g({
         r.dispose();
       }
     );
-    W(
+    G(
       () => t.isGhost,
       () => {
         o.value && (o.value.isGhost = t.isGhost);
       }
-    ), G(() => {
+    ), W(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), R(() => {
       e.value && o.value && o.value.setRootElement(e.value);
@@ -2287,20 +2302,20 @@ const wt = /* @__PURE__ */ g({
       onMouseover: n,
       onMouseleave: n
     }, [
-      un,
-      pn,
+      vn,
+      mn,
       s(o).needRenderContent ? (a(), b(s(c), {
         key: 0,
         is: "sv-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"])) : p("", !0),
-      s(o).needRenderContent ? p("", !0) : (a(), i("div", vn, [
+      s(o).needRenderContent ? p("", !0) : (a(), i("div", _n, [
         v(s(c), { is: "sv-loading-indicator" })
       ])),
-      s(o).showPlaceholder ? (a(), i("div", mn, [
-        d("div", _n, [
-          d("div", gn, T(s(o).placeholderText), 1)
+      s(o).showPlaceholder ? (a(), i("div", gn, [
+        d("div", bn, [
+          d("div", yn, D(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
@@ -2308,7 +2323,7 @@ const wt = /* @__PURE__ */ g({
         class: "svc-question__drag-area",
         onPointerdown: l[0] || (l[0] = (_) => s(o).onPointerDown(_))
       }, [
-        v(s(c), V({
+        v(s(c), A({
           is: "sv-svg-icon",
           class: "svc-question__drag-element"
         }, {
@@ -2316,7 +2331,7 @@ const wt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        d("div", bn, [
+        d("div", hn, [
           v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer
@@ -2328,7 +2343,7 @@ const wt = /* @__PURE__ */ g({
           }, null, 8, ["model"])) : p("", !0)
         ])
       ], 32)) : p("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", yn, [
+      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", Cn, [
         v(s(c), {
           is: "sv-action-bar",
           model: s(o).actionContainer
@@ -2343,11 +2358,11 @@ const wt = /* @__PURE__ */ g({
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
-    ], 42, cn)), [
+    ], 42, pn)), [
       [s(M)]
     ]) : p("", !0);
   }
-}), Cn = { class: "svc-add-new-item-button__text" }, qn = /* @__PURE__ */ g({
+}), $n = { class: "svc-add-new-item-button__text" }, kn = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2356,13 +2371,13 @@ const wt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    f(() => t.item.data);
+    w(() => t.item.data);
     const e = k(
       () => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
     ), o = k(
       () => t.renderPopup === void 0 || t.renderPopup !== !1
     );
-    return (n, r) => (a(), i(w, null, [
+    return (n, r) => (a(), i(f, null, [
       h((a(), i("div", {
         class: m(e.value),
         onClick: r[0] || (r[0] = (l) => {
@@ -2376,7 +2391,7 @@ const wt = /* @__PURE__ */ g({
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        d("span", Cn, T(n.item.data.addNewQuestionText), 1),
+        d("span", $n, D(n.item.data.addNewQuestionText), 1),
         o.value ? (a(), b(s(c), {
           key: 0,
           is: "svc-add-question-type-selector",
@@ -2394,7 +2409,7 @@ const wt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), $n = ["title", "aria-label"], kn = /* @__PURE__ */ g({
+}), fn = ["title", "aria-label"], wn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2402,7 +2417,7 @@ const wt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.questionTypeSelectorModel), (e, o) => h((a(), i("button", {
+    return w(() => t.questionTypeSelectorModel), (e, o) => h((a(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2411,7 +2426,7 @@ const wt = /* @__PURE__ */ g({
       "aria-label": e.questionTypeSelectorModel.title,
       class: "svc-element__question-type-selector"
     }, [
-      v(s(c), V({
+      v(s(c), A({
         is: "sv-svg-icon",
         class: "svc-element__question-type-selector-icon"
       }, {
@@ -2424,11 +2439,11 @@ const wt = /* @__PURE__ */ g({
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
-    ], 8, $n)), [
+    ], 8, fn)), [
       [s(M)]
     ]);
   }
-}), fn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), wn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Tn = /* @__PURE__ */ g({
+}), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Tn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Nn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
@@ -2448,15 +2463,15 @@ const wt = /* @__PURE__ */ g({
     }), (r, l) => (a(), i("div", {
       class: m(s(n).cssClasses)
     }, [
-      fn,
-      wn,
+      Dn,
+      Tn,
       x(r.$slots, "default")
     ], 2));
   }
-}), Dn = ["data-sv-drop-target-survey-element"], Nn = { class: "svc-fake-title" }, Mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Sn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), En = { class: "svc-question__top-actions" }, Pn = {
+}), 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 = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, Rn = { class: "svc-panel__placeholder_frame" }, Vn = {
+}, An = { class: "svc-panel__placeholder_frame" }, zn = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2481,7 +2496,7 @@ const wt = /* @__PURE__ */ g({
     ), n = k(
       () => o.value.isBannerShowing ? o.value.createBannerParams() : null
     );
-    G(() => {
+    W(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), R(() => {
       e.value && o.value && (o.value.rootElement = e.value);
@@ -2513,7 +2528,7 @@ const wt = /* @__PURE__ */ g({
           key: 1,
           class: m(s(o).cssCollapsedHiddenTitle)
         }, [
-          d("span", Nn, T(l.element.name), 1)
+          d("span", Sn, D(l.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       h((a(), i("div", {
@@ -2522,16 +2537,16 @@ const wt = /* @__PURE__ */ g({
         }),
         class: m(s(o).css())
       }, [
-        Mn,
-        Sn,
         Bn,
         In,
+        En,
+        Pn,
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: _[0] || (_[0] = (N) => s(o).onPointerDown(N))
         }, [
-          v(s(c), V({
+          v(s(c), A({
             is: "sv-svg-icon",
             class: "svc-question__drag-element"
           }, {
@@ -2539,7 +2554,7 @@ const wt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          d("div", En, [
+          d("div", Rn, [
             v(s(c), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
@@ -2547,18 +2562,18 @@ const wt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(o).needToRenderContent ? (a(), i(w, { key: 1 }, [
+        s(o).needToRenderContent ? (a(), i(f, { key: 1 }, [
           v(s(c), {
             is: "sv-template-renderer",
             componentName: l.componentName,
             componentData: l.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", Pn, [
-            d("div", Rn, [
-              d("div", Vn, T(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !l.showPlaceholderComponent ? (a(), i("div", Vn, [
+            d("div", An, [
+              d("div", zn, D(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), b(s(c), V(
+          s(o).isEmptyElement && l.showPlaceholderComponent ? (a(), b(s(c), A(
             {
               key: 1,
               is: l.placeholderComponent
@@ -2590,7 +2605,7 @@ const wt = /* @__PURE__ */ g({
       ], 2)), [
         [s(M), { disableTabStop: !0 }]
       ])
-    ], 42, Dn)) : p("", !0);
+    ], 42, Mn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2611,7 +2626,7 @@ const wt = /* @__PURE__ */ g({
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), An = /* @__PURE__ */ g({
+}), Ln = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
@@ -2636,34 +2651,34 @@ const wt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), zn = {
+}), Fn = {
   key: 0,
   class: "svc-image-question-controls"
-}, Ln = ["accept"], Fn = {
+}, Kn = ["accept"], Un = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, Kn = {
+}, Hn = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, Un = { class: "svc-image-question__loading" }, Hn = /* @__PURE__ */ g({
+}, Qn = { class: "svc-image-question__loading" }, On = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
     element: {}
   },
   setup(u) {
-    return (t, e) => (a(), i(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", zn, [
-        t.model.allowEdit ? (a(), i(w, { key: 0 }, [
+    return (t, e) => (a(), i(f, null, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Fn, [
+        t.model.allowEdit ? (a(), i(f, { key: 0 }, [
           d("input", {
             type: "file",
             "aria-hidden": "true",
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Ln),
-          h((a(), i("span", Fn, [
+          }, null, 8, Kn),
+          h((a(), i("span", Un, [
             v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
@@ -2675,14 +2690,14 @@ const wt = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Kn, [
-        d("div", Un, [
+      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Hn, [
+        d("div", Qn, [
           v(s(c), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Qn = { class: "svc-rating-question-content" }, On = ["aria-label"], Gn = ["aria-label"], Wn = /* @__PURE__ */ g({
+}), Wn = { class: "svc-rating-question-content" }, Gn = ["aria-label"], jn = ["aria-label"], Jn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2699,7 +2714,7 @@ const wt = /* @__PURE__ */ g({
     );
     return (o, n) => {
       var r, l, _, N, $, q, C, I, L;
-      return a(), i("div", Qn, [
+      return a(), i("div", Wn, [
         d("div", {
           class: m((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
@@ -2719,7 +2734,7 @@ const wt = /* @__PURE__ */ g({
               size: "auto",
               title: ($ = s(e)) == null ? void 0 : $.removeTooltip
             }, null, 8, ["title"])
-          ], 10, On)), [
+          ], 10, Gn)), [
             [s(M)]
           ]) : p("", !0),
           (q = s(e)) != null && q.allowAdd ? h((a(), i("span", {
@@ -2738,7 +2753,7 @@ const wt = /* @__PURE__ */ g({
               size: "auto",
               title: (L = s(e)) == null ? void 0 : L.addTooltip
             }, null, 8, ["title"])
-          ], 10, Gn)), [
+          ], 10, jn)), [
             [s(M)]
           ]) : p("", !0)
         ], 2),
@@ -2746,10 +2761,10 @@ const wt = /* @__PURE__ */ g({
       ]);
     };
   }
-}), jn = {
+}), Zn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, Jn = /* @__PURE__ */ g({
+}, Xn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
@@ -2760,7 +2775,7 @@ const wt = /* @__PURE__ */ g({
     ), _ = z(
       () => {
         var N;
-        return t.componentData ? new Te(
+        return t.componentData ? new De(
           e.value,
           r.value,
           l.value,
@@ -2797,7 +2812,7 @@ const wt = /* @__PURE__ */ g({
           class: m(["svc-matrix-cell--selected", { "svc-visible": (q = s(_)) == null ? void 0 : q.isSelected }])
         }, null, 2),
         x(N.$slots, "default"),
-        (C = s(_)) != null && C.isSupportCellEditor ? (a(), i("div", jn, [
+        (C = s(_)) != null && C.isSupportCellEditor ? (a(), i("div", Zn, [
           h((a(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: $[0] || ($[0] = (I) => s(_).editQuestion(s(_), I))
@@ -2814,7 +2829,7 @@ const wt = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), Zn = { class: "svc-question__adorner" }, Xn = { class: "svc-question__content svc-question__content--in-popup" }, Yn = /* @__PURE__ */ g({
+}), Yn = { class: "svc-question__adorner" }, xn = { class: "svc-question__content svc-question__content--in-popup" }, ea = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
@@ -2824,19 +2839,19 @@ const wt = /* @__PURE__ */ g({
     const t = u, e = k(
       () => t.componentData.element
     );
-    return f(() => e.value), (o, n) => (a(), i("div", Zn, [
-      d("div", Xn, [
-        v(s(c), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
+    return w(() => e.value), (o, n) => (a(), i("div", Yn, [
+      d("div", xn, [
+        v(s(c), 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 = {
+}), oa = ["data-sv-drop-target-survey-element"], sa = { class: "svc-fake-title" }, ta = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), aa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), la = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ia = { class: "svc-question__top-actions" }, ra = {
   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 = {
+}, da = { class: "svc-panel__placeholder_frame" }, ca = { class: "svc-panel__placeholder" }, ua = { class: "svc-add-new-item-button__text" }, pa = {
   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({
+}, va = { class: "svc-panel__question-type-selector-popup" }, ma = { class: "svc-panel__add-new-question-wrapper" }, _a = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2878,17 +2893,17 @@ const wt = /* @__PURE__ */ g({
           key: 1,
           class: m(s(e).cssCollapsedHiddenTitle)
         }, [
-          d("span", ea, T(s(e).element.name), 1)
+          d("span", sa, D(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       h((a(), i("div", {
         class: m(s(e).css()),
         onClick: r[2] || (r[2] = (l) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), l) : null)
       }, [
-        oa,
-        sa,
         ta,
         na,
+        aa,
+        la,
         s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -2900,7 +2915,7 @@ const wt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          d("div", aa, [
+          d("div", ia, [
             v(s(c), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
@@ -2908,11 +2923,11 @@ const wt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(e).needToRenderContent ? (a(), i(w, { key: 1 }, [
-          v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (a(), i("div", la, [
-            d("div", ia, [
-              d("div", ra, T(s(e).placeholderText), 1),
+        s(e).needToRenderContent ? (a(), i(f, { key: 1 }, [
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+          s(e).isEmptyElement ? (a(), i("div", ra, [
+            d("div", da, [
+              d("div", ca, D(s(e).placeholderText), 1),
               s(e).showAddQuestionButton ? h((a(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
@@ -2924,20 +2939,20 @@ const wt = /* @__PURE__ */ g({
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                d("span", da, T(s(e).addNewQuestionText), 1)
+                d("span", ua, D(s(e).addNewQuestionText), 1)
               ])), [
                 [s(M)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", ca, [
-            d("div", ua, [
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", pa, [
+            d("div", va, [
               v(s(c), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            d("div", pa, [
+            d("div", ma, [
               v(s(c), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
@@ -2961,22 +2976,22 @@ const wt = /* @__PURE__ */ g({
       ], 2)), [
         [s(M), { disableTabStop: !0 }]
       ])
-    ], 42, xn)) : p("", !0);
+    ], 42, oa)) : 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 = {
+}), ga = ["data-sv-drop-target-item-value"], ba = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ya = { class: "svc-item-value-controls" }, ha = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, ya = ["aria-label"], ha = ["aria-label"], Ca = {
+}, Ca = ["aria-label"], qa = ["aria-label"], $a = {
   key: 0,
   class: "svc-item-value-controls svc-choice-elements-button-container"
-}, qa = /* @__PURE__ */ g({
+}, ka = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const t = P(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), l = W(
+    const t = P(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), l = G(
       () => r.value,
       (q, C) => {
         q && t.value && q.setRootElement(t.value), C && C.setRootElement(void 0);
@@ -2988,7 +3003,7 @@ const wt = /* @__PURE__ */ g({
       r.value.setRootElement(void 0);
     });
     const _ = z(
-      () => new De(o.value, n.value, r.value),
+      () => new Te(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
       (q) => {
         q.dispose();
@@ -3016,7 +3031,7 @@ const wt = /* @__PURE__ */ g({
         }
       };
     };
-    return (q, C) => (a(), i(w, null, [
+    return (q, C) => (a(), i(f, null, [
       d("div", {
         class: m(["svc-item-value-wrapper", {
           "svc-item-value--new": s(_).isNew,
@@ -3030,9 +3045,9 @@ const wt = /* @__PURE__ */ g({
         ref_key: "root",
         ref: t
       }, [
-        _a,
-        d("div", ga, [
-          s(_).isDraggable ? (a(), i("span", ba, [
+        ba,
+        d("div", ya, [
+          s(_).isDraggable ? (a(), i("span", ha, [
             v(s(c), {
               is: "sv-svg-icon",
               class: "svc-item-value-controls__drag-icon",
@@ -3054,7 +3069,7 @@ const wt = /* @__PURE__ */ g({
               size: "auto",
               title: s(_).tooltip
             }, null, 8, ["title"])
-          ], 8, ya)), [
+          ], 8, Ca)), [
             [s(M)]
           ]) : p("", !0),
           s(_).allowRemove ? h((a(), i("span", {
@@ -3071,7 +3086,7 @@ const wt = /* @__PURE__ */ g({
               size: "auto",
               title: s(_).tooltip
             }, null, 8, ["title"])
-          ], 40, ha)), [
+          ], 40, qa)), [
             [s(M)]
           ]) : p("", !0)
         ]),
@@ -3079,9 +3094,9 @@ const wt = /* @__PURE__ */ g({
           class: "svc-item-value__item",
           onClick: C[3] || (C[3] = (I) => s(_).select(s(_), I))
         }, [
-          v(s(c), V({ is: q.componentName }, q.componentData), null, 16, ["is"])
+          v(s(c), A({ is: q.componentName }, q.componentData), null, 16, ["is"])
         ]),
-        s(_).canShowPanel() ? (a(), i("div", Ca, [
+        s(_).canShowPanel() ? (a(), i("div", $a, [
           h((a(), i("span", {
             role: "button",
             class: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button",
@@ -3096,26 +3111,26 @@ const wt = /* @__PURE__ */ g({
             [s(M)]
           ])
         ])) : p("", !0)
-      ], 42, ma),
-      s(_).showPanel ? (a(), b(s(c), V({
+      ], 42, ga),
+      s(_).showPanel ? (a(), b(s(c), A({
         key: 0,
         is: N(r.value.panel)
       }, $(r.value.panel)), null, 16, ["is"])) : p("", !0)
     ], 64));
   }
-}), $a = ["data-sv-drop-target-item-value"], ka = { class: "svc-image-item-value-wrapper__content" }, fa = ["accept"], wa = {
+}), fa = ["data-sv-drop-target-item-value"], wa = { class: "svc-image-item-value-wrapper__content" }, Da = ["accept"], Ta = {
   key: 0,
   class: "svc-image-item-value__item"
-}, Ta = {
+}, Na = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, Da = { class: "svc-image-item-value__item" }, Na = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ma = { class: "sd-imagepicker__label" }, Sa = {
+}, 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"
-}, Ba = {
+}, Ea = {
   key: 0,
   class: "svc-image-item-value__placeholder"
-}, Ia = { key: 1 }, Ea = /* @__PURE__ */ g({
+}, Pa = { key: 1 }, Ra = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
@@ -3164,17 +3179,17 @@ const wt = /* @__PURE__ */ g({
         class: "svc-image-item-value-wrapper__ghost",
         style: F(N.value)
       }, null, 4),
-      d("div", ka, [
+      d("div", wa, [
         d("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(l).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, fa),
-        !s(l).isNew && !s(l).isUploading ? (a(), i(w, { key: 0 }, [
-          s(l).isNew ? p("", !0) : (a(), i("div", wa, [
-            v(s(c), V({ is: $.componentName }, $.componentData), null, 16, ["is"])
+        }, null, 8, Da),
+        !s(l).isNew && !s(l).isUploading ? (a(), i(f, { key: 0 }, [
+          s(l).isNew ? p("", !0) : (a(), i("div", Ta, [
+            v(s(c), A({ is: $.componentName }, $.componentData), null, 16, ["is"])
           ])),
           s(l).isDraggable && s(l).canRenderControls ? (a(), i("span", {
             key: 1,
@@ -3189,7 +3204,7 @@ const wt = /* @__PURE__ */ g({
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(l).canRenderControls ? (a(), i("div", Ta, [
+          s(l).canRenderControls ? (a(), i("div", Na, [
             h((a(), i("span", {
               class: "svc-context-button",
               onClick: q[1] || (q[1] = (C) => s(l).chooseFile(s(l))),
@@ -3223,15 +3238,15 @@ const wt = /* @__PURE__ */ g({
               [s(M)]
             ])
           ])) : p("", !0)
-        ], 64)) : (a(), i(w, { key: 1 }, [
-          d("div", Da, [
-            d("div", Na, [
-              d("label", Ma, [
+        ], 64)) : (a(), i(f, { key: 1 }, [
+          d("div", Ma, [
+            d("div", Sa, [
+              d("label", Ba, [
                 d("div", {
                   style: F(N.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(l).isUploading ? (a(), i("div", Sa, [
+                  s(l).isUploading ? (a(), i("div", Ia, [
                     v(s(c), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
@@ -3243,7 +3258,7 @@ const wt = /* @__PURE__ */ g({
             class: "svc-image-item-value-controls",
             onPointerdown: q[4] || (q[4] = (C) => C.stopPropagation())
           }, [
-            s(l).showPlaceholder ? (a(), i("span", Ba, T(s(l).placeholderText), 1)) : p("", !0),
+            s(l).showPlaceholder ? (a(), i("span", Ea, D(s(l).placeholderText), 1)) : p("", !0),
             h((a(), i("span", {
               class: m(s(l).addButtonCss),
               onClick: q[3] || (q[3] = (C) => s(l).chooseNewFile(s(l)))
@@ -3254,16 +3269,16 @@ const wt = /* @__PURE__ */ g({
                 iconName: "icon-add-lg",
                 size: "auto",
                 title: s(l).addFileTitle
-              }, null, 8, ["title"])) : (a(), i("span", Ia, T(s(l).chooseImageText), 1))
+              }, null, 8, ["title"])) : (a(), i("span", Pa, D(s(l).chooseImageText), 1))
             ], 2)), [
               [s(M)]
             ])
           ], 32)) : p("", !0)
         ], 64))
       ])
-    ], 42, $a));
+    ], 42, fa));
   }
-}), Pa = /* @__PURE__ */ g({
+}), Va = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
@@ -3295,17 +3310,17 @@ const wt = /* @__PURE__ */ g({
     return (r, l) => (a(), i("div", {
       style: F(t.style)
     }, [
-      v(s(c), V({ is: o.value }, n.value), null, 16, ["is"])
+      v(s(c), A({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Ra = ["accept"], Va = /* @__PURE__ */ d("svg", null, [
+}), Aa = ["accept"], za = /* @__PURE__ */ d("svg", null, [
   /* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Aa = [
-  Va
-], za = { class: "svc-context-container svc-logo-image-controls" }, La = {
+], -1), La = [
+  za
+], Fa = { class: "svc-context-container svc-logo-image-controls" }, Ka = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Fa = /* @__PURE__ */ g({
+}, Ua = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
@@ -3317,7 +3332,7 @@ const wt = /* @__PURE__ */ g({
     ), l = P(), _ = () => {
       l.value = o.value.locLogo.renderedHtml;
     };
-    return W(
+    return G(
       () => o.value.locLogo,
       (N, $) => {
         _(), N && N.onStringChanged.add(_), $ && N.onStringChanged.remove(_);
@@ -3340,13 +3355,13 @@ const wt = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Ra),
-      l.value ? p("", !0) : (a(), i(w, { key: 0 }, [
+      }, null, 8, Aa),
+      l.value ? p("", !0) : (a(), i(f, { key: 0 }, [
         s(r).allowEdit && !s(r).isUploading ? h((a(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: $[0] || ($[0] = (q) => s(r).chooseFile(s(r)))
-        }, Aa)), [
+        }, La)), [
           [s(M)]
         ]) : p("", !0)
       ], 64)),
@@ -3354,7 +3369,7 @@ const wt = /* @__PURE__ */ g({
         key: 1,
         class: m(s(r).containerCss)
       }, [
-        d("div", za, [
+        d("div", Fa, [
           h((a(), i("span", {
             class: "svc-context-button",
             onClick: $[1] || ($[1] = (q) => s(r).chooseFile(s(r))),
@@ -3389,22 +3404,22 @@ const wt = /* @__PURE__ */ g({
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(r).isUploading ? (a(), i("div", La, [
+      s(r).isUploading ? (a(), i("div", Ka, [
         v(s(c), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), Ka = {
+}), Ha = {
   key: 0,
   class: "svc-search"
-}, Ua = { class: "svc-search__search-icon" }, Ha = ["aria-label", "placeholder", "tabindex"], Qa = { class: "svc-search__toolbar" }, Oa = { class: "svc-search__toolbar-counter" }, Ga = /* @__PURE__ */ g({
+}, Qa = { class: "svc-search__search-icon" }, Oa = ["aria-label", "placeholder", "tabindex"], Wa = { class: "svc-search__toolbar" }, Ga = { class: "svc-search__toolbar-counter" }, ja = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    f(() => t.model);
+    w(() => t.model);
     const e = k({
       get: () => t.model.filterString,
       set: (o) => {
@@ -3412,8 +3427,8 @@ const wt = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (a(), i("div", Ka, [
-      d("div", Ua, [
+    return (o, n) => o.model.isVisible ? (a(), i("div", Ha, [
+      d("div", Qa, [
         v(s(c), {
           is: "sv-svg-icon",
           iconName: "icon-search",
@@ -3427,11 +3442,11 @@ const wt = /* @__PURE__ */ g({
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder,
         tabindex: o.model.getTabIndex()
-      }, null, 8, Ha), [
+      }, null, 8, Oa), [
         [de, e.value]
       ]),
-      d("div", Qa, [
-        d("div", Oa, T(o.model.matchCounterText), 1),
+      d("div", Wa, [
+        d("div", Ga, D(o.model.matchCounterText), 1),
         v(s(c), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
@@ -3439,7 +3454,7 @@ const wt = /* @__PURE__ */ g({
       ])
     ])) : p("", !0);
   }
-}), Wa = ["title"], ja = /* @__PURE__ */ g({
+}), Ja = ["title"], Za = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3478,7 +3493,7 @@ const wt = /* @__PURE__ */ g({
             iconName: s(e).icon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Wa)), [
+        ], 10, Ja)), [
           [s(M)]
         ]),
         v(s(c), {
@@ -3487,7 +3502,7 @@ const wt = /* @__PURE__ */ g({
         }, null, 8, ["model"])
       ]),
       d("div", null, [
-        (a(!0), i(w, null, A(s(e).visibleItems, (l) => (a(), b(s(c), {
+        (a(!0), i(f, null, V(s(e).visibleItems, (l) => (a(), b(s(c), {
           is: "svc-page-navigator-item",
           key: l.id,
           model: l
@@ -3497,22 +3512,22 @@ const wt = /* @__PURE__ */ g({
       [H, s(e).visible]
     ]);
   }
-}), Ja = { class: "svc-page-navigator-item" }, Za = ["title"], Xa = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ya = [
-  Xa
-], xa = { class: "svc-page-navigator-item__banner" }, el = { class: "svc-page-navigator-item__text" }, ol = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
+}), 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), sl = /* @__PURE__ */ g({
+], -1), nl = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    f(() => t.model);
+    w(() => t.model);
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (a(), i("div", Ja, [
+    return (o, n) => (a(), i("div", Xa, [
       h((a(), i("div", {
         role: "button",
         class: m(["svc-page-navigator-item-content", {
@@ -3524,17 +3539,17 @@ const wt = /* @__PURE__ */ g({
         d("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Ya, 8, Za),
-        d("div", xa, [
-          d("span", el, T(o.model.title), 1),
-          ol
+        }, el, 8, Ya),
+        d("div", ol, [
+          d("span", sl, D(o.model.title), 1),
+          tl
         ])
       ], 2)), [
         [s(M)]
       ])
     ]));
   }
-}), tl = { class: "svc-question__dropdown-choices--wrapper" }, nl = { class: "svc-question__dropdown-choices" }, al = /* @__PURE__ */ g({
+}), al = { class: "svc-question__dropdown-choices--wrapper" }, ll = { class: "svc-question__dropdown-choices" }, il = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3549,14 +3564,14 @@ const wt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (a(), i("div", tl, [
+    return (n, r) => (a(), i("div", al, [
       d("div", null, [
-        d("div", nl, [
-          (a(!0), i(w, null, A(n.model.getRenderedItems(), (l) => (a(), i("div", {
+        d("div", ll, [
+          (a(!0), i(f, null, V(n.model.getRenderedItems(), (l) => (a(), i("div", {
             key: l.value,
             class: m(n.model.getChoiceCss())
           }, [
-            v(s(c), V({
+            v(s(c), A({
               is: e(l)
             }, o(l)), null, 16, ["is"])
           ], 2))), 128))
@@ -3571,7 +3586,7 @@ const wt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), ll = /* @__PURE__ */ g({
+}), rl = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
@@ -3591,7 +3606,7 @@ const wt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), il = { class: "svc-question__adorner" }, rl = { class: "svc-question__content svc-question__content--in-popup" }, dl = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", cl = /* @__PURE__ */ g({
+}), 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: {},
@@ -3608,15 +3623,15 @@ const wt = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return f(() => e.value), (r, l) => (a(), i("div", il, [
-      d("div", rl, [
-        v(s(c), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        d("div", dl, [
-          (a(!0), i(w, null, A(e.value.visibleChoices, (_) => (a(), i("div", {
+    return w(() => e.value), (r, l) => (a(), i("div", dl, [
+      d("div", cl, [
+        v(s(c), A({ is: r.componentName }, r.componentData), null, 16, ["is"]),
+        d("div", ul, [
+          (a(!0), i(f, null, V(e.value.visibleChoices, (_) => (a(), i("div", {
             key: _.value,
             class: "svc-question__dropdown-choice"
           }, [
-            v(s(c), V({
+            v(s(c), A({
               is: o(_)
             }, n(_)), null, 16, ["is"])
           ]))), 128))
@@ -3624,18 +3639,18 @@ const wt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), ul = ["data-sv-drop-target-survey-element"], pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), vl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ml = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _l = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gl = { class: "svc-widget__content" }, bl = {
+}), 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"
-}, yl = /* @__PURE__ */ d("div", {
+}, Cl = /* @__PURE__ */ d("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), hl = [
-  yl
-], Cl = { class: "svc-question__content-actions" }, ql = {
+}, null, -1), ql = [
+  Cl
+], $l = { class: "svc-question__content-actions" }, kl = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, $l = { class: "svc-panel__placeholder" }, kl = /* @__PURE__ */ g({
+}, fl = { class: "svc-panel__placeholder" }, wl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
@@ -3653,7 +3668,7 @@ const wt = /* @__PURE__ */ g({
         n.dispose();
       }
     );
-    return G(() => {
+    return W(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), R(() => {
       e.value && o.value && (o.value.rootElement = e.value);
@@ -3672,10 +3687,10 @@ const wt = /* @__PURE__ */ g({
         onClick: r[1] || (r[1] = (l) => s(o).select(s(o), l)),
         "data-bind": "clickBubble: false"
       }, [
-        pl,
-        vl,
         ml,
         _l,
+        gl,
+        bl,
         s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -3688,11 +3703,11 @@ const wt = /* @__PURE__ */ g({
             size: "auto"
           })
         ], 32)) : p("", !0),
-        d("div", gl, [
-          v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"])
+        d("div", yl, [
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (a(), i("div", bl, hl)) : p("", !0),
-        d("div", Cl, [
+        s(o).isEmptyElement ? (a(), i("div", hl, ql)) : p("", !0),
+        d("div", $l, [
           v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
@@ -3702,24 +3717,24 @@ const wt = /* @__PURE__ */ g({
       ], 2)), [
         [s(M)]
       ]) : p("", !0),
-      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(w, { key: 1 }, [
-        v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (a(), i("div", ql, [
-          d("div", $l, T(s(o).placeholderText), 1)
+      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(f, { key: 1 }, [
+        v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+        s(o).isEmptyElement ? (a(), i("div", kl, [
+          d("div", fl, D(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, ul)) : p("", !0);
+    ], 42, vl)) : p("", !0);
   }
-}), fl = { class: "svc-carry-forward-panel-wrapper" }, wl = { class: "svc-carry-forward-panel" }, Tl = { class: "svc-carry-forward-panel__link" }, Dl = /* @__PURE__ */ g({
+}), Dl = { class: "svc-carry-forward-panel-wrapper" }, Tl = { class: "svc-carry-forward-panel" }, Nl = { class: "svc-carry-forward-panel__link" }, Ml = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(u) {
-    return (t, e) => (a(), i("div", fl, [
-      d("div", wl, [
-        d("span", null, T(t.model.text) + T(" "), 1),
-        d("span", Tl, [
+    return (t, e) => (a(), i("div", Dl, [
+      d("div", Tl, [
+        d("span", null, D(t.model.text) + D(" "), 1),
+        d("span", Nl, [
           v(s(c), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3730,20 +3745,20 @@ const wt = /* @__PURE__ */ g({
     ]));
   }
 });
-function Nl(u, t, e) {
+function Sl(u, t, e) {
   u(t, e);
 }
 function pe(u) {
-  const t = Nl.bind(
+  const t = Sl.bind(
     void 0,
     u
   );
-  t("svc-tabbed-menu", Ge), t("svc-tabbed-menu-item-wrapper", je), t("svc-tabbed-menu-item", Ze), t("svc-side-bar", eo), t("svc-side-bar-default-header", no), t("svc-side-bar-page", ao), t("svc-tabs", ro), t("svc-tab-control", go), t("svc-tab-button", qo), t("svc-property-grid-placeholder", Do), t("svc-side-bar-header", Eo), t("svc-side-bar-property-grid-header", Fo), t("svc-property-grid", io), t("svc-object-selector", lo), t("svc-search", Ga), t("svc-switcher", Yo), t("svc-action-button", Go), t("svc-question-error", Ko), t("survey-embeddedsurvey", Hs), t("sv-logic-operator", Us), t("survey-linkvalue", Qs), t("survey-color", it), t("color-item", rt), t("sv-boolean-switch", wt), t("survey-fileedit", vt), t("survey-spinedit", bt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", os), t("svc-tab-preview", is), t("svc-complete-page", ds), t("survey-results", Cs), t("survey-results-table-row", $s), t("json-error-item", Rs), t("svc-tab-json-editor-textarea", Bs), t("svc-tab-json-editor-ace", Ts), t("svc-tab-translation", Js), t("sd-translation-line-skeleton", et), t("svc-translate-from-action", ot), t("svc-tab-logic", Ls), t("svc-tab-theme", nt), t("svc-toolbox", zt), t("svc-toolbox-list", Zt), t("svc-toolbox-category", Jt), t("svc-toolbox-tool", Ft), t("svc-toolbox-item", Qt), t("svc-toolbox-item-group", Ot), t(Ie, Et), t("svc-tab-designer", dn), t("svc-page-navigator", ja), t("svc-page-navigator-item", sl), t("svc-page", hn), t("svc-row", Tn), t("svc-add-new-question-btn", qn), t("svc-add-question-type-selector", kn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", An), t("svc-image-question-adorner", Hn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", cl), t("svc-question-editor-content", Pa), t("svc-logo-image", Fa), t("svc-panel", va), t("svc-item-value", qa), t("svc-image-item-value", Ea), t("svc-dropdown-question", ll), t("svc-dropdown-question-adorner", al), t("svc-widget-question", kl), t("svc-question-banner", Dl);
+  t("svc-tabbed-menu", We), t("svc-tabbed-menu-item-wrapper", je), t("svc-tabbed-menu-item", Ze), t("svc-side-bar", eo), t("svc-side-bar-default-header", no), t("svc-side-bar-page", ao), t("svc-tabs", ro), t("svc-tab-control", go), t("svc-tab-button", qo), t("svc-property-grid-placeholder", To), t("svc-side-bar-header", Eo), t("svc-side-bar-property-grid-header", Fo), t("svc-property-grid", io), t("svc-object-selector", lo), t("svc-search", ja), t("svc-switcher", Yo), t("svc-action-button", Wo), t("svc-question-error", Ko), t("survey-embeddedsurvey", Os), t("sv-logic-operator", Qs), t("survey-linkvalue", Ws), t("survey-color", dt), t("color-item", ct), t("sv-boolean-switch", Tt), t("survey-fileedit", _t), t("survey-spinedit", ht), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", O), t("survey-simulator", os), t("svc-tab-preview", ds), t("svc-complete-page", us), t("survey-results", $s), t("survey-results-table-row", fs), t("json-error-item", As), t("svc-tab-json-editor-textarea", Es), t("svc-tab-json-editor-ace", Ns), t("svc-tab-translation", Xs), t("sd-translation-line-skeleton", st), t("svc-translate-from-action", tt), t("svc-tab-logic", Ks), t("svc-tab-theme", lt), t("svc-component-container", ts), t("svc-toolbox", Ft), t("svc-toolbox-list", Yt), t("svc-toolbox-category", Xt), t("svc-toolbox-tool", Ut), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", Gt), t(Ie, Rt), t("svc-tab-designer", un), t("svc-page-navigator", Za), t("svc-page-navigator-item", nl), t("svc-page", qn), t("svc-row", Nn), t("svc-add-new-question-btn", kn), t("svc-add-question-type-selector", wn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Jn), t("svc-image-question", Ln), t("svc-image-question-adorner", On), t("svc-matrix-cell", Xn), t("svc-cell-question", ea), t("svc-cell-dropdown-question", pl), t("svc-question-editor-content", Va), t("svc-logo-image", Ua), t("svc-panel", _a), 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(
   (u, t) => ie.Instance.registerComponent(u, t)
 );
-const El = {
+const Rl = {
   install(u) {
     u.component("SurveyCreatorComponent", Oe), pe((t, e) => {
       u.component(t, e), ie.Instance.registerComponent(t, t);
@@ -3752,5 +3767,5 @@ const El = {
 };
 export {
   Oe as SurveyCreatorComponent,
-  El as surveyCreatorPlugin
+  Rl as surveyCreatorPlugin
 };