survey-creator-vue 2.0.1 → 2.0.2

package/survey-creator-vue.es.js

@@ -5,7 +5,7 @@ import { ScrollViewModel as ke, editorLocalization as pe, SurveyResultsModel as
 const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Fe = { class: "svc-top-bar" }, Ke = {
   key: 0,
   class: "svc-tabbed-menu-wrapper"
-}, Ue = ["v-show"], He = { class: "svc-creator__content-holder svc-flex-column" }, Oe = ["id"], Qe = {
+}, Ue = ["v-show"], He = { class: "svc-creator__content-holder svc-flex-column" }, Oe = ["aria-labelledby", "id"], Qe = {
   key: 0,
   class: "svc-footer-bar"
 }, Ge = ["v-show"], We = {
@@ -75,10 +75,12 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
                 a("div", He, [
                   (l(!0), i(w, null, R(e.value.tabs, (d) => (l(), i(w, null, [
                     e.value.viewType == d.id && d.visible ? (l(), i("div", {
+                      role: "tabpanel",
                       class: _(["svc-creator-tab", {
                         "svc-creator__toolbox--right": e.value.toolboxLocation == "right"
                       }]),
                       key: d.id,
+                      "aria-labelledby": "tab-" + d.id,
                       id: "scrollableDiv-" + d.id
                     }, [
                       v(s(u), {
@@ -137,7 +139,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }), (n, r) => (l(), i("div", {
       class: "svc-tabbed-menu",
       ref_key: "container",
-      ref: o
+      ref: o,
+      role: "tablist"
     }, [
       (l(!0), i(w, null, R(n.model.renderedActions, (d) => (l(), C(s(u), {
         key: d.renderedId,
@@ -174,7 +177,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), xe = /* @__PURE__ */ g({
+}), xe = ["id", "aria-selected", "aria-controls"], eo = /* @__PURE__ */ g({
   __name: "TabbedMenuItem",
   props: {
     item: {}
@@ -182,6 +185,10 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
   setup(c) {
     const t = c;
     return f(() => t.item), (e, o) => h((l(), i("div", {
+      role: "tab",
+      id: "tab-" + e.item.id,
+      "aria-selected": e.item.active,
+      "aria-controls": "scrollableDiv-" + e.item.id,
       class: _(["svc-tabbed-menu-item", e.item.getRootCss()]),
       onClick: o[0] || (o[0] = //@ts-ignore
       (...n) => e.item.action && e.item.action(...n))
@@ -198,11 +205,11 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: _(e.item.getIconCss()),
         title: e.item.tooltip || e.item.title
       }, null, 8, ["iconName", "class", "title"])) : p("", !0)
-    ], 2)), [
+    ], 10, xe)), [
       [s(D)]
     ]);
   }
-}), eo = { class: "svc-flex-row svc-side-bar__wrapper" }, oo = { class: "svc-side-bar__container-wrapper" }, so = { class: "svc-side-bar__container-content" }, to = /* @__PURE__ */ g({
+}), oo = { class: "svc-flex-row svc-side-bar__wrapper" }, so = { class: "svc-side-bar__container-wrapper" }, to = { class: "svc-side-bar__container-content" }, no = /* @__PURE__ */ g({
   __name: "SideBar",
   props: {
     model: {}
@@ -222,8 +229,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       }, null, 512), [
         [F, o.model.renderContainer]
       ]),
-      a("div", eo, [
-        h(a("div", oo, [
+      a("div", oo, [
+        h(a("div", so, [
           a("div", {
             class: "svc-side-bar__container",
             ref_key: "root",
@@ -233,7 +240,7 @@ const Le = { 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, [
+            a("div", to, [
               (l(!0), i(w, null, R(o.model.pages, (r, d) => (l(), C(s(u), {
                 key: d,
                 is: "svc-side-bar-page",
@@ -254,27 +261,27 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       [F, o.model.renderRoot]
     ]);
   }
-}), no = { class: "svc-side-bar__container-header" }, lo = { class: "svc-side-bar__container-actions" }, ao = {
+}), lo = { class: "svc-side-bar__container-header" }, ao = { class: "svc-side-bar__container-actions" }, io = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, io = /* @__PURE__ */ g({
+}, ro = /* @__PURE__ */ g({
   __name: "SideBarDefaultHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return f(() => t.model), (e, o) => (l(), i("div", no, [
-      a("div", lo, [
+    return f(() => t.model), (e, o) => (l(), i("div", lo, [
+      a("div", ao, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.toolbar
         }, null, 8, ["model"])
       ]),
-      e.model.title ? (l(), i("div", ao, k(e.model.title), 1)) : p("", !0)
+      e.model.title ? (l(), i("div", io, k(e.model.title), 1)) : p("", !0)
     ]));
   }
-}), ro = /* @__PURE__ */ g({
+}), co = /* @__PURE__ */ g({
   __name: "SideBarPage",
   props: {
     model: {}
@@ -287,7 +294,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       model: e.model.componentData
     }, null, 8, ["is", "model"])) : p("", !0);
   }
-}), co = /* @__PURE__ */ g({
+}), uo = /* @__PURE__ */ g({
   __name: "ObjectSelector",
   props: {
     model: {}
@@ -300,8 +307,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       model: e.model.list
     }, null, 8, ["model"])) : p("", !0);
   }
-}), uo = { class: "svc-scroll__container" }, po = /* @__PURE__ */ a("div", { class: "svc-scroll__scrollbar-sizer" }, null, -1), vo = [
-  po
+}), po = { class: "svc-scroll__container" }, vo = /* @__PURE__ */ a("div", { class: "svc-scroll__scrollbar-sizer" }, null, -1), mo = [
+  vo
 ], W = /* @__PURE__ */ g({
   __name: "Scroll",
   setup(c) {
@@ -319,17 +326,17 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
         class: "svc-scroll__scroller sv-drag-target-skipped",
         onScroll: n[0] || (n[0] = () => s(t).onScrollContainer())
       }, [
-        a("div", uo, [
+        a("div", po, [
           X(o.$slots, "default")
         ])
       ], 32),
       a("div", {
         class: "svc-scroll__scrollbar",
         onScroll: n[1] || (n[1] = () => s(t).onScrollScrollbar())
-      }, vo, 32)
+      }, mo, 32)
     ], 512));
   }
-}), mo = /* @__PURE__ */ g({
+}), _o = /* @__PURE__ */ g({
   __name: "PropertyGrid",
   props: {
     model: {}
@@ -354,7 +361,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       })
     ], 2));
   }
-}), _o = /* @__PURE__ */ g({
+}), go = /* @__PURE__ */ g({
   __name: "Tabs",
   props: {
     model: {}
@@ -367,9 +374,9 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       model: n
     }, null, 8, ["model"]))), 128));
   }
-}), go = { class: "svc-sidebar-tabs__top-container" }, bo = { class: "svc-sidebar-tabs__collapse-button" }, yo = /* @__PURE__ */ a("div", { class: "svc-sidebar-tabs__separator" }, [
+}), bo = { class: "svc-sidebar-tabs__top-container" }, yo = { class: "svc-sidebar-tabs__collapse-button" }, ho = /* @__PURE__ */ a("div", { class: "svc-sidebar-tabs__separator" }, [
   /* @__PURE__ */ a("div")
-], -1), ho = { class: "svc-sidebar-tabs__items" }, Co = { class: "svc-sidebar-tabs__bottom-container" }, qo = { class: "svc-sidebar-tabs__items" }, $o = /* @__PURE__ */ g({
+], -1), Co = { class: "svc-sidebar-tabs__items" }, qo = { class: "svc-sidebar-tabs__bottom-container" }, $o = { class: "svc-sidebar-tabs__items" }, ko = /* @__PURE__ */ g({
   __name: "TabControl",
   props: {
     model: {}
@@ -379,17 +386,17 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     return f(() => t.model), (e, o) => (l(), i("div", {
       class: _(e.model.sideBarClassName)
     }, [
-      a("div", go, [
-        a("div", bo, [
+      a("div", bo, [
+        a("div", yo, [
           v(s(u), {
             is: "svc-tab-button",
             model: e.model.expandCollapseAction
           }, null, 8, ["model"])
         ]),
-        yo,
+        ho,
         v(W, null, {
           default: Y(() => [
-            a("div", ho, [
+            a("div", Co, [
               v(s(u), {
                 is: "svc-tabs",
                 model: e.model.topToolbar
@@ -399,8 +406,8 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           _: 1
         })
       ]),
-      a("div", Co, [
-        a("div", qo, [
+      a("div", qo, [
+        a("div", $o, [
           v(s(u), {
             is: "svc-tabs",
             model: e.model.bottomToolbar
@@ -409,24 +416,24 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ], 2));
   }
-}), ko = {
+}), wo = {
   key: 0,
   class: "svc-menu-action"
-}, wo = ["title"], fo = { class: "svc-menu-action__icon" }, To = { class: "svc-menu-action__icon-container" }, Do = /* @__PURE__ */ g({
+}, fo = ["title"], To = { class: "svc-menu-action__icon" }, Do = { class: "svc-menu-action__icon-container" }, No = /* @__PURE__ */ g({
   __name: "TabButton",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return f(() => t.model), (e, o) => e.model.visible ? (l(), i("div", ko, [
+    return f(() => t.model), (e, o) => e.model.visible ? (l(), i("div", wo, [
       h((l(), i("div", {
         class: _(e.model.buttonClassName),
         title: e.model.tooltip,
         onClick: o[0] || (o[0] = (n) => e.model.action())
       }, [
-        a("div", fo, [
-          a("div", To, [
+        a("div", To, [
+          a("div", Do, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: e.model.iconName,
@@ -434,64 +441,64 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             }, null, 8, ["iconName"])
           ])
         ])
-      ], 10, wo)), [
+      ], 10, fo)), [
         [s(D), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
       ])
     ])) : p("", !0);
   }
-}), No = { class: "svc-property-grid-placeholder" }, Mo = { class: "svc-property-grid-placeholder__header" }, So = { class: "svc-property-grid-placeholder__title" }, Io = { class: "svc-property-grid-placeholder__description" }, Bo = /* @__PURE__ */ a("div", { class: "svc-property-grid-placeholder__content" }, [
+}), Mo = { class: "svc-property-grid-placeholder" }, So = { class: "svc-property-grid-placeholder__header" }, Io = { class: "svc-property-grid-placeholder__title" }, Bo = { class: "svc-property-grid-placeholder__description" }, Eo = /* @__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" })
-], -1), Eo = /* @__PURE__ */ g({
+], -1), Po = /* @__PURE__ */ g({
   __name: "PropertyGridPlaceholder",
   setup(c) {
     const t = pe;
-    return (e, o) => (l(), i("div", No, [
-      a("div", Mo, [
-        a("span", So, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
-        a("span", Io, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
+    return (e, o) => (l(), i("div", Mo, [
+      a("div", So, [
+        a("span", Io, k(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
+        a("span", Bo, k(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
       ]),
-      Bo
+      Eo
     ]));
   }
-}), Po = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Ro = {
+}), Ro = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Vo = {
   key: 0,
   class: "svc-side-bar__container-title"
-}, Vo = {
+}, Ao = {
   key: 1,
   class: "svc-sidebar__header-caption"
-}, Ao = { class: "svc-sidebar__header-title" }, zo = { class: "svc-sidebar__header-subtitle" }, Lo = /* @__PURE__ */ g({
+}, zo = { class: "svc-sidebar__header-title" }, Lo = { class: "svc-sidebar__header-subtitle" }, Fo = /* @__PURE__ */ g({
   __name: "SideBarHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return f(() => t.model), (e, o) => (l(), i("div", Po, [
-      e.model.subTitle ? p("", !0) : (l(), i("div", Ro, k(e.model.title), 1)),
-      e.model.subTitle ? (l(), i("div", Vo, [
-        a("span", Ao, k(e.model.title), 1),
-        a("span", zo, k(e.model.subTitle), 1)
+    return f(() => t.model), (e, o) => (l(), i("div", Ro, [
+      e.model.subTitle ? p("", !0) : (l(), i("div", Vo, k(e.model.title), 1)),
+      e.model.subTitle ? (l(), i("div", Ao, [
+        a("span", zo, k(e.model.title), 1),
+        a("span", Lo, k(e.model.subTitle), 1)
       ])) : p("", !0)
     ]));
   }
-}), Fo = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Ko = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Uo = { class: "svc-sidebar__header-content" }, Ho = { class: "svc-sidebar__header-caption" }, Oo = { class: "svc-sidebar__header-title" }, Qo = { class: "svc-sidebar__header-subtitle" }, Go = /* @__PURE__ */ g({
+}), Ko = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Uo = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Ho = { class: "svc-sidebar__header-content" }, Oo = { class: "svc-sidebar__header-caption" }, Qo = { class: "svc-sidebar__header-title" }, Go = { class: "svc-sidebar__header-subtitle" }, Wo = /* @__PURE__ */ g({
   __name: "SideBarPropertyGridHeader",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return f(() => t.model), (e, o) => (l(), i("div", Fo, [
-      a("div", Ko, [
-        a("div", Uo, [
+    return f(() => t.model), (e, o) => (l(), i("div", Ko, [
+      a("div", Uo, [
+        a("div", Ho, [
           h((l(), i("div", {
             class: _(e.model.buttonClassName),
             onClick: o[0] || (o[0] = (n) => e.model.action())
           }, [
-            a("div", Ho, [
-              a("span", Oo, k(e.model.title), 1),
-              a("span", Qo, k(e.model.tooltip), 1)
+            a("div", Oo, [
+              a("span", Qo, k(e.model.title), 1),
+              a("span", Go, k(e.model.tooltip), 1)
             ])
           ], 2)), [
             [s(D), { processEsc: !1 }]
@@ -504,7 +511,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])
     ]));
   }
-}), Wo = /* @__PURE__ */ g({
+}), jo = /* @__PURE__ */ g({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -532,7 +539,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 2)
     ]));
   }
-}), jo = ["title"], Jo = ["title"], Zo = ["title"], Xo = ["title"], Yo = /* @__PURE__ */ g({
+}), Jo = ["title"], Zo = ["title"], Xo = ["title"], Yo = ["title"], xo = /* @__PURE__ */ g({
   __name: "ActionButton",
   props: {
     classes: {},
@@ -554,7 +561,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           key: 0,
           class: _(["svc-action-button svc-action-button--disabled", n.classes]),
           title: n.title
-        }, k(n.text), 11, jo)) : p("", !0),
+        }, k(n.text), 11, Jo)) : p("", !0),
         h((l(), i("span", {
           role: "button",
           class: _(["svc-action-button", o()]),
@@ -562,7 +569,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           title: n.title
         }, [
           be(k(n.text), 1)
-        ], 10, Jo)), [
+        ], 10, Zo)), [
           [s(D)]
         ])
       ], 64)),
@@ -577,7 +584,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Zo)) : p("", !0),
+        ], 10, Xo)) : p("", !0),
         h((l(), i("span", {
           role: "button",
           onClick: e,
@@ -589,21 +596,21 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             iconName: n.iconName,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 10, Xo)), [
+        ], 10, Yo)), [
           [s(D)]
         ])
       ], 64)) : p("", !0)
     ], 64));
   }
-}), xo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], es = /* @__PURE__ */ a("div", { class: "svc-switcher__icon-thumb" }, null, -1), os = [
-  es
-], ss = {
+}), es = ["disabled", "title", "aria-checked", "aria-expanded", "role"], os = /* @__PURE__ */ a("div", { class: "svc-switcher__icon-thumb" }, null, -1), ss = [
+  os
+], ts = {
   key: 0,
   class: "svc-switcher__title"
-}, ts = {
+}, ns = {
   inheritAttrs: !1
-}, ns = /* @__PURE__ */ g({
-  ...ts,
+}, ls = /* @__PURE__ */ g({
+  ...ns,
   __name: "Switcher",
   props: {
     item: {}
@@ -627,16 +634,16 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     }, [
       a("div", {
         class: _(e.item.getSwitcherIconCss())
-      }, os, 2),
-      e.item.hasTitle ? (l(), i("span", ss, k(e.item.title), 1)) : p("", !0)
-    ], 42, xo)), [
+      }, ss, 2),
+      e.item.hasTitle ? (l(), i("span", ts, k(e.item.title), 1)) : p("", !0)
+    ], 42, es)), [
       [s(D), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
     ]);
   }
-}), ls = {
+}), as = {
   key: 0,
   class: "svd-simulator-content"
-}, as = { class: "svd-simulator-content" }, is = /* @__PURE__ */ g({
+}, is = { class: "svd-simulator-content" }, rs = /* @__PURE__ */ g({
   __name: "Simulator",
   props: {
     model: {}
@@ -655,7 +662,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       onMouseover: d[1] || (d[1] = (m) => o()),
       onMouseout: d[2] || (d[2] = (m) => n())
     }, [
-      r.model.hasFrame ? p("", !0) : (l(), i("div", ls, [
+      r.model.hasFrame ? p("", !0) : (l(), i("div", as, [
         v(s(u), {
           is: "survey-widget",
           model: r.model.survey
@@ -678,7 +685,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
             transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
           })
         }, [
-          a("div", as, [
+          a("div", is, [
             v(s(u), {
               is: "survey-widget",
               model: r.model.survey
@@ -688,7 +695,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ], 4)) : p("", !0)
     ], 34));
   }
-}), rs = { class: "svc-surface-placeholder" }, ds = { class: "svc-surface-placeholder__text" }, cs = { class: "svc-surface-placeholder__title" }, us = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
+}), ds = { class: "svc-surface-placeholder" }, cs = { class: "svc-surface-placeholder__text" }, us = { class: "svc-surface-placeholder__title" }, ps = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
   __name: "SurfacePlaceholder",
   props: {
     name: {},
@@ -696,20 +703,20 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
     placeholderDescriptionText: {}
   },
   setup(c) {
-    return (t, e) => (l(), i("div", rs, [
+    return (t, e) => (l(), i("div", ds, [
       a("div", {
         class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + t.name])
       }, null, 2),
-      a("div", ds, [
-        a("div", cs, k(t.placeholderTitleText), 1),
-        a("div", us, k(t.placeholderDescriptionText), 1)
+      a("div", cs, [
+        a("div", us, k(t.placeholderTitleText), 1),
+        a("div", ps, k(t.placeholderDescriptionText), 1)
       ])
     ]));
   }
-}), ps = {
+}), vs = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, vs = /* @__PURE__ */ g({
+}, ms = /* @__PURE__ */ g({
   __name: "Test",
   props: {
     model: {}
@@ -742,7 +749,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ], 32)),
-      e.model.isPageToolbarVisible ? (l(), i("div", ps, [
+      e.model.isPageToolbarVisible ? (l(), i("div", vs, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -750,7 +757,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       ])) : p("", !0)
     ], 2));
   }
-}), ms = { class: "svc-btn__text" }, _s = /* @__PURE__ */ g({
+}), _s = { class: "svc-btn__text" }, gs = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "TestAgain",
   props: {
@@ -763,7 +770,7 @@ const Le = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element
       class: "svc-preview__test-again svc-btn",
       onClick: n[0] || (n[0] = (r) => e.value.action())
     }, [
-      a("span", ms, k(e.value.title), 1)
+      a("span", _s, k(e.value.title), 1)
     ])), [
       [s(D)]
     ]);
@@ -783,10 +790,10 @@ function A(c, t, e) {
     n();
   }), o;
 }
-const gs = {
+const bs = {
   key: 0,
   class: "svd-test-results"
-}, bs = { class: "svd-test-results__content" }, ys = { class: "svd-test-results__header" }, hs = { class: "svd-test-results__header-text" }, Cs = { class: "svd-test-results__header-types" }, qs = { class: "svd-test-results__text svd-light-bg-color" }, $s = { class: "svd-test-results__table svd-light-bg-color" }, ks = { class: "svd-light-background-color" }, ws = { class: "svd-dark-border-color" }, fs = { class: "svd-dark-border-color" }, Ts = /* @__PURE__ */ g({
+}, ys = { class: "svd-test-results__content" }, hs = { class: "svd-test-results__header" }, Cs = { class: "svd-test-results__header-text" }, qs = { class: "svd-test-results__header-types" }, $s = { class: "svd-test-results__text svd-light-bg-color" }, ks = { class: "svd-test-results__table svd-light-bg-color" }, ws = { class: "svd-light-background-color" }, fs = { class: "svd-dark-border-color" }, Ts = { class: "svd-dark-border-color" }, Ds = /* @__PURE__ */ g({
   __name: "SurveyResults",
   props: {
     survey: {}
@@ -796,11 +803,11 @@ const gs = {
       () => t.survey ? new we(t.survey) : void 0,
       [() => t.survey]
     );
-    return (o, n) => s(e) ? (l(), i("div", gs, [
-      a("div", bs, [
-        a("div", ys, [
-          a("div", hs, k(s(e).surveyResultsText), 1),
-          a("div", Cs, [
+    return (o, n) => s(e) ? (l(), i("div", bs, [
+      a("div", ys, [
+        a("div", hs, [
+          a("div", Cs, k(s(e).surveyResultsText), 1),
+          a("div", qs, [
             v(s(u), {
               is: "svc-action-button",
               text: s(e).surveyResultsTableText,
@@ -817,17 +824,17 @@ const gs = {
             }, null, 8, ["text", "click", "selected"])
           ])
         ]),
-        h(a("div", qs, [
+        h(a("div", $s, [
           a("div", null, k(s(e).resultText), 1)
         ], 512), [
           [F, s(e).resultViewType === "text"]
         ]),
-        h(a("div", $s, [
+        h(a("div", ks, [
           a("table", null, [
             a("thead", null, [
-              a("tr", ks, [
-                a("th", ws, k(s(e).resultsTitle), 1),
-                a("th", fs, k(s(e).resultsDisplayValue), 1)
+              a("tr", ws, [
+                a("th", fs, k(s(e).resultsTitle), 1),
+                a("th", Ts, k(s(e).resultsDisplayValue), 1)
               ])
             ]),
             a("tbody", null, [
@@ -844,7 +851,7 @@ const gs = {
       ])
     ])) : p("", !0);
   }
-}), Ds = { key: 2 }, Ns = /* @__PURE__ */ g({
+}), Ns = { key: 2 }, Ms = /* @__PURE__ */ g({
   __name: "SurveyResultsRow",
   props: {
     model: {}
@@ -875,7 +882,7 @@ const gs = {
             key: 1,
             is: "survey-string",
             locString: e.model.question.locTitle
-          }, null, 8, ["locString"])) : (l(), i("span", Ds, k(e.model.title), 1))
+          }, null, 8, ["locString"])) : (l(), i("span", Ns, k(e.model.title), 1))
         ], 4),
         a("td", {
           class: _({
@@ -893,21 +900,21 @@ const gs = {
       }, null, 8, ["model"]))), 128)) : p("", !0)
     ], 64));
   }
-}), Ms = { class: "svc-creator-tab__content" }, Ss = { class: "svc-json-editor-tab__content" }, Is = { class: "svc-json-editor-tab__errros_list" }, Bs = /* @__PURE__ */ g({
+}), Ss = { class: "svc-creator-tab__content" }, Is = { class: "svc-json-editor-tab__content" }, Bs = { class: "svc-json-editor-tab__errros_list" }, Es = /* @__PURE__ */ g({
   __name: "JsonEditorAce",
   props: {
     model: {}
   },
   setup(c) {
     const t = c, e = B();
-    return f(() => t.model), E(() => t.model.init(window.ace.edit(e.value))), (o, n) => (l(), i("div", Ms, [
-      a("div", Ss, [
+    return f(() => t.model), E(() => t.model.init(window.ace.edit(e.value))), (o, n) => (l(), i("div", Ss, [
+      a("div", Is, [
         a("div", {
           class: "svc-json-editor-tab__ace-editor",
           ref_key: "inputEl",
           ref: e
         }, null, 512),
-        h(a("div", Is, [
+        h(a("div", Bs, [
           v(s(u), {
             is: "sv-list",
             model: o.model.errorList
@@ -918,7 +925,7 @@ const gs = {
       ])
     ]));
   }
-}), Es = { class: "svc-creator-tab__content" }, Ps = { class: "svc-json-editor-tab__content" }, Rs = ["aria-label", "disabled"], Vs = { class: "svc-json-editor-tab__errros_list" }, As = /* @__PURE__ */ g({
+}), Ps = { class: "svc-creator-tab__content" }, Rs = { class: "svc-json-editor-tab__content" }, Vs = ["aria-label", "disabled"], As = { class: "svc-json-editor-tab__errros_list" }, zs = /* @__PURE__ */ g({
   __name: "JsonEditorTextArea",
   props: {
     model: {}
@@ -928,8 +935,8 @@ const gs = {
     return o.canShowErrors = !1, f(() => t.model), E(() => {
       const n = t.model;
       n.textElement = e.value;
-    }), (n, r) => (l(), i("div", Es, [
-      a("div", Ps, [
+    }), (n, r) => (l(), i("div", Ps, [
+      a("div", Rs, [
         h(a("textarea", {
           class: "svc-json-editor-tab__content-area",
           "aria-label": s(o).ariaLabel,
@@ -939,10 +946,10 @@ const gs = {
           ref_key: "inputEl",
           ref: e
         }, `
-      `, 40, Rs), [
+      `, 40, Vs), [
           [ce, s(o).text]
         ]),
-        h(a("div", Vs, [
+        h(a("div", As, [
           v(s(u), {
             is: "sv-list",
             model: s(o).errorList
@@ -953,7 +960,7 @@ const gs = {
       ])
     ]));
   }
-}), zs = { class: "svc-json-error__container" }, Ls = { class: "svc-json-error__title" }, Fs = ["title", "aria-label"], Ks = /* @__PURE__ */ g({
+}), Ls = { class: "svc-json-error__container" }, Fs = { class: "svc-json-error__title" }, Ks = ["title", "aria-label"], Us = /* @__PURE__ */ g({
   __name: "JsonEditorErrorItem",
   props: {
     item: {}
@@ -971,8 +978,8 @@ const gs = {
         size: o.item.iconSize,
         class: _("svc-json-error__icon")
       }, null, 8, ["iconName", "size"]),
-      a("div", zs, [
-        a("div", Ls, [
+      a("div", Ls, [
+        a("div", Fs, [
           v(s(u), {
             is: "survey-string",
             locString: o.item.locTitle
@@ -991,13 +998,13 @@ const gs = {
             iconName: o.item.data.fixButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 8, Fs)), [
+        ], 8, Ks)), [
           [s(D)]
         ]) : p("", !0)
       ])
     ], 64));
   }
-}), Us = { class: "svc-btn__text" }, ne = /* @__PURE__ */ g({
+}), Hs = { class: "svc-btn__text" }, ne = /* @__PURE__ */ g({
   __name: "LogicAddButton",
   props: {
     model: {}
@@ -1015,22 +1022,22 @@ const gs = {
       }]),
       onClick: e
     }, [
-      a("span", Us, k(o.model.title), 1)
+      a("span", Hs, k(o.model.title), 1)
     ], 2)), [
       [s(D)]
     ]);
   }
-}), Hs = { class: "svc-creator-tab__content" }, Os = {
+}), Os = { class: "svc-creator-tab__content" }, Qs = {
   key: 1,
   class: "svc-logic-tab__content-empty"
-}, Qs = /* @__PURE__ */ g({
+}, Gs = /* @__PURE__ */ g({
   __name: "Logic",
   props: {
     model: {}
   },
   setup(c) {
     const t = c;
-    return f(() => t.model), (e, o) => (l(), i("div", Hs, [
+    return f(() => t.model), (e, o) => (l(), i("div", Os, [
       a("div", {
         class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
       }, [
@@ -1043,7 +1050,7 @@ const gs = {
             model: e.model.addNewButton
           }, null, 8, ["model"]))
         ], 64)) : p("", !0),
-        e.model.hasItems ? p("", !0) : (l(), i("div", Os, [
+        e.model.hasItems ? p("", !0) : (l(), i("div", Qs, [
           v(j, {
             name: "logic",
             placeholderTitleText: e.model.placeholderTitleText,
@@ -1057,13 +1064,13 @@ const gs = {
       ], 2)
     ]));
   }
-}), Gs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Ws = ["id"];
+}), Ws = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], js = ["id"];
 ue.Instance.registerRenderer(
   "dropdown",
   "logicoperator",
   "sv-logic-operator"
 );
-const js = /* @__PURE__ */ g({
+const Js = /* @__PURE__ */ g({
   __name: "LogicOperator",
   props: {
     question: {}
@@ -1126,7 +1133,7 @@ const js = /* @__PURE__ */ g({
           ], 2)), [
             [F, !m.question.isEmpty()]
           ]) : p("", !0)
-        ], 42, Gs),
+        ], 42, Ws),
         v(s(u), {
           is: "sv-popup",
           model: m.question.popupModel
@@ -1144,10 +1151,10 @@ const js = /* @__PURE__ */ g({
           locString: m.question.selectedItemLocText
         }, null, 8, ["locString"])) : p("", !0),
         a("div", null, k(m.question.readOnlyText), 1)
-      ], 10, Ws)) : p("", !0)
+      ], 10, js)) : p("", !0)
     ], 2));
   }
-}), Js = /* @__PURE__ */ g({
+}), Zs = /* @__PURE__ */ g({
   __name: "EmbeddedSurvey",
   props: {
     question: {}
@@ -1163,7 +1170,7 @@ const js = /* @__PURE__ */ g({
       survey: o.value
     }, null, 8, ["page", "survey"])) : p("", !0);
   }
-}), Zs = /* @__PURE__ */ g({
+}), Xs = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "LinkValue",
   props: {
@@ -1192,10 +1199,10 @@ const js = /* @__PURE__ */ g({
       }, null, 8, ["text", "click", "classes"])) : p("", !0)
     ], 64));
   }
-}), Xs = {
+}), Ys = {
   key: 1,
   class: "st-content"
-}, Ys = { class: "svc-flex-column st-strings-wrapper" }, xs = { class: "svc-flex-row st-strings-header" }, et = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, ot = /* @__PURE__ */ g({
+}, xs = { class: "svc-flex-column st-strings-wrapper" }, et = { class: "svc-flex-row st-strings-header" }, ot = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, st = /* @__PURE__ */ g({
   __name: "Translation",
   props: {
     model: {}
@@ -1211,14 +1218,14 @@ const js = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.isEmpty ? p("", !0) : (l(), i("div", Xs, [
-        a("div", Ys, [
-          a("div", xs, [
+      e.model.isEmpty ? p("", !0) : (l(), i("div", Ys, [
+        a("div", xs, [
+          a("div", et, [
             v(s(Q), {
               model: e.model.stringsHeaderSurvey
             }, null, 8, ["model"])
           ]),
-          a("div", et, [
+          a("div", ot, [
             v(s(Q), {
               model: e.model.stringsSurvey
             }, null, 8, ["model"])
@@ -1227,16 +1234,16 @@ const js = /* @__PURE__ */ g({
       ]))
     ], 2));
   }
-}), st = (c, t) => {
+}), tt = (c, t) => {
   const e = c.__vccOpts || c;
   for (const [o, n] of t)
     e[o] = n;
   return e;
-}, tt = {}, nt = { class: "sd-translation-line-skeleton" };
-function lt(c, t) {
-  return l(), i("div", nt);
+}, nt = {}, lt = { class: "sd-translation-line-skeleton" };
+function at(c, t) {
+  return l(), i("div", lt);
 }
-const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
+const it = /* @__PURE__ */ tt(nt, [["render", at]]), rt = /* @__PURE__ */ g({
   __name: "TranslateFromAction",
   props: {
     item: {}
@@ -1254,13 +1261,13 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
       }, null, 8, ["item"])
     ], 2));
   }
-}), rt = {
+}), dt = {
   key: 1,
   class: "svc-plugin-tab__content"
-}, dt = {
+}, ct = {
   key: 2,
   class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
-}, ct = /* @__PURE__ */ g({
+}, ut = /* @__PURE__ */ g({
   __name: "Theme",
   props: {
     model: {}
@@ -1278,7 +1285,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         placeholderTitleText: e.model.placeholderTitleText,
         placeholderDescriptionText: e.model.placeholderDescriptionText
       }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
-      e.model.survey.isEmpty ? p("", !0) : (l(), i("div", rt, [
+      e.model.survey.isEmpty ? p("", !0) : (l(), i("div", dt, [
         v(s(u), {
           is: "survey-simulator",
           model: e.model.simulator
@@ -1289,7 +1296,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
           survey: e.model.survey
         }, null, 8, ["survey"])) : p("", !0)
       ])),
-      e.model.isPageToolbarVisible ? (l(), i("div", dt, [
+      e.model.isPageToolbarVisible ? (l(), i("div", ct, [
         v(s(u), {
           is: "sv-action-bar",
           model: e.model.pages
@@ -1297,7 +1304,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 2));
   }
-}), ut = ["disabled", "value"], pt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], vt = /* @__PURE__ */ g({
+}), pt = ["disabled", "value"], vt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], mt = /* @__PURE__ */ g({
   __name: "Color",
   props: {
     question: {}
@@ -1325,7 +1332,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
           tabindex: "-1",
           onChange: o[0] || (o[0] = //@ts-ignore
           (...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n))
-        }, null, 42, ut)
+        }, null, 42, pt)
       ], 6),
       a("input", {
         autocomplete: "off",
@@ -1346,7 +1353,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
-      }, null, 42, pt),
+      }, null, 42, vt),
       e.question.showDropdownAction ? (l(), i(w, { key: 0 }, [
         v(s(u), {
           is: "sv-action-bar-item",
@@ -1359,7 +1366,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
       ], 64)) : p("", !0)
     ], 34));
   }
-}), mt = /* @__PURE__ */ g({
+}), _t = /* @__PURE__ */ g({
   __name: "ColorItem",
   props: {
     model: {},
@@ -1380,7 +1387,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
       }, null, 8, ["locString"])
     ], 64));
   }
-}), _t = ["disabled", "value", "placeholder"], gt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], bt = ["disabled"], yt = ["for", "aria-label"], ht = /* @__PURE__ */ g({
+}), gt = ["disabled", "value", "placeholder"], bt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], yt = ["disabled"], ht = ["for", "aria-label"], Ct = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
@@ -1412,7 +1419,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         onBlur: n[1] || (n[1] = //@ts-ignore
         (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
         placeholder: o.question.renderedPlaceholder
-      }, null, 42, _t),
+      }, null, 42, gt),
       a("input", {
         type: "file",
         disabled: o.question.isInputReadOnly,
@@ -1428,7 +1435,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         accept: o.question.acceptedTypes,
         onChange: n[2] || (n[2] = //@ts-ignore
         (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
-      }, null, 42, gt),
+      }, null, 42, bt),
       a("div", {
         class: _(o.question.cssClasses.buttonsContainer)
       }, [
@@ -1445,7 +1452,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
             size: "auto",
             title: o.question.clearButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, bt)), [
+        ], 10, yt)), [
           [s(D)]
         ]),
         h((l(), i("label", {
@@ -1462,13 +1469,13 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
             size: "auto",
             title: o.question.chooseButtonCaption
           }, null, 8, ["iconName", "title"])
-        ], 10, yt)), [
+        ], 10, ht)), [
           [s(D)]
         ])
       ], 2)
     ], 34));
   }
-}), Ct = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], qt = ["disabled"], $t = ["disabled"], kt = /* @__PURE__ */ g({
+}), qt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "value"], $t = ["disabled"], kt = ["disabled"], wt = /* @__PURE__ */ g({
   __name: "SpinEditor",
   props: {
     question: {}
@@ -1502,7 +1509,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
         (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
         value: e.question.renderedValue,
         class: _(e.question.cssClasses.control)
-      }, null, 42, Ct),
+      }, null, 42, qt),
       a("span", {
         class: _(e.question.cssClasses.buttonsContainer)
       }, [
@@ -1528,7 +1535,7 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.decreaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, qt),
+        ], 42, $t),
         a("button", {
           disabled: e.question.isInputReadOnly,
           class: _(e.question.cssClasses.arrowButton),
@@ -1551,11 +1558,11 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
             iconName: e.question.cssClasses.increaseButtonIcon,
             size: "auto"
           }, null, 8, ["iconName"])
-        ], 42, $t)
+        ], 42, kt)
       ], 2)
     ], 34));
   }
-}), wt = ["disabled", "title"], le = /* @__PURE__ */ g({
+}), ft = ["disabled", "title"], le = /* @__PURE__ */ g({
   __name: "TextWithReset",
   props: {
     question: {}
@@ -1581,23 +1588,23 @@ const at = /* @__PURE__ */ st(tt, [["render", lt]]), it = /* @__PURE__ */ g({
           iconName: o.question.cssClasses.resetButtonIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, wt)
+      ], 10, ft)
     ], 2));
   }
-}), ft = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Tt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
+}), Tt = ["aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Dt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })
-], -1), Dt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
+], -1), Nt = /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb" }, [
   /* @__PURE__ */ a("div", { class: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" })
-], -1), Nt = [
-  Tt,
-  Dt
-], Mt = { class: "spg-boolean-switch__caption" }, St = { class: "spg-boolean-switch__title" };
+], -1), Mt = [
+  Dt,
+  Nt
+], St = { class: "spg-boolean-switch__caption" }, It = { class: "spg-boolean-switch__title" };
 ue.Instance.registerRenderer(
   "boolean",
   "switch",
   "sv-boolean-switch"
 );
-const It = /* @__PURE__ */ g({
+const Bt = /* @__PURE__ */ g({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -1617,23 +1624,23 @@ const It = /* @__PURE__ */ g({
       h((l(), i("div", {
         class: _(["spg-boolean-switch__button", o.question.value ? "spg-boolean-switch__button--checked" : ""]),
         tabindex: "0"
-      }, Nt, 2)), [
+      }, Mt, 2)), [
         [s(D), { disableTabStop: !0 }]
       ]),
-      a("div", Mt, [
-        a("div", St, [
+      a("div", St, [
+        a("div", It, [
           v(s(u), {
             is: "survey-string",
             locString: o.question.locTitle
           }, null, 8, ["locString"])
         ])
       ])
-    ], 8, ft));
+    ], 8, Tt));
   }
-}), Bt = { class: "svc-string-editor__content" }, Et = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Pt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Rt = { class: "svc-string-editor__input" }, Vt = ["textContent", "aria-placeholder", "contenteditable"], At = ["aria-placeholder", "contenteditable", "innerHTML"], zt = {
+}), Et = { class: "svc-string-editor__content" }, Pt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--hover" }, null, -1), Rt = /* @__PURE__ */ a("div", { class: "svc-string-editor__border svc-string-editor__border--focus" }, null, -1), Vt = { class: "svc-string-editor__input" }, At = ["textContent", "aria-placeholder", "contenteditable"], zt = ["aria-placeholder", "contenteditable", "innerHTML"], Lt = {
   key: 0,
   class: "svc-string-editor__error"
-}, Lt = /* @__PURE__ */ g({
+}, Ft = /* @__PURE__ */ g({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -1709,10 +1716,10 @@ const It = /* @__PURE__ */ g({
     }), (q, T) => (l(), i("span", {
       class: _(b.value)
     }, [
-      a("span", Bt, [
-        Et,
+      a("span", Et, [
         Pt,
-        a("span", Rt, [
+        Rt,
+        a("span", Vt, [
           e.value.hasHtml ? p("", !0) : (l(), i("span", {
             key: 0,
             role: "textbox",
@@ -1757,7 +1764,7 @@ const It = /* @__PURE__ */ g({
             contenteditable: N.value,
             ref_key: "root",
             ref: n
-          }, null, 40, Vt)),
+          }, null, 40, At)),
           e.value.hasHtml ? (l(), i("span", {
             key: 1,
             role: "textbox",
@@ -1796,7 +1803,7 @@ const It = /* @__PURE__ */ g({
             innerHTML: r.value,
             ref_key: "root",
             ref: n
-          }, null, 40, At)) : p("", !0),
+          }, null, 40, zt)) : p("", !0),
           P.value ? (l(), C(s(u), {
             key: 2,
             is: "sv-character-counter",
@@ -1805,19 +1812,19 @@ const It = /* @__PURE__ */ g({
           }, null, 8, ["counter", "remainingCharacterCounter"])) : p("", !0)
         ])
       ]),
-      m.value ? (l(), i("span", zt, k(m.value), 1)) : p("", !0)
+      m.value ? (l(), i("span", Lt, k(m.value), 1)) : p("", !0)
     ], 2));
   }
-}), Ft = {
+}), Kt = {
   key: 0,
   class: "svc-toolbox__search-container"
-}, Kt = /* @__PURE__ */ a("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Ut = {
+}, Ut = /* @__PURE__ */ a("div", { class: "svc-toolbox__category-separator svc-toolbox__category-separator--search" }, null, -1), Ht = {
   key: 1,
   class: "svc-toolbox__placeholder"
-}, Ht = {
+}, Ot = {
   key: 1,
   class: "svc-toolbox__category"
-}, Ot = /* @__PURE__ */ g({
+}, Qt = /* @__PURE__ */ g({
   __name: "AdaptiveToolbox",
   props: {
     model: {}
@@ -1844,7 +1851,7 @@ const It = /* @__PURE__ */ g({
         onFocusout: m[0] || (m[0] = (b) => e.value.focusOut(b)),
         class: "svc-toolbox__panel"
       }, [
-        e.value.showSearch ? (l(), i("div", Ft, [
+        e.value.showSearch ? (l(), i("div", Kt, [
           e.value.isCompactRendered ? (l(), C(s(u), {
             is: "svc-toolbox-tool",
             creator: d.model,
@@ -1857,9 +1864,9 @@ const It = /* @__PURE__ */ g({
             is: "svc-search",
             model: e.value.searchManager
           }, null, 8, ["model"]),
-          Kt
+          Ut
         ])) : p("", !0),
-        e.value.showPlaceholder ? (l(), i("div", Ut, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
+        e.value.showPlaceholder ? (l(), i("div", Ht, k(e.value.toolboxNoResultsFound), 1)) : p("", !0),
         v(W, null, {
           default: Y(() => [
             e.value.showInSingleCategory ? p("", !0) : (l(!0), i(w, { key: 0 }, R(e.value.categories, (b, y) => (l(), C(s(u), {
@@ -1868,7 +1875,7 @@ const It = /* @__PURE__ */ g({
               category: b,
               toolbox: e.value
             }, null, 8, ["category", "toolbox"]))), 128)),
-            e.value.showInSingleCategory ? (l(), i("div", Ht, [
+            e.value.showInSingleCategory ? (l(), i("div", Ot, [
               (l(!0), i(w, null, R(r.value, (b) => (l(), C(s(u), {
                 key: b.renderedId,
                 is: "svc-toolbox-tool",
@@ -1884,10 +1891,10 @@ const It = /* @__PURE__ */ g({
       ], 32)
     ], 2));
   }
-}), Qt = {
+}), Gt = {
   key: 0,
   class: "svc-toolbox__category-separator"
-}, Gt = /* @__PURE__ */ g({
+}, Wt = /* @__PURE__ */ g({
   __name: "ToolboxTool",
   props: {
     creator: {},
@@ -1922,7 +1929,7 @@ const It = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (l(), i("div", Qt)) : p("", !0),
+        n.item.needSeparator && !n.creator.toolbox.showCategoryTitles ? (l(), i("div", Gt)) : p("", !0),
         a("div", {
           class: "svc-toolbox__tool-content sv-action__content",
           onPointerdown: r[0] || (r[0] = //@ts-ignore
@@ -1942,10 +1949,10 @@ const It = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Wt = ["aria-label", "title"], jt = { class: "svc-toolbox__item-container" }, Jt = {
+}), jt = ["aria-label", "title"], Jt = { class: "svc-toolbox__item-container" }, Zt = {
   key: 0,
   class: "svc-toolbox__item-title"
-}, Zt = /* @__PURE__ */ g({
+}, Xt = /* @__PURE__ */ g({
   __name: "ToolboxItem",
   props: {
     creator: {},
@@ -1962,7 +1969,7 @@ const It = /* @__PURE__ */ g({
         title: t.item.tooltip,
         onClick: e[0] || (e[0] = (o) => t.viewModel.click(o))
       }, [
-        a("span", jt, [
+        a("span", Jt, [
           t.item.iconName ? (l(), C(s(u), {
             key: 0,
             is: "sv-svg-icon",
@@ -1971,8 +1978,8 @@ const It = /* @__PURE__ */ g({
             class: "svc-toolbox__item-icon"
           }, null, 8, ["iconName"])) : p("", !0)
         ]),
-        t.isCompact ? p("", !0) : (l(), i("span", Jt, k(t.item.title), 1))
-      ], 10, Wt)), [
+        t.isCompact ? p("", !0) : (l(), i("span", Zt, k(t.item.title), 1))
+      ], 10, jt)), [
         [s(D)]
       ]),
       t.isCompact ? (l(), i("span", {
@@ -1990,7 +1997,7 @@ const It = /* @__PURE__ */ g({
       ])) : p("", !0)
     ], 64));
   }
-}), Xt = /* @__PURE__ */ g({
+}), Yt = /* @__PURE__ */ g({
   __name: "ToolboxItemGroup",
   props: {
     creator: {},
@@ -2029,10 +2036,10 @@ const It = /* @__PURE__ */ g({
       ], 32)
     ], 64));
   }
-}), Yt = { className: "svc-toolbox__category-header-wrapper" }, xt = { class: "svc-toolbox__category-title" }, en = {
+}), xt = { className: "svc-toolbox__category-header-wrapper" }, en = { class: "svc-toolbox__category-title" }, on = {
   key: 0,
   class: "svc-toolbox__category-header__controls"
-}, on = { className: "svc-toolbox__category-header-wrapper" }, sn = /* @__PURE__ */ g({
+}, sn = { className: "svc-toolbox__category-header-wrapper" }, tn = /* @__PURE__ */ g({
   __name: "ToolboxCategory",
   props: {
     category: {},
@@ -2046,16 +2053,16 @@ const It = /* @__PURE__ */ g({
         "svc-toolbox__category--empty": e.category.empty
       }])
     }, [
-      a("div", Yt, [
+      a("div", xt, [
         h((l(), 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", xt, k(e.category.title), 1),
-          e.toolbox.canCollapseCategories ? (l(), i("div", en, [
-            a("div", on, [
+          a("span", en, k(e.category.title), 1),
+          e.toolbox.canCollapseCategories ? (l(), i("div", on, [
+            a("div", sn, [
               h(v(s(u), {
                 is: "sv-svg-icon",
                 iconName: "icon-arrow-down",
@@ -2088,7 +2095,7 @@ const It = /* @__PURE__ */ g({
       }, null, 8, ["item", "creator", "parentModel"]))), 128))
     ], 2));
   }
-}), tn = /* @__PURE__ */ g({
+}), nn = /* @__PURE__ */ g({
   __name: "ToolboxList",
   props: {
     model: {},
@@ -2108,28 +2115,28 @@ const It = /* @__PURE__ */ g({
       }, null, 8, ["creator", "item", "parentModel"]))), 128))
     ], 2));
   }
-}), nn = { class: "svc-flex-column" }, ln = { class: "svc-tab-designer_content" }, an = {
+}), ln = { class: "svc-flex-column" }, an = { class: "svc-tab-designer_content" }, rn = {
   key: 0,
   class: "svc-designer-header"
-}, rn = {
+}, dn = {
   class: "svc-designer__placeholder-container",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, dn = {
+}, cn = {
   className: "svc-designer-placeholder-page",
   "data-sv-drop-target-survey-element": "newGhostPage"
-}, cn = {
+}, un = {
   key: 0,
   class: "svc-designer-header"
-}, un = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], pn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], vn = {
+}, pn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], vn = ["data-sv-drop-target-survey-element", "data-sv-drop-target-page"], mn = {
   key: 0,
   class: "svc-tab-designer__tools"
-}, mn = {
+}, _n = {
   key: 0,
   class: "svc-tab-designer__page-navigator"
-}, _n = {
+}, gn = {
   key: 1,
   class: "svc-tab-designer__toolbar"
-}, gn = /* @__PURE__ */ g({
+}, bn = /* @__PURE__ */ g({
   __name: "Designer",
   props: {
     model: {}
@@ -2137,7 +2144,7 @@ const It = /* @__PURE__ */ g({
   setup(c) {
     const t = c, e = $(() => t.model.survey);
     return f(() => t.model), f(() => e.value), (o, n) => (l(), i(w, null, [
-      a("div", nn, [
+      a("div", ln, [
         o.model.isToolboxVisible ? (l(), C(s(u), {
           key: 0,
           is: "svc-toolbox",
@@ -2151,21 +2158,21 @@ const It = /* @__PURE__ */ g({
       }, [
         v(W, null, {
           default: Y(() => [
-            a("div", ln, [
+            a("div", an, [
               o.model.showPlaceholder ? (l(), i(w, { key: 0 }, [
-                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", an, [
+                o.model.creator.showHeaderInEmptySurvey && o.model.creator.allowEditSurveyTitle ? (l(), i("div", rn, [
                   v(s(u), {
                     is: "survey-header",
                     survey: o.model.creator.survey
                   }, null, 8, ["survey"])
                 ])) : p("", !0),
-                a("div", rn, [
+                a("div", dn, [
                   v(j, {
                     name: "designer",
                     placeholderTitleText: o.model.placeholderTitleText,
                     placeholderDescriptionText: o.model.placeholderDescriptionText
                   }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
-                  a("div", dn, [
+                  a("div", cn, [
                     v(s(u), {
                       is: "svc-page",
                       survey: o.model.creator.survey,
@@ -2184,7 +2191,7 @@ const It = /* @__PURE__ */ g({
                     o.model.surfaceCssVariables
                   ])
                 }, [
-                  o.model.creator.allowEditSurveyTitle ? (l(), i("div", cn, [
+                  o.model.creator.allowEditSurveyTitle ? (l(), i("div", un, [
                     v(s(u), {
                       is: "survey-header",
                       survey: o.model.creator.survey
@@ -2203,7 +2210,7 @@ const It = /* @__PURE__ */ g({
                       page: r,
                       isGhost: r == o.model.newPage
                     }, null, 8, ["survey", "creator", "page", "isGhost"])
-                  ], 8, un))), 128)) : p("", !0),
+                  ], 8, pn))), 128)) : p("", !0),
                   o.model.pagesController.page2Display && o.model.creator.pageEditMode === "bypage" ? (l(), i("div", {
                     key: 2,
                     class: "svc-page",
@@ -2216,17 +2223,17 @@ const It = /* @__PURE__ */ g({
                       creator: o.model.creator,
                       isGhost: o.model.pagesController.page2Display == o.model.newPage
                     }, null, 8, ["page", "creator", "isGhost"])
-                  ], 8, pn)) : p("", !0)
+                  ], 8, vn)) : p("", !0)
                 ], 6),
-                o.model.showSurfaceTools ? (l(), i("div", vn, [
-                  o.model.creator.showPageNavigator ? (l(), i("div", mn, [
+                o.model.showSurfaceTools ? (l(), i("div", mn, [
+                  o.model.creator.showPageNavigator ? (l(), i("div", _n, [
                     v(s(u), {
                       is: "svc-page-navigator",
                       pagesController: o.model.pagesController,
                       pageEditMode: o.model.creator.pageEditMode
                     }, null, 8, ["pagesController", "pageEditMode"])
                   ])) : p("", !0),
-                  o.model.showSurfaceToolbar ? (l(), i("div", _n, [
+                  o.model.showSurfaceToolbar ? (l(), i("div", gn, [
                     v(s(u), {
                       is: "sv-action-bar",
                       model: o.model.surfaceToolbar
@@ -2241,13 +2248,13 @@ const It = /* @__PURE__ */ g({
       ], 2)
     ], 64));
   }
-}), bn = ["id", "data-sv-drop-target-survey-page"], yn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), hn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Cn = {
+}), yn = ["id", "data-sv-drop-target-survey-page"], hn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Cn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), qn = {
   key: 0,
   class: "svc-page__placeholder_frame"
-}, qn = { class: "svc-panel__placeholder_frame" }, $n = { class: "svc-panel__placeholder" }, kn = { class: "svc-page__content-actions" }, wn = {
+}, $n = { class: "svc-panel__placeholder_frame" }, kn = { class: "svc-panel__placeholder" }, wn = { class: "svc-page__content-actions" }, fn = {
   key: 2,
   class: "svc-page__content-actions"
-}, fn = /* @__PURE__ */ g({
+}, Tn = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     creator: {},
@@ -2293,16 +2300,16 @@ const It = /* @__PURE__ */ g({
       onMouseover: n,
       onMouseleave: n
     }, [
-      yn,
       hn,
+      Cn,
       v(s(u), {
         is: "survey-page",
         survey: s(o).creator.survey,
         page: s(o).page
       }, null, 8, ["survey", "page"]),
-      s(o).showPlaceholder ? (l(), i("div", Cn, [
-        a("div", qn, [
-          a("div", $n, k(s(o).placeholderText), 1)
+      s(o).showPlaceholder ? (l(), i("div", qn, [
+        a("div", $n, [
+          a("div", kn, k(s(o).placeholderText), 1)
         ])
       ])) : p("", !0),
       s(o).allowDragging && !s(o).isGhost ? (l(), i("div", {
@@ -2318,7 +2325,7 @@ const It = /* @__PURE__ */ g({
           iconName: "icon-drag-area-indicator_24x16",
           size: "auto"
         }), null, 16),
-        a("div", kn, [
+        a("div", wn, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer
@@ -2330,7 +2337,7 @@ const It = /* @__PURE__ */ g({
           }, null, 8, ["model"])) : p("", !0)
         ])
       ], 32)) : p("", !0),
-      !s(o).allowDragging || s(o).isGhost ? (l(), i("div", wn, [
+      !s(o).allowDragging || s(o).isGhost ? (l(), i("div", fn, [
         v(s(u), {
           is: "sv-action-bar",
           model: s(o).actionContainer
@@ -2345,11 +2352,11 @@ const It = /* @__PURE__ */ g({
         is: "sv-action-bar",
         model: s(o).footerActionsBar
       }, null, 8, ["model"])
-    ], 42, bn)), [
+    ], 42, yn)), [
       [s(D)]
     ]) : p("", !0);
   }
-}), Tn = { class: "svc-add-new-item-button__text" }, Dn = /* @__PURE__ */ g({
+}), Dn = { class: "svc-add-new-item-button__text" }, Nn = /* @__PURE__ */ g({
   __name: "AddQuestion",
   props: {
     item: {},
@@ -2366,7 +2373,8 @@ const It = /* @__PURE__ */ g({
         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))
+        onMouseover: r[1] || (r[1] = (d) => n.item.data.hoverStopper && n.item.data.hoverStopper(d, d.currentTarget)),
+        role: "button"
       }, [
         v(s(u), {
           is: "sv-svg-icon",
@@ -2374,7 +2382,7 @@ const It = /* @__PURE__ */ g({
           iconName: "icon-add_24x24",
           size: "auto"
         }),
-        a("span", Tn, k(n.item.data.addNewQuestionText), 1),
+        a("span", Dn, k(n.item.data.addNewQuestionText), 1),
         o.value ? (l(), C(s(u), {
           key: 0,
           is: "svc-add-question-type-selector",
@@ -2392,7 +2400,7 @@ const It = /* @__PURE__ */ g({
       }, null, 8, ["questionTypeSelectorModel", "renderPopup"]))
     ], 64));
   }
-}), Nn = ["title", "aria-label"], Mn = /* @__PURE__ */ g({
+}), Mn = ["title", "aria-label"], Sn = /* @__PURE__ */ g({
   __name: "AddQuestionTypeSelector",
   props: {
     questionTypeSelectorModel: {},
@@ -2422,11 +2430,11 @@ const It = /* @__PURE__ */ g({
         is: "sv-popup",
         model: e.questionTypeSelectorModel.popupModel
       }, null, 8, ["model"])) : p("", !0)
-    ], 8, Nn)), [
+    ], 8, Mn)), [
       [s(D)]
     ]);
   }
-}), Sn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), In = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), Bn = /* @__PURE__ */ g({
+}), In = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--top" }, null, -1), Bn = /* @__PURE__ */ a("div", { class: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }, null, -1), En = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     componentData: {}
@@ -2446,15 +2454,15 @@ const It = /* @__PURE__ */ g({
     }), (r, d) => (l(), i("div", {
       class: _(s(n).cssClasses)
     }, [
-      Sn,
       In,
+      Bn,
       X(r.$slots, "default")
     ], 2));
   }
-}), En = ["data-sv-drop-target-survey-element"], Pn = { class: "svc-fake-title" }, Rn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), Vn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Ln = { class: "svc-question__top-actions" }, Fn = {
+}), Pn = ["data-sv-drop-target-survey-element"], Rn = { class: "svc-fake-title" }, Vn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), An = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), zn = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), Ln = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), Fn = { class: "svc-question__top-actions" }, Kn = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, Kn = { class: "svc-panel__placeholder_frame" }, Un = {
+}, Un = { class: "svc-panel__placeholder_frame" }, Hn = {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
 }, se = /* @__PURE__ */ g({
@@ -2510,7 +2518,7 @@ const It = /* @__PURE__ */ g({
           key: 1,
           class: _(s(o).cssCollapsedHiddenTitle)
         }, [
-          a("span", Pn, k(d.element.name), 1)
+          a("span", Rn, k(d.element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       h((l(), i("div", {
@@ -2519,10 +2527,10 @@ const It = /* @__PURE__ */ g({
         }),
         class: _(s(o).css())
       }, [
-        Rn,
         Vn,
         An,
         zn,
+        Ln,
         s(o).allowDragging ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -2536,7 +2544,7 @@ const It = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }), null, 16),
-          a("div", Ln, [
+          a("div", Fn, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(o).topActionContainer,
@@ -2550,9 +2558,9 @@ const It = /* @__PURE__ */ g({
             componentName: d.componentName,
             componentData: d.componentData
           }, null, 8, ["componentName", "componentData"]),
-          s(o).isEmptyElement && !d.showPlaceholderComponent ? (l(), i("div", Fn, [
-            a("div", Kn, [
-              a("div", Un, k(s(o).placeholderText), 1)
+          s(o).isEmptyElement && !d.showPlaceholderComponent ? (l(), i("div", Kn, [
+            a("div", Un, [
+              a("div", Hn, k(s(o).placeholderText), 1)
             ])
           ])) : p("", !0),
           s(o).isEmptyElement && d.showPlaceholderComponent ? (l(), C(s(u), V(
@@ -2587,7 +2595,7 @@ const It = /* @__PURE__ */ g({
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, En)) : p("", !0);
+    ], 42, Pn)) : p("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "Question",
@@ -2608,7 +2616,7 @@ const It = /* @__PURE__ */ g({
       "component-data": o.componentData
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), Hn = /* @__PURE__ */ g({
+}), On = /* @__PURE__ */ g({
   __name: "QuestionImage",
   props: {
     componentName: {},
@@ -2633,17 +2641,17 @@ const It = /* @__PURE__ */ g({
       "adorner-component": "svc-image-question-adorner"
     }, null, 8, ["element", "component-data", "component-name"]));
   }
-}), On = {
+}), Qn = {
   key: 0,
   class: "svc-image-question-controls"
-}, Qn = ["accept"], Gn = {
+}, Gn = ["accept"], Wn = {
   class: "svc-context-button",
   title: void 0,
   "aria-label": void 0
-}, Wn = {
+}, jn = {
   key: 1,
   class: "svc-image-question__loading-placeholder"
-}, jn = { class: "svc-image-question__loading" }, Jn = /* @__PURE__ */ g({
+}, Jn = { class: "svc-image-question__loading" }, Zn = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     model: {},
@@ -2651,7 +2659,7 @@ const It = /* @__PURE__ */ g({
   },
   setup(c) {
     return (t, e) => (l(), i(w, null, [
-      !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", On, [
+      !t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Qn, [
         t.model.allowEdit ? (l(), i(w, { key: 0 }, [
           a("input", {
             type: "file",
@@ -2659,8 +2667,8 @@ const It = /* @__PURE__ */ g({
             tabindex: "-1",
             accept: t.model.acceptedTypes,
             class: "svc-choose-file-input"
-          }, null, 8, Qn),
-          h((l(), i("span", Gn, [
+          }, null, 8, Gn),
+          h((l(), i("span", Wn, [
             v(s(u), {
               is: "sv-svg-icon",
               iconName: "icon-choosefile",
@@ -2672,14 +2680,14 @@ const It = /* @__PURE__ */ g({
           ])
         ], 64)) : p("", !0)
       ])) : p("", !0),
-      t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", Wn, [
-        a("div", jn, [
+      t.model.isUploading && !t.model.isEmptyElement ? (l(), i("div", jn, [
+        a("div", Jn, [
           v(s(u), { is: "sv-loading-indicator" })
         ])
       ])) : p("", !0)
     ], 64));
   }
-}), Zn = { class: "svc-rating-question-content" }, Xn = /* @__PURE__ */ g({
+}), Xn = { class: "svc-rating-question-content" }, Yn = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     componentData: {},
@@ -2696,7 +2704,7 @@ const It = /* @__PURE__ */ g({
     );
     return (o, n) => {
       var r, d, m, b, y, N, O, P, z;
-      return l(), i("div", Zn, [
+      return l(), i("div", Xn, [
         a("div", {
           class: _((r = s(e)) == null ? void 0 : r.controlsClassNames)
         }, [
@@ -2735,10 +2743,10 @@ const It = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Yn = {
+}), xn = {
   key: 0,
   class: "svc-matrix-cell__question-controls"
-}, xn = /* @__PURE__ */ g({
+}, el = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     componentData: {}
@@ -2786,7 +2794,7 @@ const It = /* @__PURE__ */ g({
           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", Yn, [
+        (O = s(m)) != null && O.isSupportCellEditor ? (l(), i("div", xn, [
           h((l(), i("span", {
             class: "svc-matrix-cell__question-controls-button svc-context-button",
             onClick: y[0] || (y[0] = (P) => s(m).editQuestion(s(m), P))
@@ -2803,7 +2811,7 @@ const It = /* @__PURE__ */ g({
       ], 32);
     };
   }
-}), el = { class: "svc-question__adorner" }, ol = { class: "svc-question__content svc-question__content--in-popup" }, sl = /* @__PURE__ */ g({
+}), ol = { class: "svc-question__adorner" }, sl = { class: "svc-question__content svc-question__content--in-popup" }, tl = /* @__PURE__ */ g({
   __name: "CellQuestion",
   props: {
     componentName: {},
@@ -2813,19 +2821,19 @@ const It = /* @__PURE__ */ g({
     const t = c, e = $(
       () => t.componentData.element
     );
-    return f(() => e.value), (o, n) => (l(), i("div", el, [
-      a("div", ol, [
+    return f(() => e.value), (o, n) => (l(), i("div", ol, [
+      a("div", sl, [
         v(s(u), V({ is: o.componentName }, o.componentData), null, 16, ["is"])
       ])
     ]));
   }
-}), tl = ["data-sv-drop-target-survey-element"], nl = { class: "svc-fake-title" }, ll = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), al = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), il = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), rl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), dl = { class: "svc-question__top-actions" }, cl = {
+}), nl = ["data-sv-drop-target-survey-element"], ll = { class: "svc-fake-title" }, al = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), il = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), rl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), dl = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), cl = { class: "svc-question__top-actions" }, ul = {
   key: 0,
   class: "svc-panel__placeholder_frame-wrapper"
-}, ul = { class: "svc-panel__placeholder_frame" }, pl = { class: "svc-panel__placeholder" }, vl = { class: "svc-add-new-item-button__text" }, ml = {
+}, pl = { class: "svc-panel__placeholder_frame" }, vl = { class: "svc-panel__placeholder" }, ml = { class: "svc-add-new-item-button__text" }, _l = {
   key: 1,
   class: "svc-panel__add-new-question-container"
-}, _l = { class: "svc-panel__question-type-selector-popup" }, gl = { class: "svc-panel__add-new-question-wrapper" }, bl = /* @__PURE__ */ g({
+}, gl = { class: "svc-panel__question-type-selector-popup" }, bl = { class: "svc-panel__add-new-question-wrapper" }, yl = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     componentName: {},
@@ -2866,17 +2874,17 @@ const It = /* @__PURE__ */ g({
           key: 1,
           class: _(s(e).cssCollapsedHiddenTitle)
         }, [
-          a("span", nl, k(s(e).element.name), 1)
+          a("span", ll, k(s(e).element.name), 1)
         ], 2))
       ], 2)) : p("", !0),
       h((l(), i("div", {
         class: _(s(e).css()),
         onClick: r[2] || (r[2] = (d) => s(e).element.isInteractiveDesignElement ? s(e).select(s(e), d) : null)
       }, [
-        ll,
         al,
         il,
         rl,
+        dl,
         s(e).allowDragging && s(e).element.isInteractiveDesignElement ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -2888,7 +2896,7 @@ const It = /* @__PURE__ */ g({
             iconName: "icon-drag-area-indicator_24x16",
             size: "auto"
           }),
-          a("div", dl, [
+          a("div", cl, [
             v(s(u), {
               is: "sv-action-bar",
               model: s(e).topActionContainer,
@@ -2898,9 +2906,9 @@ const It = /* @__PURE__ */ g({
         ], 32)) : p("", !0),
         s(e).needToRenderContent ? (l(), i(w, { key: 1 }, [
           v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-          s(e).isEmptyElement ? (l(), i("div", cl, [
-            a("div", ul, [
-              a("div", pl, k(s(e).placeholderText), 1),
+          s(e).isEmptyElement ? (l(), i("div", ul, [
+            a("div", pl, [
+              a("div", vl, k(s(e).placeholderText), 1),
               s(e).showAddQuestionButton ? h((l(), i("div", {
                 key: 0,
                 class: "svc-panel__add-new-question svc-action-button",
@@ -2912,20 +2920,20 @@ const It = /* @__PURE__ */ g({
                   iconName: "icon-add_24x24",
                   size: "auto"
                 }),
-                a("span", vl, k(s(e).addNewQuestionText), 1)
+                a("span", ml, k(s(e).addNewQuestionText), 1)
               ])), [
                 [s(D)]
               ]) : p("", !0)
             ])
           ])) : p("", !0),
-          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (l(), i("div", ml, [
-            a("div", _l, [
+          !s(e).isEmptyElement && s(e).showAddQuestionButton ? (l(), i("div", _l, [
+            a("div", gl, [
               v(s(u), {
                 is: "sv-popup",
                 model: s(e).questionTypeSelectorModel.popupModel
               }, null, 8, ["model"])
             ]),
-            a("div", gl, [
+            a("div", bl, [
               v(s(u), {
                 is: "svc-add-new-question-btn",
                 item: { data: s(e) },
@@ -2949,12 +2957,12 @@ const It = /* @__PURE__ */ g({
       ], 2)), [
         [s(D), { disableTabStop: !0 }]
       ])
-    ], 42, tl)) : p("", !0);
+    ], 42, nl)) : p("", !0);
   }
-}), yl = ["data-sv-drop-target-item-value"], hl = /* @__PURE__ */ a("div", { class: "svc-item-value__ghost" }, null, -1), Cl = { class: "svc-item-value-controls" }, ql = {
+}), hl = ["data-sv-drop-target-item-value"], Cl = /* @__PURE__ */ a("div", { class: "svc-item-value__ghost" }, null, -1), ql = { class: "svc-item-value-controls" }, $l = {
   key: 0,
   class: "svc-item-value-controls__button svc-item-value-controls__drag"
-}, $l = /* @__PURE__ */ g({
+}, kl = /* @__PURE__ */ g({
   __name: "ItemValue",
   props: {
     componentName: {},
@@ -2994,9 +3002,9 @@ const It = /* @__PURE__ */ g({
       ref_key: "root",
       ref: t
     }, [
-      hl,
-      a("div", Cl, [
-        s(m).isDraggable ? (l(), i("span", ql, [
+      Cl,
+      a("div", ql, [
+        s(m).isDraggable ? (l(), i("span", $l, [
           v(s(u), {
             is: "sv-svg-icon",
             class: "svc-item-value-controls__drag-icon",
@@ -3043,18 +3051,18 @@ const It = /* @__PURE__ */ g({
       }, [
         v(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
       ])
-    ], 42, yl));
+    ], 42, hl));
   }
-}), kl = ["data-sv-drop-target-item-value"], wl = { class: "svc-image-item-value-wrapper__content" }, fl = ["accept"], Tl = {
+}), wl = ["data-sv-drop-target-item-value"], fl = { class: "svc-image-item-value-wrapper__content" }, Tl = ["accept"], Dl = {
   key: 0,
   class: "svc-image-item-value__item"
-}, Dl = {
+}, Nl = {
   key: 2,
   class: "svc-context-container svc-image-item-value-controls"
-}, Nl = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Ml = { class: "sd-imagepicker__label" }, Sl = {
+}, Ml = { class: "sd-imagepicker__item sd-imagepicker__item--inline" }, Sl = { class: "sd-imagepicker__label" }, Il = {
   key: 0,
   class: "svc-image-item-value__loading"
-}, Il = /* @__PURE__ */ g({
+}, Bl = /* @__PURE__ */ g({
   __name: "ImageItemValue",
   props: {
     componentName: {},
@@ -3096,16 +3104,16 @@ const It = /* @__PURE__ */ g({
         class: "svc-image-item-value-wrapper__ghost",
         style: K(m.value)
       }, null, 4),
-      a("div", wl, [
+      a("div", fl, [
         a("input", {
           type: "file",
           "aria-hidden": "true",
           tabindex: "-1",
           accept: s(d).acceptedTypes,
           class: "svc-choose-file-input"
-        }, null, 8, fl),
+        }, null, 8, Tl),
         !s(d).isNew && !s(d).isUploading ? (l(), i(w, { key: 0 }, [
-          s(d).isNew ? p("", !0) : (l(), i("div", Tl, [
+          s(d).isNew ? p("", !0) : (l(), i("div", Dl, [
             v(s(u), V({ is: b.componentName }, b.componentData), null, 16, ["is"])
           ])),
           s(d).isDraggable && s(d).canRenderControls ? (l(), i("span", {
@@ -3121,7 +3129,7 @@ const It = /* @__PURE__ */ g({
               size: "auto"
             })
           ], 32)) : p("", !0),
-          s(d).canRenderControls ? (l(), i("div", Dl, [
+          s(d).canRenderControls ? (l(), i("div", Nl, [
             h((l(), i("span", {
               class: "svc-context-button",
               onClick: y[1] || (y[1] = (N) => s(d).chooseFile(s(d))),
@@ -3163,13 +3171,13 @@ const It = /* @__PURE__ */ g({
             onDragleave: y[4] || (y[4] = (N) => s(d).onDragLeave(N)),
             onDrop: y[5] || (y[5] = (N) => s(d).onDrop(N))
           }, [
-            a("div", Nl, [
-              a("label", Ml, [
+            a("div", Ml, [
+              a("label", Sl, [
                 a("div", {
                   style: K(m.value),
                   class: "sd-imagepicker__image"
                 }, [
-                  s(d).isUploading ? (l(), i("div", Sl, [
+                  s(d).isUploading ? (l(), i("div", Il, [
                     v(s(u), { is: "sv-loading-indicator" })
                   ])) : p("", !0)
                 ], 4)
@@ -3199,9 +3207,9 @@ const It = /* @__PURE__ */ g({
           ], 32)
         ], 64)) : p("", !0)
       ])
-    ], 42, kl));
+    ], 42, wl));
   }
-}), Bl = /* @__PURE__ */ g({
+}), El = /* @__PURE__ */ g({
   __name: "QuestionEditor",
   props: {
     survey: {},
@@ -3236,14 +3244,14 @@ const It = /* @__PURE__ */ g({
       v(s(u), V({ is: o.value }, n.value), null, 16, ["is"])
     ], 4));
   }
-}), El = ["accept"], Pl = /* @__PURE__ */ a("svg", null, [
+}), Pl = ["accept"], Rl = /* @__PURE__ */ a("svg", null, [
   /* @__PURE__ */ a("use", { "xlink:href": "#icon-image-48x48" })
-], -1), Rl = [
-  Pl
-], Vl = { class: "svc-context-container svc-logo-image-controls" }, Al = {
+], -1), Vl = [
+  Rl
+], Al = { class: "svc-context-container svc-logo-image-controls" }, zl = {
   key: 2,
   class: "svc-logo-image__loading"
-}, zl = /* @__PURE__ */ g({
+}, Ll = /* @__PURE__ */ g({
   __name: "Logo",
   props: {
     data: {}
@@ -3278,13 +3286,13 @@ const It = /* @__PURE__ */ g({
         tabindex: "-1",
         accept: s(r).acceptedTypes,
         class: "svc-choose-file-input"
-      }, null, 8, El),
+      }, null, 8, Pl),
       d.value ? p("", !0) : (l(), i(w, { key: 0 }, [
         s(r).allowEdit && !s(r).isUploading ? h((l(), i("div", {
           key: 0,
           class: "svc-logo-image-placeholder",
           onClick: y[0] || (y[0] = (N) => s(r).chooseFile(s(r)))
-        }, Rl)), [
+        }, Vl)), [
           [s(D)]
         ]) : p("", !0)
       ], 64)),
@@ -3292,7 +3300,7 @@ const It = /* @__PURE__ */ g({
         key: 1,
         class: _(s(r).containerCss)
       }, [
-        a("div", Vl, [
+        a("div", Al, [
           h((l(), i("span", {
             class: "svc-context-button",
             onClick: y[1] || (y[1] = (N) => s(r).chooseFile(s(r))),
@@ -3327,15 +3335,15 @@ const It = /* @__PURE__ */ g({
           data: o.value
         }, null, 8, ["data"])
       ], 2)) : p("", !0),
-      s(r).isUploading ? (l(), i("div", Al, [
+      s(r).isUploading ? (l(), i("div", zl, [
         v(s(u), { is: "sv-loading-indicator" })
       ])) : p("", !0)
     ], 512));
   }
-}), Ll = {
+}), Fl = {
   key: 0,
   class: "svc-search"
-}, Fl = { class: "svc-search__search-icon" }, Kl = ["aria-label", "placeholder"], Ul = { class: "svc-search__toolbar" }, Hl = { class: "svc-search__toolbar-counter" }, Ol = /* @__PURE__ */ g({
+}, Kl = { class: "svc-search__search-icon" }, Ul = ["aria-label", "placeholder"], Hl = { class: "svc-search__toolbar" }, Ol = { class: "svc-search__toolbar-counter" }, Ql = /* @__PURE__ */ g({
   __name: "Search",
   props: {
     model: {}
@@ -3350,8 +3358,8 @@ const It = /* @__PURE__ */ g({
         n.filterString = o;
       }
     });
-    return (o, n) => o.model.isVisible ? (l(), i("div", Ll, [
-      a("div", Fl, [
+    return (o, n) => o.model.isVisible ? (l(), i("div", Fl, [
+      a("div", Kl, [
         v(s(u), {
           is: "sv-svg-icon",
           iconName: "icon-search",
@@ -3364,11 +3372,11 @@ const It = /* @__PURE__ */ g({
         "onUpdate:modelValue": n[0] || (n[0] = (r) => e.value = r),
         "aria-label": o.model.filterStringPlaceholder,
         placeholder: o.model.filterStringPlaceholder
-      }, null, 8, Kl), [
+      }, null, 8, Ul), [
         [ce, e.value]
       ]),
-      a("div", Ul, [
-        a("div", Hl, k(o.model.matchCounterText), 1),
+      a("div", Hl, [
+        a("div", Ol, k(o.model.matchCounterText), 1),
         v(s(u), {
           is: "sv-action-bar",
           model: o.model.searchActionBar
@@ -3376,7 +3384,7 @@ const It = /* @__PURE__ */ g({
       ])
     ])) : p("", !0);
   }
-}), Ql = ["title"], Gl = /* @__PURE__ */ g({
+}), Gl = ["title"], Wl = /* @__PURE__ */ g({
   __name: "PageNavigator",
   props: {
     pagesController: {},
@@ -3404,6 +3412,7 @@ const It = /* @__PURE__ */ g({
       ref: o
     }, [
       h((l(), 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)),
         title: s(e).pageSelectorCaption
@@ -3418,7 +3427,7 @@ const It = /* @__PURE__ */ g({
           is: "sv-popup",
           model: s(e).popupModel
         }, null, 8, ["model"])
-      ], 10, Ql)), [
+      ], 10, Gl)), [
         [s(D)]
       ]),
       a("div", null, [
@@ -3432,11 +3441,11 @@ const It = /* @__PURE__ */ g({
       [F, s(e).visible]
     ]);
   }
-}), Wl = { class: "svc-page-navigator-item" }, jl = ["title"], Jl = /* @__PURE__ */ a("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Zl = [
-  Jl
-], Xl = { class: "svc-page-navigator-item__banner" }, Yl = { class: "svc-page-navigator-item__text" }, xl = /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot" }, [
+}), jl = { class: "svc-page-navigator-item" }, Jl = ["title"], Zl = /* @__PURE__ */ a("div", { class: "svc-page-navigator-item__dot-content" }, null, -1), Xl = [
+  Zl
+], Yl = { class: "svc-page-navigator-item__banner" }, xl = { class: "svc-page-navigator-item__text" }, ea = /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot" }, [
   /* @__PURE__ */ a("span", { class: "svc-page-navigator-item__dot-content" })
-], -1), ea = /* @__PURE__ */ g({
+], -1), oa = /* @__PURE__ */ g({
   __name: "PageNavigatorItem",
   props: {
     model: {}
@@ -3447,8 +3456,9 @@ const It = /* @__PURE__ */ g({
     const e = (o) => {
       t.model.action(), o.stopPropagation(), o.preventDefault();
     };
-    return (o, n) => (l(), i("div", Wl, [
+    return (o, n) => (l(), i("div", jl, [
       h((l(), i("div", {
+        role: "button",
         class: _(["svc-page-navigator-item-content", {
           "svc-page-navigator-item--selected": o.model.active,
           "svc-page-navigator-item--disabled": o.model.disabled
@@ -3458,17 +3468,17 @@ const It = /* @__PURE__ */ g({
         a("div", {
           class: "svc-page-navigator-item__dot",
           title: o.model.title
-        }, Zl, 8, jl),
-        a("div", Xl, [
-          a("span", Yl, k(o.model.title), 1),
-          xl
+        }, Xl, 8, Jl),
+        a("div", Yl, [
+          a("span", xl, k(o.model.title), 1),
+          ea
         ])
       ], 2)), [
         [s(D)]
       ])
     ]));
   }
-}), oa = { class: "svc-question__dropdown-choices--wrapper" }, sa = { class: "svc-question__dropdown-choices" }, ta = /* @__PURE__ */ g({
+}), sa = { class: "svc-question__dropdown-choices--wrapper" }, ta = { class: "svc-question__dropdown-choices" }, na = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     model: {},
@@ -3483,9 +3493,9 @@ const It = /* @__PURE__ */ g({
         data: t.element.getItemValueWrapperComponentData(n)
       }
     });
-    return (n, r) => (l(), i("div", oa, [
+    return (n, r) => (l(), i("div", sa, [
       a("div", null, [
-        a("div", sa, [
+        a("div", ta, [
           (l(!0), i(w, null, R(n.model.getRenderedItems(), (d) => (l(), i("div", {
             key: d.value,
             class: _(n.model.getChoiceCss())
@@ -3505,7 +3515,7 @@ const It = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), na = /* @__PURE__ */ g({
+}), la = /* @__PURE__ */ g({
   __name: "QuestionDropdown",
   props: {
     componentName: {},
@@ -3525,7 +3535,7 @@ const It = /* @__PURE__ */ g({
       "adorner-component": "svc-dropdown-question-adorner"
     }, null, 8, ["element", "component-name", "component-data"]));
   }
-}), la = { class: "svc-question__adorner" }, aa = { class: "svc-question__content svc-question__content--in-popup" }, ia = { class: "svc-question__dropdown-choices" }, ie = "survey-radiogroup-item", ra = /* @__PURE__ */ g({
+}), aa = { class: "svc-question__adorner" }, ia = { class: "svc-question__content svc-question__content--in-popup" }, ra = { class: "svc-question__dropdown-choices" }, ie = "survey-radiogroup-item", da = /* @__PURE__ */ g({
   __name: "CellQuestionDropdown",
   props: {
     componentName: {},
@@ -3542,10 +3552,10 @@ const It = /* @__PURE__ */ g({
         data: e.value.getItemValueWrapperComponentData(r)
       }
     });
-    return f(() => e.value), (r, d) => (l(), i("div", la, [
-      a("div", aa, [
+    return f(() => e.value), (r, d) => (l(), i("div", aa, [
+      a("div", ia, [
         v(s(u), V({ is: r.componentName }, r.componentData), null, 16, ["is"]),
-        a("div", ia, [
+        a("div", ra, [
           (l(!0), i(w, null, R(e.value.visibleChoices, (m) => (l(), i("div", {
             key: m.value,
             class: "svc-question__dropdown-choice"
@@ -3558,18 +3568,18 @@ const It = /* @__PURE__ */ g({
       ])
     ]));
   }
-}), da = ["data-sv-drop-target-survey-element"], ca = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), ua = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), pa = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), va = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), ma = { class: "svc-widget__content" }, _a = {
+}), ca = ["data-sv-drop-target-survey-element"], ua = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--left" }, null, -1), pa = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--right" }, null, -1), va = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--top" }, null, -1), ma = /* @__PURE__ */ a("div", { class: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }, null, -1), _a = { class: "svc-widget__content" }, ga = {
   key: 1,
   class: "svc-panel__placeholder_frame"
-}, ga = /* @__PURE__ */ a("div", {
+}, ba = /* @__PURE__ */ a("div", {
   class: "svc-panel__placeholder",
   "data-bind": "text: placeholderText"
-}, null, -1), ba = [
-  ga
-], ya = { class: "svc-question__content-actions" }, ha = {
+}, null, -1), ya = [
+  ba
+], ha = { class: "svc-question__content-actions" }, Ca = {
   key: 0,
   class: "svc-panel__placeholder_frame"
-}, Ca = { class: "svc-panel__placeholder" }, qa = /* @__PURE__ */ g({
+}, qa = { class: "svc-panel__placeholder" }, $a = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     componentName: {},
@@ -3606,10 +3616,10 @@ const It = /* @__PURE__ */ g({
         onClick: r[1] || (r[1] = (d) => s(o).select(s(o), d)),
         "data-bind": "clickBubble: false"
       }, [
-        ca,
         ua,
         pa,
         va,
+        ma,
         s(o).allowDragging ? (l(), i("div", {
           key: 0,
           class: "svc-question__drag-area",
@@ -3622,11 +3632,11 @@ const It = /* @__PURE__ */ g({
             size: "auto"
           })
         ], 32)) : p("", !0),
-        a("div", ma, [
+        a("div", _a, [
           v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"])
         ]),
-        s(o).isEmptyElement ? (l(), i("div", _a, ba)) : p("", !0),
-        a("div", ya, [
+        s(o).isEmptyElement ? (l(), i("div", ga, ya)) : p("", !0),
+        a("div", ha, [
           v(s(u), {
             is: "sv-action-bar",
             model: s(o).actionContainer,
@@ -3638,22 +3648,22 @@ const It = /* @__PURE__ */ g({
       ]) : p("", !0),
       s(o).element.isInteractiveDesignElement ? p("", !0) : (l(), i(w, { key: 1 }, [
         v(s(u), V({ is: n.componentName }, n.componentData), null, 16, ["is"]),
-        s(o).isEmptyElement ? (l(), i("div", ha, [
-          a("div", Ca, k(s(o).placeholderText), 1)
+        s(o).isEmptyElement ? (l(), i("div", Ca, [
+          a("div", qa, k(s(o).placeholderText), 1)
         ])) : p("", !0)
       ], 64))
-    ], 42, da)) : p("", !0);
+    ], 42, ca)) : p("", !0);
   }
-}), $a = { class: "svc-carry-forward-panel-wrapper" }, ka = { class: "svc-carry-forward-panel" }, wa = { class: "svc-carry-forward-panel__link" }, fa = /* @__PURE__ */ g({
+}), ka = { class: "svc-carry-forward-panel-wrapper" }, wa = { class: "svc-carry-forward-panel" }, fa = { class: "svc-carry-forward-panel__link" }, Ta = /* @__PURE__ */ g({
   __name: "QuestionBanner",
   props: {
     model: {}
   },
   setup(c) {
-    return (t, e) => (l(), i("div", $a, [
-      a("div", ka, [
+    return (t, e) => (l(), i("div", ka, [
+      a("div", wa, [
         a("span", null, k(t.model.text) + k(" "), 1),
-        a("span", wa, [
+        a("span", fa, [
           v(s(u), {
             is: "svc-action-button",
             text: t.model.actionText,
@@ -3664,20 +3674,20 @@ const It = /* @__PURE__ */ g({
     ]));
   }
 });
-function Ta(c, t, e) {
+function Da(c, t, e) {
   c(t, e);
 }
 function ve(c) {
-  const t = Ta.bind(
+  const t = Da.bind(
     void 0,
     c
   );
-  t("svc-tabbed-menu", Ze), t("svc-tabbed-menu-item-wrapper", Ye), 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", _o), t("svc-tab-control", $o), t("svc-tab-button", Do), t("svc-property-grid-placeholder", Eo), t("svc-side-bar-header", Lo), t("svc-side-bar-property-grid-header", Go), t("svc-property-grid", mo), t("svc-object-selector", co), t("svc-search", Ol), t("svc-scroll", W), t("svc-switcher", ns), t("svc-action-button", Yo), t("svc-question-error", Wo), t("survey-embeddedsurvey", Js), t("sv-logic-operator", js), t("survey-linkvalue", Zs), t("survey-color", vt), t("color-item", mt), t("sv-boolean-switch", It), t("survey-fileedit", ht), t("survey-spinedit", kt), t("survey-textwithreset", le), t("survey-commentwithreset", le), t("survey-widget", Q), t("survey-simulator", is), t("svc-tab-preview", vs), t("svc-complete-page", _s), t("survey-results", Ts), t("survey-results-table-row", Ns), t("json-error-item", Ks), t("svc-tab-json-editor-textarea", As), t("svc-tab-json-editor-ace", Bs), t("svc-tab-translation", ot), t("sd-translation-line-skeleton", at), t("svc-translate-from-action", it), t("svc-tab-logic", Qs), t("svc-tab-theme", ct), t("svc-toolbox", Ot), t("svc-toolbox-list", tn), t("svc-toolbox-category", sn), t("svc-toolbox-tool", Gt), t("svc-toolbox-item", Zt), t("svc-toolbox-item-group", Xt), t(ze, Lt), t("svc-tab-designer", gn), t("svc-page-navigator", Gl), t("svc-page-navigator-item", ea), t("svc-page", fn), t("svc-row", Bn), t("svc-add-new-question-btn", Dn), t("svc-add-question-type-selector", Mn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Xn), t("svc-image-question", Hn), t("svc-image-question-adorner", Jn), t("svc-matrix-cell", xn), t("svc-cell-question", sl), t("svc-cell-dropdown-question", ra), t("svc-question-editor-content", Bl), t("svc-logo-image", zl), t("svc-panel", bl), t("svc-item-value", $l), t("svc-image-item-value", Il), t("svc-dropdown-question", na), t("svc-dropdown-question-adorner", ta), t("svc-widget-question", qa), t("svc-question-banner", fa);
+  t("svc-tabbed-menu", Ze), t("svc-tabbed-menu-item-wrapper", Ye), t("svc-tabbed-menu-item", eo), t("svc-side-bar", no), t("svc-side-bar-default-header", ro), t("svc-side-bar-page", co), t("svc-tabs", go), t("svc-tab-control", ko), t("svc-tab-button", No), t("svc-property-grid-placeholder", Po), t("svc-side-bar-header", Fo), t("svc-side-bar-property-grid-header", Wo), t("svc-property-grid", _o), t("svc-object-selector", uo), t("svc-search", Ql), t("svc-scroll", W), t("svc-switcher", ls), t("svc-action-button", xo), t("svc-question-error", jo), t("survey-embeddedsurvey", Zs), t("sv-logic-operator", Js), t("survey-linkvalue", Xs), t("survey-color", mt), t("color-item", _t), t("sv-boolean-switch", Bt), t("survey-fileedit", Ct), t("survey-spinedit", wt), t("survey-textwithreset", le), t("survey-commentwithreset", le), t("survey-widget", Q), t("survey-simulator", rs), t("svc-tab-preview", ms), t("svc-complete-page", gs), t("survey-results", Ds), t("survey-results-table-row", Ms), t("json-error-item", Us), t("svc-tab-json-editor-textarea", zs), t("svc-tab-json-editor-ace", Es), t("svc-tab-translation", st), t("sd-translation-line-skeleton", it), t("svc-translate-from-action", rt), t("svc-tab-logic", Gs), t("svc-tab-theme", ut), t("svc-toolbox", Qt), t("svc-toolbox-list", nn), t("svc-toolbox-category", tn), t("svc-toolbox-tool", Wt), t("svc-toolbox-item", Xt), t("svc-toolbox-item-group", Yt), t(ze, Ft), t("svc-tab-designer", bn), t("svc-page-navigator", Wl), t("svc-page-navigator-item", oa), t("svc-page", Tn), t("svc-row", En), t("svc-add-new-question-btn", Nn), t("svc-add-question-type-selector", Sn), t("svc-question", ae), t("svc-rating-question", ae), t("svc-rating-question-content", Yn), t("svc-image-question", On), t("svc-image-question-adorner", Zn), t("svc-matrix-cell", el), t("svc-cell-question", tl), t("svc-cell-dropdown-question", da), t("svc-question-editor-content", El), t("svc-logo-image", Ll), t("svc-panel", yl), t("svc-item-value", kl), t("svc-image-item-value", Bl), t("svc-dropdown-question", la), t("svc-dropdown-question-adorner", na), t("svc-widget-question", $a), t("svc-question-banner", Ta);
 }
 ve(
   (c, t) => re.Instance.registerComponent(c, t)
 );
-const Ia = {
+const Ba = {
   install(c) {
     c.component("SurveyCreatorComponent", Je), ve((t, e) => {
       c.component(t, e), re.Instance.registerComponent(t, t);
@@ -3686,5 +3696,5 @@ const Ia = {
 };
 export {
   Je as SurveyCreatorComponent,
-  Ia as surveyCreatorPlugin
+  Ba as surveyCreatorPlugin
 };