survey-vue3-ui 2.0.2 → 2.0.4

package/survey-vue3-ui.es.js

@@ -1,9 +1,9 @@
 var Me = Object.defineProperty;
 var He = (u, e, n) => e in u ? Me(u, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : u[e] = n;
 var G = (u, e, n) => (He(u, typeof e != "symbol" ? e + "" : e, n), n);
-import { defineComponent as y, computed as b, openBlock as o, createBlock as c, resolveDynamicComponent as ve, normalizeProps as ae, guardReactiveProps as ue, createSlots as Ie, renderList as S, withCtx as E, renderSlot as ce, shallowReactive as Se, watch as F, onBeforeUnmount as z, onMounted as $, ref as f, shallowRef as W, watchEffect as Ve, triggerRef as ne, unref as L, isRef as Be, nextTick as ge, createElementBlock as l, normalizeClass as r, createVNode as h, createCommentVNode as m, Fragment as I, mergeProps as D, normalizeStyle as M, createElementVNode as v, onUnmounted as P, withDirectives as R, vShow as N, toDisplayString as H, vModelRadio as _, vModelCheckbox as te, vModelSelect as Re, onUpdated as j, vModelText as Te, getCurrentInstance as he, createStaticVNode as Ze, toRaw as $e, Teleport as De, useSlots as Ae } from "vue";
-import { Base as Ne, RendererFactory as x, Helpers as Pe, DropdownMultiSelectListModel as Ee, doKey2ClickUp as ye, createSvg as We, doKey2ClickDown as Fe, doKey2ClickBlur as ze, ActionDropdownViewModel as Oe, createPopupViewModel as Ue, SurveyProgressModel as de, ProgressButtonsResponsivityManager as Ke, addIconsToThemeSet as qe, SvgRegistry as X, PopupSurveyModel as je, settings as se, createPopupModalViewModel as Qe, ButtonGroupItemModel as Ge, SurveyModel as Je } from "survey-core";
-const Y = class Y {
+import { defineComponent as y, computed as f, openBlock as o, createBlock as c, resolveDynamicComponent as ce, normalizeProps as ue, guardReactiveProps as de, createSlots as Ie, renderList as S, withCtx as E, renderSlot as Y, shallowReactive as Se, watch as F, onBeforeUnmount as z, onMounted as Z, ref as b, shallowRef as W, watchEffect as Ve, triggerRef as te, unref as L, isRef as Be, nextTick as ge, createElementBlock as l, normalizeClass as r, createVNode as g, createCommentVNode as m, Fragment as I, mergeProps as D, normalizeStyle as M, createElementVNode as v, onUnmounted as P, withDirectives as R, vShow as N, toDisplayString as H, vModelRadio as x, vModelCheckbox as oe, vModelSelect as Re, onUpdated as j, vModelText as Te, getCurrentInstance as he, createStaticVNode as Ze, toRaw as $e, Teleport as De, useSlots as Ae } from "vue";
+import { Base as Ne, ScrollViewModel as Pe, RendererFactory as ee, Helpers as Ee, DropdownMultiSelectListModel as We, doKey2ClickUp as ye, createSvg as Fe, doKey2ClickDown as ze, doKey2ClickBlur as Oe, ActionDropdownViewModel as Ue, createPopupViewModel as Ke, SurveyProgressModel as me, ProgressButtonsResponsivityManager as je, addIconsToThemeSet as qe, SvgRegistry as X, PopupSurveyModel as Qe, settings as ne, createPopupModalViewModel as Ge, ButtonGroupItemModel as Je, SurveyModel as Xe } from "survey-core";
+const _ = class _ {
   constructor() {
     G(this, "creatorHash", {});
   }
@@ -23,8 +23,8 @@ const Y = class Y {
     return !!this.creatorHash[e];
   }
 };
-G(Y, "Instance", new Y());
-let K = Y;
+G(_, "Instance", new _());
+let K = _;
 const d = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "SvComponent",
@@ -32,21 +32,21 @@ const d = /* @__PURE__ */ y({
     is: {}
   },
   setup(u) {
-    const e = u, n = b(
+    const e = u, n = f(
       () => K.Instance.getComponent(e.is)
     );
-    return (s, i) => (o(), c(ve(n.value), ae(ue(s.$attrs)), Ie({ _: 2 }, [
+    return (s, i) => (o(), c(ce(n.value), ue(de(s.$attrs)), Ie({ _: 2 }, [
       S(s.$slots, (t, a) => ({
         name: a,
         fn: E((p) => [
-          ce(s.$slots, a, ae(ue(p)))
+          Y(s.$slots, a, ue(de(p)))
         ])
       }))
     ]), 1040));
   }
 });
 Ne.createPropertiesHash = () => Se({});
-class Xe {
+class Ye {
   constructor(e) {
     G(this, "currentNextTickPromise");
     this.element = e;
@@ -56,20 +56,20 @@ class Xe {
     this.currentNextTickPromise !== e && (this.currentNextTickPromise = e, await e, e == this.currentNextTickPromise && this.element.afterRerender());
   }
 }
-function Ye(u) {
+function _e(u) {
   if (u) {
     if (u.__vueImplemented = u.__vueImplemented ?? 0, u.__vueImplemented <= 0) {
-      const e = new Xe(u);
+      const e = new Ye(u);
       u.createArrayCoreHandler = (n, s) => {
         const i = [], t = W(i);
         return i.onArrayChanged = () => {
-          ne(t), e.add();
+          te(t), e.add();
         }, n[s] = t, L(n[s]);
       }, u.iteratePropertiesHash((n, s) => {
         if (Array.isArray(n[s])) {
           const i = W(n[s]);
           n[s].onArrayChanged = () => {
-            ne(i), e.add();
+            te(i), e.add();
           }, n[s] = i;
         }
       }), u.getPropertyValueCoreHandler = (n, s) => L(n[s]), u.setPropertyValueCoreHandler = (n, s, i) => {
@@ -79,10 +79,10 @@ function Ye(u) {
     u.enableOnElementRerenderedEvent(), u.__vueImplemented++;
   }
 }
-function _e(u) {
+function xe(u) {
   return !!u.__vueImplemented;
 }
-function me(u) {
+function pe(u) {
   u && (u.__vueImplemented = u.__vueImplemented ?? 0, u.__vueImplemented--, u.__vueImplemented <= 0 && (u.iteratePropertiesHash((e, n) => {
     e[n] = L(e[n]), Array.isArray(e[n]) && (e[n].onArrayChanged = void 0);
   }), delete u.__vueImplemented, u.disableOnElementRerenderedEvent(), u.createArrayCoreHandler = void 0, u.getPropertyValueCoreHandler = void 0, u.setPropertyValueCoreHandler = void 0));
@@ -91,7 +91,7 @@ function V(u, e, n) {
   const s = F(
     u,
     (t, a) => {
-      t && e && e(t, a), a && (me(a), n && n(a)), Ye(t);
+      t && e && e(t, a), a && (pe(a), n && n(a)), _e(t);
     },
     {
       immediate: !0
@@ -101,19 +101,19 @@ function V(u, e, n) {
   z(() => {
     if (!i) {
       const t = u();
-      t && (me(t), s(), n && n(t)), i = !0;
+      t && (pe(t), s(), n && n(t)), i = !0;
     }
   });
 }
 function T(u, e, n, s) {
-  V(() => u.question, n, s), $(() => {
+  V(() => u.question, n, s), Z(() => {
     u.question && u.question.afterRenderQuestionElement(e.value);
   }), z(() => {
     u.question.beforeDestroyQuestionElement(e.value);
   });
 }
 function O(u) {
-  const e = f(), n = (t) => {
+  const e = b(), n = (t) => {
     e.value = t.renderedHtml;
   }, s = (t) => {
     e.value = t.renderedHtml, t.onStringChanged.add(n);
@@ -129,18 +129,18 @@ function O(u) {
     t && t.onStringChanged.remove(n), i();
   }), e;
 }
-function oe(u) {
+function ie(u) {
   return u.customWidget ? "survey-customwidget" : u.isDefaultRendering && u.isDefaultRendering() || u.isPanel ? "survey-" + u.getTemplate() : u.getComponentName();
 }
-function ee(u) {
+function se(u) {
   const e = W(), n = Ve(() => {
-    e.value = u(), ne(e);
+    e.value = u(), te(e);
   });
   return z(() => {
     n();
   }), e;
 }
-const xe = /* @__PURE__ */ y({
+const es = /* @__PURE__ */ y({
   __name: "Page",
   props: {
     survey: {},
@@ -148,22 +148,22 @@ const xe = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = () => {
+    const e = u, n = b(null), s = () => {
       e.survey && n.value && e.survey.afterRenderPage(n.value);
-    }, i = b(() => e.page._showDescription);
+    }, i = f(() => e.page._showDescription);
     return V(
       () => e.page,
       () => {
         s();
       }
-    ), $(() => {
+    ), Z(() => {
       s();
     }), (t, a) => (o(), l("div", {
       class: r(t.page.cssRoot),
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "survey-element-title",
         element: t.page,
         css: t.css
@@ -172,12 +172,12 @@ const xe = /* @__PURE__ */ y({
         key: 0,
         class: r(t.page.cssClasses.page.description)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: t.page.locDescription
         }, null, 8, ["locString"])
       ], 2)) : m("", !0),
-      h(d, {
+      g(d, {
         is: "survey-errors",
         element: t.page
       }, null, 8, ["element"]),
@@ -188,7 +188,7 @@ const xe = /* @__PURE__ */ y({
         componentData: t.page.getSurvey().getRowWrapperComponentData(p)
       }), {
         default: E(() => [
-          h(d, {
+          g(d, {
             is: "survey-row",
             row: p,
             survey: t.survey,
@@ -199,14 +199,14 @@ const xe = /* @__PURE__ */ y({
       }, 1040, ["is"]))), 128))
     ], 2));
   }
-}), e1 = /* @__PURE__ */ y({
+}), ss = /* @__PURE__ */ y({
   __name: "Header",
   props: {
     survey: {}
   },
   setup(u) {
-    const e = u, n = f();
-    return $(() => {
+    const e = u, n = b();
+    return Z(() => {
       var s = n.value;
       s && e.survey && e.survey.afterRenderHeader(s);
     }), (s, i) => s.survey.renderedHasHeader ? (o(), l("div", {
@@ -225,7 +225,7 @@ const xe = /* @__PURE__ */ y({
         class: r(s.survey.css.headerText),
         style: M({ maxWidth: s.survey.titleMaxWidth })
       }, [
-        h(d, {
+        g(d, {
           is: "survey-element-title",
           element: s.survey,
           css: s.survey.css
@@ -234,7 +234,7 @@ const xe = /* @__PURE__ */ y({
           key: 0,
           class: r(s.survey.css.description)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: s.survey.locDescription
           }, null, 8, ["locString"])
@@ -250,7 +250,7 @@ const xe = /* @__PURE__ */ y({
       }, null, 2)
     ], 2)) : m("", !0);
   }
-}), s1 = /* @__PURE__ */ y({
+}), ns = /* @__PURE__ */ y({
   __name: "Row",
   props: {
     row: {},
@@ -258,16 +258,16 @@ const xe = /* @__PURE__ */ y({
     survey: {}
   },
   setup(u) {
-    const e = u, n = f();
+    const e = u, n = b();
     return V(
       () => e.row,
       (s, i) => {
         s.setRootElement(n.value), i && (s.isNeedRender = i.isNeedRender);
       },
       (s) => {
-        _e(s) || (s.setRootElement(void 0), s.stopLazyRendering(), s.isNeedRender = !s.isLazyRendering());
+        xe(s) || (s.setRootElement(void 0), s.stopLazyRendering(), s.isNeedRender = !s.isLazyRendering());
       }
-    ), $(() => {
+    ), Z(() => {
       if (e.row && (e.row.setRootElement(n.value), !e.row.isNeedRender)) {
         const s = n.value;
         setTimeout(() => {
@@ -288,10 +288,10 @@ const xe = /* @__PURE__ */ y({
       }, null, 8, ["row", "css", "element"]))), 128))
     ], 2));
   }
-}), n1 = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], t1 = ["id"], o1 = {
+}), ts = ["id", "role", "aria-required", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], os = ["id"], is = {
   inheritAttrs: !1
-}, i1 = /* @__PURE__ */ y({
-  ...o1,
+}, rs = /* @__PURE__ */ y({
+  ...is,
   __name: "Question",
   props: {
     survey: {},
@@ -299,33 +299,34 @@ const xe = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = b(() => e.element.showErrorOnTop), i = b(() => e.element.showErrorOnBottom), t = (k) => k.cssContent, a = () => e.element.getRootStyle();
+    const e = u, n = b(null), s = f(() => e.element.showErrorOnTop), i = f(() => e.element.showErrorOnBottom), t = (k) => k.cssContent, a = () => e.element.getRootStyle();
     V(() => e.element);
     const p = () => {
       n.value && e.element.afterRender(n.value);
-    }, g = F(
+    }, h = F(
       () => n.value,
       () => {
         p();
       }
-    ), C = b(() => e.element.customWidget ? "survey-customwidget" : e.element.isDefaultRendering() ? "survey-" + e.element.getTemplate() : e.element.getComponentName()), q = b(() => e.element.survey.getQuestionContentWrapperComponentName(e.element)), B = b(() => ({
+    ), C = f(() => e.element.customWidget ? "survey-customwidget" : e.element.isDefaultRendering() ? "survey-" + e.element.getTemplate() : e.element.getComponentName()), q = f(() => e.element.survey.getQuestionContentWrapperComponentName(e.element)), B = f(() => ({
       componentData: {
         question: e.element,
         data: e.element.survey.getElementWrapperComponentData(e.element)
       }
     }));
     return P(() => {
-      g();
-    }), (k, Z) => (o(), l("div", {
+      h();
+    }), (k, $) => (o(), l("div", {
       class: r(k.element.getRootCss()),
       style: M(a()),
       ref_key: "root",
       ref: n,
-      onFocusin: Z[0] || (Z[0] = (w) => k.element.focusIn()),
+      onFocusin: $[0] || ($[0] = (w) => k.element.focusIn()),
       id: k.element.id,
       role: k.element.ariaRole,
       "aria-required": k.element.ariaRequired,
       "aria-invalid": k.element.ariaInvalid,
+      "aria-label": k.element.ariaLabel,
       "aria-labelledby": k.element.ariaLabelledBy,
       "aria-describedby": k.element.ariaDescribedBy,
       "aria-expanded": k.element.ariaExpanded,
@@ -343,7 +344,7 @@ const xe = /* @__PURE__ */ y({
         element: k.element,
         css: k.css
       }, null, 8, ["element", "css"])) : m("", !0),
-      h(d, D({ is: q.value }, B.value), {
+      g(d, D({ is: q.value }, B.value), {
         default: E(() => [
           v("div", {
             class: r(t(k.element) || void 0),
@@ -356,7 +357,7 @@ const xe = /* @__PURE__ */ y({
               element: k.element,
               location: "top"
             }, null, 8, ["element"])) : m("", !0),
-            h(d, {
+            g(d, {
               is: C.value,
               question: k.element
             }, null, 8, ["is", "question"]),
@@ -365,12 +366,12 @@ const xe = /* @__PURE__ */ y({
               class: r(k.element.getCommentAreaCss())
             }, [
               v("div", null, [
-                h(d, {
+                g(d, {
                   is: "survey-string",
                   locString: k.element.locCommentText
                 }, null, 8, ["locString"])
               ]),
-              h(d, {
+              g(d, {
                 is: "survey-question-comment",
                 question: k.element
               }, null, 8, ["question"])
@@ -386,11 +387,11 @@ const xe = /* @__PURE__ */ y({
               class: r(k.element.cssDescription),
               id: k.element.ariaDescriptionId
             }, [
-              h(d, {
+              g(d, {
                 is: "survey-string",
                 locString: k.element.locDescription
               }, null, 8, ["locString"])
-            ], 10, t1)) : m("", !0)
+            ], 10, os)) : m("", !0)
           ], 6)
         ]),
         _: 1
@@ -407,12 +408,12 @@ const xe = /* @__PURE__ */ y({
         element: k.element,
         location: "bottom"
       }, null, 8, ["element"])) : m("", !0)
-    ], 46, n1));
+    ], 46, ts));
   }
-}), r1 = ["id"], l1 = ["id"], a1 = {
+}), ls = ["id"], as = ["id"], us = {
   inheritAttrs: !1
-}, u1 = /* @__PURE__ */ y({
-  ...a1,
+}, ds = /* @__PURE__ */ y({
+  ...us,
   inheritAttrs: !1,
   __name: "Panel",
   props: {
@@ -421,8 +422,8 @@ const xe = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = b(() => e.element.survey);
-    return V(() => e.element), $(() => {
+    const e = u, n = b(null), s = f(() => e.element.survey);
+    return V(() => e.element), Z(() => {
       e.element.survey && e.element.afterRender(n.value);
     }), (i, t) => i.element.getIsContentVisible() ? (o(), l("div", {
       key: 0,
@@ -461,7 +462,7 @@ const xe = /* @__PURE__ */ y({
           componentData: i.element.getSurvey().getRowWrapperComponentData(a)
         }), {
           default: E(() => [
-            h(d, {
+            g(d, {
               is: "survey-row",
               row: a,
               survey: s.value,
@@ -470,14 +471,14 @@ const xe = /* @__PURE__ */ y({
           ]),
           _: 2
         }, 1040, ["is"]))), 128)),
-        h(d, {
+        g(d, {
           is: "sv-action-bar",
           model: i.element.getFooterToolbar()
         }, null, 8, ["model"])
-      ], 14, l1)) : m("", !0)
-    ], 42, r1)) : m("", !0);
+      ], 14, as)) : m("", !0)
+    ], 42, ls)) : m("", !0);
   }
-}), d1 = ["id"], m1 = /* @__PURE__ */ y({
+}), ms = ["id"], ps = /* @__PURE__ */ y({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -495,7 +496,7 @@ const xe = /* @__PURE__ */ y({
       onClick: n,
       style: M(s())
     }, [
-      h(d, {
+      g(d, {
         is: "survey-element-title",
         element: i.element,
         css: i.css
@@ -505,11 +506,11 @@ const xe = /* @__PURE__ */ y({
         class: r(i.element.cssDescription),
         id: i.element.ariaDescriptionId
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: i.element.locDescription
         }, null, 8, ["locString"])
-      ], 10, d1)), [
+      ], 10, ms)), [
         [N, i.element.hasDescription]
       ]) : m("", !0),
       i.element.hasAdditionalTitleToolbar ? (o(), c(d, {
@@ -519,7 +520,7 @@ const xe = /* @__PURE__ */ y({
       }, null, 8, ["model"])) : m("", !0)
     ], 6));
   }
-}), p1 = /* @__PURE__ */ y({
+}), Cs = /* @__PURE__ */ y({
   __name: "String",
   props: {
     locString: {}
@@ -530,7 +531,7 @@ const xe = /* @__PURE__ */ y({
       locString: e.locString.renderAsData
     }, null, 8, ["is", "locString"]));
   }
-}), C1 = ["innerHTML"], v1 = /* @__PURE__ */ y({
+}), vs = ["innerHTML"], cs = /* @__PURE__ */ y({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -541,12 +542,12 @@ const xe = /* @__PURE__ */ y({
       key: 0,
       class: r(L(s)),
       innerHTML: L(n)
-    }, null, 10, C1)) : (o(), l("span", {
+    }, null, 10, vs)) : (o(), l("span", {
       key: 1,
       class: r(L(s))
     }, H(L(n)), 3));
   }
-}), c1 = ["innerHTML"], g1 = /* @__PURE__ */ y({
+}), gs = ["innerHTML"], hs = /* @__PURE__ */ y({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -565,7 +566,7 @@ const xe = /* @__PURE__ */ y({
       innerHTML: i.locString.renderedHtml,
       onBlur: n,
       onClick: s
-    }, null, 40, c1)) : (o(), l("span", {
+    }, null, 40, gs)) : (o(), l("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
@@ -573,7 +574,7 @@ const xe = /* @__PURE__ */ y({
       onClick: s
     }, H(i.locString.renderedHtml), 33));
   }
-}), h1 = ["id"], y1 = /* @__PURE__ */ y({
+}), ys = ["id"], qs = /* @__PURE__ */ y({
   __name: "Skeleton",
   props: {
     element: {}
@@ -584,16 +585,49 @@ const xe = /* @__PURE__ */ y({
       class: "sv-skeleton-element",
       id: n.element.id,
       style: M({ height: n.element.skeletonHeight })
-    }, null, 12, h1));
+    }, null, 12, ys));
   }
-}), q1 = ["id"], w1 = ["value"], L1 = /* @__PURE__ */ y({
+}), ws = { class: "sv-scroll__container" }, Ls = /* @__PURE__ */ v("div", { class: "sv-scroll__scrollbar-sizer" }, null, -1), ks = [
+  Ls
+], bs = /* @__PURE__ */ y({
+  __name: "Scroll",
+  props: {
+    disabled: {}
+  },
+  setup(u) {
+    const e = u, n = new Pe(), s = b();
+    return Z(() => {
+      n.setRootElement(s.value);
+    }), P(() => {
+      n.setRootElement(void 0), n.unsubscribeRootElement();
+    }), (i, t) => e.disabled ? Y(i.$slots, "default", { key: 0 }) : (o(), l("div", {
+      key: 1,
+      ref_key: "root",
+      ref: s,
+      class: "sv-scroll__wrapper"
+    }, [
+      v("div", {
+        class: "sv-scroll__scroller sv-drag-target-skipped",
+        onScroll: t[0] || (t[0] = () => L(n).onScrollContainer())
+      }, [
+        v("div", ws, [
+          Y(i.$slots, "default")
+        ])
+      ], 32),
+      v("div", {
+        class: "sv-scroll__scrollbar",
+        onScroll: t[1] || (t[1] = () => L(n).onScrollScrollbar())
+      }, ks, 32)
+    ], 512));
+  }
+}), fs = ["id"], Ms = ["value"], Hs = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Text",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => s.question.isReadOnlyRenderDiv() ? (o(), l("div", {
       key: 0,
       ref_key: "root",
@@ -603,7 +637,7 @@ const xe = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "survey-text-input",
         question: s.question
       }, null, 8, ["question"]),
@@ -613,8 +647,8 @@ const xe = /* @__PURE__ */ y({
         (o(!0), l(I, null, S(s.question.dataList, (t, a) => (o(), l("option", {
           key: a,
           value: t
-        }, null, 8, w1))), 128))
-      ], 8, q1)
+        }, null, 8, Ms))), 128))
+      ], 8, fs)
     ], 512)) : (o(), c(d, {
       key: 2,
       is: "survey-text-input",
@@ -624,7 +658,7 @@ const xe = /* @__PURE__ */ y({
       }
     }, null, 8, ["question", "get-ref"]));
   }
-}), k1 = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], f1 = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], b1 = /* @__PURE__ */ y({
+}), Is = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Ss = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Vs = /* @__PURE__ */ y({
   __name: "TextInput",
   props: {
     question: {},
@@ -633,12 +667,12 @@ const xe = /* @__PURE__ */ y({
   setup(u, { expose: e }) {
     const n = u, s = function(a) {
       n.getRef && n.getRef(a);
-    }, i = f(null);
+    }, i = b(null);
     e({ root: i }), V(() => n.question);
-    const t = b(() => n.question.inputStyle);
+    const t = f(() => n.question.inputStyle);
     return (a, p) => a.question.getMaxLength() ? (o(), l("div", {
       key: 1,
-      ref: (g) => s(g)
+      ref: (h) => s(h)
     }, [
       v("input", {
         disabled: a.question.isDisabledAttr,
@@ -657,32 +691,32 @@ const xe = /* @__PURE__ */ y({
         autocomplete: a.question.autocomplete,
         value: a.question.inputValue,
         onChange: p[6] || (p[6] = //@ts-ignore
-        (...g) => a.question.onChange && a.question.onChange(...g)),
+        (...h) => a.question.onChange && a.question.onChange(...h)),
         onKeyup: p[7] || (p[7] = //@ts-ignore
-        (...g) => a.question.onKeyUp && a.question.onKeyUp(...g)),
+        (...h) => a.question.onKeyUp && a.question.onKeyUp(...h)),
         onKeydown: p[8] || (p[8] = //@ts-ignore
-        (...g) => a.question.onKeyDown && a.question.onKeyDown(...g)),
+        (...h) => a.question.onKeyDown && a.question.onKeyDown(...h)),
         onCompositionUpdate: p[9] || (p[9] = //@ts-ignore
-        (...g) => a.question.onCompositionUpdate && a.question.onCompositionUpdate(...g)),
+        (...h) => a.question.onCompositionUpdate && a.question.onCompositionUpdate(...h)),
         onBlur: p[10] || (p[10] = //@ts-ignore
-        (...g) => a.question.onBlur && a.question.onBlur(...g)),
+        (...h) => a.question.onBlur && a.question.onBlur(...h)),
         onFocus: p[11] || (p[11] = //@ts-ignore
-        (...g) => a.question.onFocus && a.question.onFocus(...g)),
+        (...h) => a.question.onFocus && a.question.onFocus(...h)),
         "aria-required": a.question.a11y_input_ariaRequired,
         "aria-label": a.question.a11y_input_ariaLabel,
         "aria-labelledby": a.question.a11y_input_ariaLabelledBy,
         "aria-describedby": a.question.a11y_input_ariaDescribedBy,
         "aria-invalid": a.question.a11y_input_ariaInvalid,
         "aria-errormessage": a.question.a11y_input_ariaErrormessage
-      }, null, 46, f1),
-      h(d, {
+      }, null, 46, Ss),
+      g(d, {
         is: "sv-character-counter",
         counter: a.question.characterCounter,
         remainingCharacterCounter: a.question.cssClasses.remainingCharacterCounter
       }, null, 8, ["counter", "remainingCharacterCounter"])
     ], 512)) : (o(), l("input", {
       key: 0,
-      ref: (g) => s(g),
+      ref: (h) => s(h),
       disabled: a.question.isDisabledAttr,
       readonly: a.question.isReadOnlyAttr,
       class: r(a.question.getControlClass()),
@@ -699,29 +733,29 @@ const xe = /* @__PURE__ */ y({
       autocomplete: a.question.autocomplete,
       value: a.question.inputValue,
       onChange: p[0] || (p[0] = //@ts-ignore
-      (...g) => a.question.onChange && a.question.onChange(...g)),
+      (...h) => a.question.onChange && a.question.onChange(...h)),
       onKeyup: p[1] || (p[1] = //@ts-ignore
-      (...g) => a.question.onKeyUp && a.question.onKeyUp(...g)),
+      (...h) => a.question.onKeyUp && a.question.onKeyUp(...h)),
       onKeydown: p[2] || (p[2] = //@ts-ignore
-      (...g) => a.question.onKeyDown && a.question.onKeyDown(...g)),
+      (...h) => a.question.onKeyDown && a.question.onKeyDown(...h)),
       onCompositionUpdate: p[3] || (p[3] = //@ts-ignore
-      (...g) => a.question.onCompositionUpdate && a.question.onCompositionUpdate(...g)),
+      (...h) => a.question.onCompositionUpdate && a.question.onCompositionUpdate(...h)),
       onBlur: p[4] || (p[4] = //@ts-ignore
-      (...g) => a.question.onBlur && a.question.onBlur(...g)),
+      (...h) => a.question.onBlur && a.question.onBlur(...h)),
       onFocus: p[5] || (p[5] = //@ts-ignore
-      (...g) => a.question.onFocus && a.question.onFocus(...g)),
+      (...h) => a.question.onFocus && a.question.onFocus(...h)),
       "aria-required": a.question.a11y_input_ariaRequired,
       "aria-label": a.question.a11y_input_ariaLabel,
       "aria-labelledby": a.question.a11y_input_ariaLabelledBy,
       "aria-describedby": a.question.a11y_input_ariaDescribedBy,
       "aria-invalid": a.question.a11y_input_ariaInvalid,
       "aria-errormessage": a.question.a11y_input_ariaErrormessage
-    }, null, 46, k1));
+    }, null, 46, Is));
   }
-}), M1 = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], H1 = {
+}), Bs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Rs = {
   key: 0,
   class: "sv-hidden"
-}, I1 = { key: 7 }, S1 = ["value"], we = /* @__PURE__ */ y({
+}, Ts = { key: 7 }, Zs = ["value"], we = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "SelectBase",
   props: {
@@ -729,7 +763,7 @@ const xe = /* @__PURE__ */ y({
     showLegend: { type: Boolean }
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = (t) => e.question.getItemValueWrapperComponentName(t) || e.question.itemComponent, i = (t) => ({
       componentName: e.question.itemComponent,
@@ -751,7 +785,7 @@ const xe = /* @__PURE__ */ y({
       "aria-invalid": t.question.a11y_input_ariaInvalid,
       "aria-errormessage": t.question.a11y_input_ariaErrormessage
     }, [
-      t.showLegend ? (o(), l("legend", H1, H(t.question.locTitle.renderedHtml), 1)) : m("", !0),
+      t.showLegend ? (o(), l("legend", Rs, H(t.question.locTitle.renderedHtml), 1)) : m("", !0),
       t.question.hasHeadItems ? (o(!0), l(I, { key: 1 }, S(t.question.headItems, (p) => (o(), c(d, D({
         key: p.value,
         is: s(p)
@@ -773,8 +807,8 @@ const xe = /* @__PURE__ */ y({
         key: 4,
         class: r(t.question.cssClasses.rootMultiColumn)
       }, [
-        t.question.hasColumns ? (o(!0), l(I, { key: 0 }, S(t.question.columns, (p, g) => (o(), l("div", {
-          key: g,
+        t.question.hasColumns ? (o(!0), l(I, { key: 0 }, S(t.question.columns, (p, h) => (o(), l("div", {
+          key: h,
           class: r(t.question.getColumnClass()),
           role: "presentation"
         }, [
@@ -793,7 +827,7 @@ const xe = /* @__PURE__ */ y({
         is: "survey-other-choice",
         question: t.question
       }, null, 8, ["question"])) : m("", !0),
-      t.question.showClearButtonInContent ? (o(), l("div", I1, [
+      t.question.showClearButtonInContent ? (o(), l("div", Ts, [
         v("input", {
           type: "button",
           class: r(t.question.cssClasses.clearButton),
@@ -801,11 +835,11 @@ const xe = /* @__PURE__ */ y({
             t.question.clearValue(!0);
           }),
           value: t.question.clearButtonCaption
-        }, null, 10, S1)
+        }, null, 10, Zs)
       ])) : m("", !0)
-    ], 10, M1));
+    ], 10, Bs));
   }
-}), V1 = /* @__PURE__ */ y({
+}), $s = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
@@ -819,7 +853,7 @@ const xe = /* @__PURE__ */ y({
   }
 });
 function Le(u, e, n) {
-  $(() => {
+  Z(() => {
     n.value && (e().isDesignMode || u().setRootElement(n.value));
   }), P(() => {
     e().isDesignMode || u().setRootElement(void 0);
@@ -827,7 +861,7 @@ function Le(u, e, n) {
     e().isDesignMode || (s && n.value && s.setRootElement(n.value), i && i.setRootElement(void 0));
   });
 }
-const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"], R1 = ["xlink:href"], T1 = /* @__PURE__ */ y({
+const Ds = ["name", "checked", "value", "id", "disabled", "readonly", "required"], As = ["xlink:href"], Ns = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "CheckboxItem",
   props: {
@@ -836,7 +870,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     hideLabel: { type: Boolean }
   },
   setup(u) {
-    const e = f(), n = u;
+    const e = b(), n = u;
     Le(
       () => n.item,
       () => n.question,
@@ -867,7 +901,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           readonly: i.question.isReadOnlyAttr,
           class: r(i.question.cssClasses.itemControl),
           required: i.question.hasRequiredError()
-        }, null, 42, B1),
+        }, null, 42, Ds),
         i.question.cssClasses.materialDecorator ? (o(), l("span", {
           key: 0,
           class: r(i.question.cssClasses.materialDecorator)
@@ -878,14 +912,14 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           }, [
             v("use", {
               "xlink:href": i.question.itemSvgIcon
-            }, null, 8, R1)
+            }, null, 8, As)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         i.hideLabel ? m("", !0) : (o(), l("span", {
           key: 1,
           class: r(i.question.cssClasses.controlLabel)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.item.locText
           }, null, 8, ["locString"])
@@ -893,7 +927,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)
     ], 2));
   }
-}), Z1 = /* @__PURE__ */ y({
+}), Ps = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Radiogroup",
   props: {
@@ -902,7 +936,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
   setup(u) {
     return (e, n) => (o(), c(we, { question: e.question }, null, 8, ["question"]));
   }
-}), $1 = ["name", "value", "id", "aria-errormessage", "disabled", "readonly"], D1 = ["xlink:href"], A1 = /* @__PURE__ */ y({
+}), Es = ["name", "value", "id", "aria-errormessage", "disabled", "readonly"], Ws = ["xlink:href"], Fs = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "RadiogroupItem",
   props: {
@@ -911,7 +945,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     hideLabel: { type: Boolean }
   },
   setup(u) {
-    const e = f(), n = u, s = (a) => n.question.getLabelClass(a), i = (a) => n.question.getControlLabelClass(a), t = b({
+    const e = b(), n = u, s = (a) => n.question.getLabelClass(a), i = (a) => n.question.getControlLabelClass(a), t = f({
       get: () => n.question.renderedValue,
       set: (a) => {
         const p = n.question;
@@ -929,7 +963,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref: e
     }, [
       v("label", {
-        onMousedown: p[1] || (p[1] = (g) => a.question.onMouseDown()),
+        onMousedown: p[1] || (p[1] = (h) => a.question.onMouseDown()),
         class: r(s(a.item))
       }, [
         R(v("input", {
@@ -938,12 +972,12 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           value: a.item.value,
           id: a.question.getItemId(a.item),
           "aria-errormessage": a.question.ariaErrormessage,
-          "onUpdate:modelValue": p[0] || (p[0] = (g) => t.value = g),
+          "onUpdate:modelValue": p[0] || (p[0] = (h) => t.value = h),
           disabled: !a.question.getItemEnabled(a.item),
           readonly: a.question.isReadOnlyAttr,
           class: r(a.question.cssClasses.itemControl)
-        }, null, 10, $1), [
-          [_, t.value]
+        }, null, 10, Es), [
+          [x, t.value]
         ]),
         a.question.cssClasses.materialDecorator ? (o(), l("span", {
           key: 0,
@@ -955,14 +989,14 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           }, [
             v("use", {
               "xlink:href": a.question.itemSvgIcon
-            }, null, 8, D1)
+            }, null, 8, Ws)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         a.hideLabel ? m("", !0) : (o(), l("span", {
           key: 1,
           class: r(i(a.item))
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: a.item.locText
           }, null, 8, ["locString"])
@@ -970,14 +1004,14 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 34)
     ], 2));
   }
-}), N1 = ["src"], P1 = ["title"], E1 = { key: 0 }, W1 = /* @__PURE__ */ y({
+}), zs = ["src"], Os = ["title"], Us = { key: 0 }, Ks = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Signaturepad",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.cssClasses.root),
       ref_key: "root",
@@ -989,7 +1023,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       R(v("div", {
         class: r(s.question.cssClasses.placeholder)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: s.question.locRenderedPlaceholder
         }, null, 8, ["locString"])
@@ -1004,7 +1038,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           style: M({
             width: s.question.renderedCanvasWidth
           })
-        }, null, 14, N1)) : m("", !0),
+        }, null, 14, zs)) : m("", !0),
         v("canvas", {
           tabindex: "-1",
           class: r(s.question.cssClasses.canvas),
@@ -1024,31 +1058,31 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             s.question.clearValue(!0);
           })
         }, [
-          s.question.cssClasses.clearButtonIconId ? m("", !0) : (o(), l("span", E1, "✖")),
+          s.question.cssClasses.clearButtonIconId ? m("", !0) : (o(), l("span", Us, "✖")),
           s.question.cssClasses.clearButtonIconId ? (o(), c(d, {
             key: 1,
             is: "sv-svg-icon",
             iconName: s.question.cssClasses.clearButtonIconId,
             size: "auto"
           }, null, 8, ["iconName"])) : m("", !0)
-        ], 10, P1)
+        ], 10, Os)
       ], 2)) : m("", !0),
       s.question.showLoadingIndicator ? (o(), l("div", {
         key: 1,
         class: r(s.question.cssClasses.loadingIndicator)
       }, [
-        h(d, { is: "sv-loading-indicator" })
+        g(d, { is: "sv-loading-indicator" })
       ], 2)) : m("", !0)
     ], 6));
   }
-}), F1 = ["innerHTML"], z1 = /* @__PURE__ */ y({
+}), js = ["innerHTML"], Qs = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Html",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = O(() => e.question.locHtml);
     return (i, t) => (o(), l("div", {
@@ -1056,16 +1090,16 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref: n,
       class: r(i.question.renderCssRoot),
       innerHTML: L(s)
-    }, null, 10, F1));
+    }, null, 10, js));
   }
