survey-vue3-ui 1.9.122 → 1.9.124

package/survey-vue3-ui.es.js

@@ -1,57 +1,57 @@
-import { shallowReactive as Ce, watch as G, onBeforeUnmount as J, onMounted as H, ref as _, shallowRef as j, triggerRef as le, unref as f, isRef as be, defineComponent as h, computed as w, onUpdated as x, resolveComponent as p, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as b, createCommentVNode as d, Fragment as $, renderList as B, createBlock as q, resolveDynamicComponent as T, normalizeProps as F, mergeProps as W, withCtx as V, normalizeStyle as S, createElementVNode as c, onUnmounted as z, withDirectives as P, vShow as M, toDisplayString as R, vModelRadio as ee, vModelCheckbox as ne, vModelSelect as ke, vModelText as fe, getCurrentInstance as oe, guardReactiveProps as ye, createStaticVNode as Ie, resolveDirective as X, toRaw as we, Teleport as Se, useSlots as Re, renderSlot as Te } from "vue";
-import { Base as $e, RendererFactory as se, DropdownListModel as _e, Helpers as De, DropdownMultiSelectListModel as Be, doKey2ClickUp as qe, createSvg as Le, ActionDropdownViewModel as Ne, getActionDropdownButtonTarget as Pe, createPopupViewModel as ae, SurveyProgressModel as ue, SurveyProgressButtonsModel as Ae, TOCModel as Me, PopupSurveyModel as He, settings as K, createDialogOptions as We, createPopupModalViewModel as Ee, ButtonGroupItemModel as Ve, SvgRegistry as Oe, SurveyModel as Fe, doKey2ClickDown as ze, doKey2ClickBlur as Ue } from "survey-core";
-$e.createPropertiesHash = () => Ce({});
-function Ke(r) {
+import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as H, ref as _, shallowRef as z, watchEffect as ke, triggerRef as ne, unref as f, isRef as fe, defineComponent as h, computed as w, onUpdated as x, resolveComponent as p, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as $, renderList as B, createBlock as q, resolveDynamicComponent as T, normalizeProps as F, mergeProps as W, withCtx as O, normalizeStyle as S, createElementVNode as c, onUnmounted as U, guardReactiveProps as oe, withDirectives as P, vShow as M, toDisplayString as R, vModelRadio as ee, vModelCheckbox as te, vModelSelect as Ie, vModelText as we, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
+import { Base as De, RendererFactory as se, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ge, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as de, SurveyProgressModel as me, SurveyProgressButtonsModel as He, TOCModel as We, PopupSurveyModel as Ee, settings as j, createDialogOptions as Ve, createPopupModalViewModel as Oe, ButtonGroupItemModel as Fe, SvgRegistry as ze, SurveyModel as Ue, doKey2ClickDown as Ke, doKey2ClickBlur as je } from "survey-core";
+De.createPropertiesHash = () => be({});
+function Qe(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (s, o) => {
-    const e = [], n = j(e);
+    const e = [], n = z(e);
     return e.onArrayChanged = () => {
-      le(n);
+      ne(n);
     }, s[o] = n, f(s[o]);
   }, r.iteratePropertiesHash((s, o) => {
     if (Array.isArray(s[o])) {
-      const e = j(s[o]);
+      const e = z(s[o]);
       s[o].onArrayChanged = () => {
-        le(e);
+        ne(e);
       }, s[o] = e;
     }
   }), r.getPropertyValueCoreHandler = (s, o) => f(s[o]), r.setPropertyValueCoreHandler = (s, o, e) => {
-    be(s[o]) ? s[o].value = e : s[o] = e;
+    fe(s[o]) ? s[o].value = e : s[o] = e;
   }, r.__vueImplemented = !0, !0);
 }
