survey-creator-vue 2.0.9 → 2.1.0

package/survey-creator-vue.es.js

@@ -1,4 +1,4 @@
-import { useBase as T, SvComponent as u, key2ClickDirective as N, SurveyComponent as Q, useQuestion as O, useComputedArray as _e, ComponentFactory as ie } from "survey-vue3-ui";
+import { useBase as T, SvComponent as c, key2ClickDirective as N, SurveyComponent as Q, useQuestion as O, useComputedArray as _e, ComponentFactory as ie } from "survey-vue3-ui";
 import { defineComponent as g, computed as k, toRaw as ge, ref as I, onMounted as P, onUnmounted as K, openBlock as a, createElementBlock as l, Fragment as w, createVNode as v, unref as s, createElementVNode as d, normalizeClass as _, normalizeStyle as F, createCommentVNode as p, renderList as V, createBlock as h, nextTick as re, withDirectives as C, toDisplayString as $, vShow as U, withCtx as Z, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as X, vModelText as de, onUpdated as Y, mergeProps as A, renderSlot as x } from "vue";
 import { ResponsivityManager as he, CssClassBuilder as qe, RendererFactory as ce, DropdownListModel as Ce, VerticalResponsivityManager as ke } from "survey-core";
 import { editorLocalization as ue, SurveyResultsModel as $e, initLogicOperator as fe, StringEditorViewModelBase as we, ToolboxToolViewModel as Te, PageAdorner as De, RowViewModel as Ne, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as Me, QuestionRatingAdornerViewModel as Se, MatrixCellWrapperViewModel as Be, ItemValueWrapperViewModel as Ie, ImageItemValueWrapperViewModel as Ee, LogoImageViewModel as Pe, PageNavigatorViewModel as Re, QuestionDropdownAdornerViewModel as Ve, editableStringRendererName as Ae } from "survey-creator-core";