-}), O1 = ["src", "alt", "width", "height"], U1 = ["src", "width", "height"], K1 = ["src", "width", "height"], j1 = /* @__PURE__ */ y({
+}), Gs = ["src", "alt", "width", "height"], Js = ["src", "width", "height"], Xs = ["src", "width", "height"], Ys = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Image",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = O(() => e.question.locImageLink);
     return (i, t) => (o(), l("div", {
@@ -1091,7 +1125,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         onError: t[1] || (t[1] = (a) => {
           i.question.onErrorHandler();
         })
-      }, null, 46, O1)), [
+      }, null, 46, Gs)), [
         [N, L(s) && !i.question.contentNotLoaded]
       ]) : m("", !0),
       i.question.renderedMode === "video" ? R((o(), l("video", {
@@ -1112,7 +1146,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         onError: t[3] || (t[3] = (a) => {
           i.question.onErrorHandler();
         })
-      }, null, 46, U1)), [
+      }, null, 46, Js)), [
         [N, L(s) && !i.question.contentNotLoaded]
       ]) : m("", !0),
       i.question.renderedMode === "youtube" ? (o(), l("iframe", {
@@ -1126,12 +1160,12 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           width: i.question.renderedStyleWidth,
           height: i.question.renderedStyleHeight
         })
-      }, null, 14, K1)) : m("", !0),
+      }, null, 14, Xs)) : m("", !0),
       !L(s) || i.question.contentNotLoaded ? (o(), l("div", {
         key: 3,
         class: r(i.question.cssClasses.noImage)
       }, [
-        h(d, {
+        g(d, {
           is: "sv-svg-icon",
           iconName: i.question.cssClasses.noImageSvgIconId,
           size: 48
@@ -1139,28 +1173,28 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)) : m("", !0)
     ], 2));
   }
-}), Q1 = /* @__PURE__ */ y({
+}), _s = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Expression",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.cssClasses.root),
       ref_key: "root",
       ref: n
     }, H(s.question.formatedValue), 3));
   }
-}), G1 = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], J1 = ["id", "multiple", "placeholder"], X1 = ["id", "multiple", "placeholder"], Y1 = /* @__PURE__ */ y({
+}), xs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], e1 = ["id", "multiple", "placeholder"], s1 = ["id", "multiple", "placeholder"], n1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "File",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.fileRootCss),
       ref_key: "root",
@@ -1180,7 +1214,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         title: s.question.inputTitle,
         accept: s.question.acceptedTypes,
         capture: s.question.renderCapture
-      }, null, 10, G1)) : m("", !0),
+      }, null, 10, xs)) : m("", !0),
       s.question.isReadOnlyAttr ? (o(), l("input", {
         key: 1,
         type: "file",
@@ -1190,7 +1224,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         multiple: s.question.allowMultiple,
         placeholder: s.question.title,
         style: { color: "transparent" }
-      }, null, 10, J1)) : m("", !0),
+      }, null, 10, e1)) : m("", !0),
       s.question.isDisabledAttr ? (o(), l("input", {
         key: 2,
         type: "file",
@@ -1200,7 +1234,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         multiple: s.question.allowMultiple,
         placeholder: s.question.title,
         style: { color: "transparent" }
-      }, null, 10, X1)) : m("", !0),
+      }, null, 10, s1)) : m("", !0),
       v("div", {
         class: r(s.question.cssClasses.dragArea),
         onDrop: i[0] || (i[0] = //@ts-ignore
@@ -1219,7 +1253,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           v("span", {
             class: r(s.question.cssClasses.dragAreaPlaceholder)
           }, [
-            h(d, {
+            g(d, {
               is: "survey-string",
               locString: s.question.locRenderedPlaceholder
             }, null, 8, ["locString"])
@@ -1253,7 +1287,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           key: 2,
           class: r(s.question.cssClasses.loadingIndicator)
         }, [
-          h(d, { is: "sv-loading-indicator" })
+          g(d, { is: "sv-loading-indicator" })
         ], 2)) : m("", !0),
         s.question.isPlayingVideo ? (o(), c(d, {
           key: 3,
@@ -1279,17 +1313,17 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 34)
     ], 2));
   }
-}), _1 = { class: "sv-hidden" }, pe = "survey-imagepicker-item", x1 = /* @__PURE__ */ y({
+}), t1 = { class: "sv-hidden" }, Ce = "survey-imagepicker-item", o1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Imagepicker",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
-    const s = (t) => e.question.getItemValueWrapperComponentName(t) || pe, i = (t) => ({
-      componentName: pe,
+    const s = (t) => e.question.getItemValueWrapperComponentName(t) || Ce, i = (t) => ({
+      componentName: Ce,
       componentData: {
         question: e.question,
         item: t,
@@ -1302,14 +1336,14 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref_key: "root",
       ref: n
     }, [
-      v("legend", _1, H(t.question.locTitle.renderedHtml), 1),
+      v("legend", t1, H(t.question.locTitle.renderedHtml), 1),
       t.question.hasColumns ? m("", !0) : (o(!0), l(I, { key: 0 }, S(t.question.visibleChoices, (p) => (o(), c(d, D({
         key: p.value,
         is: s(p)
       }, i(p)), null, 16, ["is"]))), 128)),
-      t.question.hasColumns ? (o(!0), l(I, { key: 1 }, S(t.question.columns, (p, g) => (o(), l("div", {
+      t.question.hasColumns ? (o(!0), l(I, { key: 1 }, S(t.question.columns, (p, h) => (o(), l("div", {
         class: r(t.question.getColumnClass()),
-        key: g,
+        key: h,
         role: "presentation"
       }, [
         (o(!0), l(I, null, S(p, (C) => (o(), c(d, D({
@@ -1319,7 +1353,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2))), 128)) : m("", !0)
     ], 6));
   }
-}), es = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], ss = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], ns = ["src", "width", "height", "alt"], ts = ["src", "width", "height"], os = /* @__PURE__ */ y({
+}), i1 = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], r1 = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], l1 = ["src", "width", "height", "alt"], a1 = ["src", "width", "height"], u1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "ImagepickerItem",
   props: {
@@ -1327,7 +1361,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     item: {}
   },
   setup(u) {
-    const e = u, n = (t) => e.question.getItemClass(t), s = b({
+    const e = u, n = (t) => e.question.getItemClass(t), s = f({
       get() {
         return e.question.value;
       },
@@ -1358,8 +1392,8 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           "aria-invalid": t.question.ariaInvalid,
           "aria-errormessage": t.question.ariaErrormessage,
           class: r(t.question.cssClasses.itemControl)
-        }, null, 10, es)), [
-          [te, s.value]
+        }, null, 10, i1)), [
+          [oe, s.value]
         ]) : R((o(), l("input", {
           key: 1,
           type: "radio",
@@ -1374,8 +1408,8 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           "aria-invalid": t.question.ariaInvalid,
           "aria-errormessage": t.question.ariaErrormessage,
           class: r(t.question.cssClasses.itemControl)
-        }, null, 10, ss)), [
-          [_, s.value]
+        }, null, 10, r1)), [
+          [x, s.value]
         ]),
         v("div", {
           class: r(t.question.cssClasses.itemDecorator)
@@ -1410,7 +1444,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               onError: a[3] || (a[3] = (p) => {
                 t.item.onErrorHandler();
               })
-            }, null, 46, ns)) : m("", !0),
+            }, null, 46, l1)) : m("", !0),
             L(i) && !t.item.contentNotLoaded && t.question.contentMode === "video" ? (o(), l("video", {
               key: 2,
               controls: "",
@@ -1425,7 +1459,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               onError: a[5] || (a[5] = (p) => {
                 t.item.onErrorHandler();
               })
-            }, null, 46, ts)) : m("", !0),
+            }, null, 46, a1)) : m("", !0),
             !L(i) || t.item.contentNotLoaded ? (o(), l("div", {
               key: 3,
               class: r(t.question.cssClasses.itemNoImage),
@@ -1435,7 +1469,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
                 objectFit: t.question.imageFit
               })
             }, [
-              h(d, {
+              g(d, {
                 is: "sv-svg-icon",
                 class: r(t.question.cssClasses.itemNoImageSvgIcon),
                 iconName: t.question.cssClasses.itemNoImageSvgIconId,
@@ -1447,7 +1481,7 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             key: 0,
             class: r(t.question.cssClasses.itemText)
           }, [
-            h(d, {
+            g(d, {
               is: "survey-string",
               locString: t.item.locText
             }, null, 8, ["locString"])
@@ -1456,24 +1490,24 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)
     ], 2));
   }
-}), is = /* @__PURE__ */ y({
+}), d1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Comment",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => !s.question.isReadOnlyRenderDiv() && s.question.getMaxLength() ? (o(), l("div", {
       key: 0,
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "sv-text-area",
         model: s.question.textAreaModel
       }, null, 8, ["model"]),
