survey-vue3-ui 1.9.106 → 1.9.108

package/survey-vue3-ui.es.js

@@ -1,12 +1,12 @@
-import { shallowReactive as me, watch as Z, onBeforeUnmount as U, onMounted as A, ref as S, shallowRef as F, triggerRef as oe, unref as b, isRef as ce, defineComponent as C, computed as T, onUpdated as G, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as h, createCommentVNode as m, Fragment as w, renderList as R, createBlock as y, createElementVNode as p, normalizeStyle as $, onUnmounted as V, withDirectives as D, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as Y, resolveDirective as _, vModelSelect as pe, vModelText as ve, getCurrentInstance as x, withCtx as qe, createStaticVNode as ye, normalizeProps as ge, guardReactiveProps as Ce, toRaw as he, Teleport as be } from "vue";
-import { Base as ke, RendererFactory as X, DropdownListModel as fe, Helpers as Ie, DropdownMultiSelectListModel as we, doKey2ClickUp as de, createSvg as Se, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as Re, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as $e, TOCModel as Be, SvgRegistry as Le, PopupSurveyModel as De, settings as O, createDialogOptions as Pe, createPopupModalViewModel as Me, doKey2ClickDown as Ne, doKey2ClickBlur as He } from "survey-core";
-ke.createPropertiesHash = () => me({});
-function Ae(r) {
+import { shallowReactive as ce, watch as Q, onBeforeUnmount as U, onMounted as A, ref as S, shallowRef as F, triggerRef as oe, unref as f, isRef as pe, defineComponent as C, computed as R, onUpdated as Z, resolveComponent as v, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as b, createCommentVNode as m, Fragment as w, renderList as T, createBlock as q, createElementVNode as p, normalizeStyle as $, onUnmounted as V, withDirectives as L, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as J, resolveDirective as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, normalizeProps as Ce, guardReactiveProps as he, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as G, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Re, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as O, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
+fe.createPropertiesHash = () => ce({});
+function Ve(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (o, n) => {
     const s = [], e = F(s);
     return s.onArrayChanged = () => {
       oe(e);
-    }, o[n] = e, b(o[n]);
+    }, o[n] = e, f(o[n]);
   }, r.iteratePropertiesHash((o, n) => {
     if (Array.isArray(o[n])) {
       const s = F(o[n]);
@@ -14,21 +14,21 @@ function Ae(r) {
         oe(s);
       }, o[n] = s;
     }
-  }), r.getPropertyValueCoreHandler = (o, n) => b(o[n]), r.setPropertyValueCoreHandler = (o, n, s) => {
-    ce(o[n]) ? o[n].value = s : o[n] = s;
+  }), r.getPropertyValueCoreHandler = (o, n) => f(o[n]), r.setPropertyValueCoreHandler = (o, n, s) => {
+    pe(o[n]) ? o[n].value = s : o[n] = s;
   }, r.__vueImplemented = !0, !0);
 }
 function le(r, o) {
   !r || !o || (r.iteratePropertiesHash((n, s) => {
-    n[s] = b(n[s]), Array.isArray(n[s]) && (n[s].onArrayChanged = void 0);
+    n[s] = f(n[s]), Array.isArray(n[s]) && (n[s].onArrayChanged = void 0);
   }), delete r.__vueImplemented, r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0);
 }
 function B(r, o, n) {
   let s = !1;
-  const e = Z(
+  const e = Q(
     r,
     (i, a) => {
-      o && o(i), a && (le(a, s), n && n(a)), s = Ae(i);
+      o && o(i), a && (le(a, s), n && n(a)), s = Ve(i);
     },
     {
       immediate: !0
@@ -51,7 +51,7 @@ function W(r) {
     o.value = e.renderedHtml, e.onChanged = () => {
       o.value = e.renderedHtml;
     };
-  }, s = Z(
+  }, s = Q(
     r,
     (e, i) => {
       i && (i.onChanged = () => {
@@ -66,7 +66,7 @@ function W(r) {
 function ee(r) {
   return r.customWidget ? "survey-customwidget" : r.isDefaultRendering && r.isDefaultRendering() || r.isPanel ? "survey-" + r.getTemplate() : r.getComponentName();
 }
-const Ee = /* @__PURE__ */ C({
+const Oe = /* @__PURE__ */ C({
   __name: "Page",
   props: {
     survey: {},
@@ -76,19 +76,19 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     B(() => o.page);
-    const s = T(() => o.page._showDescription), e = T(() => o.page.rows);
+    const s = R(() => o.page._showDescription), e = R(() => o.page.rows);
     return A(() => {
       o.survey && o.survey.afterRenderPage(n.value);
-    }), G(() => {
+    }), Z(() => {
       o.survey.afterRenderPage(n.value);
     }), (i, a) => {
-      const d = q("survey-element-title"), c = q("survey-string"), v = q("survey-row");
+      const d = v("survey-element-title"), c = v("survey-string"), y = v("survey-row");
       return t(), u("div", {
         class: l(i.page.cssRoot),
         ref_key: "root",
         ref: n
       }, [
-        h(d, {
+        b(d, {
           element: i.page,
           css: i.css
         }, null, 8, ["element", "css"]),
@@ -96,14 +96,14 @@ const Ee = /* @__PURE__ */ C({
           key: 0,
           class: l(i.page.cssClasses.page.description)
         }, [
-          h(c, {
+          b(c, {
             locString: i.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
-        (t(!0), u(w, null, R(e.value, (f, g) => (t(), u(w, null, [
-          f.visible ? (t(), y(v, {
+        (t(!0), u(w, null, T(e.value, (h, g) => (t(), u(w, null, [
+          h.visible ? (t(), q(y, {
             key: i.page.id + "_" + g,
-            row: f,
+            row: h,
             survey: i.survey,
             css: i.css
           }, null, 8, ["row", "survey", "css"])) : m("", !0)
@@ -111,7 +111,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ve = ["src", "width", "height", "alt"], Oe = ["src", "width", "height", "alt"], Fe = /* @__PURE__ */ C({
+}), Fe = ["src", "width", "height", "alt"], We = ["src", "width", "height", "alt"], ze = /* @__PURE__ */ C({
   __name: "Header",
   props: {
     survey: {}
@@ -122,7 +122,7 @@ const Ee = /* @__PURE__ */ C({
       var e = n.value;
       e && o.survey && o.survey.afterRenderHeader(e);
     }), (e, i) => {
-      const a = q("survey-element-title"), d = q("survey-string");
+      const a = v("survey-element-title"), d = v("survey-string");
       return e.survey.renderedHasHeader ? (t(), u("div", {
         key: 0,
         class: l(e.survey.css.header),
@@ -135,7 +135,7 @@ const Ee = /* @__PURE__ */ C({
         }, [
           p("img", {
             class: l(e.survey.css.logoImage),
-            src: b(s),
+            src: f(s),
             width: e.survey.renderedLogoWidth,
             height: e.survey.renderedLogoHeight,
             alt: e.survey.locTitle.renderedHtml,
@@ -144,14 +144,14 @@ const Ee = /* @__PURE__ */ C({
               width: e.survey.renderedStyleLogoWidth,
               height: e.survey.renderedStyleLogoHeight
             })
-          }, null, 14, Ve)
+          }, null, 14, Fe)
         ], 2)) : m("", !0),
         e.survey.renderedHasTitle ? (t(), u("div", {
           key: 1,
           class: l(e.survey.css.headerText),
           style: $({ maxWidth: e.survey.titleMaxWidth })
         }, [
-          h(a, {
+          b(a, {
             element: e.survey,
             css: e.survey.css
           }, null, 8, ["element", "css"]),
@@ -159,7 +159,7 @@ const Ee = /* @__PURE__ */ C({
             key: 0,
             class: l(e.survey.css.description)
           }, [
-            h(d, {
+            b(d, {
               locString: e.survey.locDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0)
@@ -170,7 +170,7 @@ const Ee = /* @__PURE__ */ C({
         }, [
           p("img", {
             class: l(e.survey.css.logoImage),
-            src: b(s),
+            src: f(s),
             width: e.survey.renderedLogoWidth,
             height: e.survey.renderedLogoHeight,
             alt: e.survey.locTitle.renderedHtml,
@@ -179,7 +179,7 @@ const Ee = /* @__PURE__ */ C({
               width: e.survey.renderedStyleLogoWidth,
               height: e.survey.renderedStyleLogoHeight
             })
-          }, null, 14, Oe)
+          }, null, 14, We)
         ], 2)) : m("", !0),
         p("div", {
           class: l(e.survey.css.headerClose)
@@ -187,7 +187,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2)) : m("", !0);
     };
   }
-}), We = /* @__PURE__ */ C({
+}), Ue = /* @__PURE__ */ C({
   __name: "Row",
   props: {
     row: {},
@@ -195,7 +195,7 @@ const Ee = /* @__PURE__ */ C({
     survey: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.row.visibleElements
     ), s = S();
     return B(() => o.row), A(() => {
@@ -209,16 +209,16 @@ const Ee = /* @__PURE__ */ C({
       const e = o.row;
       e && (e.isNeedRender = !o.row.isLazyRendering());
     }), (e, i) => {
-      const a = q("survey-element"), d = q("survey-panel");
+      const a = v("survey-element"), d = v("survey-panel");
       return t(), u("div", {
         class: l(e.row.getRowCss()),
         ref_key: "root",
         ref: s
       }, [
-        (t(!0), u(w, null, R(n.value, (c) => (t(), u("div", {
+        (t(!0), u(w, null, T(n.value, (c) => (t(), u("div", {
           style: $(c.rootStyle)
         }, [
-          c.isPanel ? m("", !0) : (t(), y(a, {
+          c.isPanel ? m("", !0) : (t(), q(a, {
             key: c.id,
             element: c,
             survey: e.survey,
@@ -226,7 +226,7 @@ const Ee = /* @__PURE__ */ C({
             row: e.row,
             style: $(c.getRootStyle())
           }, null, 8, ["element", "survey", "css", "row", "style"])),
-          c.isPanel ? (t(), y(d, {
+          c.isPanel ? (t(), q(d, {
             key: c.id,
             question: c,
             css: e.css
@@ -235,7 +235,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), ze = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ue = /* @__PURE__ */ C({
+}), Ke = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], _e = /* @__PURE__ */ C({
   __name: "Element",
   props: {
     survey: {},
@@ -244,11 +244,11 @@ const Ee = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = S(null), s = T(() => !o.element.isPanel && o.element.showErrorOnTop), e = T(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
+    const o = r, n = S(null), s = R(() => !o.element.isPanel && o.element.showErrorOnTop), e = R(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
     return B(() => o.element), A(() => {
       o.element.isPanel || o.element.afterRender(n.value);
     }), (d, c) => {
-      const v = q("survey-errors"), f = q("survey-element-header"), g = q("survey-string"), k = q("survey-question-comment");
+      const y = v("survey-errors"), h = v("survey-element-header"), g = v("survey-string"), k = v("survey-question-comment");
       return d.row.isNeedRender ? (t(), u("div", {
         key: 0,
         class: l(d.element.isPanel ? null : d.element.getRootCss()),
@@ -262,26 +262,26 @@ const Ee = /* @__PURE__ */ C({
         "aria-labelledby": d.element.ariaLabelledBy,
         "data-name": d.element.name
       }, [
-        !d.element.isPanel && d.element.showErrorsAboveQuestion ? (t(), y(v, {
+        !d.element.isPanel && d.element.showErrorsAboveQuestion ? (t(), q(y, {
           key: 0,
           element: d.element,
           location: "top"
         }, null, 8, ["element"])) : m("", !0),
-        !d.element.isPanel && d.element.hasTitleOnLeftTop ? (t(), y(f, {
+        !d.element.isPanel && d.element.hasTitleOnLeftTop ? (t(), q(h, {
           key: 1,
           element: d.element,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        D(p("div", {
+        L(p("div", {
           class: l(a(d.element) || void 0),
           role: "presentation"
         }, [
-          s.value ? (t(), y(v, {
+          s.value ? (t(), q(y, {
             key: 0,
             element: d.element,
             location: "top"
           }, null, 8, ["element"])) : m("", !0),
-          d.element.isPanel || !d.element.isCollapsed ? (t(), y(N(i(d.element)), {
+          d.element.isPanel || !d.element.isCollapsed ? (t(), q(N(i(d.element)), {
             key: 1,
             question: d.element
           }, null, 8, ["question"])) : m("", !0),
@@ -290,16 +290,16 @@ const Ee = /* @__PURE__ */ C({
             class: l(d.element.getCommentAreaCss())
           }, [
             p("div", null, [
-              h(g, {
+              b(g, {
                 locString: d.element.locCommentText
               }, null, 8, ["locString"])
             ]),
-            h(k, {
+            b(k, {
               commentClass: d.css.comment,
               question: d.element
             }, null, 8, ["commentClass", "question"])
           ], 2)) : m("", !0),
-          e.value ? (t(), y(v, {
+          e.value ? (t(), q(y, {
             key: 3,
             element: d.element,
             location: "bottom"
@@ -308,31 +308,31 @@ const Ee = /* @__PURE__ */ C({
             key: 4,
             class: l(d.element.cssClasses.descriptionUnderInput)
           }, [
-            h(g, {
+            b(g, {
               locString: d.element.locDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0)
         ], 2), [
           [H, d.element.isPanel || !d.element.isCollapsed]
         ]),
-        !d.element.isPanel && d.element.hasTitleOnBottom ? (t(), y(f, {
+        !d.element.isPanel && d.element.hasTitleOnBottom ? (t(), q(h, {
           key: 2,
           element: d.element,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        !d.element.isPanel && d.element.showErrorsBelowQuestion ? (t(), y(v, {
+        !d.element.isPanel && d.element.showErrorsBelowQuestion ? (t(), q(y, {
           key: 3,
           element: d.element,
           location: "bottom"
         }, null, 8, ["element"])) : m("", !0)
-      ], 42, ze)) : d.element.skeletonComponentName ? (t(), y(N(d.element.skeletonComponentName), {
+      ], 42, Ke)) : d.element.skeletonComponentName ? (t(), q(N(d.element.skeletonComponentName), {
         key: 1,
         element: d.element,
         css: d.css
       }, null, 8, ["element", "css"])) : m("", !0);
     };
   }
-}), Ke = ["id"], je = ["id"], Qe = /* @__PURE__ */ C({
+}), je = ["id"], Qe = ["id"], Ze = /* @__PURE__ */ C({
   __name: "Panel",
   props: {
     question: {},
@@ -340,7 +340,7 @@ const Ee = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = S(!1), s = S(null), e = T(() => o.question.rows), i = T(() => o.question.survey), a = T(() => n.value);
+    const o = r, n = S(!1), s = S(null), e = R(() => o.question.rows), i = R(() => o.question.survey), a = R(() => n.value);
     return B(() => o.question), A(() => {
       o.question.survey && o.question.survey.afterRenderPanel(o.question, s.value), n.value = o.question.isCollapsed;
       const d = o.question;
@@ -351,7 +351,7 @@ const Ee = /* @__PURE__ */ C({
       const d = o.question;
       d.stateChangedCallback = null;
     }), (d, c) => {
-      const v = q("survey-errors"), f = q("survey-element-header"), g = q("survey-row"), k = q("sv-action-bar");
+      const y = v("survey-errors"), h = v("survey-element-header"), g = v("survey-row"), k = v("sv-action-bar");
       return d.question.isVisible ? (t(), u("div", {
         key: 0,
         class: l(d.question.getContainerCss()),
@@ -359,16 +359,16 @@ const Ee = /* @__PURE__ */ C({
         ref_key: "root",
         ref: s
       }, [
-        d.question.showErrorsAbovePanel ? (t(), y(v, {
+        d.question.showErrorsAbovePanel ? (t(), q(y, {
           key: 0,
           element: d.question
         }, null, 8, ["element"])) : m("", !0),
-        d.question.hasTitle || d.question.hasDescription ? (t(), y(f, {
+        d.question.hasTitle || d.question.hasDescription ? (t(), q(h, {
           key: 1,
           element: d.question,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        d.question.showErrorsAbovePanel ? m("", !0) : (t(), y(v, {
+        d.question.showErrorsAbovePanel ? m("", !0) : (t(), q(y, {
           key: 2,
           element: d.question
         }, null, 8, ["element"])),
@@ -378,22 +378,22 @@ const Ee = /* @__PURE__ */ C({
           style: $({ paddingLeft: d.question.innerPaddingLeft }),
           class: l(d.question.cssClasses.panel.content)
         }, [
-          (t(!0), u(w, null, R(e.value, (P, L) => (t(), u(w, null, [
-            P.visible ? (t(), y(g, {
-              key: d.question.id + "_" + L,
+          (t(!0), u(w, null, T(e.value, (P, D) => (t(), u(w, null, [
+            P.visible ? (t(), q(g, {
+              key: d.question.id + "_" + D,
               row: P,
               survey: i.value,
               css: d.css
             }, null, 8, ["row", "survey", "css"])) : m("", !0)
           ], 64))), 256)),
-          h(k, {
+          b(k, {
             model: d.question.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, je))
-      ], 10, Ke)) : m("", !0);
+        ], 14, Qe))
+      ], 10, je)) : m("", !0);
     };
   }
-}), Ze = /* @__PURE__ */ C({
+}), Ge = /* @__PURE__ */ C({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -404,46 +404,46 @@ const Ee = /* @__PURE__ */ C({
       typeof o.element.clickTitleFunction == "function" && o.element.clickTitleFunction();
     };
     return (s, e) => {
-      const i = q("survey-element-title"), a = q("survey-string"), d = q("sv-action-bar");
+      const i = v("survey-element-title"), a = v("survey-string"), d = v("sv-action-bar");
       return t(), u("div", {
         class: l(s.element.cssHeader),
         onClick: n
       }, [
-        h(i, {
+        b(i, {
           element: s.element,
           css: s.css
         }, null, 8, ["element", "css"]),
-        s.element.hasDescriptionUnderTitle ? D((t(), u("div", {
+        s.element.hasDescriptionUnderTitle ? L((t(), u("div", {
           key: 0,
           class: l(s.element.cssDescription)
         }, [
-          h(a, {
+          b(a, {
             locString: s.element.locDescription
           }, null, 8, ["locString"])
         ], 2)), [
           [H, s.element.hasDescription]
         ]) : m("", !0),
-        s.element.additionalTitleToolbar ? (t(), y(d, {
+        s.element.additionalTitleToolbar ? (t(), q(d, {
           key: 1,
           model: s.element.additionalTitleToolbar
         }, null, 8, ["model"])) : m("", !0)
       ], 2);
     };
   }
-}), Ge = /* @__PURE__ */ C({
+}), Xe = /* @__PURE__ */ C({
   __name: "String",
   props: {
     locString: {}
   },
   setup(r) {
-    return (o, n) => (t(), y(N(o.locString.renderAs), {
+    return (o, n) => (t(), q(N(o.locString.renderAs), {
       locString: o.locString.renderAsData
     }, null, 8, ["locString"]));
   }
-}), Xe = ["innerHTML"], Je = {
+}), Je = ["innerHTML"], Ye = {
   key: 1,
   class: "sv-string-viewer"
-}, Ye = /* @__PURE__ */ C({
+}, xe = /* @__PURE__ */ C({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -453,10 +453,10 @@ const Ee = /* @__PURE__ */ C({
     return (s, e) => s.locString.hasHtml ? (t(), u("span", {
       key: 0,
       class: "sv-string-viewer",
-      innerHTML: b(n)
-    }, null, 8, Xe)) : (t(), u("span", Je, I(b(n)), 1));
+      innerHTML: f(n)
+    }, null, 8, Je)) : (t(), u("span", Ye, I(f(n)), 1));
   }
-}), _e = ["innerHTML"], xe = /* @__PURE__ */ C({
+}), es = ["innerHTML"], ss = /* @__PURE__ */ C({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -475,7 +475,7 @@ const Ee = /* @__PURE__ */ C({
       innerHTML: e.locString.renderedHtml,
       onBlur: n,
       onClick: s
-    }, null, 40, _e)) : (t(), u("span", {
+    }, null, 40, es)) : (t(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
@@ -483,7 +483,7 @@ const Ee = /* @__PURE__ */ C({
       onClick: s
     }, I(e.locString.renderedHtml), 33));
   }
-}), es = ["id"], ss = /* @__PURE__ */ C({
+}), ns = ["id"], os = /* @__PURE__ */ C({
   __name: "Skeleton",
   props: {
     element: {}
@@ -493,9 +493,9 @@ const Ee = /* @__PURE__ */ C({
     return B(() => o.element), (n, s) => (t(), u("div", {
       class: "sv-skeleton-element",
       id: n.element.id
-    }, null, 8, es));
+    }, null, 8, ns));
   }
-}), ns = ["id"], os = ["value"], ts = /* @__PURE__ */ C({
+}), ts = ["id"], is = ["value"], ls = /* @__PURE__ */ C({
   __name: "Text",
   props: {
     question: {}
@@ -503,7 +503,7 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-text-input");
+      const i = v("survey-text-input");
       return s.question.isReadOnlyRenderDiv() ? (t(), u("div", {
         key: 0,
         ref_key: "root",
@@ -513,13 +513,13 @@ const Ee = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        h(i, { question: s.question }, null, 8, ["question"]),
+        b(i, { question: s.question }, null, 8, ["question"]),
         p("datalist", {
           id: s.question.dataListId
         }, [
-          (t(!0), u(w, null, R(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, os))), 256))
-        ], 8, ns)
-      ], 512)) : (t(), y(i, {
+          (t(!0), u(w, null, T(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
+        ], 8, ts)
+      ], 512)) : (t(), q(i, {
         key: 2,
         question: s.question,
         ref_key: "root",
@@ -527,7 +527,7 @@ const Ee = /* @__PURE__ */ C({
       }, null, 8, ["question"]));
     };
   }
-}), is = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], ls = { key: 1 }, rs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], as = /* @__PURE__ */ C({
+}), rs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], as = { key: 1 }, us = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], ds = /* @__PURE__ */ C({
   __name: "TextInput",
   props: {
     question: {}
@@ -535,10 +535,10 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     B(() => o.question);
-    const n = T(() => o.question.inputStyle);
+    const n = R(() => o.question.inputStyle);
     return (s, e) => {
-      const i = q("sv-character-counter");
-      return s.question.getMaxLength() ? (t(), u("div", ls, [
+      const i = v("sv-character-counter");
+      return s.question.getMaxLength() ? (t(), u("div", as, [
         p("input", {
           disabled: s.question.isInputReadOnly,
           class: l(s.question.getControlClass()),
@@ -564,8 +564,8 @@ const Ee = /* @__PURE__ */ C({
           "aria-label": s.question.a11y_input_ariaLabel,
           "aria-invalid": s.question.a11y_input_ariaInvalid,
           "aria-describedby": s.question.a11y_input_ariaDescribedBy
-        }, null, 46, rs),
-        h(i, {
+        }, null, 46, us),
+        b(i, {
           counter: s.question.characterCounter,
           remainingCharacterCounter: s.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
@@ -596,13 +596,13 @@ const Ee = /* @__PURE__ */ C({
         "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
         "aria-invalid": s.question.a11y_input_ariaInvalid,
         "aria-describedby": s.question.a11y_input_ariaDescribedBy
-      }, null, 46, is));
+      }, null, 46, rs));
     };
   }
-}), us = /* @__PURE__ */ p("legend", {
+}), ms = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], cs = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), ds = /* @__PURE__ */ C({
+}, null, -1), ps = /* @__PURE__ */ C({
   __name: "Checkbox",
   props: {
     question: {}
@@ -610,20 +610,25 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-checkbox-item"), a = q("survey-other-choice");
+      const i = v("survey-checkbox-item"), a = v("survey-other-choice");
       return t(), u("fieldset", {
         class: l(s.question.getSelectBaseRootCss()),
-        role: "presentation"
+        role: s.question.a11y_input_ariaRole,
+        "aria-required": s.question.a11y_input_ariaRequired,
+        "aria-label": s.question.a11y_input_ariaLabel,
+        "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
+        "aria-invalid": s.question.a11y_input_ariaInvalid,
+        "aria-describedby": s.question.a11y_input_ariaDescribedBy
       }, [
-        us,
-        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, R(s.question.headItems, (d, c) => (t(), y(i, {
+        cs,
+        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, T(s.question.headItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
           item: d,
           index: "" + c
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, R(s.question.bodyItems, (d, c) => (t(), y(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, T(s.question.bodyItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -634,7 +639,7 @@ const Ee = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.dataChoices, (d, c) => (t(), y(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), q(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -646,35 +651,35 @@ const Ee = /* @__PURE__ */ C({
           key: 3,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          (t(!0), u(w, null, R(s.question.columns, (d, c) => (t(), u("div", {
+          (t(!0), u(w, null, T(s.question.columns, (d, c) => (t(), u("div", {
             key: c,
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, R(d, (v, f) => (t(), y(i, {
-              key: v.value,
-              class: l(s.question.getItemClass(v)),
+            (t(!0), u(w, null, T(d, (y, h) => (t(), q(i, {
+              key: y.value,
+              class: l(s.question.getItemClass(y)),
               question: s.question,
-              item: v,
-              index: "" + c + f
+              item: y,
+              index: "" + c + h
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 128))
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, R(s.question.footItems, (d, c) => (t(), y(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, T(s.question.footItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
           item: d,
           index: "" + c
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        s.question.renderedValue && s.question.isOtherSelected ? (t(), y(a, {
+        s.question.renderedValue && s.question.isOtherSelected ? (t(), q(a, {
           key: 5,
           question: s.question
         }, null, 8, ["question"])) : m("", !0)
-      ], 2);
+      ], 10, ms);
     };
   }
-}), ms = { role: "presentation" }, cs = ["aria-label"], ps = ["name", "value", "id", "disabled", "aria-describedby"], vs = ["name", "value", "id", "disabled", "aria-describedby"], qs = ["xlink:href"], ys = /* @__PURE__ */ C({
+}), vs = { role: "presentation" }, qs = ["name", "value", "id", "disabled"], ys = ["name", "value", "id", "disabled"], gs = ["xlink:href"], Cs = /* @__PURE__ */ C({
   __name: "CheckboxItem",
   props: {
     question: {},
@@ -683,7 +688,7 @@ const Ee = /* @__PURE__ */ C({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const o = r, n = T({
+    const o = r, n = R({
       get() {
         return o.question.isAllSelected || "";
       },
@@ -693,38 +698,33 @@ const Ee = /* @__PURE__ */ C({
       }
     });
     return B(() => o.item), (s, e) => {
-      const i = q("survey-string");
-      return t(), u("div", ms, [
+      const i = v("survey-string");
+      return t(), u("div", vs, [
         p("label", {
-          class: l(s.question.getLabelClass(s.item)),
-          "aria-label": s.question.getAriaItemLabel(s.item)
+          class: l(s.question.getLabelClass(s.item))
         }, [
-          s.item == s.question.selectAllItem ? D((t(), u("input", {
+          s.item == s.question.selectAllItem ? L((t(), u("input", {
             key: 0,
-            role: "option",
             type: "checkbox",
             name: s.question.name,
             value: n.value,
             "onUpdate:modelValue": e[0] || (e[0] = (a) => n.value = a),
             id: s.question.getItemId(s.item),
             disabled: !s.question.getItemEnabled(s.item),
-            "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
-          }, null, 10, ps)), [
+          }, null, 10, qs)), [
             [z, n.value]
           ]) : m("", !0),
-          s.item != s.question.selectAllItem ? D((t(), u("input", {
+          s.item != s.question.selectAllItem ? L((t(), u("input", {
             key: 1,
-            role: "option",
             type: "checkbox",
             name: s.question.name,
             value: s.item.value,
             "onUpdate:modelValue": e[1] || (e[1] = (a) => s.question.renderedValue = a),
             id: s.question.getItemId(s.item),
             disabled: !s.question.getItemEnabled(s.item),
-            "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
-          }, null, 10, vs)), [
+          }, null, 10, ys)), [
             [z, s.question.renderedValue]
           ]) : m("", !0),
           s.question.cssClasses.materialDecorator ? (t(), u("span", {
@@ -737,22 +737,22 @@ const Ee = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": s.question.itemSvgIcon
-              }, null, 8, qs)
+              }, null, 8, gs)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           s.hideLabel ? m("", !0) : (t(), u("span", {
             key: 3,
             class: l(s.question.cssClasses.controlLabel)
           }, [
-            h(i, {
+            b(i, {
               locString: s.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 10, cs)
+        ], 2)
       ]);
     };
   }
-}), gs = { key: 5 }, Cs = ["value"], hs = /* @__PURE__ */ C({
+}), hs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], bs = { key: 5 }, ks = ["value"], fs = /* @__PURE__ */ C({
   __name: "Radiogroup",
   props: {
     question: {}
@@ -760,14 +760,19 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-radiogroup-item"), a = q("survey-other-choice");
+      const i = v("survey-radiogroup-item"), a = v("survey-other-choice");
       return t(), u("fieldset", {
-        role: "presentation",
         class: l(s.question.getSelectBaseRootCss()),
         ref_key: "root",
-        ref: n
+        ref: n,
+        role: s.question.a11y_input_ariaRole,
+        "aria-required": s.question.a11y_input_ariaRequired,
+        "aria-label": s.question.a11y_input_ariaLabel,
+        "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
+        "aria-invalid": s.question.a11y_input_ariaInvalid,
+        "aria-describedby": s.question.a11y_input_ariaDescribedBy
       }, [
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.visibleChoices, (d, c) => (t(), y(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -778,7 +783,7 @@ const Ee = /* @__PURE__ */ C({
           key: 1,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, R(s.question.dataChoices, (d, c) => (t(), y(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), q(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -790,31 +795,31 @@ const Ee = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, R(s.question.columns, (d, c) => (t(), u("div", {
+          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, T(s.question.columns, (d, c) => (t(), u("div", {
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, R(d, (v, f) => (t(), y(i, {
-              key: v.value,
-              class: l(s.question.getItemClass(v)),
+            (t(!0), u(w, null, T(d, (y, h) => (t(), q(i, {
+              key: y.value,
+              class: l(s.question.getItemClass(y)),
               question: s.question,
-              item: v,
-              index: "" + c + f
+              item: y,
+              index: "" + c + h
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 256)) : m("", !0)
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, R(s.question.footItems, (d, c) => (t(), y(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, T(s.question.footItems, (d, c) => (t(), q(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
           item: d,
           index: "" + c
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        s.question.renderedValue && s.question.isOtherSelected ? (t(), y(a, {
+        s.question.renderedValue && s.question.isOtherSelected ? (t(), q(a, {
           key: 4,
           question: s.question
         }, null, 8, ["question"])) : m("", !0),
-        s.question.showClearButtonInContent ? (t(), u("div", gs, [
+        s.question.showClearButtonInContent ? (t(), u("div", bs, [
           p("input", {
             type: "button",
             class: l(s.question.cssClasses.clearButton),
@@ -822,12 +827,12 @@ const Ee = /* @__PURE__ */ C({
               s.question.clearValue();
             }),
             value: s.question.clearButtonCaption
-          }, null, 10, Cs)
+          }, null, 10, ks)
         ])) : m("", !0)
-      ], 2);
+      ], 10, hs);
     };
   }
-}), bs = { role: "presentation" }, ks = ["aria-label"], fs = ["name", "value", "id", "aria-describedby", "disabled"], Is = ["xlink:href"], ws = /* @__PURE__ */ C({
+}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ C({
   __name: "RadiogroupItem",
   props: {
     question: {},
@@ -838,14 +843,13 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = (e) => o.question.getLabelClass(e), s = (e) => o.question.getControlLabelClass(e);
     return B(() => o.item), (e, i) => {
-      const a = q("survey-string");
-      return t(), u("div", bs, [
+      const a = v("survey-string");
+      return t(), u("div", Is, [
         p("label", {
           onMousedown: i[1] || (i[1] = (d) => e.question.onMouseDown()),
-          class: l(n(e.item)),
-          "aria-label": e.question.getAriaItemLabel(e.item)
+          class: l(n(e.item))
         }, [
-          D(p("input", {
+          L(p("input", {
             type: "radio",
             name: e.question.questionName,
             value: e.item.value,
@@ -854,8 +858,8 @@ const Ee = /* @__PURE__ */ C({
             "onUpdate:modelValue": i[0] || (i[0] = (d) => e.question.renderedValue = d),
             disabled: !e.question.getItemEnabled(e.item),
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, fs), [
-            [Y, e.question.renderedValue]
+          }, null, 10, ws), [
+            [J, e.question.renderedValue]
           ]),
           e.question.cssClasses.materialDecorator ? (t(), u("span", {
             key: 0,
@@ -867,22 +871,22 @@ const Ee = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Is)
+              }, null, 8, Ss)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           e.hideLabel ? m("", !0) : (t(), u("span", {
             key: 1,
             class: l(s(e.item))
           }, [
-            h(a, {
+            b(a, {
               locString: e.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 42, ks)
+        ], 34)
       ]);
     };
   }
-}), Ss = ["src", "width", "height"], Ts = ["title"], Rs = { key: 0 }, $s = /* @__PURE__ */ C({
+}), Ts = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ C({
   __name: "Signaturepad",
   props: {
     question: {}
@@ -890,7 +894,7 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("sv-svg-icon");
+      const i = v("sv-svg-icon");
       return t(), u("div", {
         class: l(s.question.cssClasses.root),
         ref_key: "root",
@@ -900,7 +904,7 @@ const Ee = /* @__PURE__ */ C({
           width: s.question.signatureWidth + "px"
         })
       }, [
-        D(p("div", {
+        L(p("div", {
           class: l(s.question.cssClasses.placeholder)
         }, I(s.question.placeHolderText), 3), [
           [H, s.question.needShowPlaceholder()]
@@ -912,7 +916,7 @@ const Ee = /* @__PURE__ */ C({
             src: s.question.backgroundImage,
             width: s.question.signatureWidth,
             height: s.question.signatureHeight
-          }, null, 10, Ss)) : m("", !0),
+          }, null, 10, Ts)) : m("", !0),
           p("canvas", {
             tabindex: "0",
             class: l(s.question.cssClasses.canvas)
@@ -930,18 +934,18 @@ const Ee = /* @__PURE__ */ C({
               s.question.clearValue();
             })
           }, [
-            s.question.cssClasses.clearButtonIconId ? m("", !0) : (t(), u("span", Rs, "\u2716")),
-            s.question.cssClasses.clearButtonIconId ? (t(), y(i, {
+            s.question.cssClasses.clearButtonIconId ? m("", !0) : (t(), u("span", Bs, "\u2716")),
+            s.question.cssClasses.clearButtonIconId ? (t(), q(i, {
               key: 1,
               iconName: s.question.cssClasses.clearButtonIconId,
               size: "auto"
             }, null, 8, ["iconName"])) : m("", !0)
-          ], 10, Ts)
+          ], 10, $s)
         ], 2)) : m("", !0)
       ], 6);
     };
   }
-}), Bs = ["innerHTML"], Ls = /* @__PURE__ */ C({
+}), Ds = ["innerHTML"], Ps = /* @__PURE__ */ C({
   __name: "Html",
   props: {
     question: {}
@@ -954,10 +958,10 @@ const Ee = /* @__PURE__ */ C({
       ref_key: "root",
       ref: n,
       class: l(e.question.renderCssRoot),
-      innerHTML: b(s)
-    }, null, 10, Bs));
+      innerHTML: f(s)
+    }, null, 10, Ds));
   }
-}), Ds = ["src", "alt", "width", "height"], Ps = ["src", "width", "height"], Ms = ["src", "width", "height"], Ns = /* @__PURE__ */ C({
+}), Ms = ["src", "alt", "width", "height"], Ns = ["src", "width", "height"], Hs = ["src", "width", "height"], As = /* @__PURE__ */ C({
   __name: "Image",
   props: {
     question: {}
@@ -967,16 +971,16 @@ const Ee = /* @__PURE__ */ C({
     M(o, n);
     const s = W(() => o.question.locImageLink);
     return (e, i) => {
-      const a = q("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return t(), u("div", {
         class: l(e.question.cssClasses.root),
         ref_key: "root",
         ref: n
       }, [
-        e.question.renderedMode === "image" ? D((t(), u("img", {
+        e.question.renderedMode === "image" ? L((t(), u("img", {
           key: 0,
           class: l(e.question.getImageCss()),
-          src: b(s),
+          src: f(s),
           alt: e.question.altText || e.question.title,
           width: e.question.renderedWidth,
           height: e.question.renderedHeight,
@@ -991,14 +995,14 @@ const Ee = /* @__PURE__ */ C({
           onError: i[1] || (i[1] = (d) => {
             e.question.onErrorHandler();
           })
-        }, null, 46, Ds)), [
-          [H, b(s) && !e.question.contentNotLoaded]
+        }, null, 46, Ms)), [
+          [H, f(s) && !e.question.contentNotLoaded]
         ]) : m("", !0),
-        e.question.renderedMode === "video" ? D((t(), u("video", {
+        e.question.renderedMode === "video" ? L((t(), u("video", {
           key: 1,
           controls: "",
           class: l(e.question.getImageCss()),
-          src: b(s),
+          src: f(s),
           width: e.question.renderedWidth,
           height: e.question.renderedHeight,
           style: $({
@@ -1012,13 +1016,13 @@ const Ee = /* @__PURE__ */ C({
           onError: i[3] || (i[3] = (d) => {
             e.question.onErrorHandler();
           })
-        }, null, 46, Ps)), [
-          [H, b(s) && !e.question.contentNotLoaded]
+        }, null, 46, Ns)), [
+          [H, f(s) && !e.question.contentNotLoaded]
         ]) : m("", !0),
         e.question.renderedMode === "youtube" ? (t(), u("iframe", {
           key: 2,
           class: l(e.question.getImageCss()),
-          src: b(s),
+          src: f(s),
           width: e.question.renderedWidth,
           height: e.question.renderedHeight,
           style: $({
@@ -1026,12 +1030,12 @@ const Ee = /* @__PURE__ */ C({
             width: e.question.renderedStyleWidth,
             height: e.question.renderedStyleHeight
           })
-        }, null, 14, Ms)) : m("", !0),
-        !b(s) || e.question.contentNotLoaded ? (t(), u("div", {
+        }, null, 14, Hs)) : m("", !0),
+        !f(s) || e.question.contentNotLoaded ? (t(), u("div", {
           key: 3,
           class: l(e.question.cssClasses.noImage)
         }, [
-          h(a, {
+          b(a, {
             iconName: e.question.cssClasses.noImageSvgIconId,
             size: 48
           }, null, 8, ["iconName"])
@@ -1039,7 +1043,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Hs = /* @__PURE__ */ C({
+}), Es = /* @__PURE__ */ C({
   __name: "Expression",
   props: {
     question: {}
@@ -1052,7 +1056,7 @@ const Ee = /* @__PURE__ */ C({
       ref: n
     }, I(s.question.formatedValue), 3));
   }
-}), As = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Es = ["id", "multiple", "placeholder"], Vs = ["for", "aria-label"], Os = ["onClick", "href", "title", "download"], Fs = ["src"], Ws = ["onClick"], zs = ["onClick", "href", "title", "download"], Us = /* @__PURE__ */ C({
+}), Vs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Os = ["id", "multiple", "placeholder"], Fs = ["for", "aria-label"], Ws = ["onClick", "href", "title", "download"], zs = ["src"], Us = ["onClick"], Ks = ["onClick", "href", "title", "download"], _s = /* @__PURE__ */ C({
   __name: "File",
   props: {
     question: {}
@@ -1062,7 +1066,7 @@ const Ee = /* @__PURE__ */ C({
     M(o, n);
     const s = (e) => o.question.isPreviewVisible(e);
     return (e, i) => {
-      const a = q("sv-svg-icon"), d = q("sv-action-bar"), c = _("key2click");
+      const a = v("sv-loading-indicator"), d = v("sv-svg-icon"), c = v("sv-action-bar"), y = Y("key2click");
       return t(), u("div", {
         class: l(e.question.fileRootCss)
       }, [
@@ -1072,7 +1076,7 @@ const Ee = /* @__PURE__ */ C({
           tabindex: "-1",
           type: "file",
           id: e.question.inputId,
-          onChange: i[0] || (i[0] = (...v) => e.question.doChange && e.question.doChange(...v)),
+          onChange: i[0] || (i[0] = (...h) => e.question.doChange && e.question.doChange(...h)),
           "aria-required": e.question.ariaRequired,
           "aria-label": e.question.ariaLabel,
           "aria-invalid": e.question.ariaInvalid,
@@ -1081,7 +1085,7 @@ const Ee = /* @__PURE__ */ C({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 42, As)),
+        }, null, 42, Vs)),
         e.question.isReadOnly ? (t(), u("input", {
           key: 1,
           type: "file",
@@ -1091,155 +1095,158 @@ const Ee = /* @__PURE__ */ C({
           multiple: e.question.allowMultiple,
           placeholder: e.question.title,
           style: { color: "transparent" }
-        }, null, 10, Es)) : m("", !0),
+        }, null, 10, Os)) : m("", !0),
         p("div", {
           class: l(e.question.cssClasses.dragArea),
-          onDrop: i[3] || (i[3] = (...v) => e.question.onDrop && e.question.onDrop(...v)),
-          onDragover: i[4] || (i[4] = (...v) => e.question.onDragOver && e.question.onDragOver(...v)),
-          onDragleave: i[5] || (i[5] = (...v) => e.question.onDragLeave && e.question.onDragLeave(...v)),
-          onDragenter: i[6] || (i[6] = (...v) => e.question.onDragEnter && e.question.onDragEnter(...v))
+          onDrop: i[3] || (i[3] = (...h) => e.question.onDrop && e.question.onDrop(...h)),
+          onDragover: i[4] || (i[4] = (...h) => e.question.onDragOver && e.question.onDragOver(...h)),
+          onDragleave: i[5] || (i[5] = (...h) => e.question.onDragLeave && e.question.onDragLeave(...h)),
+          onDragenter: i[6] || (i[6] = (...h) => e.question.onDragEnter && e.question.onDragEnter(...h))
         }, [
           p("div", {
             class: l(e.question.getFileDecoratorCss())
           }, [
-            p("span", {
-              class: l(e.question.cssClasses.dragAreaPlaceholder)
-            }, I(e.question.renderedPlaceholder), 3),
-            p("div", {
-              class: l(e.question.cssClasses.wrapper)
-            }, [
-              e.question.isReadOnly ? m("", !0) : D((t(), u("label", {
-                key: 0,
-                role: "button",
-                tabindex: "0",
-                class: l(e.question.getChooseFileCss()),
-                for: e.question.inputId,
-                "aria-label": e.question.chooseButtonText
+            e.question.showLoadingIndicator ? (t(), q(a, { key: 0 })) : m("", !0),
+            e.question.showChooseButton ? (t(), u(w, { key: 1 }, [
+              p("span", {
+                class: l(e.question.cssClasses.dragAreaPlaceholder)
+              }, I(e.question.renderedPlaceholder), 3),
+              p("div", {
+                class: l(e.question.cssClasses.wrapper)
               }, [
-                p("span", null, I(e.question.chooseButtonText), 1),
-                e.question.cssClasses.chooseFileIconId ? (t(), y(a, {
+                e.question.isReadOnly ? m("", !0) : L((t(), u("label", {
                   key: 0,
-                  title: e.question.chooseButtonText,
-                  iconName: e.question.cssClasses.chooseFileIconId,
-                  size: "auto"
-                }, null, 8, ["title", "iconName"])) : m("", !0)
-              ], 10, Vs)), [
-                [c]
-              ]),
-              e.question.isEmpty() ? (t(), u("span", {
-                key: 1,
-                class: l(e.question.cssClasses.noFileChosen)
-              }, I(e.question.noFileChosenCaption), 3)) : m("", !0)
-            ], 2)
+                  role: "button",
+                  tabindex: "0",
+                  class: l(e.question.getChooseFileCss()),
+                  for: e.question.inputId,
+                  "aria-label": e.question.chooseButtonText
+                }, [
+                  p("span", null, I(e.question.chooseButtonText), 1),
+                  e.question.cssClasses.chooseFileIconId ? (t(), q(d, {
+                    key: 0,
+                    title: e.question.chooseButtonText,
+                    iconName: e.question.cssClasses.chooseFileIconId,
+                    size: "auto"
+                  }, null, 8, ["title", "iconName"])) : m("", !0)
+                ], 10, Fs)), [
+                  [y]
+                ]),
+                e.question.isEmpty() ? (t(), u("span", {
+                  key: 1,
+                  class: l(e.question.cssClasses.noFileChosen)
+                }, I(e.question.noFileChosenCaption), 3)) : m("", !0)
+              ], 2)
+            ], 64)) : m("", !0)
           ], 2),
           e.question.showRemoveButton ? (t(), u("button", {
             key: 0,
             type: "button",
             class: l(e.question.cssClasses.removeButton),
-            onClick: i[1] || (i[1] = (...v) => e.question.doClean && e.question.doClean(...v))
+            onClick: i[1] || (i[1] = (...h) => e.question.doClean && e.question.doClean(...h))
           }, [
             p("span", null, I(e.question.clearButtonCaption), 1),
-            e.question.cssClasses.removeButtonIconId ? (t(), y(a, {
+            e.question.cssClasses.removeButtonIconId ? (t(), q(d, {
               key: 0,
               iconName: e.question.cssClasses.removeButtonIconId,
               size: "auto",
               title: e.question.clearButtonCaption
             }, null, 8, ["iconName", "title"])) : m("", !0)
           ], 2)) : m("", !0),
-          e.question.isEmpty() ? m("", !0) : (t(), u("div", {
+          e.question.allowShowPreview ? (t(), u("div", {
             key: 1,
             class: l(e.question.cssClasses.fileList || void 0)
           }, [
-            (t(!0), u(w, null, R(e.question.previewValue, (v, f) => D((t(), u("span", {
-              key: e.question.inputId + "_" + f,
+            (t(!0), u(w, null, T(e.question.previewValue, (h, g) => L((t(), u("span", {
+              key: e.question.inputId + "_" + g,
               class: l(e.question.cssClasses.preview)
             }, [
-              v.name && e.question.cssClasses.fileSign ? (t(), u("div", {
+              h.name && e.question.cssClasses.fileSign ? (t(), u("div", {
                 key: 0,
                 class: l(e.question.cssClasses.fileSign)
               }, [
                 p("a", {
-                  onClick: (g) => e.question.doDownloadFile(g, v),
-                  href: v.content,
-                  title: v.name,
-                  download: v.name,
+                  onClick: (k) => e.question.doDownloadFile(k, h),
+                  href: h.content,
+                  title: h.name,
+                  download: h.name,
                   style: $({ width: e.question.imageWidth })
-                }, I(v.name), 13, Os)
+                }, I(h.name), 13, Ws)
               ], 2)) : m("", !0),
               p("div", {
                 class: l(e.question.cssClasses.imageWrapper)
               }, [
-                e.question.canPreviewImage(v) ? (t(), u("img", {
+                e.question.canPreviewImage(h) ? (t(), u("img", {
                   key: 0,
-                  src: v.content,
+                  src: h.content,
                   style: $({
                     height: e.question.imageHeight,
                     width: e.question.imageWidth
                   }),
                   alt: "File preview"
-                }, null, 12, Fs)) : m("", !0),
-                e.question.defaultImage(v) ? (t(), y(a, {
+                }, null, 12, zs)) : m("", !0),
+                e.question.defaultImage(h) ? (t(), q(d, {
                   key: 1,
                   iconName: e.question.cssClasses.defaultImageIconId,
                   class: l(e.question.cssClasses.defaultImage),
                   size: "auto"
                 }, null, 8, ["iconName", "class"])) : m("", !0),
-                v.name && !e.question.isReadOnly ? (t(), u("div", {
+                h.name && !e.question.isReadOnly ? (t(), u("div", {
                   key: 2,
                   class: l(e.question.cssClasses.removeFileButton),
-                  onClick: (g) => e.question.doRemoveFile(v)
+                  onClick: (k) => e.question.doRemoveFile(h)
                 }, [
                   p("span", {
                     class: l(e.question.cssClasses.removeFile)
                   }, I(e.question.removeFileCaption), 3),
-                  e.question.cssClasses.removeFileSvgIconId ? (t(), y(a, {
+                  e.question.cssClasses.removeFileSvgIconId ? (t(), q(d, {
                     key: 0,
                     title: e.question.removeFileCaption,
                     class: l(e.question.cssClasses.removeFileSvg),
                     iconName: e.question.cssClasses.removeFileSvgIconId,
                     size: "auto"
                   }, null, 8, ["title", "class", "iconName"])) : m("", !0)
-                ], 10, Ws)) : m("", !0)
+                ], 10, Us)) : m("", !0)
               ], 2),
-              v.name && e.question.cssClasses.fileSignBottom ? (t(), u("div", {
+              h.name && e.question.cssClasses.fileSignBottom ? (t(), u("div", {
                 key: 1,
                 class: l(e.question.cssClasses.fileSignBottom)
               }, [
                 p("a", {
-                  onClick: (g) => e.question.doDownloadFile(g, v),
-                  href: v.content,
-                  title: v.name,
-                  download: v.name,
+                  onClick: (k) => e.question.doDownloadFile(k, h),
+                  href: h.content,
+                  title: h.name,
+                  download: h.name,
                   style: $({ width: e.question.imageWidth })
-                }, I(v.name), 13, zs)
+                }, I(h.name), 13, Ks)
               ], 2)) : m("", !0)
             ], 2)), [
-              [H, v && s(f)]
+              [H, h && s(g)]
             ])), 128))
-          ], 2)),
+          ], 2)) : m("", !0),
           e.question.showRemoveButtonBottom ? (t(), u("button", {
             key: 2,
             type: "button",
             class: l(e.question.showRemoveButtonBottom),
-            onClick: i[2] || (i[2] = (...v) => e.question.doClean && e.question.doClean(...v))
+            onClick: i[2] || (i[2] = (...h) => e.question.doClean && e.question.doClean(...h))
           }, [
             p("span", null, I(e.question.clearButtonCaption), 1),
-            e.question.cssClasses.removeButtonIconId ? (t(), y(a, {
+            e.question.cssClasses.removeButtonIconId ? (t(), q(d, {
               key: 0,
               iconName: e.question.cssClasses.removeButtonIconId,
               size: "auto",
               title: e.question.clearButtonCaption
             }, null, 8, ["iconName", "title"])) : m("", !0)
           ], 2)) : m("", !0),
-          e.question.mobileFileNavigatorVisible ? (t(), y(d, {
+          e.question.fileNavigatorVisible ? (t(), q(c, {
             key: 3,
-            model: e.question.mobileFileNavigator
+            model: e.question.fileNavigator
           }, null, 8, ["model"])) : m("", !0)
         ], 34)
       ], 2);
     };
   }
-}), Ks = ["aria-label"], js = /* @__PURE__ */ C({
+}), js = ["aria-label"], Qs = /* @__PURE__ */ C({
   __name: "Imagepicker",
   props: {
     question: {}
@@ -1247,7 +1254,7 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-imagepicker-item");
+      const i = v("survey-imagepicker-item");
       return t(), u("fieldset", {
         class: l(s.question.getSelectBaseRootCss()),
         ref_key: "root",
@@ -1256,18 +1263,18 @@ const Ee = /* @__PURE__ */ C({
         p("legend", {
           role: "radio",
           "aria-label": s.question.locTitle.renderedHtml
-        }, null, 8, Ks),
-        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, R(s.question.visibleChoices, (a) => (t(), y(i, {
+        }, null, 8, js),
+        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (a) => (t(), q(i, {
           key: a.value,
           question: s.question,
           item: a
         }, null, 8, ["question", "item"]))), 128)),
-        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, R(s.question.columns, (a, d) => (t(), u("div", {
+        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, T(s.question.columns, (a, d) => (t(), u("div", {
           class: l(s.question.getColumnClass()),
           key: d,
           role: "presentation"
         }, [
-          (t(!0), u(w, null, R(a, (c) => (t(), y(i, {
+          (t(!0), u(w, null, T(a, (c) => (t(), q(i, {
             key: c.value,
             question: s.question,
             item: c
@@ -1276,7 +1283,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Qs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["src", "width", "height", "alt"], Xs = ["src", "width", "height"], Js = /* @__PURE__ */ C({
+}), Zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xs = ["src", "width", "height", "alt"], Js = ["src", "width", "height"], Ys = /* @__PURE__ */ C({
   __name: "ImagepickerItem",
   props: {
     question: {},
@@ -1287,14 +1294,14 @@ const Ee = /* @__PURE__ */ C({
     B(() => o.item);
     const s = W(() => o.item.locImageLink);
     return (e, i) => {
-      const a = q("sv-svg-icon"), d = q("survey-string");
+      const a = v("sv-svg-icon"), d = v("survey-string");
       return t(), u("div", {
         class: l(n(e.item))
       }, [
         p("label", {
           class: l(e.question.cssClasses.label)
         }, [
-          e.question.multiSelect ? D((t(), u("input", {
+          e.question.multiSelect ? L((t(), u("input", {
             key: 0,
             type: "checkbox",
             name: e.question.questionName,
@@ -1307,9 +1314,9 @@ const Ee = /* @__PURE__ */ C({
             "aria-invalid": e.question.ariaInvalid,
             "aria-describedby": e.question.ariaDescribedBy,
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, Qs)), [
+          }, null, 10, Zs)), [
             [z, e.question.value]
-          ]) : D((t(), u("input", {
+          ]) : L((t(), u("input", {
             key: 1,
             type: "radio",
             name: e.question.questionName,
@@ -1322,8 +1329,8 @@ const Ee = /* @__PURE__ */ C({
             "aria-invalid": e.question.ariaInvalid,
             "aria-describedby": e.question.ariaDescribedBy,
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, Zs)), [
-            [Y, e.question.value]
+          }, null, 10, Gs)), [
+            [J, e.question.value]
           ]),
           p("div", {
             class: l(e.question.cssClasses.itemDecorator)
@@ -1335,17 +1342,17 @@ const Ee = /* @__PURE__ */ C({
                 key: 0,
                 class: l(e.question.cssClasses.checkedItemDecorator)
               }, [
-                e.question.cssClasses.checkedItemSvgIconId ? (t(), y(a, {
+                e.question.cssClasses.checkedItemSvgIconId ? (t(), q(a, {
                   key: 0,
                   class: l(e.question.cssClasses.checkedItemSvgIcon),
                   size: "auto",
                   iconName: e.question.cssClasses.checkedItemSvgIconId
                 }, null, 8, ["class", "iconName"])) : m("", !0)
               ], 2)) : m("", !0),
-              b(s) && !e.item.contentNotLoaded && e.question.contentMode === "image" ? (t(), u("img", {
+              f(s) && !e.item.contentNotLoaded && e.question.contentMode === "image" ? (t(), u("img", {
                 key: 1,
                 class: l(e.question.cssClasses.image),
-                src: b(s),
+                src: f(s),
                 width: e.question.renderedImageWidth,
                 height: e.question.renderedImageHeight,
                 style: $({ objectFit: e.question.imageFit }),
@@ -1356,12 +1363,12 @@ const Ee = /* @__PURE__ */ C({
                 onError: i[3] || (i[3] = (c) => {
                   e.item.onErrorHandler();
                 })
-              }, null, 46, Gs)) : m("", !0),
-              b(s) && !e.item.contentNotLoaded && e.question.contentMode === "video" ? (t(), u("video", {
+              }, null, 46, Xs)) : m("", !0),
+              f(s) && !e.item.contentNotLoaded && e.question.contentMode === "video" ? (t(), u("video", {
                 key: 2,
                 controls: "",
                 class: l(e.question.cssClasses.image),
-                src: b(s),
+                src: f(s),
                 width: e.question.renderedImageWidth,
                 height: e.question.renderedImageHeight,
                 style: $({ objectFit: e.question.imageFit }),
@@ -1371,8 +1378,8 @@ const Ee = /* @__PURE__ */ C({
                 onError: i[5] || (i[5] = (c) => {
                   e.item.onErrorHandler();
                 })
-              }, null, 46, Xs)) : m("", !0),
-              !b(s) || e.item.contentNotLoaded ? (t(), u("div", {
+              }, null, 46, Js)) : m("", !0),
+              !f(s) || e.item.contentNotLoaded ? (t(), u("div", {
                 key: 3,
                 class: l(e.question.cssClasses.itemNoImage),
                 style: $({
@@ -1381,7 +1388,7 @@ const Ee = /* @__PURE__ */ C({
                   objectFit: e.question.imageFit
                 })
               }, [
-                h(a, {
+                b(a, {
                   class: l(e.question.cssClasses.itemNoImageSvgIcon),
                   iconName: e.question.cssClasses.itemNoImageSvgIconId,
                   size: 48
@@ -1392,7 +1399,7 @@ const Ee = /* @__PURE__ */ C({
               key: 0,
               class: l(e.question.cssClasses.itemText)
             }, [
-              h(d, {
+              b(d, {
                 locString: e.item.locText
               }, null, 8, ["locString"])
             ], 2)) : m("", !0)
@@ -1401,7 +1408,7 @@ const Ee = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ys = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], _s = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], xs = /* @__PURE__ */ C({
+}), xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], en = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], sn = /* @__PURE__ */ C({
   __name: "Comment",
   props: {
     question: {},
@@ -1415,7 +1422,7 @@ const Ee = /* @__PURE__ */ C({
       i.value = e.target.value;
     };
     return (e, i) => {
-      const a = q("sv-character-counter");
+      const a = v("sv-character-counter");
       return !e.question.isReadOnlyRenderDiv() && !e.question.getMaxLength() ? (t(), u("textarea", {
         key: 0,
         ref_key: "root",
@@ -1442,7 +1449,7 @@ const Ee = /* @__PURE__ */ C({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy,
         style: $({ resize: e.question.resizeStyle })
-      }, null, 46, Ys)) : !e.question.isReadOnlyRenderDiv() && e.question.getMaxLength() ? (t(), u("div", {
+      }, null, 46, xs)) : !e.question.isReadOnlyRenderDiv() && e.question.getMaxLength() ? (t(), u("div", {
         key: 1,
         ref_key: "root",
         ref: n
@@ -1470,8 +1477,8 @@ const Ee = /* @__PURE__ */ C({
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy,
           style: $({ resize: e.question.resizeStyle })
-        }, null, 46, _s),
-        h(a, {
+        }, null, 46, en),
+        b(a, {
           counter: e.question.characterCounter,
           remainingCharacterCounter: e.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
@@ -1482,7 +1489,7 @@ const Ee = /* @__PURE__ */ C({
       }, I(e.question.value), 513));
     };
   }
-}), en = /* @__PURE__ */ C({
+}), nn = /* @__PURE__ */ C({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1490,30 +1497,30 @@ const Ee = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("sv-dropdown"), a = q("survey-other-choice");
+      const i = v("sv-dropdown"), a = v("survey-other-choice");
       return t(), u("div", {
         class: l(s.question.renderCssRoot),
         ref_key: "root",
         ref: n
       }, [
-        h(i, { question: s.question }, null, 8, ["question"]),
-        s.question.isOtherSelected ? (t(), y(a, {
+        b(i, { question: s.question }, null, 8, ["question"]),
+        s.question.isOtherSelected ? (t(), q(a, {
           key: 0,
           question: s.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), sn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], nn = {
+}), on = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], tn = {
   key: 0,
   value: ""
-}, on = ["id"];
-X.Instance.registerRenderer(
+}, ln = ["id"];
+G.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const tn = /* @__PURE__ */ C({
+const rn = /* @__PURE__ */ C({
   __name: "DropdownSelect",
   props: {
     question: {}
@@ -1525,7 +1532,7 @@ const tn = /* @__PURE__ */ C({
       o.question.onClick(a);
     }, e = (a) => {
       o.question.onKeyUp(a);
-    }, i = T({
+    }, i = R({
       get() {
         var a;
         return (a = o.question.value) != null ? a : "";
@@ -1536,7 +1543,7 @@ const tn = /* @__PURE__ */ C({
       }
     });
     return (a, d) => {
-      const c = q("sv-dropdown-option-item"), v = q("sv-svg-icon"), f = q("survey-other-choice");
+      const c = v("sv-dropdown-option-item"), y = v("sv-svg-icon"), h = v("survey-other-choice");
       return t(), u("div", {
         class: l(a.question.renderCssRoot)
       }, [
@@ -1548,7 +1555,7 @@ const tn = /* @__PURE__ */ C({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, I(a.question.readOnlyText), 11, on)) : D((t(), u("select", {
+          }, I(a.question.readOnlyText), 11, ln)) : L((t(), u("select", {
             key: 0,
             id: a.question.inputId,
             "onUpdate:modelValue": d[0] || (d[0] = (g) => i.value = g),
@@ -1562,33 +1569,33 @@ const tn = /* @__PURE__ */ C({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (t(), u("option", nn, I(a.question.placeholder), 1)) : m("", !0),
-            (t(!0), u(w, null, R(a.question.visibleChoices, (g) => (t(), y(c, {
+            a.question.allowClear ? (t(), u("option", tn, I(a.question.placeholder), 1)) : m("", !0),
+            (t(!0), u(w, null, T(a.question.visibleChoices, (g) => (t(), q(c, {
               item: g,
               key: g.id
             }, null, 8, ["item"]))), 128))
-          ], 42, sn)), [
-            [pe, i.value]
+          ], 42, on)), [
+            [ve, i.value]
           ]),
           a.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
             key: 2,
             class: l(a.question.cssClasses.chevronButton)
           }, [
-            h(v, {
+            b(y, {
               class: l(a.question.cssClasses.chevronButtonSvg),
               iconName: a.question.cssClasses.chevronButtonIconId,
               size: "auto"
             }, null, 8, ["class", "iconName"])
           ], 2)) : m("", !0)
         ], 2),
-        a.question.isOtherSelected ? (t(), y(f, {
+        a.question.isOtherSelected ? (t(), q(h, {
           key: 0,
           question: a.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), ln = ["value", "disabled"], rn = /* @__PURE__ */ C({
+}), an = ["value", "disabled"], un = /* @__PURE__ */ C({
   __name: "OptionItem",
   props: {
     item: {}
@@ -1598,17 +1605,17 @@ const tn = /* @__PURE__ */ C({
     return B(() => o.item), (s, e) => (t(), u("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
-    }, I(b(n)), 9, ln));
+    }, I(f(n)), 9, an));
   }
-}), an = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], un = { style: { visibility: "hidden" } }, dn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], mn = ["id"], cn = /* @__PURE__ */ C({
+}), dn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], mn = { style: { visibility: "hidden" } }, cn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], pn = ["id"], vn = /* @__PURE__ */ C({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = S(null), s = T(() => {
+    const o = r, n = S(null), s = R(() => {
       const g = o.question;
-      return g.dropdownListModel || (g.dropdownListModel = new fe(g)), o.question.dropdownListModel;
+      return g.dropdownListModel || (g.dropdownListModel = new Ie(g)), o.question.dropdownListModel;
     }), e = (g) => {
       var k;
       (k = s.value) == null || k.onClick(g);
@@ -1621,19 +1628,19 @@ const tn = /* @__PURE__ */ C({
     }, d = () => {
       if (n.value) {
         const g = n.value, k = s.value.inputStringRendered;
-        Ie.isTwoValueEquals(k, g.value, !1, !0, !1) || (g.value = s.value.inputStringRendered);
+        we.isTwoValueEquals(k, g.value, !1, !0, !1) || (g.value = s.value.inputStringRendered);
       }
     }, c = (g) => {
       var k;
       (k = s.value) == null || k.onBlur(g), d();
-    }, v = (g) => {
+    }, y = (g) => {
       var k;
       (k = s.value) == null || k.onFocus(g);
-    }, f = (g) => {
+    }, h = (g) => {
       s.value.inputStringRendered = g.target.value;
     };
-    return B(() => s.value), G(d), A(d), (g, k) => {
-      const P = q("survey-string"), L = q("sv-svg-icon"), E = q("sv-popup");
+    return B(() => s.value), Z(d), A(d), (g, k) => {
+      const P = v("survey-string"), D = v("sv-svg-icon"), E = v("sv-popup");
       return t(), u("div", {
         class: l(g.question.cssClasses.selectWrapper),
         onClick: e
@@ -1665,7 +1672,7 @@ const tn = /* @__PURE__ */ C({
           p("div", {
             class: l(g.question.cssClasses.controlValue)
           }, [
-            g.question.showSelectedItemLocText ? (t(), y(P, {
+            g.question.showSelectedItemLocText ? (t(), q(P, {
               key: 0,
               locString: g.question.selectedItemLocText
             }, null, 8, ["locString"])) : m("", !0),
@@ -1673,10 +1680,10 @@ const tn = /* @__PURE__ */ C({
               key: 1,
               class: l(g.question.cssClasses.hintSuffix)
             }, [
-              p("span", un, I(s.value.inputStringRendered), 1),
+              p("span", mn, I(s.value.inputStringRendered), 1),
               p("span", null, I(s.value.hintStringSuffix), 1)
             ], 2)) : m("", !0),
-            g.question.showInputFieldComponent ? (t(), y(N(g.question.inputFieldComponentName), {
+            g.question.showInputFieldComponent ? (t(), q(N(g.question.inputFieldComponentName), {
               key: 2,
               item: s.value.getSelectedAction(),
               question: g.question
@@ -1698,17 +1705,17 @@ const tn = /* @__PURE__ */ C({
               "aria-controls": s.value.listElementId,
               "aria-activedescendant": s.value.ariaActivedescendant,
               placeholder: s.value.placeholderRendered,
-              onInput: f,
+              onInput: h,
               onBlur: c,
-              onFocus: v
-            }, null, 42, dn)
+              onFocus: y
+            }, null, 42, cn)
           ], 2),
-          g.question.allowClear && g.question.cssClasses.cleanButtonIconId ? D((t(), u("div", {
+          g.question.allowClear && g.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
             key: 1,
             class: l(g.question.cssClasses.cleanButton),
             onClick: i
           }, [
-            h(L, {
+            b(D, {
               class: l(g.question.cssClasses.cleanButtonSvg),
               iconName: g.question.cssClasses.cleanButtonIconId,
               title: g.question.clearCaption,
@@ -1717,19 +1724,19 @@ const tn = /* @__PURE__ */ C({
           ], 2)), [
             [H, !g.question.isEmpty()]
           ]) : m("", !0)
-        ], 42, an)),
+        ], 42, dn)),
         g.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
           id: g.question.inputId,
           class: l(g.question.getControlClass())
         }, [
-          g.question.selectedItemLocText ? (t(), y(P, {
+          g.question.selectedItemLocText ? (t(), q(P, {
             key: 0,
             locString: g.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
           p("div", null, I(g.question.readOnlyText), 1)
-        ], 10, mn)) : (t(), y(E, {
+        ], 10, pn)) : (t(), q(E, {
           key: 1,
           model: g.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1737,7 +1744,7 @@ const tn = /* @__PURE__ */ C({
           key: 3,
           class: l(g.question.cssClasses.chevronButton)
         }, [
-          h(L, {
+          b(D, {
             class: l(g.question.cssClasses.chevronButtonSvg),
             iconName: g.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1746,7 +1753,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), pn = /* @__PURE__ */ C({
+}), qn = /* @__PURE__ */ C({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1754,29 +1761,29 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("sv-tagbox"), a = q("survey-other-choice");
+      const i = v("sv-tagbox"), a = v("survey-other-choice");
       return t(), u("div", {
         class: l(s.question.renderCssRoot),
         ref_key: "root",
         ref: n
       }, [
-        h(i, { question: s.question }, null, 8, ["question"]),
-        s.question.isOtherSelected ? (t(), y(a, {
+        b(i, { question: s.question }, null, 8, ["question"]),
+        s.question.isOtherSelected ? (t(), q(a, {
           key: 0,
           question: s.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), vn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], qn = ["id"], yn = /* @__PURE__ */ C({
+}), yn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], gn = ["id"], Cn = /* @__PURE__ */ C({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(() => {
+    const o = r, n = R(() => {
       const d = o.question;
-      return d.dropdownListModel || (d.dropdownListModel = new we(d)), o.question.dropdownListModel;
+      return d.dropdownListModel || (d.dropdownListModel = new Se(d)), o.question.dropdownListModel;
     }), s = (d) => {
       var c;
       (c = n.value) == null || c.onClick(d);
@@ -1791,7 +1798,7 @@ const tn = /* @__PURE__ */ C({
       (c = n.value) == null || c.onBlur(d);
     };
     return B(() => n.value), (d, c) => {
-      const v = q("sv-tagbox-item"), f = q("sv-tagbox-filter"), g = q("sv-svg-icon"), k = q("sv-popup");
+      const y = v("sv-tagbox-item"), h = v("sv-tagbox-filter"), g = v("sv-svg-icon"), k = v("sv-popup");
       return t(), u("div", {
         class: l(d.question.cssClasses.selectWrapper),
         onClick: s
@@ -1817,22 +1824,22 @@ const tn = /* @__PURE__ */ C({
           p("div", {
             class: l(d.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, R(d.question.selectedChoices, (P, L) => (t(), y(v, {
+            (t(!0), u(w, null, T(d.question.selectedChoices, (P, D) => (t(), q(y, {
               item: P,
               question: d.question,
-              key: "item" + L
+              key: "item" + D
             }, null, 8, ["item", "question"]))), 128)),
-            h(f, {
+            b(h, {
               model: n.value,
               question: d.question
             }, null, 8, ["model", "question"])
           ], 2),
-          d.question.allowClear && d.question.cssClasses.cleanButtonIconId ? D((t(), u("div", {
+          d.question.allowClear && d.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
             key: 0,
             class: l(d.question.cssClasses.cleanButton),
             onClick: e
           }, [
-            h(g, {
+            b(g, {
               class: l(d.question.cssClasses.cleanButtonSvg),
               iconName: d.question.cssClasses.cleanButtonIconId,
               title: d.question.clearCaption,
@@ -1841,7 +1848,7 @@ const tn = /* @__PURE__ */ C({
           ], 2)), [
             [H, !d.question.isEmpty()]
           ]) : m("", !0)
-        ], 42, vn)),
+        ], 42, yn)),
         d.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
@@ -1849,7 +1856,7 @@ const tn = /* @__PURE__ */ C({
           class: l(d.question.getControlClass())
         }, [
           p("div", null, I(d.question.readOnlyText), 1)
-        ], 10, qn)) : (t(), y(k, {
+        ], 10, gn)) : (t(), q(k, {
           key: 1,
           model: n.value.popupModel
         }, null, 8, ["model"])),
@@ -1857,7 +1864,7 @@ const tn = /* @__PURE__ */ C({
           key: 3,
           class: l(d.question.cssClasses.chevronButton)
         }, [
-          h(g, {
+          b(g, {
             class: l(d.question.cssClasses.chevronButtonSvg),
             iconName: d.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1866,7 +1873,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), gn = { style: { visibility: "hidden" } }, Cn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], hn = /* @__PURE__ */ C({
+}), hn = { style: { visibility: "hidden" } }, bn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], kn = /* @__PURE__ */ C({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1884,7 +1891,7 @@ const tn = /* @__PURE__ */ C({
       o.model.onFocus(a);
     };
     return B(() => o.model), (a, d) => {
-      const c = q("survey-string");
+      const c = v("survey-string");
       return t(), u("div", {
         class: l(a.question.cssClasses.hint)
       }, [
@@ -1897,7 +1904,7 @@ const tn = /* @__PURE__ */ C({
         p("div", {
           class: l(a.question.cssClasses.hintSuffixWrapper)
         }, [
-          a.question.showSelectedItemLocText ? (t(), y(c, {
+          a.question.showSelectedItemLocText ? (t(), q(c, {
             key: 0,
             locString: a.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
@@ -1905,13 +1912,13 @@ const tn = /* @__PURE__ */ C({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            p("span", gn, I(a.model.inputStringRendered), 1),
+            p("span", hn, I(a.model.inputStringRendered), 1),
             p("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : m("", !0),
-          D(p("input", {
+          L(p("input", {
             type: "text",
             autocomplete: "off",
-            "onUpdate:modelValue": d[0] || (d[0] = (v) => a.model.inputStringRendered = v),
+            "onUpdate:modelValue": d[0] || (d[0] = (y) => a.model.inputStringRendered = y),
             class: l(a.question.cssClasses.filterStringInput),
             placeholder: a.model.filterStringPlaceholder,
             disabled: a.question.isInputReadOnly,
@@ -1928,14 +1935,14 @@ const tn = /* @__PURE__ */ C({
             onKeydown: s,
             onBlur: e,
             onFocus: i
-          }, null, 42, Cn), [
-            [ve, a.model.inputStringRendered]
+          }, null, 42, bn), [
+            [qe, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), bn = { class: "sv-tagbox__item-text" }, kn = /* @__PURE__ */ C({
+}), fn = { class: "sv-tagbox__item-text" }, In = /* @__PURE__ */ C({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1946,13 +1953,13 @@ const tn = /* @__PURE__ */ C({
       o.question.dropdownListModel.deselectItem(o.item.value), s.stopPropagation();
     };
     return B(() => o.item), (s, e) => {
-      const i = q("survey-string"), a = q("sv-svg-icon");
+      const i = v("survey-string"), a = v("sv-svg-icon");
       return t(), u("div", {
         class: "sv-tagbox__item",
         key: s.item.key
       }, [
-        p("div", bn, [
-          h(i, {
+        p("div", fn, [
+          b(i, {
             locString: s.item.locText
           }, null, 8, ["locString"])
         ]),
@@ -1960,7 +1967,7 @@ const tn = /* @__PURE__ */ C({
           class: l(s.question.cssClasses.cleanItemButton),
           onClick: n
         }, [
-          h(a, {
+          b(a, {
             class: l(s.question.cssClasses.cleanItemButtonSvg),
             iconName: s.question.cssClasses.cleanItemButtonIconId,
             size: "auto"
@@ -1969,7 +1976,7 @@ const tn = /* @__PURE__ */ C({
       ]);
     };
   }
-}), fn = /* @__PURE__ */ C({
+}), wn = /* @__PURE__ */ C({
   __name: "Ranking",
   props: {
     question: {}
@@ -1979,13 +1986,13 @@ const tn = /* @__PURE__ */ C({
     M(o, n);
     const s = (e) => o.question.getNumberByIndex(e);
     return (e, i) => {
-      const a = q("survey-ranking-item");
+      const a = v("survey-ranking-item");
       return t(), u("div", {
         class: l(e.question.rootClass),
         ref_key: "root",
         ref: n
       }, [
-        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, R(e.question.rankingChoices, (d, c) => (t(), y(a, {
+        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, T(e.question.rankingChoices, (d, c) => (t(), q(a, {
           key: d.value + "-" + c + "-item",
           class: l(e.question.getItemClass(d)),
           text: d.locText,
@@ -2000,7 +2007,7 @@ const tn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (t(!0), u(w, null, R(e.question.unRankingChoices, (d, c) => (t(), y(a, {
+          (t(!0), u(w, null, T(e.question.unRankingChoices, (d, c) => (t(), q(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2025,7 +2032,7 @@ const tn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (t(!0), u(w, null, R(e.question.rankingChoices, (d, c) => (t(), y(a, {
+          (t(!0), u(w, null, T(e.question.rankingChoices, (d, c) => (t(), q(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2043,15 +2050,15 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), In = ["tabindex", "data-sv-drop-target-ranking-item"], wn = {
+}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Sn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), Tn = [
-  Sn
-], Rn = /* @__PURE__ */ p("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), $n = /* @__PURE__ */ p("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Bn = [
-  Rn,
-  $n
-], Ln = /* @__PURE__ */ C({
+}, Tn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), $n = [
+  Tn
+], Bn = /* @__PURE__ */ p("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), Ln = /* @__PURE__ */ p("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Dn = [
+  Bn,
+  Ln
+], Pn = /* @__PURE__ */ C({
   __name: "RankingItem",
   props: {
     index: {},
@@ -2066,7 +2073,7 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     return B(() => o.item), (n, s) => {
-      const e = q("survey-string");
+      const e = v("survey-string");
       return t(), u("div", {
         tabindex: n.question.getItemTabIndex(n.item),
         "data-sv-drop-target-ranking-item": n.index,
@@ -2083,7 +2090,7 @@ const tn = /* @__PURE__ */ C({
           );
         })
       }, [
-        p("div", wn, [
+        p("div", Rn, [
           p("div", {
             class: l(n.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2099,14 +2106,14 @@ const tn = /* @__PURE__ */ C({
                 viewBox: "0 0 10 16",
                 class: l(n.question.getIconHoverCss()),
                 xmlns: "http://www.w3.org/2000/svg"
-              }, Tn, 2)),
+              }, $n, 2)),
               (t(), u("svg", {
                 width: "10",
                 height: "24",
                 viewBox: "0 0 10 24",
                 class: l(n.question.getIconFocusCss()),
                 xmlns: "http://www.w3.org/2000/svg"
-              }, Bn, 2))
+              }, Dn, 2))
             ], 2),
             p("div", {
               class: l(n.question.getItemIndexClasses(n.item))
@@ -2114,17 +2121,17 @@ const tn = /* @__PURE__ */ C({
             p("div", {
               class: l(n.cssClasses.controlLabel)
             }, [
-              h(e, { locString: n.text }, null, 8, ["locString"])
+              b(e, { locString: n.text }, null, 8, ["locString"])
             ], 2)
           ], 2)
         ])
-      ], 42, In);
+      ], 42, Sn);
     };
   }
-}), Dn = { role: "radiogroup" }, Pn = /* @__PURE__ */ p("legend", {
+}), Mn = { role: "radiogroup" }, Nn = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Mn = /* @__PURE__ */ C({
+}, null, -1), Hn = /* @__PURE__ */ C({
   __name: "Rating",
   props: {
     question: {}
@@ -2134,23 +2141,23 @@ const tn = /* @__PURE__ */ C({
     M(o, n);
     const s = (e) => o.question.getInputId(e);
     return (e, i) => {
-      const a = q("survey-string");
+      const a = v("survey-string");
       return t(), u("div", {
         class: l(e.question.ratingRootCss),
         ref_key: "root",
         ref: n
       }, [
-        p("fieldset", Dn, [
-          Pn,
+        p("fieldset", Mn, [
+          Nn,
           e.question.hasMinLabel ? (t(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.minText)
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (t(!0), u(w, null, R(e.question.renderedRateItems, (d, c) => (t(), y(N(e.question.itemComponentName), {
+          (t(!0), u(w, null, T(e.question.renderedRateItems, (d, c) => (t(), q(N(e.question.itemComponentName), {
             key: s(c),
             item: d,
             index: c,
@@ -2160,7 +2167,7 @@ const tn = /* @__PURE__ */ C({
             key: 1,
             class: l(e.question.cssClasses.maxText)
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locMaxRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0)
@@ -2168,7 +2175,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Nn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ C({
+}), An = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ C({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2178,7 +2185,7 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     return B(() => o.item), (n, s) => {
-      const e = q("survey-string");
+      const e = v("survey-string");
       return t(), u("label", {
         key: n.item.value,
         onMousedown: s[1] || (s[1] = (i) => n.question.onMouseDown()),
@@ -2196,18 +2203,18 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, Nn),
+        }, null, 8, An),
         p("span", {
           class: l(n.question.cssClasses.itemText)
         }, [
-          h(e, {
+          b(e, {
             locString: n.item.locText
           }, null, 8, ["locString"])
         ], 2)
       ], 34);
     };
   }
-}), An = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ C({
+}), Vn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], On = /* @__PURE__ */ C({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2217,7 +2224,7 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     return B(() => o.item), (n, s) => {
-      const e = q("sv-svg-icon");
+      const e = v("sv-svg-icon");
       return t(), u("label", {
         key: n.item.value,
         onMousedown: s[1] || (s[1] = (i) => n.question.onMouseDown()),
@@ -2238,8 +2245,8 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, An),
-        h(e, {
+        }, null, 8, Vn),
+        b(e, {
           iconName: n.question.getItemSmileyIconName(n.item.itemValue),
           size: "auto",
           title: n.item.text
@@ -2247,7 +2254,7 @@ const tn = /* @__PURE__ */ C({
       ], 38);
     };
   }
-}), Vn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], On = /* @__PURE__ */ C({
+}), Fn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Wn = /* @__PURE__ */ C({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2257,7 +2264,7 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     return B(() => o.item), (n, s) => {
-      const e = q("sv-svg-icon");
+      const e = v("sv-svg-icon");
       return t(), u("label", {
         key: n.item.value,
         onMousedown: s[1] || (s[1] = (i) => n.question.onMouseDown()),
@@ -2277,14 +2284,14 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, Vn),
-        h(e, {
+        }, null, 8, Fn),
+        b(e, {
           class: l("sv-star"),
           iconName: n.question.itemStarIcon,
           size: "auto",
           title: n.item.text
         }, null, 8, ["iconName", "title"]),
-        h(e, {
+        b(e, {
           class: l("sv-star-2"),
           iconName: n.question.itemStarIconAlt,
           size: "auto",
@@ -2294,12 +2301,12 @@ const tn = /* @__PURE__ */ C({
     };
   }
 });
-X.Instance.registerRenderer(
+G.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const Fn = /* @__PURE__ */ C({
+const zn = /* @__PURE__ */ C({
   __name: "RatingDropdown",
   props: {
     question: {}
@@ -2307,17 +2314,17 @@ const Fn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("sv-dropdown");
+      const i = v("sv-dropdown");
       return t(), u("div", {
         class: l(s.question.cssClasses.rootDropdown),
         ref_key: "root",
         ref: n
       }, [
-        h(i, { question: s.question }, null, 8, ["question"])
+        b(i, { question: s.question }, null, 8, ["question"])
       ], 2);
     };
   }
-}), Wn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], zn = /* @__PURE__ */ C({
+}), Un = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Kn = /* @__PURE__ */ C({
   __name: "BooleanSwitch",
   props: {
     question: {}
@@ -2332,19 +2339,19 @@ const Fn = /* @__PURE__ */ C({
     };
     return (i, a) => {
       var c;
-      const d = q("survey-string");
+      const d = v("survey-string");
       return t(), u("div", {
         class: l(i.question.cssClasses.root),
-        onKeydown: a[4] || (a[4] = (v) => i.question.onKeyDownCore(v))
+        onKeydown: a[4] || (a[4] = (y) => i.question.onKeyDownCore(y))
       }, [
         p("label", {
           class: l(i.question.getItemCss())
         }, [
-          D(p("input", {
+          L(p("input", {
             type: "checkbox",
             name: i.question.name,
             value: (c = i.question.booleanValue) != null ? c : "",
-            "onUpdate:modelValue": a[0] || (a[0] = (v) => i.question.booleanValue = v),
+            "onUpdate:modelValue": a[0] || (a[0] = (y) => i.question.booleanValue = y),
             class: l(i.question.cssClasses.control),
             id: i.question.inputId,
             ".indeterminate": i.question.isIndeterminate,
@@ -2353,24 +2360,24 @@ const Fn = /* @__PURE__ */ C({
             "aria-label": i.question.ariaLabel,
             "aria-invalid": i.question.ariaInvalid,
             "aria-describedby": i.question.ariaDescribedBy
-          }, null, 10, Wn), [
+          }, null, 10, Un), [
             [z, i.question.booleanValue]
           ]),
           p("div", {
             class: l(i.question.cssClasses.sliderGhost),
-            onClick: a[1] || (a[1] = (v) => s(v, !1))
+            onClick: a[1] || (a[1] = (y) => s(y, !1))
           }, [
             p("span", {
               class: l(i.question.getLabelCss(!1))
             }, [
-              h(d, {
+              b(d, {
                 locString: i.question.locLabelFalse
               }, null, 8, ["locString"])
             ], 2)
           ], 2),
           p("div", {
             class: l(i.question.cssClasses.switch),
-            onClick: a[2] || (a[2] = (v) => e(v))
+            onClick: a[2] || (a[2] = (y) => e(y))
           }, [
             p("span", {
               class: l(i.question.cssClasses.slider)
@@ -2379,7 +2386,7 @@ const Fn = /* @__PURE__ */ C({
                 key: 0,
                 class: l(i.question.cssClasses.sliderText)
               }, [
-                h(d, {
+                b(d, {
                   locString: i.question.getCheckedLabel()
                 }, null, 8, ["locString"])
               ], 2)) : m("", !0)
@@ -2387,12 +2394,12 @@ const Fn = /* @__PURE__ */ C({
           ], 2),
           p("div", {
             class: l(i.question.cssClasses.sliderGhost),
-            onClick: a[3] || (a[3] = (v) => s(v, !0))
+            onClick: a[3] || (a[3] = (y) => s(y, !0))
           }, [
             p("span", {
               class: l(i.question.getLabelCss(!0))
             }, [
-              h(d, {
+              b(d, {
                 locString: i.question.locLabelTrue
               }, null, 8, ["locString"])
             ], 2)
@@ -2402,12 +2409,12 @@ const Fn = /* @__PURE__ */ C({
     };
   }
 });
-X.Instance.registerRenderer(
+G.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const Un = /* @__PURE__ */ C({
+const _n = /* @__PURE__ */ C({
   __name: "BooleanRadio",
   props: {
     question: {}
@@ -2415,7 +2422,7 @@ const Un = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("sv-boolean-radio-item");
+      const i = v("sv-boolean-radio-item");
       return t(), u("div", {
         class: l(s.question.cssClasses.rootRadio),
         ref_key: "root",
@@ -2425,13 +2432,13 @@ const Un = /* @__PURE__ */ C({
           role: "presentation",
           class: l(s.question.cssClasses.radioFieldset)
         }, [
-          (t(), y(i, {
+          (t(), q(i, {
             key: !1,
             question: s.question,
             locText: s.question.locLabelFalse,
             value: !1
           }, null, 8, ["question", "locText"])),
-          (t(), y(i, {
+          (t(), q(i, {
             key: !0,
             question: s.question,
             locText: s.question.locLabelTrue,
@@ -2441,7 +2448,7 @@ const Un = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Kn = ["name", "value", "checked", "aria-describedby", "disabled"], jn = ["xlink:href"], Qn = /* @__PURE__ */ C({
+}), jn = ["name", "value", "checked", "aria-describedby", "disabled"], Qn = ["xlink:href"], Zn = /* @__PURE__ */ C({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2454,7 +2461,7 @@ const Un = /* @__PURE__ */ C({
       e.booleanValue = s.target.value == "true";
     };
     return (s, e) => {
-      const i = q("survey-string");
+      const i = v("survey-string");
       return t(), u("div", {
         role: "presentation",
         class: l(s.question.getRadioItemClass(s.question.cssClasses, s.value))
@@ -2471,7 +2478,7 @@ const Un = /* @__PURE__ */ C({
             disabled: s.question.isInputReadOnly,
             class: l(s.question.cssClasses.itemRadioControl),
             onChange: n
-          }, null, 42, Kn),
+          }, null, 42, jn),
           s.question.cssClasses.materialRadioDecorator ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.materialRadioDecorator)
@@ -2482,25 +2489,25 @@ const Un = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": s.question.itemSvgIcon
-              }, null, 8, jn)
+              }, null, 8, Qn)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           p("span", {
             class: l(s.question.cssClasses.radioControlLabel)
           }, [
-            h(i, { locString: s.locText }, null, 8, ["locString"])
+            b(i, { locString: s.locText }, null, 8, ["locString"])
           ], 2)
         ], 2)
       ], 2);
     };
   }
-}), Zn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gn = ["xlink:href"], Xn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Jn = ["id"];
-X.Instance.registerRenderer(
+}), Gn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xn = ["xlink:href"], Jn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Yn = ["id"];
+G.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const Yn = /* @__PURE__ */ C({
+const xn = /* @__PURE__ */ C({
   __name: "BooleanCheckbox",
   props: {
     question: {},
@@ -2510,7 +2517,7 @@ const Yn = /* @__PURE__ */ C({
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
       var c;
-      const i = q("survey-element-title-content"), a = q("sv-title-actions"), d = q("survey-string");
+      const i = v("survey-element-title-content"), a = v("sv-title-actions"), d = v("survey-string");
       return t(), u("div", {
         class: l(s.question.cssClasses.rootCheckbox),
         ref_key: "root",
@@ -2522,11 +2529,11 @@ const Yn = /* @__PURE__ */ C({
           p("label", {
             class: l(s.question.cssClasses.checkboxLabel)
           }, [
-            D(p("input", {
+            L(p("input", {
               type: "checkbox",
               name: s.question.name,
               value: (c = s.question.booleanValue) != null ? c : "",
-              "onUpdate:modelValue": e[0] || (e[0] = (v) => s.question.booleanValue = v),
+              "onUpdate:modelValue": e[0] || (e[0] = (y) => s.question.booleanValue = y),
               class: l(s.question.cssClasses.controlCheckbox),
               id: s.question.inputId,
               ".indeterminate": s.question.isIndeterminate,
@@ -2535,7 +2542,7 @@ const Yn = /* @__PURE__ */ C({
               "aria-label": s.question.ariaLabel,
               "aria-invalid": s.question.ariaInvalid,
               "aria-describedby": s.question.ariaDescribedBy
-            }, null, 10, Zn), [
+            }, null, 10, Gn), [
               [z, s.question.booleanValue]
             ]),
             p("span", {
@@ -2547,32 +2554,32 @@ const Yn = /* @__PURE__ */ C({
               }, [
                 p("use", {
                   "xlink:href": s.question.svgIcon
-                }, null, 8, Gn)
+                }, null, 8, Xn)
               ], 2)) : m("", !0),
-              Xn
+              Jn
             ], 2),
             s.question.isLabelRendered ? (t(), u("span", {
               key: 0,
               id: s.question.labelRenderedAriaID,
               class: l(s.question.cssClasses.checkboxControlLabel)
             }, [
-              s.question.hasTitleActions ? m("", !0) : (t(), y(i, {
+              s.question.hasTitleActions ? m("", !0) : (t(), q(i, {
                 key: 0,
                 element: s.question,
                 css: s.css
               }, null, 8, ["element", "css"])),
-              s.question.hasTitleActions ? (t(), y(a, {
+              s.question.hasTitleActions ? (t(), q(a, {
                 key: 1,
                 element: s.question,
                 css: s.css
               }, null, 8, ["element", "css"])) : m("", !0)
-            ], 10, Jn)) : m("", !0)
+            ], 10, Yn)) : m("", !0)
           ], 2),
           s.question.canRenderLabelDescription ? (t(), u("div", {
             key: 0,
             class: l(s.question.cssDescription)
           }, [
-            h(d, {
+            b(d, {
               locString: s.question.locDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0)
@@ -2580,7 +2587,7 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), _n = /* @__PURE__ */ C({
+}), eo = /* @__PURE__ */ C({
   __name: "Multipletext",
   props: {
     question: {}
@@ -2588,25 +2595,25 @@ const Yn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-multipletext-item");
+      const i = v("survey-multipletext-item");
       return t(), u("table", {
-        class: l(s.question.cssClasses.root),
+        class: l(s.question.getQuestionRootCss()),
         ref_key: "root",
         ref: n
       }, [
         p("tbody", null, [
-          (t(!0), u(w, null, R(s.question.getRows(), (a, d) => (t(), u(w, {
+          (t(!0), u(w, null, T(s.question.getRows(), (a, d) => (t(), u(w, {
             key: s.question.inputId + "rowkey" + d
           }, [
             a.isVisible ? (t(), u("tr", {
               key: 0,
               class: l(s.question.cssClasses.row)
             }, [
-              (t(!0), u(w, null, R(a.cells, (c) => (t(), u("td", {
+              (t(!0), u(w, null, T(a.cells, (c) => (t(), u("td", {
                 key: "item" + c.item.editor.id,
                 class: l(c.className)
               }, [
-                h(i, {
+                b(i, {
                   question: s.question,
                   cell: c
                 }, null, 8, ["question", "cell"])
@@ -2617,7 +2624,7 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), xn = { key: 1 }, eo = /* @__PURE__ */ C({
+}), so = { key: 1 }, no = /* @__PURE__ */ C({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2626,10 +2633,10 @@ const Yn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = (e) => ee(e);
     B(() => o.cell.item.editor);
-    const s = T(() => o.cell.item);
+    const s = R(() => o.cell.item);
     return (e, i) => {
-      const a = q("survey-string"), d = q("survey-errors");
-      return e.cell.isErrorsCell ? (t(), y(d, {
+      const a = v("survey-string"), d = v("survey-errors");
+      return e.cell.isErrorsCell ? (t(), q(d, {
         key: 1,
         element: s.value.editor
       }, null, 8, ["element"])) : (t(), u("label", {
@@ -2643,10 +2650,10 @@ const Yn = /* @__PURE__ */ C({
             key: 0,
             class: l(e.question.cssClasses.requiredText)
           }, I(s.value.editor.requiredText), 3)) : m("", !0),
-          h(a, {
+          b(a, {
             locString: s.value.locTitle
           }, null, 8, ["locString"]),
-          s.value.editor.isRequireTextAfterTitle ? (t(), u("span", xn, "\xA0")) : m("", !0),
+          s.value.editor.isRequireTextAfterTitle ? (t(), u("span", so, "\xA0")) : m("", !0),
           s.value.editor.isRequireTextAfterTitle ? (t(), u("span", {
             key: 2,
             "aria-hidden": "true",
@@ -2658,14 +2665,14 @@ const Yn = /* @__PURE__ */ C({
           class: l(e.question.getItemCss()),
           onFocusin: i[0] || (i[0] = (c) => s.value.focusIn())
         }, [
-          (t(), y(N(n(s.value.editor)), {
+          (t(), q(N(n(s.value.editor)), {
             question: s.value.editor
           }, null, 8, ["question"]))
         ], 34))
       ], 2));
     };
   }
-}), so = ["aria-label"], no = { key: 0 }, oo = { key: 0 }, to = ["onClick"], io = ["data-responsive-title", "onClick"], lo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], ro = ["xlink:href"], ao = /* @__PURE__ */ C({
+}), oo = ["aria-label"], to = { key: 0 }, io = { key: 0 }, lo = ["onClick"], ro = ["data-responsive-title", "onClick"], ao = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], uo = ["xlink:href"], mo = /* @__PURE__ */ C({
   __name: "Matrix",
   props: {
     question: {}
@@ -2689,7 +2696,7 @@ const Yn = /* @__PURE__ */ C({
       o.question.isInputReadOnly || (i.value = a.value);
     };
     return (i, a) => {
-      const d = q("survey-string");
+      const d = v("survey-string");
       return t(), u("div", {
         class: l(i.question.cssClasses.tableWrapper),
         ref_key: "root",
@@ -2698,78 +2705,78 @@ const Yn = /* @__PURE__ */ C({
         p("fieldset", null, [
           p("legend", {
             "aria-label": i.question.locTitle.renderedHtml
-          }, null, 8, so),
+          }, null, 8, oo),
           p("table", {
             class: l(i.question.getTableCss())
           }, [
-            i.question.showHeader ? (t(), u("thead", no, [
+            i.question.showHeader ? (t(), u("thead", to, [
               p("tr", null, [
-                i.question.hasRows ? (t(), u("td", oo)) : m("", !0),
-                (t(!0), u(w, null, R(i.question.visibleColumns, (c, v) => (t(), u("th", {
-                  key: v,
+                i.question.hasRows ? (t(), u("td", io)) : m("", !0),
+                (t(!0), u(w, null, T(i.question.visibleColumns, (c, y) => (t(), u("th", {
+                  key: y,
                   class: l(i.question.cssClasses.headerCell),
                   style: $({
                     minWidth: i.question.columnMinWidth,
                     width: i.question.columnMinWidth
                   })
                 }, [
-                  h(d, {
+                  b(d, {
                     locString: c.locText
                   }, null, 8, ["locString"])
                 ], 6))), 128))
               ])
             ])) : m("", !0),
             p("tbody", null, [
-              (t(!0), u(w, null, R(s.value, (c, v) => (t(), u("tr", {
-                key: "row_" + c.name + "_" + v,
+              (t(!0), u(w, null, T(s.value, (c, y) => (t(), u("tr", {
+                key: "row_" + c.name + "_" + y,
                 class: l(c.rowClasses || void 0)
               }, [
-                D(p("td", {
+                L(p("td", {
                   class: l(i.question.cssClasses.rowTextCell),
                   style: $({
                     minWidth: i.question.rowTitleWidth,
                     width: i.question.rowTitleWidth
                   })
                 }, [
-                  h(d, {
+                  b(d, {
                     locString: c.locText
                   }, null, 8, ["locString"])
                 ], 6), [
                   [H, i.question.hasRows]
                 ]),
-                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, R(i.question.visibleColumns, (f, g) => (t(), u("td", {
+                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, T(i.question.visibleColumns, (h, g) => (t(), u("td", {
                   key: g,
-                  class: l(i.question.getItemClass(c, f)),
-                  onClick: (k) => e(c, f)
+                  class: l(i.question.getItemClass(c, h)),
+                  onClick: (k) => e(c, h)
                 }, [
-                  h(d, {
-                    locString: i.question.getCellDisplayLocText(c.name, f)
+                  b(d, {
+                    locString: i.question.getCellDisplayLocText(c.name, h)
                   }, null, 8, ["locString"])
-                ], 10, to))), 128)) : m("", !0),
-                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, R(i.question.visibleColumns, (f, g) => (t(), u("td", {
+                ], 10, lo))), 128)) : m("", !0),
+                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, T(i.question.visibleColumns, (h, g) => (t(), u("td", {
                   key: g,
-                  "data-responsive-title": f.locText.renderedHtml,
+                  "data-responsive-title": h.locText.renderedHtml,
                   class: l(i.question.cssClasses.cell),
-                  onClick: (k) => e(c, f)
+                  onClick: (k) => e(c, h)
                 }, [
                   p("label", {
                     onMousedown: a[0] || (a[0] = (k) => i.question.onMouseDown()),
-                    class: l(i.question.getItemClass(c, f))
+                    class: l(i.question.getItemClass(c, h))
                   }, [
-                    D(p("input", {
+                    L(p("input", {
                       type: "radio",
                       class: l(i.question.cssClasses.itemValue),
                       name: c.fullName,
                       "onUpdate:modelValue": (k) => c.value = k,
-                      value: f.value,
+                      value: h.value,
                       disabled: i.question.isInputReadOnly,
                       id: i.question.inputId + "_" + c.name + "_" + g,
                       "aria-required": i.question.ariaRequired,
-                      "aria-label": f.locText.renderedHtml,
+                      "aria-label": h.locText.renderedHtml,
                       "aria-invalid": i.question.ariaInvalid,
                       "aria-describedby": i.question.ariaDescribedBy
-                    }, null, 10, lo), [
-                      [Y, c.value]
+                    }, null, 10, ao), [
+                      [J, c.value]
                     ]),
                     p("span", {
                       class: l(i.question.cssClasses.materialDecorator)
@@ -2780,20 +2787,20 @@ const Yn = /* @__PURE__ */ C({
                       }, [
                         p("use", {
                           "xlink:href": i.question.itemSvgIcon
-                        }, null, 8, ro)
+                        }, null, 8, uo)
                       ], 2)) : m("", !0)
                     ], 2),
-                    D(p("span", {
+                    L(p("span", {
                       class: l(i.question.cssClasses.cellResponsiveTitle)
                     }, [
-                      h(d, {
-                        locString: f.locText
+                      b(d, {
+                        locString: h.locText
                       }, null, 8, ["locString"])
                     ], 2), [
                       [H, i.question.isMobile]
                     ])
                   ], 34)
-                ], 10, io))), 128))
+                ], 10, ro))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2801,7 +2808,7 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), uo = /* @__PURE__ */ C({
+}), co = /* @__PURE__ */ C({
   __name: "MatrixDropdown",
   props: {
     question: {}
@@ -2809,21 +2816,21 @@ const Yn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = S(null);
     return M(o, n), (s, e) => {
-      const i = q("survey-matrixtable");
-      return t(), y(i, {
+      const i = v("survey-matrixtable");
+      return t(), q(i, {
         question: s.question,
         ref_key: "root",
         ref: n
       }, null, 8, ["question"]);
     };
   }
-}), mo = { key: 0 }, co = ["data-sv-drop-target-matrix-row"], po = { key: 1 }, vo = /* @__PURE__ */ C({
+}), po = { key: 0 }, vo = ["data-sv-drop-target-matrix-row"], qo = { key: 1 }, yo = /* @__PURE__ */ C({
   __name: "MatrixTable",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.question.renderedTable);
+    const o = r, n = R(() => o.question.renderedTable);
     return B(
       () => n.value,
       (s) => {
@@ -2838,7 +2845,7 @@ const Yn = /* @__PURE__ */ C({
         };
       }
     ), (s, e) => {
-      const i = q("survey-string"), a = q("survey-matrixheaderrequired"), d = q("survey-matrixcell");
+      const i = v("survey-string"), a = v("survey-matrixheaderrequired"), d = v("survey-matrixcell");
       return t(), u("div", {
         style: $({ overflowX: s.question.showHorizontalScroll ? "scroll" : "" }),
         class: l(s.question.cssClasses.tableWrapper)
@@ -2846,18 +2853,18 @@ const Yn = /* @__PURE__ */ C({
         p("table", {
           class: l(s.question.getTableCss())
         }, [
-          n.value.showHeader ? (t(), u("thead", mo, [
+          n.value.showHeader ? (t(), u("thead", po, [
             p("tr", null, [
-              (t(!0), u(w, null, R(n.value.headerRow.cells, (c) => (t(), u(w, null, [
+              (t(!0), u(w, null, T(n.value.headerRow.cells, (c) => (t(), u(w, null, [
                 c.hasTitle ? (t(), u("th", {
                   class: l(c.className),
                   key: "header_" + c.id,
                   style: $({ minWidth: c.minWidth, width: c.width })
                 }, [
-                  h(i, {
+                  b(i, {
                     locString: c.locTitle
                   }, null, 8, ["locString"]),
-                  c.column ? (t(), y(a, {
+                  c.column ? (t(), q(a, {
                     key: 0,
                     column: c.column,
                     question: s.question
@@ -2872,7 +2879,7 @@ const Yn = /* @__PURE__ */ C({
             ])
           ])) : m("", !0),
           p("tbody", null, [
-            (t(!0), u(w, null, R(n.value.rows, (c) => (t(), u(w, {
+            (t(!0), u(w, null, T(n.value.rows, (c) => (t(), u(w, {
               key: s.question.inputId + "_" + c.id
             }, [
               c.visible ? (t(), u("tr", {
@@ -2880,20 +2887,20 @@ const Yn = /* @__PURE__ */ C({
                 "data-sv-drop-target-matrix-row": c.row && c.row.id,
                 class: l(c.className)
               }, [
-                (t(!0), u(w, null, R(c.cells, (v, f) => (t(), y(d, {
-                  cell: v,
+                (t(!0), u(w, null, T(c.cells, (y, h) => (t(), q(d, {
+                  cell: y,
                   question: s.question,
-                  key: c.id + "_" + f
+                  key: c.id + "_" + h
                 }, null, 8, ["cell", "question"]))), 128))
-              ], 10, co)) : m("", !0)
+              ], 10, vo)) : m("", !0)
             ], 64))), 128))
           ]),
-          n.value.showFooter ? (t(), u("tfoot", po, [
+          n.value.showFooter ? (t(), u("tfoot", qo, [
             p("tr", null, [
-              (t(!0), u(w, null, R(n.value.footerRow.cells, (c, v) => (t(), y(d, {
+              (t(!0), u(w, null, T(n.value.footerRow.cells, (c, y) => (t(), q(d, {
                 cell: c,
                 question: s.question,
-                key: "footer_" + v
+                key: "footer_" + y
               }, null, 8, ["cell", "question"]))), 128))
             ])
           ])) : m("", !0)
@@ -2901,7 +2908,7 @@ const Yn = /* @__PURE__ */ C({
       ], 6);
     };
   }
-}), qo = /* @__PURE__ */ p("span", null, "\xA0", -1), yo = /* @__PURE__ */ C({
+}), go = /* @__PURE__ */ p("span", null, "\xA0", -1), Co = /* @__PURE__ */ C({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2910,114 +2917,114 @@ const Yn = /* @__PURE__ */ C({
   setup(r) {
     const o = r;
     return B(() => o.column), (n, s) => n.column.isRenderedRequired ? (t(), u(w, { key: 0 }, [
-      qo,
+      go,
       n.column.isRenderedRequired ? (t(), u("span", {
         key: 0,
         class: l(n.question.cssClasses.cellRequiredText)
       }, I(n.column.requiredText), 3)) : m("", !0)
     ], 64)) : m("", !0);
   }
-}), go = ["data-responsive-title", "title", "colspan"], Co = /* @__PURE__ */ C({
+}), ho = ["data-responsive-title", "title", "colspan"], bo = /* @__PURE__ */ C({
   __name: "MatrixCell",
   props: {
     question: {},
     cell: {}
   },
   setup(r) {
-    const o = r, n = S(!1), s = S(), e = () => o.cell.headers, i = () => !!o.cell.width || !!o.cell.minWidth ? { width: o.cell.width, minWidth: o.cell.minWidth } : null, a = () => o.cell.index || "", d = () => n.value = o.cell.question.isVisible, c = (v) => ee(v);
+    const o = r, n = S(!1), s = S(), e = () => o.cell.headers, i = () => !!o.cell.width || !!o.cell.minWidth ? { width: o.cell.width, minWidth: o.cell.minWidth } : null, a = () => o.cell.index || "", d = () => n.value = o.cell.question.isVisible, c = (y) => ee(y);
     return A(() => {
       if (!(!o.cell.hasQuestion || !o.question || !o.question.survey)) {
         d(), o.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
           d();
         });
-        var v = {
+        var y = {
           cell: o.cell.cell,
           cellQuestion: o.cell.question,
           htmlElement: s.value,
           row: o.cell.row,
           column: o.cell.cell.column
         };
-        o.question.survey.matrixAfterCellRender(o.question, v);
+        o.question.survey.matrixAfterCellRender(o.question, y);
       }
-    }), (v, f) => {
-      const g = q("survey-errors"), k = q("sv-matrix-drag-drop-icon"), P = q("sv-action-bar"), L = q("survey-radiogroup-item"), E = q("survey-checkbox-item"), j = q("survey-other-choice"), J = q("survey-string");
+    }), (y, h) => {
+      const g = v("survey-errors"), k = v("sv-matrix-drag-drop-icon"), P = v("sv-action-bar"), D = v("survey-radiogroup-item"), E = v("survey-checkbox-item"), _ = v("survey-other-choice"), X = v("survey-string");
       return t(), u("td", {
-        class: l(v.cell.className),
+        class: l(y.cell.className),
         "data-responsive-title": e(),
-        title: v.cell.getTitle(),
+        title: y.cell.getTitle(),
         style: $(i()),
-        colspan: v.cell.colSpans,
-        onFocusin: f[0] || (f[0] = (ne) => v.cell.focusIn()),
+        colspan: y.cell.colSpans,
+        onFocusin: h[0] || (h[0] = (ne) => y.cell.focusIn()),
         ref_key: "root",
         ref: s
       }, [
-        v.cell.isErrorsCell ? (t(), y(g, {
+        y.cell.isErrorsCell ? (t(), q(g, {
           key: 0,
-          element: v.cell.question
+          element: y.cell.question
         }, null, 8, ["element"])) : m("", !0),
-        v.cell.isDragHandlerCell ? (t(), y(k, {
+        y.cell.isDragHandlerCell ? (t(), q(k, {
           key: 1,
-          item: { data: { row: v.cell.row, question: v.question } }
+          item: { data: { row: y.cell.row, question: y.question } }
         }, null, 8, ["item"])) : m("", !0),
-        v.cell.isActionsCell ? (t(), y(P, {
+        y.cell.isActionsCell ? (t(), q(P, {
           key: 2,
-          model: v.cell.item.getData(),
+          model: y.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : m("", !0),
-        v.cell.hasPanel ? (t(), y(N(c(v.cell.panel)), {
+        y.cell.hasPanel ? (t(), q(N(c(y.cell.panel)), {
           key: 3,
-          question: v.cell.panel,
-          css: v.question.cssClasses
+          question: y.cell.panel,
+          css: y.question.cssClasses
         }, null, 8, ["question", "css"])) : m("", !0),
-        v.cell.hasQuestion ? (t(), u("div", {
+        y.cell.hasQuestion ? (t(), u("div", {
           key: 4,
-          class: l(v.question.cssClasses.cellQuestionWrapper)
+          class: l(y.question.cssClasses.cellQuestionWrapper)
         }, [
-          !v.cell.isChoice && v.cell.question.isDefaultRendering() ? D((t(), y(N(c(v.cell.question)), {
+          !y.cell.isChoice && y.cell.question.isDefaultRendering() ? L((t(), q(N(c(y.cell.question)), {
             key: 0,
-            question: v.cell.question
+            question: y.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
           ]) : m("", !0),
-          !v.cell.isChoice && !v.cell.question.isDefaultRendering() ? D((t(), y(N(v.cell.question.getComponentName()), {
+          !y.cell.isChoice && !y.cell.question.isDefaultRendering() ? L((t(), q(N(y.cell.question.getComponentName()), {
             key: 1,
-            question: v.cell.question
+            question: y.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
           ]) : m("", !0),
-          v.cell.isRadio ? (t(), y(L, {
-            key: v.cell.item.value,
-            class: l(v.cell.question.getItemClass(v.cell.item)),
-            question: v.cell.question,
-            item: v.cell.item,
+          y.cell.isRadio ? (t(), q(D, {
+            key: y.cell.item.value,
+            class: l(y.cell.question.getItemClass(y.cell.item)),
+            question: y.cell.question,
+            item: y.cell.item,
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          v.cell.isCheckbox ? (t(), y(E, {
-            key: v.cell.item.value,
-            class: l(v.cell.question.getItemClass(v.cell.item)),
-            question: v.cell.question,
-            item: v.cell.item,
+          y.cell.isCheckbox ? (t(), q(E, {
+            key: y.cell.item.value,
+            class: l(y.cell.question.getItemClass(y.cell.item)),
+            question: y.cell.question,
+            item: y.cell.item,
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          v.cell.isOtherChoice ? (t(), y(j, {
+          y.cell.isOtherChoice ? (t(), q(_, {
             key: 4,
-            question: v.cell.question
+            question: y.cell.question
           }, null, 8, ["question"])) : m("", !0)
         ], 2)) : m("", !0),
-        v.cell.hasTitle ? (t(), y(J, {
+        y.cell.hasTitle ? (t(), q(X, {
           key: 5,
-          locString: v.cell.locTitle
+          locString: y.cell.locTitle
         }, null, 8, ["locString"])) : m("", !0),
-        v.cell.requiredText ? (t(), u("span", {
+        y.cell.requiredText ? (t(), u("span", {
           key: 6,
-          class: l(v.question.cssClasses.cellRequiredText)
-        }, I(v.cell.requiredText), 3)) : m("", !0)
-      ], 46, go);
+          class: l(y.question.cssClasses.cellRequiredText)
+        }, I(y.cell.requiredText), 3)) : m("", !0)
+      ], 46, ho);
     };
   }
-}), ho = /* @__PURE__ */ C({
+}), ko = /* @__PURE__ */ C({
   __name: "MatrixDynamic",
   props: {
     question: {}
@@ -3029,7 +3036,7 @@ const Yn = /* @__PURE__ */ C({
       o.question.addRowUI();
     };
     return (e, i) => {
-      const a = q("survey-string"), d = q("survey-matrixtable");
+      const a = v("survey-string"), d = v("survey-matrixtable");
       return t(), u("div", {
         ref_key: "root",
         ref: n
@@ -3043,7 +3050,7 @@ const Yn = /* @__PURE__ */ C({
             class: l(e.question.getAddRowButtonCss()),
             onClick: s
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locAddRowText
             }, null, 8, ["locString"]),
             p("span", {
@@ -3051,7 +3058,7 @@ const Yn = /* @__PURE__ */ C({
             }, null, 2)
           ], 2)
         ], 2)) : m("", !0),
-        e.question.renderedTable.showTable ? (t(), y(d, {
+        e.question.renderedTable.showTable ? (t(), q(d, {
           key: 1,
           question: e.question
         }, null, 8, ["question"])) : m("", !0),
@@ -3062,7 +3069,7 @@ const Yn = /* @__PURE__ */ C({
           p("div", {
             class: l(e.question.cssClasses.emptyRowsText)
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locEmptyRowsText
             }, null, 8, ["locString"])
           ], 2),
@@ -3071,7 +3078,7 @@ const Yn = /* @__PURE__ */ C({
             class: l(e.question.getAddRowButtonCss(!0)),
             onClick: s
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locAddRowText
             }, null, 8, ["locString"]),
             p("span", {
@@ -3088,7 +3095,7 @@ const Yn = /* @__PURE__ */ C({
             class: l(e.question.getAddRowButtonCss()),
             onClick: s
           }, [
-            h(a, {
+            b(a, {
               locString: e.question.locAddRowText
             }, null, 8, ["locString"]),
             p("span", {
@@ -3102,11 +3109,11 @@ const Yn = /* @__PURE__ */ C({
 });
 function se(r, o = !0) {
   return {
-    question: T(() => r.item.data.question),
-    row: o ? T(() => r.item.data.row) : void 0
+    question: R(() => r.item.data.question),
+    row: o ? R(() => r.item.data.row) : void 0
   };
 }
-const bo = ["disabled"], ko = /* @__PURE__ */ C({
+const fo = ["disabled"], Io = /* @__PURE__ */ C({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3114,42 +3121,42 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
   setup(r) {
     const o = r, { question: n, row: s } = se(o);
     return (e, i) => {
-      const a = q("survey-string");
+      const a = v("survey-string");
       return t(), u("button", {
         type: "button",
-        class: l(b(n).getRemoveRowButtonCss()),
-        disabled: b(n).isInputReadOnly,
-        onClick: i[0] || (i[0] = () => b(n).removeRowUI(b(s)))
+        class: l(f(n).getRemoveRowButtonCss()),
+        disabled: f(n).isInputReadOnly,
+        onClick: i[0] || (i[0] = () => f(n).removeRowUI(f(s)))
       }, [
-        h(a, {
-          locString: b(n).locRemoveRowText
+        b(a, {
+          locString: f(n).locRemoveRowText
         }, null, 8, ["locString"]),
         p("span", {
-          class: l(b(n).cssClasses.iconRemove)
+          class: l(f(n).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, bo);
+      ], 10, fo);
     };
   }
-}), fo = ["xlink:href"], Io = /* @__PURE__ */ C({
+}), wo = ["xlink:href"], So = /* @__PURE__ */ C({
   __name: "DragDropIcon",
   props: {
     item: {}
   },
   setup(r) {
     const o = r, { question: n } = se(o, !1);
-    return (s, e) => b(n).iconDragElement ? (t(), u("svg", {
+    return (s, e) => f(n).iconDragElement ? (t(), u("svg", {
       key: 0,
-      class: l(b(n).cssClasses.dragElementDecorator)
+      class: l(f(n).cssClasses.dragElementDecorator)
     }, [
       p("use", {
-        "xlink:href": b(n).iconDragElement
-      }, null, 8, fo)
+        "xlink:href": f(n).iconDragElement
+      }, null, 8, wo)
     ], 2)) : (t(), u("span", {
       key: 1,
-      class: l(b(n).cssClasses.iconDrag)
+      class: l(f(n).cssClasses.iconDrag)
     }, null, 2));
   }
-}), wo = ["aria-expanded", "aria-controls"], So = /* @__PURE__ */ C({
+}), Ro = ["aria-expanded", "aria-controls"], To = /* @__PURE__ */ C({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3157,23 +3164,23 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
   setup(r) {
     const o = r, { question: n, row: s } = se(o);
     return (e, i) => {
-      const a = q("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return t(), u("button", {
         type: "button",
-        class: l(b(n).getDetailPanelButtonCss(b(s))),
-        onClick: i[0] || (i[0] = () => b(s).showHideDetailPanelClick()),
-        "aria-expanded": b(n).getIsDetailPanelShowing(b(s)) ? "true" : "false",
-        "aria-controls": b(n).getIsDetailPanelShowing(b(s)) ? b(s).detailPanelId : null
+        class: l(f(n).getDetailPanelButtonCss(f(s))),
+        onClick: i[0] || (i[0] = () => f(s).showHideDetailPanelClick()),
+        "aria-expanded": f(n).getIsDetailPanelShowing(f(s)) ? "true" : "false",
+        "aria-controls": f(n).getIsDetailPanelShowing(f(s)) ? f(s).detailPanelId : null
       }, [
-        h(a, {
-          class: l(b(n).getDetailPanelIconCss(b(s))),
-          iconName: b(n).getDetailPanelIconId(b(s)),
+        b(a, {
+          class: l(f(n).getDetailPanelIconCss(f(s))),
+          iconName: f(n).getDetailPanelIconId(f(s)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, wo);
+      ], 10, Ro);
     };
   }
-}), To = /* @__PURE__ */ C({
+}), $o = /* @__PURE__ */ C({
   __name: "PanelDynamic",
   props: {
     question: {},
@@ -3203,14 +3210,14 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
         };
       }
     );
-    const e = T(() => {
+    const e = R(() => {
       if (o.question.isRenderModeList)
         return o.question.panels;
       const a = [];
       return o.question.currentPanel && a.push(o.question.currentPanel), a;
     }), i = () => o.question.showLegacyNavigation;
     return (a, d) => {
-      const c = q("survey-string"), v = q("sv-paneldynamic-add-btn"), f = q("survey-paneldynamicprogress"), g = q("survey-panel"), k = q("sv-paneldynamic-remove-btn"), P = q("survey-paneldynamicprogress-v2");
+      const c = v("survey-string"), y = v("sv-paneldynamic-add-btn"), h = v("survey-paneldynamicprogress"), g = v("survey-panel"), k = v("sv-paneldynamic-remove-btn"), P = v("survey-paneldynamicprogress-v2");
       return t(), u("div", {
         class: l(a.question.cssClasses.root),
         ref_key: "root",
@@ -3221,11 +3228,11 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
           class: l(a.question.cssClasses.noEntriesPlaceholder)
         }, [
           p("span", null, [
-            h(c, {
+            b(c, {
               locString: a.question.locNoEntriesText
             }, null, 8, ["locString"])
           ]),
-          h(v, {
+          b(y, {
             data: { question: a.question }
           }, null, 8, ["data"])
         ], 2)) : m("", !0),
@@ -3239,46 +3246,46 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
             role: "progressbar"
           }, null, 6)
         ], 2)) : m("", !0),
-        i() && a.question.isProgressTopShowing ? (t(), y(f, {
+        i() && a.question.isProgressTopShowing ? (t(), q(h, {
           key: 2,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        (t(!0), u(w, null, R(e.value, (L, E) => (t(), u(w, {
-          key: L.id
+        (t(!0), u(w, null, T(e.value, (D, E) => (t(), u(w, {
+          key: D.id
         }, [
           p("div", {
             class: l(a.question.getPanelWrapperCss())
           }, [
-            h(g, {
-              question: L,
+            b(g, {
+              question: D,
               css: a.css
             }, null, 8, ["question", "css"]),
-            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && L.state !== "collapsed" ? (t(), y(k, {
+            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && D.state !== "collapsed" ? (t(), q(k, {
               key: 0,
-              data: { question: a.question, panel: L }
+              data: { question: a.question, panel: D }
             }, null, 8, ["data"])) : m("", !0)
           ], 2),
           a.question.isRenderModeList && E < a.question.visiblePanelCount - 1 ? (t(), u("hr", {
             class: l(a.question.cssClasses.separator),
-            key: "separator" + L.id
+            key: "separator" + D.id
           }, null, 2)) : m("", !0)
         ], 64))), 128)),
-        i() && a.question.isProgressBottomShowing ? (t(), y(f, {
+        i() && a.question.isProgressBottomShowing ? (t(), q(h, {
           key: 3,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        i() && a.question.isRenderModeList ? (t(), y(v, {
+        i() && a.question.isRenderModeList ? (t(), q(y, {
           key: 4,
           data: { question: a.question }
         }, null, 8, ["data"])) : m("", !0),
-        a.question.showNavigation ? (t(), y(P, {
+        a.question.showNavigation ? (t(), q(P, {
           key: 5,
           question: a.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), Ro = /* @__PURE__ */ C({
+}), Bo = /* @__PURE__ */ C({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3286,7 +3293,7 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = () => o.question.isProgressTopShowing ? o.question.cssClasses.progressTop : o.question.cssClasses.progressBottom;
     return (s, e) => {
-      const i = q("sv-paneldynamic-prev-btn"), a = q("sv-paneldynamic-next-btn"), d = q("sv-paneldynamic-add-btn"), c = q("sv-paneldynamic-progress-text");
+      const i = v("sv-paneldynamic-prev-btn"), a = v("sv-paneldynamic-next-btn"), d = v("sv-paneldynamic-add-btn"), c = v("sv-paneldynamic-progress-text");
       return t(), u("div", {
         class: l(n())
       }, [
@@ -3297,7 +3304,7 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
           p("div", {
             class: l(s.question.cssClasses.progressContainer)
           }, [
-            h(i, {
+            b(i, {
               data: { question: s.question }
             }, null, 8, ["data"]),
             s.question.isRangeShowing ? (t(), u("div", {
@@ -3310,28 +3317,28 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
                 role: "progressbar"
               }, null, 6)
             ], 2)) : m("", !0),
-            h(a, {
+            b(a, {
               data: { question: s.question }
             }, null, 8, ["data"])
           ], 2),
-          h(d, {
+          b(d, {
             data: { question: s.question }
           }, null, 8, ["data"]),
-          h(c, {
+          b(c, {
             data: { question: s.question }
           }, null, 8, ["data"])
         ], 2)
       ], 2);
     };
   }
-}), $o = /* @__PURE__ */ C({
+}), Lo = /* @__PURE__ */ C({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
   },
   setup(r) {
     return (o, n) => {
-      const s = q("sv-action-bar");
+      const s = v("sv-action-bar");
       return o.question.cssClasses.footer ? (t(), u("div", {
         key: 0,
         class: l(o.question.cssClasses.footer)
@@ -3353,7 +3360,7 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
           key: 1,
           class: l(o.question.cssClasses.footerButtonsContainer)
         }, [
-          h(s, {
+          b(s, {
             model: o.question.footerToolbar
           }, null, 8, ["model"])
         ], 2)) : m("", !0)
@@ -3362,11 +3369,11 @@ const bo = ["disabled"], ko = /* @__PURE__ */ C({
   }
 });
 function K(r) {
-  return T(
+  return R(
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const Bo = /* @__PURE__ */ C({
+const Do = /* @__PURE__ */ C({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3376,18 +3383,18 @@ const Bo = /* @__PURE__ */ C({
     const n = K(r), s = () => {
       n.value.addPanelUI();
     };
-    return (e, i) => b(n).canAddPanel ? (t(), u("button", {
+    return (e, i) => f(n).canAddPanel ? (t(), u("button", {
       key: 0,
       type: "button",
-      class: l(b(n).getAddButtonCss()),
+      class: l(f(n).getAddButtonCss()),
       onClick: s
     }, [
       p("span", {
-        class: l(b(n).cssClasses.buttonAddText)
-      }, I(b(n).panelAddText), 3)
+        class: l(f(n).cssClasses.buttonAddText)
+      }, I(f(n).panelAddText), 3)
     ], 2)) : m("", !0);
   }
-}), Lo = ["title"], Do = /* @__PURE__ */ C({
+}), Po = ["title"], Mo = /* @__PURE__ */ C({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3398,20 +3405,20 @@ const Bo = /* @__PURE__ */ C({
       n.value.goToNextPanel();
     };
     return (e, i) => {
-      const a = q("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return t(), u("div", {
-        title: b(n).panelNextText,
+        title: f(n).panelNextText,
         onClick: s,
-        class: l(b(n).getNextButtonCss())
+        class: l(f(n).getNextButtonCss())
       }, [
-        h(a, {
-          iconName: b(n).cssClasses.progressBtnIcon,
+        b(a, {
+          iconName: f(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Lo);
+      ], 10, Po);
     };
   }
-}), Po = ["title"], Mo = /* @__PURE__ */ C({
+}), No = ["title"], Ho = /* @__PURE__ */ C({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3422,45 +3429,45 @@ const Bo = /* @__PURE__ */ C({
       n.value.goToPrevPanel();
     };
     return (e, i) => {
-      const a = q("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return t(), u("div", {
-        title: b(n).panelPrevText,
+        title: f(n).panelPrevText,
         onClick: s,
-        class: l(b(n).getPrevButtonCss())
+        class: l(f(n).getPrevButtonCss())
       }, [
-        h(a, {
-          iconName: b(n).cssClasses.progressBtnIcon,
+        b(a, {
+          iconName: f(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Po);
+      ], 10, No);
     };
   }
-}), No = /* @__PURE__ */ C({
+}), Ao = /* @__PURE__ */ C({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const o = r, n = K(o), s = T(
+    const o = r, n = K(o), s = R(
       () => o.item && o.item.data.panel || o.data.panel
     ), e = (i) => {
       n.value.isInputReadOnly || n.value.removePanelUI(i);
     };
     return (i, a) => (t(), u("button", {
       type: "button",
-      class: l(b(n).getPanelRemoveButtonCss()),
+      class: l(f(n).getPanelRemoveButtonCss()),
       onClick: a[0] || (a[0] = (d) => e(s.value))
     }, [
       p("span", {
-        class: l(b(n).cssClasses.buttonRemoveText)
-      }, I(b(n).panelRemoveText), 3),
+        class: l(f(n).cssClasses.buttonRemoveText)
+      }, I(f(n).panelRemoveText), 3),
       p("span", {
-        class: l(b(n).cssClasses.iconRemove)
+        class: l(f(n).cssClasses.iconRemove)
       }, null, 2)
     ], 2));
   }
-}), Ho = /* @__PURE__ */ C({
+}), Eo = /* @__PURE__ */ C({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3469,10 +3476,10 @@ const Bo = /* @__PURE__ */ C({
   setup(r) {
     const n = K(r);
     return (s, e) => (t(), u("div", {
-      class: l(b(n).cssClasses.progressText)
-    }, I(b(n).progressText), 3));
+      class: l(f(n).cssClasses.progressText)
+    }, I(f(n).progressText), 3));
   }
-}), Ao = ["id"], Eo = /* @__PURE__ */ C({
+}), Vo = ["id"], Oo = /* @__PURE__ */ C({
   __name: "Errors",
   props: {
     element: {},
@@ -3481,7 +3488,7 @@ const Bo = /* @__PURE__ */ C({
   setup(r) {
     const o = S();
     return (n, s) => {
-      const e = q("survey-string");
+      const e = v("survey-string");
       return n.element.hasVisibleErrors ? (t(), u("div", {
         key: 0,
         role: "alert",
@@ -3491,7 +3498,7 @@ const Bo = /* @__PURE__ */ C({
         ref_key: "root",
         ref: o
       }, [
-        (t(!0), u(w, null, R(n.element.errors, (i, a) => (t(), u("div", {
+        (t(!0), u(w, null, T(n.element.errors, (i, a) => (t(), u("div", {
           key: "error_" + a
         }, [
           p("span", {
@@ -3505,22 +3512,22 @@ const Bo = /* @__PURE__ */ C({
               n.element.cssClasses ? n.element.cssClasses.error.item || void 0 : "panel-error-item"
             )
           }, [
-            h(e, {
+            b(e, {
               locString: i.locText
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, Ao)) : m("", !0);
+      ], 10, Vo)) : m("", !0);
     };
   }
-}), Vo = { key: 0 }, Oo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Fo = /* @__PURE__ */ C({
+}), Fo = { key: 0 }, Wo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], zo = /* @__PURE__ */ C({
   __name: "QuestionComment",
   props: {
     question: {},
     commentClass: {}
   },
   setup(r) {
-    return (o, n) => o.question.isReadOnlyRenderDiv() ? (t(), u("div", Vo, I(o.question.comment), 1)) : (t(), u("textarea", {
+    return (o, n) => o.question.isReadOnlyRenderDiv() ? (t(), u("div", Fo, I(o.question.comment), 1)) : (t(), u("textarea", {
       key: 1,
       id: o.question.commentId,
       readonly: o.question.isInputReadOnly,
@@ -3529,8 +3536,8 @@ const Bo = /* @__PURE__ */ C({
       value: o.question.comment,
       maxlength: o.question.getOthersMaxLength(),
       placeholder: o.question.renderedCommentPlaceholder,
-      "aria-label": o.question.ariaLabel,
-      "aria-required": o.question.ariaRequired,
+      "aria-label": o.question.ariaLabel || o.question.a11y_input_ariaLabel,
+      "aria-required": o.question.ariaRequired || o.question.a11y_input_ariaRequired,
       style: $({ resize: o.question.resizeStyle }),
       onChange: n[0] || (n[0] = (s) => {
         o.question.onCommentChange(s);
@@ -3538,9 +3545,9 @@ const Bo = /* @__PURE__ */ C({
       onInput: n[1] || (n[1] = (s) => {
         o.question.onCommentInput(s);
       })
-    }, null, 46, Oo));
+    }, null, 46, Wo));
   }
-}), Wo = /* @__PURE__ */ C({
+}), Uo = /* @__PURE__ */ C({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3551,8 +3558,8 @@ const Bo = /* @__PURE__ */ C({
       de(n);
     };
     return (n, s) => {
-      const e = q("survey-element-title-content"), i = q("sv-title-actions");
-      return n.element.hasTitle ? (t(), y(N(n.element.titleTagName), {
+      const e = v("survey-element-title-content"), i = v("sv-title-actions");
+      return n.element.hasTitle ? (t(), q(N(n.element.titleTagName), {
         key: 0,
         class: l(n.element.cssTitle),
         "aria-label": n.element.titleAriaLabel,
@@ -3564,13 +3571,13 @@ const Bo = /* @__PURE__ */ C({
           o(a);
         })
       }, {
-        default: qe(() => [
-          n.element.hasTitleActions ? m("", !0) : (t(), y(e, {
+        default: ye(() => [
+          n.element.hasTitleActions ? m("", !0) : (t(), q(e, {
             key: 0,
             element: n.element,
             css: n.css
           }, null, 8, ["element", "css"])),
-          n.element.hasTitleActions ? (t(), y(i, {
+          n.element.hasTitleActions ? (t(), q(i, {
             key: 1,
             element: n.element,
             css: n.css
@@ -3580,7 +3587,7 @@ const Bo = /* @__PURE__ */ C({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
     };
   }
-}), zo = { class: "sv-vue-title-additional-div" }, Uo = { key: 3 }, Ko = { key: 5 }, jo = { key: 7 }, Qo = /* @__PURE__ */ C({
+}), Ko = { class: "sv-vue-title-additional-div" }, _o = { key: 3 }, jo = { key: 5 }, Qo = { key: 7 }, Zo = /* @__PURE__ */ C({
   __name: "TitleContent",
   props: {
     element: {},
@@ -3588,9 +3595,9 @@ const Bo = /* @__PURE__ */ C({
   },
   setup(r) {
     return (o, n) => {
-      const s = q("survey-string");
-      return t(), u("div", zo, [
-        o.element.isTitleRenderedAsString ? (t(), y(s, {
+      const s = v("survey-string");
+      return t(), u("div", Ko, [
+        o.element.isTitleRenderedAsString ? (t(), q(s, {
           key: 0,
           locString: o.element.locTitle
         }, null, 8, ["locString"])) : m("", !0),
@@ -3605,18 +3612,18 @@ const Bo = /* @__PURE__ */ C({
           class: l(o.element.cssTitleNumber),
           "aria-hidden": !0
         }, I(o.element.no), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", Uo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", _o, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", {
           key: 4,
           class: l(o.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, I(o.element.requiredText), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", Ko, "\xA0")) : m("", !0),
-        o.element.isTitleRenderedAsString ? m("", !0) : (t(), y(s, {
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", jo, "\xA0")) : m("", !0),
+        o.element.isTitleRenderedAsString ? m("", !0) : (t(), q(s, {
           key: 6,
           locString: o.element.locTitle
         }, null, 8, ["locString"])),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", jo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", Qo, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", {
           key: 8,
           class: l(o.element.cssClasses.requiredText),
@@ -3625,46 +3632,46 @@ const Bo = /* @__PURE__ */ C({
       ]);
     };
   }
-}), Zo = { class: "sv-title-actions" }, Go = { class: "sv-title-actions__title" }, Xo = /* @__PURE__ */ C({
+}), Go = { class: "sv-title-actions" }, Xo = { class: "sv-title-actions__title" }, Jo = /* @__PURE__ */ C({
   __name: "TitleActions",
   props: {
     element: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.element.getTitleToolbar());
+    const o = r, n = R(() => o.element.getTitleToolbar());
     return (s, e) => {
-      const i = q("survey-string"), a = q("survey-element-title-content"), d = q("sv-action-bar");
-      return t(), u("div", Zo, [
-        p("span", Go, [
-          s.element.isPage ? (t(), y(i, {
+      const i = v("survey-string"), a = v("survey-element-title-content"), d = v("sv-action-bar");
+      return t(), u("div", Go, [
+        p("span", Xo, [
+          s.element.isPage ? (t(), q(i, {
             key: 0,
             locString: s.element.locTitle
           }, null, 8, ["locString"])) : m("", !0),
-          s.element.isPage ? m("", !0) : (t(), y(a, {
+          s.element.isPage ? m("", !0) : (t(), q(a, {
             key: 1,
             element: s.element,
             css: s.css
           }, null, 8, ["element", "css"]))
         ]),
-        h(d, { model: n.value }, null, 8, ["model"])
+        b(d, { model: n.value }, null, 8, ["model"])
       ]);
     };
   }
-}), Jo = (r, o) => {
+}), me = (r, o) => {
   const n = r.__vccOpts || r;
   for (const [s, e] of o)
     n[s] = e;
   return n;
-}, Yo = {}, _o = { class: "sv-brand-info" }, xo = /* @__PURE__ */ ye('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), et = [
-  xo
+}, Yo = {}, xo = { class: "sv-brand-info" }, et = /* @__PURE__ */ ge('<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), st = [
+  et
 ];
-function st(r, o) {
-  return t(), u("div", _o, et);
+function nt(r, o) {
+  return t(), u("div", xo, st);
 }
-const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /* @__PURE__ */ p("use", null, null, -1), it = [
-  tt
-], lt = /* @__PURE__ */ C({
+const ot = /* @__PURE__ */ me(Yo, [["render", nt]]), tt = ["aria-label"], it = /* @__PURE__ */ p("use", null, null, -1), lt = [
+  it
+], rt = /* @__PURE__ */ C({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3675,7 +3682,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
   },
   setup(r) {
     const o = r, n = S(), s = () => {
-      Se(
+      Re(
         o.size,
         o.width,
         o.height,
@@ -3684,7 +3691,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         o.title
       );
     };
-    return G(() => {
+    return Z(() => {
       s();
     }), A(() => {
       s();
@@ -3694,9 +3701,9 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       class: "sv-svg-icon",
       role: "img",
       "aria-label": e.title
-    }, it, 8, ot));
+    }, lt, 8, tt));
   }
-}), rt = /* @__PURE__ */ C({
+}), at = /* @__PURE__ */ C({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3710,7 +3717,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     }), V(() => {
       o.model.resetResponsivityManager();
     }), (s, e) => {
-      const i = q("sv-action");
+      const i = v("sv-action");
       return s.model.hasActions ? (t(), u("div", {
         key: 0,
         ref_key: "root",
@@ -3720,36 +3727,36 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           a.stopPropagation();
         })
       }, [
-        (t(!0), u(w, null, R(s.model.renderedActions, (a) => (t(), y(i, {
+        (t(!0), u(w, null, T(s.model.renderedActions, (a) => (t(), q(i, {
           key: a.id,
           item: a
         }, null, 8, ["item"]))), 128))
       ], 2)) : m("", !0);
     };
   }
-}), at = ["id"], ut = { class: "sv-action__content" }, dt = /* @__PURE__ */ C({
+}), ut = ["id"], dt = { class: "sv-action__content" }, mt = /* @__PURE__ */ C({
   __name: "Action",
   props: {
     item: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.item.component || "sv-action-bar-item"
     );
     return B(() => o.item), (s, e) => {
-      const i = q("sv-action-bar-separator");
+      const i = v("sv-action-bar-separator");
       return t(), u("div", {
         class: l(s.item.getActionRootCss()),
         id: s.item.id
       }, [
-        p("div", ut, [
-          s.item.needSeparator ? (t(), y(i, { key: 0 })) : m("", !0),
-          (t(), y(N(n.value), { item: s.item }, null, 8, ["item"]))
+        p("div", dt, [
+          s.item.needSeparator ? (t(), q(i, { key: 0 })) : m("", !0),
+          (t(), q(N(n.value), { item: s.item }, null, 8, ["item"]))
         ])
-      ], 10, at);
+      ], 10, ut);
     };
   }
-}), mt = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], ct = /* @__PURE__ */ C({
+}), ct = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], pt = /* @__PURE__ */ C({
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3757,7 +3764,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
   setup(r) {
     const o = r;
     return B(() => o.item), (n, s) => {
-      const e = q("sv-svg-icon");
+      const e = v("sv-svg-icon");
       return t(), u("button", {
         class: l(n.item.getActionBarItemCss()),
         type: "button",
@@ -3774,7 +3781,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         role: n.item.ariaRole,
         tabindex: n.item.disableTabStop ? -1 : 0
       }, [
-        n.item.iconName ? (t(), y(e, {
+        n.item.iconName ? (t(), q(e, {
           key: 0,
           class: l(n.item.cssClasses.itemIcon),
           iconName: n.item.iconName,
@@ -3785,16 +3792,16 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           key: 1,
           class: l(n.item.getActionBarItemTitleCss())
         }, I(n.item.title), 3)) : m("", !0)
-      ], 42, mt);
+      ], 42, ct);
     };
   }
-}), pt = ["disabled", "title", "role", "tabindex"], vt = /* @__PURE__ */ C({
+}), vt = ["disabled", "title", "role", "tabindex"], qt = /* @__PURE__ */ C({
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
   },
   setup(r) {
-    const o = r, n = Re;
+    const o = r, n = $e;
     let s;
     return B(
       () => o.item,
@@ -3805,7 +3812,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         s.dispose();
       }
     ), (e, i) => {
-      const a = q("sv-svg-icon"), d = q("sv-popup");
+      const a = v("sv-svg-icon"), d = v("sv-popup");
       return t(), u(w, null, [
         p("button", {
           type: "button",
@@ -3821,7 +3828,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           role: e.item.ariaRole,
           tabindex: e.item.disableTabStop ? -1 : 0
         }, [
-          e.item.iconName ? (t(), y(a, {
+          e.item.iconName ? (t(), q(a, {
             key: 0,
             class: l(e.item.cssClasses.itemIcon),
             iconName: e.item.iconName,
@@ -3832,26 +3839,26 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
             key: 1,
             class: l(e.item.getActionBarItemTitleCss())
           }, I(e.item.title), 3)) : m("", !0)
-        ], 42, pt),
-        h(d, {
+        ], 42, vt),
+        b(d, {
           model: e.item.popupModel,
-          getTarget: b(n)
+          getTarget: f(n)
         }, null, 8, ["model", "getTarget"])
       ], 64);
     };
   }
-}), qt = /* @__PURE__ */ C({
+}), yt = /* @__PURE__ */ C({
   __name: "ActionBarSeparator",
   props: {
     item: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.item && o.item.innerCss);
+    const o = r, n = R(() => o.item && o.item.innerCss);
     return (s, e) => (t(), u("div", {
       class: l(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), yt = ["aria-label", "placeholder", "value"], gt = ["aria-label"], Ct = ["id"], ht = /* @__PURE__ */ C({
+}), gt = ["aria-label", "placeholder", "value"], Ct = ["aria-label"], ht = ["id"], bt = /* @__PURE__ */ C({
   __name: "List",
   props: {
     model: {}
@@ -3869,7 +3876,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     return B(() => o.model), A(() => {
       o.model.initListContainerHtmlElement(n.value);
     }), (a, d) => {
-      const c = q("sv-svg-icon"), v = q("sv-list-item");
+      const c = v("sv-svg-icon"), y = v("sv-list-item");
       return t(), u("div", {
         class: l(a.model.cssClasses.root),
         ref_key: "listContainerElement",
@@ -3882,7 +3889,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           p("div", {
             class: l(a.model.cssClasses.filterIcon)
           }, [
-            h(c, {
+            b(c, {
               iconName: "icon-search",
               size: "auto"
             })
@@ -3895,62 +3902,62 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
             value: a.model.filterString,
             onChange: s,
             onKeyup: e
-          }, null, 42, yt),
+          }, null, 42, gt),
           a.model.showSearchClearButton && !!a.model.filterString ? (t(), u("button", {
             key: 0,
-            onClick: d[0] || (d[0] = (f) => {
-              a.model.onClickSearchClearButton(f);
+            onClick: d[0] || (d[0] = (h) => {
+              a.model.onClickSearchClearButton(h);
             }),
             class: l(a.model.cssClasses.searchClearButtonIcon)
           }, [
-            h(c, {
+            b(c, {
               iconName: "icon-searchclear",
               size: "auto"
             })
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
-        D(p("div", {
+        L(p("div", {
           class: l(a.model.cssClasses.emptyContainer)
         }, [
           p("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, I(a.model.emptyMessage), 11, gt)
+          }, I(a.model.emptyMessage), 11, Ct)
         ], 2), [
           [H, a.model.isEmpty]
         ]),
-        a.model.renderElements ? D((t(), u("ul", {
+        a.model.renderElements ? L((t(), u("ul", {
           key: 1,
           class: l(a.model.getListClass()),
           role: "listbox",
           id: a.model.elementId,
-          onMousedown: d[1] || (d[1] = (f) => {
-            f.preventDefault();
+          onMousedown: d[1] || (d[1] = (h) => {
+            h.preventDefault();
           }),
           onMousemove: i,
-          onKeydown: d[2] || (d[2] = (f) => {
-            a.model.onKeyDown(f);
+          onKeydown: d[2] || (d[2] = (h) => {
+            a.model.onKeyDown(h);
           })
         }, [
-          (t(!0), u(w, null, R(a.model.renderedActions, (f) => (t(), y(v, {
-            item: f,
+          (t(!0), u(w, null, T(a.model.renderedActions, (h) => (t(), q(y, {
+            item: h,
             model: a.model,
-            key: f.id
+            key: h.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, Ct)), [
+        ], 42, ht)), [
           [H, !a.model.isEmpty]
         ]) : m("", !0)
       ], 2);
     };
   }
-}), bt = ["aria-selected", "id"], kt = /* @__PURE__ */ C({
+}), kt = ["aria-selected", "id"], ft = /* @__PURE__ */ C({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.item.elementId), s = (e) => {
+    const o = r, n = R(() => o.item.elementId), s = (e) => {
       o.model.onItemClick(o.item), e.stopPropagation();
     };
     return B(() => o.item), A(() => {
@@ -3958,8 +3965,8 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         o.model.onLastItemRended(o.item);
       });
     }), (e, i) => {
-      const a = q("sv-svg-icon"), d = q("survey-string"), c = _("key2click");
-      return D((t(), u("li", {
+      const a = v("sv-svg-icon"), d = v("survey-string"), c = Y("key2click");
+      return L((t(), u("li", {
         tabindex: "0",
         role: "option",
         "aria-selected": e.model.isItemSelected(e.item),
@@ -3976,28 +3983,28 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           style: $({ paddingInlineStart: e.model.getItemIndent(e.item) }),
           class: l(e.model.cssClasses.itemBody)
         }, [
-          e.item.iconName && !e.item.component ? (t(), y(a, {
+          e.item.iconName && !e.item.component ? (t(), q(a, {
             key: 0,
             class: l(e.model.cssClasses.itemIcon),
             iconName: e.item.iconName,
             size: e.item.iconSize
           }, null, 8, ["class", "iconName", "size"])) : m("", !0),
-          e.item.component ? m("", !0) : (t(), y(d, {
+          e.item.component ? m("", !0) : (t(), q(d, {
             key: 1,
             locString: e.item.locTitle
           }, null, 8, ["locString"])),
-          e.item.component ? (t(), y(N(e.item.component), {
+          e.item.component ? (t(), q(N(e.item.component), {
             key: 2,
             item: e.item
           }, null, 8, ["item"])) : m("", !0)
         ], 6)
-      ], 10, bt)), [
+      ], 10, kt)), [
         [H, e.model.isItemVisible(e.item)],
         [c]
       ]);
     };
   }
-}), ft = /* @__PURE__ */ C({
+}), It = /* @__PURE__ */ C({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4007,7 +4014,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     const o = r, n = F(
       te(o.model, void 0)
     ), s = S(null);
-    return Z(
+    return Q(
       () => o.model,
       (e) => {
         n.value.dispose(), n.value = te(e, void 0);
@@ -4022,22 +4029,22 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     }), V(() => {
       n.value.dispose();
     }), (e, i) => {
-      const a = q("sv-popup-container");
+      const a = v("sv-popup-container");
       return t(), u("div", {
         ref_key: "root",
         ref: s
       }, [
-        h(a, { model: n.value }, null, 8, ["model"])
+        b(a, { model: n.value }, null, 8, ["model"])
       ], 512);
     };
   }
-}), It = { class: "sv-popup__shadow" }, wt = { class: "sv-popup__body-content" }, St = {
+}), wt = { class: "sv-popup__shadow" }, St = { class: "sv-popup__body-content" }, Rt = {
   key: 0,
   class: "sv-popup__body-header"
-}, Tt = { class: "sv-popup__scrolling-content" }, Rt = { class: "sv-popup__content" }, $t = {
+}, Tt = { class: "sv-popup__scrolling-content" }, $t = { class: "sv-popup__content" }, Bt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Bt = /* @__PURE__ */ C({
+}, Lt = /* @__PURE__ */ C({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4048,12 +4055,12 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     const s = (e) => {
       e.stopPropagation();
     };
-    return B(() => o.model), G(() => {
+    return B(() => o.model), Z(() => {
       const e = o.model;
       !n && e.isVisible && o.model.updateOnShowing(), n = e.isVisible;
     }), (e, i) => {
-      const a = q("sv-action-bar");
-      return D((t(), u("div", {
+      const a = v("sv-action-bar");
+      return L((t(), u("div", {
         tabindex: "-1",
         class: l(["sv-popup", e.model.styleClass]),
         onKeydown: i[0] || (i[0] = (d) => {
@@ -4074,20 +4081,20 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           }),
           onClick: s
         }, [
-          p("div", It, [
-            e.model.showHeader ? (t(), y(N(e.model.popupHeaderTemplate), {
+          p("div", wt, [
+            e.model.showHeader ? (t(), q(N(e.model.popupHeaderTemplate), {
               key: 0,
               model: e.model
             }, null, 8, ["model"])) : m("", !0),
-            p("div", wt, [
-              e.model.title ? (t(), u("div", St, I(e.model.title), 1)) : m("", !0),
+            p("div", St, [
+              e.model.title ? (t(), u("div", Rt, I(e.model.title), 1)) : m("", !0),
               p("div", Tt, [
-                p("div", Rt, [
-                  (t(), y(N(e.model.contentComponentName), ge(Ce(e.model.contentComponentData)), null, 16))
+                p("div", $t, [
+                  (t(), q(N(e.model.contentComponentName), Ce(he(e.model.contentComponentData)), null, 16))
                 ])
               ]),
-              e.model.showFooter ? (t(), u("div", $t, [
-                h(a, {
+              e.model.showFooter ? (t(), u("div", Bt, [
+                b(a, {
                   model: e.model.footerToolbar
                 }, null, 8, ["model"])
               ])) : m("", !0)
@@ -4099,7 +4106,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       ]);
     };
   }
-}), Lt = /* @__PURE__ */ C({
+}), Dt = /* @__PURE__ */ C({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4113,10 +4120,10 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       })
     }, null, 4));
   }
-}), Dt = {
+}), Pt = {
   key: 0,
   class: "sv-components-column"
-}, Pt = /* @__PURE__ */ C({
+}, Mt = /* @__PURE__ */ C({
   __name: "Container",
   props: {
     survey: {},
@@ -4124,23 +4131,23 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     needRenderWrapper: {}
   },
   setup(r) {
-    const o = r, n = T(
+    const o = r, n = R(
       () => o.survey.getContainerContent(o.container)
     );
     return (s, e) => n.value.length > 0 ? (t(), u(w, { key: 0 }, [
-      s.needRenderWrapper ? (t(), u("div", Dt, [
-        (t(!0), u(w, null, R(n.value, (i, a) => (t(), y(N(i.component), {
+      s.needRenderWrapper ? (t(), u("div", Pt, [
+        (t(!0), u(w, null, T(n.value, (i, a) => (t(), q(N(i.component), {
           survey: s.survey,
           container: s.container,
           model: i.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (t(!0), u(w, { key: 1 }, R(n.value, (i, a) => (t(), y(N(i.component), {
+      ])) : (t(!0), u(w, { key: 1 }, T(n.value, (i, a) => (t(), q(N(i.component), {
         survey: s.survey,
         model: i.data
       }, null, 8, ["survey", "model"]))), 256))
     ], 64)) : m("", !0);
   }
-}), Q = /* @__PURE__ */ C({
+}), j = /* @__PURE__ */ C({
   __name: "Progress",
   props: {
     survey: {},
@@ -4148,7 +4155,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => o.survey.progressValue + "%"), s = (i) => ie.getProgressTextInBarCss(i), e = (i) => ie.getProgressTextUnderBarCss(i);
+    const o = r, n = R(() => o.survey.progressValue + "%"), s = (i) => ie.getProgressTextInBarCss(i), e = (i) => ie.getProgressTextUnderBarCss(i);
     return (i, a) => (t(), u("div", {
       class: l(i.survey.getProgressCssClasses(i.container))
     }, [
@@ -4168,17 +4175,17 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       }, I(i.survey.progressText), 3)
     ], 2));
   }
-}), Mt = ["onClick"], Nt = ["title"], Ht = ["title"], At = /* @__PURE__ */ C({
+}), Nt = ["onClick"], Ht = ["title"], At = ["title"], Et = /* @__PURE__ */ C({
   __name: "ProgressButtons",
   props: {
     survey: {}
   },
   setup(r) {
-    const o = r, n = new $e(o.survey), s = S(!1), e = S(), i = T(() => o.survey.css);
+    const o = r, n = new Be(o.survey), s = S(!1), e = S(), i = R(() => o.survey.css);
     let a;
-    const d = (k) => n.isListElementClickable(k), c = (k) => n.getListElementCss(k), v = (k) => {
+    const d = (k) => n.isListElementClickable(k), c = (k) => n.getListElementCss(k), y = (k) => {
       n.clickListElement(k);
-    }, f = (k, P) => n.getScrollButtonCss(k, P), g = (k) => {
+    }, h = (k, P) => n.getScrollButtonCss(k, P), g = (k) => {
       let P = e.value;
       P.scrollLeft += (k ? -1 : 1) * 70;
     };
@@ -4196,8 +4203,8 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         class: l(i.value.progressButtonsContainer)
       }, [
         p("div", {
-          class: l(f(s.value, !0)),
-          onClick: P[0] || (P[0] = (L) => g(!0)),
+          class: l(h(s.value, !0)),
+          onClick: P[0] || (P[0] = (D) => g(!0)),
           role: "button"
         }, null, 2),
         p("div", {
@@ -4208,113 +4215,113 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           p("ul", {
             class: l(i.value.progressButtonsList)
           }, [
-            (t(!0), u(w, null, R(k.survey.visiblePages, (L, E) => (t(), u("li", {
+            (t(!0), u(w, null, T(k.survey.visiblePages, (D, E) => (t(), u("li", {
               key: "listelement" + E,
               class: l(c(E)),
-              onClick: (j) => d(E) ? v(E) : null
+              onClick: (_) => d(E) ? y(E) : null
             }, [
               p("div", {
                 class: l(i.value.progressButtonsPageTitle),
-                title: L.locNavigationTitle.renderedHtml || L.name
-              }, I(L.locNavigationTitle.renderedHtml || L.name), 11, Nt),
+                title: D.renderedNavigationTitle
+              }, I(D.renderedNavigationTitle), 11, Ht),
               p("div", {
                 class: l(i.value.progressButtonsPageDescription),
-                title: L.locNavigationDescription.renderedHtml
-              }, I(L.locNavigationDescription.renderedHtml), 11, Ht)
-            ], 10, Mt))), 128))
+                title: D.locNavigationDescription.renderedHtml
+              }, I(D.locNavigationDescription.renderedHtml), 11, At)
+            ], 10, Nt))), 128))
           ], 2)
         ], 2),
         p("div", {
-          class: l(f(s.value, !1)),
-          onClick: P[1] || (P[1] = (L) => g(!1)),
+          class: l(h(s.value, !1)),
+          onClick: P[1] || (P[1] = (D) => g(!1)),
           role: "button"
         }, null, 2)
       ], 2)
     ], 2));
   }
-}), Et = /* @__PURE__ */ C({
+}), Vt = /* @__PURE__ */ C({
   __name: "ProgressToc",
   props: {
     survey: {}
   },
   setup(r) {
-    const o = r, n = new Be(o.survey);
+    const o = r, n = new Le(o.survey);
     return (s, e) => {
-      const i = q("sv-svg-icon"), a = q("sv-popup"), d = q("sv-list"), c = _("key2click");
+      const i = v("sv-svg-icon"), a = v("sv-popup"), d = v("sv-list"), c = Y("key2click");
       return t(), u("div", {
-        class: l(b(n).containerCss)
+        class: l(f(n).containerCss)
       }, [
-        b(n).isMobile ? D((t(), u("div", {
+        f(n).isMobile ? L((t(), u("div", {
           key: 0,
-          onClick: e[0] || (e[0] = (...v) => b(n).togglePopup && b(n).togglePopup(...v))
+          onClick: e[0] || (e[0] = (...y) => f(n).togglePopup && f(n).togglePopup(...y))
         }, [
-          h(i, {
-            iconName: b(n).icon,
+          b(i, {
+            iconName: f(n).icon,
             size: 24
           }, null, 8, ["iconName"]),
-          h(a, {
-            model: b(n).popupModel
+          b(a, {
+            model: f(n).popupModel
           }, null, 8, ["model"])
         ])), [
           [c]
-        ]) : (t(), y(d, {
+        ]) : (t(), q(d, {
           key: 1,
-          model: b(n).listModel
+          model: f(n).listModel
         }, null, 8, ["model"]))
       ], 2);
     };
   }
-}), Vt = { onsubmit: "return false;" }, Ot = {
+}), Ot = { onsubmit: "return false;" }, Ft = {
   key: 0,
   class: "sv_custom_header"
-}, Ft = ["id"], Wt = { key: 1 }, zt = ["innerHTML"], Ut = ["innerHTML"], Kt = ["innerHTML"], re = /* @__PURE__ */ C({
+}, Wt = ["id"], zt = { key: 1 }, Ut = ["innerHTML"], Kt = ["innerHTML"], _t = ["innerHTML"], re = /* @__PURE__ */ C({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const o = r, n = S(), s = S(""), e = S(1), i = T(() => {
+    const o = r, n = S(), s = S(""), e = S(1), i = R(() => {
       const k = o.survey ? o.survey : o.model;
-      return he(k);
-    }), a = T(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
+      return be(k);
+    }), a = R(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
       const k = a.value;
       return !!i.value && k + e.value.toString();
-    }, c = T(
+    }, c = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
-    ), v = T(() => i.value.css), f = T(() => "page" + d()), g = () => c.value ? (s.value || (s.value = i.value.processedCompletedHtml), s.value) : "";
+    ), y = R(() => i.value.css), h = R(() => "page" + d()), g = () => c.value ? (s.value || (s.value = i.value.processedCompletedHtml), s.value) : "";
     return B(() => i.value), A(() => {
       if (!!i.value) {
-        i.value.needRenderIcons && Le.renderIcons();
+        i.value.needRenderIcons && De.renderIcons();
         var k = n.value;
         k && i.value.afterRenderSurvey(k), i.value.renderCallback = () => {
-          var P, L;
-          e.value++, (L = (P = x()) == null ? void 0 : P.proxy) == null || L.$forceUpdate();
+          var P, D;
+          e.value++, (D = (P = x()) == null ? void 0 : P.proxy) == null || D.$forceUpdate();
         }, i.value.startTimerFromUI();
       }
     }), V(() => {
       i.value.stopTimer(), i.value.renderCallback = void 0;
     }), (k, P) => {
-      const L = q("survey-popup-modal"), E = q("survey-header"), j = q("survey-page"), J = q("sv-brand-info"), ne = q("sv-notifier");
+      const D = v("survey-popup-modal"), E = v("survey-header"), _ = v("survey-page"), X = v("sv-brand-info"), ne = v("sv-notifier");
       return t(), u("div", {
         class: l(i.value.getRootCss()),
         style: $(i.value.themeVariables),
         ref_key: "root",
         ref: n
       }, [
-        h(L),
+        b(D),
         i.value.renderBackgroundImage ? (t(), u("div", {
           key: 0,
-          class: l(v.value.rootBackgroundImage),
+          class: l(y.value.rootBackgroundImage),
           style: $(i.value.backgroundImageStyle)
         }, null, 6)) : m("", !0),
-        p("form", Vt, [
-          i.value.hasLogo ? m("", !0) : (t(), u("div", Ot)),
+        p("form", Ot, [
+          i.value.hasLogo ? m("", !0) : (t(), u("div", Ft)),
           p("div", {
-            class: l(v.value.container)
+            class: l(y.value.container)
           }, [
-            h(E, { survey: i.value }, null, 8, ["survey"]),
-            (t(), y(N("sv-components-container"), {
+            b(E, { survey: i.value }, null, 8, ["survey"]),
+            (t(), q(N("sv-components-container"), {
               survey: i.value,
               container: "header",
               needRenderWrapper: !1
@@ -4323,7 +4330,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
               key: 0,
               class: l(i.value.bodyContainerCss)
             }, [
-              (t(), y(N("sv-components-container"), {
+              (t(), q(N("sv-components-container"), {
                 survey: i.value,
                 container: "left",
                 needRenderWrapper: !0
@@ -4333,58 +4340,58 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
                 style: $({ maxWidth: i.value.renderedWidth }),
                 id: a.value
               }, [
-                (t(), y(N("sv-components-container"), {
+                (t(), q(N("sv-components-container"), {
                   survey: i.value,
                   container: "contentTop",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                (t(), y(j, {
-                  key: f.value,
+                (t(), q(_, {
+                  key: h.value,
                   survey: i.value,
                   page: i.value.activePage,
-                  css: v.value
+                  css: y.value
                 }, null, 8, ["survey", "page", "css"])),
-                (t(), y(N("sv-components-container"), {
+                (t(), q(N("sv-components-container"), {
                   survey: i.value,
                   container: "contentBottom",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"]))
-              ], 14, Ft),
-              (t(), y(N("sv-components-container"), {
+              ], 14, Wt),
+              (t(), q(N("sv-components-container"), {
                 survey: i.value,
                 container: "right",
                 needRenderWrapper: !0
               }, null, 8, ["survey"]))
             ], 2)) : m("", !0),
-            (t(), y(N("sv-components-container"), {
+            (t(), q(N("sv-components-container"), {
               survey: i.value,
               container: "footer",
               needRenderWrapper: !1
             }, null, 8, ["survey"])),
-            c.value ? (t(), u("div", Wt, [
+            c.value ? (t(), u("div", zt, [
               p("div", {
                 innerHTML: g(),
                 class: l(i.value.completedCss)
-              }, null, 10, zt)
+              }, null, 10, Ut)
             ])) : m("", !0),
             i.value.state === "completedbefore" ? (t(), u("div", {
               key: 2,
               class: l(i.value.completedBeforeCss),
               innerHTML: i.value.processedCompletedBeforeHtml
-            }, null, 10, Ut)) : m("", !0),
+            }, null, 10, Kt)) : m("", !0),
             i.value.state === "loading" ? (t(), u("div", {
               key: 3,
               class: l(i.value.loadingBodyCss),
               innerHTML: i.value.processedLoadingHtml
-            }, null, 10, Kt)) : m("", !0),
+            }, null, 10, _t)) : m("", !0),
             i.value.state === "empty" ? (t(), u("div", {
               key: 4,
-              class: l(v.value.bodyEmpty)
+              class: l(y.value.bodyEmpty)
             }, I(i.value.emptySurveyText), 3)) : m("", !0)
           ], 2)
         ]),
-        i.value.showBrandInfo ? (t(), y(J, { key: 1 })) : m("", !0),
-        h(ne, {
+        i.value.showBrandInfo ? (t(), q(X, { key: 1 })) : m("", !0),
+        b(ne, {
           model: i.value.notifier
         }, null, 8, ["model"])
       ], 6);
@@ -4398,15 +4405,15 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
   setup(r) {
     const o = r;
     return B(() => o.model), (n, s) => {
-      const e = q("sv-action-bar");
-      return D((t(), u("div", {
+      const e = v("sv-action-bar");
+      return L((t(), u("div", {
         class: l(n.model.css),
         style: $({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
         p("span", null, I(n.model.message), 1),
-        h(e, {
+        b(e, {
           model: n.model.actionBar
         }, null, 8, ["model"])
       ], 6)), [
@@ -4433,8 +4440,8 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         value: o.question.otherValue,
         maxlength: o.question.getOthersMaxLength(),
         placeholder: o.question.otherPlaceholder,
-        "aria-label": o.question.ariaLabel,
-        "aria-required": o.question.ariaRequired,
+        "aria-label": o.question.ariaLabel || o.question.a11y_input_ariaLabel,
+        "aria-required": o.question.ariaRequired || o.question.a11y_input_ariaRequired,
         style: $({ resize: o.question.resizeStyle }),
         onChange: n[0] || (n[0] = (s) => {
           o.question.onOtherValueChange(s);
@@ -4472,24 +4479,24 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const o = r, n = F(), s = T(() => o.survey ? o.survey.getCss() : {}), e = T(() => {
+    const o = r, n = F(), s = R(() => o.survey ? o.survey.getCss() : {}), e = R(() => {
       var g;
       return (g = n.value) != null && g.isExpanded ? s.value.window.header.buttonCollapsed : s.value.window.header.buttonExpanded;
-    }), i = T(() => {
+    }), i = R(() => {
       var g;
       return (g = n.value) == null ? void 0 : g.isExpanded;
     }), a = () => {
       n.value.changeExpandCollapse();
     }, d = () => {
       n.value.hide();
-    }, c = () => "SurveyComponent", v = () => {
+    }, c = () => "SurveyComponent", y = () => {
       n.value.onScroll();
     };
     B(() => n.value);
-    const f = Z(
+    const h = Q(
       () => o.survey,
       (g) => {
-        const k = new De(null, g);
+        const k = new Pe(null, g);
         o.isExpanded !== void 0 && (k.isExpanded = o.isExpanded), o.closeOnCompleteTimeout !== void 0 && (k.closeOnCompleteTimeout = o.closeOnCompleteTimeout), k.isShowing = !0, n.value = k;
       },
       {
@@ -4497,9 +4504,9 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       }
     );
     return V(() => {
-      f();
+      h();
     }), (g, k) => {
-      const P = q("survey-string"), L = q("sv-svg-icon");
+      const P = v("survey-string"), D = v("sv-svg-icon");
       return n.value.isShowing ? (t(), u("div", {
         key: 0,
         style: $([{ position: "fixed", bottom: "3px", right: "10px" }, {
@@ -4519,7 +4526,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
               style: { "padding-right": "10px" },
               class: l(n.value.cssHeaderTitle)
             }, [
-              h(P, {
+              b(P, {
                 locString: g.survey.locTitle
               }, null, 8, ["locString"])
             ], 2),
@@ -4534,7 +4541,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
             onClick: d,
             style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            h(L, {
+            b(D, {
               iconName: "icon-expanddetail",
               size: 16
             })
@@ -4545,7 +4552,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
             onClick: a,
             style: { float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            h(L, {
+            b(D, {
               iconName: "icon-collapsedetail",
               size: 16
             })
@@ -4554,25 +4561,25 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         i.value ? (t(), u("div", {
           key: 0,
           class: l(n.value.cssBody),
-          onScroll: v
+          onScroll: y
         }, [
-          (t(), y(N(c()), { survey: g.survey }, null, 8, ["survey"]))
+          (t(), q(N(c()), { survey: g.survey }, null, 8, ["survey"]))
         ], 34)) : m("", !0)
       ], 6)) : m("", !0);
     };
   }
-}), Yt = ["innerHTML"], _t = /* @__PURE__ */ C({
+}), Yt = ["innerHTML"], xt = /* @__PURE__ */ C({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = S(), s = T(
+    const o = r, n = S(), s = R(
       () => o.question.customWidget.isDefaultRender
-    ), e = T(
+    ), e = R(
       () => !!o.question.customWidget.htmlTemplate
-    ), i = T(() => o.question.customWidget.htmlTemplate), a = T(() => "survey-" + o.question.getTemplate());
+    ), i = R(() => o.question.customWidget.htmlTemplate), a = R(() => "survey-" + o.question.getTemplate());
     return A(() => {
       o.question.customWidget.afterRender(o.question, n.value);
     }), U(() => {
@@ -4585,19 +4592,19 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         key: 0,
         innerHTML: i.value
       }, null, 8, Yt)) : m("", !0),
-      s.value ? (t(), y(N(a.value), {
+      s.value ? (t(), q(N(a.value), {
         key: 1,
         question: d.question,
         css: d.css
       }, null, 8, ["question", "css"])) : m("", !0)
     ], 512));
   }
-}), xt = /* @__PURE__ */ C({
+}), ei = /* @__PURE__ */ C({
   __name: "PopupModal",
   setup(r) {
     const o = F();
-    function n(e, i, a, d, c, v, f = "popup") {
-      const g = Pe(
+    function n(e, i, a, d, c, y, h = "popup") {
+      const g = Me(
         e,
         i,
         a,
@@ -4605,8 +4612,8 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         void 0,
         void 0,
         c,
-        v,
-        f
+        y,
+        h
       );
       return s(g);
     }
@@ -4614,7 +4621,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       e.onHide = () => {
         o.value = void 0, a.dispose();
       };
-      const a = Me(
+      const a = Ne(
         e,
         i
       );
@@ -4625,16 +4632,16 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
     })), O.showDialog || (O.showDialog = s, V(() => {
       O.showDialog = void 0;
     })), (e, i) => {
-      const a = q("sv-popup-container");
-      return o.value ? (t(), y(be, {
+      const a = v("sv-popup-container");
+      return o.value ? (t(), q(ke, {
         key: 0,
         to: o.value.container
       }, [
-        h(a, { model: o.value }, null, 8, ["model"])
+        b(a, { model: o.value }, null, 8, ["model"])
       ], 8, ["to"])) : m("", !0);
     };
   }
-}), ei = /* @__PURE__ */ C({
+}), si = /* @__PURE__ */ C({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4646,7 +4653,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       class: l(n.remainingCharacterCounter)
     }, I(n.counter.remainingCharacterCounter), 3));
   }
-}), si = /* @__PURE__ */ C({
+}), ni = /* @__PURE__ */ C({
   __name: "Composite",
   props: {
     question: {},
@@ -4655,10 +4662,10 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
   setup(r) {
     const o = r, n = S(null);
     M(o, n);
-    const s = T(() => o.question.contentPanel);
+    const s = R(() => o.question.contentPanel);
     return (e, i) => {
-      const a = q("survey-panel");
-      return t(), y(a, {
+      const a = v("survey-panel");
+      return t(), q(a, {
         ref_key: "root",
         ref: n,
         question: s.value,
@@ -4666,7 +4673,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
       }, null, 8, ["question", "css"]);
     };
   }
-}), ni = /* @__PURE__ */ C({
+}), oi = /* @__PURE__ */ C({
   __name: "Custom",
   props: {
     question: {},
@@ -4675,23 +4682,23 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
   setup(r) {
     const o = r, n = S(null);
     M(o, n);
-    const s = T(() => o.question.contentQuestion), e = (i) => ee(i);
-    return (i, a) => (t(), y(N(e(s.value)), {
+    const s = R(() => o.question.contentQuestion), e = (i) => ee(i);
+    return (i, a) => (t(), q(N(e(s.value)), {
       ref: n.value,
       question: s.value,
       css: i.css
     }, null, 8, ["question", "css"]));
   }
-}), oi = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), ti = [
-  oi
-], ue = 440, ii = /* @__PURE__ */ C({
+}), ti = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), ii = [
+  ti
+], ue = 440, li = /* @__PURE__ */ C({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(() => ue * o.model.progress), s = T(() => o.model.text);
+    const o = r, n = R(() => ue * o.model.progress), s = R(() => o.model.text);
     return B(() => o.model), (e, i) => e.model.isRunning && e.model.showTimerAsClock ? (t(), u("div", {
       key: 0,
       class: l(e.model.rootCss)
@@ -4700,7 +4707,7 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
         key: 0,
         class: l(e.model.getProgressCss()),
         style: $({ strokeDasharray: ue, strokeDashoffset: n.value })
-      }, ti, 6)) : m("", !0),
+      }, ii, 6)) : m("", !0),
       p("div", {
         class: l(e.model.textContainerCss)
       }, [
@@ -4712,33 +4719,44 @@ const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /
           class: l(e.model.minorTextCss)
         }, I(e.model.clockMinorText), 3)) : m("", !0)
       ], 2)
-    ], 2)) : D((t(), u("div", {
+    ], 2)) : L((t(), u("div", {
       key: 1,
       class: l(e.model.survey.getCss().timerRoot)
     }, I(s.value), 3)), [
       [H, e.model.isRunning && !e.model.showTimerAsClock]
     ]);
   }
-});
-function li(r) {
-  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", Fe), r.component("survey-page", Ee), r.component("survey-row", We), r.component("survey-element", Ue), r.component("survey-panel", Qe), r.component("survey-element-header", Ze), r.component("survey-string", Ge), r.component("sv-string-viewer", Ye), r.component("sv-string-editor", xe), r.component("sv-skeleton", ss), r.component("survey-text", ts), r.component("survey-text-input", as), r.component("survey-checkbox", ds), r.component("survey-checkbox-item", ys), r.component("survey-radiogroup", hs), r.component("survey-radiogroup-item", ws), r.component("survey-signaturepad", $s), r.component("survey-html", Ls), r.component("survey-image", Ns), r.component("survey-expression", Hs), r.component("survey-file", Us), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Js), r.component("survey-comment", xs), r.component("survey-dropdown", en), r.component("sv-dropdown-select", tn), r.component("sv-dropdown-option-item", rn), r.component("sv-dropdown", cn), r.component("survey-tagbox", pn), r.component("sv-tagbox", yn), r.component("sv-tagbox-item", kn), r.component("sv-tagbox-filter", hn), r.component("survey-ranking", fn), r.component("survey-ranking-item", Ln), r.component("survey-rating", Mn), r.component("sv-rating-item", Hn), r.component("sv-rating-item-smiley", En), r.component("sv-rating-item-star", On), r.component("sv-rating-dropdown", Fn), r.component("survey-boolean", zn), r.component("sv-boolean-radio", Un), r.component("sv-boolean-radio-item", Qn), r.component("sv-boolean-checkbox", Yn), r.component("survey-multipletext", _n), r.component("survey-multipletext-item", eo), r.component("survey-matrix", ao), r.component("survey-matrixdropdown", uo), r.component("survey-matrixtable", vo), r.component("survey-matrixheaderrequired", yo), r.component("survey-matrixcell", Co), r.component("survey-matrixdynamic", ho), r.component("sv-matrix-remove-button", ko), r.component("sv-matrix-drag-drop-icon", Io), r.component("sv-matrix-detail-button", So), r.component("survey-paneldynamic", To), r.component("survey-paneldynamicprogress", Ro), r.component("survey-paneldynamicprogress-v2", $o), r.component("sv-paneldynamic-add-btn", Bo), r.component("sv-paneldynamic-next-btn", Do), r.component("sv-paneldynamic-prev-btn", Mo), r.component("sv-paneldynamic-remove-btn", No), r.component("sv-paneldynamic-progress-text", Ho), r.component("sv-components-container", Pt), r.component("sv-progress-buttons", At), r.component("sv-progress-toc", Et), r.component("sv-progress-pages", Q), r.component("sv-progress-questions", Q), r.component("sv-progress-correctquestions", Q), r.component("sv-progress-requiredquestions", Q), r.component("survey-errors", Eo), r.component("survey-question-comment", Fo), r.component("survey-element-title", Wo), r.component("survey-element-title-content", Qo), r.component("sv-title-actions", Xo), r.component("sv-brand-info", nt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", rt), r.component("sv-action", dt), r.component("sv-action-bar-item", ct), r.component("sv-action-bar-item-dropdown", vt), r.component("sv-action-bar-separator", qt), r.component("sv-list", ht), r.component("sv-list-item", kt), r.component("sv-popup", ft), r.component("sv-popup-container", Bt), r.component("popup-pointer", Lt), r.component("sv-notifier", jt), r.component("survey-other-choice", Gt), r.component("sv-nav-btn", Jt), r.component("survey-customwidget", _t), r.component("survey-popup-modal", xt), r.component("sv-character-counter", ei), r.component("survey-composite", si), r.component("survey-custom", ni), r.component("sv-timerpanel", ii), r.directive("key2click", {
+}), ri = {}, ai = { class: "sd-loading-indicator" };
+function ui(r, o) {
+  const n = v("sv-svg-icon");
+  return t(), u("div", ai, [
+    b(n, {
+      iconName: "icon-loading",
+      size: "'auto'"
+    })
+  ]);
+}
+const di = /* @__PURE__ */ me(ri, [["render", ui]]);
+He.platform = "vue3";
+function mi(r) {
+  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", ze), r.component("survey-page", Oe), r.component("survey-row", Ue), r.component("survey-element", _e), r.component("survey-panel", Ze), r.component("survey-element-header", Ge), r.component("survey-string", Xe), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", Cs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Rs), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", As), r.component("survey-expression", Es), r.component("survey-file", _s), r.component("survey-imagepicker", Qs), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", qn), r.component("sv-tagbox", Cn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", Pn), r.component("survey-rating", Hn), r.component("sv-rating-item", En), r.component("sv-rating-item-smiley", On), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", _n), r.component("sv-boolean-radio-item", Zn), r.component("sv-boolean-checkbox", xn), r.component("survey-multipletext", eo), r.component("survey-multipletext-item", no), r.component("survey-matrix", mo), r.component("survey-matrixdropdown", co), r.component("survey-matrixtable", yo), r.component("survey-matrixheaderrequired", Co), r.component("survey-matrixcell", bo), r.component("survey-matrixdynamic", ko), r.component("sv-matrix-remove-button", Io), r.component("sv-matrix-drag-drop-icon", So), r.component("sv-matrix-detail-button", To), r.component("survey-paneldynamic", $o), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", Do), r.component("sv-paneldynamic-next-btn", Mo), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Ao), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Et), r.component("sv-progress-toc", Vt), r.component("sv-progress-pages", j), r.component("sv-progress-questions", j), r.component("sv-progress-correctquestions", j), r.component("sv-progress-requiredquestions", j), r.component("survey-errors", Oo), r.component("survey-question-comment", zo), r.component("survey-element-title", Uo), r.component("survey-element-title-content", Zo), r.component("sv-title-actions", Jo), r.component("sv-brand-info", ot), r.component("sv-svg-icon", rt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", pt), r.component("sv-action-bar-item-dropdown", qt), r.component("sv-action-bar-separator", yt), r.component("sv-list", bt), r.component("sv-list-item", ft), r.component("sv-popup", It), r.component("sv-popup-container", Lt), r.component("popup-pointer", Dt), r.component("sv-notifier", jt), r.component("survey-other-choice", Gt), r.component("sv-nav-btn", Jt), r.component("survey-customwidget", xt), r.component("survey-popup-modal", ei), r.component("sv-character-counter", si), r.component("survey-composite", ni), r.component("survey-custom", oi), r.component("sv-timerpanel", li), r.component("sv-loading-indicator", di), r.directive("key2click", {
     mounted: function(o, n) {
       const s = { ...n.value };
       s.disableTabStop || (o.tabIndex = 0), o.addEventListener("keyup", (e) => (e.preventDefault(), e.stopPropagation(), de(e, s), !1)), o.addEventListener("keydown", (e) => {
-        Ne(e, s);
+        Ae(e, s);
       }), o.addEventListener("blur", (e) => {
-        He(e);
+        Ee(e);
       });
     }
   });
 }
-const ui = {
+const vi = {
   install(r) {
-    li(r);
+    mi(r);
   }
 };
 export {
-  ui as surveyPlugin,
+  vi as surveyPlugin,
   B as useBase,
   W as useLocString,
   M as useQuestion