@@ -16,8 +16,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = k(() => ge(t.model)), o = I();
+  setup(u) {
+    const t = u, e = k(() => ge(t.model)), o = I();
     return T(
       () => e.value,
       (n, i) => {
@@ -28,7 +28,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }), K(() => {
       t.model.unsubscribeRootElement();
     }), (n, i) => e.value.isCreatorDisposed ? p("", !0) : (a(), l(w, { key: 0 }, [
-      v(s(u), { is: "survey-popup-modal" }),
+      v(s(c), { is: "survey-popup-modal" }),
       d("div", {
         class: _(e.value.getRootCss()),
         style: F(e.value.themeVariables),
@@ -36,7 +36,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ref: o
       }, [
         d("div", null, [
-          v(s(u), { is: "sv-svg-bundle" })
+          v(s(c), { is: "sv-svg-bundle" })
         ]),
         d("div", {
           class: _(["svc-full-container svc-creator__area svc-flex-column", {
@@ -51,7 +51,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             d("div", ze, [
               d("div", Le, [
                 e.value.showTabs ? (a(), l("div", Fe, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
                   }, null, 8, ["model"])
@@ -61,7 +61,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.showToolbar
                 }, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "sv-action-bar",
                     model: e.value.toolbar
                   }, null, 8, ["model"])
@@ -83,7 +83,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                       "aria-labelledby": "tab-" + r.id,
                       id: "scrollableDiv-" + r.id
                     }, [
-                      v(s(u), {
+                      v(s(c), {
                         is: r.componentContent,
                         model: r.data.model
                       }, null, 8, ["is", "model"])
@@ -96,14 +96,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
                 }, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "sv-action-bar",
                     model: e.value.footerToolbar
                   }, null, 8, ["model"])
                 ], 8, Qe)
               ])) : p("", !0)
             ]),
-            e.value.sidebar ? (a(), h(s(u), {
+            e.value.sidebar ? (a(), h(s(c), {
               key: 0,
               is: "svc-side-bar",
               model: e.value.sidebar
@@ -115,7 +115,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               innerHTML: e.value.licenseText
             }, null, 8, We)
           ])),
-          v(s(u), {
+          v(s(c), {
             is: "sv-notifier",
             model: e.value.notifier
           }, null, 8, ["model"])
@@ -128,8 +128,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     let e;
     const o = I();
     return T(() => t.model), P(() => {
@@ -142,7 +142,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref: o,
       role: "tablist"
     }, [
-      (a(!0), l(w, null, V(n.model.renderedActions, (r) => (a(), h(s(u), {
+      (a(!0), l(w, null, V(n.model.renderedActions, (r) => (a(), h(s(c), {
         key: r.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: r
@@ -154,8 +154,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = I(), e = c;
+  setup(u) {
+    const t = I(), e = u;
     return T(() => e.item), P(() => {
       const o = e.item;
       o.updateModeCallback = (n, i) => {
@@ -170,7 +170,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ref: t
     }, [
       d("div", Ze, [
-        v(s(u), {
+        v(s(c), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
         }, null, 8, ["is", "item"])
@@ -182,8 +182,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.item), (e, o) => C((a(), l("div", {
       role: "tab",
       id: "tab-" + e.item.id,
@@ -197,7 +197,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         key: 0,
         class: _(e.item.getTitleCss())
       }, $(e.item.title), 3)) : p("", !0),
-      e.item.hasIcon ? (a(), h(s(u), {
+      e.item.hasIcon ? (a(), h(s(c), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
@@ -214,8 +214,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = I();
+  setup(u) {
+    const t = u, e = I();
     return T(() => t.model), P(() => {
       t.model.initResizeManager(e.value);
     }), K(() => {
@@ -236,12 +236,12 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             ref_key: "root",
             ref: e
           }, [
-            v(s(u), {
+            v(s(c), {
               is: o.model.header.component,
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
             d("div", so, [
-              (a(!0), l(w, null, V(o.model.pages, (i, r) => (a(), h(s(u), {
+              (a(!0), l(w, null, V(o.model.pages, (i, r) => (a(), h(s(c), {
                 key: r,
                 is: "svc-side-bar-page",
                 model: i
@@ -251,7 +251,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         ], 512), [
           [U, o.model.renderContainer]
         ]),
-        o.model.sideAreaComponentName ? (a(), h(s(u), {
+        o.model.sideAreaComponentName ? (a(), h(s(c), {
           key: 0,
           is: o.model.sideAreaComponentName,
           model: o.model.sideAreaComponentData
@@ -269,11 +269,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", no, [
       d("div", ao, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
@@ -286,9 +286,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return T(() => t.model), (e, o) => e.model.visible ? (a(), h(s(u), {
+  setup(u) {
+    const t = u;
+    return T(() => t.model), (e, o) => e.model.visible ? (a(), h(s(c), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
@@ -299,9 +299,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return T(() => t.model), (e, o) => e.model.isVisible ? (a(), h(s(u), {
+  setup(u) {
+    const t = u;
+    return T(() => t.model), (e, o) => e.model.isVisible ? (a(), h(s(c), {
       key: 0,
       is: "sv-list",
       model: e.model.list
@@ -312,12 +312,12 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", {
       class: _(e.model.rootCss)
     }, [
-      v(s(u), {
+      v(s(c), {
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
@@ -332,9 +332,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
-    return T(() => t.model), (e, o) => (a(!0), l(w, null, V(e.model.actions, (n, i) => (a(), h(s(u), {
+  setup(u) {
+    const t = u;
+    return T(() => t.model), (e, o) => (a(!0), l(w, null, V(e.model.actions, (n, i) => (a(), h(s(c), {
       key: i,
       is: "svc-tab-button",
       model: n
@@ -347,23 +347,23 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", {
       class: _(e.model.sideBarClassName)
     }, [
       d("div", vo, [
         d("div", mo, [
-          v(s(u), {
+          v(s(c), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
           }, null, 8, ["model"])
         ]),
         _o,
-        v(s(u), { is: "sv-scroll" }, {
+        v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
             d("div", go, [
-              v(s(u), {
+              v(s(c), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
               }, null, 8, ["model"])
@@ -374,7 +374,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ]),
       d("div", bo, [
         d("div", yo, [
-          v(s(u), {
+          v(s(c), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
           }, null, 8, ["model"])
@@ -390,8 +390,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => e.model.visible ? (a(), l("div", qo, [
       C((a(), l("div", {
         class: _(e.model.buttonClassName),
@@ -400,7 +400,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       }, [
         d("div", ko, [
           d("div", $o, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
               size: "auto"
@@ -417,7 +417,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
 ], -1), So = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
-  setup(c) {
+  setup(u) {
     const t = ue;
     return (e, o) => (a(), l("div", wo, [
       d("div", To, [
@@ -438,8 +438,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", Bo, [
       e.model.subTitle ? p("", !0) : (a(), l("div", Io, $(e.model.title), 1)),
       e.model.subTitle ? (a(), l("div", Eo, [
@@ -453,8 +453,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", Ao, [
       d("div", zo, [
         d("div", Lo, [
@@ -469,7 +469,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           ], 2)), [
             [s(N), { processEsc: !1 }]
           ]),
-          v(s(u), {
+          v(s(c), {
             is: "sv-popup",
             model: e.model.popupModel
           }, null, 8, ["model"])
@@ -485,9 +485,9 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     cssClasses: {},
     element: {}
   },
-  setup(c) {
+  setup(u) {
     return (t, e) => (a(), l("div", { key: t.errorKey }, [
-      v(s(u), {
+      v(s(c), {
         is: "sv-svg-icon",
         class: _(t.cssClasses.error.icon),
         iconName: "icon-alert_24x24",
@@ -498,7 +498,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-string",
           locString: t.error.locText
         }, null, 8, ["locString"])
@@ -517,8 +517,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     click: { type: Function },
     iconName: {}
   },
-  setup(c) {
-    const t = c, e = (n) => {
+  setup(u) {
+    const t = u, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
     }, o = () => new qe().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
     return (n, i) => (a(), l(w, null, [
@@ -545,7 +545,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           class: _(o()),
           title: n.title
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
@@ -557,7 +557,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           class: _(o()),
           title: n.title
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: n.iconName,
             size: "auto"
@@ -581,8 +581,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.item), (e, o) => C((a(), l("button", {
       class: _(e.item.getActionBarItemCss()),
       type: "button",
@@ -614,8 +614,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.model);
     const e = k(() => t.model.simulatorFrame), o = () => {
       t.model.device !== "desktop" && t.model.activateZoom();
@@ -629,7 +629,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onMouseout: r[2] || (r[2] = (m) => n())
     }, [
       i.model.hasFrame ? p("", !0) : (a(), l("div", ss, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-widget",
           model: i.model.survey
         }, null, 8, ["model"])
@@ -652,7 +652,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           })
         }, [
           d("div", ts, [
-            v(s(u), {
+            v(s(c), {
               is: "survey-widget",
               model: i.model.survey
             }, null, 8, ["model"])
@@ -668,8 +668,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     placeholderTitleText: {},
     placeholderDescriptionText: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return (e, o) => (a(), l("div", as, [
       d("div", {
         class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
@@ -688,8 +688,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
@@ -706,18 +706,18 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: "svc-plugin-tab__content",
         onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), h(s(u), {
+        e.model.showResults ? (a(), h(s(c), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
       e.model.isPageToolbarVisible ? (a(), l("div", ds, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
@@ -730,8 +730,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.model.testAgainAction);
+  setup(u) {
+    const t = u, e = k(() => t.model.testAgainAction);
     return T(() => e.value), (o, n) => C((a(), l("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
@@ -743,11 +743,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     ]);
   }
 });
-function z(c, t, e) {
+function z(u, t, e) {
   const o = ye(), n = G(
     t.map((i) => () => i()),
     () => {
-      o.value = c();
+      o.value = u();
     },
     {
       immediate: !0
@@ -765,8 +765,8 @@ const vs = {
   props: {
     survey: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => t.survey ? new $e(t.survey) : void 0,
       [() => t.survey]
     );
@@ -775,14 +775,14 @@ const vs = {
         d("div", _s, [
           d("div", gs, $(s(e).surveyResultsText), 1),
           d("div", bs, [
-            v(s(u), {
+            v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
               click: s(e).selectTableClick,
               disabled: !1,
               selected: s(e).isTableSelected
             }, null, 8, ["text", "click", "selected"]),
-            v(s(u), {
+            v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsJsonText,
               click: s(e).selectJsonClick,
@@ -805,7 +805,7 @@ const vs = {
               ])
             ]),
             d("tbody", null, [
-              (a(!0), l(w, null, V(s(e).resultData, (i, r) => (a(), h(s(u), {
+              (a(!0), l(w, null, V(s(e).resultData, (i, r) => (a(), h(s(c), {
                 is: "survey-results-table-row",
                 model: i,
                 key: r
@@ -823,8 +823,8 @@ const vs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l(w, null, [
       C((a(), l("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
@@ -839,13 +839,13 @@ const vs = {
             class: _(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
             style: F({ left: e.model.markerMargin })
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-expand_16x16",
               size: 16
             })
           ], 6)) : p("", !0),
-          e.model.question ? (a(), h(s(u), {
+          e.model.question ? (a(), h(s(c), {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
@@ -860,7 +860,7 @@ const vs = {
       ])), [
         [s(N)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (a(!0), l(w, { key: 0 }, V(e.model.data, (n, i) => (a(), h(s(u), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), l(w, { key: 0 }, V(e.model.data, (n, i) => (a(), h(s(c), {
         is: "survey-results-table-row",
         model: n,
         key: i + 1
@@ -872,8 +872,8 @@ const vs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = I();
+  setup(u) {
+    const t = u, e = I();
     return T(() => t.model), P(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), l("div", Ts, [
       d("div", Ds, [
         d("div", {
@@ -882,7 +882,7 @@ const vs = {
           ref: e
         }, null, 512),
         C(d("div", Ns, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-list",
             model: o.model.errorList
           }, null, 8, ["model"])
@@ -897,8 +897,8 @@ const vs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = t.model;
+  setup(u) {
+    const t = u, e = I(), o = t.model;
     return o.canShowErrors = !1, T(() => t.model), P(() => {
       const n = t.model;
       n.textElement = e.value;
@@ -917,7 +917,7 @@ const vs = {
           [de, s(o).text]
         ]),
         C(d("div", Es, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-list",
             model: s(o).errorList
           }, null, 8, ["model"])
@@ -932,14 +932,14 @@ const vs = {
   props: {
     item: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.item);
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
     return (o, n) => (a(), l(w, null, [
-      v(s(u), {
+      v(s(c), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
@@ -947,7 +947,7 @@ const vs = {
       }, null, 8, ["iconName", "size"]),
       d("div", Rs, [
         d("div", Vs, [
-          v(s(u), {
+          v(s(c), {
             is: "survey-string",
             locString: o.item.locTitle
           }, null, 8, ["locString"])
@@ -960,7 +960,7 @@ const vs = {
           "aria-label": o.item.data.fixButtonTitle,
           class: "svc-json-error__fix-button"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
@@ -976,8 +976,8 @@ const vs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.model);
     const e = (o) => {
       o.stopPropagation(), t.model.action();
@@ -1002,8 +1002,8 @@ const vs = {
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", Fs, [
       d("div", {
         class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
@@ -1042,8 +1042,8 @@ const Qs = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = k(() => t.question.dropdownListModel ?? new Ce(t.question));
+  setup(u) {
+    const t = u, e = I(), o = k(() => t.question.dropdownListModel ?? new Ce(t.question));
     O(t, e, (m) => {
       fe(m);
     });
@@ -1080,7 +1080,7 @@ const Qs = /* @__PURE__ */ g({
           d("div", {
             class: _(m.question.cssClasses.controlValue)
           }, [
-            m.question.locReadOnlyText ? (a(), h(s(u), {
+            m.question.locReadOnlyText ? (a(), h(s(c), {
               key: 0,
               is: "survey-string",
               locString: m.question.locReadOnlyText
@@ -1091,7 +1091,7 @@ const Qs = /* @__PURE__ */ g({
             class: _(m.question.cssClasses.cleanButton),
             onClick: i
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               class: _(m.question.cssClasses.cleanButtonSvg),
               iconName: m.question.cssClasses.cleanButtonIconId,
@@ -1102,7 +1102,7 @@ const Qs = /* @__PURE__ */ g({
             [U, !m.question.isEmpty()]
           ]) : p("", !0)
         ], 42, Hs),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: m.question.popupModel
         }, null, 8, ["model"])
@@ -1113,7 +1113,7 @@ const Qs = /* @__PURE__ */ g({
         class: _(m.question.getControlClass()),
         id: m.question.inputId
       }, [
-        m.question.locReadOnlyText ? (a(), h(s(u), {
+        m.question.locReadOnlyText ? (a(), h(s(c), {
           key: 0,
           is: "survey-string",
           locString: m.question.locReadOnlyText
@@ -1126,11 +1126,11 @@ const Qs = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I();
+  setup(u) {
+    const t = u, e = I();
     O(t, e);
     const o = k(() => t.question.embeddedSurvey);
-    return (n, i) => n.question && o.value && o.value.currentPage ? (a(), h(s(u), {
+    return (n, i) => n.question && o.value && o.value.currentPage ? (a(), h(s(c), {
       key: 0,
       is: "survey-page",
       page: o.value.currentPage,
@@ -1143,10 +1143,10 @@ const Qs = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = ue.getString("pe.clear");
+  setup(u) {
+    const t = u, e = I(), o = ue.getString("pe.clear");
     return O(t, e), (n, i) => (a(), l(w, null, [
-      v(s(u), {
+      v(s(c), {
         is: "svc-action-button",
         text: n.question.linkValueText,
         click: n.question.doLinkClick.bind(n.question),
@@ -1156,7 +1156,7 @@ const Qs = /* @__PURE__ */ g({
         title: n.question.tooltip,
         iconName: n.question.iconName
       }, null, 8, ["text", "click", "selected", "disabled", "classes", "title", "iconName"]),
-      !n.question.isReadOnly && n.question.showClear ? (a(), h(s(u), {
+      !n.question.isReadOnly && n.question.showClear ? (a(), h(s(c), {
         key: 0,
         is: "svc-action-button",
         text: s(o),
@@ -1174,8 +1174,8 @@ const Qs = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", {
       class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
@@ -1201,13 +1201,13 @@ const Qs = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), xs = (c, t) => {
-  const e = c.__vccOpts || c;
+}), xs = (u, t) => {
+  const e = u.__vccOpts || u;
   for (const [o, n] of t)
     e[o] = n;
   return e;
 }, et = {}, ot = { class: "sd-translation-line-skeleton" };
-function st(c, t) {
+function st(u, t) {
   return a(), l("div", ot);
 }
 const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
@@ -1215,14 +1215,14 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     item: {}
   },
-  setup(c) {
+  setup(u) {
     return (t, e) => (a(), l("div", {
       class: _(t.item.data.containerCss)
     }, [
       d("span", {
         class: _(t.item.data.additionalTitleCss)
       }, $(t.item.data.additionalTitle), 3),
-      v(s(u), {
+      v(s(c), {
         is: "sv-action-bar-item-dropdown",
         item: t.item
       }, null, 8, ["item"])
@@ -1239,8 +1239,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.model), (e, o) => (a(), l("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
@@ -1253,18 +1253,18 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
       e.model.survey.isEmpty ? p("", !0) : (a(), l("div", at, [
-        v(s(u), {
+        v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (a(), h(s(u), {
+        e.model.showResults ? (a(), h(s(c), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
       e.model.isPageToolbarVisible ? (a(), l("div", lt, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
         }, null, 8, ["model"])
@@ -1276,8 +1276,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    return O(c, I()), (e, o) => (a(), l("div", {
+  setup(u) {
+    return O(u, I()), (e, o) => (a(), l("div", {
       class: _(e.question.cssClasses.root),
       onKeydown: o[5] || (o[5] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
@@ -1286,7 +1286,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         class: _(e.question.getSwatchCss()),
         style: F(e.question.getSwatchStyle())
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: e.question.cssClasses.swatchIcon,
           size: "auto"
@@ -1332,12 +1332,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           "aria-hidden": "true",
           class: _(e.question.cssClasses.choicesButtonWrapper)
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-action-bar-item",
             item: e.question.dropdownAction
           }, null, 8, ["item"])
         ], 2),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: e.question.dropdownAction.popupModel
         }, null, 8, ["model"])
@@ -1350,8 +1350,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     model: {},
     item: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
     return (o, n) => (a(), l(w, null, [
@@ -1359,7 +1359,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         class: "spg-color-editor__color-swatch",
         style: F(e())
       }, null, 4),
-      v(s(u), {
+      v(s(c), {
         is: "survey-string",
         locString: o.item.locTitle
       }, null, 8, ["locString"])
@@ -1370,9 +1370,9 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
+  setup(u) {
     const t = I();
-    return O(c, t), (o, n) => (a(), l("div", {
+    return O(u, t), (o, n) => (a(), l("div", {
       class: _(o.question.cssClasses.root),
       onDragenter: n[5] || (n[5] = //@ts-ignore
       (...i) => o.question.onDragEnter && o.question.onDragEnter(...i)),
@@ -1424,7 +1424,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           onClick: n[3] || (n[3] = //@ts-ignore
           (...i) => o.question.doClean && o.question.doClean(...i))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.clearButtonIcon,
             size: "auto"
@@ -1439,7 +1439,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           onClick: n[4] || (n[4] = //@ts-ignore
           (...i) => o.question.chooseFiles && o.question.chooseFiles(...i))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.chooseButtonIcon,
             size: "auto",
@@ -1456,8 +1456,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    return O(c, I()), (e, o) => (a(), l("div", {
+  setup(u) {
+    return O(u, I()), (e, o) => (a(), l("div", {
       class: _(e.question.cssClasses.root),
       onKeydown: o[18] || (o[18] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
@@ -1510,7 +1510,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
@@ -1534,7 +1534,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           (...n) => e.question.onFocus && e.question.onFocus(...n)),
           tabindex: "-1"
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
@@ -1548,12 +1548,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = () => "survey-" + t.question.wrappedQuestionTemplate;
+  setup(u) {
+    const t = u, e = () => "survey-" + t.question.wrappedQuestionTemplate;
     return O(t, I()), (o, n) => (a(), l("div", {
       class: _(o.question.getRootClass())
     }, [
-      v(s(u), {
+      v(s(c), {
         is: e(),
         question: o.question
       }, null, 8, ["is", "question"]),
@@ -1564,7 +1564,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         (...i) => o.question.resetValueAdorner.resetValue && o.question.resetValueAdorner.resetValue(...i)),
         title: o.question.resetValueAdorner.caption
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
@@ -1591,8 +1591,8 @@ const Nt = /* @__PURE__ */ g({
   props: {
     question: {}
   },
-  setup(c) {
-    const t = c, e = I(null);
+  setup(u) {
+    const t = u, e = I(null);
     O(t, e);
     const o = k({
       get() {
@@ -1625,7 +1625,7 @@ const Nt = /* @__PURE__ */ g({
           class: "spg-boolean-switch__title",
           id: n.question.labelRenderedAriaID
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "survey-string",
             locString: n.question.locTitle
           }, null, 8, ["locString"])
@@ -1641,8 +1641,8 @@ const Nt = /* @__PURE__ */ g({
   props: {
     locString: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = I(), i = I(), r = z(
+  setup(u) {
+    const t = u, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = I(), i = I(), r = z(
       () => {
         const q = new we(
           e.value,
@@ -1802,7 +1802,7 @@ const Nt = /* @__PURE__ */ g({
             ref_key: "root",
             ref: n
           }, null, 40, Pt)) : p("", !0),
-          R.value ? (a(), h(s(u), {
+          R.value ? (a(), h(s(c), {
             key: 2,
             is: "sv-character-counter",
             counter: E.value,
@@ -1827,8 +1827,8 @@ const Nt = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.model.toolbox), o = I();
+  setup(u) {
+    const t = u, e = k(() => t.model.toolbox), o = I();
     T(() => e.value);
     let n;
     P(() => {
@@ -1850,7 +1850,7 @@ const Nt = /* @__PURE__ */ g({
         class: "svc-toolbox__panel"
       }, [
         e.value.showSearch ? (a(), l("div", At, [
-          e.value.isCompactRendered ? (a(), h(s(u), {
+          e.value.isCompactRendered ? (a(), h(s(c), {
             is: "svc-toolbox-tool",
             creator: r.model,
             key: "searchitem",
@@ -1858,23 +1858,23 @@ const Nt = /* @__PURE__ */ g({
             parentModel: e.value,
             isCompact: e.value.isCompactRendered
           }, null, 8, ["creator", "item", "parentModel", "isCompact"])) : p("", !0),
-          v(s(u), {
+          v(s(c), {
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
           zt
         ])) : p("", !0),
         e.value.showPlaceholder ? (a(), l("div", Lt, $(e.value.toolboxNoResultsFound), 1)) : p("", !0),
-        v(s(u), { is: "sv-scroll" }, {
+        v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
-            e.value.showInSingleCategory ? p("", !0) : (a(!0), l(w, { key: 0 }, V(e.value.categories, (b, y) => (a(), h(s(u), {
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), l(w, { key: 0 }, V(e.value.categories, (b, y) => (a(), h(s(c), {
               is: "svc-toolbox-category",
               key: y,
               category: b,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
             e.value.showInSingleCategory ? (a(), l("div", Ft, [
-              (a(!0), l(w, null, V(i.value, (b) => (a(), h(s(u), {
+              (a(!0), l(w, null, V(i.value, (b) => (a(), h(s(c), {
                 key: b.renderedId,
                 is: "svc-toolbox-tool",
                 creator: r.model,
@@ -1900,8 +1900,8 @@ const Nt = /* @__PURE__ */ g({
     parentModel: {},
     isCompact: { type: Boolean }
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new Te(
         t.item,
         t.creator,
@@ -1936,7 +1936,7 @@ const Nt = /* @__PURE__ */ g({
             return ((b = s(e)) == null ? void 0 : b.onPointerDown) && ((y = s(e)) == null ? void 0 : y.onPointerDown(...m));
           })
         }, [
-          v(s(u), {
+          v(s(c), {
             viewModel: s(e),
             is: (r = s(e)) == null ? void 0 : r.itemComponent,
             item: n.item,
@@ -1958,7 +1958,7 @@ const Nt = /* @__PURE__ */ g({
     isCompact: { type: Boolean },
     viewModel: {}
   },
-  setup(c) {
+  setup(u) {
     return (t, e) => (a(), l(w, null, [
       C((a(), l("div", {
         class: _(["svc-toolbox__item", t.item.renderedCss]),
@@ -1968,7 +1968,7 @@ const Nt = /* @__PURE__ */ g({
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
         d("span", Qt, [
-          t.item.iconName ? (a(), h(s(u), {
+          t.item.iconName ? (a(), h(s(c), {
             key: 0,
             is: "sv-svg-icon",
             iconName: t.item.iconName,
@@ -1985,7 +1985,7 @@ const Nt = /* @__PURE__ */ g({
         class: "svc-toolbox__item-banner",
         onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: t.item.iconName,
           size: 24,
@@ -2003,14 +2003,14 @@ const Nt = /* @__PURE__ */ g({
     isCompact: { type: Boolean },
     viewModel: {}
   },
-  setup(c) {
-    const t = c, e = (n) => {
+  setup(u) {
+    const t = u, e = (n) => {
       t.viewModel.onMouseOver(t.item, n);
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
     return (n, i) => (a(), l(w, null, [
-      v(s(u), {
+      v(s(c), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
         item: n.item,
@@ -2022,12 +2022,12 @@ const Nt = /* @__PURE__ */ g({
         onMouseover: e,
         onMouseleave: o
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: n.item.subitemsButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: n.item.popupModel
         }, null, 8, ["model"])
@@ -2043,8 +2043,8 @@ const Nt = /* @__PURE__ */ g({
     category: {},
     toolbox: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.category), (e, o) => (a(), l("div", {
       class: _(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
@@ -2060,7 +2060,7 @@ const Nt = /* @__PURE__ */ g({
         }, [
           d("span", Zt, $(e.category.title), 1),
           e.toolbox.canCollapseCategories ? (a(), l("div", Xt, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: e.category.iconName,
               class: _(e.category.iconClassName),
@@ -2071,7 +2071,7 @@ const Nt = /* @__PURE__ */ g({
           [s(N)]
         ])
       ]),
-      (a(!0), l(w, null, V(e.category.items, (n) => (a(), h(s(u), {
+      (a(!0), l(w, null, V(e.category.items, (n) => (a(), h(s(c), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2087,12 +2087,12 @@ const Nt = /* @__PURE__ */ g({
     model: {},
     creator: {}
   },
-  setup(c) {
-    const t = c, e = _e(() => t.model.renderedActions);
+  setup(u) {
+    const t = u, e = _e(() => t.model.renderedActions);
     return T(() => t.model), (o, n) => (a(), l("div", {
       class: _(o.model.cssClasses.root)
     }, [
-      (a(!0), l(w, null, V(s(e), (i, r) => (a(), h(s(u), {
+      (a(!0), l(w, null, V(s(e), (i, r) => (a(), h(s(c), {
         key: r,
         is: "svc-toolbox-tool",
         creator: o.creator,
@@ -2128,11 +2128,11 @@ const Nt = /* @__PURE__ */ g({
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.model.survey);
+  setup(u) {
+    const t = u, e = k(() => t.model.survey);
     return T(() => t.model), T(() => e.value), (o, n) => (a(), l(w, null, [
       d("div", en, [
-        o.model.isToolboxVisible ? (a(), h(s(u), {
+        o.model.isToolboxVisible ? (a(), h(s(c), {
           key: 0,
           is: "svc-toolbox",
           model: o.model.creator
@@ -2143,12 +2143,12 @@ const Nt = /* @__PURE__ */ g({
         onClick: n[0] || (n[0] = //@ts-ignore
         (...i) => o.model.clickDesigner && o.model.clickDesigner(...i))
       }, [
-        v(s(u), { is: "sv-scroll" }, {
+        v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
             d("div", on, [
               o.model.showPlaceholder ? (a(), l(w, { key: 0 }, [
                 o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), l("div", sn, [
-                  v(s(u), {
+                  v(s(c), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
@@ -2160,7 +2160,7 @@ const Nt = /* @__PURE__ */ g({
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
                   d("div", nn, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
@@ -2179,7 +2179,7 @@ const Nt = /* @__PURE__ */ g({
                   ])
                 }, [
                   o.model.creator.allowEditSurveyTitle ? (a(), l("div", an, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
@@ -2190,7 +2190,7 @@ const Nt = /* @__PURE__ */ g({
                     "data-sv-drop-target-survey-element": i != o.model.newPage ? i.name : "newGhostPage",
                     "data-sv-drop-target-page": i.name
                   }, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
                       creator: o.model.creator,
@@ -2204,7 +2204,7 @@ const Nt = /* @__PURE__ */ g({
                     "data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
                     "data-sv-drop-target-page": o.model.pagesController.page2Display.name
                   }, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page",
                       page: o.model.pagesController.page2Display,
                       creator: o.model.creator,
@@ -2214,14 +2214,14 @@ const Nt = /* @__PURE__ */ g({
                 ], 6),
                 o.model.showSurfaceTools ? (a(), l("div", dn, [
                   o.model.creator.showPageNavigator ? (a(), l("div", cn, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
                   ])) : p("", !0),
                   o.model.showSurfaceToolbar ? (a(), l("div", un, [
-                    v(s(u), {
+                    v(s(c), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
                     }, null, 8, ["model"])
@@ -2236,12 +2236,15 @@ const Nt = /* @__PURE__ */ g({
     ], 64));
   }
 }), vn = ["id", "data-sv-drop-target-survey-page"], mn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _n = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gn = {
-  key: 0,
-  class: "svc-page__placeholder_frame"
-}, bn = { class: "svc-panel__placeholder_frame" }, yn = { class: "svc-panel__placeholder" }, hn = { class: "svc-page__content-actions" }, qn = {
+  key: 1,
+  class: "svc-page__loading-content"
+}, bn = {
   key: 2,
+  class: "svc-page__placeholder_frame"
+}, yn = { class: "svc-panel__placeholder_frame" }, hn = { class: "svc-panel__placeholder" }, qn = { class: "svc-page__content-actions" }, Cn = {
+  key: 4,
   class: "svc-page__content-actions"
-}, Cn = /* @__PURE__ */ g({
+}, kn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2249,8 +2252,8 @@ const Nt = /* @__PURE__ */ g({
     page: {},
     isGhost: { type: Boolean }
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = I(), o = z(
       () => {
         const i = new De(t.creator, t.page);
         return i.isGhost = t.isGhost, i;
@@ -2268,7 +2271,7 @@ const Nt = /* @__PURE__ */ g({
     ), Y(() => {
       e.value && o.value && (o.value.rootElement = e.value);
     }), P(() => {
-      e.value && o.value && (o.value.rootElement = e.value);
+      e.value && o.value && o.value.setRootElement(e.value);
     });
     const n = (i) => {
       o.value.hover(i, i.currentTarget);
@@ -2289,22 +2292,26 @@ const Nt = /* @__PURE__ */ g({
     }, [
       mn,
       _n,
-      v(s(u), {
+      s(o).needRenderContent ? (a(), h(s(c), {
+        key: 0,
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
-      }, null, 8, ["survey", "page"]),
-      s(o).showPlaceholder ? (a(), l("div", gn, [
-        d("div", bn, [
-          d("div", yn, $(s(o).placeholderText), 1)
+      }, null, 8, ["survey", "page"])) : p("", !0),
+      s(o).needRenderContent ? p("", !0) : (a(), l("div", gn, [
+        v(s(c), { is: "sv-loading-indicator" })
+      ])),
+      s(o).showPlaceholder ? (a(), l("div", bn, [
+        d("div", yn, [
+          d("div", hn, $(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       s(o).allowDragging && !s(o).isGhost ? (a(), l("div", {
-        key: 1,
+        key: 3,
         class: "svc-question__drag-area",
         onPointerdown: r[0] || (r[0] = (m) => s(o).onPointerDown(m))
       }, [
-        v(s(u), A({
+        v(s(c), A({
           is: "sv-svg-icon",
           class: "svc-question__drag-element"
         }, {
@@ -2312,30 +2319,30 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        d("div", hn, [
-          v(s(u), {
+        d("div", qn, [
+          v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer
           }, null, 8, ["model"]),
-          s(o).topActionContainer.hasActions ? (a(), h(s(u), {
+          s(o).topActionContainer.hasActions ? (a(), h(s(c), {
             key: 0,
             is: "sv-action-bar",
             model: s(o).topActionContainer
           }, null, 8, ["model"])) : p("", !0)
         ])
       ], 32)) : p("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (a(), l("div", qn, [
-        v(s(u), {
+      !s(o).allowDragging || s(o).isGhost ? (a(), l("div", Cn, [
+        v(s(c), {
           is: "sv-action-bar",
           model: s(o).actionContainer
         }, null, 8, ["model"]),
-        s(o).topActionContainer.hasActions ? (a(), h(s(u), {
+        s(o).topActionContainer.hasActions ? (a(), h(s(c), {
           key: 0,
           is: "sv-action-bar",
           model: s(o).topActionContainer
         }, null, 8, ["model"])) : p("", !0)
       ])) : p("", !0),
-      v(s(u), {
+      v(s(c), {
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
@@ -2343,15 +2350,15 @@ const Nt = /* @__PURE__ */ g({
       [s(N)]
     ]) : p("", !0);
   }
-}), kn = { class: "svc-add-new-item-button__text" }, $n = /* @__PURE__ */ g({
+}), $n = { class: "svc-add-new-item-button__text" }, fn = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
     buttonClass: {},
     renderPopup: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.item.data);
     const e = k(
       () => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
@@ -2366,14 +2373,14 @@ const Nt = /* @__PURE__ */ g({
         }),
         onMouseover: i[1] || (i[1] = (r) => n.item.data.hoverStopper && n.item.data.hoverStopper(r, r.currentTarget))
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           class: "svc-panel__add-new-question-icon",
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        d("span", kn, $(n.item.data.addNewQuestionText), 1),
-        o.value ? (a(), h(s(u), {
+        d("span", $n, $(n.item.data.addNewQuestionText), 1),
+        o.value ? (a(), h(s(c), {
           key: 0,
           is: "svc-add-question-type-selector",
           questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2382,7 +2389,7 @@ const Nt = /* @__PURE__ */ g({
       ], 34)), [
         [s(N)]
       ]),
-      o.value ? p("", !0) : (a(), h(s(u), {
+      o.value ? p("", !0) : (a(), h(s(c), {
         key: 0,
         is: "svc-add-question-type-selector",
         questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2390,14 +2397,14 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), fn = ["title", "aria-label"], wn = /* @__PURE__ */ g({
+}), wn = ["title", "aria-label"], Tn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
     renderPopup: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     return T(() => t.questionTypeSelectorModel), (e, o) => C((a(), l("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -2407,7 +2414,7 @@ const Nt = /* @__PURE__ */ g({
       "aria-label": e.questionTypeSelectorModel.title,
       class: "svc-element__question-type-selector"
     }, [
-      v(s(u), A({
+      v(s(c), A({
         is: "sv-svg-icon",
         class: "svc-element__question-type-selector-icon"
       }, {
@@ -2415,22 +2422,22 @@ const Nt = /* @__PURE__ */ g({
         size: "auto",
         title: e.questionTypeSelectorModel.title
       }), null, 16),
-      e.renderPopup ? (a(), h(s(u), {
+      e.renderPopup ? (a(), h(s(c), {
         key: 0,
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
-    ], 8, fn)), [
+    ], 8, wn)), [
       [s(N)]
     ]);
   }
-}), Tn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Nn = /* @__PURE__ */ g({
+}), Dn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Nn = /* @__PURE__ */ d("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Mn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = z(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = z(
       () => new Ne(e.value, o.value, void 0),
       [() => e.value, () => o.value],
       (i) => {
@@ -2444,15 +2451,15 @@ const Nt = /* @__PURE__ */ g({
     }), (i, r) => (a(), l("div", {
       class: _(s(n).cssClasses)
     }, [
-      Tn,
       Dn,
+      Nn,
       x(i.$slots, "default")
     ], 2));
   }
-}), Mn = ["data-sv-drop-target-survey-element"], Sn = { class: "svc-fake-title" }, Bn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Rn = { class: "svc-question__top-actions" }, Vn = {
+}), Sn = ["data-sv-drop-target-survey-element"], Bn = { class: "svc-fake-title" }, In = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), En = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Pn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Rn = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Vn = { class: "svc-question__top-actions" }, An = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, An = { class: "svc-panel__placeholder_frame" }, zn = {
+}, zn = { class: "svc-panel__placeholder_frame" }, Ln = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2467,8 +2474,8 @@ const Nt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = I(), o = z(
       () => t.createModel(),
       [() => t.componentName, () => t.componentData],
       (r) => {
@@ -2500,7 +2507,7 @@ const Nt = /* @__PURE__ */ g({
         key: 0,
         class: _(s(o).cssCollapsedHiddenHeader)
       }, [
-        r.element.hasTitle ? (a(), h(s(u), {
+        r.element.hasTitle ? (a(), h(s(c), {
           key: 0,
           is: "survey-element-title",
           element: r.element
@@ -2508,7 +2515,7 @@ const Nt = /* @__PURE__ */ g({
           key: 1,
           class: _(s(o).cssCollapsedHiddenTitle)
         }, [
-          d("span", Sn, $(r.element.name), 1)
+          d("span", Bn, $(r.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       C((a(), l("div", {
@@ -2517,16 +2524,16 @@ const Nt = /* @__PURE__ */ g({
         }),
         class: _(s(o).css())
       }, [
-        Bn,
         In,
         En,
         Pn,
+        Rn,
         s(o).allowDragging ? (a(), l("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: m[0] || (m[0] = (b) => s(o).onPointerDown(b))
         }, [
-          v(s(u), A({
+          v(s(c), A({
             is: "sv-svg-icon",
             class: "svc-question__drag-element"
           }, {
@@ -2534,8 +2541,8 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          d("div", Rn, [
-            v(s(u), {
+          d("div", Vn, [
+            v(s(c), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
               handleClick: !1
@@ -2543,30 +2550,30 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 32)) : p("", !0),
         s(o).needToRenderContent ? (a(), l(w, { key: 1 }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-template-renderer",
             componentName: r.componentName,
             componentData: r.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !r.showPlaceholderComponent ? (a(), l("div", Vn, [
-            d("div", An, [
-              d("div", zn, $(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !r.showPlaceholderComponent ? (a(), l("div", An, [
+            d("div", zn, [
+              d("div", Ln, $(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && r.showPlaceholderComponent ? (a(), h(s(u), A(
+          s(o).isEmptyElement && r.showPlaceholderComponent ? (a(), h(s(c), A(
             {
               key: 1,
               is: r.placeholderComponent
             },
             r.getPlaceholderComponentData && r.getPlaceholderComponentData(s(o))
           ), null, 16, ["is"])) : p("", !0),
-          r.adornerComponent ? (a(), h(s(u), {
+          r.adornerComponent ? (a(), h(s(c), {
             key: 2,
             is: r.adornerComponent,
             model: s(o),
             element: r.element
           }, null, 8, ["is", "model", "element"])) : p("", !0),
-          s(o).isBannerShowing ? (a(), h(s(u), {
+          s(o).isBannerShowing ? (a(), h(s(c), {
             key: 3,
             is: "svc-question-banner",
             model: n.value
@@ -2575,7 +2582,7 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-question__content-actions",
             onFocusin: i
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(o).actionContainer,
               handleClick: !1
@@ -2585,7 +2592,7 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, Mn)) : p("", !0);
+    ], 42, Sn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2593,8 +2600,8 @@ const Nt = /* @__PURE__ */ g({
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new ee(
+  setup(u) {
+    const t = u, e = () => new ee(
       t.componentData.data,
       t.componentData.element,
       null
@@ -2606,14 +2613,14 @@ const Nt = /* @__PURE__ */ g({
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Ln = /* @__PURE__ */ g({
+}), Fn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new Me(
+  setup(u) {
+    const t = u, e = () => new Me(
       t.componentData.data,
       t.componentData.element,
       null
@@ -2631,25 +2638,25 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), Fn = {
+}), Kn = {
   key: 0,
   class: "svc-image-question-controls"
-}, Kn = ["accept"], Un = {
+}, Un = ["accept"], Hn = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, Hn = {
+}, On = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, On = { class: "svc-image-question__loading" }, Qn = /* @__PURE__ */ g({
+}, Qn = { class: "svc-image-question__loading" }, Gn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
     element: {}
   },
-  setup(c) {
+  setup(u) {
     return (t, e) => (a(), l(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", Fn, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", Kn, [
         t.model.allowEdit ? (a(), l(w, { key: 0 }, [
           d("input", {
             type: "file",
@@ -2657,9 +2664,9 @@ const Nt = /* @__PURE__ */ g({
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Kn),
-          C((a(), l("span", Un, [
-            v(s(u), {
+          }, null, 8, Un),
+          C((a(), l("span", Hn, [
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto",
@@ -2670,21 +2677,21 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", Hn, [
-        d("div", On, [
-          v(s(u), { is: "sv-loading-indicator" })
+      t.model.isUploading && !t.model.isEmptyElement ? (a(), l("div", On, [
+        d("div", Qn, [
+          v(s(c), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Gn = { class: "svc-rating-question-content" }, Wn = /* @__PURE__ */ g({
+}), Wn = { class: "svc-rating-question-content" }, jn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
     componentName: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new Se(
         t.componentData.data,
         t.componentData.question,
@@ -2694,11 +2701,11 @@ const Nt = /* @__PURE__ */ g({
     );
     return (o, n) => {
       var i, r, m, b, y, f, E, R, L;
-      return a(), l("div", Gn, [
+      return a(), l("div", Wn, [
         d("div", {
           class: _((i = s(e)) == null ? void 0 : i.controlsClassNames)
         }, [
-          (r = s(e)) != null && r.allowRemove ? C((a(), h(s(u), {
+          (r = s(e)) != null && r.allowRemove ? C((a(), h(s(c), {
             key: 0,
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
@@ -2713,7 +2720,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["class", "title", "aria-label"])), [
             [s(N)]
           ]) : p("", !0),
-          (f = s(e)) != null && f.allowAdd ? C((a(), h(s(u), {
+          (f = s(e)) != null && f.allowAdd ? C((a(), h(s(c), {
             key: 1,
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
@@ -2733,16 +2740,16 @@ const Nt = /* @__PURE__ */ g({
       ]);
     };
   }
-}), jn = {
+}), Jn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, Jn = /* @__PURE__ */ g({
+}, Zn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = k(() => t.componentData.column), i = k(() => t.componentData.element), r = k(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.creator), o = k(() => t.componentData.row), n = k(() => t.componentData.column), i = k(() => t.componentData.element), r = k(
       () => t.componentData.question
     ), m = z(
       () => {
@@ -2784,12 +2791,12 @@ const Nt = /* @__PURE__ */ g({
           class: _(["svc-matrix-cell--selected", { "svc-visible": (f = s(m)) == null ? void 0 : f.isSelected }])
         }, null, 2),
         x(b.$slots, "default"),
-        (E = s(m)) != null && E.isSupportCellEditor ? (a(), l("div", jn, [
+        (E = s(m)) != null && E.isSupportCellEditor ? (a(), l("div", Jn, [
           C((a(), l("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: y[0] || (y[0] = (R) => s(m).editQuestion(s(m), R))
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-edit",
               size: "auto"
@@ -2801,36 +2808,36 @@ const Nt = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), Zn = { class: "svc-question__adorner" }, Xn = { class: "svc-question__content svc-question__content--in-popup" }, Yn = /* @__PURE__ */ g({
+}), Xn = { class: "svc-question__adorner" }, Yn = { class: "svc-question__content svc-question__content--in-popup" }, xn = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = k(
+  setup(u) {
+    const t = u, e = k(
       () => t.componentData.element
     );
-    return T(() => e.value), (o, n) => (a(), l("div", Zn, [
-      d("div", Xn, [
-        v(s(u), A({ is: o.componentName }, o.componentData), null, 16, ["is"])
+    return T(() => e.value), (o, n) => (a(), l("div", Xn, [
+      d("div", Yn, [
+        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 = {
+}), ea = ["data-sv-drop-target-survey-element"], oa = { class: "svc-fake-title" }, sa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ta = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), na = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), aa = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), la = { class: "svc-question__top-actions" }, ia = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, ia = { class: "svc-panel__placeholder_frame" }, ra = { class: "svc-panel__placeholder" }, da = { class: "svc-add-new-item-button__text" }, ca = {
+}, ra = { class: "svc-panel__placeholder_frame" }, da = { class: "svc-panel__placeholder" }, ca = { class: "svc-add-new-item-button__text" }, ua = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, ua = { class: "svc-panel__question-type-selector-popup" }, pa = { class: "svc-panel__add-new-question-wrapper" }, va = /* @__PURE__ */ g({
+}, pa = { class: "svc-panel__question-type-selector-popup" }, va = { class: "svc-panel__add-new-question-wrapper" }, ma = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new ee(
         t.componentData.data,
         t.componentData.element,
@@ -2856,7 +2863,7 @@ const Nt = /* @__PURE__ */ g({
         key: 0,
         class: _(s(e).cssCollapsedHiddenHeader)
       }, [
-        s(e).element.hasTitle ? (a(), h(s(u), {
+        s(e).element.hasTitle ? (a(), h(s(c), {
           key: 0,
           is: "survey-element-title",
           element: s(e).element
@@ -2864,30 +2871,30 @@ const Nt = /* @__PURE__ */ g({
           key: 1,
           class: _(s(e).cssCollapsedHiddenTitle)
         }, [
-          d("span", ea, $(s(e).element.name), 1)
+          d("span", oa, $(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       C((a(), l("div", {
         class: _(s(e).css()),
         onClick: i[2] || (i[2] = (r) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), r) : null)
       }, [
-        oa,
         sa,
         ta,
         na,
+        aa,
         s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), l("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: i[0] || (i[0] = (r) => s(e).onPointerDown(r))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          d("div", aa, [
-            v(s(u), {
+          d("div", la, [
+            v(s(c), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
               handleClick: !1
@@ -2895,36 +2902,36 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 32)) : p("", !0),
         s(e).needToRenderContent ? (a(), l(w, { key: 1 }, [
-          v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (a(), l("div", la, [
-            d("div", ia, [
-              d("div", ra, $(s(e).placeholderText), 1),
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+          s(e).isEmptyElement ? (a(), l("div", ia, [
+            d("div", ra, [
+              d("div", da, $(s(e).placeholderText), 1),
               s(e).showAddQuestionButton ? C((a(), l("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
               }, [
-                v(s(u), {
+                v(s(c), {
                   is: "sv-svg-icon",
                   class: "svc-panel__add-new-question-icon",
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                d("span", da, $(s(e).addNewQuestionText), 1)
+                d("span", ca, $(s(e).addNewQuestionText), 1)
               ])), [
                 [s(N)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), l("div", ca, [
-            d("div", ua, [
-              v(s(u), {
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), l("div", ua, [
+            d("div", pa, [
+              v(s(c), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            d("div", pa, [
-              v(s(u), {
+            d("div", va, [
+              v(s(c), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
                 buttonClass: "svc-action-button",
@@ -2937,7 +2944,7 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-question__content-actions",
             onFocusin: i[1] || (i[1] = (r) => s(e).select(s(e), r))
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-action-bar",
               model: s(e).actionContainer,
               handleClick: !1
@@ -2947,19 +2954,19 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(N), { disableTabStop: !0 }]
       ])
-    ], 42, xn)) : p("", !0);
+    ], 42, ea)) : 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 = {
+}), _a = ["data-sv-drop-target-item-value"], ga = /* @__PURE__ */ d("div", { class: "svc-item-value__ghost" }, null, -1), ba = { class: "svc-item-value-controls" }, ya = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, ya = /* @__PURE__ */ g({
+}, ha = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = I(), e = c, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), i = k(() => e.componentData.item), r = G(
+  setup(u) {
+    const t = I(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), i = k(() => e.componentData.item), r = G(
       () => i.value,
       (b, y) => {
         b && t.value && b.setRootElement(t.value), y && y.setRootElement(void 0);
@@ -2992,10 +2999,10 @@ const Nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      _a,
-      d("div", ga, [
-        s(m).isDraggable ? (a(), l("span", ba, [
-          v(s(u), {
+      ga,
+      d("div", ba, [
+        s(m).isDraggable ? (a(), l("span", ya, [
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
             iconName: "icon-drag-24x24",
@@ -3009,7 +3016,7 @@ const Nt = /* @__PURE__ */ g({
           onClick: y[0] || (y[0] = (f) => s(m).add(s(m))),
           "aria-label": void 0
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
             size: "auto",
@@ -3025,7 +3032,7 @@ const Nt = /* @__PURE__ */ g({
           onBlur: y[2] || (y[2] = (f) => s(m).onFocusOut(f)),
           "aria-label": void 0
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
             size: "auto",
@@ -3039,30 +3046,30 @@ const Nt = /* @__PURE__ */ g({
         class: "svc-item-value__item",
         onClick: y[3] || (y[3] = (f) => s(m).select(s(m), f))
       }, [
-        v(s(u), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
+        v(s(c), A({ is: b.componentName }, b.componentData), null, 16, ["is"])
       ])
-    ], 42, ma));
+    ], 42, _a));
   }
-}), ha = ["data-sv-drop-target-item-value"], qa = { class: "svc-image-item-value-wrapper__content" }, Ca = ["accept"], ka = {
+}), qa = ["data-sv-drop-target-item-value"], Ca = { class: "svc-image-item-value-wrapper__content" }, ka = ["accept"], $a = {
   key: 0,
   class: "svc-image-item-value__item"
-}, $a = {
+}, fa = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, fa = { class: "svc-image-item-value__item" }, wa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ta = { class: "sd-imagepicker__label" }, Da = {
+}, wa = { class: "svc-image-item-value__item" }, Ta = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Da = { class: "sd-imagepicker__label" }, Na = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Na = {
+}, Ma = {
   key: 0,
   class: "svc-image-item-value__placeholder"
-}, Ma = { key: 1 }, Sa = /* @__PURE__ */ g({
+}, Sa = { key: 1 }, Ba = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), i = I(), r = z(
+  setup(u) {
+    const t = u, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), i = I(), r = z(
       () => {
         const y = new Ee(
           e.value,
@@ -3104,17 +3111,17 @@ const Nt = /* @__PURE__ */ g({
         class: "svc-image-item-value-wrapper__ghost",
         style: F(b.value)
       }, null, 4),
-      d("div", qa, [
+      d("div", Ca, [
         d("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(r).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, Ca),
+        }, null, 8, ka),
         !s(r).isNew && !s(r).isUploading ? (a(), l(w, { key: 0 }, [
-          s(r).isNew ? p("", !0) : (a(), l("div", ka, [
-            v(s(u), A({ is: y.componentName }, y.componentData), null, 16, ["is"])
+          s(r).isNew ? p("", !0) : (a(), l("div", $a, [
+            v(s(c), A({ is: y.componentName }, y.componentData), null, 16, ["is"])
           ])),
           s(r).isDraggable && s(r).canRenderControls ? (a(), l("span", {
             key: 1,
@@ -3123,20 +3130,20 @@ const Nt = /* @__PURE__ */ g({
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-drag-24x24",
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(r).canRenderControls ? (a(), l("div", $a, [
+          s(r).canRenderControls ? (a(), l("div", fa, [
             C((a(), l("span", {
               class: "svc-context-button",
               onClick: f[1] || (f[1] = (E) => s(r).chooseFile(s(r))),
               title: void 0,
               "aria-label": void 0
             }, [
-              v(s(u), {
+              v(s(c), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-choosefile",
@@ -3152,7 +3159,7 @@ const Nt = /* @__PURE__ */ g({
               title: void 0,
               "aria-label": void 0
             }, [
-              v(s(u), {
+              v(s(c), {
                 is: "sv-svg-icon",
                 role: "button",
                 iconName: "icon-delete",
@@ -3164,15 +3171,15 @@ const Nt = /* @__PURE__ */ g({
             ])
           ])) : p("", !0)
         ], 64)) : (a(), l(w, { key: 1 }, [
-          d("div", fa, [
-            d("div", wa, [
-              d("label", Ta, [
+          d("div", wa, [
+            d("div", Ta, [
+              d("label", Da, [
                 d("div", {
                   style: F(b.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(r).isUploading ? (a(), l("div", Da, [
-                    v(s(u), { is: "sv-loading-indicator" })
+                  s(r).isUploading ? (a(), l("div", Na, [
+                    v(s(c), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
               ])
@@ -3183,34 +3190,34 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-image-item-value-controls",
             onPointerdown: f[4] || (f[4] = (E) => E.stopPropagation())
           }, [
-            s(r).showPlaceholder ? (a(), l("span", Na, $(s(r).placeholderText), 1)) : p("", !0),
+            s(r).showPlaceholder ? (a(), l("span", Ma, $(s(r).placeholderText), 1)) : p("", !0),
             C((a(), l("span", {
               class: _(s(r).addButtonCss),
               onClick: f[3] || (f[3] = (E) => s(r).chooseNewFile(s(r)))
             }, [
-              s(r).showChooseButtonAsIcon ? (a(), h(s(u), {
+              s(r).showChooseButtonAsIcon ? (a(), h(s(c), {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-add-lg",
                 size: "auto",
                 title: s(r).addFileTitle
-              }, null, 8, ["title"])) : (a(), l("span", Ma, $(s(r).chooseImageText), 1))
+              }, null, 8, ["title"])) : (a(), l("span", Sa, $(s(r).chooseImageText), 1))
             ], 2)), [
               [s(N)]
             ])
           ], 32)) : p("", !0)
         ], 64))
       ])
-    ], 42, ha));
+    ], 42, qa));
   }
-}), Ba = /* @__PURE__ */ g({
+}), Ia = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
     style: {}
   },
-  setup(c) {
-    const t = c, e = k(() => {
+  setup(u) {
+    const t = u, e = k(() => {
       var i;
       return (i = t.survey) == null ? void 0 : i.getAllQuestions()[0];
     }), o = k(() => {
@@ -3235,23 +3242,23 @@ const Nt = /* @__PURE__ */ g({
     return (i, r) => (a(), l("div", {
       style: F(t.style)
     }, [
-      v(s(u), A({ is: o.value }, n.value), null, 16, ["is"])
+      v(s(c), A({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Ia = ["accept"], Ea = /* @__PURE__ */ d("svg", null, [
+}), Ea = ["accept"], Pa = /* @__PURE__ */ d("svg", null, [
   /* @__PURE__ */ d("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Pa = [
-  Ea
-], Ra = { class: "svc-context-container svc-logo-image-controls" }, Va = {
+], -1), Ra = [
+  Pa
+], Va = { class: "svc-context-container svc-logo-image-controls" }, Aa = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Aa = /* @__PURE__ */ g({
+}, za = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
-  setup(c) {
-    const t = c, e = k(() => t.data), o = k(() => e.value.survey), n = I(), i = z(
+  setup(u) {
+    const t = u, e = k(() => t.data), o = k(() => e.value.survey), n = I(), i = z(
       () => new Pe(e.value, null),
       [() => e.value]
     ), r = I(), m = () => {
@@ -3280,13 +3287,13 @@ const Nt = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(i).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Ia),
+      }, null, 8, Ea),
       r.value ? p("", !0) : (a(), l(w, { key: 0 }, [
         s(i).allowEdit && !s(i).isUploading ? C((a(), l("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: y[0] || (y[0] = (f) => s(i).chooseFile(s(i)))
-        }, Pa)), [
+        }, Ra)), [
           [s(N)]
         ]) : p("", !0)
       ], 64)),
@@ -3294,14 +3301,14 @@ const Nt = /* @__PURE__ */ g({
         key: 1,
         class: _(s(i).containerCss)
       }, [
-        d("div", Ra, [
+        d("div", Va, [
           C((a(), l("span", {
             class: "svc-context-button",
             onClick: y[1] || (y[1] = (f) => s(i).chooseFile(s(i))),
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
               size: "auto"
@@ -3315,7 +3322,7 @@ const Nt = /* @__PURE__ */ g({
             title: void 0,
             "aria-label": void 0
           }, [
-            v(s(u), {
+            v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-clear",
               size: "auto"
@@ -3324,26 +3331,26 @@ const Nt = /* @__PURE__ */ g({
             [s(N)]
           ])
         ]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-logo-image",
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(i).isUploading ? (a(), l("div", Va, [
-        v(s(u), { is: "sv-loading-indicator" })
+      s(i).isUploading ? (a(), l("div", Aa, [
+        v(s(c), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), za = {
+}), La = {
   key: 0,
   class: "svc-search"
-}, La = { class: "svc-search__search-icon" }, Fa = ["aria-label", "placeholder"], Ka = { class: "svc-search__toolbar" }, Ua = { class: "svc-search__toolbar-counter" }, Ha = /* @__PURE__ */ g({
+}, Fa = { class: "svc-search__search-icon" }, Ka = ["aria-label", "placeholder"], Ua = { class: "svc-search__toolbar" }, Ha = { class: "svc-search__toolbar-counter" }, Oa = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.model);
     const e = k({
       get: () => t.model.filterString,
@@ -3352,9 +3359,9 @@ const Nt = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (a(), l("div", za, [
-      d("div", La, [
-        v(s(u), {
+    return (o, n) => o.model.isVisible ? (a(), l("div", La, [
+      d("div", Fa, [
+        v(s(c), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
@@ -3366,26 +3373,26 @@ const Nt = /* @__PURE__ */ g({
         "onUpdate:modelValue": n[0] || (n[0] = (i) => e.value = i),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder
-      }, null, 8, Fa), [
+      }, null, 8, Ka), [
         [de, e.value]
       ]),
-      d("div", Ka, [
-        d("div", Ua, $(o.model.matchCounterText), 1),
-        v(s(u), {
+      d("div", Ua, [
+        d("div", Ha, $(o.model.matchCounterText), 1),
+        v(s(c), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
         }, null, 8, ["model"])
       ])
     ])) : p("", !0);
   }
-}), Oa = ["title"], Qa = /* @__PURE__ */ g({
+}), Qa = ["title"], Ga = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
     pageEditMode: {}
   },
-  setup(c) {
-    const t = c, e = z(
+  setup(u) {
+    const t = u, e = z(
       () => new Re(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
     ), o = I();
@@ -3410,21 +3417,21 @@ const Nt = /* @__PURE__ */ g({
         onClick: i[0] || (i[0] = (r) => s(e).togglePageSelector(r)),
         title: s(e).pageSelectorCaption
       }, [
-        v(s(u), {
+        v(s(c), {
           is: "sv-svg-icon",
           class: "svc-page-navigator__button-icon",
           iconName: s(e).icon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        v(s(u), {
+        v(s(c), {
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
-      ], 10, Oa)), [
+      ], 10, Qa)), [
         [s(N)]
       ]),
       d("div", null, [
-        (a(!0), l(w, null, V(s(e).visibleItems, (r) => (a(), h(s(u), {
+        (a(!0), l(w, null, V(s(e).visibleItems, (r) => (a(), h(s(c), {
           is: "svc-page-navigator-item",
           key: r.id,
           model: r
@@ -3434,22 +3441,22 @@ const Nt = /* @__PURE__ */ g({
       [U, s(e).visible]
     ]);
   }
-}), Ga = { class: "svc-page-navigator-item" }, Wa = ["title"], ja = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ja = [
-  ja
-], Za = { class: "svc-page-navigator-item__banner" }, Xa = { class: "svc-page-navigator-item__text" }, Ya = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
+}), Wa = { class: "svc-page-navigator-item" }, ja = ["title"], Ja = /* @__PURE__ */ d("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Za = [
+  Ja
+], Xa = { class: "svc-page-navigator-item__banner" }, Ya = { class: "svc-page-navigator-item__text" }, xa = /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot" }, [
   /* @__PURE__ */ d("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), xa = /* @__PURE__ */ g({
+], -1), el = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
   },
-  setup(c) {
-    const t = c;
+  setup(u) {
+    const t = u;
     T(() => t.model);
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (a(), l("div", Ga, [
+    return (o, n) => (a(), l("div", Wa, [
       C((a(), l("div", {
         role: "button",
         class: _(["svc-page-navigator-item-content", {
@@ -3461,24 +3468,24 @@ const Nt = /* @__PURE__ */ g({
         d("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Ja, 8, Wa),
-        d("div", Za, [
-          d("span", Xa, $(o.model.title), 1),
-          Ya
+        }, Za, 8, ja),
+        d("div", Xa, [
+          d("span", Ya, $(o.model.title), 1),
+          xa
         ])
       ], 2)), [
         [s(N)]
       ])
     ]));
   }
-}), el = { class: "svc-question__dropdown-choices--wrapper" }, ol = { class: "svc-question__dropdown-choices" }, sl = /* @__PURE__ */ g({
+}), ol = { class: "svc-question__dropdown-choices--wrapper" }, sl = { class: "svc-question__dropdown-choices" }, tl = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
     element: {}
   },
-  setup(c) {
-    const t = c, e = (n) => t.element.getItemValueWrapperComponentName(n) || t.model.itemComponent, o = (n) => ({
+  setup(u) {
+    const t = u, e = (n) => t.element.getItemValueWrapperComponentName(n) || t.model.itemComponent, o = (n) => ({
       componentName: t.model.itemComponent,
       componentData: {
         question: t.element,
@@ -3486,19 +3493,19 @@ const Nt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, i) => (a(), l("div", el, [
+    return (n, i) => (a(), l("div", ol, [
       d("div", null, [
-        d("div", ol, [
+        d("div", sl, [
           (a(!0), l(w, null, V(n.model.getRenderedItems(), (r) => (a(), l("div", {
             key: r.value,
             class: _(n.model.getChoiceCss())
           }, [
-            v(s(u), A({
+            v(s(c), A({
               is: e(r)
             }, o(r)), null, 16, ["is"])
           ], 2))), 128))
         ]),
-        n.model.needToCollapse ? (a(), h(s(u), {
+        n.model.needToCollapse ? (a(), h(s(c), {
           key: 0,
           is: "svc-action-button",
           text: n.model.getButtonText(),
@@ -3508,14 +3515,14 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), tl = /* @__PURE__ */ g({
+}), nl = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = () => new Ve(
+  setup(u) {
+    const t = u, e = () => new Ve(
       t.componentData.data,
       t.componentData.element,
       null
@@ -3528,14 +3535,14 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), nl = { class: "svc-question__adorner" }, al = { class: "svc-question__content svc-question__content--in-popup" }, ll = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", il = /* @__PURE__ */ g({
+}), al = { class: "svc-question__adorner" }, ll = { class: "svc-question__content svc-question__content--in-popup" }, il = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", rl = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = k(
+  setup(u) {
+    const t = u, e = k(
       () => t.componentData.element
     ), o = (i) => e.value.getItemValueWrapperComponentName(i) || le, n = (i) => ({
       componentName: le,
@@ -3545,15 +3552,15 @@ const Nt = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(i)
       }
     });
-    return T(() => e.value), (i, r) => (a(), l("div", nl, [
-      d("div", al, [
-        v(s(u), A({ is: i.componentName }, i.componentData), null, 16, ["is"]),
-        d("div", ll, [
+    return T(() => e.value), (i, r) => (a(), l("div", al, [
+      d("div", ll, [
+        v(s(c), A({ is: i.componentName }, i.componentData), null, 16, ["is"]),
+        d("div", il, [
           (a(!0), l(w, null, V(e.value.visibleChoices, (m) => (a(), l("div", {
             key: m.value,
             class: "svc-question__dropdown-choice"
           }, [
-            v(s(u), A({
+            v(s(c), A({
               is: o(m)
             }, n(m)), null, 16, ["is"])
           ]))), 128))
@@ -3561,25 +3568,25 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), rl = ["data-sv-drop-target-survey-element"], dl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), cl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ul = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), vl = { class: "svc-widget__content" }, ml = {
+}), dl = ["data-sv-drop-target-survey-element"], cl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ul = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), pl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), vl = /* @__PURE__ */ d("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ml = { class: "svc-widget__content" }, _l = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, _l = /* @__PURE__ */ d("div", {
+}, gl = /* @__PURE__ */ d("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), gl = [
-  _l
-], bl = { class: "svc-question__content-actions" }, yl = {
+}, null, -1), bl = [
+  gl
+], yl = { class: "svc-question__content-actions" }, hl = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, hl = { class: "svc-panel__placeholder" }, ql = /* @__PURE__ */ g({
+}, ql = { class: "svc-panel__placeholder" }, Cl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
     componentData: {}
   },
-  setup(c) {
-    const t = c, e = I(), o = z(
+  setup(u) {
+    const t = u, e = I(), o = z(
       () => new ee(
         t.componentData.data,
         t.componentData.element,
@@ -3609,28 +3616,28 @@ const Nt = /* @__PURE__ */ g({
         onClick: i[1] || (i[1] = (r) => s(o).select(s(o), r)),
         "data-bind": "clickBubble: false"
       }, [
-        dl,
         cl,
         ul,
         pl,
+        vl,
         s(o).allowDragging ? (a(), l("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: i[0] || (i[0] = (r) => s(o).onPointerDown(r))
         }, [
-          v(s(u), {
+          v(s(c), {
             is: "sv-svg-icon",
             class: "svc-question__drag-element",
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           })
         ], 32)) : p("", !0),
-        d("div", vl, [
-          v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
+        d("div", ml, [
+          v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (a(), l("div", ml, gl)) : p("", !0),
-        d("div", bl, [
-          v(s(u), {
+        s(o).isEmptyElement ? (a(), l("div", _l, bl)) : p("", !0),
+        d("div", yl, [
+          v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
             handleClick: !1
@@ -3640,24 +3647,24 @@ const Nt = /* @__PURE__ */ g({
         [s(N)]
       ]) : p("", !0),
       s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), l(w, { key: 1 }, [
-        v(s(u), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (a(), l("div", yl, [
-          d("div", hl, $(s(o).placeholderText), 1)
+        v(s(c), A({ is: n.componentName }, n.componentData), null, 16, ["is"]),
+        s(o).isEmptyElement ? (a(), l("div", hl, [
+          d("div", ql, $(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, rl)) : p("", !0);
+    ], 42, dl)) : p("", !0);
   }
-}), Cl = { class: "svc-carry-forward-panel-wrapper" }, kl = { class: "svc-carry-forward-panel" }, $l = { class: "svc-carry-forward-panel__link" }, fl = /* @__PURE__ */ g({
+}), kl = { class: "svc-carry-forward-panel-wrapper" }, $l = { class: "svc-carry-forward-panel" }, fl = { class: "svc-carry-forward-panel__link" }, wl = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
-  setup(c) {
-    return (t, e) => (a(), l("div", Cl, [
-      d("div", kl, [
+  setup(u) {
+    return (t, e) => (a(), l("div", kl, [
+      d("div", $l, [
         d("span", null, $(t.model.text) + $(" "), 1),
-        d("span", $l, [
-          v(s(u), {
+        d("span", fl, [
+          v(s(c), {
             is: "svc-action-button",
             text: t.model.actionText,
             click: t.model.onClick.bind(t.model)
@@ -3667,27 +3674,27 @@ const Nt = /* @__PURE__ */ g({
     ]));
   }
 });
-function wl(c, t, e) {
-  c(t, e);
+function Tl(u, t, e) {
+  u(t, e);
 }
-function pe(c) {
-  const t = wl.bind(
+function pe(u) {
+  const t = Tl.bind(
     void 0,
-    c
+    u
   );
-  t("svc-tabbed-menu", Je), t("svc-tabbed-menu-item-wrapper", Xe), t("svc-tabbed-menu-item", xe), t("svc-side-bar", to), t("svc-side-bar-default-header", io), t("svc-side-bar-page", ro), t("svc-tabs", po), t("svc-tab-control", ho), t("svc-tab-button", fo), t("svc-property-grid-placeholder", So), t("svc-side-bar-header", Vo), t("svc-side-bar-property-grid-header", Ho), t("svc-property-grid", uo), t("svc-object-selector", co), t("svc-search", Ha), t("svc-switcher", os), t("svc-action-button", Jo), t("svc-question-error", Oo), t("survey-embeddedsurvey", Gs), t("sv-logic-operator", Qs), t("survey-linkvalue", Ws), t("survey-color", ct), t("color-item", ut), t("sv-boolean-switch", Nt), t("survey-fileedit", gt), t("survey-spinedit", qt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", Q), t("survey-simulator", ns), t("svc-tab-preview", cs), t("svc-complete-page", ps), t("survey-results", $s), t("survey-results-table-row", ws), t("json-error-item", zs), t("svc-tab-json-editor-textarea", Ps), t("svc-tab-json-editor-ace", Ms), t("svc-tab-translation", Ys), t("sd-translation-line-skeleton", tt), t("svc-translate-from-action", nt), t("svc-tab-logic", Us), t("svc-tab-theme", it), t("svc-toolbox", Kt), t("svc-toolbox-list", xt), t("svc-toolbox-category", Yt), t("svc-toolbox-tool", Ht), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", jt), t(Ae, Vt), t("svc-tab-designer", pn), t("svc-page-navigator", Qa), t("svc-page-navigator-item", xa), t("svc-page", Cn), t("svc-row", Nn), t("svc-add-new-question-btn", $n), t("svc-add-question-type-selector", wn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", Ln), t("svc-image-question-adorner", Qn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", il), t("svc-question-editor-content", Ba), t("svc-logo-image", Aa), t("svc-panel", va), t("svc-item-value", ya), t("svc-image-item-value", Sa), t("svc-dropdown-question", tl), t("svc-dropdown-question-adorner", sl), t("svc-widget-question", ql), t("svc-question-banner", fl);
+  t("svc-tabbed-menu", Je), t("svc-tabbed-menu-item-wrapper", Xe), t("svc-tabbed-menu-item", xe), t("svc-side-bar", to), t("svc-side-bar-default-header", io), t("svc-side-bar-page", ro), t("svc-tabs", po), t("svc-tab-control", ho), t("svc-tab-button", fo), t("svc-property-grid-placeholder", So), t("svc-side-bar-header", Vo), t("svc-side-bar-property-grid-header", Ho), t("svc-property-grid", uo), t("svc-object-selector", co), t("svc-search", Oa), t("svc-switcher", os), t("svc-action-button", Jo), t("svc-question-error", Oo), t("survey-embeddedsurvey", Gs), t("sv-logic-operator", Qs), t("survey-linkvalue", Ws), t("survey-color", ct), t("color-item", ut), t("sv-boolean-switch", Nt), t("survey-fileedit", gt), t("survey-spinedit", qt), t("survey-textwithreset", ne), t("survey-commentwithreset", ne), t("survey-widget", Q), t("survey-simulator", ns), t("svc-tab-preview", cs), t("svc-complete-page", ps), t("survey-results", $s), t("survey-results-table-row", ws), t("json-error-item", zs), t("svc-tab-json-editor-textarea", Ps), t("svc-tab-json-editor-ace", Ms), t("svc-tab-translation", Ys), t("sd-translation-line-skeleton", tt), t("svc-translate-from-action", nt), t("svc-tab-logic", Us), t("svc-tab-theme", it), t("svc-toolbox", Kt), t("svc-toolbox-list", xt), t("svc-toolbox-category", Yt), t("svc-toolbox-tool", Ht), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", jt), t(Ae, Vt), t("svc-tab-designer", pn), t("svc-page-navigator", Ga), t("svc-page-navigator-item", el), t("svc-page", kn), t("svc-row", Mn), t("svc-add-new-question-btn", fn), t("svc-add-question-type-selector", Tn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", jn), t("svc-image-question", Fn), t("svc-image-question-adorner", Gn), t("svc-matrix-cell", Zn), t("svc-cell-question", xn), t("svc-cell-dropdown-question", rl), t("svc-question-editor-content", Ia), t("svc-logo-image", za), t("svc-panel", ma), t("svc-item-value", ha), t("svc-image-item-value", Ba), t("svc-dropdown-question", nl), t("svc-dropdown-question-adorner", tl), t("svc-widget-question", Cl), t("svc-question-banner", wl);
 }
 pe(
-  (c, t) => ie.Instance.registerComponent(c, t)
+  (u, t) => ie.Instance.registerComponent(u, t)
 );
-const Sl = {
-  install(c) {
-    c.component("SurveyCreatorComponent", je), pe((t, e) => {
-      c.component(t, e), ie.Instance.registerComponent(t, t);
+const Bl = {
+  install(u) {
+    u.component("SurveyCreatorComponent", je), pe((t, e) => {
+      u.component(t, e), ie.Instance.registerComponent(t, t);
     });
   }
 };
 export {
   je as SurveyCreatorComponent,
-  Sl as surveyCreatorPlugin
+  Bl as surveyCreatorPlugin
 };