-function de(r, s) {
+function ce(r, s) {
   !r || !s || (r.iteratePropertiesHash((o, e) => {
     o[e] = f(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
   }), delete r.__vueImplemented, r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0);
 }
 function L(r, s, o) {
   let e = !1;
-  const n = G(
+  const n = J(
     r,
     (t, a) => {
-      t && s && s(t, a), a && (de(a, e), o && o(a)), e = Ke(t);
+      t && s && s(t, a), a && (ce(a, e), o && o(a)), e = Qe(t);
     },
     {
       immediate: !0
     }
   );
-  J(() => {
+  Q(() => {
     const t = r();
-    t && (de(t, e), o && o(t), n());
+    t && (ce(t, e), o && o(t), n());
   });
 }
 function A(r, s, o, e) {
   L(() => r.question, o, e), H(() => {
     r.question && r.question.afterRenderQuestionElement(s.value);
-  }), J(() => {
+  }), Q(() => {
     r.question.beforeDestroyQuestionElement(s.value);
   });
 }
-function Q(r) {
+function G(r) {
   const s = _(), o = (n) => {
     s.value = n.renderedHtml, n.onChanged = () => {
       s.value = n.renderedHtml;
     };
-  }, e = G(
+  }, e = J(
     r,
     (n, t) => {
       t && (t.onChanged = () => {
@@ -59,14 +59,22 @@ function Q(r) {
     },
     { immediate: !0 }
   );
-  return J(() => {
+  return Q(() => {
     e();
   }), s;
 }
-function te(r) {
+function re(r) {
   return r.customWidget ? "survey-customwidget" : r.isDefaultRendering && r.isDefaultRendering() || r.isPanel ? "survey-" + r.getTemplate() : r.getComponentName();
 }
-const je = /* @__PURE__ */ h({
+function le(r) {
+  const s = z(), o = ke(() => {
+    s.value = r(), ne(s);
+  });
+  return Q(() => {
+    o();
+  }), s;
+}
+const Ge = /* @__PURE__ */ h({
   __name: "Page",
   props: {
     survey: {},
@@ -76,42 +84,42 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null);
     L(() => s.page);
-    const e = w(() => s.page._showDescription), n = w(() => s.page.rows);
+    const e = w(() => s.page._showDescription);
     return H(() => {
       s.survey && s.survey.afterRenderPage(o.value);
     }), x(() => {
       s.survey.afterRenderPage(o.value);
-    }), (t, a) => {
-      const y = p("survey-element-title"), m = p("survey-string"), v = p("survey-errors"), g = p("survey-row");
+    }), (n, t) => {
+      const a = p("survey-element-title"), y = p("survey-string"), m = p("survey-errors"), v = p("survey-row");
       return i(), u("div", {
-        class: l(t.page.cssRoot),
+        class: l(n.page.cssRoot),
         ref_key: "root",
         ref: o
       }, [
-        b(y, {
-          element: t.page,
-          css: t.css
+        C(a, {
+          element: n.page,
+          css: n.css
         }, null, 8, ["element", "css"]),
         e.value ? (i(), u("div", {
           key: 0,
-          class: l(t.page.cssClasses.page.description)
+          class: l(n.page.cssClasses.page.description)
         }, [
-          b(m, {
-            locString: t.page.locDescription
+          C(y, {
+            locString: n.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : d("", !0),
-        b(v, { element: t.page }, null, 8, ["element"]),
-        (i(!0), u($, null, B(n.value, (I, C) => (i(), q(T(t.page.getSurvey().getRowWrapperComponentName(I)), F(W({
-          key: t.page.id + "_" + C
+        C(m, { element: n.page }, null, 8, ["element"]),
+        (i(!0), u($, null, B(n.page.rows, (g, I) => (i(), q(T(n.page.getSurvey().getRowWrapperComponentName(g)), F(W({
+          key: n.page.id + "_" + I
         }, {
-          componentData: t.page.getSurvey().getRowWrapperComponentData(I)
+          componentData: n.page.getSurvey().getRowWrapperComponentData(g)
         })), {
-          default: V(() => [
-            I.visible ? (i(), q(g, {
+          default: O(() => [
+            g.visible ? (i(), q(v, {
               key: 0,
-              row: I,
-              survey: t.survey,
-              css: t.css
+              row: g,
+              survey: n.survey,
+              css: n.css
             }, null, 8, ["row", "survey", "css"])) : d("", !0)
           ]),
           _: 2
@@ -119,7 +127,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Qe = /* @__PURE__ */ h({
+}), Je = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     survey: {}
@@ -146,7 +154,7 @@ const je = /* @__PURE__ */ h({
           class: l(e.survey.css.headerText),
           style: S({ maxWidth: e.survey.titleMaxWidth })
         }, [
-          b(t, {
+          C(t, {
             element: e.survey,
             css: e.survey.css
           }, null, 8, ["element", "css"]),
@@ -154,7 +162,7 @@ const je = /* @__PURE__ */ h({
             key: 0,
             class: l(e.survey.css.description)
           }, [
-            b(a, {
+            C(a, {
               locString: e.survey.locDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -169,7 +177,7 @@ const je = /* @__PURE__ */ h({
       ], 2)) : d("", !0);
     };
   }
-}), Ge = /* @__PURE__ */ h({
+}), Xe = /* @__PURE__ */ h({
   __name: "Row",
   props: {
     row: {},
@@ -211,10 +219,10 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Je = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-expanded", "data-name"], Xe = {
+}), Ye = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-expanded", "data-name"], Ze = {
   inheritAttrs: !1
-}, Ye = /* @__PURE__ */ h({
-  ...Xe,
+}, xe = /* @__PURE__ */ h({
+  ...Ze,
   __name: "Question",
   props: {
     survey: {},
@@ -222,104 +230,111 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => s.element.showErrorOnTop), n = w(() => s.element.showErrorOnBottom), t = (C) => C.cssContent, a = () => s.element.getRootStyle();
+    const s = r, o = _(null), e = w(() => s.element.showErrorOnTop), n = w(() => s.element.showErrorOnBottom), t = (b) => b.cssContent, a = () => s.element.getRootStyle();
     L(() => s.element);
     const y = () => {
       o.value && s.element.afterRender(o.value);
-    }, m = G(
+    }, m = J(
       () => o.value,
       () => {
         y();
       }
-    ), v = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), g = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element) || v.value), I = w(() => ({
-      componentName: v.value,
+    ), v = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), g = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), I = w(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
       }
     }));
-    return z(() => {
+    return U(() => {
       m();
-    }), (C, N) => {
-      const k = p("survey-errors"), D = p("survey-element-header"), E = p("survey-string"), O = p("survey-question-comment");
+    }), (b, N) => {
+      const k = p("survey-errors"), D = p("survey-element-header"), E = p("survey-string"), V = p("survey-question-comment");
       return i(), u("div", {
-        class: l(C.element.getRootCss()),
+        class: l(b.element.getRootCss()),
         style: S(a()),
         ref_key: "root",
         ref: o,
-        onFocusin: N[0] || (N[0] = (U) => C.element.focusIn()),
-        id: C.element.id,
-        role: C.element.ariaRole,
-        "aria-required": C.element.ariaRequired,
-        "aria-invalid": C.element.ariaInvalid,
-        "aria-labelledby": C.element.ariaLabelledBy,
-        "aria-expanded": C.element.ariaExpanded === null ? void 0 : C.element.ariaExpanded === "true",
-        "data-name": C.element.name
+        onFocusin: N[0] || (N[0] = (K) => b.element.focusIn()),
+        id: b.element.id,
+        role: b.element.ariaRole,
+        "aria-required": b.element.ariaRequired,
+        "aria-invalid": b.element.ariaInvalid,
+        "aria-labelledby": b.element.ariaLabelledBy,
+        "aria-expanded": b.element.ariaExpanded === null ? void 0 : b.element.ariaExpanded === "true",
+        "data-name": b.element.name
       }, [
-        C.element.showErrorsAboveQuestion ? (i(), q(k, {
+        b.element.showErrorsAboveQuestion ? (i(), q(k, {
           key: 0,
-          element: C.element,
+          element: b.element,
           location: "top"
         }, null, 8, ["element"])) : d("", !0),
-        C.element.hasTitleOnLeftTop ? (i(), q(D, {
+        b.element.hasTitleOnLeftTop ? (i(), q(D, {
           key: 1,
-          element: C.element,
-          css: C.css
+          element: b.element,
+          css: b.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        P(c("div", {
-          class: l(t(C.element) || void 0),
-          role: "presentation"
-        }, [
-          e.value ? (i(), q(k, {
-            key: 0,
-            element: C.element,
-            location: "top"
-          }, null, 8, ["element"])) : d("", !0),
-          C.element.isCollapsed ? d("", !0) : (i(), q(T(g.value), F(W({ key: 1 }, I.value)), null, 16)),
-          C.element.hasComment ? (i(), u("div", {
-            key: 2,
-            class: l(C.element.getCommentAreaCss())
-          }, [
-            c("div", null, [
-              b(E, {
-                locString: C.element.locCommentText
-              }, null, 8, ["locString"])
-            ]),
-            b(O, { question: C.element }, null, 8, ["question"])
-          ], 2)) : d("", !0),
-          n.value ? (i(), q(k, {
-            key: 3,
-            element: C.element,
-            location: "bottom"
-          }, null, 8, ["element"])) : d("", !0),
-          C.element.hasDescriptionUnderInput ? (i(), u("div", {
-            key: 4,
-            class: l(C.element.cssClasses.descriptionUnderInput)
-          }, [
-            b(E, {
-              locString: C.element.locDescription
-            }, null, 8, ["locString"])
-          ], 2)) : d("", !0)
-        ], 2), [
-          [M, !C.element.isCollapsed]
-        ]),
-        C.element.hasTitleOnBottom ? (i(), q(D, {
+        (i(), q(T(g.value), F(oe(I.value)), {
+          default: O(() => [
+            P(c("div", {
+              class: l(t(b.element) || void 0),
+              role: "presentation"
+            }, [
+              e.value ? (i(), q(k, {
+                key: 0,
+                element: b.element,
+                location: "top"
+              }, null, 8, ["element"])) : d("", !0),
+              b.element.isCollapsed ? d("", !0) : (i(), q(T(v.value), {
+                key: 1,
+                question: b.element
+              }, null, 8, ["question"])),
+              b.element.hasComment ? (i(), u("div", {
+                key: 2,
+                class: l(b.element.getCommentAreaCss())
+              }, [
+                c("div", null, [
+                  C(E, {
+                    locString: b.element.locCommentText
+                  }, null, 8, ["locString"])
+                ]),
+                C(V, { question: b.element }, null, 8, ["question"])
+              ], 2)) : d("", !0),
+              n.value ? (i(), q(k, {
+                key: 3,
+                element: b.element,
+                location: "bottom"
+              }, null, 8, ["element"])) : d("", !0),
+              b.element.hasDescriptionUnderInput ? (i(), u("div", {
+                key: 4,
+                class: l(b.element.cssClasses.descriptionUnderInput)
+              }, [
+                C(E, {
+                  locString: b.element.locDescription
+                }, null, 8, ["locString"])
+              ], 2)) : d("", !0)
+            ], 2), [
+              [M, !b.element.isCollapsed]
+            ])
+          ]),
+          _: 1
+        }, 16)),
+        b.element.hasTitleOnBottom ? (i(), q(D, {
           key: 2,
-          element: C.element,
-          css: C.css
+          element: b.element,
+          css: b.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        C.element.showErrorsBelowQuestion ? (i(), q(k, {
+        b.element.showErrorsBelowQuestion ? (i(), q(k, {
           key: 3,
-          element: C.element,
+          element: b.element,
           location: "bottom"
         }, null, 8, ["element"])) : d("", !0)
-      ], 46, Je);
+      ], 46, Ye);
     };
   }
-}), Ze = ["id"], xe = ["id"], es = {
+}), es = ["id"], ss = ["id"], ns = {
   inheritAttrs: !1
-}, ss = /* @__PURE__ */ h({
-  ...es,
+}, os = /* @__PURE__ */ h({
+  ...ns,
   inheritAttrs: !1,
   __name: "Panel",
   props: {
@@ -328,61 +343,61 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => s.element.rows), n = w(() => s.element.survey);
+    const s = r, o = _(null), e = w(() => s.element.survey);
     return L(() => s.element), H(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, o.value);
-    }), (t, a) => {
-      const y = p("survey-errors"), m = p("survey-element-header"), v = p("survey-row"), g = p("sv-action-bar");
-      return t.element.isVisible ? (i(), u("div", {
+    }), (n, t) => {
+      const a = p("survey-errors"), y = p("survey-element-header"), m = p("survey-row"), v = p("sv-action-bar");
+      return n.element.isVisible ? (i(), u("div", {
         key: 0,
-        class: l(t.element.getContainerCss()),
-        id: t.element.id,
-        onFocusin: a[0] || (a[0] = (I) => t.element.focusIn()),
+        class: l(n.element.getContainerCss()),
+        id: n.element.id,
+        onFocusin: t[0] || (t[0] = (g) => n.element.focusIn()),
         ref_key: "root",
         ref: o
       }, [
-        t.element.showErrorsAbovePanel ? (i(), q(y, {
+        n.element.showErrorsAbovePanel ? (i(), q(a, {
           key: 0,
-          element: t.element
+          element: n.element
         }, null, 8, ["element"])) : d("", !0),
-        t.element.hasTitle || t.element.hasDescription ? (i(), q(m, {
+        n.element.hasTitle || n.element.hasDescription ? (i(), q(y, {
           key: 1,
-          element: t.element,
-          css: t.css
+          element: n.element,
+          css: n.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        t.element.showErrorsAbovePanel ? d("", !0) : (i(), q(y, {
+        n.element.showErrorsAbovePanel ? d("", !0) : (i(), q(a, {
           key: 2,
-          element: t.element
+          element: n.element
         }, null, 8, ["element"])),
-        t.element.isCollapsed ? d("", !0) : (i(), u("div", {
+        n.element.isCollapsed ? d("", !0) : (i(), u("div", {
           key: 3,
-          id: t.element.contentId,
-          style: S({ paddingLeft: t.element.innerPaddingLeft }),
-          class: l(t.element.cssClasses.panel.content)
+          id: n.element.contentId,
+          style: S({ paddingLeft: n.element.innerPaddingLeft }),
+          class: l(n.element.cssClasses.panel.content)
         }, [
-          (i(!0), u($, null, B(e.value, (I, C) => (i(), q(T(t.element.getSurvey().getRowWrapperComponentName(I)), F(W({
-            key: t.element.id + "_" + C
+          (i(!0), u($, null, B(n.element.rows, (g, I) => (i(), q(T(n.element.getSurvey().getRowWrapperComponentName(g)), F(W({
+            key: n.element.id + "_" + I
           }, {
-            componentData: t.element.getSurvey().getRowWrapperComponentData(I)
+            componentData: n.element.getSurvey().getRowWrapperComponentData(g)
           })), {
-            default: V(() => [
-              I.visible ? (i(), q(v, {
+            default: O(() => [
+              g.visible ? (i(), q(m, {
                 key: 0,
-                row: I,
-                survey: n.value,
-                css: t.css
+                row: g,
+                survey: e.value,
+                css: n.css
               }, null, 8, ["row", "survey", "css"])) : d("", !0)
             ]),
             _: 2
           }, 1040))), 128)),
-          b(g, {
-            model: t.element.getFooterToolbar()
+          C(v, {
+            model: n.element.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, xe))
-      ], 42, Ze)) : d("", !0);
+        ], 14, ss))
+      ], 42, es)) : d("", !0);
     };
   }
-}), ns = /* @__PURE__ */ h({
+}), ts = /* @__PURE__ */ h({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -398,7 +413,7 @@ const je = /* @__PURE__ */ h({
         class: l(e.element.cssHeader),
         onClick: o
       }, [
-        b(t, {
+        C(t, {
           element: e.element,
           css: e.css
         }, null, 8, ["element", "css"]),
@@ -406,7 +421,7 @@ const je = /* @__PURE__ */ h({
           key: 0,
           class: l(e.element.cssDescription)
         }, [
-          b(a, {
+          C(a, {
             locString: e.element.locDescription
           }, null, 8, ["locString"])
         ], 2)), [
@@ -419,7 +434,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), os = /* @__PURE__ */ h({
+}), is = /* @__PURE__ */ h({
   __name: "String",
   props: {
     locString: {}
@@ -429,23 +444,23 @@ const je = /* @__PURE__ */ h({
       locString: s.locString.renderAsData
     }, null, 8, ["locString"]));
   }
-}), ts = ["innerHTML"], is = {
+}), rs = ["innerHTML"], ls = {
   key: 1,
   class: "sv-string-viewer"
-}, rs = /* @__PURE__ */ h({
+}, as = /* @__PURE__ */ h({
   __name: "StringViewer",
   props: {
     locString: {}
   },
   setup(r) {
-    const s = r, o = Q(() => s.locString);
+    const s = r, o = G(() => s.locString);
     return (e, n) => e.locString.hasHtml ? (i(), u("span", {
       key: 0,
       class: "sv-string-viewer",
       innerHTML: f(o)
-    }, null, 8, ts)) : (i(), u("span", is, R(f(o)), 1));
+    }, null, 8, rs)) : (i(), u("span", ls, R(f(o)), 1));
   }
-}), ls = ["innerHTML"], as = /* @__PURE__ */ h({
+}), us = ["innerHTML"], ds = /* @__PURE__ */ h({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -464,7 +479,7 @@ const je = /* @__PURE__ */ h({
       innerHTML: n.locString.renderedHtml,
       onBlur: o,
       onClick: e
-    }, null, 40, ls)) : (i(), u("span", {
+    }, null, 40, us)) : (i(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
@@ -472,7 +487,7 @@ const je = /* @__PURE__ */ h({
       onClick: e
     }, R(n.locString.renderedHtml), 33));
   }
-}), us = ["id"], ds = /* @__PURE__ */ h({
+}), ms = ["id"], cs = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     element: {}
@@ -482,9 +497,9 @@ const je = /* @__PURE__ */ h({
     return L(() => s.element), (o, e) => (i(), u("div", {
       class: "sv-skeleton-element",
       id: o.element.id
-    }, null, 8, us));
+    }, null, 8, ms));
   }
-}), ms = ["id"], cs = ["value"], ps = /* @__PURE__ */ h({
+}), ps = ["id"], vs = ["value"], ys = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -503,12 +518,12 @@ const je = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        b(t, { question: e.question }, null, 8, ["question"]),
+        C(t, { question: e.question }, null, 8, ["question"]),
         c("datalist", {
           id: e.question.dataListId
         }, [
-          (i(!0), u($, null, B(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, cs))), 256))
-        ], 8, ms)
+          (i(!0), u($, null, B(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, vs))), 256))
+        ], 8, ps)
       ], 512)) : (i(), q(t, {
         key: 2,
         question: e.question,
@@ -517,7 +532,7 @@ const je = /* @__PURE__ */ h({
       }, null, 8, ["question"]));
     };
   }
-}), vs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], ys = { key: 1 }, qs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], gs = /* @__PURE__ */ h({
+}), qs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], gs = { key: 1 }, hs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Cs = /* @__PURE__ */ h({
   __name: "TextInput",
   props: {
     question: {}
@@ -528,7 +543,7 @@ const je = /* @__PURE__ */ h({
     const o = w(() => s.question.inputStyle);
     return (e, n) => {
       const t = p("sv-character-counter");
-      return e.question.getMaxLength() ? (i(), u("div", ys, [
+      return e.question.getMaxLength() ? (i(), u("div", gs, [
         c("input", {
           disabled: e.question.isInputReadOnly,
           class: l(e.question.getControlClass()),
@@ -555,8 +570,8 @@ const je = /* @__PURE__ */ h({
           "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy
-        }, null, 46, qs),
-        b(t, {
+        }, null, 46, hs),
+        C(t, {
           counter: e.question.characterCounter,
           remainingCharacterCounter: e.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
@@ -587,13 +602,13 @@ const je = /* @__PURE__ */ h({
         "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
-      }, null, 46, vs));
+      }, null, 46, qs));
     };
   }
-}), hs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Cs = {
+}), bs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], ks = {
   key: 0,
   class: "sv-hidden"
-}, bs = { key: 7 }, ks = ["value"], ge = /* @__PURE__ */ h({
+}, fs = { key: 7 }, Is = ["value"], he = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SelectBase",
   props: {
@@ -624,7 +639,7 @@ const je = /* @__PURE__ */ h({
         "aria-invalid": t.question.a11y_input_ariaInvalid,
         "aria-describedby": t.question.a11y_input_ariaDescribedBy
       }, [
-        t.showLegend ? (i(), u("legend", Cs, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
+        t.showLegend ? (i(), u("legend", ks, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
         t.question.hasHeadItems ? (i(!0), u($, { key: 1 }, B(t.question.headItems, (m) => (i(), q(T(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
@@ -660,7 +675,7 @@ const je = /* @__PURE__ */ h({
           key: 6,
           question: t.question
         }, null, 8, ["question"])) : d("", !0),
-        t.question.showClearButtonInContent ? (i(), u("div", bs, [
+        t.question.showClearButtonInContent ? (i(), u("div", fs, [
           c("input", {
             type: "button",
             class: l(t.question.cssClasses.clearButton),
@@ -668,24 +683,24 @@ const je = /* @__PURE__ */ h({
               t.question.clearValue();
             }),
             value: t.question.clearButtonCaption
-          }, null, 10, ks)
+          }, null, 10, Is)
         ])) : d("", !0)
-      ], 10, hs);
+      ], 10, bs);
     };
   }
-}), fs = /* @__PURE__ */ h({
+}), ws = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => (i(), q(ge, {
+    return (s, o) => (i(), q(he, {
       question: s.question,
       "show-legend": !0
     }, null, 8, ["question"]));
   }
-}), Is = ["name", "checked", "value", "id", "disabled"], ws = ["xlink:href"], Ss = /* @__PURE__ */ h({
+}), Ss = ["name", "checked", "value", "id", "disabled"], Rs = ["xlink:href"], Ts = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "CheckboxItem",
   props: {
@@ -720,7 +735,7 @@ const je = /* @__PURE__ */ h({
             id: e.question.getItemId(e.item),
             disabled: !e.question.getItemEnabled(e.item),
             class: l(e.question.cssClasses.itemControl)
-          }, null, 42, Is),
+          }, null, 42, Ss),
           e.question.cssClasses.materialDecorator ? (i(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialDecorator)
@@ -731,14 +746,14 @@ const je = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, ws)
+              }, null, 8, Rs)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           e.hideLabel ? d("", !0) : (i(), u("span", {
             key: 1,
             class: l(e.question.cssClasses.controlLabel)
           }, [
-            b(t, {
+            C(t, {
               locString: e.item.locText
             }, null, 8, ["locString"])
           ], 2))
@@ -746,16 +761,16 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Rs = /* @__PURE__ */ h({
+}), $s = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Radiogroup",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => (i(), q(ge, { question: s.question }, null, 8, ["question"]));
+    return (s, o) => (i(), q(he, { question: s.question }, null, 8, ["question"]));
   }
-}), Ts = ["name", "value", "id", "aria-describedby", "disabled"], $s = ["xlink:href"], _s = /* @__PURE__ */ h({
+}), _s = ["name", "value", "id", "aria-describedby", "disabled"], Ds = ["xlink:href"], Bs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RadiogroupItem",
   props: {
@@ -790,7 +805,7 @@ const je = /* @__PURE__ */ h({
             "onUpdate:modelValue": a[0] || (a[0] = (m) => n.value = m),
             disabled: !t.question.getItemEnabled(t.item),
             class: l(t.question.cssClasses.itemControl)
-          }, null, 10, Ts), [
+          }, null, 10, _s), [
             [ee, n.value]
           ]),
           t.question.cssClasses.materialDecorator ? (i(), u("span", {
@@ -803,14 +818,14 @@ const je = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": t.question.itemSvgIcon
-              }, null, 8, $s)
+              }, null, 8, Ds)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           t.hideLabel ? d("", !0) : (i(), u("span", {
             key: 1,
             class: l(e(t.item))
           }, [
-            b(y, {
+            C(y, {
               locString: t.item.locText
             }, null, 8, ["locString"])
           ], 2))
@@ -818,7 +833,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ds = ["src"], Bs = ["title"], Ls = { key: 0 }, Ns = /* @__PURE__ */ h({
+}), Ls = ["src"], Ns = ["title"], Ps = { key: 0 }, As = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Signaturepad",
   props: {
@@ -839,7 +854,7 @@ const je = /* @__PURE__ */ h({
         P(c("div", {
           class: l(e.question.cssClasses.placeholder)
         }, [
-          b(t, {
+          C(t, {
             locString: e.question.locPlaceholder
           }, null, 8, ["locString"])
         ], 2), [
@@ -853,7 +868,7 @@ const je = /* @__PURE__ */ h({
             style: S({
               width: e.question.renderedCanvasWidth
             })
-          }, null, 14, Ds)) : d("", !0),
+          }, null, 14, Ls)) : d("", !0),
           c("canvas", {
             tabindex: "0",
             class: l(e.question.cssClasses.canvas),
@@ -872,24 +887,24 @@ const je = /* @__PURE__ */ h({
               e.question.clearValue();
             })
           }, [
-            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ls, "\u2716")),
+            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ps, "\u2716")),
             e.question.cssClasses.clearButtonIconId ? (i(), q(a, {
               key: 1,
               iconName: e.question.cssClasses.clearButtonIconId,
               size: "auto"
             }, null, 8, ["iconName"])) : d("", !0)
-          ], 10, Bs)
+          ], 10, Ns)
         ], 2)) : d("", !0),
         e.question.showLoadingIndicator ? (i(), u("div", {
           key: 1,
           class: l(e.question.cssClasses.loadingIndicator)
         }, [
-          b(y)
+          C(y)
         ], 2)) : d("", !0)
       ], 6);
     };
   }
-}), Ps = ["innerHTML"], As = /* @__PURE__ */ h({
+}), Ms = ["innerHTML"], Hs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Html",
   props: {
@@ -898,15 +913,15 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null);
     A(s, o);
-    const e = Q(() => s.question.locHtml);
+    const e = G(() => s.question.locHtml);
     return (n, t) => (i(), u("div", {
       ref_key: "root",
       ref: o,
       class: l(n.question.renderCssRoot),
       innerHTML: f(e)
-    }, null, 10, Ps));
+    }, null, 10, Ms));
   }
-}), Ms = ["src", "alt", "width", "height"], Hs = ["src", "width", "height"], Ws = ["src", "width", "height"], Es = /* @__PURE__ */ h({
+}), Ws = ["src", "alt", "width", "height"], Es = ["src", "width", "height"], Vs = ["src", "width", "height"], Os = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Image",
   props: {
@@ -915,7 +930,7 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null);
     A(s, o);
-    const e = Q(() => s.question.locImageLink);
+    const e = G(() => s.question.locImageLink);
     return (n, t) => {
       const a = p("sv-svg-icon");
       return i(), u("div", {
@@ -941,7 +956,7 @@ const je = /* @__PURE__ */ h({
           onError: t[1] || (t[1] = (y) => {
             n.question.onErrorHandler();
           })
-        }, null, 46, Ms)), [
+        }, null, 46, Ws)), [
           [M, f(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
         n.question.renderedMode === "video" ? P((i(), u("video", {
@@ -962,7 +977,7 @@ const je = /* @__PURE__ */ h({
           onError: t[3] || (t[3] = (y) => {
             n.question.onErrorHandler();
           })
-        }, null, 46, Hs)), [
+        }, null, 46, Es)), [
           [M, f(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
         n.question.renderedMode === "youtube" ? (i(), u("iframe", {
@@ -976,12 +991,12 @@ const je = /* @__PURE__ */ h({
             width: n.question.renderedStyleWidth,
             height: n.question.renderedStyleHeight
           })
-        }, null, 14, Ws)) : d("", !0),
+        }, null, 14, Vs)) : d("", !0),
         !f(e) || n.question.contentNotLoaded ? (i(), u("div", {
           key: 3,
           class: l(n.question.cssClasses.noImage)
         }, [
-          b(a, {
+          C(a, {
             iconName: n.question.cssClasses.noImageSvgIconId,
             size: 48
           }, null, 8, ["iconName"])
@@ -989,7 +1004,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Vs = /* @__PURE__ */ h({
+}), Fs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Expression",
   props: {
@@ -1003,7 +1018,7 @@ const je = /* @__PURE__ */ h({
       ref: o
     }, R(e.question.formatedValue), 3));
   }
-}), Os = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Fs = ["id", "multiple", "placeholder"], zs = /* @__PURE__ */ h({
+}), zs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Us = ["id", "multiple", "placeholder"], Ks = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "File",
   props: {
@@ -1024,7 +1039,7 @@ const je = /* @__PURE__ */ h({
           tabindex: "-1",
           type: "file",
           id: e.question.inputId,
-          onChange: n[0] || (n[0] = (...C) => e.question.doChange && e.question.doChange(...C)),
+          onChange: n[0] || (n[0] = (...b) => e.question.doChange && e.question.doChange(...b)),
           "aria-required": e.question.ariaRequired,
           "aria-label": e.question.ariaLabel,
           "aria-invalid": e.question.ariaInvalid,
@@ -1033,7 +1048,7 @@ const je = /* @__PURE__ */ h({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 42, Os)) : d("", !0),
+        }, null, 42, zs)) : d("", !0),
         e.question.isReadOnly ? (i(), u("input", {
           key: 1,
           type: "file",
@@ -1043,13 +1058,13 @@ const je = /* @__PURE__ */ h({
           multiple: e.question.allowMultiple,
           placeholder: e.question.title,
           style: { color: "transparent" }
-        }, null, 10, Fs)) : d("", !0),
+        }, null, 10, Us)) : d("", !0),
         c("div", {
           class: l(e.question.cssClasses.dragArea),
-          onDrop: n[1] || (n[1] = (...C) => e.question.onDrop && e.question.onDrop(...C)),
-          onDragover: n[2] || (n[2] = (...C) => e.question.onDragOver && e.question.onDragOver(...C)),
-          onDragleave: n[3] || (n[3] = (...C) => e.question.onDragLeave && e.question.onDragLeave(...C)),
-          onDragenter: n[4] || (n[4] = (...C) => e.question.onDragEnter && e.question.onDragEnter(...C))
+          onDrop: n[1] || (n[1] = (...b) => e.question.onDrop && e.question.onDrop(...b)),
+          onDragover: n[2] || (n[2] = (...b) => e.question.onDragOver && e.question.onDragOver(...b)),
+          onDragleave: n[3] || (n[3] = (...b) => e.question.onDragLeave && e.question.onDragLeave(...b)),
+          onDragenter: n[4] || (n[4] = (...b) => e.question.onDragEnter && e.question.onDragEnter(...b))
         }, [
           e.question.showFileDecorator ? (i(), u("div", {
             key: 0,
@@ -1058,7 +1073,7 @@ const je = /* @__PURE__ */ h({
             c("span", {
               class: l(e.question.cssClasses.dragAreaPlaceholder)
             }, [
-              b(t, {
+              C(t, {
                 locString: e.question.locRenderedPlaceholder
               }, null, 8, ["locString"])
             ], 2),
@@ -1088,7 +1103,7 @@ const je = /* @__PURE__ */ h({
             key: 2,
             class: l(e.question.cssClasses.loadingIndicator)
           }, [
-            b(v)
+            C(v)
           ], 2)) : d("", !0),
           e.question.isPlayingVideo ? (i(), q(g, {
             key: 3,
@@ -1111,7 +1126,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Us = { class: "sv-hidden" }, me = "survey-imagepicker-item", Ks = /* @__PURE__ */ h({
+}), js = { class: "sv-hidden" }, pe = "survey-imagepicker-item", Qs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Imagepicker",
   props: {
@@ -1120,8 +1135,8 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null);
     A(s, o);
-    const e = (t) => s.question.getItemValueWrapperComponentName(t) || me, n = (t) => ({
-      componentName: me,
+    const e = (t) => s.question.getItemValueWrapperComponentName(t) || pe, n = (t) => ({
+      componentName: pe,
       componentData: {
         question: s.question,
         item: t,
@@ -1133,7 +1148,7 @@ const je = /* @__PURE__ */ h({
       ref_key: "root",
       ref: o
     }, [
-      c("legend", Us, R(t.question.locTitle.renderedHtml), 1),
+      c("legend", js, R(t.question.locTitle.renderedHtml), 1),
       t.question.hasColumns ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.visibleChoices, (y) => (i(), q(T(e(y)), W({
         key: y.value
       }, n(y)), null, 16))), 128)),
@@ -1148,7 +1163,7 @@ const je = /* @__PURE__ */ h({
       ], 2))), 128)) : d("", !0)
     ], 2));
   }
-}), js = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Qs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["src", "width", "height", "alt"], Js = ["src", "width", "height"], Xs = /* @__PURE__ */ h({
+}), Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Js = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xs = ["src", "width", "height", "alt"], Ys = ["src", "width", "height"], Zs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ImagepickerItem",
   props: {
@@ -1158,7 +1173,7 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = (n) => s.question.getItemClass(n);
     L(() => s.item);
-    const e = Q(() => s.item.locImageLink);
+    const e = G(() => s.item.locImageLink);
     return (n, t) => {
       const a = p("sv-svg-icon"), y = p("survey-string");
       return i(), u("div", {
@@ -1180,8 +1195,8 @@ const je = /* @__PURE__ */ h({
             "aria-invalid": n.question.ariaInvalid,
             "aria-describedby": n.question.ariaDescribedBy,
             class: l(n.question.cssClasses.itemControl)
-          }, null, 10, js)), [
-            [ne, n.question.value]
+          }, null, 10, Gs)), [
+            [te, n.question.value]
           ]) : P((i(), u("input", {
             key: 1,
             type: "radio",
@@ -1195,7 +1210,7 @@ const je = /* @__PURE__ */ h({
             "aria-invalid": n.question.ariaInvalid,
             "aria-describedby": n.question.ariaDescribedBy,
             class: l(n.question.cssClasses.itemControl)
-          }, null, 10, Qs)), [
+          }, null, 10, Js)), [
             [ee, n.question.value]
           ]),
           c("div", {
@@ -1229,7 +1244,7 @@ const je = /* @__PURE__ */ h({
                 onError: t[3] || (t[3] = (m) => {
                   n.item.onErrorHandler();
                 })
-              }, null, 46, Gs)) : d("", !0),
+              }, null, 46, Xs)) : d("", !0),
               f(e) && !n.item.contentNotLoaded && n.question.contentMode === "video" ? (i(), u("video", {
                 key: 2,
                 controls: "",
@@ -1244,7 +1259,7 @@ const je = /* @__PURE__ */ h({
                 onError: t[5] || (t[5] = (m) => {
                   n.item.onErrorHandler();
                 })
-              }, null, 46, Js)) : d("", !0),
+              }, null, 46, Ys)) : d("", !0),
               !f(e) || n.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: l(n.question.cssClasses.itemNoImage),
@@ -1254,7 +1269,7 @@ const je = /* @__PURE__ */ h({
                   objectFit: n.question.imageFit
                 })
               }, [
-                b(a, {
+                C(a, {
                   class: l(n.question.cssClasses.itemNoImageSvgIcon),
                   iconName: n.question.cssClasses.itemNoImageSvgIconId,
                   size: 48
@@ -1265,7 +1280,7 @@ const je = /* @__PURE__ */ h({
               key: 0,
               class: l(n.question.cssClasses.itemText)
             }, [
-              b(y, {
+              C(y, {
                 locString: n.item.locText
               }, null, 8, ["locString"])
             ], 2)) : d("", !0)
@@ -1274,7 +1289,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ys = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Zs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], xs = /* @__PURE__ */ h({
+}), xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], en = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], sn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Comment",
   props: {
@@ -1316,7 +1331,7 @@ const je = /* @__PURE__ */ h({
         "aria-invalid": n.question.a11y_input_ariaInvalid,
         "aria-describedby": n.question.a11y_input_ariaDescribedBy,
         style: S({ resize: n.question.resizeStyle })
-      }, null, 46, Ys)) : !n.question.isReadOnlyRenderDiv() && n.question.getMaxLength() ? (i(), u("div", {
+      }, null, 46, xs)) : !n.question.isReadOnlyRenderDiv() && n.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: o
@@ -1344,8 +1359,8 @@ const je = /* @__PURE__ */ h({
           "aria-invalid": n.question.a11y_input_ariaInvalid,
           "aria-describedby": n.question.a11y_input_ariaDescribedBy,
           style: S({ resize: n.question.resizeStyle })
-        }, null, 46, Zs),
-        b(a, {
+        }, null, 46, en),
+        C(a, {
           counter: n.question.characterCounter,
           remainingCharacterCounter: n.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
@@ -1356,7 +1371,7 @@ const je = /* @__PURE__ */ h({
       }, R(n.question.value), 513));
     };
   }
-}), en = /* @__PURE__ */ h({
+}), nn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Dropdown",
   props: {
@@ -1371,7 +1386,7 @@ const je = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        b(t, { question: e.question }, null, 8, ["question"]),
+        C(t, { question: e.question }, null, 8, ["question"]),
         e.question.isOtherSelected ? (i(), q(a, {
           key: 0,
           question: e.question
@@ -1379,16 +1394,16 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), sn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], nn = {
+}), on = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], tn = {
   key: 0,
   value: ""
-}, on = ["id"];
+}, rn = ["id"];
 se.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const tn = /* @__PURE__ */ h({
+const ln = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DropdownSelect",
   props: {
@@ -1426,7 +1441,7 @@ const tn = /* @__PURE__ */ h({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, R(a.question.readOnlyText), 11, on)) : P((i(), u("select", {
+          }, R(a.question.readOnlyText), 11, rn)) : P((i(), u("select", {
             key: 0,
             id: a.question.inputId,
             "onUpdate:modelValue": y[0] || (y[0] = (I) => t.value = I),
@@ -1440,19 +1455,19 @@ const tn = /* @__PURE__ */ h({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (i(), u("option", nn, R(a.question.placeholder), 1)) : d("", !0),
+            a.question.allowClear ? (i(), u("option", tn, R(a.question.placeholder), 1)) : d("", !0),
             (i(!0), u($, null, B(a.question.visibleChoices, (I) => (i(), q(m, {
               item: I,
               key: I.id
             }, null, 8, ["item"]))), 128))
-          ], 42, sn)), [
-            [ke, t.value]
+          ], 42, on)), [
+            [Ie, t.value]
           ]),
           a.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
             key: 2,
             class: l(a.question.cssClasses.chevronButton)
           }, [
-            b(v, {
+            C(v, {
               class: l(a.question.cssClasses.chevronButtonSvg),
               iconName: a.question.cssClasses.chevronButtonIconId,
               size: "auto"
@@ -1466,19 +1481,19 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), rn = ["value", "disabled"], ln = /* @__PURE__ */ h({
+}), an = ["value", "disabled"], un = /* @__PURE__ */ h({
   __name: "OptionItem",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, o = Q(() => s.item.locText);
+    const s = r, o = G(() => s.item.locText);
     return L(() => s.item), (e, n) => (i(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, R(f(o)), 9, rn));
+    }, R(f(o)), 9, an));
   }
-}), an = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], un = { style: { visibility: "hidden" } }, dn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], mn = ["id"], cn = /* @__PURE__ */ h({
+}), dn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], mn = { style: { visibility: "hidden" } }, cn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], pn = ["id"], vn = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1486,7 +1501,7 @@ const tn = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null), e = w(() => {
       const k = s.question;
-      return k.dropdownListModel || (k.dropdownListModel = new _e(k)), s.question.dropdownListModel;
+      return k.dropdownListModel || (k.dropdownListModel = new Be(k)), s.question.dropdownListModel;
     }), n = (k) => {
       var D;
       (D = e.value) == null || D.onClick(k);
@@ -1502,7 +1517,7 @@ const tn = /* @__PURE__ */ h({
     }, m = () => {
       if (o.value) {
         const k = o.value, D = e.value.inputStringRendered;
-        De.isTwoValueEquals(D, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
+        Le.isTwoValueEquals(D, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
       }
     }, v = (k) => {
       var D;
@@ -1512,11 +1527,11 @@ const tn = /* @__PURE__ */ h({
       (D = e.value) == null || D.onFocus(k);
     }, I = (k) => {
       e.value.inputStringRendered = k.target.value;
-    }, C = w(
+    }, b = w(
       () => s.question.showSelectedItemLocText
     ), N = w(() => s.question.selectedItemLocText);
     return L(() => e.value), x(m), H(m), (k, D) => {
-      const E = p("survey-string"), O = p("sv-svg-icon"), U = p("sv-popup");
+      const E = p("survey-string"), V = p("sv-svg-icon"), K = p("sv-popup");
       return i(), u("div", {
         class: l(k.question.cssClasses.selectWrapper),
         onClick: n
@@ -1548,7 +1563,7 @@ const tn = /* @__PURE__ */ h({
           c("div", {
             class: l(k.question.cssClasses.controlValue)
           }, [
-            C.value ? (i(), q(E, {
+            b.value ? (i(), q(E, {
               key: 0,
               locString: N.value
             }, null, 8, ["locString"])) : d("", !0),
@@ -1556,7 +1571,7 @@ const tn = /* @__PURE__ */ h({
               key: 1,
               class: l(k.question.cssClasses.hintSuffix)
             }, [
-              c("span", un, R(e.value.inputStringRendered), 1),
+              c("span", mn, R(e.value.inputStringRendered), 1),
               c("span", null, R(e.value.hintStringSuffix), 1)
             ], 2)) : d("", !0),
             k.question.showInputFieldComponent ? (i(), q(T(k.question.inputFieldComponentName), {
@@ -1585,7 +1600,7 @@ const tn = /* @__PURE__ */ h({
               onInput: I,
               onBlur: v,
               onFocus: g
-            }, null, 42, dn)
+            }, null, 42, cn)
           ], 2),
           k.question.allowClear && k.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
             key: 1,
@@ -1593,7 +1608,7 @@ const tn = /* @__PURE__ */ h({
             onClick: a,
             "aria-hidden": "true"
           }, [
-            b(O, {
+            C(V, {
               class: l(k.question.cssClasses.cleanButtonSvg),
               iconName: k.question.cssClasses.cleanButtonIconId,
               title: k.question.clearCaption,
@@ -1602,7 +1617,7 @@ const tn = /* @__PURE__ */ h({
           ], 2)), [
             [M, k.question.showClearButton]
           ]) : d("", !0)
-        ], 42, an)),
+        ], 42, dn)),
         k.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
@@ -1614,7 +1629,7 @@ const tn = /* @__PURE__ */ h({
             locString: k.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
           c("div", null, R(k.question.readOnlyText), 1)
-        ], 10, mn)) : (i(), q(U, {
+        ], 10, pn)) : (i(), q(K, {
           key: 1,
           model: k.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1624,7 +1639,7 @@ const tn = /* @__PURE__ */ h({
           onPointerdown: t,
           "aria-hidden": "true"
         }, [
-          b(O, {
+          C(V, {
             class: l(k.question.cssClasses.chevronButtonSvg),
             iconName: k.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1633,7 +1648,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), pn = /* @__PURE__ */ h({
+}), yn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
@@ -1648,7 +1663,7 @@ const tn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        b(t, { question: e.question }, null, 8, ["question"]),
+        C(t, { question: e.question }, null, 8, ["question"]),
         e.question.isOtherSelected ? (i(), q(a, {
           key: 0,
           question: e.question
@@ -1656,7 +1671,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), vn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], yn = ["id"], qn = /* @__PURE__ */ h({
+}), qn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], gn = ["id"], hn = /* @__PURE__ */ h({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1664,7 +1679,7 @@ const tn = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = w(() => {
       const v = s.question;
-      return v.dropdownListModel || (v.dropdownListModel = new Be(v)), s.question.dropdownListModel;
+      return v.dropdownListModel || (v.dropdownListModel = new Ne(v)), s.question.dropdownListModel;
     }), e = (v) => {
       var g;
       (g = o.value) == null || g.onClick(v);
@@ -1680,9 +1695,9 @@ const tn = /* @__PURE__ */ h({
     }, y = (v) => {
       var g;
       (g = o.value) == null || g.onBlur(v);
-    }, m = w(() => s.question.selectedChoices);
+    }, m = le(() => s.question.selectedChoices);
     return L(() => o.value), (v, g) => {
-      const I = p("sv-tagbox-item"), C = p("sv-tagbox-filter"), N = p("sv-svg-icon"), k = p("sv-popup");
+      const I = p("sv-tagbox-item"), b = p("sv-tagbox-filter"), N = p("sv-svg-icon"), k = p("sv-popup"), D = p("survey-string");
       return i(), u("div", {
         class: l(v.question.cssClasses.selectWrapper),
         onClick: e
@@ -1708,12 +1723,12 @@ const tn = /* @__PURE__ */ h({
           c("div", {
             class: l(v.question.cssClasses.controlValue)
           }, [
-            (i(!0), u($, null, B(m.value, (D, E) => (i(), q(I, {
-              item: D,
+            (i(!0), u($, null, B(f(m), (E, V) => (i(), q(I, {
+              item: E,
               question: v.question,
-              key: "item" + E
+              key: "item" + V
             }, null, 8, ["item", "question"]))), 128)),
-            b(C, {
+            C(b, {
               model: o.value,
               question: v.question
             }, null, 8, ["model", "question"])
@@ -1724,7 +1739,7 @@ const tn = /* @__PURE__ */ h({
             onClick: t,
             "aria-hidden": "true"
           }, [
-            b(N, {
+            C(N, {
               class: l(v.question.cssClasses.cleanButtonSvg),
               iconName: v.question.cssClasses.cleanButtonIconId,
               title: v.question.clearCaption,
@@ -1733,15 +1748,18 @@ const tn = /* @__PURE__ */ h({
           ], 2)), [
             [M, v.question.showClearButton]
           ]) : d("", !0)
-        ], 42, vn)),
+        ], 42, qn)),
         v.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
           id: v.question.inputId,
           class: l(v.question.getControlClass())
         }, [
-          c("div", null, R(v.question.readOnlyText), 1)
-        ], 10, yn)) : (i(), q(k, {
+          v.question.locReadOnlyText ? (i(), q(D, {
+            key: 0,
+            locString: v.question.locReadOnlyText
+          }, null, 8, ["locString"])) : d("", !0)
+        ], 10, gn)) : (i(), q(k, {
           key: 1,
           model: o.value.popupModel
         }, null, 8, ["model"])),
@@ -1751,7 +1769,7 @@ const tn = /* @__PURE__ */ h({
           onPointerdown: n,
           "aria-hidden": "true"
         }, [
-          b(N, {
+          C(N, {
             class: l(v.question.cssClasses.chevronButtonSvg),
             iconName: v.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1760,7 +1778,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), gn = { style: { visibility: "hidden" } }, hn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], Cn = /* @__PURE__ */ h({
+}), Cn = { style: { visibility: "hidden" } }, bn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], kn = /* @__PURE__ */ h({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1799,7 +1817,7 @@ const tn = /* @__PURE__ */ h({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            c("span", gn, R(a.model.inputStringRendered), 1),
+            c("span", Cn, R(a.model.inputStringRendered), 1),
             c("span", null, R(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(c("input", {
@@ -1823,14 +1841,14 @@ const tn = /* @__PURE__ */ h({
             onKeydown: e,
             onBlur: n,
             onFocus: t
-          }, null, 42, hn), [
-            [fe, a.model.inputStringRendered]
+          }, null, 42, bn), [
+            [we, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), bn = { class: "sv-tagbox__item-text" }, kn = /* @__PURE__ */ h({
+}), fn = { class: "sv-tagbox__item-text" }, In = /* @__PURE__ */ h({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1846,8 +1864,8 @@ const tn = /* @__PURE__ */ h({
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        c("div", bn, [
-          b(t, {
+        c("div", fn, [
+          C(t, {
             locString: e.item.locText
           }, null, 8, ["locString"])
         ]),
@@ -1855,7 +1873,7 @@ const tn = /* @__PURE__ */ h({
           class: l(e.question.cssClasses.cleanItemButton),
           onClick: o
         }, [
-          b(a, {
+          C(a, {
             class: l(e.question.cssClasses.cleanItemButtonSvg),
             iconName: e.question.cssClasses.cleanItemButtonIconId,
             size: "auto"
@@ -1864,7 +1882,7 @@ const tn = /* @__PURE__ */ h({
       ]);
     };
   }
-}), fn = /* @__PURE__ */ h({
+}), wn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
@@ -1907,7 +1925,7 @@ const tn = /* @__PURE__ */ h({
             key: 0,
             class: l(t.question.cssClasses.containerPlaceholder)
           }, [
-            b(y, {
+            C(y, {
               locString: t.question.locSelectToRankEmptyRankedAreaText
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -1928,7 +1946,7 @@ const tn = /* @__PURE__ */ h({
             key: 0,
             class: l(t.question.cssClasses.containerPlaceholder)
           }, [
-            b(y, {
+            C(y, {
               locString: t.question.locSelectToRankEmptyUnrankedAreaText
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -1936,10 +1954,10 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), In = ["tabindex", "data-sv-drop-target-ranking-item"], wn = {
+}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Sn = ["xlink:href"], Rn = ["xlink:href"], Tn = ["xlink:href"], $n = /* @__PURE__ */ h({
+}, Tn = ["xlink:href"], $n = ["xlink:href"], _n = ["xlink:href"], Dn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -1968,7 +1986,7 @@ const tn = /* @__PURE__ */ h({
           );
         })
       }, [
-        c("div", wn, [
+        c("div", Rn, [
           c("div", {
             class: l(e.question.cssClasses.itemGhostNode)
           }, null, 2),
@@ -1983,14 +2001,14 @@ const tn = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.dragDropSvgIcon
-                }, null, 8, Sn)
+                }, null, 8, Tn)
               ], 2)),
               (i(), u("svg", {
                 class: l(e.question.getIconFocusCss())
               }, [
                 c("use", {
                   "xlink:href": e.question.arrowsSvgIcon
-                }, null, 8, Rn)
+                }, null, 8, $n)
               ], 2))
             ], 2),
             !e.unrankedItem && o.value ? (i(), u("div", {
@@ -2003,25 +2021,25 @@ const tn = /* @__PURE__ */ h({
               (i(), u("svg", null, [
                 c("use", {
                   "xlink:href": e.question.dashSvgIcon
-                }, null, 8, Tn)
+                }, null, 8, _n)
               ]))
             ], 2)),
             c("div", {
               class: l(e.question.cssClasses.controlLabel)
             }, [
-              b(t, {
+              C(t, {
                 locString: e.item.locText
               }, null, 8, ["locString"])
             ], 2)
           ], 2)
         ])
-      ], 42, In);
+      ], 42, Sn);
     };
   }
-}), _n = { role: "radiogroup" }, Dn = /* @__PURE__ */ c("legend", {
+}), Bn = { role: "radiogroup" }, Ln = /* @__PURE__ */ c("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Bn = /* @__PURE__ */ h({
+}, null, -1), Nn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
@@ -2038,13 +2056,13 @@ const tn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        c("fieldset", _n, [
-          Dn,
+        c("fieldset", Bn, [
+          Ln,
           n.question.hasMinLabel ? (i(), u("span", {
             key: 0,
             class: l(n.question.cssClasses.minText)
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
@@ -2058,7 +2076,7 @@ const tn = /* @__PURE__ */ h({
             key: 1,
             class: l(n.question.cssClasses.maxText)
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locMaxRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -2066,7 +2084,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ln = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ h({
+}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2094,18 +2112,18 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Ln),
+        }, null, 8, Pn),
         c("span", {
           class: l(o.question.cssClasses.itemText)
         }, [
-          b(n, {
+          C(n, {
             locString: o.item.locText
           }, null, 8, ["locString"])
         ], 2)
       ], 34);
     };
   }
-}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
+}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ h({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2136,8 +2154,8 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Pn),
-        b(n, {
+        }, null, 8, Mn),
+        C(n, {
           iconName: o.question.getItemSmileyIconName(o.item.itemValue),
           size: "auto",
           title: o.item.text
@@ -2145,7 +2163,7 @@ const tn = /* @__PURE__ */ h({
       ], 38);
     };
   }
-}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ h({
+}), Wn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ h({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2175,14 +2193,14 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Mn),
-        b(n, {
+        }, null, 8, Wn),
+        C(n, {
           class: l("sv-star"),
           iconName: o.question.itemStarIcon,
           size: "auto",
           title: o.item.text
         }, null, 8, ["iconName", "title"]),
-        b(n, {
+        C(n, {
           class: l("sv-star-2"),
           iconName: o.question.itemStarIconAlt,
           size: "auto",
@@ -2191,10 +2209,10 @@ const tn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Wn = { class: "sd-rating-dropdown-item" }, En = { class: "sd-rating-dropdown-item_text" }, Vn = {
+}), Vn = { class: "sd-rating-dropdown-item" }, On = { class: "sd-rating-dropdown-item_text" }, Fn = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, On = /* @__PURE__ */ h({
+}, zn = /* @__PURE__ */ h({
   __name: "RatingDropdownItem",
   props: {
     item: {}
@@ -2203,10 +2221,10 @@ const tn = /* @__PURE__ */ h({
     const s = r;
     return L(() => s.item), (o, e) => {
       const n = p("survey-string");
-      return i(), u("div", Wn, [
-        c("span", En, R(o.item.title), 1),
-        o.item.description ? (i(), u("div", Vn, [
-          b(n, {
+      return i(), u("div", Vn, [
+        c("span", On, R(o.item.title), 1),
+        o.item.description ? (i(), u("div", Fn, [
+          C(n, {
             locString: o.item.description
           }, null, 8, ["locString"])
         ])) : d("", !0)
@@ -2219,7 +2237,7 @@ se.Instance.registerRenderer(
   "dropdown",
   "sv-rating-dropdown"
 );
-const Fn = /* @__PURE__ */ h({
+const Un = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
@@ -2234,11 +2252,11 @@ const Fn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        b(t, { question: e.question }, null, 8, ["question"])
+        C(t, { question: e.question }, null, 8, ["question"])
       ], 2);
     };
   }
-}), zn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Un = /* @__PURE__ */ h({
+}), Kn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], jn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -2277,8 +2295,8 @@ const Fn = /* @__PURE__ */ h({
             "aria-label": t.question.ariaLabel,
             "aria-invalid": t.question.ariaInvalid,
             "aria-describedby": t.question.ariaDescribedBy
-          }, null, 42, zn), [
-            [ne, t.question.booleanValue]
+          }, null, 42, Kn), [
+            [te, t.question.booleanValue]
           ]),
           c("div", {
             class: l(t.question.cssClasses.sliderGhost),
@@ -2287,7 +2305,7 @@ const Fn = /* @__PURE__ */ h({
             c("span", {
               class: l(t.question.getLabelCss(!1))
             }, [
-              b(y, {
+              C(y, {
                 locString: t.question.locLabelFalse
               }, null, 8, ["locString"])
             ], 2)
@@ -2303,7 +2321,7 @@ const Fn = /* @__PURE__ */ h({
                 key: 0,
                 class: l(t.question.cssClasses.sliderText)
               }, [
-                b(y, {
+                C(y, {
                   locString: t.question.getCheckedLabel()
                 }, null, 8, ["locString"])
               ], 2)) : d("", !0)
@@ -2316,7 +2334,7 @@ const Fn = /* @__PURE__ */ h({
             c("span", {
               class: l(t.question.getLabelCss(!0))
             }, [
-              b(y, {
+              C(y, {
                 locString: t.question.locLabelTrue
               }, null, 8, ["locString"])
             ], 2)
@@ -2331,7 +2349,7 @@ se.Instance.registerRenderer(
   "radio",
   "sv-boolean-radio"
 );
-const Kn = /* @__PURE__ */ h({
+const Qn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
@@ -2366,7 +2384,7 @@ const Kn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), jn = ["name", "value", "checked", "aria-describedby", "disabled"], Qn = ["xlink:href"], Gn = /* @__PURE__ */ h({
+}), Gn = ["name", "value", "checked", "aria-describedby", "disabled"], Jn = ["xlink:href"], Xn = /* @__PURE__ */ h({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2396,7 +2414,7 @@ const Kn = /* @__PURE__ */ h({
             disabled: e.question.isInputReadOnly,
             class: l(e.question.cssClasses.itemRadioControl),
             onChange: o
-          }, null, 42, jn),
+          }, null, 42, Gn),
           e.question.cssClasses.materialRadioDecorator ? (i(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialRadioDecorator)
@@ -2407,25 +2425,25 @@ const Kn = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Qn)
+              }, null, 8, Jn)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           c("span", {
             class: l(e.question.cssClasses.radioControlLabel)
           }, [
-            b(t, { locString: e.locText }, null, 8, ["locString"])
+            C(t, { locString: e.locText }, null, 8, ["locString"])
           ], 2)
         ], 2)
       ], 2);
     };
   }
-}), Jn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xn = ["xlink:href"], Yn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), Zn = ["id"];
+}), Yn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Zn = ["xlink:href"], xn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), eo = ["id"];
 se.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const xn = /* @__PURE__ */ h({
+const so = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2461,8 +2479,8 @@ const xn = /* @__PURE__ */ h({
               "aria-label": e.question.ariaLabel,
               "aria-invalid": e.question.ariaInvalid,
               "aria-describedby": e.question.ariaDescribedBy
-            }, null, 42, Jn), [
-              [ne, e.question.booleanValue]
+            }, null, 42, Yn), [
+              [te, e.question.booleanValue]
             ]),
             c("span", {
               class: l(e.question.cssClasses.checkboxMaterialDecorator)
@@ -2473,9 +2491,9 @@ const xn = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.svgIcon
-                }, null, 8, Xn)
+                }, null, 8, Zn)
               ], 2)) : d("", !0),
-              Yn
+              xn
             ], 2),
             e.question.isLabelRendered ? (i(), u("span", {
               key: 0,
@@ -2492,13 +2510,13 @@ const xn = /* @__PURE__ */ h({
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])) : d("", !0)
-            ], 10, Zn)) : d("", !0)
+            ], 10, eo)) : d("", !0)
           ], 2),
           e.question.canRenderLabelDescription ? (i(), u("div", {
             key: 0,
             class: l(e.question.cssDescription)
           }, [
-            b(y, {
+            C(y, {
               locString: e.question.locDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -2506,14 +2524,14 @@ const xn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), eo = /* @__PURE__ */ h({
+}), no = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => s.question.getRows());
+    const s = r, o = _(null), e = le(() => s.question.getRows());
     return A(s, o), (n, t) => {
       const a = p("survey-multipletext-item");
       return i(), u("table", {
@@ -2522,7 +2540,7 @@ const xn = /* @__PURE__ */ h({
         ref: o
       }, [
         c("tbody", null, [
-          (i(!0), u($, null, B(e.value, (y, m) => (i(), u($, {
+          (i(!0), u($, null, B(f(e), (y, m) => (i(), u($, {
             key: n.question.inputId + "rowkey" + m
           }, [
             y.isVisible ? (i(), u("tr", {
@@ -2533,7 +2551,7 @@ const xn = /* @__PURE__ */ h({
                 key: "item" + v.item.editor.id,
                 class: l(v.className)
               }, [
-                b(a, {
+                C(a, {
                   question: n.question,
                   cell: v
                 }, null, 8, ["question", "cell"])
@@ -2544,14 +2562,14 @@ const xn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), so = { key: 1 }, no = /* @__PURE__ */ h({
+}), oo = { key: 1 }, to = /* @__PURE__ */ h({
   __name: "MultipletextItem",
   props: {
     question: {},
     cell: {}
   },
   setup(r) {
-    const s = r, o = (n) => te(n);
+    const s = r, o = (n) => re(n);
     L(() => s.cell.item.editor);
     const e = w(() => s.cell.item);
     return (n, t) => {
@@ -2571,10 +2589,10 @@ const xn = /* @__PURE__ */ h({
             key: 0,
             class: l(n.question.cssClasses.requiredText)
           }, R(e.value.editor.requiredText), 3)) : d("", !0),
-          b(a, {
+          C(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
-          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", so, "\xA0")) : d("", !0),
+          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", oo, "\xA0")) : d("", !0),
           e.value.editor.isRequireTextAfterTitle ? (i(), u("span", {
             key: 2,
             "aria-hidden": "true",
@@ -2593,14 +2611,14 @@ const xn = /* @__PURE__ */ h({
       ], 2));
     };
   }
-}), oo = { class: "sv-hidden" }, to = { key: 0 }, io = { key: 0 }, ro = ["onClick"], lo = ["data-responsive-title", "onClick"], ao = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], uo = ["xlink:href"], mo = /* @__PURE__ */ h({
+}), io = { class: "sv-hidden" }, ro = { key: 0 }, lo = { key: 0 }, ao = ["onClick"], uo = ["data-responsive-title", "onClick"], mo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = j();
+    const s = r, o = _(null), e = z();
     A(
       s,
       o,
@@ -2625,13 +2643,13 @@ const xn = /* @__PURE__ */ h({
         ref: o
       }, [
         c("fieldset", null, [
-          c("legend", oo, R(t.question.locTitle.renderedHtml), 1),
+          c("legend", io, R(t.question.locTitle.renderedHtml), 1),
           c("table", {
             class: l(t.question.getTableCss())
           }, [
-            t.question.showHeader ? (i(), u("thead", to, [
+            t.question.showHeader ? (i(), u("thead", ro, [
               c("tr", null, [
-                t.question.hasRows ? (i(), u("td", io)) : d("", !0),
+                t.question.hasRows ? (i(), u("td", lo)) : d("", !0),
                 (i(!0), u($, null, B(t.question.visibleColumns, (m, v) => (i(), u("th", {
                   key: v,
                   class: l(t.question.cssClasses.headerCell),
@@ -2643,8 +2661,8 @@ const xn = /* @__PURE__ */ h({
                   (i(), q(T(t.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: t.question.getColumnHeaderWrapperComponentData(m)
                   }, {
-                    default: V(() => [
-                      b(y, {
+                    default: O(() => [
+                      C(y, {
                         locString: m.locText
                       }, null, 8, ["locString"])
                     ]),
@@ -2668,8 +2686,8 @@ const xn = /* @__PURE__ */ h({
                   (i(), q(T(t.question.getRowHeaderWrapperComponentName(m)), {
                     componentData: t.question.getRowHeaderWrapperComponentData(m)
                   }, {
-                    default: V(() => [
-                      b(y, {
+                    default: O(() => [
+                      C(y, {
                         locString: m.locText
                       }, null, 8, ["locString"])
                     ]),
@@ -2681,60 +2699,25 @@ const xn = /* @__PURE__ */ h({
                 t.question.hasCellText ? (i(!0), u($, { key: 0 }, B(t.question.visibleColumns, (g, I) => (i(), u("td", {
                   key: I,
                   class: l(t.question.getItemClass(m, g)),
-                  onClick: (C) => n(m, g)
+                  onClick: (b) => n(m, g)
                 }, [
-                  b(y, {
+                  C(y, {
                     locString: t.question.getCellDisplayLocText(m.name, g)
                   }, null, 8, ["locString"])
-                ], 10, ro))), 128)) : d("", !0),
+                ], 10, ao))), 128)) : d("", !0),
                 t.question.hasCellText ? d("", !0) : (i(!0), u($, { key: 1 }, B(t.question.visibleColumns, (g, I) => (i(), u("td", {
                   key: I,
                   "data-responsive-title": g.locText.renderedHtml,
                   class: l(t.question.cssClasses.cell),
-                  onClick: (C) => n(m, g)
+                  onClick: (b) => n(m, g)
                 }, [
-                  c("label", {
-                    onMousedown: a[0] || (a[0] = (C) => t.question.onMouseDown()),
-                    class: l(t.question.getItemClass(m, g))
-                  }, [
-                    P(c("input", {
-                      type: "radio",
-                      class: l(t.question.cssClasses.itemValue),
-                      name: m.fullName,
-                      "onUpdate:modelValue": (C) => m.value = C,
-                      value: g.value,
-                      disabled: t.question.isInputReadOnly,
-                      id: t.question.inputId + "_" + m.name + "_" + I,
-                      "aria-required": t.question.a11y_input_ariaRequired,
-                      "aria-label": t.question.getCellAriaLabel(m.locText.renderedHtml, g.locText.renderedHtml),
-                      "aria-invalid": t.question.a11y_input_ariaInvalid,
-                      "aria-describedby": t.question.a11y_input_ariaDescribedBy
-                    }, null, 10, ao), [
-                      [ee, m.value]
-                    ]),
-                    c("span", {
-                      class: l(t.question.cssClasses.materialDecorator)
-                    }, [
-                      t.question.itemSvgIcon ? (i(), u("svg", {
-                        key: 0,
-                        class: l(t.question.cssClasses.itemDecorator)
-                      }, [
-                        c("use", {
-                          "xlink:href": t.question.itemSvgIcon
-                        }, null, 8, uo)
-                      ], 2)) : d("", !0)
-                    ], 2),
-                    P(c("span", {
-                      class: l(t.question.cssClasses.cellResponsiveTitle)
-                    }, [
-                      b(y, {
-                        locString: g.locText
-                      }, null, 8, ["locString"])
-                    ], 2), [
-                      [M, t.question.isMobile]
-                    ])
-                  ], 34)
-                ], 10, lo))), 128))
+                  (i(), q(T(t.question.cellComponent), {
+                    question: t.question,
+                    row: m,
+                    column: g,
+                    columnIndex: I
+                  }, null, 8, ["question", "row", "column", "columnIndex"]))
+                ], 10, uo))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2742,7 +2725,64 @@ const xn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), co = /* @__PURE__ */ h({
+}), co = ["name", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], po = ["xlink:href"], vo = /* @__PURE__ */ h({
+  inheritAttrs: !1,
+  __name: "MatrixCell",
+  props: {
+    question: {},
+    row: {},
+    column: {},
+    columnIndex: {}
+  },
+  setup(r) {
+    return (s, o) => {
+      const e = p("survey-string");
+      return i(), u("label", {
+        onMousedown: o[1] || (o[1] = (n) => s.question.onMouseDown()),
+        class: l(s.question.getItemClass(s.row, s.column))
+      }, [
+        P(c("input", {
+          type: "radio",
+          class: l(s.question.cssClasses.itemValue),
+          name: s.row.fullName,
+          "onUpdate:modelValue": o[0] || (o[0] = (n) => s.row.value = n),
+          value: s.column.value,
+          disabled: s.question.isInputReadOnly,
+          id: s.question.inputId + "_" + s.row.name + "_" + s.columnIndex,
+          "aria-required": s.question.a11y_input_ariaRequired,
+          "aria-label": s.question.getCellAriaLabel(
+            s.row.locText.renderedHtml,
+            s.column.locText.renderedHtml
+          ),
+          "aria-invalid": s.question.a11y_input_ariaInvalid,
+          "aria-describedby": s.question.a11y_input_ariaDescribedBy
+        }, null, 10, co), [
+          [ee, s.row.value]
+        ]),
+        c("span", {
+          class: l(s.question.cssClasses.materialDecorator)
+        }, [
+          s.question.itemSvgIcon ? (i(), u("svg", {
+            key: 0,
+            class: l(s.question.cssClasses.itemDecorator)
+          }, [
+            c("use", {
+              "xlink:href": s.question.itemSvgIcon
+            }, null, 8, po)
+          ], 2)) : d("", !0)
+        ], 2),
+        s.question.isMobile ? (i(), u("span", {
+          key: 0,
+          class: l(s.question.cssClasses.cellResponsiveTitle)
+        }, [
+          C(e, {
+            locString: s.column.locText
+          }, null, 8, ["locString"])
+        ], 2)) : d("", !0)
+      ], 34);
+    };
+  }
+}), yo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
@@ -2759,7 +2799,7 @@ const xn = /* @__PURE__ */ h({
       }, null, 8, ["question"]);
     };
   }
-}), po = { key: 0 }, vo = ["data-sv-drop-target-matrix-row", "onPointerdown"], yo = { key: 1 }, qo = /* @__PURE__ */ h({
+}), qo = { key: 0 }, go = ["data-sv-drop-target-matrix-row", "onPointerdown"], ho = { key: 1 }, Co = /* @__PURE__ */ h({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2769,7 +2809,7 @@ const xn = /* @__PURE__ */ h({
     return L(
       () => o.value,
       (e) => {
-        const n = oe();
+        const n = ie();
         e.renderedRowsChangedCallback = () => {
           var t;
           (t = n == null ? void 0 : n.proxy) == null || t.$forceUpdate();
@@ -2780,7 +2820,7 @@ const xn = /* @__PURE__ */ h({
         };
       }
     ), (e, n) => {
-      const t = p("survey-string"), a = p("survey-matrixheaderrequired"), y = p("survey-matrixcell");
+      const t = p("survey-string"), a = p("survey-matrixheaderrequired"), y = p("survey-matrixdropdown-cell");
       return i(), u("div", {
         style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: l(e.question.cssClasses.tableWrapper)
@@ -2788,7 +2828,7 @@ const xn = /* @__PURE__ */ h({
         c("table", {
           class: l(e.question.getTableCss())
         }, [
-          o.value.showHeader ? (i(), u("thead", po, [
+          o.value.showHeader ? (i(), u("thead", qo, [
             c("tr", null, [
               (i(!0), u($, null, B(o.value.headerRow.cells, (m) => (i(), u($, null, [
                 m.hasTitle ? (i(), u("th", {
@@ -2799,8 +2839,8 @@ const xn = /* @__PURE__ */ h({
                   (i(), q(T(e.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(m)
                   }, {
-                    default: V(() => [
-                      b(t, {
+                    default: O(() => [
+                      C(t, {
                         locString: m.locTitle
                       }, null, 8, ["locString"]),
                       m.column ? (i(), q(a, {
@@ -2835,10 +2875,10 @@ const xn = /* @__PURE__ */ h({
                   question: e.question,
                   key: m.id + "_" + g
                 }, null, 8, ["cell", "question"]))), 128))
-              ], 42, vo)) : d("", !0)
+              ], 42, go)) : d("", !0)
             ], 64))), 128))
           ]),
-          o.value.showFooter ? (i(), u("tfoot", yo, [
+          o.value.showFooter ? (i(), u("tfoot", ho, [
             c("tr", null, [
               (i(!0), u($, null, B(o.value.footerRow.cells, (m, v) => (i(), q(y, {
                 cell: m,
@@ -2851,7 +2891,7 @@ const xn = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), go = /* @__PURE__ */ c("span", null, "\xA0", -1), ho = /* @__PURE__ */ h({
+}), bo = /* @__PURE__ */ c("span", null, "\xA0", -1), ko = /* @__PURE__ */ h({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2860,42 +2900,42 @@ const xn = /* @__PURE__ */ h({
   setup(r) {
     const s = r;
     return L(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u($, { key: 0 }, [
-      go,
+      bo,
       o.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
       }, R(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
-}), Co = ["data-responsive-title", "title", "colspan"], bo = /* @__PURE__ */ h({
-  __name: "MatrixCell",
+}), fo = ["data-responsive-title", "title", "colspan"], Io = /* @__PURE__ */ h({
+  __name: "MatrixDropdownCellComp",
   props: {
     question: {},
     cell: {}
   },
   setup(r) {
-    const s = r, o = _(!1), e = _(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (g) => te(g);
+    const s = r, o = _(!1), e = _(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (g) => re(g);
     H(() => {
       if (!s.cell.hasQuestion || !s.question || !s.question.survey)
         return;
       a(), s.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
         a();
       });
-      const g = e.value, I = s.cell.question, C = {
+      const g = e.value, I = s.cell.question, b = {
         cell: s.cell.cell,
         cellQuestion: I,
         htmlElement: g,
         row: s.cell.row,
         column: s.cell.cell.column
       };
-      s.question.survey.matrixAfterCellRender(s.question, C), I && I.afterRenderCore(g);
+      s.question.survey.matrixAfterCellRender(s.question, b), I && I.afterRenderCore(g);
     });
     const m = w(() => {
       const g = s.cell;
       if (g.hasPanel) {
-        const I = g.panel, C = I.survey;
-        if (C) {
-          const N = C.getElementWrapperComponentName(I);
+        const I = g.panel, b = I.survey;
+        if (b) {
+          const N = b.getElementWrapperComponentName(I);
           if (N)
             return N;
         }
@@ -2903,9 +2943,9 @@ const xn = /* @__PURE__ */ h({
       }
     }), v = w(() => {
       if (s.cell.hasPanel) {
-        const I = s.cell.panel, C = I.survey;
+        const I = s.cell.panel, b = I.survey;
         let N;
-        return C && (N = C.getElementWrapperComponentData(I)), {
+        return b && (N = b.getElementWrapperComponentData(I)), {
           componentName: "survey-panel",
           componentData: {
             element: I,
@@ -2916,18 +2956,18 @@ const xn = /* @__PURE__ */ h({
       }
     });
     return (g, I) => {
-      const C = p("survey-errors"), N = p("sv-matrix-drag-drop-icon"), k = p("sv-action-bar"), D = p("survey-radiogroup-item"), E = p("survey-checkbox-item"), O = p("survey-other-choice"), U = p("survey-string");
+      const b = p("survey-errors"), N = p("sv-matrix-drag-drop-icon"), k = p("sv-action-bar"), D = p("survey-radiogroup-item"), E = p("survey-checkbox-item"), V = p("survey-other-choice"), K = p("survey-string");
       return i(), u("td", {
         class: l(g.cell.className),
         "data-responsive-title": n(),
         title: g.cell.getTitle(),
         style: S(t()),
         colspan: g.cell.colSpans,
-        onFocusin: I[0] || (I[0] = (re) => g.cell.focusIn()),
+        onFocusin: I[0] || (I[0] = (ue) => g.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
-        g.cell.isErrorsCell ? (i(), q(C, {
+        g.cell.isErrorsCell ? (i(), q(b, {
           key: 0,
           element: g.cell.question
         }, null, 8, ["element"])) : d("", !0),
@@ -2949,7 +2989,7 @@ const xn = /* @__PURE__ */ h({
             key: 0,
             componentData: g.question.getCellWrapperComponentData(g.cell.cell)
           }, {
-            default: V(() => [
+            default: O(() => [
               (i(), q(T(y(g.cell.question)), {
                 question: g.cell.question
               }, null, 8, ["question"]))
@@ -2964,7 +3004,7 @@ const xn = /* @__PURE__ */ h({
             key: 2,
             componentData: g.question.getCellWrapperComponentData(g.cell.cell)
           }, {
-            default: V(() => [
+            default: O(() => [
               g.cell.isRadio ? (i(), q(D, {
                 key: g.cell.item.value,
                 question: g.cell.question,
@@ -2980,7 +3020,7 @@ const xn = /* @__PURE__ */ h({
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          g.cell.isOtherChoice ? (i(), q(O, {
+          g.cell.isOtherChoice ? (i(), q(V, {
             key: 3,
             question: g.cell.question
           }, null, 8, ["question"])) : d("", !0)
@@ -2991,8 +3031,8 @@ const xn = /* @__PURE__ */ h({
           key: 5,
           componentData: g.question.getCellWrapperComponentData(g.cell)
         }, {
-          default: V(() => [
-            g.cell.hasTitle ? (i(), q(U, {
+          default: O(() => [
+            g.cell.hasTitle ? (i(), q(K, {
               key: 0,
               locString: g.cell.locTitle
             }, null, 8, ["locString"])) : d("", !0),
@@ -3003,10 +3043,10 @@ const xn = /* @__PURE__ */ h({
           ]),
           _: 1
         }, 8, ["componentData"])) : d("", !0)
-      ], 46, Co);
+      ], 46, fo);
     };
   }
-}), ko = /* @__PURE__ */ h({
+}), wo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3033,7 +3073,7 @@ const xn = /* @__PURE__ */ h({
             class: l(n.question.getAddRowButtonCss()),
             onClick: e
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locAddRowText
             }, null, 8, ["locString"]),
             c("span", {
@@ -3052,7 +3092,7 @@ const xn = /* @__PURE__ */ h({
           c("div", {
             class: l(n.question.cssClasses.emptyRowsText)
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locEmptyRowsText
             }, null, 8, ["locString"])
           ], 2),
@@ -3062,7 +3102,7 @@ const xn = /* @__PURE__ */ h({
             class: l(n.question.getAddRowButtonCss(!0)),
             onClick: e
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locAddRowText
             }, null, 8, ["locString"]),
             c("span", {
@@ -3079,7 +3119,7 @@ const xn = /* @__PURE__ */ h({
             class: l(n.question.getAddRowButtonCss()),
             onClick: e
           }, [
-            b(a, {
+            C(a, {
               locString: n.question.locAddRowText
             }, null, 8, ["locString"]),
             c("span", {
@@ -3091,19 +3131,19 @@ const xn = /* @__PURE__ */ h({
     };
   }
 });
-function ie(r, s = !0) {
+function ae(r, s = !0) {
   return {
     question: w(() => r.item.data.question),
     row: s ? w(() => r.item.data.row) : void 0
   };
 }
-const fo = ["disabled"], Io = /* @__PURE__ */ h({
+const So = ["disabled"], Ro = /* @__PURE__ */ h({
   __name: "RemoveButton",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, { question: o, row: e } = ie(s);
+    const s = r, { question: o, row: e } = ae(s);
     return (n, t) => {
       const a = p("survey-string");
       return i(), u("button", {
@@ -3112,41 +3152,41 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
         disabled: f(o).isInputReadOnly,
         onClick: t[0] || (t[0] = () => f(o).removeRowUI(f(e)))
       }, [
-        b(a, {
+        C(a, {
           locString: f(o).locRemoveRowText
         }, null, 8, ["locString"]),
         c("span", {
           class: l(f(o).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, fo);
+      ], 10, So);
     };
   }
-}), wo = ["xlink:href"], So = /* @__PURE__ */ h({
+}), To = ["xlink:href"], $o = /* @__PURE__ */ h({
   __name: "DragDropIcon",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, { question: o } = ie(s, !1);
+    const s = r, { question: o } = ae(s, !1);
     return (e, n) => f(o).iconDragElement ? (i(), u("svg", {
       key: 0,
       class: l(f(o).cssClasses.dragElementDecorator)
     }, [
       c("use", {
         "xlink:href": f(o).iconDragElement
-      }, null, 8, wo)
+      }, null, 8, To)
     ], 2)) : (i(), u("span", {
       key: 1,
       class: l(f(o).cssClasses.iconDrag)
     }, null, 2));
   }
-}), Ro = ["aria-expanded", "aria-controls"], To = /* @__PURE__ */ h({
+}), _o = ["aria-expanded", "aria-controls"], Do = /* @__PURE__ */ h({
   __name: "DetailButton",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, { question: o, row: e } = ie(s);
+    const s = r, { question: o, row: e } = ae(s);
     return (n, t) => {
       const a = p("sv-svg-icon");
       return i(), u("button", {
@@ -3156,15 +3196,15 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
         "aria-expanded": f(o).getIsDetailPanelShowing(f(e)) ? "true" : "false",
         "aria-controls": f(o).getIsDetailPanelShowing(f(e)) ? f(e).detailPanelId : null
       }, [
-        b(a, {
+        C(a, {
           class: l(f(o).getDetailPanelIconCss(f(e))),
           iconName: f(o).getDetailPanelIconId(f(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, Ro);
+      ], 10, _o);
     };
   }
-}), $o = /* @__PURE__ */ h({
+}), Bo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3172,7 +3212,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = oe();
+    const s = r, o = _(null), e = ie();
     A(
       s,
       o,
@@ -3220,7 +3260,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
       };
     };
     return (m, v) => {
-      const g = p("survey-string"), I = p("sv-paneldynamic-add-btn"), C = p("survey-paneldynamicprogress"), N = p("sv-paneldynamic-remove-btn"), k = p("survey-paneldynamicprogress-v2");
+      const g = p("survey-string"), I = p("sv-paneldynamic-add-btn"), b = p("survey-paneldynamicprogress"), N = p("sv-paneldynamic-remove-btn"), k = p("survey-paneldynamicprogress-v2");
       return i(), u("div", {
         class: l(m.question.cssClasses.root),
         ref_key: "root",
@@ -3231,11 +3271,11 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
           class: l(m.question.cssClasses.noEntriesPlaceholder)
         }, [
           c("span", null, [
-            b(g, {
+            C(g, {
               locString: m.question.locNoEntriesText
             }, null, 8, ["locString"])
           ]),
-          b(I, {
+          C(I, {
             data: { question: m.question }
           }, null, 8, ["data"])
         ], 2)) : d("", !0),
@@ -3249,7 +3289,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
-        t() && m.question.isProgressTopShowing ? (i(), q(C, {
+        t() && m.question.isProgressTopShowing ? (i(), q(b, {
           key: 2,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
@@ -3259,7 +3299,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
           c("div", {
             class: l(m.question.getPanelWrapperCss())
           }, [
-            (i(), q(T(a(D)), F(ye(y(D))), null, 16)),
+            (i(), q(T(a(D)), F(oe(y(D))), null, 16)),
             m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && D.state !== "collapsed" ? (i(), q(N, {
               key: 0,
               data: { question: m.question, panel: D }
@@ -3270,7 +3310,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
             key: "separator" + D.id
           }, null, 2)) : d("", !0)
         ], 64))), 128)),
-        t() && m.question.isProgressBottomShowing ? (i(), q(C, {
+        t() && m.question.isProgressBottomShowing ? (i(), q(b, {
           key: 3,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
@@ -3285,7 +3325,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), _o = /* @__PURE__ */ h({
+}), Lo = /* @__PURE__ */ h({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3304,7 +3344,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
           c("div", {
             class: l(e.question.cssClasses.progressContainer)
           }, [
-            b(t, {
+            C(t, {
               data: { question: e.question }
             }, null, 8, ["data"]),
             e.question.isRangeShowing ? (i(), u("div", {
@@ -3317,21 +3357,21 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
                 role: "progressbar"
               }, null, 6)
             ], 2)) : d("", !0),
-            b(a, {
+            C(a, {
               data: { question: e.question }
             }, null, 8, ["data"])
           ], 2),
-          b(y, {
+          C(y, {
             data: { question: e.question }
           }, null, 8, ["data"]),
-          b(m, {
+          C(m, {
             data: { question: e.question }
           }, null, 8, ["data"])
         ], 2)
       ], 2);
     };
   }
-}), Do = /* @__PURE__ */ h({
+}), No = /* @__PURE__ */ h({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3360,7 +3400,7 @@ const fo = ["disabled"], Io = /* @__PURE__ */ h({
           key: 1,
           class: l(s.question.cssClasses.footerButtonsContainer)
         }, [
-          b(e, {
+          C(e, {
             model: s.question.footerToolbar
           }, null, 8, ["model"])
         ], 2)) : d("", !0)
@@ -3373,7 +3413,7 @@ function Y(r) {
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const Bo = /* @__PURE__ */ h({
+const Po = /* @__PURE__ */ h({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3394,7 +3434,7 @@ const Bo = /* @__PURE__ */ h({
       }, R(f(o).panelAddText), 3)
     ], 2)) : d("", !0);
   }
-}), Lo = ["title"], No = /* @__PURE__ */ h({
+}), Ao = ["title"], Mo = /* @__PURE__ */ h({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3411,14 +3451,14 @@ const Bo = /* @__PURE__ */ h({
         onClick: e,
         class: l(f(o).getNextButtonCss())
       }, [
-        b(a, {
+        C(a, {
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Lo);
+      ], 10, Ao);
     };
   }
-}), Po = ["title"], Ao = /* @__PURE__ */ h({
+}), Ho = ["title"], Wo = /* @__PURE__ */ h({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3435,14 +3475,14 @@ const Bo = /* @__PURE__ */ h({
         onClick: e,
         class: l(f(o).getPrevButtonCss())
       }, [
-        b(a, {
+        C(a, {
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Po);
+      ], 10, Ho);
     };
   }
-}), Mo = /* @__PURE__ */ h({
+}), Eo = /* @__PURE__ */ h({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
@@ -3467,7 +3507,7 @@ const Bo = /* @__PURE__ */ h({
       }, null, 2)
     ], 2));
   }
-}), Ho = /* @__PURE__ */ h({
+}), Vo = /* @__PURE__ */ h({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3479,7 +3519,7 @@ const Bo = /* @__PURE__ */ h({
       class: l(f(o).cssClasses.progressText)
     }, R(f(o).progressText), 3));
   }
-}), Wo = ["id"], Eo = /* @__PURE__ */ h({
+}), Oo = ["id"], Fo = /* @__PURE__ */ h({
   __name: "Errors",
   props: {
     element: {},
@@ -3512,21 +3552,21 @@ const Bo = /* @__PURE__ */ h({
               o.element.cssClasses ? o.element.cssClasses.error.item || void 0 : "panel-error-item"
             )
           }, [
-            b(n, {
+            C(n, {
               locString: t.locText
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, Wo)) : d("", !0);
+      ], 10, Oo)) : d("", !0);
     };
   }
-}), Vo = { key: 0 }, Oo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Fo = /* @__PURE__ */ h({
+}), zo = { key: 0 }, Uo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ko = /* @__PURE__ */ h({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Vo, R(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", zo, R(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3544,9 +3584,9 @@ const Bo = /* @__PURE__ */ h({
       onInput: o[1] || (o[1] = (e) => {
         s.question.onCommentInput(e);
       })
-    }, null, 46, Oo));
+    }, null, 46, Uo));
   }
-}), zo = /* @__PURE__ */ h({
+}), jo = /* @__PURE__ */ h({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3554,7 +3594,7 @@ const Bo = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = (o) => {
-      qe(o);
+      ge(o);
     };
     return (o, e) => {
       const n = p("survey-element-title-content"), t = p("sv-title-actions");
@@ -3570,7 +3610,7 @@ const Bo = /* @__PURE__ */ h({
           s(a);
         })
       }, {
-        default: V(() => [
+        default: O(() => [
           o.element.hasTitleActions ? d("", !0) : (i(), q(n, {
             key: 0,
             element: o.element,
@@ -3586,7 +3626,7 @@ const Bo = /* @__PURE__ */ h({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : d("", !0);
     };
   }
-}), Uo = { key: 3 }, Ko = { key: 5 }, jo = { key: 7 }, Qo = /* @__PURE__ */ h({
+}), Qo = { key: 3 }, Go = { key: 5 }, Jo = { key: 7 }, Xo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3612,18 +3652,18 @@ const Bo = /* @__PURE__ */ h({
           class: l(s.element.cssTitleNumber),
           "aria-hidden": !0
         }, R(s.element.no), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", Uo, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", Qo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, R(s.element.requiredText), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Ko, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Go, "\xA0")) : d("", !0),
         s.element.isTitleRenderedAsString ? d("", !0) : (i(), q(e, {
           key: 6,
           locString: s.element.locTitle
         }, null, 8, ["locString"])),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", jo, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", Jo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", {
           key: 8,
           class: l(s.element.cssClasses.requiredText),
@@ -3632,7 +3672,7 @@ const Bo = /* @__PURE__ */ h({
       ], 64);
     };
   }
-}), Go = { class: "sv-title-actions" }, Jo = { class: "sv-title-actions__title" }, Xo = /* @__PURE__ */ h({
+}), Yo = { class: "sv-title-actions" }, Zo = { class: "sv-title-actions__title" }, xo = /* @__PURE__ */ h({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3642,8 +3682,8 @@ const Bo = /* @__PURE__ */ h({
     const s = r, o = w(() => s.element.getTitleToolbar());
     return (e, n) => {
       const t = p("survey-string"), a = p("survey-element-title-content"), y = p("sv-action-bar");
-      return i(), u("div", Go, [
-        c("span", Jo, [
+      return i(), u("div", Yo, [
+        c("span", Zo, [
           e.element.isPage ? (i(), q(t, {
             key: 0,
             locString: e.element.locTitle
@@ -3654,24 +3694,24 @@ const Bo = /* @__PURE__ */ h({
             css: e.css
           }, null, 8, ["element", "css"]))
         ]),
-        b(y, { model: o.value }, null, 8, ["model"])
+        C(y, { model: o.value }, null, 8, ["model"])
       ]);
     };
   }
-}), he = (r, s) => {
+}), Ce = (r, s) => {
   const o = r.__vccOpts || r;
   for (const [e, n] of s)
     o[e] = n;
   return o;
-}, Yo = {}, Zo = { class: "sv-brand-info" }, xo = /* @__PURE__ */ Ie('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), et = [
-  xo
+}, et = {}, st = { class: "sv-brand-info" }, nt = /* @__PURE__ */ Se('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), ot = [
+  nt
 ];
-function st(r, s) {
-  return i(), u("div", Zo, et);
+function tt(r, s) {
+  return i(), u("div", st, ot);
 }
-const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use", null, null, -1), tt = [
-  ot
-], it = /* @__PURE__ */ h({
+const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use", null, null, -1), lt = [
+  rt
+], at = /* @__PURE__ */ h({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3682,7 +3722,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
   },
   setup(r) {
     const s = r, o = _(), e = () => {
-      Le(
+      Pe(
         s.size,
         s.width,
         s.height,
@@ -3700,9 +3740,9 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ref: o,
       class: "sv-svg-icon",
       role: "img"
-    }, tt, 512));
+    }, lt, 512));
   }
-}), rt = /* @__PURE__ */ h({
+}), ut = /* @__PURE__ */ h({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3714,10 +3754,10 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       s.handleClick && t.stopPropagation();
     };
     L(() => s.model);
-    const n = w(() => s.model.renderedActions);
+    const n = le(() => s.model.renderedActions);
     return H(() => {
       !s.model.hasActions || s.model.initResponsivityManager(o.value);
-    }), z(() => {
+    }), U(() => {
       s.model.resetResponsivityManager();
     }), (t, a) => {
       const y = p("sv-action");
@@ -3728,14 +3768,14 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         class: l(t.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u($, null, B(n.value, (m) => (i(), q(y, {
+        (i(!0), u($, null, B(f(n), (m) => (i(), q(y, {
           key: m.id,
           item: m
         }, null, 8, ["item"]))), 128))
       ], 2)) : d("", !0);
     };
   }
-}), lt = ["id"], at = { class: "sv-action__content" }, ut = /* @__PURE__ */ h({
+}), dt = ["id"], mt = { class: "sv-action__content" }, ct = /* @__PURE__ */ h({
   __name: "Action",
   props: {
     item: {}
@@ -3750,17 +3790,17 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        c("div", at, [
+        c("div", mt, [
           e.item.needSeparator ? (i(), q(t, { key: 0 })) : d("", !0),
           (i(), q(T(o.value), { item: e.item }, null, 8, ["item"]))
         ])
-      ], 10, lt);
+      ], 10, dt);
     };
   }
-}), dt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], mt = {
+}), pt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], vt = {
   inheritAttrs: !1
-}, ct = /* @__PURE__ */ h({
-  ...mt,
+}, yt = /* @__PURE__ */ h({
+  ...vt,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3795,26 +3835,26 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
         }, R(o.item.title), 3)) : d("", !0)
-      ], 42, dt)), [
+      ], 42, pt)), [
         [t, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
     };
   }
-}), pt = ["disabled", "title", "role"], vt = {
+}), qt = ["disabled", "title", "role"], gt = {
   inheritAttrs: !1
-}, yt = /* @__PURE__ */ h({
-  ...vt,
+}, ht = /* @__PURE__ */ h({
+  ...gt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, o = Pe;
+    const s = r, o = Me;
     let e;
     return L(
       () => s.item,
       (n) => {
-        e = new Ne(n);
+        e = new Ae(n);
       },
       () => {
         e.dispose();
@@ -3846,17 +3886,17 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             key: 1,
             class: l(n.item.getActionBarItemTitleCss())
           }, R(n.item.title), 3)) : d("", !0)
-        ], 42, pt)), [
+        ], 42, qt)), [
           [m, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
         ]),
-        b(y, {
+        C(y, {
           model: n.item.popupModel,
           getTarget: f(o)
         }, null, 8, ["model", "getTarget"])
       ], 64);
     };
   }
-}), qt = /* @__PURE__ */ h({
+}), Ct = /* @__PURE__ */ h({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -3867,7 +3907,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       class: l(["sv-action-bar-separator", o.value])
     }, null, 2));
   }
-}), gt = ["aria-label", "placeholder", "value"], ht = ["aria-label"], Ct = ["id"], bt = /* @__PURE__ */ h({
+}), bt = ["aria-label", "placeholder", "value"], kt = ["aria-label"], ft = ["id"], It = /* @__PURE__ */ h({
   __name: "List",
   props: {
     model: {}
@@ -3898,7 +3938,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           c("div", {
             class: l(a.model.cssClasses.filterIcon)
           }, [
-            b(m, {
+            C(m, {
               iconName: "icon-search",
               size: "auto"
             })
@@ -3911,7 +3951,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             value: a.model.filterString,
             onChange: e,
             onKeyup: n
-          }, null, 42, gt),
+          }, null, 42, bt),
           a.model.showSearchClearButton && !!a.model.filterString ? (i(), u("button", {
             key: 0,
             onClick: y[0] || (y[0] = (g) => {
@@ -3919,7 +3959,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             }),
             class: l(a.model.cssClasses.searchClearButtonIcon)
           }, [
-            b(m, {
+            C(m, {
               iconName: "icon-searchclear",
               size: "auto"
             })
@@ -3931,7 +3971,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           c("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, R(a.model.emptyMessage), 11, ht)
+          }, R(a.model.emptyMessage), 11, kt)
         ], 2), [
           [M, a.model.isEmpty]
         ]),
@@ -3953,13 +3993,13 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             model: a.model,
             key: g.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, Ct)), [
+        ], 42, ft)), [
           [M, !a.model.isEmpty]
         ]) : d("", !0)
       ], 2);
     };
   }
-}), kt = ["aria-selected", "id"], ft = ["title"], It = /* @__PURE__ */ h({
+}), wt = ["aria-selected", "id"], St = ["title"], Rt = /* @__PURE__ */ h({
   __name: "ListItem",
   props: {
     model: {},
@@ -4008,27 +4048,27 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             key: 2,
             item: n.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 14, ft)
-      ], 42, kt)), [
+        ], 14, St)
+      ], 42, wt)), [
         [M, n.model.isItemVisible(n.item)],
         [m]
       ]);
     };
   }
-}), wt = /* @__PURE__ */ h({
+}), Tt = /* @__PURE__ */ h({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
     model: {}
   },
   setup(r) {
-    const s = r, o = j(
-      ae(s.model, void 0)
+    const s = r, o = z(
+      de(s.model, void 0)
     ), e = _(null);
-    return G(
+    return J(
       () => s.model,
       (n) => {
-        o.value.dispose(), o.value = ae(n, void 0);
+        o.value.dispose(), o.value = de(n, void 0);
       },
       { immediate: !0 }
     ), L(() => o.value), H(() => {
@@ -4037,7 +4077,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         n,
         s.getTarget ? s.getTarget(n) : void 0
       );
-    }), z(() => {
+    }), U(() => {
       o.value.dispose();
     }), (n, t) => {
       const a = p("sv-popup-container");
@@ -4045,17 +4085,17 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         ref_key: "root",
         ref: e
       }, [
-        b(a, { model: o.value }, null, 8, ["model"])
+        C(a, { model: o.value }, null, 8, ["model"])
       ], 512);
     };
   }
-}), St = { class: "sv-popup__shadow" }, Rt = { class: "sv-popup__body-content" }, Tt = {
+}), $t = { class: "sv-popup__shadow" }, _t = { class: "sv-popup__body-content" }, Dt = {
   key: 0,
   class: "sv-popup__body-header"
-}, $t = { class: "sv-popup__scrolling-content" }, _t = { class: "sv-popup__content" }, Dt = {
+}, Bt = { class: "sv-popup__scrolling-content" }, Lt = { class: "sv-popup__content" }, Nt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Bt = /* @__PURE__ */ h({
+}, Pt = /* @__PURE__ */ h({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4094,20 +4134,20 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           }),
           onClick: e
         }, [
-          c("div", St, [
+          c("div", $t, [
             n.model.showHeader ? (i(), q(T(n.model.popupHeaderTemplate), {
               key: 0,
               model: n.model
             }, null, 8, ["model"])) : d("", !0),
-            c("div", Rt, [
-              n.model.title ? (i(), u("div", Tt, R(n.model.title), 1)) : d("", !0),
-              c("div", $t, [
-                c("div", _t, [
-                  (i(), q(T(n.model.contentComponentName), F(ye(n.model.contentComponentData)), null, 16))
+            c("div", _t, [
+              n.model.title ? (i(), u("div", Dt, R(n.model.title), 1)) : d("", !0),
+              c("div", Bt, [
+                c("div", Lt, [
+                  (i(), q(T(n.model.contentComponentName), F(oe(n.model.contentComponentData)), null, 16))
                 ])
               ]),
-              n.model.showFooter ? (i(), u("div", Dt, [
-                b(a, {
+              n.model.showFooter ? (i(), u("div", Nt, [
+                C(a, {
                   model: n.model.footerToolbar
                 }, null, 8, ["model"])
               ])) : d("", !0)
@@ -4119,7 +4159,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Lt = /* @__PURE__ */ h({
+}), At = /* @__PURE__ */ h({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4133,10 +4173,10 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       })
     }, null, 4));
   }
-}), Nt = {
+}), Mt = {
   key: 0,
   class: "sv-components-column"
-}, Pt = /* @__PURE__ */ h({
+}, Ht = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     survey: {},
@@ -4148,7 +4188,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       () => s.survey.getContainerContent(s.container)
     );
     return (e, n) => o.value.length > 0 ? (i(), u($, { key: 0 }, [
-      e.needRenderWrapper ? (i(), u("div", Nt, [
+      e.needRenderWrapper ? (i(), u("div", Mt, [
         (i(!0), u($, null, B(o.value, (t, a) => (i(), q(T(t.component), {
           survey: e.survey,
           container: e.container,
@@ -4168,7 +4208,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
     css: {}
   },
   setup(r) {
-    const s = r, o = w(() => s.survey.progressValue + "%"), e = (t) => ue.getProgressTextInBarCss(t), n = (t) => ue.getProgressTextUnderBarCss(t);
+    const s = r, o = w(() => s.survey.progressValue + "%"), e = (t) => me.getProgressTextInBarCss(t), n = (t) => me.getProgressTextUnderBarCss(t);
     return (t, a) => (i(), u("div", {
       class: l(t.survey.getProgressCssClasses(t.container))
     }, [
@@ -4189,28 +4229,28 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       }, R(t.survey.progressText), 3)
     ], 2));
   }
-}), At = ["onClick"], Mt = ["title"], Ht = ["title"], Wt = /* @__PURE__ */ h({
+}), Wt = ["onClick"], Et = ["title"], Vt = ["title"], Ot = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
     survey: {}
   },
   setup(r) {
-    const s = r, o = new Ae(s.survey), e = _(!1), n = _(), t = w(() => s.survey.css);
+    const s = r, o = new He(s.survey), e = _(!1), n = _(), t = w(() => s.survey.css);
     let a;
-    const y = (C) => o.isListElementClickable(C), m = (C) => o.getListElementCss(C), v = (C) => {
-      o.clickListElement(C);
-    }, g = (C, N) => o.getScrollButtonCss(C, N), I = (C) => {
+    const y = (b) => o.isListElementClickable(b), m = (b) => o.getListElementCss(b), v = (b) => {
+      o.clickListElement(b);
+    }, g = (b, N) => o.getScrollButtonCss(b, N), I = (b) => {
       let N = n.value;
-      N.scrollLeft += (C ? -1 : 1) * 70;
+      N.scrollLeft += (b ? -1 : 1) * 70;
     };
     return H(() => {
-      const C = n.value;
+      const b = n.value;
       a = setInterval(() => {
-        e.value = C.scrollWidth > C.offsetWidth;
+        e.value = b.scrollWidth > b.offsetWidth;
       }, 100);
-    }), J(() => {
+    }), Q(() => {
       typeof a < "u" && (clearInterval(a), a = void 0);
-    }), (C, N) => (i(), u("div", {
+    }), (b, N) => (i(), u("div", {
       class: l(t.value.progressButtonsContainerCenter)
     }, [
       c("div", {
@@ -4229,7 +4269,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           c("ul", {
             class: l(t.value.progressButtonsList)
           }, [
-            (i(!0), u($, null, B(C.survey.visiblePages, (k, D) => (i(), u("li", {
+            (i(!0), u($, null, B(b.survey.visiblePages, (k, D) => (i(), u("li", {
               key: "listelement" + D,
               class: l(m(D)),
               onClick: (E) => y(D) ? v(D) : null
@@ -4237,12 +4277,12 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
               c("div", {
                 class: l(t.value.progressButtonsPageTitle),
                 title: k.renderedNavigationTitle
-              }, R(k.renderedNavigationTitle), 11, Mt),
+              }, R(k.renderedNavigationTitle), 11, Et),
               c("div", {
                 class: l(t.value.progressButtonsPageDescription),
                 title: k.locNavigationDescription.renderedHtml
-              }, R(k.locNavigationDescription.renderedHtml), 11, Ht)
-            ], 10, At))), 128))
+              }, R(k.locNavigationDescription.renderedHtml), 11, Vt)
+            ], 10, Wt))), 128))
           ], 2)
         ], 2),
         c("div", {
@@ -4253,13 +4293,13 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ], 2)
     ], 2));
   }
-}), Et = /* @__PURE__ */ h({
+}), Ft = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
     survey: {}
   },
   setup(r) {
-    const s = r, o = new Me(s.survey);
+    const s = r, o = new We(s.survey);
     return (e, n) => {
       const t = p("sv-svg-icon"), a = p("sv-popup"), y = p("sv-list"), m = X("key2click");
       return i(), u("div", {
@@ -4269,11 +4309,11 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
           key: 0,
           onClick: n[0] || (n[0] = (...v) => f(o).togglePopup && f(o).togglePopup(...v))
         }, [
-          b(t, {
+          C(t, {
             iconName: f(o).icon,
             size: 24
           }, null, 8, ["iconName"]),
-          b(a, {
+          C(a, {
             model: f(o).popupModel
           }, null, 8, ["model"])
         ])), [
@@ -4285,10 +4325,10 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ], 2);
     };
   }
-}), Vt = { onsubmit: "return false;" }, Ot = {
+}), zt = { onsubmit: "return false;" }, Ut = {
   key: 0,
   class: "sv_custom_header"
-}, Ft = { class: "sv-components-column sv-components-column--expandable" }, zt = ["id"], Ut = { key: 2 }, Kt = ["innerHTML"], jt = ["innerHTML"], Qt = ["innerHTML"], ce = /* @__PURE__ */ h({
+}, Kt = { class: "sv-components-column sv-components-column--expandable" }, jt = ["id"], Qt = { key: 2 }, Gt = ["innerHTML"], Jt = ["innerHTML"], Xt = ["innerHTML"], ve = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
@@ -4296,26 +4336,26 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
   },
   setup(r) {
     const s = r, o = _(), e = _(""), n = _(1), t = w(() => {
-      const C = s.survey ? s.survey : s.model;
-      return we(C);
+      const b = s.survey ? s.survey : s.model;
+      return Re(b);
     }), a = w(() => t.value.activePage ? t.value.activePage.id : ""), y = () => {
-      const C = a.value;
-      return !!t.value && C + n.value.toString();
+      const b = a.value;
+      return !!t.value && b + n.value.toString();
     }, m = w(
       () => t.value.showCompletedPage && t.value.state === "completed"
     ), v = w(() => t.value.css), g = w(() => "page" + y()), I = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
     return L(() => t.value), H(() => {
       if (!!t.value) {
-        var C = o.value;
-        C && t.value.afterRenderSurvey(C), t.value.renderCallback = () => {
+        var b = o.value;
+        b && t.value.afterRenderSurvey(b), t.value.renderCallback = () => {
           var N, k;
-          n.value++, (k = (N = oe()) == null ? void 0 : N.proxy) == null || k.$forceUpdate();
+          n.value++, (k = (N = ie()) == null ? void 0 : N.proxy) == null || k.$forceUpdate();
         }, t.value.startTimerFromUI();
       }
-    }), z(() => {
+    }), U(() => {
       t.value.stopTimer(), t.value.renderCallback = void 0;
-    }), (C, N) => {
-      const k = p("sv-svg-bundle"), D = p("survey-popup-modal"), E = p("survey-header"), O = p("survey-page"), U = p("sv-brand-info"), re = p("sv-notifier");
+    }), (b, N) => {
+      const k = p("sv-svg-bundle"), D = p("survey-popup-modal"), E = p("survey-header"), V = p("survey-page"), K = p("sv-brand-info"), ue = p("sv-notifier");
       return i(), u("div", {
         class: l(t.value.getRootCss()),
         style: S(t.value.themeVariables),
@@ -4326,14 +4366,14 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         c("div", {
           class: l(t.value.wrapperFormCss)
         }, [
-          b(D),
+          C(D),
           t.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
             class: l(v.value.rootBackgroundImage),
             style: S(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          c("form", Vt, [
-            t.value.hasLogo ? d("", !0) : (i(), u("div", Ot)),
+          c("form", zt, [
+            t.value.hasLogo ? d("", !0) : (i(), u("div", Ut)),
             c("div", {
               class: l(v.value.container)
             }, [
@@ -4355,7 +4395,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                c("div", Ft, [
+                c("div", Kt, [
                   (i(), q(T("sv-components-container"), {
                     survey: t.value,
                     container: "center",
@@ -4371,7 +4411,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
                       container: "contentTop",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"])),
-                    (i(), q(O, {
+                    (i(), q(V, {
                       key: g.value,
                       survey: t.value,
                       page: t.value.activePage,
@@ -4382,7 +4422,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
                       container: "contentBottom",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"]))
-                  ], 14, zt)
+                  ], 14, jt)
                 ]),
                 (i(), q(T("sv-components-container"), {
                   survey: t.value,
@@ -4395,11 +4435,11 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              m.value ? (i(), u("div", Ut, [
+              m.value ? (i(), u("div", Qt, [
                 c("div", {
                   innerHTML: I(),
                   class: l(t.value.completedCss)
-                }, null, 10, Kt),
+                }, null, 10, Gt),
                 (i(), q(T("sv-components-container"), {
                   survey: t.value,
                   container: "completePage",
@@ -4410,27 +4450,27 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
                 key: 3,
                 class: l(t.value.completedBeforeCss),
                 innerHTML: t.value.processedCompletedBeforeHtml
-              }, null, 10, jt)) : d("", !0),
+              }, null, 10, Jt)) : d("", !0),
               t.value.state === "loading" ? (i(), u("div", {
                 key: 4,
                 class: l(t.value.loadingBodyCss),
                 innerHTML: t.value.processedLoadingHtml
-              }, null, 10, Qt)) : d("", !0),
+              }, null, 10, Xt)) : d("", !0),
               t.value.state === "empty" ? (i(), u("div", {
                 key: 5,
                 class: l(v.value.bodyEmpty)
               }, R(t.value.emptySurveyText), 3)) : d("", !0)
             ], 2)
           ]),
-          t.value.showBrandInfo ? (i(), q(U, { key: 1 })) : d("", !0),
-          b(re, {
+          t.value.showBrandInfo ? (i(), q(K, { key: 1 })) : d("", !0),
+          C(ue, {
             model: t.value.notifier
           }, null, 8, ["model"])
         ], 2)
       ], 6);
     };
   }
-}), Gt = /* @__PURE__ */ h({
+}), Yt = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
@@ -4446,7 +4486,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         "aria-live": "polite"
       }, [
         c("span", null, R(o.model.message), 1),
-        b(n, {
+        C(n, {
           model: o.model.actionBar
         }, null, 8, ["model"])
       ], 6)), [
@@ -4454,7 +4494,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Jt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Xt = { key: 1 }, Yt = /* @__PURE__ */ h({
+}), Zt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], xt = { key: 1 }, ei = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4482,11 +4522,11 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
         onInput: o[1] || (o[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
-      }, null, 46, Jt)),
-      s.question.isReadOnlyRenderDiv() ? (i(), u("div", Xt, R(s.question.otherValue), 1)) : d("", !0)
+      }, null, 46, Zt)),
+      s.question.isReadOnlyRenderDiv() ? (i(), u("div", xt, R(s.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), Zt = ["disabled", "value", "title"], xt = /* @__PURE__ */ h({
+}), si = ["disabled", "value", "title"], ni = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4502,9 +4542,9 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: n[0] || (n[0] = (...t) => e.item.action && e.item.action(...t))
-    }, null, 42, Zt)) : d("", !0);
+    }, null, 42, si)) : d("", !0);
   }
-}), pe = /* @__PURE__ */ h({
+}), ye = /* @__PURE__ */ h({
   __name: "PopupSurvey",
   props: {
     survey: {},
@@ -4512,7 +4552,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const s = r, o = j(), e = w(() => s.survey ? s.survey.getCss() : {}), n = w(() => {
+    const s = r, o = z(), e = w(() => s.survey ? s.survey.getCss() : {}), n = w(() => {
       var I;
       return (I = o.value) != null && I.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
     }), t = w(() => {
@@ -4526,19 +4566,19 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       o.value.onScroll();
     };
     L(() => o.value);
-    const g = G(
+    const g = J(
       () => s.survey,
       (I) => {
-        const C = new He(null, I);
-        s.isExpanded !== void 0 && (C.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (C.closeOnCompleteTimeout = s.closeOnCompleteTimeout), C.isShowing = !0, o.value = C;
+        const b = new Ee(null, I);
+        s.isExpanded !== void 0 && (b.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (b.closeOnCompleteTimeout = s.closeOnCompleteTimeout), b.isShowing = !0, o.value = b;
       },
       {
         immediate: !0
       }
     );
-    return z(() => {
+    return U(() => {
       g();
-    }), (I, C) => {
+    }), (I, b) => {
       const N = p("survey-string"), k = p("sv-svg-icon");
       return o.value.isShowing ? (i(), u("div", {
         key: 0,
@@ -4559,7 +4599,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
               style: { "padding-right": "10px" },
               class: l(o.value.cssHeaderTitle)
             }, [
-              b(N, {
+              C(N, {
                 locString: I.survey.locTitle
               }, null, 8, ["locString"])
             ], 2),
@@ -4574,7 +4614,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             onClick: y,
             style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            b(k, {
+            C(k, {
               iconName: "icon-expanddetail",
               size: 16
             })
@@ -4585,7 +4625,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
             onClick: a,
             style: { float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            b(k, {
+            C(k, {
               iconName: "icon-collapsedetail",
               size: 16
             })
@@ -4601,7 +4641,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       ], 6)) : d("", !0);
     };
   }
-}), ei = ["innerHTML"], si = /* @__PURE__ */ h({
+}), oi = ["innerHTML"], ti = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -4615,7 +4655,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
     ), t = w(() => s.question.customWidget.htmlTemplate), a = w(() => "survey-" + s.question.getTemplate());
     return H(() => {
       s.question.customWidget.afterRender(s.question, o.value);
-    }), J(() => {
+    }), Q(() => {
       s.question.customWidget.willUnmount(s.question, o.value);
     }), (y, m) => (i(), u("div", {
       ref_key: "root",
@@ -4624,7 +4664,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       n.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, ei)) : d("", !0),
+      }, null, 8, oi)) : d("", !0),
       e.value ? (i(), q(T(a.value), {
         key: 1,
         question: y.question,
@@ -4632,12 +4672,12 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), ni = /* @__PURE__ */ h({
+}), ii = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(r) {
-    const s = j();
+    const s = z();
     function o(n, t, a, y, m, v, g = "popup") {
-      const I = We(
+      const I = Ve(
         n,
         t,
         a,
@@ -4654,27 +4694,27 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       n.onHide = () => {
         s.value = void 0, a.dispose();
       };
-      const a = Ee(
+      const a = Oe(
         n,
         t
       );
       return a.model.isVisible = !0, s.value = a, a;
     }
-    return K.showModal || (K.showModal = o, z(() => {
-      K.showModal = void 0;
-    })), K.showDialog || (K.showDialog = e, z(() => {
-      K.showDialog = void 0;
+    return j.showModal || (j.showModal = o, U(() => {
+      j.showModal = void 0;
+    })), j.showDialog || (j.showDialog = e, U(() => {
+      j.showDialog = void 0;
     })), (n, t) => {
       const a = p("sv-popup-container");
-      return s.value ? (i(), q(Se, {
+      return s.value ? (i(), q(Te, {
         key: 0,
         to: s.value.container
       }, [
-        b(a, { model: s.value }, null, 8, ["model"])
+        C(a, { model: s.value }, null, 8, ["model"])
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), oi = /* @__PURE__ */ h({
+}), ri = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4686,7 +4726,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       class: l(o.remainingCharacterCounter)
     }, R(o.counter.remainingCharacterCounter), 3));
   }
-}), ti = /* @__PURE__ */ h({
+}), li = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -4707,7 +4747,7 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       }, null, 8, ["element", "css"]);
     };
   }
-}), ii = /* @__PURE__ */ h({
+}), ai = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -4717,23 +4757,23 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
   setup(r) {
     const s = r, o = _(null);
     A(s, o);
-    const e = w(() => s.question.contentQuestion), n = (t) => te(t);
+    const e = w(() => s.question.contentQuestion), n = (t) => re(t);
     return (t, a) => (i(), q(T(n(e.value)), {
       ref: o.value,
       question: e.value,
       css: t.css
     }, null, 8, ["question", "css"]));
   }
-}), ri = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), li = [
-  ri
-], ve = 440, ai = /* @__PURE__ */ h({
+}), ui = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), di = [
+  ui
+], qe = 440, mi = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(r) {
-    const s = r, o = w(() => ve * s.model.progress), e = w(() => s.model.text);
+    const s = r, o = w(() => qe * s.model.progress), e = w(() => s.model.text);
     return L(() => s.model), (n, t) => n.model.isRunning && n.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
       class: l(n.model.rootCss)
@@ -4741,8 +4781,8 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       n.model.showProgress ? (i(), u("svg", {
         key: 0,
         class: l(n.model.getProgressCss()),
-        style: S({ strokeDasharray: ve, strokeDashoffset: o.value })
-      }, li, 6)) : d("", !0),
+        style: S({ strokeDasharray: qe, strokeDashoffset: o.value })
+      }, di, 6)) : d("", !0),
       c("div", {
         class: l(n.model.textContainerCss)
       }, [
@@ -4761,17 +4801,17 @@ const nt = /* @__PURE__ */ he(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use
       [M, n.model.isRunning && !n.model.showTimerAsClock]
     ]);
   }
-}), ui = {}, di = { class: "sd-loading-indicator" };
-function mi(r, s) {
+}), ci = {}, pi = { class: "sd-loading-indicator" };
+function vi(r, s) {
   const o = p("sv-svg-icon");
-  return i(), u("div", di, [
-    b(o, {
+  return i(), u("div", pi, [
+    C(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @__PURE__ */ h({
+const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -4803,16 +4843,16 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
             key: y
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        o.survey.isMobile ? (i(), u("div", pi, [
-          b(t, { model: o.model }, null, 8, ["model"])
+        o.survey.isMobile ? (i(), u("div", qi, [
+          C(t, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), yi = {
+}), hi = {
   key: 0,
   class: "sv-header__logo"
-}, qi = ["src", "width", "height", "alt"], gi = /* @__PURE__ */ h({
+}, Ci = ["src", "width", "height", "alt"], bi = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -4828,7 +4868,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           class: "sv-header__cell-content",
           style: S(s.model.contentStyle)
         }, [
-          s.model.showLogo ? (i(), u("div", yi, [
+          s.model.showLogo ? (i(), u("div", hi, [
             c("div", {
               class: l(s.model.survey.logoClassNames)
             }, [
@@ -4839,7 +4879,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
                 style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-              }, null, 14, qi)
+              }, null, 14, Ci)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
@@ -4847,7 +4887,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
             class: "sv-header__title",
             style: S({ maxWidth: s.model.textAreaWidth })
           }, [
-            b(e, {
+            C(e, {
               element: s.model.survey,
               css: s.model.survey.css
             }, null, 8, ["element", "css"])
@@ -4861,7 +4901,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
               key: 0,
               class: l(s.model.survey.css.description)
             }, [
-              b(n, {
+              C(n, {
                 locString: s.model.survey.locDescription
               }, null, 8, ["locString"])
             ], 2)) : d("", !0)
@@ -4870,10 +4910,10 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       ], 6);
     };
   }
-}), hi = { class: "sv-header--mobile" }, Ci = {
+}), ki = { class: "sv-header--mobile" }, fi = {
   key: 0,
   class: "sv-header__logo"
-}, bi = ["src", "width", "height", "alt"], ki = /* @__PURE__ */ h({
+}, Ii = ["src", "width", "height", "alt"], wi = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -4881,8 +4921,8 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
   setup(r) {
     return (s, o) => {
       const e = p("survey-element-title"), n = p("survey-string");
-      return i(), u("div", hi, [
-        s.model.survey.hasLogo ? (i(), u("div", Ci, [
+      return i(), u("div", ki, [
+        s.model.survey.hasLogo ? (i(), u("div", fi, [
           c("div", {
             class: l(s.model.survey.logoClassNames)
           }, [
@@ -4893,7 +4933,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
               style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-            }, null, 14, bi)
+            }, null, 14, Ii)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
@@ -4901,7 +4941,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           class: "sv-header__title",
           style: S({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
-          b(e, {
+          C(e, {
             element: s.model.survey,
             css: s.model.survey.css
           }, null, 8, ["element", "css"])
@@ -4915,7 +4955,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
             key: 0,
             class: l(s.model.survey.css.description)
           }, [
-            b(n, {
+            C(n, {
               locString: s.model.survey.locDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -4923,7 +4963,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       ]);
     };
   }
-}), fi = /* @__PURE__ */ h({
+}), Si = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -4964,17 +5004,17 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       }, null, 8, ["element", "css"])) : d("", !0)
     ], 6));
   }
-}), Ii = /* @__PURE__ */ h({
+}), Ri = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(r) {
-    const s = Re(), o = w(() => !!s.default);
-    return (e, n) => o.value && !e.componentName ? Te(e.$slots, "default", { key: 0 }) : (i(), q(T(e.componentName), F(W({ key: 1 }, e.componentData)), null, 16));
+    const s = $e(), o = w(() => !!s.default);
+    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), q(T(e.componentName), F(W({ key: 1 }, e.componentData)), null, 16));
   }
-}), wi = /* @__PURE__ */ h({
+}), Ti = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -4998,7 +5038,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       ], 2);
     };
   }
-}), Si = ["id"], Ri = /* @__PURE__ */ h({
+}), $i = ["id"], _i = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5009,10 +5049,10 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       return i(), u("div", {
         class: l(s.question.cssClasses.videoContainer)
       }, [
-        b(e, {
+        C(e, {
           item: s.question.changeCameraAction
         }, null, 8, ["item"]),
-        b(e, {
+        C(e, {
           item: s.question.closeCameraAction
         }, null, 8, ["item"]),
         c("video", {
@@ -5020,14 +5060,14 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           playsinline: "",
           id: s.question.videoId,
           class: l(s.question.cssClasses.video)
-        }, null, 10, Si),
-        b(e, {
+        }, null, 10, $i),
+        C(e, {
           item: s.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), Ti = ["for", "aria-label"], $i = /* @__PURE__ */ h({
+}), Di = ["for", "aria-label"], Bi = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -5055,12 +5095,12 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
         c("span", null, R(o.value.chooseButtonText), 1)
-      ], 10, Ti)), [
+      ], 10, Di)), [
         [a]
       ]);
     };
   }
-}), _i = ["onClick", "href", "title", "download"], Di = ["src"], Bi = ["onClick"], Li = ["onClick", "href", "title", "download"], Ni = /* @__PURE__ */ h({
+}), Li = ["onClick", "href", "title", "download"], Ni = ["src"], Pi = ["onClick"], Ai = ["onClick", "href", "title", "download"], Mi = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5086,7 +5126,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, _i)
+            }, R(n.name), 13, Li)
           ], 2)) : d("", !0),
           c("div", {
             class: l(s.question.getImageWrapperCss(n))
@@ -5099,7 +5139,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
                 width: s.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Di)) : d("", !0),
+            }, null, 12, Ni)) : d("", !0),
             s.question.defaultImage(n) ? (i(), q(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
@@ -5121,7 +5161,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
                 iconName: s.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, Bi)) : d("", !0)
+            ], 10, Pi)) : d("", !0)
           ], 2),
           n.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
@@ -5133,7 +5173,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, Li)
+            }, R(n.name), 13, Ai)
           ], 2)) : d("", !0)
         ], 2)), [
           [M, n && s.question.isPreviewVisible(t)]
@@ -5141,7 +5181,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       ], 2)) : d("", !0);
     };
   }
-}), Pi = /* @__PURE__ */ h({
+}), Hi = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -5165,7 +5205,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
       ], 2);
     };
   }
-}), Ai = ["title"], Mi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Hi = ["title"], Wi = /* @__PURE__ */ h({
+}), Wi = ["title"], Ei = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Vi = ["title"], Oi = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5174,7 +5214,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
   },
   setup(r) {
     const s = r, o = w(
-      () => new Ve(s.question, s.item, s.index)
+      () => new Fe(s.question, s.item, s.index)
     ), e = w({
       get: () => s.question.renderedValue,
       set: (n) => {
@@ -5202,7 +5242,7 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           class: l(o.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (m) => e.value = m),
           value: o.value.value
-        }, null, 10, Mi), [
+        }, null, 10, Ei), [
           [ee, e.value]
         ]),
         c("div", {
@@ -5219,22 +5259,22 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
             class: l(o.value.css.caption),
             title: o.value.caption.renderedHtml
           }, [
-            b(y, {
+            C(y, {
               locString: o.value.caption
             }, null, 8, ["locString"])
-          ], 10, Hi)) : d("", !0)
+          ], 10, Vi)) : d("", !0)
         ], 2)
-      ], 10, Ai);
+      ], 10, Wi);
     };
   }
-}), Ei = ["src", "width", "height", "alt"], Vi = /* @__PURE__ */ h({
+}), Fi = ["src", "width", "height", "alt"], zi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
     data: {}
   },
   setup(r) {
-    const s = r, o = w(() => s.data), e = Q(() => o.value.locLogo);
+    const s = r, o = w(() => s.data), e = G(() => o.value.locLogo);
     return (n, t) => (i(), u("div", {
       class: l(o.value.logoClassNames)
     }, [
@@ -5249,15 +5289,15 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
           width: o.value.renderedStyleLogoWidth,
           height: o.value.renderedStyleLogoHeight
         })
-      }, null, 14, Ei)
+      }, null, 14, Fi)
     ], 2));
   }
-}), Oi = /* @__PURE__ */ h({
+}), Ui = /* @__PURE__ */ h({
   __name: "SvgBundle",
   setup(r) {
     const s = _();
     return H(() => {
-      s.value.innerHTML = Oe.iconsRenderedHtml();
+      s.value.innerHTML = ze.iconsRenderedHtml();
     }), (o, e) => P((i(), u("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
@@ -5267,31 +5307,32 @@ const ci = /* @__PURE__ */ he(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @_
     ]);
   }
 });
-Fe.platform = "vue3";
-function Fi(r) {
-  r.component("SurveyComponent", ce), r.component("sv-svg-bundle", Oi), r.component("PopupSurveyComponent", pe), r.component("survey", ce), r.component("popup-survey", pe), r.component("survey-header", Qe), r.component("sv-logo-image", Vi), r.component("survey-page", je), r.component("survey-row", Ge), r.component("survey-question", Ye), r.component("survey-panel", ss), r.component("survey-element-header", ns), r.component("survey-string", os), r.component("sv-string-viewer", rs), r.component("sv-string-editor", as), r.component("sv-skeleton", ds), r.component("survey-text", ps), r.component("survey-text-input", gs), r.component("survey-checkbox", fs), r.component("survey-checkbox-item", Ss), r.component("survey-radiogroup", Rs), r.component("survey-radiogroup-item", _s), r.component("survey-signaturepad", Ns), r.component("survey-html", As), r.component("survey-image", Es), r.component("survey-expression", Vs), r.component("survey-file", zs), r.component("sv-file-choose-btn", $i), r.component("sv-file-clean-btn", wi), r.component("sv-file-preview", Ni), r.component("sv-file-video", Ri), r.component("survey-imagepicker", Ks), r.component("survey-imagepicker-item", Xs), r.component("survey-comment", xs), r.component("survey-dropdown", en), r.component("sv-dropdown-select", tn), r.component("sv-dropdown-option-item", ln), r.component("sv-dropdown", cn), r.component("survey-tagbox", pn), r.component("sv-tagbox", qn), r.component("sv-tagbox-item", kn), r.component("sv-tagbox-filter", Cn), r.component("survey-ranking", fn), r.component("survey-ranking-item", $n), r.component("survey-rating", Bn), r.component("sv-rating-item", Nn), r.component("sv-rating-item-smiley", An), r.component("sv-rating-item-star", Hn), r.component("sv-rating-dropdown", Fn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Un), r.component("sv-boolean-radio", Kn), r.component("sv-boolean-radio-item", Gn), r.component("sv-boolean-checkbox", xn), r.component("survey-multipletext", eo), r.component("survey-multipletext-item", no), r.component("survey-matrix", mo), r.component("survey-matrixdropdown", co), r.component("survey-matrixtable", qo), r.component("survey-matrixheaderrequired", ho), r.component("survey-matrixcell", bo), r.component("survey-matrixdynamic", ko), r.component("sv-matrix-remove-button", Io), r.component("sv-matrix-drag-drop-icon", So), r.component("sv-matrix-detail-button", To), r.component("survey-paneldynamic", $o), r.component("survey-paneldynamicprogress", _o), r.component("survey-paneldynamicprogress-v2", Do), r.component("sv-paneldynamic-add-btn", Bo), r.component("sv-paneldynamic-next-btn", No), r.component("sv-paneldynamic-prev-btn", Ao), r.component("sv-paneldynamic-remove-btn", Mo), r.component("sv-paneldynamic-progress-text", Ho), r.component("sv-components-container", Pt), r.component("sv-progress-buttons", Wt), r.component("sv-progress-toc", Et), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Eo), r.component("survey-question-comment", Fo), r.component("survey-element-title", zo), r.component("survey-element-title-content", Qo), r.component("sv-title-actions", Xo), r.component("sv-brand-info", nt), r.component("sv-svg-icon", it), r.component("sv-action-bar", rt), r.component("sv-action", ut), r.component("sv-action-bar-item", ct), r.component("sv-action-bar-item-dropdown", yt), r.component("sv-action-bar-separator", qt), r.component("sv-list", bt), r.component("sv-list-item", It), r.component("sv-popup", wt), r.component("sv-popup-container", Bt), r.component("popup-pointer", Lt), r.component("sv-notifier", Gt), r.component("survey-other-choice", Yt), r.component("sv-nav-btn", xt), r.component("survey-customwidget", si), r.component("survey-popup-modal", ni), r.component("sv-character-counter", oi), r.component("survey-composite", ti), r.component("survey-custom", ii), r.component("sv-timerpanel", ai), r.component("sv-loading-indicator", ci), r.component("sv-header", vi), r.component("sv-header-cell", gi), r.component("sv-header-mobile", ki), r.component("sv-template-renderer", Ii), r.component("survey-element", fi), r.component("survey-buttongroup", Pi), r.component("sv-button-group-item", Wi), r.directive("key2click", {
+Ue.platform = "vue3";
+function Ki(r) {
+  r.component("SurveyComponent", ve), r.component("sv-svg-bundle", Ui), r.component("PopupSurveyComponent", ye), r.component("survey", ve), r.component("popup-survey", ye), r.component("survey-header", Je), r.component("sv-logo-image", zi), r.component("survey-page", Ge), r.component("survey-row", Xe), r.component("survey-question", xe), r.component("survey-panel", os), r.component("survey-element-header", ts), r.component("survey-string", is), r.component("sv-string-viewer", as), r.component("sv-string-editor", ds), r.component("sv-skeleton", cs), r.component("survey-text", ys), r.component("survey-text-input", Cs), r.component("survey-checkbox", ws), r.component("survey-checkbox-item", Ts), r.component("survey-radiogroup", $s), r.component("survey-radiogroup-item", Bs), r.component("survey-signaturepad", As), r.component("survey-html", Hs), r.component("survey-image", Os), r.component("survey-expression", Fs), r.component("survey-file", Ks), r.component("sv-file-choose-btn", Bi), r.component("sv-file-clean-btn", Ti), r.component("sv-file-preview", Mi), r.component("sv-file-video", _i), r.component("survey-imagepicker", Qs), r.component("survey-imagepicker-item", Zs), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", ln), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", yn), r.component("sv-tagbox", hn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", Dn), r.component("survey-rating", Nn), r.component("sv-rating-item", An), r.component("sv-rating-item-smiley", Hn), r.component("sv-rating-item-star", En), r.component("sv-rating-dropdown", Un), r.component("sv-rating-dropdown-item", zn), r.component("survey-boolean", jn), r.component("sv-boolean-radio", Qn), r.component("sv-boolean-radio-item", Xn), r.component("sv-boolean-checkbox", so), r.component("survey-multipletext", no), r.component("survey-multipletext-item", to), r.component("survey-matrix", mo), r.component("survey-matrix-cell", vo), r.component("survey-matrixdropdown", yo), r.component("survey-matrixtable", Co), r.component("survey-matrixheaderrequired", ko), r.component("survey-matrixdropdown-cell", Io), r.component("survey-matrixdynamic", wo), r.component("sv-matrix-remove-button", Ro), r.component("sv-matrix-drag-drop-icon", $o), r.component("sv-matrix-detail-button", Do), r.component("survey-paneldynamic", Bo), r.component("survey-paneldynamicprogress", Lo), r.component("survey-paneldynamicprogress-v2", No), r.component("sv-paneldynamic-add-btn", Po), r.component("sv-paneldynamic-next-btn", Mo), r.component("sv-paneldynamic-prev-btn", Wo), r.component("sv-paneldynamic-remove-btn", Eo), r.component("sv-paneldynamic-progress-text", Vo), r.component("sv-components-container", Ht), r.component("sv-progress-buttons", Ot), r.component("sv-progress-toc", Ft), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Fo), r.component("survey-question-comment", Ko), r.component("survey-element-title", jo), r.component("survey-element-title-content", Xo), r.component("sv-title-actions", xo), r.component("sv-brand-info", it), r.component("sv-svg-icon", at), r.component("sv-action-bar", ut), r.component("sv-action", ct), r.component("sv-action-bar-item", yt), r.component("sv-action-bar-item-dropdown", ht), r.component("sv-action-bar-separator", Ct), r.component("sv-list", It), r.component("sv-list-item", Rt), r.component("sv-popup", Tt), r.component("sv-popup-container", Pt), r.component("popup-pointer", At), r.component("sv-notifier", Yt), r.component("survey-other-choice", ei), r.component("sv-nav-btn", ni), r.component("survey-customwidget", ti), r.component("survey-popup-modal", ii), r.component("sv-character-counter", ri), r.component("survey-composite", li), r.component("survey-custom", ai), r.component("sv-timerpanel", mi), r.component("sv-loading-indicator", yi), r.component("sv-header", gi), r.component("sv-header-cell", bi), r.component("sv-header-mobile", wi), r.component("sv-template-renderer", Ri), r.component("survey-element", Si), r.component("survey-buttongroup", Hi), r.component("sv-button-group-item", Oi), r.directive("key2click", {
     mounted: function(s, o) {
       const e = { ...o.value };
       if (e.disableTabStop) {
         s.tabIndex = -1;
         return;
       }
-      e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (n) => (n.preventDefault(), n.stopPropagation(), qe(n, e), !1)), s.addEventListener("keydown", (n) => {
-        ze(n, e);
+      e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (n) => (n.preventDefault(), n.stopPropagation(), ge(n, e), !1)), s.addEventListener("keydown", (n) => {
+        Ke(n, e);
       }), s.addEventListener("blur", (n) => {
-        Ue(n);
+        je(n);
       });
     }
   });
 }
-const Ki = {
+const Gi = {
   install(r) {
-    Fi(r);
+    Ki(r);
   }
 };
 export {
-  Ki as surveyPlugin,
+  Gi as surveyPlugin,
   L as useBase,
-  Q as useLocString,
+  le as useComputedArray,
+  G as useLocString,
   A as useQuestion
 };