npm - survey-creator-vue - Versions diffs - 2.0.3 → 2.0.4 - Mend

survey-creator-vue 2.0.3 → 2.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/package.json +4 -4
package/survey-creator-vue.es.js +668 -654
package/survey-creator-vue.umd.js +2 -2

package/survey-creator-vue.es.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { useBase as f, SvComponent as c, key2ClickDirective as D, SurveyComponent as Q, useQuestion as H, useComputedArray as _e, ComponentFactory as ie } from "survey-vue3-ui";
-import { defineComponent as g, computed as k, toRaw as ge, ref as B, onMounted as E, onUnmounted as K, openBlock as l, createElementBlock as i, Fragment as w, createVNode as v, unref as s, createElementVNode as a, normalizeClass as _, normalizeStyle as F, createCommentVNode as p, renderList as R, createBlock as C, nextTick as re, withDirectives as h, toDisplayString as $, vShow as L, withCtx as Z, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as X, vModelText as de, onUpdated as Y, mergeProps as V, renderSlot as x } from "vue";
-import { ResponsivityManager as he, CssClassBuilder as Ce, RendererFactory as ce, DropdownListModel as qe, VerticalResponsivityManager as ke } from "survey-core";
-import { editorLocalization as ue, SurveyResultsModel as $e, initLogicOperator as we, StringEditorViewModelBase as fe, ToolboxToolViewModel as Te, PageAdorner as De, RowViewModel as Ne, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as Me, QuestionRatingAdornerViewModel as Se, MatrixCellWrapperViewModel as Ie, ItemValueWrapperViewModel as Be, ImageItemValueWrapperViewModel as Ee, LogoImageViewModel as Pe, PageNavigatorViewModel as Re, QuestionDropdownAdornerViewModel as Ve, editableStringRendererName as Ae } from "survey-creator-core";
-const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Le = { class: "svc-top-bar" }, Fe = {
+import { defineComponent as g, computed as k, toRaw as ge, ref as I, onMounted as E, onUnmounted as F, openBlock as a, createElementBlock as i, Fragment as w, createVNode as v, unref as s, createElementVNode as l, normalizeClass as _, normalizeStyle as z, createCommentVNode as p, renderList as R, createBlock as h, nextTick as re, withDirectives as C, toDisplayString as $, vShow as K, withCtx as Z, createTextVNode as be, shallowRef as ye, watch as G, onBeforeUnmount as X, vModelText as de, onUpdated as Y, mergeProps as V, 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 we, StringEditorViewModelBase as fe, ToolboxToolViewModel as Te, PageAdorner as De, RowViewModel as Ne, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as Me, QuestionRatingAdornerViewModel as Se, MatrixCellWrapperViewModel as Be, ItemValueWrapperViewModel as Ie, ImageItemValueWrapperViewModel as Ee, LogoImageViewModel as Pe, PageNavigatorViewModel as Re, QuestionDropdownAdornerViewModel as Ve, editableStringRendererName as Ae } from "survey-creator-core";
+const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, ze = { class: "svc-top-bar" }, Fe = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
 }, Ke = ["v-show"], Ue = { class: "svc-creator__content-holder svc-flex-column" }, He = ["aria-labelledby", "id"], Oe = {
@@ -17,7 +17,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(u) {
-    const t = u, e = k(() => ge(t.model)), o = B();
+    const t = u, e = k(() => ge(t.model)), o = I();
     return f(
       () => e.value,
       (n, r) => {
@@ -25,38 +25,38 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       }
     ), E(() => {
       o.value && t.model.setRootElement(o.value);
-    }), K(() => {
+    }), F(() => {
       t.model.unsubscribeRootElement();
-    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (l(), i(w, { key: 0 }, [
+    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(w, { key: 0 }, [
       v(s(c), { is: "survey-popup-modal" }),
-      a("div", {
+      l("div", {
         class: _(e.value.getRootCss()),
-        style: F(e.value.themeVariables),
+        style: z(e.value.themeVariables),
         ref_key: "root",
         ref: o
       }, [
-        a("div", null, [
+        l("div", null, [
           v(s(c), { is: "sv-svg-bundle" })
         ]),
-        a("div", {
+        l("div", {
           class: _(["svc-full-container svc-creator__area svc-flex-column", {
             "svc-creator__area--with-banner": !e.value.haveCommercialLicense
           }])
         }, [
-          a("div", {
+          l("div", {
             class: _(["svc-flex-row svc-full-container", {
               "svc-creator__side-bar--left": e.value.sidebarLocation == "left"
             }])
           }, [
-            a("div", ze, [
-              a("div", Le, [
-                e.value.showTabs ? (l(), i("div", Fe, [
+            l("div", Le, [
+              l("div", ze, [
+                e.value.showTabs ? (a(), i("div", Fe, [
                   v(s(c), {
                     is: "svc-tabbed-menu",
                     model: e.value.tabbedMenu
                   }, null, 8, ["model"])
                 ])) : p("", !0),
-                e.value.showToolbar ? (l(), i("div", {
+                e.value.showToolbar ? (a(), i("div", {
                   key: 1,
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.showToolbar
@@ -67,14 +67,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   }, null, 8, ["model"])
                 ], 8, Ke)) : p("", !0)
               ]),
-              a("div", {
+              l("div", {
                 class: _(["svc-creator__content-wrapper svc-flex-row", {
                   "svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
                 }])
               }, [
-                a("div", Ue, [
-                  (l(!0), i(w, null, R(e.value.tabs, (d) => (l(), i(w, null, [
-                    e.value.viewType == d.id && d.visible ? (l(), i("div", {
+                l("div", Ue, [
+                  (a(!0), i(w, null, R(e.value.tabs, (d) => (a(), i(w, null, [
+                    e.value.viewType == d.id && d.visible ? (a(), i("div", {
                       role: "tabpanel",
                       class: _(["svc-creator-tab", {
                         "svc-creator__toolbox--right": e.value.toolboxLocation == "right"
@@ -91,8 +91,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                   ], 64))), 256))
                 ])
               ], 2),
-              e.value.isMobileView ? (l(), i("div", Oe, [
-                a("div", {
+              e.value.isMobileView ? (a(), i("div", Oe, [
+                l("div", {
                   class: "svc-toolbar-wrapper",
                   "v-show": e.value.isMobileView
                 }, [
@@ -103,14 +103,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 ], 8, Qe)
               ])) : p("", !0)
             ]),
-            e.value.sidebar ? (l(), C(s(c), {
+            e.value.sidebar ? (a(), h(s(c), {
               key: 0,
               is: "svc-side-bar",
               model: e.value.sidebar
             }, null, 8, ["model"])) : p("", !0)
           ], 2),
-          e.value.haveCommercialLicense ? p("", !0) : (l(), i("div", Ge, [
-            a("span", {
+          e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", Ge, [
+            l("span", {
               class: "svc-creator__non-commercial-text",
               innerHTML: e.value.licenseText
             }, null, 8, We)
@@ -131,18 +131,18 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(u) {
     const t = u;
     let e;
-    const o = B();
+    const o = I();
     return f(() => t.model), E(() => {
       e = new he(o.value, t.model);
-    }), K(() => {
+    }), F(() => {
       e.dispose(), e = void 0;
-    }), (n, r) => (l(), i("div", {
+    }), (n, r) => (a(), i("div", {
       class: "svc-tabbed-menu",
       ref_key: "container",
       ref: o,
       role: "tablist"
     }, [
-      (l(!0), i(w, null, R(n.model.renderedActions, (d) => (l(), C(s(c), {
+      (a(!0), i(w, null, R(n.model.renderedActions, (d) => (a(), h(s(c), {
         key: d.renderedId,
         is: "svc-tabbed-menu-item-wrapper",
         item: d
@@ -155,21 +155,21 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     item: {}
   },
   setup(u) {
-    const t = B(), e = u;
+    const t = I(), e = u;
     return f(() => e.item), E(() => {
       const o = e.item;
       o.updateModeCallback = (n, r) => {
         o.mode = n, re(() => r(n, t.value));
       }, o.afterRender();
-    }), K(() => {
+    }), F(() => {
       const o = e.item;
       o.updateModeCallback = void 0;
-    }), (o, n) => (l(), i("span", {
+    }), (o, n) => (a(), i("span", {
       class: _(["svc-tabbed-menu-item-container", [o.item.isVisible ? "" : "sv-action--hidden", o.item.css]]),
       ref_key: "root",
       ref: t
     }, [
-      a("div", Ze, [
+      l("div", Ze, [
         v(s(c), {
           is: o.item.component || "svc-tabbed-menu-item",
           item: o.item
@@ -184,7 +184,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.item), (e, o) => h((l(), i("div", {
+    return f(() => t.item), (e, o) => C((a(), i("div", {
       role: "tab",
       id: "tab-" + e.item.id,
       "aria-selected": e.item.active,
@@ -193,11 +193,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onClick: o[0] || (o[0] = //@ts-ignore
       (...n) => e.item.action && e.item.action(...n))
     }, [
-      e.item.hasTitle ? (l(), i("span", {
+      e.item.hasTitle ? (a(), i("span", {
         key: 0,
         class: _(e.item.getTitleCss())
       }, $(e.item.title), 3)) : p("", !0),
-      e.item.hasIcon ? (l(), C(s(c), {
+      e.item.hasIcon ? (a(), h(s(c), {
         key: 1,
         is: "sv-svg-icon",
         iconName: e.item.iconName,
@@ -215,23 +215,23 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     model: {}
   },
   setup(u) {
-    const t = u, e = B();
+    const t = u, e = I();
     return f(() => t.model), E(() => {
       t.model.initResizeManager(e.value);
-    }), K(() => {
+    }), F(() => {
       t.model.resetResizeManager();
-    }), (o, n) => h((l(), i("div", {
+    }), (o, n) => C((a(), i("div", {
       class: _(["svc-side-bar", o.model.rootCss])
     }, [
-      h(a("div", {
+      C(l("div", {
         class: "svc-side-bar__shadow",
         onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
       }, null, 512), [
-        [L, o.model.renderContainer]
+        [K, o.model.renderContainer]
       ]),
-      a("div", eo, [
-        h(a("div", oo, [
-          a("div", {
+      l("div", eo, [
+        C(l("div", oo, [
+          l("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
             ref: e
@@ -240,8 +240,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
               is: o.model.header.component,
               model: o.model.header.componentModel
             }, null, 8, ["is", "model"]),
-            a("div", so, [
-              (l(!0), i(w, null, R(o.model.pages, (r, d) => (l(), C(s(c), {
+            l("div", so, [
+              (a(!0), i(w, null, R(o.model.pages, (r, d) => (a(), h(s(c), {
                 key: d,
                 is: "svc-side-bar-page",
                 model: r
@@ -249,19 +249,19 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             ])
           ], 512)
         ], 512), [
-          [L, o.model.renderContainer]
+          [K, o.model.renderContainer]
         ]),
-        o.model.sideAreaComponentName ? (l(), C(s(c), {
+        o.model.sideAreaComponentName ? (a(), h(s(c), {
           key: 0,
           is: o.model.sideAreaComponentName,
           model: o.model.sideAreaComponentData
         }, null, 8, ["is", "model"])) : p("", !0)
       ])
     ], 2)), [
-      [L, o.model.renderRoot]
+      [K, o.model.renderRoot]
     ]);
   }
-}), no = { class: "svc-side-bar__container-header" }, lo = { class: "svc-side-bar__container-actions" }, ao = {
+}), no = { class: "svc-side-bar__container-header" }, ao = { class: "svc-side-bar__container-actions" }, lo = {
   key: 0,
   class: "svc-side-bar__container-title"
 }, io = /* @__PURE__ */ g({
@@ -271,14 +271,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", no, [
-      a("div", lo, [
+    return f(() => t.model), (e, o) => (a(), i("div", no, [
+      l("div", ao, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (l(), i("div", ao, $(e.model.title), 1)) : p("", !0)
+      e.model.title ? (a(), i("div", lo, $(e.model.title), 1)) : p("", !0)
     ]));
   }
 }), ro = /* @__PURE__ */ g({
@@ -288,7 +288,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.visible ? (l(), C(s(c), {
+    return f(() => t.model), (e, o) => e.model.visible ? (a(), h(s(c), {
       key: 0,
       is: e.model.componentName,
       model: e.model.componentData
@@ -301,7 +301,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.isVisible ? (l(), C(s(c), {
+    return f(() => t.model), (e, o) => e.model.isVisible ? (a(), h(s(c), {
       key: 0,
       is: "sv-list",
       model: e.model.list
@@ -314,14 +314,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", {
       class: _(e.model.rootCss)
     }, [
       v(s(c), {
         is: "svc-search",
         model: e.model.searchManager
       }, null, 8, ["model"]),
-      e.model.survey ? (l(), C(s(Q), {
+      e.model.survey ? (a(), h(s(Q), {
         key: 0,
         survey: e.model.survey
       }, null, 8, ["survey"])) : p("", !0)
@@ -334,14 +334,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(!0), i(w, null, R(e.model.actions, (n, r) => (l(), C(s(c), {
+    return f(() => t.model), (e, o) => (a(!0), i(w, null, R(e.model.actions, (n, r) => (a(), h(s(c), {
       key: r,
       is: "svc-tab-button",
       model: n
     }, null, 8, ["model"]))), 128));
   }
-}), vo = { class: "svc-sidebar-tabs__top-container" }, mo = { class: "svc-sidebar-tabs__collapse-button" }, _o = /* @__PURE__ */ a("div", { class: "svc-sidebar-tabs__separator" }, [
-  /* @__PURE__ */ a("div")
+}), vo = { class: "svc-sidebar-tabs__top-container" }, mo = { class: "svc-sidebar-tabs__collapse-button" }, _o = /* @__PURE__ */ l("div", { class: "svc-sidebar-tabs__separator" }, [
+  /* @__PURE__ */ l("div")
 ], -1), go = { class: "svc-sidebar-tabs__items" }, bo = { class: "svc-sidebar-tabs__bottom-container" }, yo = { class: "svc-sidebar-tabs__items" }, ho = /* @__PURE__ */ g({
   __name: "TabControl",
   props: {
@@ -349,11 +349,11 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", {
       class: _(e.model.sideBarClassName)
     }, [
-      a("div", vo, [
-        a("div", mo, [
+      l("div", vo, [
+        l("div", mo, [
           v(s(c), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
@@ -362,7 +362,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         _o,
         v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
-            a("div", go, [
+            l("div", go, [
               v(s(c), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
@@ -372,8 +372,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           _: 1
         })
       ]),
-      a("div", bo, [
-        a("div", yo, [
+      l("div", bo, [
+        l("div", yo, [
           v(s(c), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
@@ -382,24 +382,24 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), Co = {
+}), qo = {
   key: 0,
   class: "svc-menu-action"
-}, qo = ["title"], ko = { class: "svc-menu-action__icon" }, $o = { class: "svc-menu-action__icon-container" }, wo = /* @__PURE__ */ g({
+}, Co = ["title"], ko = { class: "svc-menu-action__icon" }, $o = { class: "svc-menu-action__icon-container" }, wo = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => e.model.visible ? (l(), i("div", Co, [
-      h((l(), i("div", {
+    return f(() => t.model), (e, o) => e.model.visible ? (a(), i("div", qo, [
+      C((a(), i("div", {
         class: _(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        a("div", ko, [
-          a("div", $o, [
+        l("div", ko, [
+          l("div", $o, [
             v(s(c), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
@@ -407,27 +407,27 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, qo)), [
+      ], 10, Co)), [
         [s(D), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ])) : p("", !0);
   }
-}), fo = { class: "svc-property-grid-placeholder" }, To = { class: "svc-property-grid-placeholder__header" }, Do = { class: "svc-property-grid-placeholder__title" }, No = { class: "svc-property-grid-placeholder__description" }, Mo = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
-  /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__gap" }),
-  /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__image" })
+}), fo = { class: "svc-property-grid-placeholder" }, To = { class: "svc-property-grid-placeholder__header" }, Do = { class: "svc-property-grid-placeholder__title" }, No = { class: "svc-property-grid-placeholder__description" }, Mo = /* @__PURE__ */ l("div", { class: "svc-property-grid-placeholder__content" }, [
+  /* @__PURE__ */ l("div", { class: "svc-property-grid-placeholder__gap" }),
+  /* @__PURE__ */ l("div", { class: "svc-property-grid-placeholder__image" })
 ], -1), So = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(u) {
     const t = ue;
-    return (e, o) => (l(), i("div", fo, [
-      a("div", To, [
-        a("span", Do, $(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        a("span", No, $(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+    return (e, o) => (a(), i("div", fo, [
+      l("div", To, [
+        l("span", Do, $(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        l("span", No, $(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
       Mo
     ]));
   }
-}), Io = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Bo = {
+}), Bo = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Io = {
   key: 0,
   class: "svc-side-bar__container-title"
 }, Eo = {
@@ -440,31 +440,31 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", Io, [
-      e.model.subTitle ? p("", !0) : (l(), i("div", Bo, $(e.model.title), 1)),
-      e.model.subTitle ? (l(), i("div", Eo, [
-        a("span", Po, $(e.model.title), 1),
-        a("span", Ro, $(e.model.subTitle), 1)
+    return f(() => t.model), (e, o) => (a(), i("div", Bo, [
+      e.model.subTitle ? p("", !0) : (a(), i("div", Io, $(e.model.title), 1)),
+      e.model.subTitle ? (a(), i("div", Eo, [
+        l("span", Po, $(e.model.title), 1),
+        l("span", Ro, $(e.model.subTitle), 1)
       ])) : p("", !0)
     ]));
   }
-}), Ao = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, zo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Lo = { class: "svc-sidebar__header-content" }, Fo = { class: "svc-sidebar__header-caption" }, Ko = { class: "svc-sidebar__header-title" }, Uo = { class: "svc-sidebar__header-subtitle" }, Ho = /* @__PURE__ */ g({
+}), Ao = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Lo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, zo = { class: "svc-sidebar__header-content" }, Fo = { class: "svc-sidebar__header-caption" }, Ko = { class: "svc-sidebar__header-title" }, Uo = { class: "svc-sidebar__header-subtitle" }, Ho = /* @__PURE__ */ g({
   __name: "SideBarPropertyGridHeader",
   props: {
     model: {}
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", Ao, [
-      a("div", zo, [
-        a("div", Lo, [
-          h((l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", Ao, [
+      l("div", Lo, [
+        l("div", zo, [
+          C((a(), i("div", {
             class: _(e.model.buttonClassName),
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
-            a("div", Fo, [
-              a("span", Ko, $(e.model.title), 1),
-              a("span", Uo, $(e.model.tooltip), 1)
+            l("div", Fo, [
+              l("span", Ko, $(e.model.title), 1),
+              l("span", Uo, $(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(D), { processEsc: !1 }]
@@ -486,14 +486,14 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     element: {}
   },
   setup(u) {
-    return (t, e) => (l(), i("div", { key: t.errorKey }, [
+    return (t, e) => (a(), i("div", { key: t.errorKey }, [
       v(s(c), {
         is: "sv-svg-icon",
         class: _(t.cssClasses.error.icon),
         iconName: "icon-alert_24x24",
         size: "auto"
       }, null, 8, ["class"]),
-      a("span", {
+      l("span", {
         class: _(
           t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
         )
@@ -520,15 +520,15 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(u) {
     const t = u, e = (n) => {
       t.click(), t.allowBubble || n.stopPropagation();
-    }, o = () => new Ce().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
-    return (n, r) => (l(), i(w, null, [
-      n.iconName ? p("", !0) : (l(), i(w, { key: 0 }, [
-        n.disabled ? (l(), i("span", {
+    }, 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, r) => (a(), i(w, null, [
+      n.iconName ? p("", !0) : (a(), i(w, { key: 0 }, [
+        n.disabled ? (a(), i("span", {
           key: 0,
           class: _(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
         }, $(n.text), 11, Qo)) : p("", !0),
-        h((l(), i("span", {
+        C((a(), i("span", {
           role: "button",
           class: _(["svc-action-button", o()]),
           onClick: e,
@@ -539,8 +539,8 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           [s(D)]
         ])
       ], 64)),
-      n.iconName ? (l(), i(w, { key: 1 }, [
-        n.disabled ? (l(), i("span", {
+      n.iconName ? (a(), i(w, { key: 1 }, [
+        n.disabled ? (a(), i("span", {
           key: 0,
           class: _(o()),
           title: n.title
@@ -551,7 +551,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             size: "auto"
           }, null, 8, ["iconName"])
         ], 10, Wo)) : p("", !0),
-        h((l(), i("span", {
+        C((a(), i("span", {
           role: "button",
           onClick: e,
           class: _(o()),
@@ -568,7 +568,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 64)) : p("", !0)
     ], 64));
   }
-}), Zo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], Xo = /* @__PURE__ */ a("div", { class: "svc-switcher__icon-thumb" }, null, -1), Yo = [
+}), Zo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], Xo = /* @__PURE__ */ l("div", { class: "svc-switcher__icon-thumb" }, null, -1), Yo = [
   Xo
 ], xo = {
   key: 0,
@@ -583,7 +583,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.item), (e, o) => h((l(), i("button", {
+    return f(() => t.item), (e, o) => C((a(), i("button", {
       class: _(e.item.getActionBarItemCss()),
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
@@ -598,10 +598,10 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       "aria-expanded": e.item.ariaExpanded,
       role: e.item.ariaRole
     }, [
-      a("div", {
+      l("div", {
         class: _(e.item.getSwitcherIconCss())
       }, Yo, 2),
-      e.item.hasTitle ? (l(), i("span", xo, $(e.item.title), 1)) : p("", !0)
+      e.item.hasTitle ? (a(), i("span", xo, $(e.item.title), 1)) : p("", !0)
     ], 42, Zo)), [
       [s(D), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
@@ -622,36 +622,36 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }, n = () => {
       t.model.device !== "desktop" && t.model.deactivateZoom();
     };
-    return (r, d) => (l(), i("div", {
+    return (r, d) => (a(), i("div", {
       class: _(r.model.getRootCss()),
       onKeydown: d[0] || (d[0] = (m) => r.model.tryToZoom(void 0, m)),
       onMouseover: d[1] || (d[1] = (m) => o()),
       onMouseout: d[2] || (d[2] = (m) => n())
     }, [
-      r.model.hasFrame ? p("", !0) : (l(), i("div", ss, [
+      r.model.hasFrame ? p("", !0) : (a(), i("div", ss, [
         v(s(c), {
           is: "survey-widget",
           model: r.model.survey
         }, null, 8, ["model"])
       ])),
-      r.model.hasFrame ? (l(), i("div", {
+      r.model.hasFrame ? (a(), i("div", {
         key: 1,
         class: "svd-simulator-wrapper",
         id: "svd-simulator-wrapper",
-        style: F({
+        style: z({
           width: e.value.frameWidth + "px",
           height: e.value.frameHeight + "px"
         })
       }, [
-        a("div", {
+        l("div", {
           class: "svd-simulator",
-          style: F({
+          style: z({
             width: e.value.deviceWidth + "px",
             height: e.value.deviceHeight + "px",
             transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
           })
         }, [
-          a("div", ts, [
+          l("div", ts, [
             v(s(c), {
               is: "survey-widget",
               model: r.model.survey
@@ -661,7 +661,7 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 4)) : p("", !0)
     ], 34));
   }
-}), ls = { class: "svc-surface-placeholder" }, as = { class: "svc-surface-placeholder__text" }, is = { class: "svc-surface-placeholder__title" }, rs = { class: "svc-surface-placeholder__description" }, W = /* @__PURE__ */ g({
+}), as = { class: "svc-surface-placeholder" }, ls = { class: "svc-surface-placeholder__text" }, is = { class: "svc-surface-placeholder__title" }, rs = { class: "svc-surface-placeholder__description" }, W = /* @__PURE__ */ g({
   __name: "SurfacePlaceholder",
   props: {
     name: {},
@@ -669,13 +669,13 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     placeholderDescriptionText: {}
   },
   setup(u) {
-    return (t, e) => (l(), i("div", ls, [
-      a("div", {
+    return (t, e) => (a(), i("div", as, [
+      l("div", {
         class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + t.name])
       }, null, 2),
-      a("div", as, [
-        a("div", is, $(t.placeholderTitleText), 1),
-        a("div", rs, $(t.placeholderDescriptionText), 1)
+      l("div", ls, [
+        l("div", is, $(t.placeholderTitleText), 1),
+        l("div", rs, $(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
@@ -689,18 +689,18 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (l(), C(W, {
+      e.model.survey.isEmpty ? (a(), h(W, {
         key: 0,
         name: "preview",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (l(), i("div", {
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", {
         key: 1,
         class: "svc-plugin-tab__content",
         onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
@@ -709,13 +709,13 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (l(), C(s(c), {
+        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 ? (l(), i("div", ds, [
+      e.model.isPageToolbarVisible ? (a(), i("div", ds, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -731,12 +731,12 @@ const ze = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   },
   setup(u) {
     const t = u, e = k(() => t.model.testAgainAction);
-    return f(() => e.value), (o, n) => h((l(), i("div", {
+    return f(() => e.value), (o, n) => C((a(), i("div", {
       role: "button",
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      a("span", us, $(e.value.title), 1)
+      l("span", us, $(e.value.title), 1)
     ])), [
       [s(D)]
     ]);
@@ -759,7 +759,7 @@ function A(u, t, e) {
 const vs = {
   key: 0,
   class: "svd-test-results"
-}, ms = { class: "svd-test-results__content" }, _s = { class: "svd-test-results__header" }, gs = { class: "svd-test-results__header-text" }, bs = { class: "svd-test-results__header-types" }, ys = { class: "svd-test-results__text svd-light-bg-color" }, hs = { class: "svd-test-results__table svd-light-bg-color" }, Cs = { class: "svd-light-background-color" }, qs = { class: "svd-dark-border-color" }, ks = { class: "svd-dark-border-color" }, $s = /* @__PURE__ */ g({
+}, ms = { class: "svd-test-results__content" }, _s = { class: "svd-test-results__header" }, gs = { class: "svd-test-results__header-text" }, bs = { class: "svd-test-results__header-types" }, ys = { class: "svd-test-results__text svd-light-bg-color" }, hs = { class: "svd-test-results__table svd-light-bg-color" }, qs = { class: "svd-light-background-color" }, Cs = { class: "svd-dark-border-color" }, ks = { class: "svd-dark-border-color" }, $s = /* @__PURE__ */ g({
   __name: "SurveyResults",
   props: {
     survey: {}
@@ -769,11 +769,11 @@ const vs = {
       () => t.survey ? new $e(t.survey) : void 0,
       [() => t.survey]
     );
-    return (o, n) => s(e) ? (l(), i("div", vs, [
-      a("div", ms, [
-        a("div", _s, [
-          a("div", gs, $(s(e).surveyResultsText), 1),
-          a("div", bs, [
+    return (o, n) => s(e) ? (a(), i("div", vs, [
+      l("div", ms, [
+        l("div", _s, [
+          l("div", gs, $(s(e).surveyResultsText), 1),
+          l("div", bs, [
             v(s(c), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
@@ -790,21 +790,21 @@ const vs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        h(a("div", ys, [
-          a("div", null, $(s(e).resultText), 1)
+        C(l("div", ys, [
+          l("div", null, $(s(e).resultText), 1)
         ], 512), [
-          [L, s(e).resultViewType === "text"]
+          [K, s(e).resultViewType === "text"]
         ]),
-        h(a("div", hs, [
-          a("table", null, [
-            a("thead", null, [
-              a("tr", Cs, [
-                a("th", qs, $(s(e).resultsTitle), 1),
-                a("th", ks, $(s(e).resultsDisplayValue), 1)
+        C(l("div", hs, [
+          l("table", null, [
+            l("thead", null, [
+              l("tr", qs, [
+                l("th", Cs, $(s(e).resultsTitle), 1),
+                l("th", ks, $(s(e).resultsDisplayValue), 1)
               ])
             ]),
-            a("tbody", null, [
-              (l(!0), i(w, null, R(s(e).resultData, (r, d) => (l(), C(s(c), {
+            l("tbody", null, [
+              (a(!0), i(w, null, R(s(e).resultData, (r, d) => (a(), h(s(c), {
                 is: "survey-results-table-row",
                 model: r,
                 key: d
@@ -812,7 +812,7 @@ const vs = {
             ])
           ])
         ], 512), [
-          [L, s(e).resultViewType === "table"]
+          [K, s(e).resultViewType === "table"]
         ])
       ])
     ])) : p("", !0);
@@ -824,19 +824,19 @@ const vs = {
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i(w, null, [
-      h((l(), i("tr", {
+    return f(() => t.model), (e, o) => (a(), i(w, null, [
+      C((a(), i("tr", {
         onClick: o[0] || (o[0] = //@ts-ignore
         (...n) => e.model.toggle && e.model.toggle(...n))
       }, [
-        a("td", {
+        l("td", {
           class: "svd-dark-border-color",
-          style: F({ paddingLeft: e.model.textMargin })
+          style: z({ paddingLeft: e.model.textMargin })
         }, [
-          e.model.isNode ? (l(), i("span", {
+          e.model.isNode ? (a(), i("span", {
             key: 0,
             class: _(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
-            style: F({ left: e.model.markerMargin })
+            style: z({ left: e.model.markerMargin })
           }, [
             v(s(c), {
               is: "sv-svg-icon",
@@ -844,13 +844,13 @@ const vs = {
               size: 16
             })
           ], 6)) : p("", !0),
-          e.model.question ? (l(), C(s(c), {
+          e.model.question ? (a(), h(s(c), {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (l(), i("span", ws, $(e.model.title), 1))
+          }, null, 8, ["locString"])) : (a(), i("span", ws, $(e.model.title), 1))
         ], 4),
-        a("td", {
+        l("td", {
           class: _({
             "svd-test-results__node-value": e.model.isNode,
             "svd-dark-border-color": !e.model.isNode
@@ -859,7 +859,7 @@ const vs = {
       ])), [
         [s(D)]
       ]),
-      e.model.isNode && !e.model.collapsed ? (l(!0), i(w, { key: 0 }, R(e.model.data, (n, r) => (l(), C(s(c), {
+      e.model.isNode && !e.model.collapsed ? (a(!0), i(w, { key: 0 }, R(e.model.data, (n, r) => (a(), h(s(c), {
         is: "survey-results-table-row",
         model: n,
         key: r + 1
@@ -872,38 +872,38 @@ const vs = {
     model: {}
   },
   setup(u) {
-    const t = u, e = B();
-    return f(() => t.model), E(() => t.model.init(window.ace.edit(e.value))), (o, n) => (l(), i("div", Ts, [
-      a("div", Ds, [
-        a("div", {
+    const t = u, e = I();
+    return f(() => t.model), E(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", Ts, [
+      l("div", Ds, [
+        l("div", {
           class: "svc-json-editor-tab__ace-editor",
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        h(a("div", Ns, [
+        C(l("div", Ns, [
           v(s(c), {
             is: "sv-list",
             model: o.model.errorList
           }, null, 8, ["model"])
         ], 512), [
-          [L, o.model.hasErrors]
+          [K, o.model.hasErrors]
         ])
       ])
     ]));
   }
-}), Ss = { class: "svc-creator-tab__content" }, Is = { class: "svc-json-editor-tab__content" }, Bs = ["aria-label", "disabled"], Es = { class: "svc-json-editor-tab__errros_list" }, Ps = /* @__PURE__ */ g({
+}), Ss = { class: "svc-creator-tab__content" }, Bs = { class: "svc-json-editor-tab__content" }, Is = ["aria-label", "disabled"], Es = { class: "svc-json-editor-tab__errros_list" }, Ps = /* @__PURE__ */ g({
   __name: "JsonEditorTextArea",
   props: {
     model: {}
   },
   setup(u) {
-    const t = u, e = B(), o = t.model;
+    const t = u, e = I(), o = t.model;
     return o.canShowErrors = !1, f(() => t.model), E(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (l(), i("div", Ss, [
-      a("div", Is, [
-        h(a("textarea", {
+    }), (n, r) => (a(), i("div", Ss, [
+      l("div", Bs, [
+        C(l("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
           disabled: s(o).readOnly,
@@ -912,21 +912,21 @@ const vs = {
           ref_key: "inputEl",
           ref: e
         }, `
-      `, 40, Bs), [
+      `, 40, Is), [
           [de, s(o).text]
         ]),
-        h(a("div", Es, [
+        C(l("div", Es, [
           v(s(c), {
             is: "sv-list",
             model: s(o).errorList
           }, null, 8, ["model"])
         ], 512), [
-          [L, s(o).hasErrors]
+          [K, s(o).hasErrors]
         ])
       ])
     ]));
   }
-}), Rs = { class: "svc-json-error__container" }, Vs = { class: "svc-json-error__title" }, As = ["title", "aria-label"], zs = /* @__PURE__ */ g({
+}), Rs = { class: "svc-json-error__container" }, Vs = { class: "svc-json-error__title" }, As = ["title", "aria-label"], Ls = /* @__PURE__ */ g({
   __name: "JsonEditorErrorItem",
   props: {
     item: {}
@@ -937,21 +937,21 @@ const vs = {
     const e = (o) => {
       o.stopPropagation(), t.item.data.fixError();
     };
-    return (o, n) => (l(), i(w, null, [
+    return (o, n) => (a(), i(w, null, [
       v(s(c), {
         is: "sv-svg-icon",
         iconName: o.item.iconName,
         size: o.item.iconSize,
         class: _("svc-json-error__icon")
       }, null, 8, ["iconName", "size"]),
-      a("div", Rs, [
-        a("div", Vs, [
+      l("div", Rs, [
+        l("div", Vs, [
           v(s(c), {
             is: "survey-string",
             locString: o.item.locTitle
           }, null, 8, ["locString"])
         ]),
-        o.item.data.showFixButton ? h((l(), i("button", {
+        o.item.data.showFixButton ? C((a(), i("button", {
           key: 0,
           type: "button",
           onClick: e,
@@ -970,7 +970,7 @@ const vs = {
       ])
     ], 64));
   }
-}), Ls = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
+}), zs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
@@ -981,14 +981,14 @@ const vs = {
     const e = (o) => {
       o.stopPropagation(), t.model.action();
     };
-    return (o, n) => h((l(), i("div", {
+    return (o, n) => C((a(), i("div", {
       role: "button",
       class: _(["svc-logic-tab__content-action svc-btn", {
         "svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
       }]),
       onClick: e
     }, [
-      a("span", Ls, $(o.model.title), 1)
+      l("span", zs, $(o.model.title), 1)
     ], 2)), [
       [s(D)]
     ]);
@@ -1003,26 +1003,26 @@ const vs = {
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", Fs, [
-      a("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", Fs, [
+      l("div", {
         class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
-        e.model.hasItems ? (l(), i(w, { key: 0 }, [
+        e.model.hasItems ? (a(), i(w, { key: 0 }, [
           v(s(Q), {
             model: e.model.itemsSurvey
           }, null, 8, ["model"]),
-          e.model.readOnly ? p("", !0) : (l(), C(te, {
+          e.model.readOnly ? p("", !0) : (a(), h(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
         ], 64)) : p("", !0),
-        e.model.hasItems ? p("", !0) : (l(), i("div", Ks, [
+        e.model.hasItems ? p("", !0) : (a(), i("div", Ks, [
           v(W, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
             placeholderDescriptionText: e.model.placeholderDescriptionText
           }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-          e.model.readOnly ? p("", !0) : (l(), C(te, {
+          e.model.readOnly ? p("", !0) : (a(), h(te, {
             key: 0,
             model: e.model.addNewButton
           }, null, 8, ["model"]))
@@ -1030,7 +1030,7 @@ const vs = {
       ], 2)
     ]));
   }
-}), Hs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Os = ["id"];
+}), Hs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage", "aria-expanded"], Os = ["id"];
 ce.Instance.registerRenderer(
   "dropdown",
   "logicoperator",
@@ -1042,7 +1042,7 @@ const Qs = /* @__PURE__ */ g({
     question: {}
   },
   setup(u) {
-    const t = u, e = B(), o = k(() => t.question.dropdownListModel ?? new qe(t.question));
+    const t = u, e = I(), o = k(() => t.question.dropdownListModel ?? new Ce(t.question));
     H(t, e, (m) => {
       we(m);
     });
@@ -1056,11 +1056,11 @@ const Qs = /* @__PURE__ */ g({
       var b;
       (b = o.value) == null || b.keyHandler(m);
     };
-    return (m, b) => (l(), i("div", {
+    return (m, b) => (a(), i("div", {
       class: _(m.question.cssClasses.selectWrapper)
     }, [
-      m.question.isReadOnly ? p("", !0) : (l(), i(w, { key: 0 }, [
-        a("div", {
+      m.question.isReadOnly ? p("", !0) : (a(), i(w, { key: 0 }, [
+        l("div", {
           class: _(m.question.getControlClass()),
           onClick: n,
           onKeyup: d,
@@ -1071,20 +1071,22 @@ const Qs = /* @__PURE__ */ g({
           role: m.question.ariaRole,
           "aria-required": m.question.ariaRequired,
           "aria-label": m.question.ariaLabel,
+          "aria-labelledby": m.question.ariaLabelledBy,
           "aria-invalid": m.question.ariaInvalid,
-          "aria-describedby": m.question.ariaDescribedBy
+          "aria-errormessage": m.question.ariaErrormessage,
+          "aria-expanded": m.question.ariaExpanded
         }, [
-          a("div", {
+          l("div", {
             class: _(m.question.cssClasses.controlValue)
           }, [
-            m.question.selectedItemLocText ? (l(), C(s(c), {
+            m.question.selectedItemLocText ? (a(), h(s(c), {
               key: 0,
               is: "survey-string",
               locString: m.question.selectedItemLocText
             }, null, 8, ["locString"])) : p("", !0),
-            a("div", null, $(m.question.readOnlyText), 1)
+            l("div", null, $(m.question.readOnlyText), 1)
           ], 2),
-          m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? h((l(), i("div", {
+          m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? C((a(), i("div", {
             key: 0,
             class: _(m.question.cssClasses.cleanButton),
             onClick: r
@@ -1097,7 +1099,7 @@ const Qs = /* @__PURE__ */ g({
               title: m.question.clearCaption
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [L, !m.question.isEmpty()]
+            [K, !m.question.isEmpty()]
           ]) : p("", !0)
         ], 42, Hs),
         v(s(c), {
@@ -1105,18 +1107,18 @@ const Qs = /* @__PURE__ */ g({
           model: m.question.popupModel
         }, null, 8, ["model"])
       ], 64)),
-      m.question.isReadOnly ? (l(), i("div", {
+      m.question.isReadOnly ? (a(), i("div", {
         key: 1,
         disabled: "",
         class: _(m.question.getControlClass()),
         id: m.question.inputId
       }, [
-        m.question.selectedItemLocText ? (l(), C(s(c), {
+        m.question.selectedItemLocText ? (a(), h(s(c), {
           key: 0,
           is: "survey-string",
           locString: m.question.selectedItemLocText
         }, null, 8, ["locString"])) : p("", !0),
-        a("div", null, $(m.question.readOnlyText), 1)
+        l("div", null, $(m.question.readOnlyText), 1)
       ], 10, Os)) : p("", !0)
     ], 2));
   }
@@ -1126,10 +1128,10 @@ const Qs = /* @__PURE__ */ g({
     question: {}
   },
   setup(u) {
-    const t = u, e = B();
+    const t = u, e = I();
     H(t, e);
     const o = k(() => t.question.embeddedSurvey);
-    return (n, r) => n.question && o.value && o.value.currentPage ? (l(), C(s(c), {
+    return (n, r) => n.question && o.value && o.value.currentPage ? (a(), h(s(c), {
       key: 0,
       is: "survey-page",
       page: o.value.currentPage,
@@ -1143,8 +1145,8 @@ const Qs = /* @__PURE__ */ g({
     question: {}
   },
   setup(u) {
-    const t = u, e = B(), o = ue.getString("pe.clear");
-    return H(t, e), (n, r) => (l(), i(w, null, [
+    const t = u, e = I(), o = ue.getString("pe.clear");
+    return H(t, e), (n, r) => (a(), i(w, null, [
       v(s(c), {
         is: "svc-action-button",
         text: n.question.linkValueText,
@@ -1155,7 +1157,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 ? (l(), C(s(c), {
+      !n.question.isReadOnly && n.question.showClear ? (a(), h(s(c), {
         key: 0,
         is: "svc-action-button",
         text: s(o),
@@ -1175,23 +1177,23 @@ const Qs = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", {
       class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
     }, [
-      e.model.isEmpty ? (l(), C(W, {
+      e.model.isEmpty ? (a(), h(W, {
         key: 0,
         name: "translation",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.isEmpty ? p("", !0) : (l(), i("div", js, [
-        a("div", Js, [
-          a("div", Zs, [
+      e.model.isEmpty ? p("", !0) : (a(), i("div", js, [
+        l("div", Js, [
+          l("div", Zs, [
             v(s(Q), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
-          a("div", Xs, [
+          l("div", Xs, [
             v(s(Q), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
@@ -1207,7 +1209,7 @@ const Qs = /* @__PURE__ */ g({
   return e;
 }, et = {}, ot = { class: "sd-translation-line-skeleton" };
 function st(u, t) {
-  return l(), i("div", ot);
+  return a(), i("div", ot);
 }
 const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
@@ -1215,10 +1217,10 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     item: {}
   },
   setup(u) {
-    return (t, e) => (l(), i("div", {
+    return (t, e) => (a(), i("div", {
       class: _(t.item.data.containerCss)
     }, [
-      a("span", {
+      l("span", {
         class: _(t.item.data.additionalTitleCss)
       }, $(t.item.data.additionalTitle), 3),
       v(s(c), {
@@ -1227,10 +1229,10 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       }, null, 8, ["item"])
     ], 2));
   }
-}), lt = {
+}), at = {
   key: 1,
   class: "svc-plugin-tab__content"
-}, at = {
+}, lt = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
 }, it = /* @__PURE__ */ g({
@@ -1240,29 +1242,29 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.model), (e, o) => (l(), i("div", {
+    return f(() => t.model), (e, o) => (a(), i("div", {
       class: _(["svc-creator-tab__content svc-test-tab__content", {
         "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
       }])
     }, [
-      e.model.survey.isEmpty ? (l(), C(W, {
+      e.model.survey.isEmpty ? (a(), h(W, {
         key: 0,
         name: "theme",
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (l(), i("div", lt, [
+      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", at, [
         v(s(c), {
           is: "survey-simulator",
           model: e.model.simulator
         }, null, 8, ["model"]),
-        e.model.showResults ? (l(), C(s(c), {
+        e.model.showResults ? (a(), h(s(c), {
           key: 0,
           is: "survey-results",
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (l(), i("div", at, [
+      e.model.isPageToolbarVisible ? (a(), i("div", lt, [
         v(s(c), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -1270,45 +1272,51 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 2));
   }
-}), rt = ["disabled", "value"], dt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], ct = /* @__PURE__ */ g({
+}), rt = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], dt = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], ct = /* @__PURE__ */ g({
   __name: "Color",
   props: {
     question: {}
   },
   setup(u) {
-    return H(u, B()), (e, o) => (l(), i("div", {
+    return H(u, I()), (e, o) => (a(), i("div", {
       class: _(e.question.cssClasses.root),
       onKeydown: o[5] || (o[5] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
     }, [
-      a("label", {
+      l("label", {
         class: _(e.question.getSwatchCss()),
-        style: F(e.question.getSwatchStyle())
+        style: z(e.question.getSwatchStyle())
       }, [
         v(s(c), {
           is: "sv-svg-icon",
           iconName: e.question.cssClasses.swatchIcon,
           size: "auto"
         }, null, 8, ["iconName"]),
-        a("input", {
+        l("input", {
           type: "color",
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.colorInput),
           value: e.question.renderedColorValue,
           tabindex: "-1",
           onChange: o[0] || (o[0] = //@ts-ignore
-          (...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n))
+          (...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n)),
+          "aria-required": e.question.a11y_input_ariaRequired,
+          "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
+          "aria-label": e.question.a11y_input_ariaLabel,
+          "aria-invalid": e.question.a11y_input_ariaInvalid,
+          "aria-describedby": e.question.a11y_input_ariaDescribedBy
         }, null, 42, rt)
       ], 6),
-      a("input", {
+      l("input", {
         autocomplete: "off",
         disabled: e.question.isInputReadOnly,
         id: e.question.inputId,
         placeholder: e.question.renderedPlaceholder,
-        "aria-required": e.question.ariaRequired,
-        "aria-label": e.question.ariaLabel,
-        "aria-invalid": e.question.ariaInvalid,
-        "aria-describedby": e.question.ariaDescribedBy,
+        "aria-required": e.question.a11y_input_ariaRequired,
+        "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
+        "aria-label": e.question.a11y_input_ariaLabel,
+        "aria-invalid": e.question.a11y_input_ariaInvalid,
+        "aria-describedby": e.question.a11y_input_ariaDescribedBy,
         onChange: o[1] || (o[1] = //@ts-ignore
         (...n) => e.question.onChange && e.question.onChange(...n)),
         onKeyup: o[2] || (o[2] = //@ts-ignore
@@ -1320,11 +1328,16 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
       }, null, 42, dt),
-      e.question.showDropdownAction ? (l(), i(w, { key: 0 }, [
-        v(s(c), {
-          is: "sv-action-bar-item",
-          item: e.question.dropdownAction
-        }, null, 8, ["item"]),
+      e.question.showDropdownAction ? (a(), i(w, { key: 0 }, [
+        l("div", {
+          "aria-hidden": "true",
+          class: _(e.question.cssClasses.choicesButtonWrapper)
+        }, [
+          v(s(c), {
+            is: "sv-action-bar-item",
+            item: e.question.dropdownAction
+          }, null, 8, ["item"])
+        ], 2),
         v(s(c), {
           is: "sv-popup",
           model: e.question.dropdownAction.popupModel
@@ -1342,10 +1355,10 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
     const t = u;
     f(() => t.item);
     const e = () => ({ backgroundColor: t.item.value });
-    return (o, n) => (l(), i(w, null, [
-      a("span", {
+    return (o, n) => (a(), i(w, null, [
+      l("span", {
         class: "spg-color-editor__color-swatch",
-        style: F(e())
+        style: z(e())
       }, null, 4),
       v(s(c), {
         is: "survey-string",
@@ -1353,14 +1366,14 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       }, null, 8, ["locString"])
     ], 64));
   }
-}), pt = ["disabled", "value", "placeholder"], vt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], mt = ["disabled"], _t = ["for", "aria-label"], gt = /* @__PURE__ */ g({
+}), pt = ["disabled", "value", "placeholder"], vt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], mt = ["title", "disabled"], _t = ["for", "aria-label"], gt = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
   },
   setup(u) {
-    const t = B();
-    return H(u, t), (o, n) => (l(), i("div", {
+    const t = I();
+    return H(u, t), (o, n) => (a(), i("div", {
       class: _(o.question.cssClasses.root),
       onDragenter: n[5] || (n[5] = //@ts-ignore
       (...r) => o.question.onDragEnter && o.question.onDragEnter(...r)),
@@ -1375,7 +1388,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      a("input", {
+      l("input", {
         type: "text",
         disabled: o.question.isInputReadOnly,
         class: _(o.question.cssClasses.control),
@@ -1386,7 +1399,7 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
       }, null, 42, pt),
-      a("input", {
+      l("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
         class: _(o.question.cssClasses.fileInput),
@@ -1402,11 +1415,11 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         onChange: n[2] || (n[2] = //@ts-ignore
         (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
       }, null, 42, vt),
-      a("div", {
+      l("div", {
         class: _(o.question.cssClasses.buttonsContainer)
       }, [
-        h((l(), i("button", {
-          type: "button",
+        C((a(), i("button", {
+          title: o.question.clearButtonCaption,
           class: _(o.question.cssClasses.clearButton),
           disabled: o.question.getIsClearButtonDisabled(),
           onClick: n[3] || (n[3] = //@ts-ignore
@@ -1415,14 +1428,12 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           v(s(c), {
             is: "sv-svg-icon",
             iconName: o.question.cssClasses.clearButtonIcon,
-            size: "auto",
-            title: o.question.clearButtonCaption
-          }, null, 8, ["iconName", "title"])
+            size: "auto"
+          }, null, 8, ["iconName"])
         ], 10, mt)), [
           [s(D)]
         ]),
-        h((l(), i("label", {
-          role: "button",
+        C((a(), i("label", {
           class: _(o.question.getChooseButtonCss()),
           for: o.question.inputId,
           "aria-label": o.question.chooseButtonCaption,
@@ -1441,26 +1452,29 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ], 2)
     ], 34));
   }
-}), bt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], yt = ["disabled"], ht = ["disabled"], Ct = /* @__PURE__ */ g({
+}), bt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], yt = ["disabled"], ht = ["disabled"], qt = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
   },
   setup(u) {
-    return H(u, B()), (e, o) => (l(), i("div", {
+    return H(u, I()), (e, o) => (a(), i("div", {
       class: _(e.question.cssClasses.root),
       onKeydown: o[18] || (o[18] = //@ts-ignore
       (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
     }, [
-      a("input", {
+      l("input", {
+        role: "spinbutton",
         autocomplete: "off",
         disabled: e.question.isInputReadOnly,
         id: e.question.inputId,
         placeholder: e.question.renderedPlaceholder,
-        "aria-required": e.question.ariaRequired,
-        "aria-label": e.question.ariaLabel,
-        "aria-invalid": e.question.ariaInvalid,
-        "aria-describedby": e.question.ariaDescribedBy,
+        "aria-required": e.question.a11y_input_ariaRequired,
+        "aria-label": e.question.a11y_input_ariaLabel,
+        "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
+        "aria-describedby": e.question.a11y_input_ariaDescribedBy,
+        "aria-invalid": e.question.a11y_input_ariaInvalid,
+        "aria-errormessage": e.question.a11y_input_ariaErrormessage,
         onChange: o[0] || (o[0] = //@ts-ignore
         (...n) => e.question.onChange && e.question.onChange(...n)),
         onKeydown: o[1] || (o[1] = //@ts-ignore
@@ -1476,10 +1490,11 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
       }, null, 42, bt),
-      a("span", {
+      l("span", {
         class: _(e.question.cssClasses.buttonsContainer)
       }, [
-        a("button", {
+        l("button", {
+          "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
           onClick: o[6] || (o[6] = //@ts-ignore
@@ -1502,7 +1517,8 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
             size: "auto"
           }, null, 8, ["iconName"])
         ], 42, yt),
-        a("button", {
+        l("button", {
+          "aria-hidden": "true",
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
           onClick: o[12] || (o[12] = //@ts-ignore
@@ -1528,21 +1544,21 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
       ], 2)
     ], 34));
   }
-}), qt = ["disabled", "title"], ne = /* @__PURE__ */ g({
+}), Ct = ["disabled", "title"], ne = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
   },
   setup(u) {
     const t = u, e = () => "survey-" + t.question.wrappedQuestionTemplate;
-    return H(t, B()), (o, n) => (l(), i("div", {
+    return H(t, I()), (o, n) => (a(), i("div", {
       class: _(o.question.getRootClass())
     }, [
       v(s(c), {
         is: e(),
         question: o.question
       }, null, 8, ["is", "question"]),
-      a("button", {
+      l("button", {
         class: _(o.question.cssClasses.resetButton),
         disabled: o.question.resetValueAdorner.isDisabled,
         onClick: n[0] || (n[0] = //@ts-ignore
@@ -1554,17 +1570,17 @@ const tt = /* @__PURE__ */ xs(et, [["render", st]]), nt = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, qt)
+      ], 10, Ct)
     ], 2));
   }
-}), kt = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], $t = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
-  /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
-], -1), wt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
-  /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
+}), kt = ["aria-checked", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-errormessage"], $t = /* @__PURE__ */ l("div", { class: "spg-boolean-switch__thumb" }, [
+  /* @__PURE__ */ l("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
+], -1), wt = /* @__PURE__ */ l("div", { class: "spg-boolean-switch__thumb" }, [
+  /* @__PURE__ */ l("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
 ], -1), ft = [
   $t,
   wt
-], Tt = { class: "spg-boolean-switch__caption" }, Dt = { class: "spg-boolean-switch__title" };
+], Tt = { class: "spg-boolean-switch__caption" }, Dt = ["id"];
 ce.Instance.registerRenderer(
   "boolean",
   "switch",
@@ -1577,33 +1593,38 @@ const Nt = /* @__PURE__ */ g({
     question: {}
   },
   setup(u) {
-    const t = u, e = B(null);
-    return H(t, e), (o, n) => (l(), i("div", {
+    const t = u, e = I(null);
+    return H(t, e), (o, n) => (a(), i("div", {
       class: "spg-boolean-switch",
       role: "checkbox",
-      "aria-required": o.question.ariaRequired,
-      "aria-label": o.question.ariaLabel,
-      "aria-invalid": o.question.ariaInvalid,
-      "aria-errormessage": o.question.ariaErrormessage,
+      "aria-checked": o.question.booleanValue || !1,
+      "aria-required": o.question.a11y_input_ariaRequired,
+      "aria-label": o.question.a11y_input_ariaLabel,
+      "aria-labelledby": o.question.a11y_input_ariaLabelledBy,
+      "aria-invalid": o.question.a11y_input_ariaInvalid,
+      "aria-errormessage": o.question.a11y_input_ariaErrormessage,
       onClick: n[0] || (n[0] = (r) => o.question.value = !o.question.value)
     }, [
-      h((l(), i("div", {
+      C((a(), i("div", {
         class: _(["spg-boolean-switch__button", o.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
       }, ft, 2)), [
         [s(D), { disableTabStop: !0 }]
       ]),
-      a("div", Tt, [
-        a("div", Dt, [
+      l("div", Tt, [
+        l("div", {
+          class: "spg-boolean-switch__title",
+          id: o.question.labelRenderedAriaID
+        }, [
           v(s(c), {
             is: "survey-string",
             locString: o.question.locTitle
           }, null, 8, ["locString"])
-        ])
+        ], 8, Dt)
       ])
     ], 8, kt));
   }
-}), Mt = { class: "svc-string-editor__content" }, St = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), It = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Bt = { class: "svc-string-editor__input" }, Et = ["textContent", "aria-placeholder", "contenteditable"], Pt = ["aria-placeholder", "contenteditable", "innerHTML"], Rt = {
+}), Mt = { class: "svc-string-editor__content" }, St = /* @__PURE__ */ l("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Bt = /* @__PURE__ */ l("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), It = { class: "svc-string-editor__input" }, Et = ["textContent", "aria-placeholder", "aria-label", "contenteditable"], Pt = ["aria-placeholder", "aria-label", "contenteditable", "innerHTML"], Rt = {
   key: 0,
   class: "svc-string-editor__error"
 }, Vt = /* @__PURE__ */ g({
@@ -1612,7 +1633,7 @@ const Nt = /* @__PURE__ */ g({
     locString: {}
   },
   setup(u) {
-    const t = u, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = B(), r = B(), d = A(
+    const t = u, e = k(() => t.locString.locStr), o = k(() => t.locString.creator), n = I(), r = I(), d = A(
       () => {
         const q = new fe(
           e.value,
@@ -1646,14 +1667,14 @@ const Nt = /* @__PURE__ */ g({
         var q;
         return (q = d.value) == null ? void 0 : q.showCharacterCounter;
       }
-    ), z = k(
+    ), L = k(
       () => {
         var q;
         return (q = d.value) == null ? void 0 : q.getCharacterCounterClass;
       }
     ), j = (q) => {
-      var T, I;
-      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = d.value) == null || T.onBlur(q), (I = d.value) == null ? void 0 : I.errorText;
+      var T, B;
+      return n.value && (n.value.spellcheck = !1), e.value.__isEditing = !1, (T = d.value) == null || T.onBlur(q), (B = d.value) == null ? void 0 : B.errorText;
     }, U = (q) => {
       var T;
       (T = d.value) == null || T.onFocus(q);
@@ -1661,8 +1682,8 @@ const Nt = /* @__PURE__ */ g({
       var T;
       (T = d.value) == null || T.onPaste(q);
     }, se = (q) => {
-      var T, I;
-      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (I = d.value) == null || I.onClick(q);
+      var T, B;
+      (T = n.value) == null || T.focus(), e.value.__isEditing = !0, (B = d.value) == null || B.onClick(q);
     }, J = () => {
       r.value = e.value.renderedHtml;
     }, me = G(
@@ -1677,16 +1698,16 @@ const Nt = /* @__PURE__ */ g({
     return E(() => {
       var q;
       e.value.__isEditing && ((q = n.value) == null || q.focus());
-    }), K(() => {
+    }), F(() => {
       me(), e.value.onStringChanged.remove(J);
-    }), (q, T) => (l(), i("span", {
+    }), (q, T) => (a(), i("span", {
       class: _(b.value)
     }, [
-      a("span", Mt, [
+      l("span", Mt, [
         St,
-        It,
-        a("span", Bt, [
-          e.value.hasHtml ? p("", !0) : (l(), i("span", {
+        Bt,
+        l("span", It, [
+          e.value.hasHtml ? p("", !0) : (a(), i("span", {
             key: 0,
             role: "textbox",
             class: "sv-string-editor",
@@ -1695,43 +1716,44 @@ const Nt = /* @__PURE__ */ g({
             onPaste: ve,
             onBlur: j,
             onInput: T[0] || (T[0] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onInput) && ((S = s(d)) == null ? void 0 : S.onInput(...I));
+              return ((M = s(d)) == null ? void 0 : M.onInput) && ((S = s(d)) == null ? void 0 : S.onInput(...B));
             }),
             onKeydown: T[1] || (T[1] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onKeyDown) && ((S = s(d)) == null ? void 0 : S.onKeyDown(...I));
+              return ((M = s(d)) == null ? void 0 : M.onKeyDown) && ((S = s(d)) == null ? void 0 : S.onKeyDown(...B));
             }),
             onKeyup: T[2] || (T[2] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onKeyUp) && ((S = s(d)) == null ? void 0 : S.onKeyUp(...I));
+              return ((M = s(d)) == null ? void 0 : M.onKeyUp) && ((S = s(d)) == null ? void 0 : S.onKeyUp(...B));
             }),
             onCompositionstart: T[3] || (T[3] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onCompositionStart) && ((S = s(d)) == null ? void 0 : S.onCompositionStart(...I));
+              return ((M = s(d)) == null ? void 0 : M.onCompositionStart) && ((S = s(d)) == null ? void 0 : S.onCompositionStart(...B));
             }),
             onCompositionend: T[4] || (T[4] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onCompositionEnd) && ((S = s(d)) == null ? void 0 : S.onCompositionEnd(...I));
+              return ((M = s(d)) == null ? void 0 : M.onCompositionEnd) && ((S = s(d)) == null ? void 0 : S.onCompositionEnd(...B));
             }),
             onMouseup: T[5] || (T[5] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onMouseUp) && ((S = s(d)) == null ? void 0 : S.onMouseUp(...I));
+              return ((M = s(d)) == null ? void 0 : M.onMouseUp) && ((S = s(d)) == null ? void 0 : S.onMouseUp(...B));
             }),
             onClick: se,
             textContent: r.value,
             "aria-placeholder": y.value,
+            "aria-label": y.value || "content editable",
             contenteditable: N.value,
             ref_key: "root",
             ref: n
           }, null, 40, Et)),
-          e.value.hasHtml ? (l(), i("span", {
+          e.value.hasHtml ? (a(), i("span", {
             key: 1,
             role: "textbox",
             class: "sv-string-editor sv-string-editor--html",
@@ -1739,52 +1761,53 @@ const Nt = /* @__PURE__ */ g({
             onFocus: U,
             onBlur: j,
             onKeydown: T[6] || (T[6] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onKeyDown) && ((S = s(d)) == null ? void 0 : S.onKeyDown(...I));
+              return ((M = s(d)) == null ? void 0 : M.onKeyDown) && ((S = s(d)) == null ? void 0 : S.onKeyDown(...B));
             }),
             onKeyup: T[7] || (T[7] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onKeyUp) && ((S = s(d)) == null ? void 0 : S.onKeyUp(...I));
+              return ((M = s(d)) == null ? void 0 : M.onKeyUp) && ((S = s(d)) == null ? void 0 : S.onKeyUp(...B));
             }),
             onCompositionstart: T[8] || (T[8] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onCompositionStart) && ((S = s(d)) == null ? void 0 : S.onCompositionStart(...I));
+              return ((M = s(d)) == null ? void 0 : M.onCompositionStart) && ((S = s(d)) == null ? void 0 : S.onCompositionStart(...B));
             }),
             onCompositionend: T[9] || (T[9] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onCompositionEnd) && ((S = s(d)) == null ? void 0 : S.onCompositionEnd(...I));
+              return ((M = s(d)) == null ? void 0 : M.onCompositionEnd) && ((S = s(d)) == null ? void 0 : S.onCompositionEnd(...B));
             }),
             onMouseup: T[10] || (T[10] = //@ts-ignore
-            (...I) => {
+            (...B) => {
               var M, S;
-              return ((M = s(d)) == null ? void 0 : M.onMouseUp) && ((S = s(d)) == null ? void 0 : S.onMouseUp(...I));
+              return ((M = s(d)) == null ? void 0 : M.onMouseUp) && ((S = s(d)) == null ? void 0 : S.onMouseUp(...B));
             }),
             onClick: se,
             "aria-placeholder": y.value,
+            "aria-label": y.value || "content editable",
             contenteditable: N.value,
             innerHTML: r.value,
             ref_key: "root",
             ref: n
           }, null, 40, Pt)) : p("", !0),
-          P.value ? (l(), C(s(c), {
+          P.value ? (a(), h(s(c), {
             key: 2,
             is: "sv-character-counter",
             counter: O.value,
-            remainingCharacterCounter: z.value
+            remainingCharacterCounter: L.value
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      m.value ? (l(), i("span", Rt, $(m.value), 1)) : p("", !0)
+      m.value ? (a(), i("span", Rt, $(m.value), 1)) : p("", !0)
     ], 2));
   }
 }), At = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, zt = /* @__PURE__ */ a("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Lt = {
+}, Lt = /* @__PURE__ */ l("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), zt = {
   key: 1,
   class: "svc-toolbox__placeholder"
 }, Ft = {
@@ -1796,7 +1819,7 @@ const Nt = /* @__PURE__ */ g({
     model: {}
   },
   setup(u) {
-    const t = u, e = k(() => t.model.toolbox), o = B();
+    const t = u, e = k(() => t.model.toolbox), o = I();
     f(() => e.value);
     let n;
     E(() => {
@@ -1804,21 +1827,21 @@ const Nt = /* @__PURE__ */ g({
         e.value.containerElement,
         e.value
       );
-    }), K(() => {
+    }), F(() => {
       n == null || n.dispose(), e.value.setRootElement(void 0);
     });
     const r = k(() => e.value.renderedActions);
-    return (d, m) => (l(), i("div", {
+    return (d, m) => (a(), i("div", {
       class: _(e.value.classNames),
       ref_key: "root",
       ref: o
     }, [
-      a("div", {
+      l("div", {
         onFocusout: m[0] || (m[0] = (b) => e.value.focusOut(b)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (l(), i("div", At, [
-          e.value.isCompactRendered ? (l(), C(s(c), {
+        e.value.showSearch ? (a(), i("div", At, [
+          e.value.isCompactRendered ? (a(), h(s(c), {
             is: "svc-toolbox-tool",
             creator: d.model,
             key: "searchitem",
@@ -1830,19 +1853,19 @@ const Nt = /* @__PURE__ */ g({
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
-          zt
+          Lt
         ])) : p("", !0),
-        e.value.showPlaceholder ? (l(), i("div", Lt, $(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        e.value.showPlaceholder ? (a(), i("div", zt, $(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
-            e.value.showInSingleCategory ? p("", !0) : (l(!0), i(w, { key: 0 }, R(e.value.categories, (b, y) => (l(), C(s(c), {
+            e.value.showInSingleCategory ? p("", !0) : (a(!0), i(w, { key: 0 }, R(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 ? (l(), i("div", Ft, [
-              (l(!0), i(w, null, R(r.value, (b) => (l(), C(s(c), {
+            e.value.showInSingleCategory ? (a(), i("div", Ft, [
+              (a(!0), i(w, null, R(r.value, (b) => (a(), h(s(c), {
                 key: b.renderedId,
                 is: "svc-toolbox-tool",
                 creator: d.model,
@@ -1879,24 +1902,24 @@ const Nt = /* @__PURE__ */ g({
       (n) => {
         n.dispose();
       }
-    ), o = B();
+    ), o = I();
     return E(() => {
       const n = t.item;
       n.updateModeCallback = (r, d) => {
         n.mode = r, re(() => d(r, o.value));
       }, n.afterRender();
-    }), K(() => {
+    }), F(() => {
       const n = t.item;
       n.updateModeCallback = void 0;
     }), f(() => t.item), (n, r) => {
       var d;
-      return l(), i("div", {
+      return a(), i("div", {
         class: _(n.item.css),
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (l(), i("div", Ut)) : p("", !0),
-        a("div", {
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (a(), i("div", Ut)) : p("", !0),
+        l("div", {
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
           (...m) => {
@@ -1927,16 +1950,16 @@ const Nt = /* @__PURE__ */ g({
     viewModel: {}
   },
   setup(u) {
-    return (t, e) => (l(), i(w, null, [
-      h((l(), i("div", {
+    return (t, e) => (a(), i(w, null, [
+      C((a(), i("div", {
         class: _(["svc-toolbox__item", t.item.renderedCss]),
         role: "button",
         "aria-label": t.item.tooltip,
         title: t.item.tooltip,
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
-        a("span", Qt, [
-          t.item.iconName ? (l(), C(s(c), {
+        l("span", Qt, [
+          t.item.iconName ? (a(), h(s(c), {
             key: 0,
             is: "sv-svg-icon",
             iconName: t.item.iconName,
@@ -1944,11 +1967,11 @@ const Nt = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (l(), i("span", Gt, $(t.item.title), 1))
+        t.isCompact ? p("", !0) : (a(), i("span", Gt, $(t.item.title), 1))
       ], 10, Ot)), [
         [s(D)]
       ]),
-      t.isCompact ? (l(), i("span", {
+      t.isCompact ? (a(), i("span", {
         key: 0,
         class: "svc-toolbox__item-banner",
         onClick: e[1] || (e[1] = (o) => t.viewModel.click(o))
@@ -1959,7 +1982,7 @@ const Nt = /* @__PURE__ */ g({
           size: 24,
           class: "svc-toolbox__item-icon"
         }, null, 8, ["iconName"]),
-        a("span", null, $(t.item.title), 1)
+        l("span", null, $(t.item.title), 1)
       ])) : p("", !0)
     ], 64));
   }
@@ -1977,7 +2000,7 @@ const Nt = /* @__PURE__ */ g({
     }, o = (n) => {
       t.viewModel.onMouseLeave(t.item, n);
     };
-    return (n, r) => (l(), i(w, null, [
+    return (n, r) => (a(), i(w, null, [
       v(s(c), {
         is: "svc-toolbox-item",
         viewModel: n.viewModel,
@@ -1985,7 +2008,7 @@ const Nt = /* @__PURE__ */ g({
         creator: n.creator,
         isCompact: n.isCompact
       }, null, 8, ["viewModel", "item", "creator", "isCompact"]),
-      a("div", {
+      l("div", {
         class: "svc-toolbox__item-submenu-button",
         onMouseover: e,
         onMouseleave: o
@@ -2005,7 +2028,7 @@ const Nt = /* @__PURE__ */ g({
 }), Jt = { className: "svc-toolbox__category-header-wrapper" }, Zt = { class: "svc-toolbox__category-title" }, Xt = {
   key: 0,
   class: "svc-toolbox__category-header__controls"
-}, Yt = { className: "svc-toolbox__category-header-wrapper" }, xt = /* @__PURE__ */ g({
+}, Yt = /* @__PURE__ */ g({
   __name: "ToolboxCategory",
   props: {
     category: {},
@@ -2013,45 +2036,33 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.category), (e, o) => (l(), i("div", {
+    return f(() => t.category), (e, o) => (a(), i("div", {
       class: _(["svc-toolbox__category", {
         "svc-toolbox__category--collapsed": e.category.collapsed,
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
-      a("div", Jt, [
-        h((l(), i("div", {
+      l("div", Jt, [
+        C((a(), i("div", {
           class: _(["svc-toolbox__category-header", {
             "svc-toolbox__category-header--collapsed": e.toolbox.canCollapseCategories
           }]),
           onClick: o[0] || (o[0] = (n) => e.category.toggleState())
         }, [
-          a("span", Zt, $(e.category.title), 1),
-          e.toolbox.canCollapseCategories ? (l(), i("div", Xt, [
-            a("div", Yt, [
-              h(v(s(c), {
-                is: "sv-svg-icon",
-                iconName: "icon-arrow-down",
-                class: "svc-toolbox__category-header__button svc-string-editor__button--expand",
-                size: "auto"
-              }, null, 512), [
-                [L, e.category.collapsed]
-              ])
-            ]),
-            h(v(s(c), {
+          l("span", Zt, $(e.category.title), 1),
+          e.toolbox.canCollapseCategories ? (a(), i("div", Xt, [
+            v(s(c), {
               is: "sv-svg-icon",
-              iconName: "icon-arrow-up",
-              class: "svc-toolbox__category-header__button svc-string-editor__button--collapse",
+              iconName: e.category.iconName,
+              class: _(e.category.iconClassName),
               size: "auto"
-            }, null, 512), [
-              [L, !e.category.collapsed]
-            ])
+            }, null, 8, ["iconName", "class"])
           ])) : p("", !0)
         ], 2)), [
           [s(D)]
         ])
       ]),
-      (l(!0), i(w, null, R(e.category.items, (n) => (l(), C(s(c), {
+      (a(!0), i(w, null, R(e.category.items, (n) => (a(), h(s(c), {
         is: "svc-toolbox-tool",
         item: n,
         key: n.renderedId,
@@ -2061,7 +2072,7 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["item", "creator", "parentModel"]))), 128))
     ], 2));
   }
-}), en = /* @__PURE__ */ g({
+}), xt = /* @__PURE__ */ g({
   __name: "ToolboxList",
   props: {
     model: {},
@@ -2069,10 +2080,10 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return _e(() => t.model.renderedActions), f(() => t.model), (e, o) => (l(), i("div", {
+    return _e(() => t.model.renderedActions), f(() => t.model), (e, o) => (a(), i("div", {
       class: _(e.model.cssClasses.root)
     }, [
-      (l(!0), i(w, null, R(e.model.renderedActions, (n, r) => (l(), C(s(c), {
+      (a(!0), i(w, null, R(e.model.renderedActions, (n, r) => (a(), h(s(c), {
         key: r,
         is: "svc-toolbox-tool",
         creator: e.creator,
@@ -2082,64 +2093,64 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
     ], 2));
   }
-}), on = { class: "svc-flex-column" }, sn = { class: "svc-tab-designer_content" }, tn = {
+}), en = { class: "svc-flex-column" }, on = { class: "svc-tab-designer_content" }, sn = {
   key: 0,
   class: "svc-designer-header"
-}, nn = {
+}, tn = {
   class: "svc-designer__placeholder-container",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, ln = {
+}, nn = {
   className: "svc-designer-placeholder-page",
   "data-sv-drop-target-survey-element": "newGhostPage"
 }, an = {
   key: 0,
   class: "svc-designer-header"
-}, rn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], dn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], cn = {
+}, ln = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], rn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], dn = {
   key: 0,
   class: "svc-tab-designer__tools"
-}, un = {
+}, cn = {
   key: 0,
   class: "svc-tab-designer__page-navigator"
-}, pn = {
+}, un = {
   key: 1,
   class: "svc-tab-designer__toolbar"
-}, vn = /* @__PURE__ */ g({
+}, pn = /* @__PURE__ */ g({
   __name: "Designer",
   props: {
     model: {}
   },
   setup(u) {
     const t = u, e = k(() => t.model.survey);
-    return f(() => t.model), f(() => e.value), (o, n) => (l(), i(w, null, [
-      a("div", on, [
-        o.model.isToolboxVisible ? (l(), C(s(c), {
+    return f(() => t.model), f(() => e.value), (o, n) => (a(), i(w, null, [
+      l("div", en, [
+        o.model.isToolboxVisible ? (a(), h(s(c), {
           key: 0,
           is: "svc-toolbox",
           model: o.model.creator
         }, null, 8, ["model"])) : p("", !0)
       ]),
-      a("div", {
+      l("div", {
         class: _(["svc-tab-designer", o.model.getRootCss()]),
         onClick: n[0] || (n[0] = //@ts-ignore
         (...r) => o.model.clickDesigner && o.model.clickDesigner(...r))
       }, [
         v(s(c), { is: "sv-scroll" }, {
           default: Z(() => [
-            a("div", sn, [
-              o.model.showPlaceholder ? (l(), i(w, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", tn, [
+            l("div", on, [
+              o.model.showPlaceholder ? (a(), i(w, { key: 0 }, [
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (a(), i("div", sn, [
                   v(s(c), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
                 ])) : p("", !0),
-                a("div", nn, [
+                l("div", tn, [
                   v(W, {
                     name: "designer",
                     placeholderTitleText: o.model.placeholderTitleText,
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-                  a("div", ln, [
+                  l("div", nn, [
                     v(s(c), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
@@ -2150,21 +2161,21 @@ const Nt = /* @__PURE__ */ g({
                   ])
                 ])
               ], 64)) : p("", !0),
-              o.model.showPlaceholder ? p("", !0) : (l(), i(w, { key: 1 }, [
-                a("div", {
+              o.model.showPlaceholder ? p("", !0) : (a(), i(w, { key: 1 }, [
+                l("div", {
                   class: _(o.model.designerCss),
-                  style: F([
+                  style: z([
                     { maxWidth: o.model.survey.renderedWidth },
                     o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.allowEditSurveyTitle ? (l(), i("div", an, [
+                  o.model.creator.allowEditSurveyTitle ? (a(), i("div", an, [
                     v(s(c), {
                       is: "survey-header",
                       survey: o.model.creator.survey
                     }, null, 8, ["survey"])
                   ])) : p("", !0),
-                  o.model.creator.pageEditMode !== "bypage" ? (l(!0), i(w, { key: 1 }, R(o.model.pages, (r) => (l(), i("div", {
+                  o.model.creator.pageEditMode !== "bypage" ? (a(!0), i(w, { key: 1 }, R(o.model.pages, (r) => (a(), i("div", {
                     key: r.id,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": r != o.model.newPage ? r.name : "newGhostPage",
@@ -2177,8 +2188,8 @@ const Nt = /* @__PURE__ */ g({
                       page: r,
                       isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
-                  ], 8, rn))), 128)) : p("", !0),
-                  o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (l(), i("div", {
+                  ], 8, ln))), 128)) : p("", !0),
+                  o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (a(), i("div", {
                     key: 2,
                     class: "svc-page",
                     "data-sv-drop-target-survey-element": o.model.displayPageDropTarget,
@@ -2190,17 +2201,17 @@ const Nt = /* @__PURE__ */ g({
                       creator: o.model.creator,
                       isGhost: o.model.pagesController.page2Display == o.model.newPage
                     }, null, 8, ["page", "creator", "isGhost"])
-                  ], 8, dn)) : p("", !0)
+                  ], 8, rn)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (l(), i("div", cn, [
-                  o.model.creator.showPageNavigator ? (l(), i("div", un, [
+                o.model.showSurfaceTools ? (a(), i("div", dn, [
+                  o.model.creator.showPageNavigator ? (a(), i("div", cn, [
                     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 ? (l(), i("div", pn, [
+                  o.model.showSurfaceToolbar ? (a(), i("div", un, [
                     v(s(c), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
@@ -2215,13 +2226,13 @@ const Nt = /* @__PURE__ */ g({
       ], 2)
     ], 64));
   }
-}), mn = ["id", "data-sv-drop-target-survey-page"], _n = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), gn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), bn = {
+}), vn = ["id", "data-sv-drop-target-survey-page"], mn = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), _n = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), gn = {
   key: 0,
   class: "svc-page__placeholder_frame"
-}, yn = { class: "svc-panel__placeholder_frame" }, hn = { class: "svc-panel__placeholder" }, Cn = { class: "svc-page__content-actions" }, qn = {
+}, bn = { class: "svc-panel__placeholder_frame" }, yn = { class: "svc-panel__placeholder" }, hn = { class: "svc-page__content-actions" }, qn = {
   key: 2,
   class: "svc-page__content-actions"
-}, kn = /* @__PURE__ */ g({
+}, Cn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2230,7 +2241,7 @@ const Nt = /* @__PURE__ */ g({
     isGhost: { type: Boolean }
   },
   setup(u) {
-    const t = u, e = B(), o = A(
+    const t = u, e = I(), o = A(
       () => {
         const r = new De(t.creator, t.page);
         return r.isGhost = t.isGhost, r;
@@ -2253,7 +2264,7 @@ const Nt = /* @__PURE__ */ g({
     const n = (r) => {
       o.value.hover(r, r.currentTarget);
     };
-    return (r, d) => s(o).page ? h((l(), i("div", {
+    return (r, d) => s(o).page ? C((a(), i("div", {
       key: s(o).page.id,
       id: s(o).page.id,
       class: _(["svc-page__content", s(o).css]),
@@ -2267,19 +2278,19 @@ const Nt = /* @__PURE__ */ g({
       onMouseover: n,
       onMouseleave: n
     }, [
+      mn,
       _n,
-      gn,
       v(s(c), {
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"]),
-      s(o).showPlaceholder ? (l(), i("div", bn, [
-        a("div", yn, [
-          a("div", hn, $(s(o).placeholderText), 1)
+      s(o).showPlaceholder ? (a(), i("div", gn, [
+        l("div", bn, [
+          l("div", yn, $(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
-      s(o).allowDragging && !s(o).isGhost ? (l(), i("div", {
+      s(o).allowDragging && !s(o).isGhost ? (a(), i("div", {
         key: 1,
         class: "svc-question__drag-area",
         onPointerdown: d[0] || (d[0] = (m) => s(o).onPointerDown(m))
@@ -2292,24 +2303,24 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        a("div", Cn, [
+        l("div", hn, [
           v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer
           }, null, 8, ["model"]),
-          s(o).topActionContainer.hasActions ? (l(), C(s(c), {
+          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 ? (l(), i("div", qn, [
+      !s(o).allowDragging || s(o).isGhost ? (a(), i("div", qn, [
         v(s(c), {
           is: "sv-action-bar",
           model: s(o).actionContainer
         }, null, 8, ["model"]),
-        s(o).topActionContainer.hasActions ? (l(), C(s(c), {
+        s(o).topActionContainer.hasActions ? (a(), h(s(c), {
           key: 0,
           is: "sv-action-bar",
           model: s(o).topActionContainer
@@ -2319,11 +2330,11 @@ const Nt = /* @__PURE__ */ g({
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
-    ], 42, mn)), [
+    ], 42, vn)), [
       [s(D)]
     ]) : p("", !0);
   }
-}), $n = { class: "svc-add-new-item-button__text" }, wn = /* @__PURE__ */ g({
+}), kn = { class: "svc-add-new-item-button__text" }, $n = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2333,15 +2344,18 @@ const Nt = /* @__PURE__ */ g({
   setup(u) {
     const t = u;
     f(() => t.item.data);
-    const e = k(() => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")), o = k(() => t.renderPopup === void 0 || t.renderPopup !== !1);
-    return (n, r) => (l(), i(w, null, [
-      h((l(), i("div", {
+    const e = k(
+      () => "svc-element__add-new-question " + (t.buttonClass || "svc-btn")
+    ), o = k(
+      () => t.renderPopup === void 0 || t.renderPopup !== !1
+    );
+    return (n, r) => (a(), i(w, null, [
+      C((a(), i("div", {
         class: _(e.value),
         onClick: r[0] || (r[0] = (d) => {
           n.item.data.addNewQuestion(n.item, d), d.stopPropagation();
         }),
-        onMouseover: r[1] || (r[1] = (d) => n.item.data.hoverStopper && n.item.data.hoverStopper(d, d.currentTarget)),
-        role: "button"
+        onMouseover: r[1] || (r[1] = (d) => n.item.data.hoverStopper && n.item.data.hoverStopper(d, d.currentTarget))
       }, [
         v(s(c), {
           is: "sv-svg-icon",
@@ -2349,8 +2363,8 @@ const Nt = /* @__PURE__ */ g({
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        a("span", $n, $(n.item.data.addNewQuestionText), 1),
-        o.value ? (l(), C(s(c), {
+        l("span", kn, $(n.item.data.addNewQuestionText), 1),
+        o.value ? (a(), h(s(c), {
           key: 0,
           is: "svc-add-question-type-selector",
           questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2359,7 +2373,7 @@ const Nt = /* @__PURE__ */ g({
       ], 34)), [
         [s(D)]
       ]),
-      o.value ? p("", !0) : (l(), C(s(c), {
+      o.value ? p("", !0) : (a(), h(s(c), {
         key: 0,
         is: "svc-add-question-type-selector",
         questionTypeSelectorModel: n.item.data.questionTypeSelectorModel,
@@ -2367,7 +2381,7 @@ const Nt = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), fn = ["title", "aria-label"], Tn = /* @__PURE__ */ g({
+}), wn = ["title", "aria-label"], fn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2375,7 +2389,7 @@ const Nt = /* @__PURE__ */ g({
   },
   setup(u) {
     const t = u;
-    return f(() => t.questionTypeSelectorModel), (e, o) => h((l(), i("button", {
+    return f(() => t.questionTypeSelectorModel), (e, o) => C((a(), i("button", {
       type: "button",
       onClick: o[0] || (o[0] = (n) => {
         e.questionTypeSelectorModel.action(), n.stopPropagation();
@@ -2392,16 +2406,16 @@ const Nt = /* @__PURE__ */ g({
         size: "auto",
         title: e.questionTypeSelectorModel.title
       }), null, 16),
-      e.renderPopup ? (l(), C(s(c), {
+      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(D)]
     ]);
   }
-}), Dn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Nn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Mn = /* @__PURE__ */ g({
+}), Tn = /* @__PURE__ */ l("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Dn = /* @__PURE__ */ l("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Nn = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
@@ -2416,20 +2430,20 @@ const Nt = /* @__PURE__ */ g({
     );
     return E(() => {
       n.value && n.value.subscribeElementChanges();
-    }), K(() => {
+    }), F(() => {
       n.value && n.value.unsubscribeElementChanges();
-    }), (r, d) => (l(), i("div", {
+    }), (r, d) => (a(), i("div", {
       class: _(s(n).cssClasses)
     }, [
+      Tn,
       Dn,
-      Nn,
       x(r.$slots, "default")
     ], 2));
   }
-}), Sn = ["data-sv-drop-target-survey-element"], In = { class: "svc-fake-title" }, Bn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), En = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), Pn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Rn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Vn = { class: "svc-question__top-actions" }, An = {
+}), Mn = ["data-sv-drop-target-survey-element"], Sn = { class: "svc-fake-title" }, Bn = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), In = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), En = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Pn = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Rn = { class: "svc-question__top-actions" }, Vn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, zn = { class: "svc-panel__placeholder_frame" }, Ln = {
+}, An = { class: "svc-panel__placeholder_frame" }, Ln = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, oe = /* @__PURE__ */ g({
@@ -2445,7 +2459,7 @@ const Nt = /* @__PURE__ */ g({
     componentData: {}
   },
   setup(u) {
-    const t = u, e = B(), o = A(
+    const t = u, e = I(), o = A(
       () => t.createModel(),
       [() => t.componentName, () => t.componentData],
       (d) => {
@@ -2462,7 +2476,7 @@ const Nt = /* @__PURE__ */ g({
     const r = (d) => {
       o.value.select(o.value, d), d.stopPropagation();
     };
-    return (d, m) => s(o) ? (l(), i("div", {
+    return (d, m) => s(o) ? (a(), i("div", {
       key: 0,
       class: _(["svc-question__adorner", s(o).rootCss()]),
       ref_key: "root",
@@ -2473,32 +2487,32 @@ const Nt = /* @__PURE__ */ g({
       "data-sv-drop-target-survey-element": s(o).element.name || null,
       "data-bind": "css: rootCss(), attr: { 'data-sv-drop-target-survey-element': element.name || null }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }"
     }, [
-      s(o).showHiddenTitle ? (l(), i("div", {
+      s(o).showHiddenTitle ? (a(), i("div", {
         key: 0,
         class: _(s(o).cssCollapsedHiddenHeader)
       }, [
-        d.element.hasTitle ? (l(), C(s(c), {
+        d.element.hasTitle ? (a(), h(s(c), {
           key: 0,
           is: "survey-element-title",
           element: d.element
-        }, null, 8, ["element"])) : (l(), i("div", {
+        }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
           class: _(s(o).cssCollapsedHiddenTitle)
         }, [
-          a("span", In, $(d.element.name), 1)
+          l("span", Sn, $(d.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      h((l(), i("div", {
+      C((a(), i("div", {
         onClick: m[1] || (m[1] = (b) => {
           s(o).select(s(o), b), b.stopPropagation();
         }),
         class: _(s(o).css())
       }, [
         Bn,
+        In,
         En,
         Pn,
-        Rn,
-        s(o).allowDragging ? (l(), i("div", {
+        s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: m[0] || (m[0] = (b) => s(o).onPointerDown(b))
@@ -2511,7 +2525,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          a("div", Vn, [
+          l("div", Rn, [
             v(s(c), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
@@ -2519,36 +2533,36 @@ const Nt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(o).needToRenderContent ? (l(), i(w, { key: 1 }, [
+        s(o).needToRenderContent ? (a(), i(w, { key: 1 }, [
           v(s(c), {
             is: "sv-template-renderer",
             componentName: d.componentName,
             componentData: d.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !d.showPlaceholderComponent ? (l(), i("div", An, [
-            a("div", zn, [
-              a("div", Ln, $(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !d.showPlaceholderComponent ? (a(), i("div", Vn, [
+            l("div", An, [
+              l("div", Ln, $(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
-          s(o).isEmptyElement && d.showPlaceholderComponent ? (l(), C(s(c), V(
+          s(o).isEmptyElement && d.showPlaceholderComponent ? (a(), h(s(c), V(
             {
               key: 1,
               is: d.placeholderComponent
             },
             d.getPlaceholderComponentData && d.getPlaceholderComponentData(s(o))
           ), null, 16, ["is"])) : p("", !0),
-          d.adornerComponent ? (l(), C(s(c), {
+          d.adornerComponent ? (a(), h(s(c), {
             key: 2,
             is: d.adornerComponent,
             model: s(o),
             element: d.element
           }, null, 8, ["is", "model", "element"])) : p("", !0),
-          s(o).isBannerShowing ? (l(), C(s(c), {
+          s(o).isBannerShowing ? (a(), h(s(c), {
             key: 3,
             is: "svc-question-banner",
             model: n.value
           }, null, 8, ["model"])) : p("", !0),
-          a("div", {
+          l("div", {
             class: "svc-question__content-actions",
             onFocusin: r
           }, [
@@ -2562,9 +2576,9 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, Sn)) : p("", !0);
+    ], 42, Mn)) : p("", !0);
   }
-}), le = /* @__PURE__ */ g({
+}), ae = /* @__PURE__ */ g({
   __name: "Question",
   props: {
     componentName: {},
@@ -2576,14 +2590,14 @@ const Nt = /* @__PURE__ */ g({
       t.componentData.element,
       null
     );
-    return (o, n) => (l(), C(oe, {
+    return (o, n) => (a(), h(oe, {
       createModel: e,
       element: o.componentData.element,
       "component-name": o.componentName,
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Fn = /* @__PURE__ */ g({
+}), zn = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
@@ -2597,7 +2611,7 @@ const Nt = /* @__PURE__ */ g({
     ), o = (n) => ({
       question: n == null ? void 0 : n.filePresentationModel
     });
-    return (n, r) => (l(), C(oe, {
+    return (n, r) => (a(), h(oe, {
       "create-model": e,
       element: t.componentData.element,
       "show-placeholder-component": !0,
@@ -2608,34 +2622,34 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), Kn = {
+}), Fn = {
   key: 0,
   class: "svc-image-question-controls"
-}, Un = ["accept"], Hn = {
+}, Kn = ["accept"], Un = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, On = {
+}, Hn = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, Qn = { class: "svc-image-question__loading" }, Gn = /* @__PURE__ */ g({
+}, On = { class: "svc-image-question__loading" }, Qn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
     element: {}
   },
   setup(u) {
-    return (t, e) => (l(), i(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Kn, [
-        t.model.allowEdit ? (l(), i(w, { key: 0 }, [
-          a("input", {
+    return (t, e) => (a(), i(w, null, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Fn, [
+        t.model.allowEdit ? (a(), i(w, { key: 0 }, [
+          l("input", {
             type: "file",
             "aria-hidden": "true",
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Un),
-          h((l(), i("span", Hn, [
+          }, null, 8, Kn),
+          C((a(), i("span", Un, [
             v(s(c), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
@@ -2647,14 +2661,14 @@ const Nt = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", On, [
-        a("div", Qn, [
+      t.model.isUploading && !t.model.isEmptyElement ? (a(), i("div", Hn, [
+        l("div", On, [
           v(s(c), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Wn = { class: "svc-rating-question-content" }, jn = /* @__PURE__ */ g({
+}), Gn = { class: "svc-rating-question-content" }, Wn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2670,12 +2684,12 @@ const Nt = /* @__PURE__ */ g({
       [() => t.componentData.data, () => t.componentData.question]
     );
     return (o, n) => {
-      var r, d, m, b, y, N, O, P, z;
-      return l(), i("div", Wn, [
-        a("div", {
+      var r, d, m, b, y, N, O, P, L;
+      return a(), i("div", Gn, [
+        l("div", {
           class: _((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
-          (d = s(e)) != null && d.allowRemove ? h((l(), C(s(c), {
+          (d = s(e)) != null && d.allowRemove ? C((a(), h(s(c), {
             key: 0,
             is: "sv-svg-icon",
             iconName: "icon-remove_16x16",
@@ -2690,7 +2704,7 @@ const Nt = /* @__PURE__ */ g({
           }, null, 8, ["class", "title", "aria-label"])), [
             [s(D)]
           ]) : p("", !0),
-          (N = s(e)) != null && N.allowAdd ? h((l(), C(s(c), {
+          (N = s(e)) != null && N.allowAdd ? C((a(), h(s(c), {
             key: 1,
             is: "sv-svg-icon",
             iconName: "icon-add_16x16",
@@ -2701,7 +2715,7 @@ const Nt = /* @__PURE__ */ g({
             }),
             class: _((O = s(e)) == null ? void 0 : O.addClassNames),
             title: (P = s(e)) == null ? void 0 : P.addTooltip,
-            "aria-label": (z = s(e)) == null ? void 0 : z.addTooltip
+            "aria-label": (L = s(e)) == null ? void 0 : L.addTooltip
           }, null, 8, ["class", "title", "aria-label"])), [
             [s(D)]
           ]) : p("", !0)
@@ -2710,10 +2724,10 @@ const Nt = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Jn = {
+}), jn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, Zn = /* @__PURE__ */ g({
+}, Jn = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
@@ -2724,7 +2738,7 @@ const Nt = /* @__PURE__ */ g({
     ), m = A(
       () => {
         var b;
-        return t.componentData ? new Ie(
+        return t.componentData ? new Be(
           e.value,
           r.value,
           d.value,
@@ -2741,28 +2755,28 @@ const Nt = /* @__PURE__ */ g({
     );
     return (b, y) => {
       var N, O;
-      return l(), i("div", {
+      return a(), i("div", {
         tabindex: "-1",
         class: "svc-matrix-cell",
         onClick: y[1] || (y[1] = (P) => {
-          var z;
-          return (z = s(m)) == null ? void 0 : z.selectContext(s(m), P);
+          var L;
+          return (L = s(m)) == null ? void 0 : L.selectContext(s(m), P);
         }),
         onMouseover: y[2] || (y[2] = (P) => {
-          var z;
-          return (z = s(m)) == null ? void 0 : z.hover(P, P.currentTarget);
+          var L;
+          return (L = s(m)) == null ? void 0 : L.hover(P, P.currentTarget);
         }),
         onMouseleave: y[3] || (y[3] = (P) => {
-          var z;
-          return (z = s(m)) == null ? void 0 : z.hover(P, P.currentTarget);
+          var L;
+          return (L = s(m)) == null ? void 0 : L.hover(P, P.currentTarget);
         })
       }, [
-        a("div", {
+        l("div", {
           class: _(["svc-matrix-cell--selected", { "svc-visible": (N = s(m)) == null ? void 0 : N.isSelected }])
         }, null, 2),
         x(b.$slots, "default"),
-        (O = s(m)) != null && O.isSupportCellEditor ? (l(), i("div", Jn, [
-          h((l(), i("span", {
+        (O = s(m)) != null && O.isSupportCellEditor ? (a(), i("div", jn, [
+          C((a(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: y[0] || (y[0] = (P) => s(m).editQuestion(s(m), P))
           }, [
@@ -2778,7 +2792,7 @@ const Nt = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), Xn = { class: "svc-question__adorner" }, Yn = { class: "svc-question__content svc-question__content--in-popup" }, xn = /* @__PURE__ */ g({
+}), Zn = { class: "svc-question__adorner" }, Xn = { class: "svc-question__content svc-question__content--in-popup" }, Yn = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
@@ -2788,19 +2802,19 @@ const Nt = /* @__PURE__ */ g({
     const t = u, e = k(
       () => t.componentData.element
     );
-    return f(() => e.value), (o, n) => (l(), i("div", Xn, [
-      a("div", Yn, [
+    return f(() => e.value), (o, n) => (a(), i("div", Zn, [
+      l("div", Xn, [
         v(s(c), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
-}), el = ["data-sv-drop-target-survey-element"], ol = { class: "svc-fake-title" }, sl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), tl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), nl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), ll = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), al = { class: "svc-question__top-actions" }, il = {
+}), xn = ["data-sv-drop-target-survey-element"], ea = { class: "svc-fake-title" }, oa = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), sa = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), ta = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), na = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), aa = { class: "svc-question__top-actions" }, la = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, rl = { class: "svc-panel__placeholder_frame" }, dl = { class: "svc-panel__placeholder" }, cl = { class: "svc-add-new-item-button__text" }, ul = {
+}, ia = { class: "svc-panel__placeholder_frame" }, ra = { class: "svc-panel__placeholder" }, da = { class: "svc-add-new-item-button__text" }, ca = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, pl = { class: "svc-panel__question-type-selector-popup" }, vl = { class: "svc-panel__add-new-question-wrapper" }, ml = /* @__PURE__ */ g({
+}, ua = { class: "svc-panel__question-type-selector-popup" }, pa = { class: "svc-panel__add-new-question-wrapper" }, va = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2820,7 +2834,7 @@ const Nt = /* @__PURE__ */ g({
     ), o = (n) => {
       n.stopPropagation(), e.value.addNewQuestion();
     };
-    return (n, r) => s(e) && !s(e).isDisposed ? (l(), i("div", {
+    return (n, r) => s(e) && !s(e).isDisposed ? (a(), i("div", {
       key: 0,
       class: _(["svc-question__adorner", s(e).rootCss()]),
       onDblclick: r[3] || (r[3] = (d) => s(e).dblclick(d)),
@@ -2829,30 +2843,30 @@ const Nt = /* @__PURE__ */ g({
       "data-sv-drop-target-survey-element": s(e).element.name || null,
       ref: "root"
     }, [
-      s(e).showHiddenTitle ? (l(), i("div", {
+      s(e).showHiddenTitle ? (a(), i("div", {
         key: 0,
         class: _(s(e).cssCollapsedHiddenHeader)
       }, [
-        s(e).element.hasTitle ? (l(), C(s(c), {
+        s(e).element.hasTitle ? (a(), h(s(c), {
           key: 0,
           is: "survey-element-title",
           element: s(e).element
-        }, null, 8, ["element"])) : (l(), i("div", {
+        }, null, 8, ["element"])) : (a(), i("div", {
           key: 1,
           class: _(s(e).cssCollapsedHiddenTitle)
         }, [
-          a("span", ol, $(s(e).element.name), 1)
+          l("span", ea, $(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
-      h((l(), i("div", {
+      C((a(), i("div", {
         class: _(s(e).css()),
         onClick: r[2] || (r[2] = (d) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), d) : null)
       }, [
-        sl,
-        tl,
-        nl,
-        ll,
-        s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (l(), i("div", {
+        oa,
+        sa,
+        ta,
+        na,
+        s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (d) => s(e).onPointerDown(d))
@@ -2863,7 +2877,7 @@ const Nt = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          a("div", al, [
+          l("div", aa, [
             v(s(c), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
@@ -2871,12 +2885,12 @@ const Nt = /* @__PURE__ */ g({
             }, null, 8, ["model"])
           ])
         ], 32)) : p("", !0),
-        s(e).needToRenderContent ? (l(), i(w, { key: 1 }, [
+        s(e).needToRenderContent ? (a(), i(w, { key: 1 }, [
           v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (l(), i("div", il, [
-            a("div", rl, [
-              a("div", dl, $(s(e).placeholderText), 1),
-              s(e).showAddQuestionButton ? h((l(), i("div", {
+          s(e).isEmptyElement ? (a(), i("div", la, [
+            l("div", ia, [
+              l("div", ra, $(s(e).placeholderText), 1),
+              s(e).showAddQuestionButton ? C((a(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
                 onClick: o
@@ -2887,20 +2901,20 @@ const Nt = /* @__PURE__ */ g({
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                a("span", cl, $(s(e).addNewQuestionText), 1)
+                l("span", da, $(s(e).addNewQuestionText), 1)
               ])), [
                 [s(D)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (l(), i("div", ul, [
-            a("div", pl, [
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (a(), i("div", ca, [
+            l("div", ua, [
               v(s(c), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            a("div", vl, [
+            l("div", pa, [
               v(s(c), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
@@ -2909,7 +2923,7 @@ const Nt = /* @__PURE__ */ g({
               }, null, 8, ["item"])
             ])
           ])) : p("", !0),
-          s(e).element.isInteractiveDesignElement ? (l(), i("div", {
+          s(e).element.isInteractiveDesignElement ? (a(), i("div", {
             key: 2,
             class: "svc-question__content-actions",
             onFocusin: r[1] || (r[1] = (d) => s(e).select(s(e), d))
@@ -2924,19 +2938,19 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, el)) : p("", !0);
+    ], 42, xn)) : p("", !0);
   }
-}), _l = ["data-sv-drop-target-item-value"], gl = /* @__PURE__ */ a("div", { class: "svc-item-value__ghost" }, null, -1), bl = { class: "svc-item-value-controls" }, yl = {
+}), ma = ["data-sv-drop-target-item-value"], _a = /* @__PURE__ */ l("div", { class: "svc-item-value__ghost" }, null, -1), ga = { class: "svc-item-value-controls" }, ba = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, hl = /* @__PURE__ */ g({
+}, ya = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const t = B(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), d = G(
+    const t = I(), e = u, o = k(() => e.componentData.data.creator), n = k(() => e.componentData.question), r = k(() => e.componentData.item), d = G(
       () => r.value,
       (b, y) => {
         b && t.value && b.setRootElement(t.value), y && y.setRootElement(void 0);
@@ -2944,11 +2958,11 @@ const Nt = /* @__PURE__ */ g({
     );
     E(() => {
       t.value && r.value && r.value.setRootElement(t.value);
-    }), K(() => {
+    }), F(() => {
       r.value.setRootElement(void 0);
     });
     const m = A(
-      () => new Be(o.value, n.value, r.value),
+      () => new Ie(o.value, n.value, r.value),
       [() => o.value, () => n.value, () => r.value],
       (b) => {
         b.dispose();
@@ -2956,7 +2970,7 @@ const Nt = /* @__PURE__ */ g({
     );
     return X(() => {
       d();
-    }), (b, y) => (l(), i("div", {
+    }), (b, y) => (a(), i("div", {
       class: _(["svc-item-value-wrapper", {
         "svc-item-value--new": s(m).isNew,
         "svc-item-value--dragging": s(m).isDragging,
@@ -2969,9 +2983,9 @@ const Nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      gl,
-      a("div", bl, [
-        s(m).isDraggable ? (l(), i("span", yl, [
+      _a,
+      l("div", ga, [
+        s(m).isDraggable ? (a(), i("span", ba, [
           v(s(c), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
@@ -2980,7 +2994,7 @@ const Nt = /* @__PURE__ */ g({
             title: s(m).dragTooltip
           }, null, 8, ["title"])
         ])) : p("", !0),
-        s(m).allowAdd ? h((l(), i("span", {
+        s(m).allowAdd ? C((a(), i("span", {
           key: 1,
           class: "svc-item-value-controls__button svc-item-value-controls__add",
           onClick: y[0] || (y[0] = (N) => s(m).add(s(m))),
@@ -2995,7 +3009,7 @@ const Nt = /* @__PURE__ */ g({
         ])), [
           [s(D)]
         ]) : p("", !0),
-        s(m).allowRemove ? h((l(), i("span", {
+        s(m).allowRemove ? C((a(), i("span", {
           key: 2,
           class: "svc-item-value-controls__button svc-item-value-controls__remove",
           onClick: y[1] || (y[1] = (N) => s(m).remove(s(m))),
@@ -3012,31 +3026,31 @@ const Nt = /* @__PURE__ */ g({
           [s(D)]
         ]) : p("", !0)
       ]),
-      a("div", {
+      l("div", {
         class: "svc-item-value__item",
         onClick: y[3] || (y[3] = (N) => s(m).select(s(m), N))
       }, [
         v(s(c), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
       ])
-    ], 42, _l));
+    ], 42, ma));
   }
-}), Cl = ["data-sv-drop-target-item-value"], ql = { class: "svc-image-item-value-wrapper__content" }, kl = ["accept"], $l = {
+}), ha = ["data-sv-drop-target-item-value"], qa = { class: "svc-image-item-value-wrapper__content" }, Ca = ["accept"], ka = {
   key: 0,
   class: "svc-image-item-value__item"
-}, wl = {
+}, $a = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, fl = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Tl = { class: "sd-imagepicker__label" }, Dl = {
+}, wa = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, fa = { class: "sd-imagepicker__label" }, Ta = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Nl = /* @__PURE__ */ g({
+}, Da = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const t = u, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), r = B(), d = A(
+    const t = u, e = k(() => t.componentData.data.creator), o = k(() => t.componentData.question), n = k(() => t.componentData.item), r = I(), d = A(
       () => {
         const b = new Ee(
           e.value,
@@ -3060,30 +3074,30 @@ const Nt = /* @__PURE__ */ g({
     });
     return E(() => {
       r.value && (d.value.itemsRoot = r.value);
-    }), (b, y) => (l(), i("div", {
+    }), (b, y) => (a(), i("div", {
       onPointerdown: y[8] || (y[8] = (N) => s(d).onPointerDown(N)),
       class: _(s(d).getRootCss()),
       "data-sv-drop-target-item-value": s(d).isDraggable ? n.value.value : null,
       ref_key: "root",
       ref: r
     }, [
-      a("div", {
+      l("div", {
         class: "svc-image-item-value-wrapper__ghost",
-        style: F(m.value)
+        style: z(m.value)
       }, null, 4),
-      a("div", ql, [
-        a("input", {
+      l("div", qa, [
+        l("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(d).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, kl),
-        !s(d).isNew && !s(d).isUploading ? (l(), i(w, { key: 0 }, [
-          s(d).isNew ? p("", !0) : (l(), i("div", $l, [
+        }, null, 8, Ca),
+        !s(d).isNew && !s(d).isUploading ? (a(), i(w, { key: 0 }, [
+          s(d).isNew ? p("", !0) : (a(), i("div", ka, [
             v(s(c), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
-          s(d).isDraggable && s(d).canRenderControls ? (l(), i("span", {
+          s(d).isDraggable && s(d).canRenderControls ? (a(), i("span", {
             key: 1,
             class: "svc-context-button svc-image-item-value-controls__drag-area-indicator",
             onPointerdown: y[0] || (y[0] = (N) => s(d).onPointerDown(N)),
@@ -3096,8 +3110,8 @@ const Nt = /* @__PURE__ */ g({
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(d).canRenderControls ? (l(), i("div", wl, [
-            h((l(), i("span", {
+          s(d).canRenderControls ? (a(), i("div", $a, [
+            C((a(), i("span", {
               class: "svc-context-button",
               onClick: y[1] || (y[1] = (N) => s(d).chooseFile(s(d))),
               title: void 0,
@@ -3113,7 +3127,7 @@ const Nt = /* @__PURE__ */ g({
             ])), [
               [s(D)]
             ]),
-            h((l(), i("span", {
+            C((a(), i("span", {
               class: "svc-context-button svc-context-button--danger",
               onClick: y[2] || (y[2] = (N) => s(d).remove(s(d))),
               title: void 0,
@@ -3131,31 +3145,31 @@ const Nt = /* @__PURE__ */ g({
             ])
           ])) : p("", !0)
         ], 64)) : p("", !0),
-        s(d).isNew || s(d).isUploading ? (l(), i(w, { key: 1 }, [
-          a("div", {
+        s(d).isNew || s(d).isUploading ? (a(), i(w, { key: 1 }, [
+          l("div", {
             class: "svc-image-item-value__item",
             onDragover: y[3] || (y[3] = (N) => s(d).onDragOver(N)),
             onDragleave: y[4] || (y[4] = (N) => s(d).onDragLeave(N)),
             onDrop: y[5] || (y[5] = (N) => s(d).onDrop(N))
           }, [
-            a("div", fl, [
-              a("label", Tl, [
-                a("div", {
-                  style: F(m.value),
+            l("div", wa, [
+              l("label", fa, [
+                l("div", {
+                  style: z(m.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(d).isUploading ? (l(), i("div", Dl, [
+                  s(d).isUploading ? (a(), i("div", Ta, [
                     v(s(c), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
               ])
             ])
           ], 32),
-          a("div", {
+          l("div", {
             class: "svc-image-item-value-controls",
             onPointerdown: y[7] || (y[7] = (N) => N.stopPropagation())
           }, [
-            s(d).allowAdd && !s(d).isUploading ? h((l(), i("span", {
+            s(d).allowAdd && !s(d).isUploading ? C((a(), i("span", {
               key: 0,
               class: "svc-context-button svc-image-item-value-controls__add",
               onClick: y[6] || (y[6] = (N) => s(d).chooseNewFile(s(d))),
@@ -3174,9 +3188,9 @@ const Nt = /* @__PURE__ */ g({
           ], 32)
         ], 64)) : p("", !0)
       ])
-    ], 42, Cl));
+    ], 42, ha));
   }
-}), Ml = /* @__PURE__ */ g({
+}), Na = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
@@ -3205,29 +3219,29 @@ const Nt = /* @__PURE__ */ g({
         }
       };
     });
-    return (r, d) => (l(), i("div", {
-      style: F(t.style)
+    return (r, d) => (a(), i("div", {
+      style: z(t.style)
     }, [
       v(s(c), V({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), Sl = ["accept"], Il = /* @__PURE__ */ a("svg", null, [
-  /* @__PURE__ */ a("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Bl = [
-  Il
-], El = { class: "svc-context-container svc-logo-image-controls" }, Pl = {
+}), Ma = ["accept"], Sa = /* @__PURE__ */ l("svg", null, [
+  /* @__PURE__ */ l("use", { "xlink:href": "#icon-image-48x48" })
+], -1), Ba = [
+  Sa
+], Ia = { class: "svc-context-container svc-logo-image-controls" }, Ea = {
   key: 2,
   class: "svc-logo-image__loading"
-}, Rl = /* @__PURE__ */ g({
+}, Pa = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
   },
   setup(u) {
-    const t = u, e = k(() => t.data), o = k(() => e.value.survey), n = B(), r = A(
+    const t = u, e = k(() => t.data), o = k(() => e.value.survey), n = I(), r = A(
       () => new Pe(e.value, null),
       [() => e.value]
-    ), d = B(), m = () => {
+    ), d = I(), m = () => {
       d.value = o.value.locLogo.renderedHtml;
     };
     return G(
@@ -3240,35 +3254,35 @@ const Nt = /* @__PURE__ */ g({
       }
     ), E(() => {
       n.value && (r.value.root = n.value);
-    }), K(() => {
+    }), F(() => {
       r.value && (r.value.root = void 0);
-    }), (b, y) => (l(), i("div", {
+    }), (b, y) => (a(), i("div", {
       class: "svc-logo-image",
       ref_key: "root",
       ref: n
     }, [
-      a("input", {
+      l("input", {
         type: "file",
         "aria-hidden": "true",
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, Sl),
-      d.value ? p("", !0) : (l(), i(w, { key: 0 }, [
-        s(r).allowEdit && !s(r).isUploading ? h((l(), i("div", {
+      }, null, 8, Ma),
+      d.value ? p("", !0) : (a(), i(w, { key: 0 }, [
+        s(r).allowEdit && !s(r).isUploading ? C((a(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: y[0] || (y[0] = (N) => s(r).chooseFile(s(r)))
-        }, Bl)), [
+        }, Ba)), [
           [s(D)]
         ]) : p("", !0)
       ], 64)),
-      d.value && !s(r).isUploading ? (l(), i("div", {
+      d.value && !s(r).isUploading ? (a(), i("div", {
         key: 1,
         class: _(s(r).containerCss)
       }, [
-        a("div", El, [
-          h((l(), i("span", {
+        l("div", Ia, [
+          C((a(), i("span", {
             class: "svc-context-button",
             onClick: y[1] || (y[1] = (N) => s(r).chooseFile(s(r))),
             title: void 0,
@@ -3282,7 +3296,7 @@ const Nt = /* @__PURE__ */ g({
           ])), [
             [s(D)]
           ]),
-          h((l(), i("span", {
+          C((a(), i("span", {
             class: "svc-context-button svc-context-button--danger",
             onClick: y[2] || (y[2] = (N) => s(r).remove(s(r))),
             title: void 0,
@@ -3302,15 +3316,15 @@ const Nt = /* @__PURE__ */ g({
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(r).isUploading ? (l(), i("div", Pl, [
+      s(r).isUploading ? (a(), i("div", Ea, [
         v(s(c), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), Vl = {
+}), Ra = {
   key: 0,
   class: "svc-search"
-}, Al = { class: "svc-search__search-icon" }, zl = ["aria-label", "placeholder"], Ll = { class: "svc-search__toolbar" }, Fl = { class: "svc-search__toolbar-counter" }, Kl = /* @__PURE__ */ g({
+}, Va = { class: "svc-search__search-icon" }, Aa = ["aria-label", "placeholder"], La = { class: "svc-search__toolbar" }, za = { class: "svc-search__toolbar-counter" }, Fa = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
@@ -3325,25 +3339,25 @@ const Nt = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (l(), i("div", Vl, [
-      a("div", Al, [
+    return (o, n) => o.model.isVisible ? (a(), i("div", Ra, [
+      l("div", Va, [
         v(s(c), {
           is: "sv-svg-icon",
           iconName: "icon-search",
           size: "auto"
         })
       ]),
-      h(a("input", {
+      C(l("input", {
         type: "text",
         class: "svc-search__input",
         "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder
-      }, null, 8, zl), [
+      }, null, 8, Aa), [
         [de, e.value]
       ]),
-      a("div", Ll, [
-        a("div", Fl, $(o.model.matchCounterText), 1),
+      l("div", La, [
+        l("div", za, $(o.model.matchCounterText), 1),
         v(s(c), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
@@ -3351,7 +3365,7 @@ const Nt = /* @__PURE__ */ g({
       ])
     ])) : p("", !0);
   }
-}), Ul = ["title"], Hl = /* @__PURE__ */ g({
+}), Ka = ["title"], Ua = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3361,7 +3375,7 @@ const Nt = /* @__PURE__ */ g({
     const t = u, e = A(
       () => new Re(t.pagesController, t.pageEditMode),
       [() => t.pagesController, () => t.pageEditMode]
-    ), o = B();
+    ), o = I();
     return E(() => {
       if (t.pageEditMode !== "bypage") {
         const n = o.value;
@@ -3371,14 +3385,14 @@ const Nt = /* @__PURE__ */ g({
       o.value;
       const n = e.value;
       n.stopItemsContainerHeightObserver(), n.setScrollableContainer(void 0);
-    }), K(() => {
+    }), F(() => {
       e.value.dispose();
-    }), (n, r) => h((l(), i("div", {
+    }), (n, r) => C((a(), i("div", {
       class: "svc-page-navigator",
       ref_key: "root",
       ref: o
     }, [
-      h((l(), i("div", {
+      C((a(), i("div", {
         role: "button",
         class: _(["svc-page-navigator__selector svc-page-navigator__button", { "svc-page-navigator__button--pressed": s(e).isPopupOpened }]),
         onClick: r[0] || (r[0] = (d) => s(e).togglePageSelector(d)),
@@ -3394,25 +3408,25 @@ const Nt = /* @__PURE__ */ g({
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
-      ], 10, Ul)), [
+      ], 10, Ka)), [
         [s(D)]
       ]),
-      a("div", null, [
-        (l(!0), i(w, null, R(s(e).visibleItems, (d) => (l(), C(s(c), {
+      l("div", null, [
+        (a(!0), i(w, null, R(s(e).visibleItems, (d) => (a(), h(s(c), {
           is: "svc-page-navigator-item",
           key: d.id,
           model: d
         }, null, 8, ["model"]))), 128))
       ])
     ], 512)), [
-      [L, s(e).visible]
+      [K, s(e).visible]
     ]);
   }
-}), Ol = { class: "svc-page-navigator-item" }, Ql = ["title"], Gl = /* @__PURE__ */ a("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Wl = [
-  Gl
-], jl = { class: "svc-page-navigator-item__banner" }, Jl = { class: "svc-page-navigator-item__text" }, Zl = /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot" }, [
-  /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), Xl = /* @__PURE__ */ g({
+}), Ha = { class: "svc-page-navigator-item" }, Oa = ["title"], Qa = /* @__PURE__ */ l("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Ga = [
+  Qa
+], Wa = { class: "svc-page-navigator-item__banner" }, ja = { class: "svc-page-navigator-item__text" }, Ja = /* @__PURE__ */ l("span", { class: "svc-page-navigator-item__dot" }, [
+  /* @__PURE__ */ l("span", { class: "svc-page-navigator-item__dot-content" })
+], -1), Za = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
@@ -3423,8 +3437,8 @@ const Nt = /* @__PURE__ */ g({
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (l(), i("div", Ol, [
-      h((l(), i("div", {
+    return (o, n) => (a(), i("div", Ha, [
+      C((a(), i("div", {
         role: "button",
         class: _(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
@@ -3432,20 +3446,20 @@ const Nt = /* @__PURE__ */ g({
         }]),
         onClick: n[0] || (n[0] = (r) => e(r))
       }, [
-        a("div", {
+        l("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Wl, 8, Ql),
-        a("div", jl, [
-          a("span", Jl, $(o.model.title), 1),
-          Zl
+        }, Ga, 8, Oa),
+        l("div", Wa, [
+          l("span", ja, $(o.model.title), 1),
+          Ja
         ])
       ], 2)), [
         [s(D)]
       ])
     ]));
   }
-}), Yl = { class: "svc-question__dropdown-choices--wrapper" }, xl = { class: "svc-question__dropdown-choices" }, ea = /* @__PURE__ */ g({
+}), Xa = { class: "svc-question__dropdown-choices--wrapper" }, Ya = { class: "svc-question__dropdown-choices" }, xa = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3460,10 +3474,10 @@ const Nt = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (l(), i("div", Yl, [
-      a("div", null, [
-        a("div", xl, [
-          (l(!0), i(w, null, R(n.model.getRenderedItems(), (d) => (l(), i("div", {
+    return (n, r) => (a(), i("div", Xa, [
+      l("div", null, [
+        l("div", Ya, [
+          (a(!0), i(w, null, R(n.model.getRenderedItems(), (d) => (a(), i("div", {
             key: d.value,
             class: _(n.model.getChoiceCss())
           }, [
@@ -3472,7 +3486,7 @@ const Nt = /* @__PURE__ */ g({
             }, o(d)), null, 16, ["is"])
           ], 2))), 128))
         ]),
-        n.model.needToCollapse ? (l(), C(s(c), {
+        n.model.needToCollapse ? (a(), h(s(c), {
           key: 0,
           is: "svc-action-button",
           text: n.model.getButtonText(),
@@ -3482,7 +3496,7 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), oa = /* @__PURE__ */ g({
+}), el = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
@@ -3494,7 +3508,7 @@ const Nt = /* @__PURE__ */ g({
       t.componentData.element,
       null
     );
-    return (o, n) => (l(), C(oe, {
+    return (o, n) => (a(), h(oe, {
       "create-model": e,
       element: o.componentData.element,
       "component-name": o.componentName,
@@ -3502,7 +3516,7 @@ const Nt = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), sa = { class: "svc-question__adorner" }, ta = { class: "svc-question__content svc-question__content--in-popup" }, na = { class: "svc-question__dropdown-choices" }, ae = "survey-radiogroup-item", la = /* @__PURE__ */ g({
+}), ol = { class: "svc-question__adorner" }, sl = { class: "svc-question__content svc-question__content--in-popup" }, tl = { class: "svc-question__dropdown-choices" }, le = "survey-radiogroup-item", nl = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
@@ -3511,19 +3525,19 @@ const Nt = /* @__PURE__ */ g({
   setup(u) {
     const t = u, e = k(
       () => t.componentData.element
-    ), o = (r) => e.value.getItemValueWrapperComponentName(r) || ae, n = (r) => ({
-      componentName: ae,
+    ), o = (r) => e.value.getItemValueWrapperComponentName(r) || le, n = (r) => ({
+      componentName: le,
       componentData: {
         question: e.value,
         item: r,
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return f(() => e.value), (r, d) => (l(), i("div", sa, [
-      a("div", ta, [
+    return f(() => e.value), (r, d) => (a(), i("div", ol, [
+      l("div", sl, [
         v(s(c), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        a("div", na, [
-          (l(!0), i(w, null, R(e.value.visibleChoices, (m) => (l(), i("div", {
+        l("div", tl, [
+          (a(!0), i(w, null, R(e.value.visibleChoices, (m) => (a(), i("div", {
             key: m.value,
             class: "svc-question__dropdown-choice"
           }, [
@@ -3535,25 +3549,25 @@ const Nt = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), aa = ["data-sv-drop-target-survey-element"], ia = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ra = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), da = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), ca = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ua = { class: "svc-widget__content" }, pa = {
+}), al = ["data-sv-drop-target-survey-element"], ll = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), il = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), rl = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), dl = /* @__PURE__ */ l("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), cl = { class: "svc-widget__content" }, ul = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, va = /* @__PURE__ */ a("div", {
+}, pl = /* @__PURE__ */ l("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), ma = [
-  va
-], _a = { class: "svc-question__content-actions" }, ga = {
+}, null, -1), vl = [
+  pl
+], ml = { class: "svc-question__content-actions" }, _l = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, ba = { class: "svc-panel__placeholder" }, ya = /* @__PURE__ */ g({
+}, gl = { class: "svc-panel__placeholder" }, bl = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const t = u, e = B(), o = A(
+    const t = u, e = I(), o = A(
       () => new ee(
         t.componentData.data,
         t.componentData.element,
@@ -3568,7 +3582,7 @@ const Nt = /* @__PURE__ */ g({
       e.value && o.value && (o.value.rootElement = e.value);
     }), E(() => {
       e.value && o.value && (o.value.rootElement = e.value);
-    }), (n, r) => s(o) ? (l(), i("div", {
+    }), (n, r) => s(o) ? (a(), i("div", {
       key: 0,
       class: _(["svc-question__adorner", s(o).rootCss()]),
       onMouseover: r[2] || (r[2] = (d) => s(o).hover(d, d.currentTarget)),
@@ -3577,17 +3591,17 @@ const Nt = /* @__PURE__ */ g({
       ref_key: "root",
       ref: e
     }, [
-      s(o).element.isInteractiveDesignElement ? h((l(), i("div", {
+      s(o).element.isInteractiveDesignElement ? C((a(), i("div", {
         key: 0,
         class: _(["svc-question__content", s(o).css()]),
         onClick: r[1] || (r[1] = (d) => s(o).select(s(o), d)),
         "data-bind": "clickBubble: false"
       }, [
-        ia,
-        ra,
-        da,
-        ca,
-        s(o).allowDragging ? (l(), i("div", {
+        ll,
+        il,
+        rl,
+        dl,
+        s(o).allowDragging ? (a(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
           onPointerdown: r[0] || (r[0] = (d) => s(o).onPointerDown(d))
@@ -3599,11 +3613,11 @@ const Nt = /* @__PURE__ */ g({
             size: "auto"
           })
         ], 32)) : p("", !0),
-        a("div", ua, [
+        l("div", cl, [
           v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (l(), i("div", pa, ma)) : p("", !0),
-        a("div", _a, [
+        s(o).isEmptyElement ? (a(), i("div", ul, vl)) : p("", !0),
+        l("div", ml, [
           v(s(c), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
@@ -3613,24 +3627,24 @@ const Nt = /* @__PURE__ */ g({
       ], 2)), [
         [s(D)]
       ]) : p("", !0),
-      s(o).element.isInteractiveDesignElement ? p("", !0) : (l(), i(w, { key: 1 }, [
+      s(o).element.isInteractiveDesignElement ? p("", !0) : (a(), i(w, { key: 1 }, [
         v(s(c), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (l(), i("div", ga, [
-          a("div", ba, $(s(o).placeholderText), 1)
+        s(o).isEmptyElement ? (a(), i("div", _l, [
+          l("div", gl, $(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, aa)) : p("", !0);
+    ], 42, al)) : p("", !0);
   }
-}), ha = { class: "svc-carry-forward-panel-wrapper" }, Ca = { class: "svc-carry-forward-panel" }, qa = { class: "svc-carry-forward-panel__link" }, ka = /* @__PURE__ */ g({
+}), yl = { class: "svc-carry-forward-panel-wrapper" }, hl = { class: "svc-carry-forward-panel" }, ql = { class: "svc-carry-forward-panel__link" }, Cl = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(u) {
-    return (t, e) => (l(), i("div", ha, [
-      a("div", Ca, [
-        a("span", null, $(t.model.text) + $(" "), 1),
-        a("span", qa, [
+    return (t, e) => (a(), i("div", yl, [
+      l("div", hl, [
+        l("span", null, $(t.model.text) + $(" "), 1),
+        l("span", ql, [
           v(s(c), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3641,20 +3655,20 @@ const Nt = /* @__PURE__ */ g({
     ]));
   }
 });
-function $a(u, t, e) {
+function kl(u, t, e) {
   u(t, e);
 }
 function pe(u) {
-  const t = $a.bind(
+  const t = kl.bind(
     void 0,
     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", wo), 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", Kl), 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", Ct), 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", fs), 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", en), t("svc-toolbox-category", xt), t("svc-toolbox-tool", Ht), t("svc-toolbox-item", Wt), t("svc-toolbox-item-group", jt), t(Ae, Vt), t("svc-tab-designer", vn), t("svc-page-navigator", Hl), t("svc-page-navigator-item", Xl), t("svc-page", kn), t("svc-row", Mn), t("svc-add-new-question-btn", wn), t("svc-add-question-type-selector", Tn), t("svc-question", le), t("svc-rating-question", le), 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", la), t("svc-question-editor-content", Ml), t("svc-logo-image", Rl), t("svc-panel", ml), t("svc-item-value", hl), t("svc-image-item-value", Nl), t("svc-dropdown-question", oa), t("svc-dropdown-question-adorner", ea), t("svc-widget-question", ya), t("svc-question-banner", ka);
+  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", wo), 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", Fa), 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", fs), t("json-error-item", Ls), 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", Ua), t("svc-page-navigator-item", Za), t("svc-page", Cn), t("svc-row", Nn), t("svc-add-new-question-btn", $n), t("svc-add-question-type-selector", fn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Wn), t("svc-image-question", zn), t("svc-image-question-adorner", Qn), t("svc-matrix-cell", Jn), t("svc-cell-question", Yn), t("svc-cell-dropdown-question", nl), t("svc-question-editor-content", Na), t("svc-logo-image", Pa), t("svc-panel", va), t("svc-item-value", ya), t("svc-image-item-value", Da), t("svc-dropdown-question", el), t("svc-dropdown-question-adorner", xa), t("svc-widget-question", bl), t("svc-question-banner", Cl);
 }
 pe(
   (u, t) => ie.Instance.registerComponent(u, t)
 );
-const Na = {
+const Dl = {
   install(u) {
     u.component("SurveyCreatorComponent", je), pe((t, e) => {
       u.component(t, e), ie.Instance.registerComponent(t, t);
@@ -3663,5 +3677,5 @@ const Na = {
 };
 export {
   je as SurveyCreatorComponent,
-  Na as surveyCreatorPlugin
+  Dl as surveyCreatorPlugin
 };