-      h(d, {
+      g(d, {
         is: "sv-character-counter",
         counter: s.question.characterCounter,
         remainingCharacterCounter: s.question.cssClasses.remainingCharacterCounter
@@ -1490,20 +1524,20 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref: n
     }, H(s.question.value), 513));
   }
-}), rs = /* @__PURE__ */ y({
+}), m1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.renderCssRoot),
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "sv-dropdown",
         question: s.question
       }, null, 8, ["question"]),
@@ -1514,29 +1548,29 @@ const B1 = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), ls = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], as = {
+}), p1 = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], C1 = {
   key: 0,
   value: ""
-}, us = ["id"];
-x.Instance.registerRenderer(
+}, v1 = ["id"];
+ee.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const ds = /* @__PURE__ */ y({
+const c1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "DropdownSelect",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = (a) => {
       e.question.onClick(a);
     }, i = (a) => {
       e.question.onKeyUp(a);
-    }, t = b({
+    }, t = f({
       get() {
         return e.question.value ?? "";
       },
@@ -1558,10 +1592,10 @@ const ds = /* @__PURE__ */ y({
           disabled: "",
           id: a.question.inputId,
           class: r(a.question.getControlClass())
-        }, H(a.question.readOnlyText), 11, us)) : R((o(), l("select", {
+        }, H(a.question.readOnlyText), 11, v1)) : R((o(), l("select", {
           key: 0,
           id: a.question.inputId,
-          "onUpdate:modelValue": p[0] || (p[0] = (g) => t.value = g),
+          "onUpdate:modelValue": p[0] || (p[0] = (h) => t.value = h),
           onClick: s,
           onKeyup: i,
           autocomplete: a.question.autocomplete,
@@ -1572,13 +1606,13 @@ const ds = /* @__PURE__ */ y({
           "aria-errormessage": a.question.ariaErrormessage,
           required: a.question.isRequired
         }, [
-          a.question.allowClear ? (o(), l("option", as, H(a.question.placeholder), 1)) : m("", !0),
-          (o(!0), l(I, null, S(a.question.visibleChoices, (g) => (o(), c(d, {
+          a.question.allowClear ? (o(), l("option", C1, H(a.question.placeholder), 1)) : m("", !0),
+          (o(!0), l(I, null, S(a.question.visibleChoices, (h) => (o(), c(d, {
             is: "sv-dropdown-option-item",
-            item: g,
-            key: g.id
+            item: h,
+            key: h.id
           }, null, 8, ["item"]))), 128))
-        ], 42, ls)), [
+        ], 42, p1)), [
           [Re, t.value]
         ]),
         a.question.cssClasses.chevronButtonIconId ? (o(), l("div", {
@@ -1586,7 +1620,7 @@ const ds = /* @__PURE__ */ y({
           class: r(a.question.cssClasses.chevronButton),
           "aria-hidden": "true"
         }, [
-          h(d, {
+          g(d, {
             is: "sv-svg-icon",
             class: r(a.question.cssClasses.chevronButtonSvg),
             iconName: a.question.cssClasses.chevronButtonIconId,
@@ -1601,7 +1635,7 @@ const ds = /* @__PURE__ */ y({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), ms = ["value", "disabled"], ps = /* @__PURE__ */ y({
+}), g1 = ["value", "disabled"], h1 = /* @__PURE__ */ y({
   __name: "OptionItem",
   props: {
     item: {}
@@ -1611,15 +1645,15 @@ const ds = /* @__PURE__ */ y({
     return V(() => e.item), (s, i) => (o(), l("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
-    }, H(L(n)), 9, ms));
+    }, H(L(n)), 9, g1));
   }
-}), Cs = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], vs = { style: { visibility: "hidden" } }, cs = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], gs = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], hs = /* @__PURE__ */ y({
+}), y1 = ["id", "disabled", "tabindex", "role", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], q1 = { style: { visibility: "hidden" } }, w1 = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], L1 = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], k1 = /* @__PURE__ */ y({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = b(() => e.question.dropdownListModel), i = (w) => {
+    const e = u, n = b(null), s = f(() => e.question.dropdownListModel), i = (w) => {
       var A;
       (A = s.value) == null || A.onClick(w);
     }, t = (w) => {
@@ -1631,21 +1665,21 @@ const ds = /* @__PURE__ */ y({
     }, p = (w) => {
       var A;
       (A = s.value) == null || A.keyHandler(w);
-    }, g = () => {
+    }, h = () => {
       if (n.value) {
         const w = n.value, A = s.value.inputStringRendered;
-        Pe.isTwoValueEquals(A, w.value, !1, !0, !1) || (w.value = s.value.inputStringRendered);
+        Ee.isTwoValueEquals(A, w.value, !1, !0, !1) || (w.value = s.value.inputStringRendered);
       }
     }, C = (w) => {
-      e.question.onBlur(w), g();
+      e.question.onBlur(w), h();
     }, q = (w) => {
       e.question.onFocus(w);
     }, B = (w) => {
       s.value.inputStringRendered = w.target.value;
-    }, k = b(
+    }, k = f(
       () => e.question.showSelectedItemLocText
-    ), Z = b(() => e.question.selectedItemLocText);
-    return V(() => s.value), j(g), $(g), (w, A) => (o(), l("div", {
+    ), $ = f(() => e.question.selectedItemLocText);
+    return V(() => s.value), j(h), Z(h), (w, A) => (o(), l("div", {
       class: r(w.question.cssClasses.selectWrapper),
       onClick: i
     }, [
@@ -1659,6 +1693,7 @@ const ds = /* @__PURE__ */ y({
         class: r(w.question.getControlClass()),
         role: w.question.ariaRole,
         "aria-required": w.question.ariaRequired,
+        "aria-labelledby": w.question.ariaLabelledBy,
         "aria-label": w.question.ariaLabel,
         "aria-invalid": w.question.ariaInvalid,
         "aria-errormessage": w.question.ariaErrormessage,
@@ -1679,13 +1714,13 @@ const ds = /* @__PURE__ */ y({
           k.value ? (o(), c(d, {
             key: 0,
             is: "survey-string",
-            locString: Z.value
+            locString: $.value
           }, null, 8, ["locString"])) : m("", !0),
           s.value.showHintString ? (o(), l("div", {
             key: 1,
             class: r(w.question.cssClasses.hintSuffix)
           }, [
-            v("span", vs, H(s.value.inputStringRendered), 1),
+            v("span", q1, H(s.value.inputStringRendered), 1),
             v("span", null, H(s.value.hintStringSuffix), 1)
           ], 2)) : m("", !0),
           w.question.showInputFieldComponent ? (o(), c(d, {
@@ -1716,7 +1751,7 @@ const ds = /* @__PURE__ */ y({
             onInput: B,
             onBlur: C,
             onFocus: q
-          }, null, 42, cs)
+          }, null, 42, w1)
         ], 2),
         w.question.allowClear && w.question.cssClasses.cleanButtonIconId ? R((o(), l("div", {
           key: 1,
@@ -1724,7 +1759,7 @@ const ds = /* @__PURE__ */ y({
           onClick: a,
           "aria-hidden": "true"
         }, [
-          h(d, {
+          g(d, {
             is: "sv-svg-icon",
             class: r(w.question.cssClasses.cleanButtonSvg),
             iconName: w.question.cssClasses.cleanButtonIconId,
@@ -1734,7 +1769,7 @@ const ds = /* @__PURE__ */ y({
         ], 2)), [
           [N, w.question.showClearButton]
         ]) : m("", !0)
-      ], 42, Cs)),
+      ], 42, y1)),
       w.question.isReadOnly ? (o(), l("div", {
         key: 2,
         id: w.question.inputId,
@@ -1750,7 +1785,7 @@ const ds = /* @__PURE__ */ y({
           locString: w.question.selectedItemLocText
         }, null, 8, ["locString"])) : m("", !0),
         v("div", null, H(w.question.readOnlyText), 1)
-      ], 10, gs)) : (o(), c(d, {
+      ], 10, L1)) : (o(), c(d, {
         key: 1,
         is: "sv-popup",
         model: w.question.dropdownListModel.popupModel
@@ -1761,7 +1796,7 @@ const ds = /* @__PURE__ */ y({
         onPointerdown: t,
         "aria-hidden": "true"
       }, [
-        h(d, {
+        g(d, {
           is: "sv-svg-icon",
           class: r(w.question.cssClasses.chevronButtonSvg),
           iconName: w.question.cssClasses.chevronButtonIconId,
@@ -1770,20 +1805,20 @@ const ds = /* @__PURE__ */ y({
       ], 34)) : m("", !0)
     ], 2));
   }
-}), ys = /* @__PURE__ */ y({
+}), b1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.renderCssRoot),
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "sv-tagbox",
         question: s.question
       }, null, 8, ["question"]),
@@ -1794,15 +1829,15 @@ const ds = /* @__PURE__ */ y({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), qs = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ws = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], Ls = /* @__PURE__ */ y({
+}), f1 = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], M1 = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], H1 = /* @__PURE__ */ y({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = b(() => {
+    const e = u, n = f(() => {
       const C = e.question;
-      return C.dropdownListModel || (C.dropdownListModel = new Ee(C)), e.question.dropdownListModel;
+      return C.dropdownListModel || (C.dropdownListModel = new We(C)), e.question.dropdownListModel;
     }), s = (C) => {
       var q;
       (q = n.value) == null || q.onClick(C);
@@ -1818,7 +1853,7 @@ const ds = /* @__PURE__ */ y({
     }, p = (C) => {
       var q;
       (q = n.value) == null || q.onBlur(C);
-    }, g = ee(() => e.question.selectedChoices);
+    }, h = se(() => e.question.selectedChoices);
     return V(() => n.value), (C, q) => (o(), l("div", {
       class: r(C.question.cssClasses.selectWrapper),
       onClick: s
@@ -1844,13 +1879,13 @@ const ds = /* @__PURE__ */ y({
         v("div", {
           class: r(C.question.cssClasses.controlValue)
         }, [
-          (o(!0), l(I, null, S(L(g), (B, k) => (o(), c(d, {
+          (o(!0), l(I, null, S(L(h), (B, k) => (o(), c(d, {
             is: "sv-tagbox-item",
             item: B,
             question: C.question,
             key: "item" + k
           }, null, 8, ["item", "question"]))), 128)),
-          h(d, {
+          g(d, {
             is: "sv-tagbox-filter",
             model: n.value,
             question: C.question
@@ -1862,7 +1897,7 @@ const ds = /* @__PURE__ */ y({
           onClick: t,
           "aria-hidden": "true"
         }, [
-          h(d, {
+          g(d, {
             is: "sv-svg-icon",
             class: r(C.question.cssClasses.cleanButtonSvg),
             iconName: C.question.cssClasses.cleanButtonIconId,
@@ -1872,7 +1907,7 @@ const ds = /* @__PURE__ */ y({
         ], 2)), [
           [N, C.question.showClearButton]
         ]) : m("", !0)
-      ], 42, qs)),
+      ], 42, f1)),
       C.question.isReadOnly ? (o(), l("div", {
         key: 2,
         id: C.question.inputId,
@@ -1887,7 +1922,7 @@ const ds = /* @__PURE__ */ y({
           is: "survey-string",
           locString: C.question.locReadOnlyText
         }, null, 8, ["locString"])) : m("", !0)
-      ], 10, ws)) : (o(), c(d, {
+      ], 10, M1)) : (o(), c(d, {
         key: 1,
         is: "sv-popup",
         model: n.value.popupModel
@@ -1898,7 +1933,7 @@ const ds = /* @__PURE__ */ y({
         onPointerdown: i,
         "aria-hidden": "true"
       }, [
-        h(d, {
+        g(d, {
           is: "sv-svg-icon",
           class: r(C.question.cssClasses.chevronButtonSvg),
           iconName: C.question.cssClasses.chevronButtonIconId,
@@ -1907,7 +1942,7 @@ const ds = /* @__PURE__ */ y({
       ], 34)) : m("", !0)
     ], 2));
   }
-}), ks = { style: { visibility: "hidden" } }, fs = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], bs = /* @__PURE__ */ y({
+}), I1 = { style: { visibility: "hidden" } }, S1 = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], V1 = /* @__PURE__ */ y({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1945,13 +1980,13 @@ const ds = /* @__PURE__ */ y({
           key: 1,
           class: r(a.question.cssClasses.hintSuffix)
         }, [
-          v("span", ks, H(a.model.inputStringRendered), 1),
+          v("span", I1, H(a.model.inputStringRendered), 1),
           v("span", null, H(a.model.hintStringSuffix), 1)
         ], 2)) : m("", !0),
         R(v("input", {
           type: "text",
           autocomplete: "off",
-          "onUpdate:modelValue": p[0] || (p[0] = (g) => a.model.inputStringRendered = g),
+          "onUpdate:modelValue": p[0] || (p[0] = (h) => a.model.inputStringRendered = h),
           class: r(a.question.cssClasses.filterStringInput),
           placeholder: a.model.filterStringPlaceholder,
           disabled: a.question.isDisabledAttr,
@@ -1970,13 +2005,13 @@ const ds = /* @__PURE__ */ y({
           onKeydown: s,
           onBlur: i,
           onFocus: t
-        }, null, 42, fs), [
+        }, null, 42, S1), [
           [Te, a.model.inputStringRendered]
         ])
       ], 2)
     ], 2));
   }
-}), Ms = { class: "sv-tagbox__item-text" }, Hs = /* @__PURE__ */ y({
+}), B1 = { class: "sv-tagbox__item-text" }, R1 = /* @__PURE__ */ y({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1990,8 +2025,8 @@ const ds = /* @__PURE__ */ y({
       class: "sv-tagbox__item",
       key: s.item.key
     }, [
-      v("div", Ms, [
-        h(d, {
+      v("div", B1, [
+        g(d, {
           is: "survey-string",
           locString: s.item.locText
         }, null, 8, ["locString"])
@@ -2000,7 +2035,7 @@ const ds = /* @__PURE__ */ y({
         class: r(s.question.cssClasses.cleanItemButton),
         onClick: n
       }, [
-        h(d, {
+        g(d, {
           is: "sv-svg-icon",
           class: r(s.question.cssClasses.cleanItemButtonSvg),
           iconName: s.question.cssClasses.cleanItemButtonIconId,
@@ -2009,14 +2044,14 @@ const ds = /* @__PURE__ */ y({
       ], 2)
     ]));
   }
-}), Is = /* @__PURE__ */ y({
+}), T1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = (t) => e.question.getItemValueWrapperComponentName(t) || "survey-ranking-item", i = (t, a, p) => ({
       componentName: "survey-ranking-item",
@@ -2033,24 +2068,24 @@ const ds = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      t.question.selectToRankEnabled ? m("", !0) : (o(!0), l(I, { key: 0 }, S(t.question.renderedRankingChoices, (p, g) => (o(), c(d, D({
-        key: p.value + "-" + g + "-item",
+      t.question.selectToRankEnabled ? m("", !0) : (o(!0), l(I, { key: 0 }, S(t.question.renderedRankingChoices, (p, h) => (o(), c(d, D({
+        key: p.value + "-" + h + "-item",
         is: s(p)
-      }, i(p, g)), null, 16, ["is"]))), 128)),
+      }, i(p, h)), null, 16, ["is"]))), 128)),
       t.question.selectToRankEnabled ? (o(), l("div", {
         key: 1,
         class: r(t.question.getContainerClasses("from")),
         "data-ranking": "from-container"
       }, [
-        (o(!0), l(I, null, S(t.question.renderedUnRankingChoices, (p, g) => (o(), c(d, D({
-          key: p.value + "-" + g + "-item",
+        (o(!0), l(I, null, S(t.question.renderedUnRankingChoices, (p, h) => (o(), c(d, D({
+          key: p.value + "-" + h + "-item",
           is: s(p)
-        }, i(p, g, !0)), null, 16, ["is"]))), 128)),
+        }, i(p, h, !0)), null, 16, ["is"]))), 128)),
         t.question.renderedUnRankingChoices.length === 0 ? (o(), l("div", {
           key: 0,
           class: r(t.question.cssClasses.containerPlaceholder)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: t.question.locSelectToRankEmptyRankedAreaText
           }, null, 8, ["locString"])
@@ -2065,15 +2100,15 @@ const ds = /* @__PURE__ */ y({
         class: r(t.question.getContainerClasses("to")),
         "data-ranking": "to-container"
       }, [
-        (o(!0), l(I, null, S(t.question.renderedRankingChoices, (p, g) => (o(), c(d, D({
-          key: p.value + "-" + g + "-item",
+        (o(!0), l(I, null, S(t.question.renderedRankingChoices, (p, h) => (o(), c(d, D({
+          key: p.value + "-" + h + "-item",
           is: s(p)
-        }, i(p, g)), null, 16, ["is"]))), 128)),
+        }, i(p, h)), null, 16, ["is"]))), 128)),
         t.question.renderedRankingChoices.length === 0 ? (o(), l("div", {
           key: 0,
           class: r(t.question.cssClasses.containerPlaceholder)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: t.question.locSelectToRankEmptyUnrankedAreaText
           }, null, 8, ["locString"])
@@ -2081,10 +2116,10 @@ const ds = /* @__PURE__ */ y({
       ], 2)) : m("", !0)
     ], 2));
   }
-}), Ss = ["tabindex", "data-sv-drop-target-ranking-item"], Vs = {
+}), Z1 = ["tabindex", "data-sv-drop-target-ranking-item"], $1 = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Bs = ["xlink:href"], Rs = ["xlink:href"], Ts = ["xlink:href"], Zs = /* @__PURE__ */ y({
+}, D1 = ["xlink:href"], A1 = ["xlink:href"], N1 = ["xlink:href"], P1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -2094,7 +2129,7 @@ const ds = /* @__PURE__ */ y({
     unrankedItem: { type: Boolean }
   },
   setup(u) {
-    const e = u, n = b(() => e.question.getNumberByIndex(e.index));
+    const e = u, n = f(() => e.question.getNumberByIndex(e.index));
     return V(() => e.item), (s, i) => (o(), l("div", {
       tabindex: s.question.getItemTabIndex(s.item),
       "data-sv-drop-target-ranking-item": s.index,
@@ -2119,7 +2154,7 @@ const ds = /* @__PURE__ */ y({
         );
       })
     }, [
-      v("div", Vs, [
+      v("div", $1, [
         v("div", {
           class: r(s.question.cssClasses.itemGhostNode)
         }, null, 2),
@@ -2134,14 +2169,14 @@ const ds = /* @__PURE__ */ y({
             }, [
               v("use", {
                 "xlink:href": s.question.dragDropSvgIcon
-              }, null, 8, Bs)
+              }, null, 8, D1)
             ], 2)),
             (o(), l("svg", {
               class: r(s.question.getIconFocusCss())
             }, [
               v("use", {
                 "xlink:href": s.question.arrowsSvgIcon
-              }, null, 8, Rs)
+              }, null, 8, A1)
             ], 2))
           ], 2),
           !s.unrankedItem && n.value ? (o(), l("div", {
@@ -2154,19 +2189,19 @@ const ds = /* @__PURE__ */ y({
             (o(), l("svg", null, [
               v("use", {
                 "xlink:href": s.question.dashSvgIcon
-              }, null, 8, Ts)
+              }, null, 8, N1)
             ]))
           ], 2)),
-          h(d, {
+          g(d, {
             is: s.question.itemComponent,
             item: s.item,
             cssClasses: s.question.cssClasses
           }, null, 8, ["is", "item", "cssClasses"])
         ], 2)
       ])
-    ], 42, Ss));
+    ], 42, Z1));
   }
-}), $s = /* @__PURE__ */ y({
+}), E1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "RankingItemContent",
   props: {
@@ -2177,23 +2212,23 @@ const ds = /* @__PURE__ */ y({
     return (e, n) => (o(), l("div", {
       class: r(e.cssClasses.controlLabel)
     }, [
-      h(d, {
+      g(d, {
         is: "survey-string",
         locString: e.item.locText
       }, null, 8, ["locString"])
     ], 2));
   }
-}), Ds = { role: "radiogroup" }, As = /* @__PURE__ */ v("legend", {
+}), W1 = { role: "radiogroup" }, F1 = /* @__PURE__ */ v("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Ns = /* @__PURE__ */ y({
+}, null, -1), z1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = (i) => e.question.getInputId(i);
     return (i, t) => (o(), l("div", {
@@ -2201,13 +2236,13 @@ const ds = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      v("fieldset", Ds, [
-        As,
+      v("fieldset", W1, [
+        F1,
         i.question.hasMinLabel ? (o(), l("span", {
           key: 0,
           class: r(i.question.cssClasses.minText)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locMinRateDescription
           }, null, 8, ["locString"])
@@ -2223,7 +2258,7 @@ const ds = /* @__PURE__ */ y({
           key: 1,
           class: r(i.question.cssClasses.maxText)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locMaxRateDescription
           }, null, 8, ["locString"])
@@ -2231,7 +2266,7 @@ const ds = /* @__PURE__ */ y({
       ])
     ], 2));
   }
-}), Ps = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Es = ["data-text"], Ws = /* @__PURE__ */ y({
+}), O1 = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], U1 = ["data-text"], K1 = /* @__PURE__ */ y({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2258,19 +2293,19 @@ const ds = /* @__PURE__ */ y({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, Ps),
+      }, null, 8, O1),
       v("span", {
         class: r(n.question.cssClasses.itemText),
         "data-text": n.item.text
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: n.item.locText
         }, null, 8, ["locString"])
-      ], 10, Es)
+      ], 10, U1)
     ], 34));
   }
-}), Fs = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], zs = /* @__PURE__ */ y({
+}), j1 = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Q1 = /* @__PURE__ */ y({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2300,8 +2335,8 @@ const ds = /* @__PURE__ */ y({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, Fs),
-      h(d, {
+      }, null, 8, j1),
+      g(d, {
         is: "sv-svg-icon",
         iconName: n.question.getItemSmileyIconName(n.item.itemValue),
         size: "auto",
@@ -2309,7 +2344,7 @@ const ds = /* @__PURE__ */ y({
       }, null, 8, ["iconName", "title"])
     ], 38));
   }
-}), Os = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Us = /* @__PURE__ */ y({
+}), G1 = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], J1 = /* @__PURE__ */ y({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2338,15 +2373,15 @@ const ds = /* @__PURE__ */ y({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, Os),
-      h(d, {
+      }, null, 8, G1),
+      g(d, {
         is: "sv-svg-icon",
         class: r("sv-star"),
         iconName: n.question.itemStarIcon,
         size: "auto",
         title: n.item.text
       }, null, 8, ["iconName", "title"]),
-      h(d, {
+      g(d, {
         is: "sv-svg-icon",
         class: r("sv-star-2"),
         iconName: n.question.itemStarIconAlt,
@@ -2355,10 +2390,10 @@ const ds = /* @__PURE__ */ y({
       }, null, 8, ["iconName", "title"])
     ], 34));
   }
-}), Ks = { class: "sd-rating-dropdown-item" }, js = { class: "sd-rating-dropdown-item_text" }, Qs = {
+}), X1 = { class: "sd-rating-dropdown-item" }, Y1 = { class: "sd-rating-dropdown-item_text" }, _1 = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, Gs = /* @__PURE__ */ y({
+}, x1 = /* @__PURE__ */ y({
   __name: "RatingDropdownItem",
   props: {
     item: {},
@@ -2366,10 +2401,10 @@ const ds = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = u;
-    return V(() => e.item), (n, s) => (o(), l("div", Ks, [
-      v("span", js, H(n.item.title), 1),
-      n.item.description ? (o(), l("div", Qs, [
-        h(d, {
+    return V(() => e.item), (n, s) => (o(), l("div", X1, [
+      v("span", Y1, H(n.item.title), 1),
+      n.item.description ? (o(), l("div", _1, [
+        g(d, {
           is: "survey-string",
           locString: n.item.description
         }, null, 8, ["locString"])
@@ -2377,38 +2412,38 @@ const ds = /* @__PURE__ */ y({
     ]));
   }
 });
-x.Instance.registerRenderer(
+ee.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const Js = /* @__PURE__ */ y({
+const en = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.cssClasses.rootDropdown),
       ref_key: "root",
       ref: n
     }, [
-      h(d, {
+      g(d, {
         is: "sv-dropdown",
         question: s.question
       }, null, 8, ["question"])
     ], 2));
   }
-}), Xs = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Ys = /* @__PURE__ */ y({
+}), sn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], nn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = (t, a) => {
       e.question.onLabelClick(t, a);
@@ -2441,8 +2476,8 @@ const Js = /* @__PURE__ */ y({
           "aria-describedby": t.question.a11y_input_ariaDescribedBy,
           "aria-invalid": t.question.a11y_input_ariaInvalid,
           "aria-errormessage": t.question.a11y_input_ariaErrormessage
-        }, null, 42, Xs), [
-          [te, t.question.booleanValue]
+        }, null, 42, sn), [
+          [oe, t.question.booleanValue]
         ]),
         v("div", {
           class: r(t.question.cssClasses.sliderGhost),
@@ -2451,7 +2486,7 @@ const Js = /* @__PURE__ */ y({
           v("span", {
             class: r(t.question.getLabelCss(t.question.swapOrder))
           }, [
-            h(d, {
+            g(d, {
               is: "survey-string",
               locString: t.question.locLabelLeft
             }, null, 8, ["locString"])
@@ -2468,7 +2503,7 @@ const Js = /* @__PURE__ */ y({
               key: 0,
               class: r(t.question.cssClasses.sliderText)
             }, [
-              h(d, {
+              g(d, {
                 is: "survey-string",
                 locString: t.question.getCheckedLabel()
               }, null, 8, ["locString"])
@@ -2482,7 +2517,7 @@ const Js = /* @__PURE__ */ y({
           v("span", {
             class: r(t.question.getLabelCss(!t.question.swapOrder))
           }, [
-            h(d, {
+            g(d, {
               is: "survey-string",
               locString: t.question.locLabelRight
             }, null, 8, ["locString"])
@@ -2492,19 +2527,19 @@ const Js = /* @__PURE__ */ y({
     ], 34));
   }
 });
-x.Instance.registerRenderer(
+ee.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const _s = /* @__PURE__ */ y({
+const tn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
     question: {}
   },
   setup(u) {
-    const e = f(null);
+    const e = b(null);
     return T(u, e), (s, i) => (o(), l("div", {
       class: r(s.question.cssClasses.rootRadio),
       ref_key: "root",
@@ -2538,7 +2573,7 @@ const _s = /* @__PURE__ */ y({
       ], 2)
     ], 2));
   }
-}), xs = ["name", "value", "checked", "aria-errormessage", "disabled", "readonly"], en = ["xlink:href"], sn = /* @__PURE__ */ y({
+}), on = ["name", "value", "checked", "aria-errormessage", "disabled", "readonly"], rn = ["xlink:href"], ln = /* @__PURE__ */ y({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2567,7 +2602,7 @@ const _s = /* @__PURE__ */ y({
           readonly: s.question.isReadOnlyAttr,
           class: r(s.question.cssClasses.itemRadioControl),
           onChange: n
-        }, null, 42, xs),
+        }, null, 42, on),
         s.question.cssClasses.materialRadioDecorator ? (o(), l("span", {
           key: 0,
           class: r(s.question.cssClasses.materialRadioDecorator)
@@ -2578,13 +2613,13 @@ const _s = /* @__PURE__ */ y({
           }, [
             v("use", {
               "xlink:href": s.question.itemSvgIcon
-            }, null, 8, en)
+            }, null, 8, rn)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         v("span", {
           class: r(s.question.cssClasses.radioControlLabel)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: s.locText
           }, null, 8, ["locString"])
@@ -2592,13 +2627,13 @@ const _s = /* @__PURE__ */ y({
       ], 2)
     ], 2));
   }
-}), nn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], tn = ["xlink:href"], on = /* @__PURE__ */ v("span", { class: "check" }, null, -1), rn = ["id"], ln = ["id"];
-x.Instance.registerRenderer(
+}), an = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], un = ["xlink:href"], dn = /* @__PURE__ */ v("span", { class: "check" }, null, -1), mn = ["id"], pn = ["id"];
+ee.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const an = /* @__PURE__ */ y({
+const Cn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2606,7 +2641,7 @@ const an = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), l("div", {
       class: r(s.question.cssClasses.rootCheckbox),
       ref_key: "root",
@@ -2628,12 +2663,14 @@ const an = /* @__PURE__ */ y({
             ".indeterminate": s.question.isIndeterminate,
             disabled: s.question.isDisabledAttr,
             readonly: s.question.isReadOnlyAttr,
-            "aria-required": s.question.ariaRequired,
-            "aria-label": s.question.ariaLabel,
-            "aria-invalid": s.question.ariaInvalid,
-            "aria-errormessage": s.question.ariaErrormessage
-          }, null, 42, nn), [
-            [te, s.question.booleanValue]
+            "aria-required": s.question.a11y_input_ariaRequired,
+            "aria-label": s.question.a11y_input_ariaLabel,
+            "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
+            "aria-describedby": s.question.a11y_input_ariaDescribedBy,
+            "aria-invalid": s.question.a11y_input_ariaInvalid,
+            "aria-errormessage": s.question.a11y_input_ariaErrormessage
+          }, null, 42, an), [
+            [oe, s.question.booleanValue]
           ]),
           v("span", {
             class: r(s.question.cssClasses.checkboxMaterialDecorator)
@@ -2644,9 +2681,9 @@ const an = /* @__PURE__ */ y({
             }, [
               v("use", {
                 "xlink:href": s.question.svgIcon
-              }, null, 8, tn)
+              }, null, 8, un)
             ], 2)) : m("", !0),
-            on
+            dn
           ], 2),
           s.question.isLabelRendered ? (o(), l("span", {
             key: 0,
@@ -2665,29 +2702,29 @@ const an = /* @__PURE__ */ y({
               element: s.question,
               css: s.css
             }, null, 8, ["element", "css"])) : m("", !0)
-          ], 10, rn)) : m("", !0)
+          ], 10, mn)) : m("", !0)
         ], 2),
         s.question.canRenderLabelDescription ? (o(), l("div", {
           key: 0,
           class: r(s.question.cssDescription),
           id: s.question.ariaDescriptionId
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: s.question.locDescription
           }, null, 8, ["locString"])
-        ], 10, ln)) : m("", !0)
+        ], 10, pn)) : m("", !0)
       ], 2)
     ], 2));
   }
-}), un = /* @__PURE__ */ y({
+}), vn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = ee(() => e.question.getRows());
+    const e = u, n = b(null), s = se(() => e.question.getRows());
     return T(e, n), (i, t) => (o(), l("table", {
       class: r(i.question.getQuestionRootCss()),
       ref_key: "root",
@@ -2701,14 +2738,14 @@ const an = /* @__PURE__ */ y({
             key: 0,
             class: r(i.question.cssClasses.row)
           }, [
-            (o(!0), l(I, null, S(a.cells, (g) => (o(), l("td", {
-              key: "item" + g.item.editor.id,
-              class: r(g.className)
+            (o(!0), l(I, null, S(a.cells, (h) => (o(), l("td", {
+              key: "item" + h.item.editor.id,
+              class: r(h.className)
             }, [
-              h(d, {
+              g(d, {
                 is: "survey-multipletext-item",
                 question: i.question,
-                cell: g
+                cell: h
               }, null, 8, ["question", "cell"])
             ], 2))), 128))
           ], 2)) : m("", !0)
@@ -2716,16 +2753,16 @@ const an = /* @__PURE__ */ y({
       ])
     ], 2));
   }
-}), dn = { key: 1 }, mn = /* @__PURE__ */ y({
+}), cn = { key: 1 }, gn = /* @__PURE__ */ y({
   __name: "MultipletextItem",
   props: {
     question: {},
     cell: {}
   },
   setup(u) {
-    const e = u, n = (i) => oe(i);
+    const e = u, n = (i) => ie(i);
     V(() => e.cell.item.editor);
-    const s = b(() => e.cell.item);
+    const s = f(() => e.cell.item);
     return (i, t) => i.cell.isErrorsCell ? (o(), c(d, {
       key: 1,
       is: "survey-errors",
@@ -2745,11 +2782,11 @@ const an = /* @__PURE__ */ y({
           key: 0,
           class: r(i.question.cssClasses.requiredMark)
         }, H(s.value.editor.requiredMark), 3)) : m("", !0),
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: s.value.locTitle
         }, null, 8, ["locString"]),
-        s.value.editor.isRequireTextAfterTitle ? (o(), l("span", dn, " ")) : m("", !0),
+        s.value.editor.isRequireTextAfterTitle ? (o(), l("span", cn, " ")) : m("", !0),
         s.value.editor.isRequireTextAfterTitle ? (o(), l("span", {
           key: 2,
           "aria-hidden": "true",
@@ -2761,21 +2798,21 @@ const an = /* @__PURE__ */ y({
         class: r(i.question.getItemCss()),
         onFocusin: t[0] || (t[0] = (a) => s.value.focusIn())
       }, [
-        h(d, {
+        g(d, {
           is: n(s.value.editor),
           question: s.value.editor
         }, null, 8, ["is", "question"])
       ], 34))
     ], 2));
   }
-}), pn = { class: "sv-hidden" }, Cn = { key: 0 }, vn = { key: 0 }, cn = ["onClick"], gn = ["data-responsive-title", "onClick"], hn = /* @__PURE__ */ y({
+}), hn = { class: "sv-hidden" }, yn = { key: 0 }, qn = { key: 0 }, wn = ["onClick"], Ln = ["data-responsive-title", "onClick"], kn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = W();
+    const e = u, n = b(null), s = W();
     T(
       e,
       n,
@@ -2798,27 +2835,27 @@ const an = /* @__PURE__ */ y({
       ref: n
     }, [
       v("fieldset", null, [
-        v("legend", pn, H(t.question.locTitle.renderedHtml), 1),
+        v("legend", hn, H(t.question.locTitle.renderedHtml), 1),
         v("table", {
           class: r(t.question.getTableCss())
         }, [
-          t.question.showHeader ? (o(), l("thead", Cn, [
+          t.question.showHeader ? (o(), l("thead", yn, [
             v("tr", null, [
-              t.question.hasRows ? (o(), l("td", vn)) : m("", !0),
-              (o(!0), l(I, null, S(t.question.visibleColumns, (p, g) => (o(), l("th", {
-                key: g,
+              t.question.hasRows ? (o(), l("td", qn)) : m("", !0),
+              (o(!0), l(I, null, S(t.question.visibleColumns, (p, h) => (o(), l("th", {
+                key: h,
                 class: r(t.question.cssClasses.headerCell),
                 style: M({
                   minWidth: t.question.columnMinWidth,
                   width: t.question.columnMinWidth
                 })
               }, [
-                h(d, {
+                g(d, {
                   is: t.question.getColumnHeaderWrapperComponentName(p),
                   componentData: t.question.getColumnHeaderWrapperComponentData(p)
                 }, {
                   default: E(() => [
-                    h(d, {
+                    g(d, {
                       is: "survey-string",
                       locString: p.locText
                     }, null, 8, ["locString"])
@@ -2829,8 +2866,8 @@ const an = /* @__PURE__ */ y({
             ])
           ])) : m("", !0),
           v("tbody", null, [
-            (o(!0), l(I, null, S(s.value, (p, g) => (o(), l("tr", {
-              key: "row_" + p.name + "_" + g,
+            (o(!0), l(I, null, S(s.value, (p, h) => (o(), l("tr", {
+              key: "row_" + p.name + "_" + h,
               class: r(p.rowClasses || void 0)
             }, [
               R(v("td", {
@@ -2840,12 +2877,12 @@ const an = /* @__PURE__ */ y({
                   width: t.question.rowTitleWidth
                 })
               }, [
-                h(d, {
+                g(d, {
                   is: t.question.getRowHeaderWrapperComponentName(p),
                   componentData: t.question.getRowHeaderWrapperComponentData(p)
                 }, {
                   default: E(() => [
-                    h(d, {
+                    g(d, {
                       is: "survey-string",
                       locString: p.locText
                     }, null, 8, ["locString"])
@@ -2860,39 +2897,39 @@ const an = /* @__PURE__ */ y({
                 class: r(t.question.getItemClass(p, C)),
                 onClick: (B) => i(p, C)
               }, [
-                h(d, {
+                g(d, {
                   is: "survey-string",
                   locString: t.question.getCellDisplayLocText(p.name, C)
                 }, null, 8, ["locString"])
-              ], 10, cn))), 128)) : m("", !0),
+              ], 10, wn))), 128)) : m("", !0),
               t.question.hasCellText ? m("", !0) : (o(!0), l(I, { key: 1 }, S(t.question.visibleColumns, (C, q) => (o(), l("td", {
                 key: q,
                 "data-responsive-title": C.locText.renderedHtml,
                 class: r(t.question.cssClasses.cell),
                 onClick: (B) => i(p, C)
               }, [
-                h(d, {
+                g(d, {
                   is: t.question.cellComponent,
                   question: t.question,
                   row: p,
                   column: C,
                   columnIndex: q
                 }, null, 8, ["is", "question", "row", "column", "columnIndex"])
-              ], 10, gn))), 128))
+              ], 10, Ln))), 128))
             ], 2))), 128))
           ])
         ], 2)
       ])
     ], 2));
   }
-}), yn = ["data-sv-drop-target-matrix-row"], qn = /* @__PURE__ */ y({
+}), bn = ["data-sv-drop-target-matrix-row"], fn = /* @__PURE__ */ y({
   __name: "MatrixRow",
   props: {
     question: {},
     row: {}
   },
   setup(u) {
-    const e = u, n = f();
+    const e = u, n = b();
     V(() => e.row);
     const s = F(
       () => e.row,
@@ -2900,7 +2937,7 @@ const an = /* @__PURE__ */ y({
         t && t.setRootElement(void 0), i.setRootElement(n.value);
       }
     );
-    return $(() => {
+    return Z(() => {
       e.row.setRootElement(n.value);
     }), P(() => {
       e.row.setRootElement(void 0), s();
@@ -2918,9 +2955,9 @@ const an = /* @__PURE__ */ y({
         question: i.question,
         key: i.row.id + "_" + a.id
       }, null, 8, ["cell", "question"]))), 128))
-    ], 42, yn)) : m("", !0);
+    ], 42, bn)) : m("", !0);
   }
-}), wn = ["name", "value", "readonly", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Ln = ["xlink:href"], kn = /* @__PURE__ */ y({
+}), Mn = ["name", "value", "readonly", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Hn = ["xlink:href"], In = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "MatrixCell",
   props: {
@@ -2950,8 +2987,8 @@ const an = /* @__PURE__ */ y({
         ),
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-errormessage": e.question.a11y_input_ariaErrormessage
-      }, null, 10, wn), [
-        [_, e.row.value]
+      }, null, 10, Mn), [
+        [x, e.row.value]
       ]),
       v("span", {
         class: r(e.question.cssClasses.materialDecorator)
@@ -2962,28 +2999,28 @@ const an = /* @__PURE__ */ y({
         }, [
           v("use", {
             "xlink:href": e.question.itemSvgIcon
-          }, null, 8, Ln)
+          }, null, 8, Hn)
         ], 2)) : m("", !0)
       ], 2),
       e.question.isMobile ? (o(), l("span", {
         key: 0,
         class: r(e.question.cssClasses.cellResponsiveTitle)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: e.column.locText
         }, null, 8, ["locString"])
       ], 2)) : m("", !0)
     ], 34));
   }
-}), fn = /* @__PURE__ */ y({
+}), Sn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     return T(e, n), (s, i) => (o(), c(d, {
       is: "survey-matrixtable",
       question: s.question,
@@ -2991,13 +3028,13 @@ const an = /* @__PURE__ */ y({
       ref: n
     }, null, 8, ["question"]));
   }
-}), bn = { key: 0 }, Mn = { key: 1 }, Hn = /* @__PURE__ */ y({
+}), Vn = { key: 0 }, Bn = { key: 1 }, Rn = /* @__PURE__ */ y({
   __name: "MatrixTable",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.question.renderedTable);
+    const e = u, n = f(() => e.question.renderedTable);
     return V(() => n.value), (s, i) => (o(), l("div", {
       style: M({ overflowX: s.question.showHorizontalScroll ? "scroll" : "" }),
       class: r(s.question.cssClasses.tableWrapper)
@@ -3005,7 +3042,7 @@ const an = /* @__PURE__ */ y({
       v("table", {
         class: r(s.question.getTableCss())
       }, [
-        n.value.showHeader ? (o(), l("thead", bn, [
+        n.value.showHeader ? (o(), l("thead", Vn, [
           v("tr", null, [
             (o(!0), l(I, null, S(n.value.headerRow.cells, (t) => (o(), l(I, null, [
               t.hasTitle ? (o(), l("th", {
@@ -3013,12 +3050,12 @@ const an = /* @__PURE__ */ y({
                 class: r(t.className),
                 style: M({ minWidth: t.minWidth, width: t.width })
               }, [
-                h(d, {
+                g(d, {
                   is: s.question.getColumnHeaderWrapperComponentName(t),
                   componentData: s.question.getColumnHeaderWrapperComponentData(t)
                 }, {
                   default: E(() => [
-                    h(d, {
+                    g(d, {
                       is: "survey-string",
                       locString: t.locTitle
                     }, null, 8, ["locString"]),
@@ -3048,7 +3085,7 @@ const an = /* @__PURE__ */ y({
             question: s.question
           }, null, 8, ["row", "question"]))), 128))
         ]),
-        n.value.showFooter ? (o(), l("tfoot", Mn, [
+        n.value.showFooter ? (o(), l("tfoot", Bn, [
           v("tr", null, [
             (o(!0), l(I, null, S(n.value.footerRow.cells, (t, a) => (o(), c(d, {
               is: "survey-matrixdropdown-cell",
@@ -3061,7 +3098,7 @@ const an = /* @__PURE__ */ y({
       ], 2)
     ], 6));
   }
-}), In = /* @__PURE__ */ v("span", null, " ", -1), Sn = /* @__PURE__ */ y({
+}), Tn = /* @__PURE__ */ v("span", null, " ", -1), Zn = /* @__PURE__ */ y({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -3070,24 +3107,24 @@ const an = /* @__PURE__ */ y({
   setup(u) {
     const e = u;
     return V(() => e.column), (n, s) => n.column.isRenderedRequired ? (o(), l(I, { key: 0 }, [
-      In,
+      Tn,
       n.column.isRenderedRequired ? (o(), l("span", {
         key: 0,
         class: r(n.question.cssClasses.cellRequiredMark)
       }, H(n.column.requiredMark), 3)) : m("", !0)
     ], 64)) : m("", !0);
   }
-}), Vn = ["title", "colspan"], Bn = /* @__PURE__ */ y({
+}), $n = ["title", "colspan"], Dn = /* @__PURE__ */ y({
   __name: "MatrixDropdownCellComp",
   props: {
     question: {},
     cell: {}
   },
   setup(u) {
-    const e = u, n = f(!1), s = f(), i = () => e.cell.width || e.cell.minWidth ? { width: e.cell.width, minWidth: e.cell.minWidth } : null, t = () => {
+    const e = u, n = b(!1), s = b(), i = () => e.cell.width || e.cell.minWidth ? { width: e.cell.width, minWidth: e.cell.minWidth } : null, t = () => {
       !e.cell.hasQuestion || !e.question || !e.question.survey || (n.value = e.cell.question.isVisible);
-    }, a = (C) => oe(C);
-    t(), $(() => {
+    }, a = (C) => ie(C);
+    t(), Z(() => {
       if (!e.cell.hasQuestion || !e.question || !e.question.survey)
         return;
       e.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
@@ -3102,7 +3139,7 @@ const an = /* @__PURE__ */ y({
       };
       e.question.survey.matrixAfterCellRender(e.question, B), q && q.afterRenderCore(C);
     });
-    const p = b(() => {
+    const p = f(() => {
       const C = e.cell;
       if (C.hasPanel) {
         const q = C.panel, B = q.survey;
@@ -3113,7 +3150,7 @@ const an = /* @__PURE__ */ y({
         }
         return "survey-panel";
       }
-    }), g = b(() => {
+    }), h = f(() => {
       if (e.cell.hasPanel) {
         const q = e.cell.panel, B = q.survey;
         let k;
@@ -3156,16 +3193,16 @@ const an = /* @__PURE__ */ y({
       C.cell.hasPanel ? (o(), c(d, D({
         key: 3,
         is: p.value
-      }, g.value), null, 16, ["is"])) : m("", !0),
+      }, h.value), null, 16, ["is"])) : m("", !0),
       C.cell.showResponsiveTitle ? (o(), l("span", {
         key: 4,
         class: r(C.cell.responsiveTitleCss)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: C.cell.responsiveLocTitle
         }, null, 8, ["locString"]),
-        h(d, {
+        g(d, {
           is: "survey-matrixheaderrequired",
           column: C.cell.column,
           question: C.cell.matrix
@@ -3181,7 +3218,7 @@ const an = /* @__PURE__ */ y({
           componentData: C.question.getCellWrapperComponentData(C.cell.cell)
         }, {
           default: E(() => [
-            h(d, {
+            g(d, {
               is: a(C.cell.question),
               question: C.cell.question
             }, null, 8, ["is", "question"])
@@ -3242,16 +3279,16 @@ const an = /* @__PURE__ */ y({
         ]),
         _: 1
       }, 8, ["is", "componentData"])) : m("", !0)
-    ], 46, Vn)) : m("", !0);
+    ], 46, $n)) : m("", !0);
   }
-}), Rn = /* @__PURE__ */ y({
+}), An = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
     const s = () => {
       e.question.addRowUI();
@@ -3269,7 +3306,7 @@ const an = /* @__PURE__ */ y({
           class: r(i.question.getAddRowButtonCss()),
           onClick: s
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locAddRowText
           }, null, 8, ["locString"]),
@@ -3290,7 +3327,7 @@ const an = /* @__PURE__ */ y({
         v("div", {
           class: r(i.question.cssClasses.noRowsText)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locNoRowsText
           }, null, 8, ["locString"])
@@ -3301,7 +3338,7 @@ const an = /* @__PURE__ */ y({
           class: r(i.question.getAddRowButtonCss(!0)),
           onClick: s
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locAddRowText
           }, null, 8, ["locString"]),
@@ -3319,7 +3356,7 @@ const an = /* @__PURE__ */ y({
           class: r(i.question.getAddRowButtonCss()),
           onClick: s
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: i.question.locAddRowText
           }, null, 8, ["locString"]),
@@ -3331,41 +3368,41 @@ const an = /* @__PURE__ */ y({
     ], 512));
   }
 });
-function ie(u, e = !0) {
+function re(u, e = !0) {
   return {
-    question: b(() => u.item.data.question),
-    row: e ? b(() => u.item.data.row) : void 0
+    question: f(() => u.item.data.question),
+    row: e ? f(() => u.item.data.row) : void 0
   };
 }
-const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
+const Nn = ["disabled"], Pn = /* @__PURE__ */ y({
   __name: "RemoveButton",
   props: {
     item: {}
   },
   setup(u) {
-    const e = u, { question: n, row: s } = ie(e);
+    const e = u, { question: n, row: s } = re(e);
     return (i, t) => (o(), l("button", {
       type: "button",
       class: r(L(n).getRemoveRowButtonCss()),
       disabled: L(n).isInputReadOnly,
       onClick: t[0] || (t[0] = () => L(n).removeRowUI(L(s)))
     }, [
-      h(d, {
+      g(d, {
         is: "survey-string",
         locString: L(n).locRemoveRowText
       }, null, 8, ["locString"]),
       v("span", {
         class: r(L(n).cssClasses.iconRemove)
       }, null, 2)
-    ], 10, Tn));
+    ], 10, Nn));
   }
-}), $n = ["xlink:href"], Dn = /* @__PURE__ */ y({
+}), En = ["xlink:href"], Wn = /* @__PURE__ */ y({
   __name: "DragDropIcon",
   props: {
     item: {}
   },
   setup(u) {
-    const e = u, { question: n } = ie(e, !1);
+    const e = u, { question: n } = re(e, !1);
     return (s, i) => (o(), l("div", null, [
       L(n).iconDragElement ? (o(), l("svg", {
         key: 0,
@@ -3373,20 +3410,20 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
       }, [
         v("use", {
           "xlink:href": L(n).iconDragElement
-        }, null, 8, $n)
+        }, null, 8, En)
       ], 2)) : (o(), l("span", {
         key: 1,
         class: r(L(n).cssClasses.iconDrag)
       }, null, 2))
     ]));
   }
-}), An = ["aria-expanded", "aria-controls"], Nn = /* @__PURE__ */ y({
+}), Fn = ["aria-expanded", "aria-controls"], zn = /* @__PURE__ */ y({
   __name: "DetailButton",
   props: {
     item: {}
   },
   setup(u) {
-    const e = u, { question: n, row: s } = ie(e);
+    const e = u, { question: n, row: s } = re(e);
     return (i, t) => (o(), l("button", {
       type: "button",
       class: r(L(n).getDetailPanelButtonCss(L(s))),
@@ -3394,15 +3431,15 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
       "aria-expanded": L(n).getIsDetailPanelShowing(L(s)) ? "true" : "false",
       "aria-controls": L(n).getIsDetailPanelShowing(L(s)) ? L(s).detailPanelId : null
     }, [
-      h(d, {
+      g(d, {
         is: "sv-svg-icon",
         class: r(L(n).getDetailPanelIconCss(L(s))),
         iconName: L(n).getDetailPanelIconId(L(s)),
         size: "auto"
       }, null, 8, ["class", "iconName"])
-    ], 10, An));
+    ], 10, Fn));
   }
-}), Pn = /* @__PURE__ */ y({
+}), On = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3410,20 +3447,20 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = he();
+    const e = u, n = b(null), s = he();
     T(
       e,
       n,
       (p) => {
         p.panelCountChangedCallback = () => {
-          var g;
-          (g = s == null ? void 0 : s.proxy) == null || g.$forceUpdate();
+          var h;
+          (h = s == null ? void 0 : s.proxy) == null || h.$forceUpdate();
         }, p.currentIndexChangedCallback = () => {
-          var g;
-          (g = s == null ? void 0 : s.proxy) == null || g.$forceUpdate();
+          var h;
+          (h = s == null ? void 0 : s.proxy) == null || h.$forceUpdate();
         }, p.renderModeChangedCallback = () => {
-          var g;
-          (g = s == null ? void 0 : s.proxy) == null || g.$forceUpdate();
+          var h;
+          (h = s == null ? void 0 : s.proxy) == null || h.$forceUpdate();
         };
       },
       (p) => {
@@ -3431,17 +3468,17 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
       }
     );
     const i = () => e.question.showLegacyNavigation, t = (p) => {
-      const g = e.question.getSurvey();
-      if (g) {
-        const C = g.getElementWrapperComponentName(p);
+      const h = e.question.getSurvey();
+      if (h) {
+        const C = h.getElementWrapperComponentName(p);
         if (C)
           return C;
       }
       return "panel";
     }, a = (p) => {
-      const g = e.question.getSurvey();
+      const h = e.question.getSurvey();
       let C;
-      return g && (C = g.getElementWrapperComponentData(p)), {
+      return h && (C = h.getElementWrapperComponentData(p)), {
         componentName: "survey-panel",
         componentData: {
           element: p,
@@ -3449,7 +3486,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
         }
       };
     };
-    return (p, g) => (o(), l("div", {
+    return (p, h) => (o(), l("div", {
       class: r(p.question.cssClasses.root),
       ref_key: "root",
       ref: n
@@ -3458,7 +3495,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
         key: 0,
         class: r(p.question.getTabsContainerCss())
       }, [
-        h(d, {
+        g(d, {
           is: "sv-action-bar",
           model: p.question.tabbedMenu
         }, null, 8, ["model"])
@@ -3468,12 +3505,12 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
         class: r(p.question.cssClasses.noEntriesPlaceholder)
       }, [
         v("span", null, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: p.question.locNoEntriesText
           }, null, 8, ["locString"])
         ]),
-        h(d, {
+        g(d, {
           is: "sv-paneldynamic-add-btn",
           data: { question: p.question }
         }, null, 8, ["data"])
@@ -3502,7 +3539,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
           v("div", {
             class: r(p.question.getPanelWrapperCss(C))
           }, [
-            h(d, D({
+            g(d, D({
               is: t(C)
             }, a(C)), null, 16, ["is"]),
             p.question.canRenderRemovePanelOnRight(C) ? (o(), c(d, {
@@ -3534,7 +3571,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), En = /* @__PURE__ */ y({
+}), Un = /* @__PURE__ */ y({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3551,7 +3588,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
         v("div", {
           class: r(s.question.cssClasses.progressContainer)
         }, [
-          h(d, {
+          g(d, {
             is: "sv-paneldynamic-prev-btn",
             data: { question: s.question }
           }, null, 8, ["data"]),
@@ -3565,23 +3602,23 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
               role: "progressbar"
             }, null, 6)
           ], 2)) : m("", !0),
-          h(d, {
+          g(d, {
             is: "sv-paneldynamic-next-btn",
             data: { question: s.question }
           }, null, 8, ["data"])
         ], 2),
-        h(d, {
+        g(d, {
           is: "sv-paneldynamic-add-btn",
           data: { question: s.question }
         }, null, 8, ["data"]),
-        h(d, {
+        g(d, {
           is: "sv-paneldynamic-progress-text",
           data: { question: s.question }
         }, null, 8, ["data"])
       ], 2)
     ], 2));
   }
-}), Wn = /* @__PURE__ */ y({
+}), Kn = /* @__PURE__ */ y({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3608,7 +3645,7 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
         key: 1,
         class: r(e.question.cssClasses.footerButtonsContainer)
       }, [
-        h(d, {
+        g(d, {
           is: "sv-action-bar",
           model: e.question.footerToolbar
         }, null, 8, ["model"])
@@ -3617,11 +3654,11 @@ const Tn = ["disabled"], Zn = /* @__PURE__ */ y({
   }
 });
 function Q(u) {
-  return b(
+  return f(
     () => u.item && u.item.data.question || u.data.question
   );
 }
-const Fn = ["id"], zn = /* @__PURE__ */ y({
+const jn = ["id"], Qn = /* @__PURE__ */ y({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3641,14 +3678,14 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       v("span", {
         class: r(L(n).cssClasses.buttonAddText)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: L(n).locAddPanelText
         }, null, 8, ["locString"])
       ], 2)
-    ], 10, Fn)) : m("", !0);
+    ], 10, jn)) : m("", !0);
   }
-}), On = ["title"], Un = /* @__PURE__ */ y({
+}), Gn = ["title"], Jn = /* @__PURE__ */ y({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3663,14 +3700,14 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       onClick: s,
       class: r(L(n).getNextButtonCss())
     }, [
-      h(d, {
+      g(d, {
         is: "sv-svg-icon",
         iconName: L(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, On));
+    ], 10, Gn));
   }
-}), Kn = ["title"], jn = /* @__PURE__ */ y({
+}), Xn = ["title"], Yn = /* @__PURE__ */ y({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3685,21 +3722,21 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       onClick: s,
       class: r(L(n).getPrevButtonCss())
     }, [
-      h(d, {
+      g(d, {
         is: "sv-svg-icon",
         iconName: L(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, Kn));
+    ], 10, Xn));
   }
-}), Qn = ["id"], Gn = /* @__PURE__ */ y({
+}), _n = ["id"], xn = /* @__PURE__ */ y({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const e = u, n = Q(e), s = b(
+    const e = u, n = Q(e), s = f(
       () => e.item && e.item.data.panel || e.data.panel
     ), i = (a) => n.value.getPanelRemoveButtonId(a), t = (a) => {
       n.value.isInputReadOnly || n.value.removePanelUI(a);
@@ -3708,12 +3745,12 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       type: "button",
       id: i(s.value),
       class: r(L(n).getPanelRemoveButtonCss()),
-      onClick: p[0] || (p[0] = (g) => t(s.value))
+      onClick: p[0] || (p[0] = (h) => t(s.value))
     }, [
       v("span", {
         class: r(L(n).cssClasses.buttonRemoveText)
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: L(n).locRemovePanelText
         }, null, 8, ["locString"])
@@ -3721,9 +3758,9 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       v("span", {
         class: r(L(n).cssClasses.iconRemove)
       }, null, 2)
-    ], 10, Qn));
+    ], 10, _n));
   }
-}), Jn = /* @__PURE__ */ y({
+}), et = /* @__PURE__ */ y({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3735,14 +3772,14 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       class: r(L(n).cssClasses.progressText)
     }, H(L(n).progressText), 3));
   }
-}), Xn = ["id"], Yn = /* @__PURE__ */ y({
+}), st = ["id"], nt = /* @__PURE__ */ y({
   __name: "Errors",
   props: {
     element: {},
     location: {}
   },
   setup(u) {
-    const e = f();
+    const e = b();
     return (n, s) => n.element.hasVisibleErrors ? (o(), l("div", {
       key: 0,
       role: "alert",
@@ -3760,21 +3797,21 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
         error: i,
         cssClasses: n.element.cssClasses
       }, null, 8, ["is", "element", "errorKey", "error", "cssClasses"]))), 128))
-    ], 10, Xn)) : m("", !0);
+    ], 10, st)) : m("", !0);
   }
-}), _n = { key: 0 }, xn = /* @__PURE__ */ y({
+}), tt = { key: 0 }, ot = /* @__PURE__ */ y({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(u) {
-    return (e, n) => e.question.isReadOnlyRenderDiv() ? (o(), l("div", _n, H(e.question.comment), 1)) : (o(), c(d, {
+    return (e, n) => e.question.isReadOnlyRenderDiv() ? (o(), l("div", tt, H(e.question.comment), 1)) : (o(), c(d, {
       key: 1,
       is: "sv-text-area",
       model: e.question.commentTextAreaModel
     }, null, 8, ["model"]));
   }
-}), et = /* @__PURE__ */ y({
+}), it = /* @__PURE__ */ y({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3784,7 +3821,7 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
     const e = (n) => {
       ye(n);
     };
-    return (n, s) => n.element.hasTitle ? (o(), c(ve(n.element.titleTagName), {
+    return (n, s) => n.element.hasTitle ? (o(), c(ce(n.element.titleTagName), {
       key: 0,
       class: r(n.element.cssTitle),
       "aria-label": n.element.titleAriaLabel,
@@ -3827,7 +3864,7 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       _: 1
     }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
   }
-}), st = { key: 3 }, nt = { key: 5 }, tt = { key: 7 }, ot = /* @__PURE__ */ y({
+}), rt = { key: 3 }, lt = { key: 5 }, at = { key: 7 }, ut = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3836,7 +3873,7 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = u;
-    return b(
+    return f(
       () => (e.element.isPanel ? e.element.cssClasses.panel : e.element.cssClasses) || {}
     ), (n, s) => (o(), l(I, null, [
       n.element.isTitleRenderedAsString ? (o(), c(d, {
@@ -3855,19 +3892,19 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
         class: r(n.element.cssTitleNumber),
         "aria-hidden": !0
       }, H(n.element.no), 3)) : m("", !0),
-      !n.element.isTitleRenderedAsString && n.element.no ? (o(), l("span", st, " ")) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.no ? (o(), l("span", rt, " ")) : m("", !0),
       !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (o(), l("span", {
         key: 4,
         class: r(n.element.cssRequiredMark),
         "aria-hidden": !0
       }, H(n.element.requiredMark), 3)) : m("", !0),
-      !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (o(), l("span", nt, " ")) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (o(), l("span", lt, " ")) : m("", !0),
       n.element.isTitleRenderedAsString ? m("", !0) : (o(), c(d, {
         key: 6,
         is: "survey-string",
         locString: n.element.locTitle
       }, null, 8, ["locString"])),
-      !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (o(), l("span", tt, " ")) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (o(), l("span", at, " ")) : m("", !0),
       !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (o(), l("span", {
         key: 8,
         class: r(n.element.cssRequiredMark),
@@ -3875,16 +3912,16 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
       }, H(n.element.requiredMark), 3)) : m("", !0)
     ], 64));
   }
-}), it = { class: "sv-title-actions" }, rt = { class: "sv-title-actions__title" }, lt = /* @__PURE__ */ y({
+}), dt = { class: "sv-title-actions" }, mt = { class: "sv-title-actions__title" }, pt = /* @__PURE__ */ y({
   __name: "TitleActions",
   props: {
     element: {},
     css: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.element.getTitleToolbar());
-    return (s, i) => (o(), l("div", it, [
-      v("span", rt, [
+    const e = u, n = f(() => e.element.getTitleToolbar());
+    return (s, i) => (o(), l("div", dt, [
+      v("span", mt, [
         s.element.isPage ? (o(), c(d, {
           key: 0,
           is: "survey-string",
@@ -3897,26 +3934,26 @@ const Fn = ["id"], zn = /* @__PURE__ */ y({
           css: s.css
         }, null, 8, ["element", "css"]))
       ]),
-      h(d, {
+      g(d, {
         is: "sv-action-bar",
         model: n.value
       }, null, 8, ["model"])
     ]));
   }
-}), at = (u, e) => {
+}), Ct = (u, e) => {
   const n = u.__vccOpts || u;
   for (const [s, i] of e)
     n[s] = i;
   return n;
-}, ut = {}, dt = { class: "sv-brand-info" }, mt = /* @__PURE__ */ Ze('<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), pt = [
-  mt
+}, vt = {}, ct = { class: "sv-brand-info" }, gt = /* @__PURE__ */ Ze('<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), ht = [
+  gt
 ];
-function Ct(u, e) {
-  return o(), l("div", dt, pt);
+function yt(u, e) {
+  return o(), l("div", ct, ht);
 }
-const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use", null, null, -1), gt = [
-  ct
-], ht = /* @__PURE__ */ y({
+const qt = /* @__PURE__ */ Ct(vt, [["render", yt]]), wt = /* @__PURE__ */ v("use", null, null, -1), Lt = [
+  wt
+], kt = /* @__PURE__ */ y({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3926,8 +3963,8 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     title: {}
   },
   setup(u) {
-    const e = u, n = f(), s = () => {
-      We(
+    const e = u, n = b(), s = () => {
+      Fe(
         e.size,
         e.width,
         e.height,
@@ -3938,16 +3975,16 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     };
     return j(() => {
       s();
-    }), $(() => {
+    }), Z(() => {
       s();
     }), (i, t) => (o(), l("svg", {
       ref_key: "svgIconElement",
       ref: n,
       class: "sv-svg-icon",
       role: "presentation"
-    }, gt, 512));
+    }, Lt, 512));
   }
-}), yt = /* @__PURE__ */ y({
+}), bt = /* @__PURE__ */ y({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -3968,14 +4005,14 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           e.cssClasses ? e.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
-        h(d, {
+        g(d, {
           is: "survey-string",
           locString: e.error.locText
         }, null, 8, ["locString"])
       ], 2)
     ]));
   }
-}), qt = /* @__PURE__ */ y({
+}), ft = /* @__PURE__ */ y({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3983,12 +4020,12 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     handleClick: { type: Boolean, default: !0 }
   },
   setup(u) {
-    const e = u, n = f(null), s = (t) => {
+    const e = u, n = b(null), s = (t) => {
       e.handleClick && t.stopPropagation();
     };
     V(() => e.model);
-    const i = ee(() => e.model.renderedActions);
-    return $(() => {
+    const i = se(() => e.model.renderedActions);
+    return Z(() => {
       e.model.hasActions && e.model.initResponsivityManager(n.value);
     }), P(() => {
       e.model.resetResponsivityManager();
@@ -4006,16 +4043,16 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       }, null, 8, ["item"]))), 128))
     ], 2)) : m("", !0);
   }
-}), wt = ["id"], Lt = { class: "sv-action__content" }, kt = /* @__PURE__ */ y({
+}), Mt = ["id"], Ht = { class: "sv-action__content" }, It = /* @__PURE__ */ y({
   __name: "Action",
   props: {
     item: {}
   },
   setup(u) {
-    const e = f(), n = u, s = b(
+    const e = b(), n = u, s = f(
       () => n.item.component || "sv-action-bar-item"
     );
-    return V(() => n.item), $(() => {
+    return V(() => n.item), Z(() => {
       const i = n.item;
       i.updateModeCallback = (t, a) => {
         i.mode = t, ge(() => {
@@ -4031,17 +4068,17 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       ref_key: "root",
       ref: e
     }, [
-      v("div", Lt, [
+      v("div", Ht, [
         i.item.needSeparator ? (o(), c(d, {
           key: 0,
           is: "sv-action-bar-separator"
         })) : m("", !0),
-        h(d, {
+        g(d, {
           is: s.value,
           item: i.item
         }, null, 8, ["is", "item"])
       ])
-    ], 10, wt));
+    ], 10, Mt));
   }
 }), U = {
   mounted: function(u, e) {
@@ -4056,15 +4093,15 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       return;
     }
     n.disableTabStop || (u.tabIndex = 0), u.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), ye(s, n), !1)), u.addEventListener("keydown", (s) => {
-      Fe(s, n);
+      ze(s, n);
     }), u.addEventListener("blur", (s) => {
-      ze(s);
+      Oe(s);
     });
   }
-}, ft = ["disabled", "title", "aria-checked", "aria-expanded", "role"], bt = {
+}, St = ["disabled", "title", "aria-checked", "aria-expanded", "role"], Vt = {
   inheritAttrs: !1
-}, Mt = /* @__PURE__ */ y({
-  ...bt,
+}, Bt = /* @__PURE__ */ y({
+  ...Vt,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -4104,14 +4141,14 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         key: 1,
         class: r(n.item.getActionBarItemTitleCss())
       }, H(n.item.title), 3)) : m("", !0)
-    ], 42, ft)), [
+    ], 42, St)), [
       [L(U), { processEsc: !1, disableTabStop: n.item.disableTabStop }]
     ]);
   }
-}), Ht = ["disabled", "title", "role"], It = {
+}), Rt = ["disabled", "title", "role"], Tt = {
   inheritAttrs: !1
-}, St = /* @__PURE__ */ y({
-  ...It,
+}, Zt = /* @__PURE__ */ y({
+  ...Tt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -4122,7 +4159,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     return V(
       () => e.item,
       (s) => {
-        n = new Oe(s);
+        n = new Ue(s);
       },
       () => {
         n.dispose();
@@ -4153,46 +4190,46 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           key: 1,
           class: r(s.item.getActionBarItemTitleCss())
         }, H(s.item.title), 3)) : m("", !0)
-      ], 42, Ht)), [
+      ], 42, Rt)), [
         [L(U), { processEsc: !1, disableTabStop: s.item.disableTabStop }]
       ]),
-      h(d, {
+      g(d, {
         is: "sv-popup",
         model: s.item.popupModel
       }, null, 8, ["model"])
     ], 64));
   }
-}), Vt = /* @__PURE__ */ y({
+}), $t = /* @__PURE__ */ y({
   __name: "ActionBarSeparator",
   props: {
     item: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.item && e.item.innerCss);
+    const e = u, n = f(() => e.item && e.item.innerCss);
     return (s, i) => (o(), l("div", {
       class: r(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), Bt = ["aria-label", "placeholder", "value"], Rt = ["aria-label"], Tt = ["id"], Zt = /* @__PURE__ */ y({
+}), Dt = ["aria-label", "placeholder", "value"], At = ["aria-label"], Nt = ["id"], Pt = /* @__PURE__ */ y({
   __name: "List",
   props: {
     model: {}
   },
   setup(u) {
-    const e = u, n = f(null), s = (p) => {
-      const g = e.model;
-      g.filterString = p.target.value;
+    const e = u, n = b(null), s = (p) => {
+      const h = e.model;
+      h.filterString = p.target.value;
     }, i = (p) => {
-      const g = e.model;
-      g.filterString = p.target.value, e.model.goToItems(p);
+      const h = e.model;
+      h.filterString = p.target.value, e.model.goToItems(p);
     }, t = (p) => {
       e.model.onMouseMove(p);
-    }, a = ee(() => e.model.renderedActions);
-    return V(() => e.model), $(() => {
+    }, a = se(() => e.model.renderedActions);
+    return V(() => e.model), Z(() => {
       e.model.initListContainerHtmlElement(n.value);
     }), P(() => {
       e.model && (e.model.removeScrollEventListener(), e.model.initListContainerHtmlElement(void 0));
-    }), (p, g) => (o(), l("div", {
+    }), (p, h) => (o(), l("div", {
       class: r(p.model.cssClasses.root),
       ref_key: "listContainerElement",
       ref: n
@@ -4204,7 +4241,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         v("div", {
           class: r(p.model.cssClasses.filterIcon)
         }, [
-          h(d, {
+          g(d, {
             is: "sv-svg-icon",
             iconName: "icon-search",
             size: "auto"
@@ -4218,15 +4255,15 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           value: p.model.filterString,
           onChange: s,
           onKeyup: i
-        }, null, 42, Bt),
+        }, null, 42, Dt),
         p.model.showSearchClearButton && p.model.filterString ? (o(), l("button", {
           key: 0,
-          onClick: g[0] || (g[0] = (C) => {
+          onClick: h[0] || (h[0] = (C) => {
             p.model.onClickSearchClearButton(C);
           }),
           class: r(p.model.cssClasses.searchClearButtonIcon)
         }, [
-          h(d, {
+          g(d, {
             is: "sv-svg-icon",
             iconName: "icon-searchclear",
             size: "auto"
@@ -4239,7 +4276,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         v("div", {
           class: r(p.model.cssClasses.emptyText),
           "aria-label": p.model.emptyMessage
-        }, H(p.model.emptyMessage), 11, Rt)
+        }, H(p.model.emptyMessage), 11, At)
       ], 2), [
         [N, p.model.isEmpty]
       ]),
@@ -4248,11 +4285,11 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         class: r(p.model.getListClass()),
         role: "listbox",
         id: p.model.elementId,
-        onMousedown: g[1] || (g[1] = (C) => {
+        onMousedown: h[1] || (h[1] = (C) => {
           C.preventDefault();
         }),
         onMousemove: t,
-        onKeydown: g[2] || (g[2] = (C) => {
+        onKeydown: h[2] || (h[2] = (C) => {
           p.model.onKeyDown(C);
         })
       }, [
@@ -4262,26 +4299,26 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           model: p.model,
           key: C.id
         }, null, 8, ["item", "model"]))), 128))
-      ], 42, Tt)), [
+      ], 42, Nt)), [
         [N, !p.model.isEmpty]
       ]) : m("", !0)
     ], 2));
   }
-}), $t = ["aria-selected", "id", "tabindex"], Dt = ["title"], At = /* @__PURE__ */ y({
+}), Et = ["aria-selected", "id", "tabindex"], Wt = ["title"], Ft = /* @__PURE__ */ y({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.item.elementId), s = (t) => {
+    const e = u, n = f(() => e.item.elementId), s = (t) => {
       e.model.onItemClick(e.item), t.stopPropagation();
     };
     V(() => e.item);
-    const i = b(
+    const i = f(
       () => e.item.component || e.model.itemComponent
     );
-    return $(() => {
+    return Z(() => {
       setTimeout(() => {
         e.model.onLastItemRended(e.item);
       });
@@ -4306,18 +4343,18 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         onMouseover: a[0] || (a[0] = (p) => t.model.onItemHover(t.item)),
         onMouseleave: a[1] || (a[1] = (p) => t.model.onItemLeave(t.item))
       }, [
-        h(d, {
+        g(d, {
           is: i.value,
           item: t.item,
           model: t.model
         }, null, 8, ["is", "item", "model"])
-      ], 46, Dt)
-    ], 42, $t)), [
+      ], 46, Wt)
+    ], 42, Et)), [
       [N, t.model.isItemVisible(t.item)],
       [L(U), { processEsc: !1, disableTabStop: t.item.disableTabStop }]
     ]);
   }
-}), Nt = /* @__PURE__ */ y({
+}), zt = /* @__PURE__ */ y({
   __name: "ListItemContent",
   props: {
     model: {},
@@ -4333,7 +4370,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         iconName: n.item.iconName,
         size: n.item.iconSize
       }, null, 8, ["class", "iconName", "size"])) : m("", !0),
-      h(d, {
+      g(d, {
         is: "survey-string",
         locString: n.item.locTitle
       }, null, 8, ["locString"]),
@@ -4346,7 +4383,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       }, null, 8, ["class", "iconName"])) : m("", !0)
     ], 64));
   }
-}), Pt = /* @__PURE__ */ y({
+}), Ot = /* @__PURE__ */ y({
   __name: "ListItemGroup",
   props: {
     model: {},
@@ -4355,34 +4392,34 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
   setup(u) {
     const e = u;
     return V(() => e.item), (n, s) => (o(), l(I, null, [
-      h(d, {
+      g(d, {
         is: "sv-list-item-content",
         item: n.item,
         model: n.model
       }, null, 8, ["item", "model"]),
-      h(d, {
+      g(d, {
         is: "sv-popup",
         model: n.item.popupModel
       }, null, 8, ["model"])
     ], 64));
   }
-}), Et = /* @__PURE__ */ y({
+}), Ut = /* @__PURE__ */ y({
   __name: "Popup",
   props: {
     model: {}
   },
   setup(u) {
-    const e = u, n = W(), s = f(null), i = () => {
+    const e = u, n = W(), s = b(null), i = () => {
       const t = s.value;
       t && n.value.setComponentElement(t);
     };
     return F(
       () => e.model,
       (t) => {
-        n.value && n.value.dispose(), n.value = Ue(t), i();
+        n.value && n.value.dispose(), n.value = Ke(t), i();
       },
       { immediate: !0 }
-    ), V(() => n.value), $(() => {
+    ), V(() => n.value), Z(() => {
       i();
     }), P(() => {
       n.value.dispose();
@@ -4390,19 +4427,19 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       ref_key: "root",
       ref: s
     }, [
-      h(d, {
+      g(d, {
         is: "sv-popup-container",
         model: n.value
       }, null, 8, ["model"])
     ], 512));
   }
-}), Wt = { class: "sv-popup__body-content" }, Ft = {
+}), Kt = { class: "sv-popup__body-content" }, jt = {
   key: 0,
   class: "sv-popup__body-header"
-}, zt = { class: "sv-popup__scrolling-content" }, Ot = { class: "sv-popup__content" }, Ut = {
+}, Qt = { class: "sv-popup__scrolling-content" }, Gt = { class: "sv-popup__content" }, Jt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Kt = /* @__PURE__ */ y({
+}, Xt = /* @__PURE__ */ y({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4414,7 +4451,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     return V(() => e.model), j(() => {
       const s = e.model;
       s.isVisible && !s.isPositionSet && e.model.updateOnShowing();
-    }), $(() => {
+    }), Z(() => {
       e.model.isVisible && e.model.updateOnShowing();
     }), (s, i) => R((o(), l("div", {
       tabindex: "-1",
@@ -4442,17 +4479,17 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           is: s.model.popupHeaderTemplate,
           model: s.model
         }, null, 8, ["is", "model"])) : m("", !0),
-        v("div", Wt, [
-          s.model.title ? (o(), l("div", Ft, H(s.model.title), 1)) : m("", !0),
-          v("div", zt, [
-            v("div", Ot, [
-              h(d, D({
+        v("div", Kt, [
+          s.model.title ? (o(), l("div", jt, H(s.model.title), 1)) : m("", !0),
+          v("div", Qt, [
+            v("div", Gt, [
+              g(d, D({
                 is: s.model.contentComponentName
               }, s.model.contentComponentData), null, 16, ["is"])
             ])
           ]),
-          s.model.showFooter ? (o(), l("div", Ut, [
-            h(d, {
+          s.model.showFooter ? (o(), l("div", Jt, [
+            g(d, {
               is: "sv-action-bar",
               model: s.model.footerToolbar
             }, null, 8, ["model"])
@@ -4463,7 +4500,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       [N, s.model.isVisible]
     ]);
   }
-}), jt = /* @__PURE__ */ y({
+}), Yt = /* @__PURE__ */ y({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4477,7 +4514,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       })
     }, null, 4));
   }
-}), Qt = /* @__PURE__ */ y({
+}), _t = /* @__PURE__ */ y({
   __name: "Container",
   props: {
     survey: {},
@@ -4485,7 +4522,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     needRenderWrapper: {}
   },
   setup(u) {
-    const e = u, n = b(
+    const e = u, n = f(
       () => e.survey.getContainerContent(e.container)
     );
     return (s, i) => n.value.length > 0 ? (o(), l(I, { key: 0 }, [
@@ -4517,7 +4554,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     css: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.survey.progressValue + "%"), s = (t) => de.getProgressTextInBarCss(t), i = (t) => de.getProgressTextUnderBarCss(t);
+    const e = u, n = f(() => e.survey.progressValue + "%"), s = (t) => me.getProgressTextInBarCss(t), i = (t) => me.getProgressTextUnderBarCss(t);
     return (t, a) => (o(), l("div", {
       class: r(t.survey.getProgressCssClasses(t.container))
     }, [
@@ -4538,7 +4575,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
       }, H(t.survey.progressText), 3)
     ], 2));
   }
-}), Gt = ["title"], Jt = ["onClick", "data-page-number"], Xt = ["title"], Yt = ["title"], _t = ["title"], xt = /* @__PURE__ */ y({
+}), xt = ["title"], eo = ["onClick", "data-page-number"], so = ["title"], no = ["title"], to = ["title"], oo = /* @__PURE__ */ y({
   __name: "ProgressButtons",
   props: {
     survey: {},
@@ -4546,15 +4583,15 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
     container: {}
   },
   setup(u) {
-    const e = u, n = f(!1), s = f(!1), i = f(!1), t = f(!0), a = f(), p = b(() => e.survey.css);
-    let g = null;
+    const e = u, n = b(!1), s = b(!1), i = b(!1), t = b(!0), a = b(), p = f(() => e.survey.css);
+    let h = null;
     const C = (q) => {
       let B = a.value;
       B.scrollLeft += (q ? -1 : 1) * 70;
     };
-    return $(() => {
+    return Z(() => {
       const q = a.value;
-      g = new Ke(e.model, q, {
+      h = new je(e.model, q, {
         onResize: (B) => {
           t.value = B, s.value = !B;
         },
@@ -4564,10 +4601,10 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         onUpdateSettings: () => {
           t.value = e.model.showItemTitles, i.value = !e.model.showItemTitles;
         },
-        container: b(() => e.container)
+        container: f(() => e.container)
       });
     }), z(() => {
-      g.dispose();
+      h.dispose();
     }), (q, B) => (o(), l("div", {
       class: r(q.model.getRootCss(q.container)),
       style: M({ maxWidth: q.model.progressWidth }),
@@ -4583,7 +4620,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         v("div", {
           class: r(q.survey.css.progressButtonsPageTitle),
           title: q.model.headerText
-        }, H(q.model.headerText), 11, Gt)
+        }, H(q.model.headerText), 11, xt)
       ], 2)) : m("", !0),
       v("div", {
         class: r(p.value.progressButtonsContainer)
@@ -4601,10 +4638,10 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
           v("ul", {
             class: r(p.value.progressButtonsList)
           }, [
-            (o(!0), l(I, null, S(q.survey.visiblePages, (k, Z) => (o(), l("li", {
-              key: "listelement" + Z,
-              class: r(q.model.getListElementCss(Z)),
-              onClick: (w) => q.model.isListElementClickable(Z) ? q.model.clickListElement(k) : null,
+            (o(!0), l(I, null, S(q.survey.visiblePages, (k, $) => (o(), l("li", {
+              key: "listelement" + $,
+              class: r(q.model.getListElementCss($)),
+              onClick: (w) => q.model.isListElementClickable($) ? q.model.clickListElement(k) : null,
               "data-page-number": q.model.getItemNumber(k)
             }, [
               v("div", {
@@ -4615,16 +4652,16 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
                 class: r(p.value.progressButtonsPageTitle),
                 title: k.renderedNavigationTitle
               }, [
-                h(d, {
+                g(d, {
                   is: "survey-string",
                   locString: k.locNavigationTitle
                 }, null, 8, ["locString"])
-              ], 10, Xt)) : m("", !0),
+              ], 10, so)) : m("", !0),
               t.value ? (o(), l("div", {
                 key: 1,
                 class: r(p.value.progressButtonsPageDescription),
                 title: k.locNavigationDescription.renderedHtml
-              }, H(k.locNavigationDescription.renderedHtml), 11, Yt)) : m("", !0),
+              }, H(k.locNavigationDescription.renderedHtml), 11, no)) : m("", !0),
               v("div", {
                 class: r(p.value.progressButtonsButton)
               }, [
@@ -4636,7 +4673,7 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
                 }, null, 2),
                 v("span", null, H(q.model.getItemNumber(k)), 1)
               ], 2)
-            ], 10, Jt))), 128))
+            ], 10, eo))), 128))
           ], 2)
         ], 2),
         v("div", {
@@ -4652,50 +4689,53 @@ const vt = /* @__PURE__ */ at(ut, [["render", Ct]]), ct = /* @__PURE__ */ v("use
         v("div", {
           class: r(q.survey.css.progressButtonsPageTitle),
           title: q.model.footerText
-        }, H(q.model.footerText), 11, _t)
+        }, H(q.model.footerText), 11, to)
       ], 2)) : m("", !0)
     ], 6));
   }
-}), eo = /* @__PURE__ */ y({
+}), io = /* @__PURE__ */ y({
   __name: "ProgressToc",
   props: {
     survey: {},
     model: {}
   },
   setup(u) {
-    return (e, n) => (o(), l("div", {
-      class: r(e.model.containerCss)
+    const e = u;
+    return Z(() => {
+      e.model.updateStickyTOCSize(e.survey.rootElement);
+    }), (n, s) => (o(), l("div", {
+      class: r(n.model.containerCss)
     }, [
-      e.model.isMobile ? R((o(), l("div", {
+      n.model.isMobile ? R((o(), l("div", {
         key: 0,
-        onClick: n[0] || (n[0] = //@ts-ignore
-        (...s) => e.model.togglePopup && e.model.togglePopup(...s))
+        onClick: s[0] || (s[0] = //@ts-ignore
+        (...i) => n.model.togglePopup && n.model.togglePopup(...i))
       }, [
-        h(d, {
+        g(d, {
           is: "sv-svg-icon",
-          iconName: e.model.icon,
+          iconName: n.model.icon,
           size: 24
         }, null, 8, ["iconName"]),
-        h(d, {
+        g(d, {
           is: "sv-popup",
-          model: e.model.popupModel
+          model: n.model.popupModel
         }, null, 8, ["model"])
       ])), [
         [L(U)]
       ]) : (o(), c(d, {
         key: 1,
         is: "sv-list",
-        model: e.model.listModel
+        model: n.model.listModel
       }, null, 8, ["model"]))
     ], 2));
   }
 });
 /*!
- * surveyjs - Survey JavaScript library v2.0.2
+ * surveyjs - Survey JavaScript library v2.0.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
-var so = {
+var ro = {
   modernbooleancheckchecked: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><polygon points="19,10 14,10 14,5 10,5 10,10 5,10 5,14 10,14 10,19 14,19 14,14 19,14 "></polygon></svg>',
   modernbooleancheckind: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M22,0H2C0.9,0,0,0.9,0,2v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V2C24,0.9,23.1,0,22,0z M21,18L6,3h15V18z M3,6l15,15H3V6z"></path></svg>',
   modernbooleancheckunchecked: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="4"></rect></svg>',
@@ -4757,7 +4797,7 @@ var so = {
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
 /*!
- * surveyjs - Survey JavaScript library v2.0.2
+ * surveyjs - Survey JavaScript library v2.0.4
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -4822,50 +4862,50 @@ var ke = {
   "smiley-rate8-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85721 24 1.15412 20.96 0.0134987 14.16C-0.0765501 13.62 0.293651 13.1 0.833944 13.01C1.38424 12.92 1.89452 13.29 1.98457 13.83C2.92508 19.47 7.69767 21.99 12 21.99C16.3023 21.99 21.0749 19.47 22.0154 13.83C22.1055 13.29 22.6158 12.92 23.1661 13.01C23.7063 13.1 24.0765 13.62 23.9865 14.16C22.8559 20.95 17.1428 24 11.99 24H12.01ZM8.00783 6V2C8.00783 1.45 7.55759 1 7.00729 1C6.45699 1 6.00675 1.45 6.00675 2V6C6.00675 6.55 6.45699 7 7.00729 7C7.55759 7 8.00783 6.55 8.00783 6ZM18.0133 6V2C18.0133 1.45 17.563 1 17.0127 1C16.4624 1 16.0122 1.45 16.0122 2V6C16.0122 6.55 16.4624 7 17.0127 7C17.563 7 18.0133 6.55 18.0133 6Z"></path></svg>',
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
-const no = ["lang", "dir"], to = { onsubmit: "return false;" }, oo = {
+const lo = ["lang", "dir"], ao = { onsubmit: "return false;" }, uo = {
   key: 0,
   class: "sv_custom_header"
-}, io = { class: "sv-components-column sv-components-column--expandable" }, ro = ["id"], lo = { key: 2 }, ao = ["innerHTML"], uo = ["innerHTML"], mo = ["innerHTML"];
-qe("v1", so);
+}, mo = { class: "sv-components-column sv-components-column--expandable" }, po = ["id"], Co = { key: 2 }, vo = ["innerHTML"], co = ["innerHTML"], go = ["innerHTML"];
+qe("v1", ro);
 qe("v2", ke);
 X.registerIcons(ke);
-const re = /* @__PURE__ */ y({
+const le = /* @__PURE__ */ y({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(u) {
-    const e = u, n = f(), s = f(""), i = f(1), t = b(() => {
-      const Z = e.survey ? e.survey : e.model;
-      return $e(Z);
-    }), a = b(() => t.value.activePage ? t.value.activePage.id : ""), p = () => {
-      const Z = a.value;
-      return !!t.value && Z + i.value.toString();
-    }, g = b(
+    const e = u, n = b(), s = b(""), i = b(1), t = f(() => {
+      const $ = e.survey ? e.survey : e.model;
+      return $e($);
+    }), a = f(() => t.value.activePage ? t.value.activePage.id : ""), p = () => {
+      const $ = a.value;
+      return !!t.value && $ + i.value.toString();
+    }, h = f(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), C = b(() => t.value.css), q = b(() => "page" + p()), B = () => g.value ? (s.value || (s.value = t.value.processedCompletedHtml), s.value) : "", k = (Z) => {
-      if (Z) {
+    ), C = f(() => t.value.css), q = f(() => "page" + p()), B = () => h.value ? (s.value || (s.value = t.value.processedCompletedHtml), s.value) : "", k = ($) => {
+      if ($) {
         var w = n.value;
-        w && Z.afterRenderSurvey(w), Z.renderCallback = () => {
-          var A, le;
-          i.value++, (le = (A = he()) == null ? void 0 : A.proxy) == null || le.$forceUpdate();
-        }, Z.startTimerFromUI();
+        w && $.afterRenderSurvey(w), $.renderCallback = () => {
+          var A, ae;
+          i.value++, (ae = (A = he()) == null ? void 0 : A.proxy) == null || ae.$forceUpdate();
+        }, $.startTimerFromUI();
       }
     };
     return V(
       () => t.value,
-      (Z, w) => {
-        Z && w && k(Z);
+      ($, w) => {
+        $ && w && k($);
       },
-      (Z) => {
-        Z.stopTimer(), Z.renderCallback = void 0;
+      ($) => {
+        $.stopTimer(), $.renderCallback = void 0;
       }
-    ), $(() => {
+    ), Z(() => {
       k(t.value);
     }), P(() => {
       t.value.stopTimer(), t.value.beforeDestroySurveyElement(), t.value.renderCallback = void 0;
-    }), (Z, w) => (o(), l("div", {
+    }), ($, w) => (o(), l("div", {
       class: r(t.value.getRootCss()),
       style: M(t.value.themeVariables),
       lang: t.value.locale || "en",
@@ -4873,131 +4913,147 @@ const re = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      t.value.needRenderIcons ? (o(), c(d, {
-        key: 0,
-        is: "sv-svg-bundle"
-      })) : m("", !0),
-      v("div", {
-        class: r(t.value.wrapperFormCss)
-      }, [
-        h(d, { is: "survey-popup-modal" }),
-        t.value.renderBackgroundImage ? (o(), l("div", {
-          key: 0,
-          class: r(C.value.rootBackgroundImage),
-          style: M(t.value.backgroundImageStyle)
-        }, null, 6)) : m("", !0),
-        v("form", to, [
-          t.value.hasLogo ? m("", !0) : (o(), l("div", oo)),
+      g(d, {
+        is: "sv-scroll",
+        disabled: t.value.rootScrollDisabled
+      }, {
+        default: E(() => [
+          t.value.needRenderIcons ? (o(), c(d, {
+            key: 0,
+            is: "sv-svg-bundle"
+          })) : m("", !0),
           v("div", {
-            class: r(C.value.container)
+            class: r(t.value.wrapperFormCss)
           }, [
-            t.value.headerView === "basic" ? (o(), c(d, {
+            g(d, { is: "survey-popup-modal" }),
+            t.value.renderBackgroundImage ? (o(), l("div", {
               key: 0,
-              is: "survey-header",
-              survey: t.value
-            }, null, 8, ["survey"])) : m("", !0),
-            h(d, {
-              is: "sv-components-container",
-              survey: t.value,
-              container: "header",
-              needRenderWrapper: !1
-            }, null, 8, ["survey"]),
-            t.value.isShowingPage ? (o(), l("div", {
-              key: 1,
-              class: r(t.value.bodyContainerCss)
-            }, [
-              h(d, {
-                is: "sv-components-container",
-                survey: t.value,
-                container: "left",
-                needRenderWrapper: !0
-              }, null, 8, ["survey"]),
-              v("div", io, [
-                h(d, {
-                  is: "sv-components-container",
-                  survey: t.value,
-                  container: "center",
-                  needRenderWrapper: !0
-                }, null, 8, ["survey"]),
-                v("div", {
-                  class: r(t.value.bodyCss),
-                  style: M({ maxWidth: t.value.renderedWidth }),
-                  id: a.value
-                }, [
-                  h(d, {
-                    is: "sv-components-container",
-                    survey: t.value,
-                    container: "contentTop",
-                    needRenderWrapper: !0
-                  }, null, 8, ["survey"]),
-                  (o(), c(d, {
-                    is: "survey-page",
-                    key: q.value,
-                    survey: t.value,
-                    page: t.value.activePage,
-                    css: C.value
-                  }, null, 8, ["survey", "page", "css"])),
-                  h(d, {
-                    is: "sv-components-container",
-                    survey: t.value,
-                    container: "contentBottom",
-                    needRenderWrapper: !0
-                  }, null, 8, ["survey"]),
-                  t.value.showBrandInfo ? (o(), c(d, {
-                    key: 0,
-                    is: "sv-brand-info"
-                  })) : m("", !0)
-                ], 14, ro)
-              ]),
-              h(d, {
-                is: "sv-components-container",
-                survey: t.value,
-                container: "right",
-                needRenderWrapper: !0
-              }, null, 8, ["survey"])
-            ], 2)) : m("", !0),
-            h(d, {
-              is: "sv-components-container",
-              survey: t.value,
-              container: "footer",
-              needRenderWrapper: !1
-            }, null, 8, ["survey"]),
-            g.value ? (o(), l("div", lo, [
-              v("div", {
-                innerHTML: B(),
-                class: r(t.value.completedCss)
-              }, null, 10, ao),
-              h(d, {
-                is: "sv-components-container",
-                survey: t.value,
-                container: "completePage",
-                needRenderWrapper: !0
-              }, null, 8, ["survey"])
-            ])) : m("", !0),
-            t.value.state === "completedbefore" ? (o(), l("div", {
-              key: 3,
-              class: r(t.value.completedBeforeCss),
-              innerHTML: t.value.processedCompletedBeforeHtml
-            }, null, 10, uo)) : m("", !0),
-            t.value.state === "loading" ? (o(), l("div", {
-              key: 4,
-              class: r(t.value.loadingBodyCss),
-              innerHTML: t.value.processedLoadingHtml
-            }, null, 10, mo)) : m("", !0),
-            t.value.state === "empty" ? (o(), l("div", {
-              key: 5,
-              class: r(C.value.bodyEmpty)
-            }, H(t.value.emptySurveyText), 3)) : m("", !0)
+              class: r(C.value.rootBackgroundImage),
+              style: M(t.value.backgroundImageStyle)
+            }, null, 6)) : m("", !0),
+            v("form", ao, [
+              g(d, {
+                is: "sv-scroll",
+                disabled: t.value.formScrollDisabled
+              }, {
+                default: E(() => [
+                  t.value.hasLogo ? m("", !0) : (o(), l("div", uo)),
+                  v("div", {
+                    class: r(C.value.container)
+                  }, [
+                    t.value.headerView === "basic" ? (o(), c(d, {
+                      key: 0,
+                      is: "survey-header",
+                      survey: t.value
+                    }, null, 8, ["survey"])) : m("", !0),
+                    g(d, {
+                      is: "sv-components-container",
+                      survey: t.value,
+                      container: "header",
+                      needRenderWrapper: !1
+                    }, null, 8, ["survey"]),
+                    t.value.isShowingPage ? (o(), l("div", {
+                      key: 1,
+                      class: r(t.value.bodyContainerCss)
+                    }, [
+                      g(d, {
+                        is: "sv-components-container",
+                        survey: t.value,
+                        container: "left",
+                        needRenderWrapper: !0
+                      }, null, 8, ["survey"]),
+                      v("div", mo, [
+                        g(d, {
+                          is: "sv-components-container",
+                          survey: t.value,
+                          container: "center",
+                          needRenderWrapper: !0
+                        }, null, 8, ["survey"]),
+                        v("div", {
+                          class: r(t.value.bodyCss),
+                          style: M({ maxWidth: t.value.renderedWidth }),
+                          id: a.value
+                        }, [
+                          g(d, {
+                            is: "sv-components-container",
+                            survey: t.value,
+                            container: "contentTop",
+                            needRenderWrapper: !0
+                          }, null, 8, ["survey"]),
+                          (o(), c(d, {
+                            is: "survey-page",
+                            key: q.value,
+                            survey: t.value,
+                            page: t.value.activePage,
+                            css: C.value
+                          }, null, 8, ["survey", "page", "css"])),
+                          g(d, {
+                            is: "sv-components-container",
+                            survey: t.value,
+                            container: "contentBottom",
+                            needRenderWrapper: !0
+                          }, null, 8, ["survey"]),
+                          t.value.showBrandInfo ? (o(), c(d, {
+                            key: 0,
+                            is: "sv-brand-info"
+                          })) : m("", !0)
+                        ], 14, po)
+                      ]),
+                      g(d, {
+                        is: "sv-components-container",
+                        survey: t.value,
+                        container: "right",
+                        needRenderWrapper: !0
+                      }, null, 8, ["survey"])
+                    ], 2)) : m("", !0),
+                    g(d, {
+                      is: "sv-components-container",
+                      survey: t.value,
+                      container: "footer",
+                      needRenderWrapper: !1
+                    }, null, 8, ["survey"]),
+                    h.value ? (o(), l("div", Co, [
+                      v("div", {
+                        innerHTML: B(),
+                        class: r(t.value.completedCss)
+                      }, null, 10, vo),
+                      g(d, {
+                        is: "sv-components-container",
+                        survey: t.value,
+                        container: "completePage",
+                        needRenderWrapper: !0
+                      }, null, 8, ["survey"])
+                    ])) : m("", !0),
+                    t.value.state === "completedbefore" ? (o(), l("div", {
+                      key: 3,
+                      class: r(t.value.completedBeforeCss),
+                      innerHTML: t.value.processedCompletedBeforeHtml
+                    }, null, 10, co)) : m("", !0),
+                    t.value.state === "loading" ? (o(), l("div", {
+                      key: 4,
+                      class: r(t.value.loadingBodyCss),
+                      innerHTML: t.value.processedLoadingHtml
+                    }, null, 10, go)) : m("", !0),
+                    t.value.state === "empty" ? (o(), l("div", {
+                      key: 5,
+                      class: r(C.value.bodyEmpty)
+                    }, H(t.value.emptySurveyText), 3)) : m("", !0)
+                  ], 2)
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            g(d, {
+              is: "sv-notifier",
+              model: t.value.notifier
+            }, null, 8, ["model"])
           ], 2)
         ]),
-        h(d, {
-          is: "sv-notifier",
-          model: t.value.notifier
-        }, null, 8, ["model"])
-      ], 2)
-    ], 14, no));
+        _: 1
+      }, 8, ["disabled"])
+    ], 14, lo));
   }
-}), po = /* @__PURE__ */ y({
+}), ho = /* @__PURE__ */ y({
   __name: "Notifier",
   props: {
     model: {}
@@ -5012,13 +5068,13 @@ const re = /* @__PURE__ */ y({
       "aria-live": "polite"
     }, [
       v("span", null, H(n.model.message), 1),
-      h(d, {
+      g(d, {
         is: "sv-action-bar",
         model: n.model.actionBar
       }, null, 8, ["model"])
     ], 6)) : m("", !0);
   }
-}), Co = { key: 0 }, vo = /* @__PURE__ */ y({
+}), yo = { key: 0 }, qo = /* @__PURE__ */ y({
   __name: "QuestionOther",
   props: {
     question: {}
@@ -5027,14 +5083,14 @@ const re = /* @__PURE__ */ y({
     return (e, n) => (o(), l("div", {
       class: r(e.question.getCommentAreaCss(!0))
     }, [
-      e.question.isReadOnlyRenderDiv() ? (o(), l("div", Co, H(e.question.otherValue), 1)) : (o(), c(d, {
+      e.question.isReadOnlyRenderDiv() ? (o(), l("div", yo, H(e.question.otherValue), 1)) : (o(), c(d, {
         key: 1,
         is: "sv-text-area",
         model: e.question.otherTextAreaModel
       }, null, 8, ["model"]))
     ], 2));
   }
-}), co = ["disabled", "value", "title"], go = /* @__PURE__ */ y({
+}), wo = ["disabled", "value", "title"], Lo = /* @__PURE__ */ y({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -5051,9 +5107,9 @@ const re = /* @__PURE__ */ y({
       onMousedown: n,
       onClick: i[0] || (i[0] = //@ts-ignore
       (...t) => s.item.action && s.item.action(...t))
-    }, null, 42, co)) : m("", !0);
+    }, null, 42, wo)) : m("", !0);
   }
-}), fe = /* @__PURE__ */ y({
+}), be = /* @__PURE__ */ y({
   __name: "PopupSurvey",
   props: {
     survey: {},
@@ -5077,10 +5133,10 @@ const re = /* @__PURE__ */ y({
       return n.value.isCollapsed && (C += " " + n.value.cssRootCollapsedMod), C;
     };
     V(() => n.value);
-    const g = F(
+    const h = F(
       () => e.survey,
       (C) => {
-        const q = new je(null, C);
+        const q = new Qe(null, C);
         e.isExpanded !== void 0 && (q.isExpanded = e.isExpanded), e.closeOnCompleteTimeout !== void 0 && (q.closeOnCompleteTimeout = e.closeOnCompleteTimeout), e.allowClose !== void 0 && (q.allowClose = e.allowClose), e.allowFullScreen !== void 0 && (q.allowFullScreen = e.allowFullScreen), q.isShowing = !0, n.value = q;
       },
       {
@@ -5088,7 +5144,7 @@ const re = /* @__PURE__ */ y({
       }
     );
     return P(() => {
-      g();
+      h();
     }), (C, q) => n.value.isShowing ? (o(), l("div", {
       key: 0,
       style: M({
@@ -5151,7 +5207,7 @@ const re = /* @__PURE__ */ y({
               class: r(n.value.cssHeaderCloseButton),
               onClick: i
             }, [
-              h(d, {
+              g(d, {
                 is: "sv-svg-icon",
                 iconName: "icon-close_16x16",
                 size: 16
@@ -5162,35 +5218,35 @@ const re = /* @__PURE__ */ y({
         v("div", {
           class: r(n.value.cssBody)
         }, [
-          h(re, { survey: C.survey }, null, 8, ["survey"])
+          g(le, { survey: C.survey }, null, 8, ["survey"])
         ], 2)
       ], 2)
     ], 38)) : m("", !0);
   }
-}), ho = ["innerHTML"], yo = /* @__PURE__ */ y({
+}), ko = ["innerHTML"], bo = /* @__PURE__ */ y({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(u) {
-    const e = u, n = f(), s = b(
+    const e = u, n = b(), s = f(
       () => e.question.customWidget.isDefaultRender
-    ), i = b(
+    ), i = f(
       () => !!e.question.customWidget.htmlTemplate
-    ), t = b(() => e.question.customWidget.htmlTemplate), a = b(() => "survey-" + e.question.getTemplate());
-    return $(() => {
+    ), t = f(() => e.question.customWidget.htmlTemplate), a = f(() => "survey-" + e.question.getTemplate());
+    return Z(() => {
       e.question.customWidget.afterRender(e.question, n.value);
     }), z(() => {
       e.question.customWidget.willUnmount(e.question, n.value);
-    }), (p, g) => (o(), l("div", {
+    }), (p, h) => (o(), l("div", {
       ref_key: "root",
       ref: n
     }, [
       i.value ? (o(), l("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, ho)) : m("", !0),
+      }, null, 8, ko)) : m("", !0),
       s.value ? (o(), c(d, {
         key: 1,
         is: a.value,
@@ -5199,41 +5255,41 @@ const re = /* @__PURE__ */ y({
       }, null, 8, ["is", "question", "css"])) : m("", !0)
     ], 512));
   }
-}), qo = /* @__PURE__ */ y({
+}), fo = /* @__PURE__ */ y({
   __name: "PopupModal",
   setup(u) {
     const e = W();
     function n(s, i) {
-      const t = Qe(
+      const t = Ge(
         s,
         i
-      ), a = (p, g) => {
-        g.isVisible || (e.value = void 0, t.dispose(), t.onVisibilityChanged.remove(a));
+      ), a = (p, h) => {
+        h.isVisible || (e.value = void 0, t.dispose(), t.onVisibilityChanged.remove(a));
       };
       return t.onVisibilityChanged.add(a), t.model.isVisible = !0, e.value = t, t;
     }
-    return se.showDialog || (se.showDialog = n, P(() => {
-      se.showDialog = void 0;
+    return ne.showDialog || (ne.showDialog = n, P(() => {
+      ne.showDialog = void 0;
     })), (s, i) => e.value ? (o(), c(De, {
       key: 0,
       to: e.value.container
     }, [
-      h(d, {
+      g(d, {
         is: "sv-popup-container",
         model: e.value
       }, null, 8, ["model"])
     ], 8, ["to"])) : m("", !0);
   }
-}), wo = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Lo = /* @__PURE__ */ y({
+}), Mo = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Ho = /* @__PURE__ */ y({
   __name: "TextArea",
   props: {
     model: {}
   },
   setup(u) {
-    const e = u, n = f(
+    const e = u, n = b(
       null
-    ), s = b(() => e.model.getTextValue() || "");
-    return $(() => {
+    ), s = f(() => e.model.getTextValue() || "");
+    return Z(() => {
       e.model.setElement(n.value);
     }), j(() => {
       e.model.setElement(n.value);
@@ -5273,9 +5329,9 @@ const re = /* @__PURE__ */ y({
       "aria-invalid": i.model.ariaInvalid,
       "aria-errormessage": i.model.ariaErrormessage,
       style: M({ resize: i.model.question.resizeStyle })
-    }, null, 46, wo));
+    }, null, 46, Mo));
   }
-}), ko = /* @__PURE__ */ y({
+}), Io = /* @__PURE__ */ y({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -5287,7 +5343,7 @@ const re = /* @__PURE__ */ y({
       class: r(n.remainingCharacterCounter)
     }, H(n.counter.remainingCharacterCounter), 3));
   }
-}), fo = /* @__PURE__ */ y({
+}), So = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -5295,9 +5351,9 @@ const re = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
-    const s = b(() => e.question.contentPanel);
+    const s = f(() => e.question.contentPanel);
     return (i, t) => (o(), c(d, {
       is: "survey-panel",
       ref_key: "root",
@@ -5306,7 +5362,7 @@ const re = /* @__PURE__ */ y({
       css: i.css
     }, null, 8, ["element", "css"]));
   }
-}), bo = /* @__PURE__ */ y({
+}), Vo = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -5314,9 +5370,9 @@ const re = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(null);
+    const e = u, n = b(null);
     T(e, n);
-    const s = b(() => e.question.contentQuestion), i = (t) => oe(t);
+    const s = f(() => e.question.contentQuestion), i = (t) => ie(t);
     return (t, a) => (o(), c(d, {
       ref: n.value,
       is: i(s.value),
@@ -5324,16 +5380,16 @@ const re = /* @__PURE__ */ y({
       css: t.css
     }, null, 8, ["is", "question", "css"]));
   }
-}), Mo = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), Ho = [
-  Mo
-], Ce = 440, Io = /* @__PURE__ */ y({
+}), Bo = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), Ro = [
+  Bo
+], ve = 440, To = /* @__PURE__ */ y({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(u) {
-    const e = u, n = b(() => Ce * e.model.progress), s = b(() => e.model.text);
+    const e = u, n = f(() => ve * e.model.progress), s = f(() => e.model.text);
     return V(() => e.model), (i, t) => i.model.isRunning && i.model.showTimerAsClock ? (o(), l("div", {
       key: 0,
       class: r(i.model.rootCss)
@@ -5341,8 +5397,8 @@ const re = /* @__PURE__ */ y({
       i.model.showProgress ? (o(), l("svg", {
         key: 0,
         class: r(i.model.getProgressCss()),
-        style: M({ strokeDasharray: Ce, strokeDashoffset: n.value })
-      }, Ho, 6)) : m("", !0),
+        style: M({ strokeDasharray: ve, strokeDashoffset: n.value })
+      }, Ro, 6)) : m("", !0),
       v("div", {
         class: r(i.model.textContainerCss)
       }, [
@@ -5361,18 +5417,18 @@ const re = /* @__PURE__ */ y({
       [N, i.model.isRunning && !i.model.showTimerAsClock]
     ]);
   }
-}), So = { class: "sd-loading-indicator" }, Vo = /* @__PURE__ */ y({
+}), Zo = { class: "sd-loading-indicator" }, $o = /* @__PURE__ */ y({
   __name: "LoadingIndicator",
   setup(u) {
-    return (e, n) => (o(), l("div", So, [
-      h(d, {
+    return (e, n) => (o(), l("div", Zo, [
+      g(d, {
         is: "sv-svg-icon",
         iconName: "icon-loading",
         size: "'auto'"
       })
     ]));
   }
-}), Bo = { key: 2 }, Ro = /* @__PURE__ */ y({
+}), Do = { key: 2 }, Ao = /* @__PURE__ */ y({
   __name: "Header",
   props: {
     model: {},
@@ -5383,7 +5439,7 @@ const re = /* @__PURE__ */ y({
     return V(() => {
       const n = e.model;
       return n.survey = e.survey, e.model;
-    }), $(() => {
+    }), Z(() => {
       e.model.processResponsiveness();
     }), j(() => {
       e.model.processResponsiveness();
@@ -5408,18 +5464,18 @@ const re = /* @__PURE__ */ y({
           key: t
         }, null, 8, ["model"]))), 128))
       ], 6)),
-      n.survey.isMobile ? (o(), l("div", Bo, [
-        h(d, {
+      n.survey.isMobile ? (o(), l("div", Do, [
+        g(d, {
           is: "sv-header-mobile",
           model: n.model
         }, null, 8, ["model"])
       ])) : m("", !0)
     ], 6)) : m("", !0);
   }
-}), To = {
+}), No = {
   key: 0,
   class: "sv-header__logo"
-}, Zo = ["src", "width", "height", "alt"], $o = /* @__PURE__ */ y({
+}, Po = ["src", "width", "height", "alt"], Eo = /* @__PURE__ */ y({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -5433,7 +5489,7 @@ const re = /* @__PURE__ */ y({
         class: "sv-header__cell-content",
         style: M(e.model.contentStyle)
       }, [
-        e.model.showLogo ? (o(), l("div", To, [
+        e.model.showLogo ? (o(), l("div", No, [
           v("div", {
             class: r(e.model.survey.logoClassNames)
           }, [
@@ -5444,7 +5500,7 @@ const re = /* @__PURE__ */ y({
               height: e.model.survey.renderedLogoHeight,
               alt: e.model.survey.locTitle.renderedHtml,
               style: M({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-            }, null, 14, Zo)
+            }, null, 14, Po)
           ], 2)
         ])) : m("", !0),
         e.model.showTitle ? (o(), l("div", {
@@ -5452,7 +5508,7 @@ const re = /* @__PURE__ */ y({
           class: "sv-header__title",
           style: M({ maxWidth: e.model.textAreaWidth })
         }, [
-          h(d, {
+          g(d, {
             is: "survey-element-title",
             element: e.model.survey,
             css: e.model.survey.css
@@ -5467,7 +5523,7 @@ const re = /* @__PURE__ */ y({
             key: 0,
             class: r(e.model.survey.css.description)
           }, [
-            h(d, {
+            g(d, {
               is: "survey-string",
               locString: e.model.survey.locDescription
             }, null, 8, ["locString"])
@@ -5476,17 +5532,17 @@ const re = /* @__PURE__ */ y({
       ], 4)
     ], 6));
   }
-}), Do = { class: "sv-header--mobile" }, Ao = {
+}), Wo = { class: "sv-header--mobile" }, Fo = {
   key: 0,
   class: "sv-header__logo"
-}, No = ["src", "width", "height", "alt"], Po = /* @__PURE__ */ y({
+}, zo = ["src", "width", "height", "alt"], Oo = /* @__PURE__ */ y({
   __name: "HeaderMobile",
   props: {
     model: {}
   },
   setup(u) {
-    return (e, n) => (o(), l("div", Do, [
-      e.model.survey.hasLogo ? (o(), l("div", Ao, [
+    return (e, n) => (o(), l("div", Wo, [
+      e.model.survey.hasLogo ? (o(), l("div", Fo, [
         v("div", {
           class: r(e.model.survey.logoClassNames)
         }, [
@@ -5497,7 +5553,7 @@ const re = /* @__PURE__ */ y({
             height: e.model.survey.renderedLogoHeight,
             alt: e.model.survey.locTitle.renderedHtml,
             style: M({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-          }, null, 14, No)
+          }, null, 14, zo)
         ], 2)
       ])) : m("", !0),
       e.model.survey.hasTitle ? (o(), l("div", {
@@ -5505,7 +5561,7 @@ const re = /* @__PURE__ */ y({
         class: "sv-header__title",
         style: M({ maxWidth: e.model.renderedTextAreaWidth })
       }, [
-        h(d, {
+        g(d, {
           is: "survey-element-title",
           element: e.model.survey,
           css: e.model.survey.css
@@ -5520,7 +5576,7 @@ const re = /* @__PURE__ */ y({
           key: 0,
           class: r(e.model.survey.css.description)
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: e.model.survey.locDescription
           }, null, 8, ["locString"])
@@ -5528,7 +5584,7 @@ const re = /* @__PURE__ */ y({
       ], 4)) : m("", !0)
     ]));
   }
-}), Eo = /* @__PURE__ */ y({
+}), Uo = /* @__PURE__ */ y({
   __name: "Element",
   props: {
     element: {},
@@ -5536,21 +5592,21 @@ const re = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = f(), s = (g) => g.isPanel ? "survey-panel" : "survey-question", i = b(() => {
-      const g = e.element.survey;
-      if (g) {
-        const C = g.getElementWrapperComponentName(e.element);
+    const e = u, n = b(), s = (h) => h.isPanel ? "survey-panel" : "survey-question", i = f(() => {
+      const h = e.element.survey;
+      if (h) {
+        const C = h.getElementWrapperComponentName(e.element);
         if (C)
           return C;
       }
       return s(e.element);
-    }), t = (g) => g.cssClasses ? g.rootStyle : {}, a = b(() => {
-      const g = e.element, C = g.survey;
+    }), t = (h) => h.cssClasses ? h.rootStyle : {}, a = f(() => {
+      const h = e.element, C = h.survey;
       let q;
-      return C && (q = C.getElementWrapperComponentData(g)), {
-        componentName: s(g),
+      return C && (q = C.getElementWrapperComponentData(h)), {
+        componentName: s(h),
         componentData: {
-          element: g,
+          element: h,
           survey: C,
           row: e.row,
           css: e.css,
@@ -5559,45 +5615,45 @@ const re = /* @__PURE__ */ y({
       };
     }), p = F(
       () => e.element,
-      (g, C) => {
-        C && C.setWrapperElement(void 0), g.setWrapperElement(n.value);
+      (h, C) => {
+        C && C.setWrapperElement(void 0), h.setWrapperElement(n.value);
       }
     );
-    return $(() => {
+    return Z(() => {
       e.element.setWrapperElement(n.value);
     }), P(() => {
       e.element.setWrapperElement(void 0), p();
-    }), (g, C) => (o(), l("div", {
+    }), (h, C) => (o(), l("div", {
       ref_key: "root",
       ref: n,
-      style: M(t(g.element)),
-      class: r(g.element.cssClasses.questionWrapper)
+      style: M(t(h.element)),
+      class: r(h.element.cssClasses.questionWrapper)
     }, [
-      g.row.isNeedRender ? (o(), c(d, D({
+      h.row.isNeedRender ? (o(), c(d, D({
         key: 0,
         is: i.value
-      }, a.value), null, 16, ["is"])) : g.element.skeletonComponentName ? (o(), c(d, {
+      }, a.value), null, 16, ["is"])) : h.element.skeletonComponentName ? (o(), c(d, {
         key: 1,
-        is: g.element.skeletonComponentName,
-        element: g.element,
-        css: g.css
+        is: h.element.skeletonComponentName,
+        element: h.element,
+        css: h.css
       }, null, 8, ["is", "element", "css"])) : m("", !0)
     ], 6));
   }
-}), Wo = /* @__PURE__ */ y({
+}), Ko = /* @__PURE__ */ y({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const e = Ae(), n = b(() => !!e.default);
-    return (s, i) => n.value && !s.componentName ? ce(s.$slots, "default", { key: 0 }) : (o(), c(d, D({
+    const e = Ae(), n = f(() => !!e.default);
+    return (s, i) => n.value && !s.componentName ? Y(s.$slots, "default", { key: 0 }) : (o(), c(d, D({
       key: 1,
       is: s.componentName
     }, s.componentData), null, 16, ["is"]));
   }
-}), Fo = /* @__PURE__ */ y({
+}), jo = /* @__PURE__ */ y({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5620,7 +5676,7 @@ const re = /* @__PURE__ */ y({
       }, null, 8, ["iconName", "title"])) : m("", !0)
     ], 2));
   }
-}), zo = ["id"], Oo = /* @__PURE__ */ y({
+}), Qo = ["id"], Go = /* @__PURE__ */ y({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5629,11 +5685,11 @@ const re = /* @__PURE__ */ y({
     return (e, n) => (o(), l("div", {
       class: r(e.question.cssClasses.videoContainer)
     }, [
-      h(d, {
+      g(d, {
         is: "sv-action",
         item: e.question.changeCameraAction
       }, null, 8, ["item"]),
-      h(d, {
+      g(d, {
         is: "sv-action",
         item: e.question.closeCameraAction
       }, null, 8, ["item"]),
@@ -5642,21 +5698,21 @@ const re = /* @__PURE__ */ y({
         playsinline: "",
         id: e.question.videoId,
         class: r(e.question.cssClasses.video)
-      }, null, 10, zo),
-      h(d, {
+      }, null, 10, Qo),
+      g(d, {
         is: "sv-action",
         item: e.question.takePictureAction
       }, null, 8, ["item"])
     ], 2));
   }
-}), Uo = ["for", "aria-label"], Ko = /* @__PURE__ */ y({
+}), Jo = ["for", "aria-label"], Xo = /* @__PURE__ */ y({
   __name: "FileChooseButton",
   props: {
     data: {},
     item: {}
   },
   setup(u) {
-    const e = u, n = b(
+    const e = u, n = f(
       () => {
         var s, i;
         return ((s = e.data) == null ? void 0 : s.question) || ((i = e.item) == null ? void 0 : i.data.question);
@@ -5677,11 +5733,11 @@ const re = /* @__PURE__ */ y({
         size: "auto"
       }, null, 8, ["title", "iconName"])) : m("", !0),
       v("span", null, H(n.value.chooseButtonText), 1)
-    ], 10, Uo)), [
+    ], 10, Jo)), [
       [L(U)]
     ]);
   }
-}), jo = /* @__PURE__ */ y({
+}), Yo = /* @__PURE__ */ y({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5705,13 +5761,13 @@ const re = /* @__PURE__ */ y({
       }, null, 8, ["item", "question"]))), 128))
     ], 2)) : m("", !0);
   }
-}), Qo = /* @__PURE__ */ y({
+}), _o = /* @__PURE__ */ y({
   __name: "ButtonGroup",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = f();
+    const e = u, n = b();
     return T(e, n), (s, i) => (o(), l("div", {
       role: "group",
       class: r(s.question.cssClasses.root),
@@ -5727,7 +5783,7 @@ const re = /* @__PURE__ */ y({
       }, null, 8, ["question", "item", "index"]))), 128))
     ], 2));
   }
-}), Go = ["title"], Jo = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Xo = ["title"], Yo = /* @__PURE__ */ y({
+}), xo = ["title"], ei = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], si = ["title"], ni = /* @__PURE__ */ y({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5735,9 +5791,9 @@ const re = /* @__PURE__ */ y({
     index: {}
   },
   setup(u) {
-    const e = u, n = b(
-      () => new Ge(e.question, e.item, e.index)
-    ), s = b({
+    const e = u, n = f(
+      () => new Je(e.question, e.item, e.index)
+    ), s = f({
       get: () => e.question.renderedValue,
       set: (i) => {
         const t = e.question;
@@ -5760,8 +5816,8 @@ const re = /* @__PURE__ */ y({
         class: r(n.value.css.control),
         "onUpdate:modelValue": t[0] || (t[0] = (a) => s.value = a),
         value: n.value.value
-      }, null, 10, Jo), [
-        [_, s.value]
+      }, null, 10, ei), [
+        [x, s.value]
       ]),
       v("div", {
         class: r(n.value.css.decorator)
@@ -5778,22 +5834,22 @@ const re = /* @__PURE__ */ y({
           class: r(n.value.css.caption),
           title: n.value.caption.renderedHtml
         }, [
-          h(d, {
+          g(d, {
             is: "survey-string",
             locString: n.value.caption
           }, null, 8, ["locString"])
-        ], 10, Xo)) : m("", !0)
+        ], 10, si)) : m("", !0)
       ], 2)
-    ], 10, Go));
+    ], 10, xo));
   }
-}), _o = ["src", "width", "height", "alt"], xo = /* @__PURE__ */ y({
+}), ti = ["src", "width", "height", "alt"], oi = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
     data: {}
   },
   setup(u) {
-    const e = u, n = b(() => e.data), s = O(() => n.value.locLogo);
+    const e = u, n = f(() => e.data), s = O(() => n.value.locLogo);
     return (i, t) => (o(), l("div", {
       class: r(n.value.logoClassNames)
     }, [
@@ -5808,16 +5864,16 @@ const re = /* @__PURE__ */ y({
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight
         })
-      }, null, 14, _o)
+      }, null, 14, ti)
     ], 2));
   }
-}), ei = /* @__PURE__ */ y({
+}), ii = /* @__PURE__ */ y({
   __name: "SvgBundle",
   setup(u) {
-    const e = f(), n = () => {
+    const e = b(), n = () => {
       e.value && (e.value.innerHTML = X.iconsRenderedHtml());
     };
-    return $(() => {
+    return Z(() => {
       n(), X.onIconsChanged.add(n);
     }), P(() => {
       X.onIconsChanged.remove(n);
@@ -5829,7 +5885,7 @@ const re = /* @__PURE__ */ y({
       [N, !1]
     ]);
   }
-}), si = ["id"], ni = /* @__PURE__ */ y({
+}), ri = ["id"], li = /* @__PURE__ */ y({
   __name: "FilePage",
   props: {
     page: {},
@@ -5847,9 +5903,9 @@ const re = /* @__PURE__ */ y({
         item: i,
         question: n.question
       }, null, 8, ["item", "question"]))), 128))
-    ], 10, si));
+    ], 10, ri));
   }
-}), ti = ["href", "title", "download"], oi = ["src"], ii = ["href", "title", "download"], ri = /* @__PURE__ */ y({
+}), ai = ["href", "title", "download"], ui = ["src"], di = ["href", "title", "download"], mi = /* @__PURE__ */ y({
   __name: "FileItem",
   props: {
     item: {},
@@ -5870,7 +5926,7 @@ const re = /* @__PURE__ */ y({
           title: e.item.name,
           download: e.item.name,
           style: M({ width: e.question.imageWidth })
-        }, H(e.item.name), 13, ti)
+        }, H(e.item.name), 13, ai)
       ], 2)) : m("", !0),
       v("div", {
         class: r(e.question.getImageWrapperCss(e.item))
@@ -5883,7 +5939,7 @@ const re = /* @__PURE__ */ y({
             width: e.question.imageWidth
           }),
           alt: "File preview"
-        }, null, 12, oi)) : m("", !0),
+        }, null, 12, ui)) : m("", !0),
         e.question.defaultImage(e.item) ? (o(), c(d, {
           key: 1,
           is: "sv-svg-icon",
@@ -5919,43 +5975,43 @@ const re = /* @__PURE__ */ y({
           title: e.item.name,
           download: e.item.name,
           style: M({ width: e.question.imageWidth })
-        }, H(e.item.name), 13, ii)
+        }, H(e.item.name), 13, di)
       ], 2)) : m("", !0)
     ], 2)), [
       [N, e.item]
     ]);
   }
 });
-Je.platform = "vue3";
-function li(u, e, n) {
+Xe.platform = "vue3";
+function pi(u, e, n) {
   u(e, n);
 }
-function be(u) {
-  const e = li.bind(
+function fe(u) {
+  const e = pi.bind(
     void 0,
     u
   );
-  e("sv-svg-bundle", ei), e("popup-survey", fe), e("survey-header", e1), e("sv-logo-image", xo), e("survey-page", xe), e("survey-row", s1), e("survey-question", i1), e("survey-panel", u1), e("survey-element-header", m1), e("survey-string", p1), e("sv-string-viewer", v1), e("sv-string-editor", g1), e("sv-skeleton", y1), e("survey-text", L1), e("survey-text-input", b1), e("survey-checkbox", V1), e("survey-checkbox-item", T1), e("survey-radiogroup", Z1), e("survey-radiogroup-item", A1), e("survey-signaturepad", W1), e("survey-html", z1), e("survey-image", j1), e("survey-expression", Q1), e("survey-file", Y1), e("sv-file-choose-btn", Ko), e("sv-file-clean-btn", Fo), e("sv-file-preview", jo), e("sv-file-page", ni), e("sv-file-item", ri), e("sv-file-video", Oo), e("survey-imagepicker", x1), e("survey-imagepicker-item", os), e("survey-comment", is), e("survey-dropdown", rs), e("sv-dropdown-select", ds), e("sv-dropdown-option-item", ps), e("sv-dropdown", hs), e("survey-tagbox", ys), e("sv-tagbox", Ls), e("sv-tagbox-item", Hs), e("sv-tagbox-filter", bs), e("survey-ranking", Is), e("survey-ranking-item", Zs), e("sv-ranking-item", $s), e("survey-rating", Ns), e("sv-rating-item", Ws), e("sv-rating-item-smiley", zs), e("sv-rating-item-star", Us), e("sv-rating-dropdown", Js), e("sv-rating-dropdown-item", Gs), e("survey-boolean", Ys), e("sv-boolean-radio", _s), e("sv-boolean-radio-item", sn), e("sv-boolean-checkbox", an), e("survey-multipletext", un), e("survey-multipletext-item", mn), e("survey-matrix", hn), e("survey-matrix-row", qn), e("survey-matrix-cell", kn), e("survey-matrixdropdown", fn), e("survey-matrixtable", Hn), e("survey-matrixheaderrequired", Sn), e("survey-matrixdropdown-cell", Bn), e("survey-matrixdynamic", Rn), e("sv-matrix-remove-button", Zn), e("sv-matrix-drag-drop-icon", Dn), e("sv-matrix-detail-button", Nn), e("survey-paneldynamic", Pn), e("survey-paneldynamicprogress", En), e("survey-paneldynamicprogress-v2", Wn), e("sv-paneldynamic-add-btn", zn), e("sv-paneldynamic-next-btn", Un), e("sv-paneldynamic-prev-btn", jn), e("sv-paneldynamic-remove-btn", Gn), e("sv-paneldynamic-progress-text", Jn), e("sv-components-container", Qt), e("sv-progress-buttons", xt), e("sv-navigation-toc", eo), e("sv-progress-pages", J), e("sv-progress-questions", J), e("sv-progress-correctquestions", J), e("sv-progress-requiredquestions", J), e("survey-errors", Yn), e("survey-question-comment", xn), e("survey-element-title", et), e("survey-element-title-content", ot), e("sv-title-actions", lt), e("sv-brand-info", vt), e("sv-question-error", yt), e("sv-svg-icon", ht), e("sv-action-bar", qt), e("sv-action", kt), e("sv-action-bar-item", Mt), e("sv-action-bar-item-dropdown", St), e("sv-action-bar-separator", Vt), e("sv-list", Zt), e("sv-list-item-content", Nt), e("sv-list-item-group", Pt), e("sv-list-item", At), e("sv-popup", Et), e("sv-popup-container", Kt), e("popup-pointer", jt), e("sv-notifier", po), e("survey-other-choice", vo), e("sv-nav-btn", go), e("survey-customwidget", yo), e("survey-popup-modal", qo), e("survey-composite", fo), e("survey-custom", bo), e("sv-timerpanel", Io), e("sv-loading-indicator", Vo), e("sv-header", Ro), e("sv-header-cell", $o), e("sv-header-mobile", Po), e("sv-template-renderer", Wo), e("sv-character-counter", ko), e("sv-text-area", Lo), e("survey-element", Eo), e("survey-buttongroup", Qo), e("sv-button-group-item", Yo), e("survey", re);
+  e("sv-svg-bundle", ii), e("popup-survey", be), e("survey-header", ss), e("sv-logo-image", oi), e("survey-page", es), e("survey-row", ns), e("survey-question", rs), e("survey-panel", ds), e("survey-element-header", ps), e("survey-string", Cs), e("sv-string-viewer", cs), e("sv-string-editor", hs), e("sv-skeleton", qs), e("sv-scroll", bs), e("survey-text", Hs), e("survey-text-input", Vs), e("survey-checkbox", $s), e("survey-checkbox-item", Ns), e("survey-radiogroup", Ps), e("survey-radiogroup-item", Fs), e("survey-signaturepad", Ks), e("survey-html", Qs), e("survey-image", Ys), e("survey-expression", _s), e("survey-file", n1), e("sv-file-choose-btn", Xo), e("sv-file-clean-btn", jo), e("sv-file-preview", Yo), e("sv-file-page", li), e("sv-file-item", mi), e("sv-file-video", Go), e("survey-imagepicker", o1), e("survey-imagepicker-item", u1), e("survey-comment", d1), e("survey-dropdown", m1), e("sv-dropdown-select", c1), e("sv-dropdown-option-item", h1), e("sv-dropdown", k1), e("survey-tagbox", b1), e("sv-tagbox", H1), e("sv-tagbox-item", R1), e("sv-tagbox-filter", V1), e("survey-ranking", T1), e("survey-ranking-item", P1), e("sv-ranking-item", E1), e("survey-rating", z1), e("sv-rating-item", K1), e("sv-rating-item-smiley", Q1), e("sv-rating-item-star", J1), e("sv-rating-dropdown", en), e("sv-rating-dropdown-item", x1), e("survey-boolean", nn), e("sv-boolean-radio", tn), e("sv-boolean-radio-item", ln), e("sv-boolean-checkbox", Cn), e("survey-multipletext", vn), e("survey-multipletext-item", gn), e("survey-matrix", kn), e("survey-matrix-row", fn), e("survey-matrix-cell", In), e("survey-matrixdropdown", Sn), e("survey-matrixtable", Rn), e("survey-matrixheaderrequired", Zn), e("survey-matrixdropdown-cell", Dn), e("survey-matrixdynamic", An), e("sv-matrix-remove-button", Pn), e("sv-matrix-drag-drop-icon", Wn), e("sv-matrix-detail-button", zn), e("survey-paneldynamic", On), e("survey-paneldynamicprogress", Un), e("survey-paneldynamicprogress-v2", Kn), e("sv-paneldynamic-add-btn", Qn), e("sv-paneldynamic-next-btn", Jn), e("sv-paneldynamic-prev-btn", Yn), e("sv-paneldynamic-remove-btn", xn), e("sv-paneldynamic-progress-text", et), e("sv-components-container", _t), e("sv-progress-buttons", oo), e("sv-navigation-toc", io), e("sv-progress-pages", J), e("sv-progress-questions", J), e("sv-progress-correctquestions", J), e("sv-progress-requiredquestions", J), e("survey-errors", nt), e("survey-question-comment", ot), e("survey-element-title", it), e("survey-element-title-content", ut), e("sv-title-actions", pt), e("sv-brand-info", qt), e("sv-question-error", bt), e("sv-svg-icon", kt), e("sv-action-bar", ft), e("sv-action", It), e("sv-action-bar-item", Bt), e("sv-action-bar-item-dropdown", Zt), e("sv-action-bar-separator", $t), e("sv-list", Pt), e("sv-list-item-content", zt), e("sv-list-item-group", Ot), e("sv-list-item", Ft), e("sv-popup", Ut), e("sv-popup-container", Xt), e("popup-pointer", Yt), e("sv-notifier", ho), e("survey-other-choice", qo), e("sv-nav-btn", Lo), e("survey-customwidget", bo), e("survey-popup-modal", fo), e("survey-composite", So), e("survey-custom", Vo), e("sv-timerpanel", To), e("sv-loading-indicator", $o), e("sv-header", Ao), e("sv-header-cell", Eo), e("sv-header-mobile", Oo), e("sv-template-renderer", Ko), e("sv-character-counter", Io), e("sv-text-area", Ho), e("survey-element", Uo), e("survey-buttongroup", _o), e("sv-button-group-item", ni), e("survey", le);
 }
-be(
+fe(
   (u, e) => K.Instance.registerComponent(u, e)
 );
-const mi = {
+const gi = {
   install(u) {
-    u.component("SurveyComponent", re), u.component("PopupSurveyComponent", fe), u.directive("key2click", U), be((e, n) => {
+    u.component("SurveyComponent", le), u.component("PopupSurveyComponent", be), u.directive("key2click", U), fe((e, n) => {
       u.component(e, n), K.Instance.registerComponent(e, e);
     });
   }
 };
 export {
   K as ComponentFactory,
-  fe as PopupSurveyComponent,
-  re as SurveyComponent,
+  be as PopupSurveyComponent,
+  le as SurveyComponent,
   d as SvComponent,
   U as key2ClickDirective,
-  mi as surveyPlugin,
+  gi as surveyPlugin,
   V as useBase,
-  ee as useComputedArray,
+  se as useComputedArray,
   O as useLocString,
   T as useQuestion
 };