survey-vue3-ui 1.9.110 → 1.9.111

package/survey-vue3-ui.es.js

@@ -1,31 +1,31 @@
-import { shallowReactive as ce, watch as Q, onBeforeUnmount as z, onMounted as A, ref as R, shallowRef as O, triggerRef as oe, unref as b, isRef as pe, defineComponent as h, computed as T, onUpdated as Z, resolveComponent as v, openBlock as t, createElementBlock as u, normalizeClass as r, createVNode as C, createCommentVNode as m, Fragment as w, renderList as $, createBlock as q, createElementVNode as c, normalizeStyle as S, onUnmounted as _, withDirectives as L, resolveDynamicComponent as M, vShow as H, toDisplayString as I, vModelCheckbox as W, vModelRadio as J, vModelSelect as ve, vModelText as qe, getCurrentInstance as Y, withCtx as ye, createStaticVNode as ge, resolveDirective as x, normalizeProps as he, guardReactiveProps as Ce, 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 V, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
+import { shallowReactive as ce, watch as G, onBeforeUnmount as K, onMounted as E, ref as T, shallowRef as W, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as X, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as r, createVNode as C, createCommentVNode as m, Fragment as w, renderList as B, createBlock as y, createElementVNode as c, normalizeStyle as S, onUnmounted as V, withDirectives as P, resolveDynamicComponent as N, vShow as A, toDisplayString as I, vModelCheckbox as U, vModelRadio as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as J, 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 F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
 fe.createPropertiesHash = () => ce({});
 function _e(l) {
   return !l || l.__vueImplemented ? !1 : (l.createArrayCoreHandler = (n, o) => {
-    const e = [], s = O(e);
+    const e = [], s = W(e);
     return e.onArrayChanged = () => {
       oe(s);
-    }, n[o] = s, b(n[o]);
+    }, n[o] = s, k(n[o]);
   }, l.iteratePropertiesHash((n, o) => {
     if (Array.isArray(n[o])) {
-      const e = O(n[o]);
+      const e = W(n[o]);
       n[o].onArrayChanged = () => {
         oe(e);
       }, n[o] = e;
     }
-  }), l.getPropertyValueCoreHandler = (n, o) => b(n[o]), l.setPropertyValueCoreHandler = (n, o, e) => {
+  }), l.getPropertyValueCoreHandler = (n, o) => k(n[o]), l.setPropertyValueCoreHandler = (n, o, e) => {
     pe(n[o]) ? n[o].value = e : n[o] = e;
   }, l.__vueImplemented = !0, !0);
 }
 function le(l, n) {
   !l || !n || (l.iteratePropertiesHash((o, e) => {
-    o[e] = b(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
+    o[e] = k(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
   }), delete l.__vueImplemented, l.createArrayCoreHandler = void 0, l.getPropertyValueCoreHandler = void 0, l.setPropertyValueCoreHandler = void 0);
 }
-function B(l, n, o) {
+function L(l, n, o) {
   let e = !1;
-  const s = Q(
+  const s = G(
     l,
     (i, a) => {
       n && n(i), a && (le(a, e), o && o(a)), e = _e(i);
@@ -34,24 +34,24 @@ function B(l, n, o) {
       immediate: !0
     }
   );
-  z(() => {
+  K(() => {
     const i = l();
     i && (o && o(l()), le(i, e), s());
   });
 }
-function N(l, n, o, e) {
-  B(() => l.question, o, e), A(() => {
+function H(l, n, o, e) {
+  L(() => l.question, o, e), E(() => {
     l.question && l.question.afterRenderQuestionElement(n.value);
-  }), z(() => {
+  }), K(() => {
     l.question.beforeDestroyQuestionElement(n.value);
   });
 }
-function F(l) {
-  const n = R(), o = (s) => {
+function z(l) {
+  const n = T(), o = (s) => {
     n.value = s.renderedHtml, s.onChanged = () => {
       n.value = s.renderedHtml;
     };
-  }, e = Q(
+  }, e = G(
     l,
     (s, i) => {
       i && (i.onChanged = () => {
@@ -59,14 +59,14 @@ function F(l) {
     },
     { immediate: !0 }
   );
-  return z(() => {
+  return K(() => {
     e();
   }), n;
 }
-function ee(l) {
+function se(l) {
   return l.customWidget ? "survey-customwidget" : l.isDefaultRendering && l.isDefaultRendering() || l.isPanel ? "survey-" + l.getTemplate() : l.getComponentName();
 }
-const Ve = /* @__PURE__ */ h({
+const Ve = /* @__PURE__ */ g({
   __name: "Page",
   props: {
     survey: {},
@@ -74,15 +74,15 @@ const Ve = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    B(() => n.page);
-    const e = T(() => n.page._showDescription), s = T(() => n.page.rows);
-    return A(() => {
+    const n = l, o = T(null);
+    L(() => n.page);
+    const e = R(() => n.page._showDescription), s = R(() => n.page.rows);
+    return E(() => {
       n.survey && n.survey.afterRenderPage(o.value);
-    }), Z(() => {
+    }), X(() => {
       n.survey.afterRenderPage(o.value);
     }), (i, a) => {
-      const d = v("survey-element-title"), p = v("survey-string"), g = v("survey-row");
+      const d = q("survey-element-title"), v = q("survey-string"), p = q("survey-row");
       return t(), u("div", {
         class: r(i.page.cssRoot),
         ref_key: "root",
@@ -96,14 +96,14 @@ const Ve = /* @__PURE__ */ h({
           key: 0,
           class: r(i.page.cssClasses.page.description)
         }, [
-          C(p, {
+          C(v, {
             locString: i.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
-        (t(!0), u(w, null, $(s.value, (f, y) => (t(), u(w, null, [
-          f.visible ? (t(), q(g, {
-            key: i.page.id + "_" + y,
-            row: f,
+        (t(!0), u(w, null, B(s.value, (b, f) => (t(), u(w, null, [
+          b.visible ? (t(), y(p, {
+            key: i.page.id + "_" + f,
+            row: b,
             survey: i.survey,
             css: i.css
           }, null, 8, ["row", "survey", "css"])) : m("", !0)
@@ -111,18 +111,18 @@ const Ve = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Oe = ["src", "width", "height", "alt"], Fe = ["src", "width", "height", "alt"], We = /* @__PURE__ */ h({
+}), Oe = ["src", "width", "height", "alt"], Fe = ["src", "width", "height", "alt"], We = /* @__PURE__ */ g({
   __name: "Header",
   props: {
     survey: {}
   },
   setup(l) {
-    const n = l, o = R(), e = F(() => n.survey.locLogo);
-    return A(() => {
+    const n = l, o = T(), e = z(() => n.survey.locLogo);
+    return E(() => {
       var s = o.value;
       s && n.survey && n.survey.afterRenderHeader(s);
     }), (s, i) => {
-      const a = v("survey-element-title"), d = v("survey-string");
+      const a = q("survey-element-title"), d = q("survey-string");
       return s.survey.renderedHasHeader ? (t(), u("div", {
         key: 0,
         class: r(s.survey.css.header),
@@ -135,7 +135,7 @@ const Ve = /* @__PURE__ */ h({
         }, [
           c("img", {
             class: r(s.survey.css.logoImage),
-            src: b(e),
+            src: k(e),
             width: s.survey.renderedLogoWidth,
             height: s.survey.renderedLogoHeight,
             alt: s.survey.locTitle.renderedHtml,
@@ -170,7 +170,7 @@ const Ve = /* @__PURE__ */ h({
         }, [
           c("img", {
             class: r(s.survey.css.logoImage),
-            src: b(e),
+            src: k(e),
             width: s.survey.renderedLogoWidth,
             height: s.survey.renderedLogoHeight,
             alt: s.survey.locTitle.renderedHtml,
@@ -187,7 +187,7 @@ const Ve = /* @__PURE__ */ h({
       ], 2)) : m("", !0);
     };
   }
-}), ze = /* @__PURE__ */ h({
+}), ze = /* @__PURE__ */ g({
   __name: "Row",
   props: {
     row: {},
@@ -195,47 +195,47 @@ const Ve = /* @__PURE__ */ h({
     survey: {}
   },
   setup(l) {
-    const n = l, o = T(
+    const n = l, o = R(
       () => n.row.visibleElements
-    ), e = R();
-    return B(() => n.row), A(() => {
+    ), e = T();
+    return L(() => n.row), E(() => {
       if (n.row && !n.row.isNeedRender) {
         const s = e.value;
         setTimeout(() => {
           n.row.startLazyRendering(s);
         }, 10);
       }
-    }), _(() => {
+    }), V(() => {
       const s = n.row;
       s && (s.isNeedRender = !n.row.isLazyRendering());
     }), (s, i) => {
-      const a = v("survey-element"), d = v("survey-panel");
+      const a = q("survey-element"), d = q("survey-panel");
       return t(), u("div", {
         class: r(s.row.getRowCss()),
         ref_key: "root",
         ref: e
       }, [
-        (t(!0), u(w, null, $(o.value, (p) => (t(), u("div", {
-          style: S(p.rootStyle)
+        (t(!0), u(w, null, B(o.value, (v) => (t(), u("div", {
+          style: S(v.rootStyle)
         }, [
-          p.isPanel ? m("", !0) : (t(), q(a, {
-            key: p.id,
-            element: p,
+          v.isPanel ? m("", !0) : (t(), y(a, {
+            key: v.id,
+            element: v,
             survey: s.survey,
             css: s.css,
             row: s.row,
-            style: S(p.getRootStyle())
+            style: S(v.getRootStyle())
           }, null, 8, ["element", "survey", "css", "row", "style"])),
-          p.isPanel ? (t(), q(d, {
-            key: p.id,
-            question: p,
+          v.isPanel ? (t(), y(d, {
+            key: v.id,
+            question: v,
             css: s.css
           }, null, 8, ["question", "css"])) : m("", !0)
         ], 4))), 256))
       ], 2);
     };
   }
-}), Ue = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ke = /* @__PURE__ */ h({
+}), Ue = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ke = /* @__PURE__ */ g({
   __name: "Element",
   props: {
     survey: {},
@@ -244,17 +244,17 @@ const Ve = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null), e = T(() => !n.element.isPanel && n.element.showErrorOnTop), s = T(() => !n.element.isPanel && n.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
-    return B(() => n.element), A(() => {
+    const n = l, o = T(null), e = R(() => !n.element.isPanel && n.element.showErrorOnTop), s = R(() => !n.element.isPanel && n.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
+    return L(() => n.element), E(() => {
       n.element.isPanel || n.element.afterRender(o.value);
-    }), (d, p) => {
-      const g = v("survey-errors"), f = v("survey-element-header"), y = v("survey-string"), k = v("survey-question-comment");
+    }), (d, v) => {
+      const p = q("survey-errors"), b = q("survey-element-header"), f = q("survey-string"), $ = q("survey-question-comment");
       return d.row.isNeedRender ? (t(), u("div", {
         key: 0,
         class: r(d.element.isPanel ? null : d.element.getRootCss()),
         ref_key: "root",
         ref: o,
-        onFocusin: p[0] || (p[0] = (P) => d.element.focusIn()),
+        onFocusin: v[0] || (v[0] = (M) => d.element.focusIn()),
         id: d.element.id,
         role: d.element.ariaRole,
         "aria-required": d.element.ariaRequired,
@@ -262,26 +262,26 @@ const Ve = /* @__PURE__ */ h({
         "aria-labelledby": d.element.ariaLabelledBy,
         "data-name": d.element.name
       }, [
-        !d.element.isPanel && d.element.showErrorsAboveQuestion ? (t(), q(g, {
+        !d.element.isPanel && d.element.showErrorsAboveQuestion ? (t(), y(p, {
           key: 0,
           element: d.element,
           location: "top"
         }, null, 8, ["element"])) : m("", !0),
-        !d.element.isPanel && d.element.hasTitleOnLeftTop ? (t(), q(f, {
+        !d.element.isPanel && d.element.hasTitleOnLeftTop ? (t(), y(b, {
           key: 1,
           element: d.element,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        L(c("div", {
+        P(c("div", {
           class: r(a(d.element) || void 0),
           role: "presentation"
         }, [
-          e.value ? (t(), q(g, {
+          e.value ? (t(), y(p, {
             key: 0,
             element: d.element,
             location: "top"
           }, null, 8, ["element"])) : m("", !0),
-          d.element.isPanel || !d.element.isCollapsed ? (t(), q(M(i(d.element)), {
+          d.element.isPanel || !d.element.isCollapsed ? (t(), y(N(i(d.element)), {
             key: 1,
             question: d.element
           }, null, 8, ["question"])) : m("", !0),
@@ -290,16 +290,16 @@ const Ve = /* @__PURE__ */ h({
             class: r(d.element.getCommentAreaCss())
           }, [
             c("div", null, [
-              C(y, {
+              C(f, {
                 locString: d.element.locCommentText
               }, null, 8, ["locString"])
             ]),
-            C(k, {
+            C($, {
               commentClass: d.css.comment,
               question: d.element
             }, null, 8, ["commentClass", "question"])
           ], 2)) : m("", !0),
-          s.value ? (t(), q(g, {
+          s.value ? (t(), y(p, {
             key: 3,
             element: d.element,
             location: "bottom"
@@ -308,31 +308,31 @@ const Ve = /* @__PURE__ */ h({
             key: 4,
             class: r(d.element.cssClasses.descriptionUnderInput)
           }, [
-            C(y, {
+            C(f, {
               locString: d.element.locDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0)
         ], 2), [
-          [H, d.element.isPanel || !d.element.isCollapsed]
+          [A, d.element.isPanel || !d.element.isCollapsed]
         ]),
-        !d.element.isPanel && d.element.hasTitleOnBottom ? (t(), q(f, {
+        !d.element.isPanel && d.element.hasTitleOnBottom ? (t(), y(b, {
           key: 2,
           element: d.element,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        !d.element.isPanel && d.element.showErrorsBelowQuestion ? (t(), q(g, {
+        !d.element.isPanel && d.element.showErrorsBelowQuestion ? (t(), y(p, {
           key: 3,
           element: d.element,
           location: "bottom"
         }, null, 8, ["element"])) : m("", !0)
-      ], 42, Ue)) : d.element.skeletonComponentName ? (t(), q(M(d.element.skeletonComponentName), {
+      ], 42, Ue)) : d.element.skeletonComponentName ? (t(), y(N(d.element.skeletonComponentName), {
         key: 1,
         element: d.element,
         css: d.css
       }, null, 8, ["element", "css"])) : m("", !0);
     };
   }
-}), je = ["id"], Qe = ["id"], Ze = /* @__PURE__ */ h({
+}), je = ["id"], Qe = ["id"], Ze = /* @__PURE__ */ g({
   __name: "Panel",
   props: {
     question: {},
@@ -340,18 +340,18 @@ const Ve = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const n = l, o = R(!1), e = R(null), s = T(() => n.question.rows), i = T(() => n.question.survey), a = T(() => o.value);
-    return B(() => n.question), A(() => {
+    const n = l, o = T(!1), e = T(null), s = R(() => n.question.rows), i = R(() => n.question.survey), a = R(() => o.value);
+    return L(() => n.question), E(() => {
       n.question.survey && n.question.survey.afterRenderPanel(n.question, e.value), o.value = n.question.isCollapsed;
       const d = n.question;
       d.stateChangedCallback = () => {
         o.value = n.question.isCollapsed;
       };
-    }), _(() => {
+    }), V(() => {
       const d = n.question;
       d.stateChangedCallback = null;
-    }), (d, p) => {
-      const g = v("survey-errors"), f = v("survey-element-header"), y = v("survey-row"), k = v("sv-action-bar");
+    }), (d, v) => {
+      const p = q("survey-errors"), b = q("survey-element-header"), f = q("survey-row"), $ = q("sv-action-bar");
       return d.question.isVisible ? (t(), u("div", {
         key: 0,
         class: r(d.question.getContainerCss()),
@@ -359,16 +359,16 @@ const Ve = /* @__PURE__ */ h({
         ref_key: "root",
         ref: e
       }, [
-        d.question.showErrorsAbovePanel ? (t(), q(g, {
+        d.question.showErrorsAbovePanel ? (t(), y(p, {
           key: 0,
           element: d.question
         }, null, 8, ["element"])) : m("", !0),
-        d.question.hasTitle || d.question.hasDescription ? (t(), q(f, {
+        d.question.hasTitle || d.question.hasDescription ? (t(), y(b, {
           key: 1,
           element: d.question,
           css: d.css
         }, null, 8, ["element", "css"])) : m("", !0),
-        d.question.showErrorsAbovePanel ? m("", !0) : (t(), q(g, {
+        d.question.showErrorsAbovePanel ? m("", !0) : (t(), y(p, {
           key: 2,
           element: d.question
         }, null, 8, ["element"])),
@@ -378,22 +378,22 @@ const Ve = /* @__PURE__ */ h({
           style: S({ paddingLeft: d.question.innerPaddingLeft }),
           class: r(d.question.cssClasses.panel.content)
         }, [
-          (t(!0), u(w, null, $(s.value, (P, D) => (t(), u(w, null, [
-            P.visible ? (t(), q(y, {
-              key: d.question.id + "_" + D,
-              row: P,
+          (t(!0), u(w, null, B(s.value, (M, h) => (t(), u(w, null, [
+            M.visible ? (t(), y(f, {
+              key: d.question.id + "_" + h,
+              row: M,
               survey: i.value,
               css: d.css
             }, null, 8, ["row", "survey", "css"])) : m("", !0)
           ], 64))), 256)),
-          C(k, {
+          C($, {
             model: d.question.getFooterToolbar()
           }, null, 8, ["model"])
         ], 14, Qe))
       ], 10, je)) : m("", !0);
     };
   }
-}), Ge = /* @__PURE__ */ h({
+}), Ge = /* @__PURE__ */ g({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -404,7 +404,7 @@ const Ve = /* @__PURE__ */ h({
       typeof n.element.clickTitleFunction == "function" && n.element.clickTitleFunction(e);
     };
     return (e, s) => {
-      const i = v("survey-element-title"), a = v("survey-string"), d = v("sv-action-bar");
+      const i = q("survey-element-title"), a = q("survey-string"), d = q("sv-action-bar");
       return t(), u("div", {
         class: r(e.element.cssHeader),
         onClick: o
@@ -413,7 +413,7 @@ const Ve = /* @__PURE__ */ h({
           element: e.element,
           css: e.css
         }, null, 8, ["element", "css"]),
-        e.element.hasDescriptionUnderTitle ? L((t(), u("div", {
+        e.element.hasDescriptionUnderTitle ? P((t(), u("div", {
           key: 0,
           class: r(e.element.cssDescription)
         }, [
@@ -421,42 +421,42 @@ const Ve = /* @__PURE__ */ h({
             locString: e.element.locDescription
           }, null, 8, ["locString"])
         ], 2)), [
-          [H, e.element.hasDescription]
+          [A, e.element.hasDescription]
         ]) : m("", !0),
-        e.element.additionalTitleToolbar ? (t(), q(d, {
+        e.element.additionalTitleToolbar ? (t(), y(d, {
           key: 1,
           model: e.element.additionalTitleToolbar
         }, null, 8, ["model"])) : m("", !0)
       ], 2);
     };
   }
-}), Xe = /* @__PURE__ */ h({
+}), Xe = /* @__PURE__ */ g({
   __name: "String",
   props: {
     locString: {}
   },
   setup(l) {
-    return (n, o) => (t(), q(M(n.locString.renderAs), {
+    return (n, o) => (t(), y(N(n.locString.renderAs), {
       locString: n.locString.renderAsData
     }, null, 8, ["locString"]));
   }
 }), Je = ["innerHTML"], Ye = {
   key: 1,
   class: "sv-string-viewer"
-}, xe = /* @__PURE__ */ h({
+}, xe = /* @__PURE__ */ g({
   __name: "StringViewer",
   props: {
     locString: {}
   },
   setup(l) {
-    const n = l, o = F(() => n.locString);
+    const n = l, o = z(() => n.locString);
     return (e, s) => e.locString.hasHtml ? (t(), u("span", {
       key: 0,
       class: "sv-string-viewer",
-      innerHTML: b(o)
-    }, null, 8, Je)) : (t(), u("span", Ye, I(b(o)), 1));
+      innerHTML: k(o)
+    }, null, 8, Je)) : (t(), u("span", Ye, I(k(o)), 1));
   }
-}), es = ["innerHTML"], ss = /* @__PURE__ */ h({
+}), es = ["innerHTML"], ss = /* @__PURE__ */ g({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -483,27 +483,27 @@ const Ve = /* @__PURE__ */ h({
       onClick: e
     }, I(s.locString.renderedHtml), 33));
   }
-}), ns = ["id"], os = /* @__PURE__ */ h({
+}), ns = ["id"], os = /* @__PURE__ */ g({
   __name: "Skeleton",
   props: {
     element: {}
   },
   setup(l) {
     const n = l;
-    return B(() => n.element), (o, e) => (t(), u("div", {
+    return L(() => n.element), (o, e) => (t(), u("div", {
       class: "sv-skeleton-element",
       id: o.element.id
     }, null, 8, ns));
   }
-}), ts = ["id"], is = ["value"], ls = /* @__PURE__ */ h({
+}), ts = ["id"], is = ["value"], ls = /* @__PURE__ */ g({
   __name: "Text",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-text-input");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-text-input");
       return e.question.isReadOnlyRenderDiv() ? (t(), u("div", {
         key: 0,
         ref_key: "root",
@@ -517,9 +517,9 @@ const Ve = /* @__PURE__ */ h({
         c("datalist", {
           id: e.question.dataListId
         }, [
-          (t(!0), u(w, null, $(e.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
+          (t(!0), u(w, null, B(e.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
         ], 8, ts)
-      ], 512)) : (t(), q(i, {
+      ], 512)) : (t(), y(i, {
         key: 2,
         question: e.question,
         ref_key: "root",
@@ -527,17 +527,17 @@ const Ve = /* @__PURE__ */ h({
       }, null, 8, ["question"]));
     };
   }
-}), 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__ */ h({
+}), 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__ */ g({
   __name: "TextInput",
   props: {
     question: {}
   },
   setup(l) {
     const n = l;
-    B(() => n.question);
-    const o = T(() => n.question.inputStyle);
+    L(() => n.question);
+    const o = R(() => n.question.inputStyle);
     return (e, s) => {
-      const i = v("sv-character-counter");
+      const i = q("sv-character-counter");
       return e.question.getMaxLength() ? (t(), u("div", as, [
         c("input", {
           disabled: e.question.isInputReadOnly,
@@ -602,15 +602,15 @@ const Ve = /* @__PURE__ */ h({
 }), ms = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], cs = /* @__PURE__ */ c("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), ps = /* @__PURE__ */ h({
+}, null, -1), ps = /* @__PURE__ */ g({
   __name: "Checkbox",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-checkbox-item"), a = v("survey-other-choice");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-checkbox-item"), a = q("survey-other-choice");
       return t(), u("fieldset", {
         class: r(e.question.getSelectBaseRootCss()),
         role: e.question.a11y_input_ariaRole,
@@ -621,65 +621,65 @@ const Ve = /* @__PURE__ */ h({
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
       }, [
         cs,
-        e.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, $(e.question.headItems, (d, p) => (t(), q(i, {
+        e.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, B(e.question.headItems, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
           item: d,
-          index: "" + p
+          index: "" + v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 1 }, $(e.question.bodyItems, (d, p) => (t(), q(i, {
+        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 1 }, B(e.question.bodyItems, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
           item: d,
-          index: p
+          index: v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
         e.question.blockedRow ? (t(), u("div", {
           key: 2,
           class: r(e.question.cssClasses.rootRow)
         }, [
-          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, $(e.question.dataChoices, (d, p) => (t(), q(i, {
+          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.dataChoices, (d, v) => (t(), y(i, {
             key: d.value,
             class: r(e.question.getItemClass(d)),
             question: e.question,
             item: d,
-            index: p
+            index: v
           }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0)
         ], 2)) : m("", !0),
         e.question.hasColumns ? (t(), u("div", {
           key: 3,
           class: r(e.question.cssClasses.rootMultiColumn)
         }, [
-          (t(!0), u(w, null, $(e.question.columns, (d, p) => (t(), u("div", {
-            key: p,
+          (t(!0), u(w, null, B(e.question.columns, (d, v) => (t(), u("div", {
+            key: v,
             class: r(e.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, $(d, (g, f) => (t(), q(i, {
-              key: g.value,
-              class: r(e.question.getItemClass(g)),
+            (t(!0), u(w, null, B(d, (p, b) => (t(), y(i, {
+              key: p.value,
+              class: r(e.question.getItemClass(p)),
               question: e.question,
-              item: g,
-              index: "" + p + f
+              item: p,
+              index: "" + v + b
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 128))
         ], 2)) : m("", !0),
-        e.question.hasFootItems ? (t(!0), u(w, { key: 4 }, $(e.question.footItems, (d, p) => (t(), q(i, {
+        e.question.hasFootItems ? (t(!0), u(w, { key: 4 }, B(e.question.footItems, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
           item: d,
-          index: "" + p
+          index: "" + v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        e.question.renderedValue && e.question.isOtherSelected ? (t(), q(a, {
+        e.question.renderedValue && e.question.isOtherSelected ? (t(), y(a, {
           key: 5,
           question: e.question
         }, null, 8, ["question"])) : m("", !0)
       ], 10, ms);
     };
   }
-}), vs = { role: "presentation" }, qs = ["name", "value", "id", "disabled"], ys = ["name", "value", "id", "disabled"], gs = ["xlink:href"], hs = /* @__PURE__ */ h({
+}), vs = { role: "presentation" }, qs = ["name", "value", "id", "disabled"], ys = ["name", "value", "id", "disabled"], gs = ["xlink:href"], hs = /* @__PURE__ */ g({
   __name: "CheckboxItem",
   props: {
     question: {},
@@ -688,7 +688,7 @@ const Ve = /* @__PURE__ */ h({
     hideLabel: { type: Boolean }
   },
   setup(l) {
-    const n = l, o = T({
+    const n = l, o = R({
       get() {
         return n.question.isAllSelected || "";
       },
@@ -697,13 +697,13 @@ const Ve = /* @__PURE__ */ h({
         s.isAllSelected = !!e;
       }
     });
-    return B(() => n.item), (e, s) => {
-      const i = v("survey-string");
+    return L(() => n.item), (e, s) => {
+      const i = q("survey-string");
       return t(), u("div", vs, [
         c("label", {
           class: r(e.question.getLabelClass(e.item))
         }, [
-          e.item == e.question.selectAllItem ? L((t(), u("input", {
+          e.item == e.question.selectAllItem ? P((t(), u("input", {
             key: 0,
             type: "checkbox",
             name: e.question.name,
@@ -713,9 +713,9 @@ const Ve = /* @__PURE__ */ h({
             disabled: !e.question.getItemEnabled(e.item),
             class: r(e.question.cssClasses.itemControl)
           }, null, 10, qs)), [
-            [W, o.value]
+            [U, o.value]
           ]) : m("", !0),
-          e.item != e.question.selectAllItem ? L((t(), u("input", {
+          e.item != e.question.selectAllItem ? P((t(), u("input", {
             key: 1,
             type: "checkbox",
             name: e.question.name,
@@ -725,7 +725,7 @@ const Ve = /* @__PURE__ */ h({
             disabled: !e.question.getItemEnabled(e.item),
             class: r(e.question.cssClasses.itemControl)
           }, null, 10, ys)), [
-            [W, e.question.renderedValue]
+            [U, e.question.renderedValue]
           ]) : m("", !0),
           e.question.cssClasses.materialDecorator ? (t(), u("span", {
             key: 2,
@@ -752,15 +752,15 @@ const Ve = /* @__PURE__ */ h({
       ]);
     };
   }
-}), Cs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], bs = { key: 5 }, ks = ["value"], fs = /* @__PURE__ */ h({
+}), Cs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], bs = { key: 5 }, ks = ["value"], fs = /* @__PURE__ */ g({
   __name: "Radiogroup",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-radiogroup-item"), a = v("survey-other-choice");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-radiogroup-item"), a = q("survey-other-choice");
       return t(), u("fieldset", {
         class: r(e.question.getSelectBaseRootCss()),
         ref_key: "root",
@@ -772,50 +772,50 @@ const Ve = /* @__PURE__ */ h({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
       }, [
-        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 0 }, $(e.question.visibleChoices, (d, p) => (t(), q(i, {
+        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.visibleChoices, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
           item: d,
-          index: p
+          index: v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
         e.question.blockedRow ? (t(), u("div", {
           key: 1,
           class: r(e.question.cssClasses.rootRow)
         }, [
-          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, $(e.question.dataChoices, (d, p) => (t(), q(i, {
+          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.dataChoices, (d, v) => (t(), y(i, {
             key: d.value,
             class: r(e.question.getItemClass(d)),
             question: e.question,
             item: d,
-            index: p
+            index: v
           }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0)
         ], 2)) : m("", !0),
         e.question.hasColumns ? (t(), u("div", {
           key: 2,
           class: r(e.question.cssClasses.rootMultiColumn)
         }, [
-          e.question.hasColumns ? (t(!0), u(w, { key: 0 }, $(e.question.columns, (d, p) => (t(), u("div", {
+          e.question.hasColumns ? (t(!0), u(w, { key: 0 }, B(e.question.columns, (d, v) => (t(), u("div", {
             class: r(e.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, $(d, (g, f) => (t(), q(i, {
-              key: g.value,
-              class: r(e.question.getItemClass(g)),
+            (t(!0), u(w, null, B(d, (p, b) => (t(), y(i, {
+              key: p.value,
+              class: r(e.question.getItemClass(p)),
               question: e.question,
-              item: g,
-              index: "" + p + f
+              item: p,
+              index: "" + v + b
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 256)) : m("", !0)
         ], 2)) : m("", !0),
-        e.question.hasFootItems ? (t(!0), u(w, { key: 3 }, $(e.question.footItems, (d, p) => (t(), q(i, {
+        e.question.hasFootItems ? (t(!0), u(w, { key: 3 }, B(e.question.footItems, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
           item: d,
-          index: "" + p
+          index: "" + v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        e.question.renderedValue && e.question.isOtherSelected ? (t(), q(a, {
+        e.question.renderedValue && e.question.isOtherSelected ? (t(), y(a, {
           key: 4,
           question: e.question
         }, null, 8, ["question"])) : m("", !0),
@@ -832,7 +832,7 @@ const Ve = /* @__PURE__ */ h({
       ], 10, Cs);
     };
   }
-}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ h({
+}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ g({
   __name: "RadiogroupItem",
   props: {
     question: {},
@@ -842,14 +842,14 @@ const Ve = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l, o = (s) => n.question.getLabelClass(s), e = (s) => n.question.getControlLabelClass(s);
-    return B(() => n.item), (s, i) => {
-      const a = v("survey-string");
+    return L(() => n.item), (s, i) => {
+      const a = q("survey-string");
       return t(), u("div", Is, [
         c("label", {
           onMousedown: i[1] || (i[1] = (d) => s.question.onMouseDown()),
           class: r(o(s.item))
         }, [
-          L(c("input", {
+          P(c("input", {
             type: "radio",
             name: s.question.questionName,
             value: s.item.value,
@@ -859,7 +859,7 @@ const Ve = /* @__PURE__ */ h({
             disabled: !s.question.getItemEnabled(s.item),
             class: r(s.question.cssClasses.itemControl)
           }, null, 10, ws), [
-            [J, s.question.renderedValue]
+            [Y, s.question.renderedValue]
           ]),
           s.question.cssClasses.materialDecorator ? (t(), u("span", {
             key: 0,
@@ -886,15 +886,15 @@ const Ve = /* @__PURE__ */ h({
       ]);
     };
   }
-}), Ts = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ h({
+}), Ts = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ g({
   __name: "Signaturepad",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-svg-icon");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-svg-icon");
       return t(), u("div", {
         class: r(e.question.cssClasses.root),
         ref_key: "root",
@@ -904,10 +904,10 @@ const Ve = /* @__PURE__ */ h({
           width: e.question.signatureWidth + "px"
         })
       }, [
-        L(c("div", {
+        P(c("div", {
           class: r(e.question.cssClasses.placeholder)
         }, I(e.question.placeHolderText), 3), [
-          [H, e.question.needShowPlaceholder()]
+          [A, e.question.needShowPlaceholder()]
         ]),
         c("div", null, [
           e.question.backgroundImage ? (t(), u("img", {
@@ -935,7 +935,7 @@ const Ve = /* @__PURE__ */ h({
             })
           }, [
             e.question.cssClasses.clearButtonIconId ? m("", !0) : (t(), u("span", Bs, "\u2716")),
-            e.question.cssClasses.clearButtonIconId ? (t(), q(i, {
+            e.question.cssClasses.clearButtonIconId ? (t(), y(i, {
               key: 1,
               iconName: e.question.cssClasses.clearButtonIconId,
               size: "auto"
@@ -945,42 +945,42 @@ const Ve = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), Ds = ["innerHTML"], Ps = /* @__PURE__ */ h({
+}), Ds = ["innerHTML"], Ps = /* @__PURE__ */ g({
   __name: "Html",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
-    const e = F(() => n.question.locHtml);
+    const n = l, o = T(null);
+    H(n, o);
+    const e = z(() => n.question.locHtml);
     return (s, i) => (t(), u("div", {
       ref_key: "root",
       ref: o,
       class: r(s.question.renderCssRoot),
-      innerHTML: b(e)
+      innerHTML: k(e)
     }, null, 10, Ds));
   }
-}), Ms = ["src", "alt", "width", "height"], Ns = ["src", "width", "height"], Hs = ["src", "width", "height"], As = /* @__PURE__ */ h({
+}), Ms = ["src", "alt", "width", "height"], Ns = ["src", "width", "height"], Hs = ["src", "width", "height"], As = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
-    const e = F(() => n.question.locImageLink);
+    const n = l, o = T(null);
+    H(n, o);
+    const e = z(() => n.question.locImageLink);
     return (s, i) => {
-      const a = v("sv-svg-icon");
+      const a = q("sv-svg-icon");
       return t(), u("div", {
         class: r(s.question.cssClasses.root),
         ref_key: "root",
         ref: o
       }, [
-        s.question.renderedMode === "image" ? L((t(), u("img", {
+        s.question.renderedMode === "image" ? P((t(), u("img", {
           key: 0,
           class: r(s.question.getImageCss()),
-          src: b(e),
+          src: k(e),
           alt: s.question.altText || s.question.title,
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
@@ -996,13 +996,13 @@ const Ve = /* @__PURE__ */ h({
             s.question.onErrorHandler();
           })
         }, null, 46, Ms)), [
-          [H, b(e) && !s.question.contentNotLoaded]
+          [A, k(e) && !s.question.contentNotLoaded]
         ]) : m("", !0),
-        s.question.renderedMode === "video" ? L((t(), u("video", {
+        s.question.renderedMode === "video" ? P((t(), u("video", {
           key: 1,
           controls: "",
           class: r(s.question.getImageCss()),
-          src: b(e),
+          src: k(e),
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
           style: S({
@@ -1017,12 +1017,12 @@ const Ve = /* @__PURE__ */ h({
             s.question.onErrorHandler();
           })
         }, null, 46, Ns)), [
-          [H, b(e) && !s.question.contentNotLoaded]
+          [A, k(e) && !s.question.contentNotLoaded]
         ]) : m("", !0),
         s.question.renderedMode === "youtube" ? (t(), u("iframe", {
           key: 2,
           class: r(s.question.getImageCss()),
-          src: b(e),
+          src: k(e),
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
           style: S({
@@ -1031,7 +1031,7 @@ const Ve = /* @__PURE__ */ h({
             height: s.question.renderedStyleHeight
           })
         }, null, 14, Hs)) : m("", !0),
-        !b(e) || s.question.contentNotLoaded ? (t(), u("div", {
+        !k(e) || s.question.contentNotLoaded ? (t(), u("div", {
           key: 3,
           class: r(s.question.cssClasses.noImage)
         }, [
@@ -1043,28 +1043,28 @@ const Ve = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Es = /* @__PURE__ */ h({
+}), Es = /* @__PURE__ */ g({
   __name: "Expression",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => (t(), u("div", {
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => (t(), u("div", {
       class: r(e.question.cssClasses.text),
       ref_key: "root",
       ref: o
     }, I(e.question.formatedValue), 3));
   }
-}), _s = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Vs = ["id", "multiple", "placeholder"], Os = /* @__PURE__ */ h({
+}), _s = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Vs = ["id", "multiple", "placeholder"], Os = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-file-choose-btn"), a = v("sv-action-bar"), d = v("sv-file-clean-btn"), p = v("sv-loading-indicator"), g = v("sv-file-video"), f = v("sv-file-preview");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-file-choose-btn"), a = q("sv-action-bar"), d = q("sv-file-clean-btn"), v = q("sv-loading-indicator"), p = q("sv-file-video"), b = q("sv-file-preview");
       return t(), u("div", {
         class: r(e.question.fileRootCss)
       }, [
@@ -1074,7 +1074,7 @@ const Ve = /* @__PURE__ */ h({
           tabindex: "-1",
           type: "file",
           id: e.question.inputId,
-          onChange: s[0] || (s[0] = (...y) => e.question.doChange && e.question.doChange(...y)),
+          onChange: s[0] || (s[0] = (...f) => e.question.doChange && e.question.doChange(...f)),
           "aria-required": e.question.ariaRequired,
           "aria-label": e.question.ariaLabel,
           "aria-invalid": e.question.ariaInvalid,
@@ -1096,10 +1096,10 @@ const Ve = /* @__PURE__ */ h({
         }, null, 10, Vs)) : m("", !0),
         c("div", {
           class: r(e.question.cssClasses.dragArea),
-          onDrop: s[1] || (s[1] = (...y) => e.question.onDrop && e.question.onDrop(...y)),
-          onDragover: s[2] || (s[2] = (...y) => e.question.onDragOver && e.question.onDragOver(...y)),
-          onDragleave: s[3] || (s[3] = (...y) => e.question.onDragLeave && e.question.onDragLeave(...y)),
-          onDragenter: s[4] || (s[4] = (...y) => e.question.onDragEnter && e.question.onDragEnter(...y))
+          onDrop: s[1] || (s[1] = (...f) => e.question.onDrop && e.question.onDrop(...f)),
+          onDragover: s[2] || (s[2] = (...f) => e.question.onDragOver && e.question.onDragOver(...f)),
+          onDragleave: s[3] || (s[3] = (...f) => e.question.onDragLeave && e.question.onDragLeave(...f)),
+          onDragenter: s[4] || (s[4] = (...f) => e.question.onDragEnter && e.question.onDragEnter(...f))
         }, [
           e.question.showFileDecorator ? (t(), u("div", {
             key: 0,
@@ -1111,11 +1111,11 @@ const Ve = /* @__PURE__ */ h({
             c("div", {
               class: r(e.question.cssClasses.wrapper)
             }, [
-              e.question.showChooseButton ? (t(), q(i, {
+              e.question.showChooseButton ? (t(), y(i, {
                 key: 0,
                 data: { question: e.question }
               }, null, 8, ["data"])) : m("", !0),
-              e.question.actionsContainerVisible ? (t(), q(a, {
+              e.question.actionsContainerVisible ? (t(), y(a, {
                 key: 1,
                 model: e.question.actionsContainer
               }, null, 8, ["model"])) : m("", !0),
@@ -1125,7 +1125,7 @@ const Ve = /* @__PURE__ */ h({
               }, I(e.question.noFileChosenCaption), 3)) : m("", !0)
             ], 2)
           ], 2)) : m("", !0),
-          e.question.showRemoveButton ? (t(), q(d, {
+          e.question.showRemoveButton ? (t(), y(d, {
             key: 1,
             question: e.question,
             css: e.question.showRemoveButton
@@ -1134,22 +1134,22 @@ const Ve = /* @__PURE__ */ h({
             key: 2,
             class: r(e.question.cssClasses.loadingIndicator)
           }, [
-            C(p)
+            C(v)
           ], 2)) : m("", !0),
-          e.question.isPlayingVideo ? (t(), q(g, {
+          e.question.isPlayingVideo ? (t(), y(p, {
             key: 3,
             question: e.question
           }, null, 8, ["question"])) : m("", !0),
-          e.question.allowShowPreview ? (t(), q(f, {
+          e.question.allowShowPreview ? (t(), y(b, {
             key: 4,
             question: e.question
           }, null, 8, ["question"])) : m("", !0),
-          e.question.showRemoveButtonBottom ? (t(), q(d, {
+          e.question.showRemoveButtonBottom ? (t(), y(d, {
             key: 5,
             question: e.question,
             css: e.question.showRemoveButtonBottom
           }, null, 8, ["question", "css"])) : m("", !0),
-          e.question.fileNavigatorVisible ? (t(), q(a, {
+          e.question.fileNavigatorVisible ? (t(), y(a, {
             key: 6,
             model: e.question.fileNavigator
           }, null, 8, ["model"])) : m("", !0)
@@ -1157,15 +1157,15 @@ const Ve = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Fs = ["aria-label"], Ws = /* @__PURE__ */ h({
+}), Fs = ["aria-label"], Ws = /* @__PURE__ */ g({
   __name: "Imagepicker",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-imagepicker-item");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-imagepicker-item");
       return t(), u("fieldset", {
         class: r(e.question.getSelectBaseRootCss()),
         ref_key: "root",
@@ -1175,26 +1175,26 @@ const Ve = /* @__PURE__ */ h({
           role: "radio",
           "aria-label": e.question.locTitle.renderedHtml
         }, null, 8, Fs),
-        e.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, $(e.question.visibleChoices, (a) => (t(), q(i, {
+        e.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, B(e.question.visibleChoices, (a) => (t(), y(i, {
           key: a.value,
           question: e.question,
           item: a
         }, null, 8, ["question", "item"]))), 128)),
-        e.question.hasColumns ? (t(!0), u(w, { key: 1 }, $(e.question.columns, (a, d) => (t(), u("div", {
+        e.question.hasColumns ? (t(!0), u(w, { key: 1 }, B(e.question.columns, (a, d) => (t(), u("div", {
           class: r(e.question.getColumnClass()),
           key: d,
           role: "presentation"
         }, [
-          (t(!0), u(w, null, $(a, (p) => (t(), q(i, {
-            key: p.value,
+          (t(!0), u(w, null, B(a, (v) => (t(), y(i, {
+            key: v.value,
             question: e.question,
-            item: p
+            item: v
           }, null, 8, ["question", "item"]))), 128))
         ], 2))), 128)) : m("", !0)
       ], 2);
     };
   }
-}), zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Us = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Ks = ["src", "width", "height", "alt"], js = ["src", "width", "height"], Qs = /* @__PURE__ */ h({
+}), zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Us = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Ks = ["src", "width", "height", "alt"], js = ["src", "width", "height"], Qs = /* @__PURE__ */ g({
   __name: "ImagepickerItem",
   props: {
     question: {},
@@ -1202,23 +1202,23 @@ const Ve = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l, o = (s) => n.question.getItemClass(s);
-    B(() => n.item);
-    const e = F(() => n.item.locImageLink);
+    L(() => n.item);
+    const e = z(() => n.item.locImageLink);
     return (s, i) => {
-      const a = v("sv-svg-icon"), d = v("survey-string");
+      const a = q("sv-svg-icon"), d = q("survey-string");
       return t(), u("div", {
         class: r(o(s.item))
       }, [
         c("label", {
           class: r(s.question.cssClasses.label)
         }, [
-          s.question.multiSelect ? L((t(), u("input", {
+          s.question.multiSelect ? P((t(), u("input", {
             key: 0,
             type: "checkbox",
             name: s.question.questionName,
             value: s.item.value,
             id: s.question.getItemId(s.item),
-            "onUpdate:modelValue": i[0] || (i[0] = (p) => s.question.value = p),
+            "onUpdate:modelValue": i[0] || (i[0] = (v) => s.question.value = v),
             disabled: !s.question.getItemEnabled(s.item),
             "aria-required": s.question.ariaRequired,
             "aria-label": s.question.ariaLabel,
@@ -1226,14 +1226,14 @@ const Ve = /* @__PURE__ */ h({
             "aria-describedby": s.question.ariaDescribedBy,
             class: r(s.question.cssClasses.itemControl)
           }, null, 10, zs)), [
-            [W, s.question.value]
-          ]) : L((t(), u("input", {
+            [U, s.question.value]
+          ]) : P((t(), u("input", {
             key: 1,
             type: "radio",
             name: s.question.questionName,
             value: s.item.value,
             id: s.question.getItemId(s.item),
-            "onUpdate:modelValue": i[1] || (i[1] = (p) => s.question.value = p),
+            "onUpdate:modelValue": i[1] || (i[1] = (v) => s.question.value = v),
             disabled: !s.question.getItemEnabled(s.item),
             "aria-required": s.question.ariaRequired,
             "aria-label": s.question.ariaLabel,
@@ -1241,7 +1241,7 @@ const Ve = /* @__PURE__ */ h({
             "aria-describedby": s.question.ariaDescribedBy,
             class: r(s.question.cssClasses.itemControl)
           }, null, 10, Us)), [
-            [J, s.question.value]
+            [Y, s.question.value]
           ]),
           c("div", {
             class: r(s.question.cssClasses.itemDecorator)
@@ -1253,44 +1253,44 @@ const Ve = /* @__PURE__ */ h({
                 key: 0,
                 class: r(s.question.cssClasses.checkedItemDecorator)
               }, [
-                s.question.cssClasses.checkedItemSvgIconId ? (t(), q(a, {
+                s.question.cssClasses.checkedItemSvgIconId ? (t(), y(a, {
                   key: 0,
                   class: r(s.question.cssClasses.checkedItemSvgIcon),
                   size: "auto",
                   iconName: s.question.cssClasses.checkedItemSvgIconId
                 }, null, 8, ["class", "iconName"])) : m("", !0)
               ], 2)) : m("", !0),
-              b(e) && !s.item.contentNotLoaded && s.question.contentMode === "image" ? (t(), u("img", {
+              k(e) && !s.item.contentNotLoaded && s.question.contentMode === "image" ? (t(), u("img", {
                 key: 1,
                 class: r(s.question.cssClasses.image),
-                src: b(e),
+                src: k(e),
                 width: s.question.renderedImageWidth,
                 height: s.question.renderedImageHeight,
                 style: S({ objectFit: s.question.imageFit }),
                 alt: s.item.locText.renderedHtml,
-                onLoad: i[2] || (i[2] = (p) => {
-                  s.question.onContentLoaded(s.item, p);
+                onLoad: i[2] || (i[2] = (v) => {
+                  s.question.onContentLoaded(s.item, v);
                 }),
-                onError: i[3] || (i[3] = (p) => {
+                onError: i[3] || (i[3] = (v) => {
                   s.item.onErrorHandler();
                 })
               }, null, 46, Ks)) : m("", !0),
-              b(e) && !s.item.contentNotLoaded && s.question.contentMode === "video" ? (t(), u("video", {
+              k(e) && !s.item.contentNotLoaded && s.question.contentMode === "video" ? (t(), u("video", {
                 key: 2,
                 controls: "",
                 class: r(s.question.cssClasses.image),
-                src: b(e),
+                src: k(e),
                 width: s.question.renderedImageWidth,
                 height: s.question.renderedImageHeight,
                 style: S({ objectFit: s.question.imageFit }),
-                onLoadedmetadata: i[4] || (i[4] = (p) => {
-                  s.question.onContentLoaded(s.item, p);
+                onLoadedmetadata: i[4] || (i[4] = (v) => {
+                  s.question.onContentLoaded(s.item, v);
                 }),
-                onError: i[5] || (i[5] = (p) => {
+                onError: i[5] || (i[5] = (v) => {
                   s.item.onErrorHandler();
                 })
               }, null, 46, js)) : m("", !0),
-              !b(e) || s.item.contentNotLoaded ? (t(), u("div", {
+              !k(e) || s.item.contentNotLoaded ? (t(), u("div", {
                 key: 3,
                 class: r(s.question.cssClasses.itemNoImage),
                 style: S({
@@ -1319,21 +1319,21 @@ const Ve = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Zs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Gs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Xs = /* @__PURE__ */ h({
+}), Zs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Gs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Xs = /* @__PURE__ */ g({
   __name: "Comment",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = (s) => {
       const i = n.question;
       i.value = s.target.value;
     };
     return (s, i) => {
-      const a = v("sv-character-counter");
+      const a = q("sv-character-counter");
       return !s.question.isReadOnlyRenderDiv() && !s.question.getMaxLength() ? (t(), u("textarea", {
         key: 0,
         ref_key: "root",
@@ -1400,22 +1400,22 @@ const Ve = /* @__PURE__ */ h({
       }, I(s.question.value), 513));
     };
   }
-}), Js = /* @__PURE__ */ h({
+}), Js = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-dropdown"), a = v("survey-other-choice");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-dropdown"), a = q("survey-other-choice");
       return t(), u("div", {
         class: r(e.question.renderCssRoot),
         ref_key: "root",
         ref: o
       }, [
         C(i, { question: e.question }, null, 8, ["question"]),
-        e.question.isOtherSelected ? (t(), q(a, {
+        e.question.isOtherSelected ? (t(), y(a, {
           key: 0,
           question: e.question
         }, null, 8, ["question"])) : m("", !0)
@@ -1426,24 +1426,24 @@ const Ve = /* @__PURE__ */ h({
   key: 0,
   value: ""
 }, en = ["id"];
-G.Instance.registerRenderer(
+J.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const sn = /* @__PURE__ */ h({
+const sn = /* @__PURE__ */ g({
   __name: "DropdownSelect",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = (a) => {
       n.question.onClick(a);
     }, s = (a) => {
       n.question.onKeyUp(a);
-    }, i = T({
+    }, i = R({
       get() {
         var a;
         return (a = n.question.value) != null ? a : "";
@@ -1454,7 +1454,7 @@ const sn = /* @__PURE__ */ h({
       }
     });
     return (a, d) => {
-      const p = v("sv-dropdown-option-item"), g = v("sv-svg-icon"), f = v("survey-other-choice");
+      const v = q("sv-dropdown-option-item"), p = q("sv-svg-icon"), b = q("survey-other-choice");
       return t(), u("div", {
         class: r(a.question.renderCssRoot)
       }, [
@@ -1466,10 +1466,10 @@ const sn = /* @__PURE__ */ h({
             disabled: "",
             id: a.question.inputId,
             class: r(a.question.getControlClass())
-          }, I(a.question.readOnlyText), 11, en)) : L((t(), u("select", {
+          }, I(a.question.readOnlyText), 11, en)) : P((t(), u("select", {
             key: 0,
             id: a.question.inputId,
-            "onUpdate:modelValue": d[0] || (d[0] = (y) => i.value = y),
+            "onUpdate:modelValue": d[0] || (d[0] = (f) => i.value = f),
             onClick: e,
             onKeyup: s,
             autocomplete: a.question.autocomplete,
@@ -1481,9 +1481,9 @@ const sn = /* @__PURE__ */ h({
             required: a.question.isRequired
           }, [
             a.question.allowClear ? (t(), u("option", xs, I(a.question.placeholder), 1)) : m("", !0),
-            (t(!0), u(w, null, $(a.question.visibleChoices, (y) => (t(), q(p, {
-              item: y,
-              key: y.id
+            (t(!0), u(w, null, B(a.question.visibleChoices, (f) => (t(), y(v, {
+              item: f,
+              key: f.id
             }, null, 8, ["item"]))), 128))
           ], 42, Ys)), [
             [ve, i.value]
@@ -1492,299 +1492,309 @@ const sn = /* @__PURE__ */ h({
             key: 2,
             class: r(a.question.cssClasses.chevronButton)
           }, [
-            C(g, {
+            C(p, {
               class: r(a.question.cssClasses.chevronButtonSvg),
               iconName: a.question.cssClasses.chevronButtonIconId,
               size: "auto"
             }, null, 8, ["class", "iconName"])
           ], 2)) : m("", !0)
         ], 2),
-        a.question.isOtherSelected ? (t(), q(f, {
+        a.question.isOtherSelected ? (t(), y(b, {
           key: 0,
           question: a.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), nn = ["value", "disabled"], on = /* @__PURE__ */ h({
+}), nn = ["value", "disabled"], on = /* @__PURE__ */ g({
   __name: "OptionItem",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, o = F(() => n.item.locText);
-    return B(() => n.item), (e, s) => (t(), u("option", {
+    const n = l, o = z(() => n.item.locText);
+    return L(() => n.item), (e, s) => (t(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, I(b(o)), 9, nn));
+    }, I(k(o)), 9, nn));
   }
-}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ h({
+}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null), e = T(() => {
-      const y = n.question;
-      return y.dropdownListModel || (y.dropdownListModel = new Ie(y)), n.question.dropdownListModel;
-    }), s = (y) => {
-      var k;
-      (k = e.value) == null || k.onClick(y);
-    }, i = (y) => {
-      var k;
-      (k = e.value) == null || k.onClear(y);
-    }, a = (y) => {
-      var k;
-      (k = e.value) == null || k.keyHandler(y);
-    }, d = () => {
+    const n = l, o = T(null), e = R(() => {
+      const h = n.question;
+      return h.dropdownListModel || (h.dropdownListModel = new Ie(h)), n.question.dropdownListModel;
+    }), s = (h) => {
+      var D;
+      (D = e.value) == null || D.onClick(h);
+    }, i = (h) => {
+      var D;
+      (D = e.value) == null || D.chevronPointerDown(h);
+    }, a = (h) => {
+      var D;
+      (D = e.value) == null || D.onClear(h);
+    }, d = (h) => {
+      var D;
+      (D = e.value) == null || D.keyHandler(h);
+    }, v = () => {
       if (o.value) {
-        const y = o.value, k = e.value.inputStringRendered;
-        we.isTwoValueEquals(k, y.value, !1, !0, !1) || (y.value = e.value.inputStringRendered);
+        const h = o.value, D = e.value.inputStringRendered;
+        we.isTwoValueEquals(D, h.value, !1, !0, !1) || (h.value = e.value.inputStringRendered);
       }
-    }, p = (y) => {
-      var k;
-      (k = e.value) == null || k.onBlur(y), d();
-    }, g = (y) => {
-      var k;
-      (k = e.value) == null || k.onFocus(y);
-    }, f = (y) => {
-      e.value.inputStringRendered = y.target.value;
-    };
-    return B(() => e.value), Z(d), A(d), (y, k) => {
-      const P = v("survey-string"), D = v("sv-svg-icon"), E = v("sv-popup");
+    }, p = (h) => {
+      var D;
+      (D = e.value) == null || D.onBlur(h), v();
+    }, b = (h) => {
+      var D;
+      (D = e.value) == null || D.onFocus(h);
+    }, f = (h) => {
+      e.value.inputStringRendered = h.target.value;
+    }, $ = R(
+      () => n.question.showSelectedItemLocText
+    ), M = R(() => n.question.selectedItemLocText);
+    return L(() => e.value), X(v), E(v), (h, D) => {
+      const _ = q("survey-string"), O = q("sv-svg-icon"), Q = q("sv-popup");
       return t(), u("div", {
-        class: r(y.question.cssClasses.selectWrapper),
+        class: r(h.question.cssClasses.selectWrapper),
         onClick: s
       }, [
-        y.question.isReadOnly ? m("", !0) : (t(), u("div", {
+        h.question.isReadOnly ? m("", !0) : (t(), u("div", {
           key: 0,
-          id: y.question.inputId,
-          disabled: y.question.isInputReadOnly ? !0 : null,
+          id: h.question.inputId,
+          disabled: h.question.isInputReadOnly ? !0 : null,
           tabindex: e.value.inputReadOnly ? void 0 : 0,
-          onKeydown: a,
+          onKeydown: d,
           onBlur: p,
-          class: r(y.question.getControlClass()),
-          role: y.question.ariaRole,
-          "aria-required": y.question.ariaRequired,
-          "aria-label": y.question.ariaLabel,
-          "aria-invalid": y.question.ariaInvalid,
-          "aria-describedby": y.question.ariaDescribedBy,
-          "aria-expanded": y.question.ariaExpanded === null ? void 0 : y.question.ariaExpanded === "true",
+          class: r(h.question.getControlClass()),
+          role: h.question.ariaRole,
+          "aria-required": h.question.ariaRequired,
+          "aria-label": h.question.ariaLabel,
+          "aria-invalid": h.question.ariaInvalid,
+          "aria-describedby": h.question.ariaDescribedBy,
+          "aria-expanded": h.question.ariaExpanded === null ? void 0 : h.question.ariaExpanded === "true",
           "aria-controls": e.value.listElementId,
           "aria-activedescendant": e.value.ariaActivedescendant,
-          required: y.question.isRequired ? !0 : null
+          required: h.question.isRequired ? !0 : null
         }, [
           e.value.showHintPrefix ? (t(), u("div", {
             key: 0,
-            class: r(y.question.cssClasses.hintPrefix)
+            class: r(h.question.cssClasses.hintPrefix)
           }, [
             c("span", null, I(e.value.hintStringPrefix), 1)
           ], 2)) : m("", !0),
           c("div", {
-            class: r(y.question.cssClasses.controlValue)
+            class: r(h.question.cssClasses.controlValue)
           }, [
-            y.question.showSelectedItemLocText ? (t(), q(P, {
+            $.value ? (t(), y(_, {
               key: 0,
-              locString: y.question.selectedItemLocText
+              locString: M.value
             }, null, 8, ["locString"])) : m("", !0),
             e.value.showHintString ? (t(), u("div", {
               key: 1,
-              class: r(y.question.cssClasses.hintSuffix)
+              class: r(h.question.cssClasses.hintSuffix)
             }, [
               c("span", ln, I(e.value.inputStringRendered), 1),
               c("span", null, I(e.value.hintStringSuffix), 1)
             ], 2)) : m("", !0),
-            y.question.showInputFieldComponent ? (t(), q(M(y.question.inputFieldComponentName), {
+            h.question.showInputFieldComponent ? (t(), y(N(h.question.inputFieldComponentName), {
               key: 2,
               item: e.value.getSelectedAction(),
-              question: y.question
+              question: h.question
             }, null, 8, ["item", "question"])) : m("", !0),
             c("input", {
               type: "text",
               ref_key: "inputElement",
               ref: o,
-              class: r(y.question.cssClasses.filterStringInput),
-              disabled: y.question.isInputReadOnly,
+              class: r(h.question.cssClasses.filterStringInput),
+              disabled: h.question.isInputReadOnly,
               autocomplete: "off",
               inputmode: e.value.inputMode,
-              role: e.value.filterStringEnabled ? y.question.ariaRole : void 0,
-              id: y.question.getInputId(),
+              role: e.value.filterStringEnabled ? h.question.ariaRole : void 0,
+              id: h.question.getInputId(),
               tabindex: e.value.inputReadOnly ? void 0 : -1,
               readonly: e.value.searchEnabled ? void 0 : !0,
-              "aria-label": y.question.placeholder,
-              "aria-expanded": y.question.ariaExpanded === null ? void 0 : y.question.ariaExpanded === "true",
+              "aria-label": h.question.placeholder,
+              "aria-expanded": h.question.ariaExpanded === null ? void 0 : h.question.ariaExpanded === "true",
               "aria-controls": e.value.listElementId,
               "aria-activedescendant": e.value.ariaActivedescendant,
               placeholder: e.value.placeholderRendered,
               onInput: f,
               onBlur: p,
-              onFocus: g
+              onFocus: b
             }, null, 42, rn)
           ], 2),
-          y.question.allowClear && y.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
+          h.question.allowClear && h.question.cssClasses.cleanButtonIconId ? P((t(), u("div", {
             key: 1,
-            class: r(y.question.cssClasses.cleanButton),
-            onClick: i
+            class: r(h.question.cssClasses.cleanButton),
+            onClick: a
           }, [
-            C(D, {
-              class: r(y.question.cssClasses.cleanButtonSvg),
-              iconName: y.question.cssClasses.cleanButtonIconId,
-              title: y.question.clearCaption,
+            C(O, {
+              class: r(h.question.cssClasses.cleanButtonSvg),
+              iconName: h.question.cssClasses.cleanButtonIconId,
+              title: h.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [H, !y.question.isEmpty()]
+            [A, !h.question.isEmpty()]
           ]) : m("", !0)
         ], 42, tn)),
-        y.question.isReadOnly ? (t(), u("div", {
+        h.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
-          id: y.question.inputId,
-          class: r(y.question.getControlClass())
+          id: h.question.inputId,
+          class: r(h.question.getControlClass())
         }, [
-          y.question.selectedItemLocText ? (t(), q(P, {
+          h.question.selectedItemLocText ? (t(), y(_, {
             key: 0,
-            locString: y.question.selectedItemLocText
+            locString: h.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
-          c("div", null, I(y.question.readOnlyText), 1)
-        ], 10, an)) : (t(), q(E, {
+          c("div", null, I(h.question.readOnlyText), 1)
+        ], 10, an)) : (t(), y(Q, {
           key: 1,
-          model: y.question.dropdownListModel.popupModel
+          model: h.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
-        y.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
+        h.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
           key: 3,
-          class: r(y.question.cssClasses.chevronButton)
+          class: r(h.question.cssClasses.chevronButton),
+          onPointerdown: i
         }, [
-          C(D, {
-            class: r(y.question.cssClasses.chevronButtonSvg),
-            iconName: y.question.cssClasses.chevronButtonIconId,
+          C(O, {
+            class: r(h.question.cssClasses.chevronButtonSvg),
+            iconName: h.question.cssClasses.chevronButtonIconId,
             size: "auto"
           }, null, 8, ["class", "iconName"])
-        ], 2)) : m("", !0)
+        ], 34)) : m("", !0)
       ], 2);
     };
   }
-}), dn = /* @__PURE__ */ h({
+}), dn = /* @__PURE__ */ g({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-tagbox"), a = v("survey-other-choice");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-tagbox"), a = q("survey-other-choice");
       return t(), u("div", {
         class: r(e.question.renderCssRoot),
         ref_key: "root",
         ref: o
       }, [
         C(i, { question: e.question }, null, 8, ["question"]),
-        e.question.isOtherSelected ? (t(), q(a, {
+        e.question.isOtherSelected ? (t(), y(a, {
           key: 0,
           question: e.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), mn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], cn = ["id"], pn = /* @__PURE__ */ h({
+}), mn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], cn = ["id"], pn = /* @__PURE__ */ g({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = T(() => {
-      const d = n.question;
-      return d.dropdownListModel || (d.dropdownListModel = new Se(d)), n.question.dropdownListModel;
-    }), e = (d) => {
-      var p;
-      (p = o.value) == null || p.onClick(d);
-    }, s = (d) => {
-      var p;
-      (p = o.value) == null || p.onClear(d);
-    }, i = (d) => {
-      var p;
-      (p = o.value) == null || p.keyHandler(d);
-    }, a = (d) => {
-      var p;
-      (p = o.value) == null || p.onBlur(d);
-    };
-    return B(() => o.value), (d, p) => {
-      const g = v("sv-tagbox-item"), f = v("sv-tagbox-filter"), y = v("sv-svg-icon"), k = v("sv-popup");
+    const n = l, o = R(() => {
+      const p = n.question;
+      return p.dropdownListModel || (p.dropdownListModel = new Se(p)), n.question.dropdownListModel;
+    }), e = (p) => {
+      var b;
+      (b = o.value) == null || b.onClick(p);
+    }, s = (p) => {
+      var b;
+      (b = o.value) == null || b.chevronPointerDown(p);
+    }, i = (p) => {
+      var b;
+      (b = o.value) == null || b.onClear(p);
+    }, a = (p) => {
+      var b;
+      (b = o.value) == null || b.keyHandler(p);
+    }, d = (p) => {
+      var b;
+      (b = o.value) == null || b.onBlur(p);
+    }, v = R(() => n.question.selectedChoices);
+    return L(() => o.value), (p, b) => {
+      const f = q("sv-tagbox-item"), $ = q("sv-tagbox-filter"), M = q("sv-svg-icon"), h = q("sv-popup");
       return t(), u("div", {
-        class: r(d.question.cssClasses.selectWrapper),
+        class: r(p.question.cssClasses.selectWrapper),
         onClick: e
       }, [
-        d.question.isReadOnly ? m("", !0) : (t(), u("div", {
+        p.question.isReadOnly ? m("", !0) : (t(), u("div", {
           key: 0,
-          id: d.question.inputId,
+          id: p.question.inputId,
           tabindex: o.value.inputReadOnly ? void 0 : 0,
-          disabled: d.question.isInputReadOnly ? !0 : null,
-          onKeydown: i,
-          onBlur: a,
-          class: r(d.question.getControlClass()),
-          role: d.question.ariaRole,
-          "aria-required": d.question.ariaRequired,
-          "aria-label": d.question.ariaLabel,
-          "aria-invalid": d.question.ariaInvalid,
-          "aria-describedby": d.question.ariaDescribedBy,
-          "aria-expanded": d.question.ariaExpanded === null ? void 0 : d.question.ariaExpanded === "true",
+          disabled: p.question.isInputReadOnly ? !0 : null,
+          onKeydown: a,
+          onBlur: d,
+          class: r(p.question.getControlClass()),
+          role: p.question.ariaRole,
+          "aria-required": p.question.ariaRequired,
+          "aria-label": p.question.ariaLabel,
+          "aria-invalid": p.question.ariaInvalid,
+          "aria-describedby": p.question.ariaDescribedBy,
+          "aria-expanded": p.question.ariaExpanded === null ? void 0 : p.question.ariaExpanded === "true",
           "aria-controls": o.value.listElementId,
           "aria-activedescendant": o.value.ariaActivedescendant,
-          required: d.question.isRequired ? !0 : null
+          required: p.question.isRequired ? !0 : null
         }, [
           c("div", {
-            class: r(d.question.cssClasses.controlValue)
+            class: r(p.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, $(d.question.selectedChoices, (P, D) => (t(), q(g, {
-              item: P,
-              question: d.question,
-              key: "item" + D
+            (t(!0), u(w, null, B(v.value, (D, _) => (t(), y(f, {
+              item: D,
+              question: p.question,
+              key: "item" + _
             }, null, 8, ["item", "question"]))), 128)),
-            C(f, {
+            C($, {
               model: o.value,
-              question: d.question
+              question: p.question
             }, null, 8, ["model", "question"])
           ], 2),
-          d.question.allowClear && d.question.cssClasses.cleanButtonIconId ? L((t(), u("div", {
+          p.question.allowClear && p.question.cssClasses.cleanButtonIconId ? P((t(), u("div", {
             key: 0,
-            class: r(d.question.cssClasses.cleanButton),
-            onClick: s
+            class: r(p.question.cssClasses.cleanButton),
+            onClick: i
           }, [
-            C(y, {
-              class: r(d.question.cssClasses.cleanButtonSvg),
-              iconName: d.question.cssClasses.cleanButtonIconId,
-              title: d.question.clearCaption,
+            C(M, {
+              class: r(p.question.cssClasses.cleanButtonSvg),
+              iconName: p.question.cssClasses.cleanButtonIconId,
+              title: p.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [H, !d.question.isEmpty()]
+            [A, !p.question.isEmpty()]
           ]) : m("", !0)
         ], 42, mn)),
-        d.question.isReadOnly ? (t(), u("div", {
+        p.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
-          id: d.question.inputId,
-          class: r(d.question.getControlClass())
+          id: p.question.inputId,
+          class: r(p.question.getControlClass())
         }, [
-          c("div", null, I(d.question.readOnlyText), 1)
-        ], 10, cn)) : (t(), q(k, {
+          c("div", null, I(p.question.readOnlyText), 1)
+        ], 10, cn)) : (t(), y(h, {
           key: 1,
           model: o.value.popupModel
         }, null, 8, ["model"])),
-        d.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
+        p.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
           key: 3,
-          class: r(d.question.cssClasses.chevronButton)
+          class: r(p.question.cssClasses.chevronButton),
+          onPointerdown: s
         }, [
-          C(y, {
-            class: r(d.question.cssClasses.chevronButtonSvg),
-            iconName: d.question.cssClasses.chevronButtonIconId,
+          C(M, {
+            class: r(p.question.cssClasses.chevronButtonSvg),
+            iconName: p.question.cssClasses.chevronButtonIconId,
             size: "auto"
           }, null, 8, ["class", "iconName"])
-        ], 2)) : m("", !0)
+        ], 34)) : m("", !0)
       ], 2);
     };
   }
-}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ h({
+}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1801,8 +1811,8 @@ const sn = /* @__PURE__ */ h({
     }, i = (a) => {
       n.model.onFocus(a);
     };
-    return B(() => n.model), (a, d) => {
-      const p = v("survey-string");
+    return L(() => n.model), (a, d) => {
+      const v = q("survey-string");
       return t(), u("div", {
         class: r(a.question.cssClasses.hint)
       }, [
@@ -1815,7 +1825,7 @@ const sn = /* @__PURE__ */ h({
         c("div", {
           class: r(a.question.cssClasses.hintSuffixWrapper)
         }, [
-          a.question.showSelectedItemLocText ? (t(), q(p, {
+          a.question.showSelectedItemLocText ? (t(), y(v, {
             key: 0,
             locString: a.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
@@ -1826,10 +1836,10 @@ const sn = /* @__PURE__ */ h({
             c("span", vn, I(a.model.inputStringRendered), 1),
             c("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : m("", !0),
-          L(c("input", {
+          P(c("input", {
             type: "text",
             autocomplete: "off",
-            "onUpdate:modelValue": d[0] || (d[0] = (g) => a.model.inputStringRendered = g),
+            "onUpdate:modelValue": d[0] || (d[0] = (p) => a.model.inputStringRendered = p),
             class: r(a.question.cssClasses.filterStringInput),
             placeholder: a.model.filterStringPlaceholder,
             disabled: a.question.isInputReadOnly,
@@ -1853,7 +1863,7 @@ const sn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), gn = { class: "sv-tagbox__item-text" }, hn = /* @__PURE__ */ h({
+}), gn = { class: "sv-tagbox__item-text" }, hn = /* @__PURE__ */ g({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1863,8 +1873,8 @@ const sn = /* @__PURE__ */ h({
     const n = l, o = (e) => {
       n.question.dropdownListModel.deselectItem(n.item.value), e.stopPropagation();
     };
-    return B(() => n.item), (e, s) => {
-      const i = v("survey-string"), a = v("sv-svg-icon");
+    return L(() => n.item), (e, s) => {
+      const i = q("survey-string"), a = q("sv-svg-icon");
       return t(), u("div", {
         class: "sv-tagbox__item",
         key: e.item.key
@@ -1887,28 +1897,28 @@ const sn = /* @__PURE__ */ h({
       ]);
     };
   }
-}), Cn = /* @__PURE__ */ h({
+}), Cn = /* @__PURE__ */ g({
   __name: "Ranking",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = (s) => n.question.getNumberByIndex(s);
     return (s, i) => {
-      const a = v("survey-ranking-item");
+      const a = q("survey-ranking-item");
       return t(), u("div", {
         class: r(s.question.rootClass),
         ref_key: "root",
         ref: o
       }, [
-        s.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, $(s.question.rankingChoices, (d, p) => (t(), q(a, {
-          key: d.value + "-" + p + "-item",
+        s.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, B(s.question.rankingChoices, (d, v) => (t(), y(a, {
+          key: d.value + "-" + v + "-item",
           class: r(s.question.getItemClass(d)),
           text: d.locText,
-          index: p,
-          indexText: e(p),
+          index: v,
+          indexText: e(v),
           cssClasses: s.question.cssClasses,
           question: s.question,
           item: d
@@ -1918,12 +1928,12 @@ const sn = /* @__PURE__ */ h({
           class: r(s.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (t(!0), u(w, null, $(s.question.unRankingChoices, (d, p) => (t(), q(a, {
-            key: d.value + "-" + p + "-item",
+          (t(!0), u(w, null, B(s.question.unRankingChoices, (d, v) => (t(), y(a, {
+            key: d.value + "-" + v + "-item",
             class: r(s.question.getItemClass(d)),
             text: d.locText,
-            index: p,
-            indexText: e(p),
+            index: v,
+            indexText: e(v),
             cssClasses: s.question.cssClasses,
             question: s.question,
             item: d,
@@ -1943,12 +1953,12 @@ const sn = /* @__PURE__ */ h({
           class: r(s.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (t(!0), u(w, null, $(s.question.rankingChoices, (d, p) => (t(), q(a, {
-            key: d.value + "-" + p + "-item",
+          (t(!0), u(w, null, B(s.question.rankingChoices, (d, v) => (t(), y(a, {
+            key: d.value + "-" + v + "-item",
             class: r(s.question.getItemClass(d)),
             text: d.locText,
-            index: p,
-            indexText: e(p),
+            index: v,
+            indexText: e(v),
             cssClasses: s.question.cssClasses,
             question: s.question,
             item: d
@@ -1969,7 +1979,7 @@ const sn = /* @__PURE__ */ h({
 ], wn = /* @__PURE__ */ c("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), Sn = /* @__PURE__ */ c("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Rn = [
   wn,
   Sn
-], Tn = /* @__PURE__ */ h({
+], Tn = /* @__PURE__ */ g({
   __name: "RankingItem",
   props: {
     index: {},
@@ -1983,8 +1993,8 @@ const sn = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => n.item), (o, e) => {
-      const s = v("survey-string");
+    return L(() => n.item), (o, e) => {
+      const s = q("survey-string");
       return t(), u("div", {
         tabindex: o.question.getItemTabIndex(o.item),
         "data-sv-drop-target-ranking-item": o.index,
@@ -2042,17 +2052,17 @@ const sn = /* @__PURE__ */ h({
 }), $n = { role: "radiogroup" }, Bn = /* @__PURE__ */ c("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Ln = /* @__PURE__ */ h({
+}, null, -1), Ln = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = (s) => n.question.getInputId(s);
     return (s, i) => {
-      const a = v("survey-string");
+      const a = q("survey-string");
       return t(), u("div", {
         class: r(s.question.ratingRootCss),
         ref_key: "root",
@@ -2068,10 +2078,10 @@ const sn = /* @__PURE__ */ h({
               locString: s.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (t(!0), u(w, null, $(s.question.renderedRateItems, (d, p) => (t(), q(M(s.question.itemComponentName), {
-            key: e(p),
+          (t(!0), u(w, null, B(s.question.renderedRateItems, (d, v) => (t(), y(N(s.question.itemComponentName), {
+            key: e(v),
             item: d,
-            index: p,
+            index: v,
             question: s.question
           }, null, 8, ["item", "index", "question"]))), 128)),
           s.question.hasMaxLabel ? (t(), u("span", {
@@ -2086,7 +2096,7 @@ const sn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Dn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Pn = /* @__PURE__ */ h({
+}), Dn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Pn = /* @__PURE__ */ g({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2095,8 +2105,8 @@ const sn = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => n.item), (o, e) => {
-      const s = v("survey-string");
+    return L(() => n.item), (o, e) => {
+      const s = q("survey-string");
       return t(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (i) => o.question.onMouseDown()),
@@ -2125,7 +2135,7 @@ const sn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ h({
+}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ g({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2134,8 +2144,8 @@ const sn = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => n.item), (o, e) => {
-      const s = v("sv-svg-icon");
+    return L(() => n.item), (o, e) => {
+      const s = q("sv-svg-icon");
       return t(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (i) => o.question.onMouseDown()),
@@ -2165,7 +2175,7 @@ const sn = /* @__PURE__ */ h({
       ], 38);
     };
   }
-}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
+}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ g({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2174,8 +2184,8 @@ const sn = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => n.item), (o, e) => {
-      const s = v("sv-svg-icon");
+    return L(() => n.item), (o, e) => {
+      const s = q("sv-svg-icon");
       return t(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (i) => o.question.onMouseDown()),
@@ -2212,20 +2222,20 @@ const sn = /* @__PURE__ */ h({
     };
   }
 });
-G.Instance.registerRenderer(
+J.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const En = /* @__PURE__ */ h({
+const En = /* @__PURE__ */ g({
   __name: "RatingDropdown",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-dropdown");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-dropdown");
       return t(), u("div", {
         class: r(e.question.cssClasses.rootDropdown),
         ref_key: "root",
@@ -2235,34 +2245,34 @@ const En = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), _n = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Vn = /* @__PURE__ */ h({
+}), _n = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Vn = /* @__PURE__ */ g({
   __name: "BooleanSwitch",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = (i, a) => {
       n.question.onLabelClick(i, a);
     }, s = (i) => {
       n.question.onSwitchClickModel(i);
     };
     return (i, a) => {
-      var p;
-      const d = v("survey-string");
+      var v;
+      const d = q("survey-string");
       return t(), u("div", {
         class: r(i.question.cssClasses.root),
-        onKeydown: a[4] || (a[4] = (g) => i.question.onKeyDownCore(g))
+        onKeydown: a[4] || (a[4] = (p) => i.question.onKeyDownCore(p))
       }, [
         c("label", {
           class: r(i.question.getItemCss())
         }, [
-          L(c("input", {
+          P(c("input", {
             type: "checkbox",
             name: i.question.name,
-            value: (p = i.question.booleanValue) != null ? p : "",
-            "onUpdate:modelValue": a[0] || (a[0] = (g) => i.question.booleanValue = g),
+            value: (v = i.question.booleanValue) != null ? v : "",
+            "onUpdate:modelValue": a[0] || (a[0] = (p) => i.question.booleanValue = p),
             class: r(i.question.cssClasses.control),
             id: i.question.inputId,
             ".indeterminate": i.question.isIndeterminate,
@@ -2272,11 +2282,11 @@ const En = /* @__PURE__ */ h({
             "aria-invalid": i.question.ariaInvalid,
             "aria-describedby": i.question.ariaDescribedBy
           }, null, 10, _n), [
-            [W, i.question.booleanValue]
+            [U, i.question.booleanValue]
           ]),
           c("div", {
             class: r(i.question.cssClasses.sliderGhost),
-            onClick: a[1] || (a[1] = (g) => e(g, !1))
+            onClick: a[1] || (a[1] = (p) => e(p, !1))
           }, [
             c("span", {
               class: r(i.question.getLabelCss(!1))
@@ -2288,7 +2298,7 @@ const En = /* @__PURE__ */ h({
           ], 2),
           c("div", {
             class: r(i.question.cssClasses.switch),
-            onClick: a[2] || (a[2] = (g) => s(g))
+            onClick: a[2] || (a[2] = (p) => s(p))
           }, [
             c("span", {
               class: r(i.question.cssClasses.slider)
@@ -2305,7 +2315,7 @@ const En = /* @__PURE__ */ h({
           ], 2),
           c("div", {
             class: r(i.question.cssClasses.sliderGhost),
-            onClick: a[3] || (a[3] = (g) => e(g, !0))
+            onClick: a[3] || (a[3] = (p) => e(p, !0))
           }, [
             c("span", {
               class: r(i.question.getLabelCss(!0))
@@ -2320,20 +2330,20 @@ const En = /* @__PURE__ */ h({
     };
   }
 });
-G.Instance.registerRenderer(
+J.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const On = /* @__PURE__ */ h({
+const On = /* @__PURE__ */ g({
   __name: "BooleanRadio",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("sv-boolean-radio-item");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("sv-boolean-radio-item");
       return t(), u("div", {
         class: r(e.question.cssClasses.rootRadio),
         ref_key: "root",
@@ -2343,13 +2353,13 @@ const On = /* @__PURE__ */ h({
           role: "presentation",
           class: r(e.question.cssClasses.radioFieldset)
         }, [
-          (t(), q(i, {
+          (t(), y(i, {
             key: !1,
             question: e.question,
             locText: e.question.locLabelFalse,
             value: !1
           }, null, 8, ["question", "locText"])),
-          (t(), q(i, {
+          (t(), y(i, {
             key: !0,
             question: e.question,
             locText: e.question.locLabelTrue,
@@ -2359,7 +2369,7 @@ const On = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Fn = ["name", "value", "checked", "aria-describedby", "disabled"], Wn = ["xlink:href"], zn = /* @__PURE__ */ h({
+}), Fn = ["name", "value", "checked", "aria-describedby", "disabled"], Wn = ["xlink:href"], zn = /* @__PURE__ */ g({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2372,7 +2382,7 @@ const On = /* @__PURE__ */ h({
       s.booleanValue = e.target.value == "true";
     };
     return (e, s) => {
-      const i = v("survey-string");
+      const i = q("survey-string");
       return t(), u("div", {
         role: "presentation",
         class: r(e.question.getRadioItemClass(e.question.cssClasses, e.value))
@@ -2413,22 +2423,22 @@ const On = /* @__PURE__ */ h({
     };
   }
 }), Un = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Kn = ["xlink:href"], jn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), Qn = ["id"];
-G.Instance.registerRenderer(
+J.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const Zn = /* @__PURE__ */ h({
+const Zn = /* @__PURE__ */ g({
   __name: "BooleanCheckbox",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      var p;
-      const i = v("survey-element-title-content"), a = v("sv-title-actions"), d = v("survey-string");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      var v;
+      const i = q("survey-element-title-content"), a = q("sv-title-actions"), d = q("survey-string");
       return t(), u("div", {
         class: r(e.question.cssClasses.rootCheckbox),
         ref_key: "root",
@@ -2440,11 +2450,11 @@ const Zn = /* @__PURE__ */ h({
           c("label", {
             class: r(e.question.cssClasses.checkboxLabel)
           }, [
-            L(c("input", {
+            P(c("input", {
               type: "checkbox",
               name: e.question.name,
-              value: (p = e.question.booleanValue) != null ? p : "",
-              "onUpdate:modelValue": s[0] || (s[0] = (g) => e.question.booleanValue = g),
+              value: (v = e.question.booleanValue) != null ? v : "",
+              "onUpdate:modelValue": s[0] || (s[0] = (p) => e.question.booleanValue = p),
               class: r(e.question.cssClasses.controlCheckbox),
               id: e.question.inputId,
               ".indeterminate": e.question.isIndeterminate,
@@ -2454,7 +2464,7 @@ const Zn = /* @__PURE__ */ h({
               "aria-invalid": e.question.ariaInvalid,
               "aria-describedby": e.question.ariaDescribedBy
             }, null, 10, Un), [
-              [W, e.question.booleanValue]
+              [U, e.question.booleanValue]
             ]),
             c("span", {
               class: r(e.question.cssClasses.checkboxMaterialDecorator)
@@ -2474,12 +2484,12 @@ const Zn = /* @__PURE__ */ h({
               id: e.question.labelRenderedAriaID,
               class: r(e.question.cssClasses.checkboxControlLabel)
             }, [
-              e.question.hasTitleActions ? m("", !0) : (t(), q(i, {
+              e.question.hasTitleActions ? m("", !0) : (t(), y(i, {
                 key: 0,
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])),
-              e.question.hasTitleActions ? (t(), q(a, {
+              e.question.hasTitleActions ? (t(), y(a, {
                 key: 1,
                 element: e.question,
                 css: e.css
@@ -2498,35 +2508,35 @@ const Zn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Gn = /* @__PURE__ */ h({
+}), Gn = /* @__PURE__ */ g({
   __name: "Multipletext",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-multipletext-item");
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-multipletext-item");
       return t(), u("table", {
         class: r(e.question.getQuestionRootCss()),
         ref_key: "root",
         ref: o
       }, [
         c("tbody", null, [
-          (t(!0), u(w, null, $(e.question.getRows(), (a, d) => (t(), u(w, {
+          (t(!0), u(w, null, B(e.question.getRows(), (a, d) => (t(), u(w, {
             key: e.question.inputId + "rowkey" + d
           }, [
             a.isVisible ? (t(), u("tr", {
               key: 0,
               class: r(e.question.cssClasses.row)
             }, [
-              (t(!0), u(w, null, $(a.cells, (p) => (t(), u("td", {
-                key: "item" + p.item.editor.id,
-                class: r(p.className)
+              (t(!0), u(w, null, B(a.cells, (v) => (t(), u("td", {
+                key: "item" + v.item.editor.id,
+                class: r(v.className)
               }, [
                 C(i, {
                   question: e.question,
-                  cell: p
+                  cell: v
                 }, null, 8, ["question", "cell"])
               ], 2))), 128))
             ], 2)) : m("", !0)
@@ -2535,19 +2545,19 @@ const Zn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Xn = { key: 1 }, Jn = /* @__PURE__ */ h({
+}), Xn = { key: 1 }, Jn = /* @__PURE__ */ g({
   __name: "MultipletextItem",
   props: {
     question: {},
     cell: {}
   },
   setup(l) {
-    const n = l, o = (s) => ee(s);
-    B(() => n.cell.item.editor);
-    const e = T(() => n.cell.item);
+    const n = l, o = (s) => se(s);
+    L(() => n.cell.item.editor);
+    const e = R(() => n.cell.item);
     return (s, i) => {
-      const a = v("survey-string"), d = v("survey-errors");
-      return s.cell.isErrorsCell ? (t(), q(d, {
+      const a = q("survey-string"), d = q("survey-errors");
+      return s.cell.isErrorsCell ? (t(), y(d, {
         key: 1,
         element: e.value.editor
       }, null, 8, ["element"])) : (t(), u("label", {
@@ -2574,23 +2584,23 @@ const Zn = /* @__PURE__ */ h({
         (t(), u("div", {
           key: e.value.editor.id,
           class: r(s.question.getItemCss()),
-          onFocusin: i[0] || (i[0] = (p) => e.value.focusIn())
+          onFocusin: i[0] || (i[0] = (v) => e.value.focusIn())
         }, [
-          (t(), q(M(o(e.value.editor)), {
+          (t(), y(N(o(e.value.editor)), {
             question: e.value.editor
           }, null, 8, ["question"]))
         ], 34))
       ], 2));
     };
   }
-}), Yn = ["aria-label"], xn = { key: 0 }, eo = { key: 0 }, so = ["onClick"], no = ["data-responsive-title", "onClick"], oo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], to = ["xlink:href"], io = /* @__PURE__ */ h({
+}), Yn = ["aria-label"], xn = { key: 0 }, eo = { key: 0 }, so = ["onClick"], no = ["data-responsive-title", "onClick"], oo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], to = ["xlink:href"], io = /* @__PURE__ */ g({
   __name: "Matrix",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null), e = O();
-    N(
+    const n = l, o = T(null), e = W();
+    H(
       n,
       o,
       (i) => {
@@ -2607,7 +2617,7 @@ const Zn = /* @__PURE__ */ h({
       n.question.isInputReadOnly || (i.value = a.value);
     };
     return (i, a) => {
-      const d = v("survey-string");
+      const d = q("survey-string");
       return t(), u("div", {
         class: r(i.question.cssClasses.tableWrapper),
         ref_key: "root",
@@ -2623,8 +2633,8 @@ const Zn = /* @__PURE__ */ h({
             i.question.showHeader ? (t(), u("thead", xn, [
               c("tr", null, [
                 i.question.hasRows ? (t(), u("td", eo)) : m("", !0),
-                (t(!0), u(w, null, $(i.question.visibleColumns, (p, g) => (t(), u("th", {
-                  key: g,
+                (t(!0), u(w, null, B(i.question.visibleColumns, (v, p) => (t(), u("th", {
+                  key: p,
                   class: r(i.question.cssClasses.headerCell),
                   style: S({
                     minWidth: i.question.columnMinWidth,
@@ -2632,17 +2642,17 @@ const Zn = /* @__PURE__ */ h({
                   })
                 }, [
                   C(d, {
-                    locString: p.locText
+                    locString: v.locText
                   }, null, 8, ["locString"])
                 ], 6))), 128))
               ])
             ])) : m("", !0),
             c("tbody", null, [
-              (t(!0), u(w, null, $(e.value, (p, g) => (t(), u("tr", {
-                key: "row_" + p.name + "_" + g,
-                class: r(p.rowClasses || void 0)
+              (t(!0), u(w, null, B(e.value, (v, p) => (t(), u("tr", {
+                key: "row_" + v.name + "_" + p,
+                class: r(v.rowClasses || void 0)
               }, [
-                L(c("td", {
+                P(c("td", {
                   class: r(i.question.cssClasses.rowTextCell),
                   style: S({
                     minWidth: i.question.rowTitleWidth,
@@ -2650,44 +2660,44 @@ const Zn = /* @__PURE__ */ h({
                   })
                 }, [
                   C(d, {
-                    locString: p.locText
+                    locString: v.locText
                   }, null, 8, ["locString"])
                 ], 6), [
-                  [H, i.question.hasRows]
+                  [A, i.question.hasRows]
                 ]),
-                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, $(i.question.visibleColumns, (f, y) => (t(), u("td", {
-                  key: y,
-                  class: r(i.question.getItemClass(p, f)),
-                  onClick: (k) => s(p, f)
+                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, B(i.question.visibleColumns, (b, f) => (t(), u("td", {
+                  key: f,
+                  class: r(i.question.getItemClass(v, b)),
+                  onClick: ($) => s(v, b)
                 }, [
                   C(d, {
-                    locString: i.question.getCellDisplayLocText(p.name, f)
+                    locString: i.question.getCellDisplayLocText(v.name, b)
                   }, null, 8, ["locString"])
                 ], 10, so))), 128)) : m("", !0),
-                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, $(i.question.visibleColumns, (f, y) => (t(), u("td", {
-                  key: y,
-                  "data-responsive-title": f.locText.renderedHtml,
+                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, B(i.question.visibleColumns, (b, f) => (t(), u("td", {
+                  key: f,
+                  "data-responsive-title": b.locText.renderedHtml,
                   class: r(i.question.cssClasses.cell),
-                  onClick: (k) => s(p, f)
+                  onClick: ($) => s(v, b)
                 }, [
                   c("label", {
-                    onMousedown: a[0] || (a[0] = (k) => i.question.onMouseDown()),
-                    class: r(i.question.getItemClass(p, f))
+                    onMousedown: a[0] || (a[0] = ($) => i.question.onMouseDown()),
+                    class: r(i.question.getItemClass(v, b))
                   }, [
-                    L(c("input", {
+                    P(c("input", {
                       type: "radio",
                       class: r(i.question.cssClasses.itemValue),
-                      name: p.fullName,
-                      "onUpdate:modelValue": (k) => p.value = k,
-                      value: f.value,
+                      name: v.fullName,
+                      "onUpdate:modelValue": ($) => v.value = $,
+                      value: b.value,
                       disabled: i.question.isInputReadOnly,
-                      id: i.question.inputId + "_" + p.name + "_" + y,
+                      id: i.question.inputId + "_" + v.name + "_" + f,
                       "aria-required": i.question.ariaRequired,
-                      "aria-label": f.locText.renderedHtml,
+                      "aria-label": b.locText.renderedHtml,
                       "aria-invalid": i.question.ariaInvalid,
                       "aria-describedby": i.question.ariaDescribedBy
                     }, null, 10, oo), [
-                      [J, p.value]
+                      [Y, v.value]
                     ]),
                     c("span", {
                       class: r(i.question.cssClasses.materialDecorator)
@@ -2701,14 +2711,14 @@ const Zn = /* @__PURE__ */ h({
                         }, null, 8, to)
                       ], 2)) : m("", !0)
                     ], 2),
-                    L(c("span", {
+                    P(c("span", {
                       class: r(i.question.cssClasses.cellResponsiveTitle)
                     }, [
                       C(d, {
-                        locString: f.locText
+                        locString: b.locText
                       }, null, 8, ["locString"])
                     ], 2), [
-                      [H, i.question.isMobile]
+                      [A, i.question.isMobile]
                     ])
                   ], 34)
                 ], 10, no))), 128))
@@ -2719,33 +2729,33 @@ const Zn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), lo = /* @__PURE__ */ h({
+}), lo = /* @__PURE__ */ g({
   __name: "MatrixDropdown",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    return N(n, o), (e, s) => {
-      const i = v("survey-matrixtable");
-      return t(), q(i, {
+    const n = l, o = T(null);
+    return H(n, o), (e, s) => {
+      const i = q("survey-matrixtable");
+      return t(), y(i, {
         question: e.question,
         ref_key: "root",
         ref: o
       }, null, 8, ["question"]);
     };
   }
-}), ro = { key: 0 }, ao = ["data-sv-drop-target-matrix-row"], uo = { key: 1 }, mo = /* @__PURE__ */ h({
+}), ro = { key: 0 }, ao = ["data-sv-drop-target-matrix-row"], uo = { key: 1 }, mo = /* @__PURE__ */ g({
   __name: "MatrixTable",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = T(() => n.question.renderedTable);
-    return B(
+    const n = l, o = R(() => n.question.renderedTable);
+    return L(
       () => o.value,
       (e) => {
-        const s = Y();
+        const s = x();
         e.renderedRowsChangedCallback = () => {
           var i;
           (i = s == null ? void 0 : s.proxy) == null || i.$forceUpdate();
@@ -2756,7 +2766,7 @@ const Zn = /* @__PURE__ */ h({
         };
       }
     ), (e, s) => {
-      const i = v("survey-string"), a = v("survey-matrixheaderrequired"), d = v("survey-matrixcell");
+      const i = q("survey-string"), a = q("survey-matrixheaderrequired"), d = q("survey-matrixcell");
       return t(), u("div", {
         style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: r(e.question.cssClasses.tableWrapper)
@@ -2766,52 +2776,52 @@ const Zn = /* @__PURE__ */ h({
         }, [
           o.value.showHeader ? (t(), u("thead", ro, [
             c("tr", null, [
-              (t(!0), u(w, null, $(o.value.headerRow.cells, (p) => (t(), u(w, null, [
-                p.hasTitle ? (t(), u("th", {
-                  class: r(p.className),
-                  key: "header_" + p.id,
-                  style: S({ minWidth: p.minWidth, width: p.width })
+              (t(!0), u(w, null, B(o.value.headerRow.cells, (v) => (t(), u(w, null, [
+                v.hasTitle ? (t(), u("th", {
+                  class: r(v.className),
+                  key: "header_" + v.id,
+                  style: S({ minWidth: v.minWidth, width: v.width })
                 }, [
                   C(i, {
-                    locString: p.locTitle
+                    locString: v.locTitle
                   }, null, 8, ["locString"]),
-                  p.column ? (t(), q(a, {
+                  v.column ? (t(), y(a, {
                     key: 0,
-                    column: p.column,
+                    column: v.column,
                     question: e.question
                   }, null, 8, ["column", "question"])) : m("", !0)
                 ], 6)) : m("", !0),
-                p.hasTitle ? m("", !0) : (t(), u("td", {
-                  class: r(p.className),
-                  key: "header_" + p.id,
-                  style: S({ minWidth: p.minWidth, width: p.width })
+                v.hasTitle ? m("", !0) : (t(), u("td", {
+                  class: r(v.className),
+                  key: "header_" + v.id,
+                  style: S({ minWidth: v.minWidth, width: v.width })
                 }, null, 6))
               ], 64))), 256))
             ])
           ])) : m("", !0),
           c("tbody", null, [
-            (t(!0), u(w, null, $(o.value.rows, (p) => (t(), u(w, {
-              key: e.question.inputId + "_" + p.id
+            (t(!0), u(w, null, B(o.value.rows, (v) => (t(), u(w, {
+              key: e.question.inputId + "_" + v.id
             }, [
-              p.visible ? (t(), u("tr", {
+              v.visible ? (t(), u("tr", {
                 key: 0,
-                "data-sv-drop-target-matrix-row": p.row && p.row.id,
-                class: r(p.className)
+                "data-sv-drop-target-matrix-row": v.row && v.row.id,
+                class: r(v.className)
               }, [
-                (t(!0), u(w, null, $(p.cells, (g, f) => (t(), q(d, {
-                  cell: g,
+                (t(!0), u(w, null, B(v.cells, (p, b) => (t(), y(d, {
+                  cell: p,
                   question: e.question,
-                  key: p.id + "_" + f
+                  key: v.id + "_" + b
                 }, null, 8, ["cell", "question"]))), 128))
               ], 10, ao)) : m("", !0)
             ], 64))), 128))
           ]),
           o.value.showFooter ? (t(), u("tfoot", uo, [
             c("tr", null, [
-              (t(!0), u(w, null, $(o.value.footerRow.cells, (p, g) => (t(), q(d, {
-                cell: p,
+              (t(!0), u(w, null, B(o.value.footerRow.cells, (v, p) => (t(), y(d, {
+                cell: v,
                 question: e.question,
-                key: "footer_" + g
+                key: "footer_" + p
               }, null, 8, ["cell", "question"]))), 128))
             ])
           ])) : m("", !0)
@@ -2819,7 +2829,7 @@ const Zn = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), co = /* @__PURE__ */ c("span", null, "\xA0", -1), po = /* @__PURE__ */ h({
+}), co = /* @__PURE__ */ c("span", null, "\xA0", -1), po = /* @__PURE__ */ g({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2827,7 +2837,7 @@ const Zn = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => n.column), (o, e) => o.column.isRenderedRequired ? (t(), u(w, { key: 0 }, [
+    return L(() => n.column), (o, e) => o.column.isRenderedRequired ? (t(), u(w, { key: 0 }, [
       co,
       o.column.isRenderedRequired ? (t(), u("span", {
         key: 0,
@@ -2835,119 +2845,119 @@ const Zn = /* @__PURE__ */ h({
       }, I(o.column.requiredText), 3)) : m("", !0)
     ], 64)) : m("", !0);
   }
-}), vo = ["data-responsive-title", "title", "colspan"], qo = /* @__PURE__ */ h({
+}), vo = ["data-responsive-title", "title", "colspan"], qo = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     question: {},
     cell: {}
   },
   setup(l) {
-    const n = l, o = R(!1), e = R(), s = () => n.cell.headers, i = () => !!n.cell.width || !!n.cell.minWidth ? { width: n.cell.width, minWidth: n.cell.minWidth } : null, a = () => n.cell.index || "", d = () => o.value = n.cell.question.isVisible, p = (g) => ee(g);
-    return A(() => {
-      if (!(!n.cell.hasQuestion || !n.question || !n.question.survey)) {
-        d(), n.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
-          d();
-        });
-        var g = {
-          cell: n.cell.cell,
-          cellQuestion: n.cell.question,
-          htmlElement: e.value,
-          row: n.cell.row,
-          column: n.cell.cell.column
-        };
-        n.question.survey.matrixAfterCellRender(n.question, g);
-      }
-    }), (g, f) => {
-      const y = 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"), K = v("survey-other-choice"), X = v("survey-string");
+    const n = l, o = T(!1), e = T(), s = () => n.cell.headers, i = () => !!n.cell.width || !!n.cell.minWidth ? { width: n.cell.width, minWidth: n.cell.minWidth } : null, a = () => n.cell.index || "", d = () => o.value = n.cell.question.isVisible, v = (p) => se(p);
+    return E(() => {
+      if (!n.cell.hasQuestion || !n.question || !n.question.survey)
+        return;
+      d(), n.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
+        d();
+      });
+      const p = e.value, b = n.cell.question, f = {
+        cell: n.cell.cell,
+        cellQuestion: b,
+        htmlElement: p,
+        row: n.cell.row,
+        column: n.cell.cell.column
+      };
+      n.question.survey.matrixAfterCellRender(n.question, f), b && b.afterRenderCore(p);
+    }), (p, b) => {
+      const f = q("survey-errors"), $ = q("sv-matrix-drag-drop-icon"), M = q("sv-action-bar"), h = q("survey-radiogroup-item"), D = q("survey-checkbox-item"), _ = q("survey-other-choice"), O = q("survey-string");
       return t(), u("td", {
-        class: r(g.cell.className),
+        class: r(p.cell.className),
         "data-responsive-title": s(),
-        title: g.cell.getTitle(),
+        title: p.cell.getTitle(),
         style: S(i()),
-        colspan: g.cell.colSpans,
-        onFocusin: f[0] || (f[0] = (ne) => g.cell.focusIn()),
+        colspan: p.cell.colSpans,
+        onFocusin: b[0] || (b[0] = (Q) => p.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
-        g.cell.isErrorsCell ? (t(), q(y, {
+        p.cell.isErrorsCell ? (t(), y(f, {
           key: 0,
-          element: g.cell.question
+          element: p.cell.question
         }, null, 8, ["element"])) : m("", !0),
-        g.cell.isDragHandlerCell ? (t(), q(k, {
+        p.cell.isDragHandlerCell ? (t(), y($, {
           key: 1,
-          item: { data: { row: g.cell.row, question: g.question } }
+          item: { data: { row: p.cell.row, question: p.question } }
         }, null, 8, ["item"])) : m("", !0),
-        g.cell.isActionsCell ? (t(), q(P, {
+        p.cell.isActionsCell ? (t(), y(M, {
           key: 2,
-          model: g.cell.item.getData(),
+          model: p.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : m("", !0),
-        g.cell.hasPanel ? (t(), q(M(p(g.cell.panel)), {
+        p.cell.hasPanel ? (t(), y(N(v(p.cell.panel)), {
           key: 3,
-          question: g.cell.panel,
-          css: g.question.cssClasses
+          question: p.cell.panel,
+          css: p.question.cssClasses
         }, null, 8, ["question", "css"])) : m("", !0),
-        g.cell.hasQuestion ? (t(), u("div", {
+        p.cell.hasQuestion ? (t(), u("div", {
           key: 4,
-          class: r(g.question.cssClasses.cellQuestionWrapper)
+          class: r(p.question.cssClasses.cellQuestionWrapper)
         }, [
-          !g.cell.isChoice && g.cell.question.isDefaultRendering() ? L((t(), q(M(p(g.cell.question)), {
+          !p.cell.isChoice && p.cell.question.isDefaultRendering() ? P((t(), y(N(v(p.cell.question)), {
             key: 0,
-            question: g.cell.question
+            question: p.cell.question
           }, null, 8, ["question"])), [
-            [H, o.value]
+            [A, o.value]
           ]) : m("", !0),
-          !g.cell.isChoice && !g.cell.question.isDefaultRendering() ? L((t(), q(M(g.cell.question.getComponentName()), {
+          !p.cell.isChoice && !p.cell.question.isDefaultRendering() ? P((t(), y(N(p.cell.question.getComponentName()), {
             key: 1,
-            question: g.cell.question
+            question: p.cell.question
           }, null, 8, ["question"])), [
-            [H, o.value]
+            [A, o.value]
           ]) : m("", !0),
-          g.cell.isRadio ? (t(), q(D, {
-            key: g.cell.item.value,
-            class: r(g.cell.question.getItemClass(g.cell.item)),
-            question: g.cell.question,
-            item: g.cell.item,
+          p.cell.isRadio ? (t(), y(h, {
+            key: p.cell.item.value,
+            class: r(p.cell.question.getItemClass(p.cell.item)),
+            question: p.cell.question,
+            item: p.cell.item,
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          g.cell.isCheckbox ? (t(), q(E, {
-            key: g.cell.item.value,
-            class: r(g.cell.question.getItemClass(g.cell.item)),
-            question: g.cell.question,
-            item: g.cell.item,
+          p.cell.isCheckbox ? (t(), y(D, {
+            key: p.cell.item.value,
+            class: r(p.cell.question.getItemClass(p.cell.item)),
+            question: p.cell.question,
+            item: p.cell.item,
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          g.cell.isOtherChoice ? (t(), q(K, {
+          p.cell.isOtherChoice ? (t(), y(_, {
             key: 4,
-            question: g.cell.question
+            question: p.cell.question
           }, null, 8, ["question"])) : m("", !0)
         ], 2)) : m("", !0),
-        g.cell.hasTitle ? (t(), q(X, {
+        p.cell.hasTitle ? (t(), y(O, {
           key: 5,
-          locString: g.cell.locTitle
+          locString: p.cell.locTitle
         }, null, 8, ["locString"])) : m("", !0),
-        g.cell.requiredText ? (t(), u("span", {
+        p.cell.requiredText ? (t(), u("span", {
           key: 6,
-          class: r(g.question.cssClasses.cellRequiredText)
-        }, I(g.cell.requiredText), 3)) : m("", !0)
+          class: r(p.question.cssClasses.cellRequiredText)
+        }, I(p.cell.requiredText), 3)) : m("", !0)
       ], 46, vo);
     };
   }
-}), yo = /* @__PURE__ */ h({
+}), yo = /* @__PURE__ */ g({
   __name: "MatrixDynamic",
   props: {
     question: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
+    const n = l, o = T(null);
+    H(n, o);
     const e = () => {
       n.question.addRowUI();
     };
     return (s, i) => {
-      const a = v("survey-string"), d = v("survey-matrixtable");
+      const a = q("survey-string"), d = q("survey-matrixtable");
       return t(), u("div", {
         ref_key: "root",
         ref: o
@@ -2969,7 +2979,7 @@ const Zn = /* @__PURE__ */ h({
             }, null, 2)
           ], 2)
         ], 2)) : m("", !0),
-        s.question.renderedTable.showTable ? (t(), q(d, {
+        s.question.renderedTable.showTable ? (t(), y(d, {
           key: 1,
           question: s.question
         }, null, 8, ["question"])) : m("", !0),
@@ -3019,88 +3029,88 @@ const Zn = /* @__PURE__ */ h({
     };
   }
 });
-function se(l, n = !0) {
+function ne(l, n = !0) {
   return {
-    question: T(() => l.item.data.question),
-    row: n ? T(() => l.item.data.row) : void 0
+    question: R(() => l.item.data.question),
+    row: n ? R(() => l.item.data.row) : void 0
   };
 }
-const go = ["disabled"], ho = /* @__PURE__ */ h({
+const go = ["disabled"], ho = /* @__PURE__ */ g({
   __name: "RemoveButton",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, { question: o, row: e } = se(n);
+    const n = l, { question: o, row: e } = ne(n);
     return (s, i) => {
-      const a = v("survey-string");
+      const a = q("survey-string");
       return t(), u("button", {
         type: "button",
-        class: r(b(o).getRemoveRowButtonCss()),
-        disabled: b(o).isInputReadOnly,
-        onClick: i[0] || (i[0] = () => b(o).removeRowUI(b(e)))
+        class: r(k(o).getRemoveRowButtonCss()),
+        disabled: k(o).isInputReadOnly,
+        onClick: i[0] || (i[0] = () => k(o).removeRowUI(k(e)))
       }, [
         C(a, {
-          locString: b(o).locRemoveRowText
+          locString: k(o).locRemoveRowText
         }, null, 8, ["locString"]),
         c("span", {
-          class: r(b(o).cssClasses.iconRemove)
+          class: r(k(o).cssClasses.iconRemove)
         }, null, 2)
       ], 10, go);
     };
   }
-}), Co = ["xlink:href"], bo = /* @__PURE__ */ h({
+}), Co = ["xlink:href"], bo = /* @__PURE__ */ g({
   __name: "DragDropIcon",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, { question: o } = se(n, !1);
-    return (e, s) => b(o).iconDragElement ? (t(), u("svg", {
+    const n = l, { question: o } = ne(n, !1);
+    return (e, s) => k(o).iconDragElement ? (t(), u("svg", {
       key: 0,
-      class: r(b(o).cssClasses.dragElementDecorator)
+      class: r(k(o).cssClasses.dragElementDecorator)
     }, [
       c("use", {
-        "xlink:href": b(o).iconDragElement
+        "xlink:href": k(o).iconDragElement
       }, null, 8, Co)
     ], 2)) : (t(), u("span", {
       key: 1,
-      class: r(b(o).cssClasses.iconDrag)
+      class: r(k(o).cssClasses.iconDrag)
     }, null, 2));
   }
-}), ko = ["aria-expanded", "aria-controls"], fo = /* @__PURE__ */ h({
+}), ko = ["aria-expanded", "aria-controls"], fo = /* @__PURE__ */ g({
   __name: "DetailButton",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, { question: o, row: e } = se(n);
+    const n = l, { question: o, row: e } = ne(n);
     return (s, i) => {
-      const a = v("sv-svg-icon");
+      const a = q("sv-svg-icon");
       return t(), u("button", {
         type: "button",
-        class: r(b(o).getDetailPanelButtonCss(b(e))),
-        onClick: i[0] || (i[0] = () => b(e).showHideDetailPanelClick()),
-        "aria-expanded": b(o).getIsDetailPanelShowing(b(e)) ? "true" : "false",
-        "aria-controls": b(o).getIsDetailPanelShowing(b(e)) ? b(e).detailPanelId : null
+        class: r(k(o).getDetailPanelButtonCss(k(e))),
+        onClick: i[0] || (i[0] = () => k(e).showHideDetailPanelClick()),
+        "aria-expanded": k(o).getIsDetailPanelShowing(k(e)) ? "true" : "false",
+        "aria-controls": k(o).getIsDetailPanelShowing(k(e)) ? k(e).detailPanelId : null
       }, [
         C(a, {
-          class: r(b(o).getDetailPanelIconCss(b(e))),
-          iconName: b(o).getDetailPanelIconId(b(e)),
+          class: r(k(o).getDetailPanelIconCss(k(e))),
+          iconName: k(o).getDetailPanelIconId(k(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
       ], 10, ko);
     };
   }
-}), Io = /* @__PURE__ */ h({
+}), Io = /* @__PURE__ */ g({
   __name: "PanelDynamic",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null), e = Y();
-    N(
+    const n = l, o = T(null), e = x();
+    H(
       n,
       o,
       (a) => {
@@ -3122,14 +3132,14 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
         };
       }
     );
-    const s = T(() => {
+    const s = R(() => {
       if (n.question.isRenderModeList)
         return n.question.panels;
       const a = [];
       return n.question.currentPanel && a.push(n.question.currentPanel), a;
     }), i = () => n.question.showLegacyNavigation;
     return (a, d) => {
-      const p = v("survey-string"), g = v("sv-paneldynamic-add-btn"), f = v("survey-paneldynamicprogress"), y = v("survey-panel"), k = v("sv-paneldynamic-remove-btn"), P = v("survey-paneldynamicprogress-v2");
+      const v = q("survey-string"), p = q("sv-paneldynamic-add-btn"), b = q("survey-paneldynamicprogress"), f = q("survey-panel"), $ = q("sv-paneldynamic-remove-btn"), M = q("survey-paneldynamicprogress-v2");
       return t(), u("div", {
         class: r(a.question.cssClasses.root),
         ref_key: "root",
@@ -3140,11 +3150,11 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
           class: r(a.question.cssClasses.noEntriesPlaceholder)
         }, [
           c("span", null, [
-            C(p, {
+            C(v, {
               locString: a.question.locNoEntriesText
             }, null, 8, ["locString"])
           ]),
-          C(g, {
+          C(p, {
             data: { question: a.question }
           }, null, 8, ["data"])
         ], 2)) : m("", !0),
@@ -3158,46 +3168,46 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
             role: "progressbar"
           }, null, 6)
         ], 2)) : m("", !0),
-        i() && a.question.isProgressTopShowing ? (t(), q(f, {
+        i() && a.question.isProgressTopShowing ? (t(), y(b, {
           key: 2,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        (t(!0), u(w, null, $(s.value, (D, E) => (t(), u(w, {
-          key: D.id
+        (t(!0), u(w, null, B(s.value, (h, D) => (t(), u(w, {
+          key: h.id
         }, [
           c("div", {
             class: r(a.question.getPanelWrapperCss())
           }, [
-            C(y, {
-              question: D,
+            C(f, {
+              question: h,
               css: a.css
             }, null, 8, ["question", "css"]),
-            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && D.state !== "collapsed" ? (t(), q(k, {
+            a.question.panelRemoveButtonLocation === "right" && a.question.canRemovePanel && h.state !== "collapsed" ? (t(), y($, {
               key: 0,
-              data: { question: a.question, panel: D }
+              data: { question: a.question, panel: h }
             }, null, 8, ["data"])) : m("", !0)
           ], 2),
-          a.question.isRenderModeList && E < a.question.visiblePanelCount - 1 ? (t(), u("hr", {
+          a.question.isRenderModeList && D < a.question.visiblePanelCount - 1 ? (t(), u("hr", {
             class: r(a.question.cssClasses.separator),
-            key: "separator" + D.id
+            key: "separator" + h.id
           }, null, 2)) : m("", !0)
         ], 64))), 128)),
-        i() && a.question.isProgressBottomShowing ? (t(), q(f, {
+        i() && a.question.isProgressBottomShowing ? (t(), y(b, {
           key: 3,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        i() && a.question.isRenderModeList ? (t(), q(g, {
+        i() && a.question.isRenderModeList ? (t(), y(p, {
           key: 4,
           data: { question: a.question }
         }, null, 8, ["data"])) : m("", !0),
-        a.question.showNavigation ? (t(), q(P, {
+        a.question.showNavigation ? (t(), y(M, {
           key: 5,
           question: a.question
         }, null, 8, ["question"])) : m("", !0)
       ], 2);
     };
   }
-}), wo = /* @__PURE__ */ h({
+}), wo = /* @__PURE__ */ g({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3205,7 +3215,7 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
   setup(l) {
     const n = l, o = () => n.question.isProgressTopShowing ? n.question.cssClasses.progressTop : n.question.cssClasses.progressBottom;
     return (e, s) => {
-      const i = v("sv-paneldynamic-prev-btn"), a = v("sv-paneldynamic-next-btn"), d = v("sv-paneldynamic-add-btn"), p = v("sv-paneldynamic-progress-text");
+      const i = q("sv-paneldynamic-prev-btn"), a = q("sv-paneldynamic-next-btn"), d = q("sv-paneldynamic-add-btn"), v = q("sv-paneldynamic-progress-text");
       return t(), u("div", {
         class: r(o())
       }, [
@@ -3236,21 +3246,21 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
           C(d, {
             data: { question: e.question }
           }, null, 8, ["data"]),
-          C(p, {
+          C(v, {
             data: { question: e.question }
           }, null, 8, ["data"])
         ], 2)
       ], 2);
     };
   }
-}), So = /* @__PURE__ */ h({
+}), So = /* @__PURE__ */ g({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
   },
   setup(l) {
     return (n, o) => {
-      const e = v("sv-action-bar");
+      const e = q("sv-action-bar");
       return n.question.cssClasses.footer ? (t(), u("div", {
         key: 0,
         class: r(n.question.cssClasses.footer)
@@ -3280,127 +3290,127 @@ const go = ["disabled"], ho = /* @__PURE__ */ h({
     };
   }
 });
-function U(l) {
-  return T(
+function j(l) {
+  return R(
     () => l.item && l.item.data.question || l.data.question
   );
 }
-const Ro = /* @__PURE__ */ h({
+const Ro = /* @__PURE__ */ g({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
     data: {}
   },
   setup(l) {
-    const o = U(l), e = () => {
+    const o = j(l), e = () => {
       o.value.addPanelUI();
     };
-    return (s, i) => b(o).canAddPanel ? (t(), u("button", {
+    return (s, i) => k(o).canAddPanel ? (t(), u("button", {
       key: 0,
       type: "button",
-      class: r(b(o).getAddButtonCss()),
+      class: r(k(o).getAddButtonCss()),
       onClick: e
     }, [
       c("span", {
-        class: r(b(o).cssClasses.buttonAddText)
-      }, I(b(o).panelAddText), 3)
+        class: r(k(o).cssClasses.buttonAddText)
+      }, I(k(o).panelAddText), 3)
     ], 2)) : m("", !0);
   }
-}), To = ["title"], $o = /* @__PURE__ */ h({
+}), To = ["title"], $o = /* @__PURE__ */ g({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
     data: {}
   },
   setup(l) {
-    const o = U(l), e = () => {
+    const o = j(l), e = () => {
       o.value.goToNextPanel();
     };
     return (s, i) => {
-      const a = v("sv-svg-icon");
+      const a = q("sv-svg-icon");
       return t(), u("div", {
-        title: b(o).panelNextText,
+        title: k(o).panelNextText,
         onClick: e,
-        class: r(b(o).getNextButtonCss())
+        class: r(k(o).getNextButtonCss())
       }, [
         C(a, {
-          iconName: b(o).cssClasses.progressBtnIcon,
+          iconName: k(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, To);
     };
   }
-}), Bo = ["title"], Lo = /* @__PURE__ */ h({
+}), Bo = ["title"], Lo = /* @__PURE__ */ g({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
     data: {}
   },
   setup(l) {
-    const o = U(l), e = () => {
+    const o = j(l), e = () => {
       o.value.goToPrevPanel();
     };
     return (s, i) => {
-      const a = v("sv-svg-icon");
+      const a = q("sv-svg-icon");
       return t(), u("div", {
-        title: b(o).panelPrevText,
+        title: k(o).panelPrevText,
         onClick: e,
-        class: r(b(o).getPrevButtonCss())
+        class: r(k(o).getPrevButtonCss())
       }, [
         C(a, {
-          iconName: b(o).cssClasses.progressBtnIcon,
+          iconName: k(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, Bo);
     };
   }
-}), Do = /* @__PURE__ */ h({
+}), Do = /* @__PURE__ */ g({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
     data: {}
   },
   setup(l) {
-    const n = l, o = U(n), e = T(
+    const n = l, o = j(n), e = R(
       () => n.item && n.item.data.panel || n.data.panel
     ), s = (i) => {
       o.value.isInputReadOnly || o.value.removePanelUI(i);
     };
     return (i, a) => (t(), u("button", {
       type: "button",
-      class: r(b(o).getPanelRemoveButtonCss()),
+      class: r(k(o).getPanelRemoveButtonCss()),
       onClick: a[0] || (a[0] = (d) => s(e.value))
     }, [
       c("span", {
-        class: r(b(o).cssClasses.buttonRemoveText)
-      }, I(b(o).panelRemoveText), 3),
+        class: r(k(o).cssClasses.buttonRemoveText)
+      }, I(k(o).panelRemoveText), 3),
       c("span", {
-        class: r(b(o).cssClasses.iconRemove)
+        class: r(k(o).cssClasses.iconRemove)
       }, null, 2)
     ], 2));
   }
-}), Po = /* @__PURE__ */ h({
+}), Po = /* @__PURE__ */ g({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
     data: {}
   },
   setup(l) {
-    const o = U(l);
+    const o = j(l);
     return (e, s) => (t(), u("div", {
-      class: r(b(o).cssClasses.progressText)
-    }, I(b(o).progressText), 3));
+      class: r(k(o).cssClasses.progressText)
+    }, I(k(o).progressText), 3));
   }
-}), Mo = ["id"], No = /* @__PURE__ */ h({
+}), Mo = ["id"], No = /* @__PURE__ */ g({
   __name: "Errors",
   props: {
     element: {},
     location: {}
   },
   setup(l) {
-    const n = R();
+    const n = T();
     return (o, e) => {
-      const s = v("survey-string");
+      const s = q("survey-string");
       return o.element.hasVisibleErrors ? (t(), u("div", {
         key: 0,
         role: "alert",
@@ -3410,7 +3420,7 @@ const Ro = /* @__PURE__ */ h({
         ref_key: "root",
         ref: n
       }, [
-        (t(!0), u(w, null, $(o.element.errors, (i, a) => (t(), u("div", {
+        (t(!0), u(w, null, B(o.element.errors, (i, a) => (t(), u("div", {
           key: "error_" + a
         }, [
           c("span", {
@@ -3432,7 +3442,7 @@ const Ro = /* @__PURE__ */ h({
       ], 10, Mo)) : m("", !0);
     };
   }
-}), Ho = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Eo = /* @__PURE__ */ h({
+}), Ho = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Eo = /* @__PURE__ */ g({
   __name: "QuestionComment",
   props: {
     question: {},
@@ -3459,7 +3469,7 @@ const Ro = /* @__PURE__ */ h({
       })
     }, null, 46, Ao));
   }
-}), _o = /* @__PURE__ */ h({
+}), _o = /* @__PURE__ */ g({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3470,8 +3480,8 @@ const Ro = /* @__PURE__ */ h({
       de(o);
     };
     return (o, e) => {
-      const s = v("survey-element-title-content"), i = v("sv-title-actions");
-      return o.element.hasTitle ? (t(), q(M(o.element.titleTagName), {
+      const s = q("survey-element-title-content"), i = q("sv-title-actions");
+      return o.element.hasTitle ? (t(), y(N(o.element.titleTagName), {
         key: 0,
         class: r(o.element.cssTitle),
         "aria-label": o.element.titleAriaLabel,
@@ -3484,12 +3494,12 @@ const Ro = /* @__PURE__ */ h({
         })
       }, {
         default: ye(() => [
-          o.element.hasTitleActions ? m("", !0) : (t(), q(s, {
+          o.element.hasTitleActions ? m("", !0) : (t(), y(s, {
             key: 0,
             element: o.element,
             css: o.css
           }, null, 8, ["element", "css"])),
-          o.element.hasTitleActions ? (t(), q(i, {
+          o.element.hasTitleActions ? (t(), y(i, {
             key: 1,
             element: o.element,
             css: o.css
@@ -3499,7 +3509,7 @@ const Ro = /* @__PURE__ */ h({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
     };
   }
-}), Vo = { class: "sv-vue-title-additional-div" }, Oo = { key: 3 }, Fo = { key: 5 }, Wo = { key: 7 }, zo = /* @__PURE__ */ h({
+}), Vo = { class: "sv-vue-title-additional-div" }, Oo = { key: 3 }, Fo = { key: 5 }, Wo = { key: 7 }, zo = /* @__PURE__ */ g({
   __name: "TitleContent",
   props: {
     element: {},
@@ -3507,9 +3517,9 @@ const Ro = /* @__PURE__ */ h({
   },
   setup(l) {
     return (n, o) => {
-      const e = v("survey-string");
+      const e = q("survey-string");
       return t(), u("div", Vo, [
-        n.element.isTitleRenderedAsString ? (t(), q(e, {
+        n.element.isTitleRenderedAsString ? (t(), y(e, {
           key: 0,
           locString: n.element.locTitle
         }, null, 8, ["locString"])) : m("", !0),
@@ -3531,7 +3541,7 @@ const Ro = /* @__PURE__ */ h({
           "aria-hidden": !0
         }, I(n.element.requiredText), 3)) : m("", !0),
         !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", Fo, "\xA0")) : m("", !0),
-        n.element.isTitleRenderedAsString ? m("", !0) : (t(), q(e, {
+        n.element.isTitleRenderedAsString ? m("", !0) : (t(), y(e, {
           key: 6,
           locString: n.element.locTitle
         }, null, 8, ["locString"])),
@@ -3544,23 +3554,23 @@ const Ro = /* @__PURE__ */ h({
       ]);
     };
   }
-}), Uo = { class: "sv-title-actions" }, Ko = { class: "sv-title-actions__title" }, jo = /* @__PURE__ */ h({
+}), Uo = { class: "sv-title-actions" }, Ko = { class: "sv-title-actions__title" }, jo = /* @__PURE__ */ g({
   __name: "TitleActions",
   props: {
     element: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = T(() => n.element.getTitleToolbar());
+    const n = l, o = R(() => n.element.getTitleToolbar());
     return (e, s) => {
-      const i = v("survey-string"), a = v("survey-element-title-content"), d = v("sv-action-bar");
+      const i = q("survey-string"), a = q("survey-element-title-content"), d = q("sv-action-bar");
       return t(), u("div", Uo, [
         c("span", Ko, [
-          e.element.isPage ? (t(), q(i, {
+          e.element.isPage ? (t(), y(i, {
             key: 0,
             locString: e.element.locTitle
           }, null, 8, ["locString"])) : m("", !0),
-          e.element.isPage ? m("", !0) : (t(), q(a, {
+          e.element.isPage ? m("", !0) : (t(), y(a, {
             key: 1,
             element: e.element,
             css: e.css
@@ -3583,7 +3593,7 @@ function Jo(l, n) {
 }
 const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /* @__PURE__ */ c("use", null, null, -1), st = [
   et
-], nt = /* @__PURE__ */ h({
+], nt = /* @__PURE__ */ g({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3593,7 +3603,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     title: {}
   },
   setup(l) {
-    const n = l, o = R(), e = () => {
+    const n = l, o = T(), e = () => {
       Re(
         n.size,
         n.width,
@@ -3603,9 +3613,9 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         n.title
       );
     };
-    return Z(() => {
+    return X(() => {
       e();
-    }), A(() => {
+    }), E(() => {
       e();
     }), (s, i) => (t(), u("svg", {
       ref_key: "svgIconElement",
@@ -3615,7 +3625,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       "aria-label": s.title
     }, st, 8, xo));
   }
-}), ot = /* @__PURE__ */ h({
+}), ot = /* @__PURE__ */ g({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3623,13 +3633,13 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     handleClick: { type: Boolean }
   },
   setup(l) {
-    const n = l, o = R(null);
-    return B(() => n.model), A(() => {
+    const n = l, o = T(null);
+    return L(() => n.model), E(() => {
       !n.model.hasActions || n.model.initResponsivityManager(o.value);
-    }), _(() => {
+    }), V(() => {
       n.model.resetResponsivityManager();
     }), (e, s) => {
-      const i = v("sv-action");
+      const i = q("sv-action");
       return e.model.hasActions ? (t(), u("div", {
         key: 0,
         ref_key: "root",
@@ -3639,44 +3649,44 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           a.stopPropagation();
         })
       }, [
-        (t(!0), u(w, null, $(e.model.renderedActions, (a) => (t(), q(i, {
+        (t(!0), u(w, null, B(e.model.renderedActions, (a) => (t(), y(i, {
           key: a.id,
           item: a
         }, null, 8, ["item"]))), 128))
       ], 2)) : m("", !0);
     };
   }
-}), tt = ["id"], it = { class: "sv-action__content" }, lt = /* @__PURE__ */ h({
+}), tt = ["id"], it = { class: "sv-action__content" }, lt = /* @__PURE__ */ g({
   __name: "Action",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, o = T(
+    const n = l, o = R(
       () => n.item.component || "sv-action-bar-item"
     );
-    return B(() => n.item), (e, s) => {
-      const i = v("sv-action-bar-separator");
+    return L(() => n.item), (e, s) => {
+      const i = q("sv-action-bar-separator");
       return t(), u("div", {
         class: r(e.item.getActionRootCss()),
         id: e.item.id
       }, [
         c("div", it, [
-          e.item.needSeparator ? (t(), q(i, { key: 0 })) : m("", !0),
-          (t(), q(M(o.value), { item: e.item }, null, 8, ["item"]))
+          e.item.needSeparator ? (t(), y(i, { key: 0 })) : m("", !0),
+          (t(), y(N(o.value), { item: e.item }, null, 8, ["item"]))
         ])
       ], 10, tt);
     };
   }
-}), rt = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], at = /* @__PURE__ */ h({
+}), rt = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], at = /* @__PURE__ */ g({
   __name: "ActionBarItem",
   props: {
     item: {}
   },
   setup(l) {
     const n = l;
-    return B(() => n.item), (o, e) => {
-      const s = v("sv-svg-icon");
+    return L(() => n.item), (o, e) => {
+      const s = q("sv-svg-icon");
       return t(), u("button", {
         class: r(o.item.getActionBarItemCss()),
         type: "button",
@@ -3693,7 +3703,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         role: o.item.ariaRole,
         tabindex: o.item.disableTabStop ? -1 : 0
       }, [
-        o.item.iconName ? (t(), q(s, {
+        o.item.iconName ? (t(), y(s, {
           key: 0,
           class: r(o.item.cssClasses.itemIcon),
           iconName: o.item.iconName,
@@ -3707,7 +3717,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       ], 42, rt);
     };
   }
-}), ut = ["disabled", "title", "role", "tabindex"], dt = /* @__PURE__ */ h({
+}), ut = ["disabled", "title", "role", "tabindex"], dt = /* @__PURE__ */ g({
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -3715,7 +3725,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
   setup(l) {
     const n = l, o = $e;
     let e;
-    return B(
+    return L(
       () => n.item,
       (s) => {
         e = new Te(s);
@@ -3724,23 +3734,23 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         e.dispose();
       }
     ), (s, i) => {
-      const a = v("sv-svg-icon"), d = v("sv-popup");
+      const a = q("sv-svg-icon"), d = q("sv-popup");
       return t(), u(w, null, [
         c("button", {
           type: "button",
           class: r(s.item.getActionBarItemCss()),
-          onClick: i[0] || (i[0] = (p) => {
-            s.item.action(s.item, !!p.pointerType);
+          onClick: i[0] || (i[0] = (v) => {
+            s.item.action(s.item, !!v.pointerType);
           }),
-          onKeyup: i[1] || (i[1] = (p) => {
-            p.stopPropagation();
+          onKeyup: i[1] || (i[1] = (v) => {
+            v.stopPropagation();
           }),
           disabled: s.item.enabled !== void 0 && s.item.enabled,
           title: s.item.tooltip || s.item.title,
           role: s.item.ariaRole,
           tabindex: s.item.disableTabStop ? -1 : 0
         }, [
-          s.item.iconName ? (t(), q(a, {
+          s.item.iconName ? (t(), y(a, {
             key: 0,
             class: r(s.item.cssClasses.itemIcon),
             iconName: s.item.iconName,
@@ -3754,29 +3764,29 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         ], 42, ut),
         C(d, {
           model: s.item.popupModel,
-          getTarget: b(o)
+          getTarget: k(o)
         }, null, 8, ["model", "getTarget"])
       ], 64);
     };
   }
-}), mt = /* @__PURE__ */ h({
+}), mt = /* @__PURE__ */ g({
   __name: "ActionBarSeparator",
   props: {
     item: {}
   },
   setup(l) {
-    const n = l, o = T(() => n.item && n.item.innerCss);
+    const n = l, o = R(() => n.item && n.item.innerCss);
     return (e, s) => (t(), u("div", {
       class: r(["sv-action-bar-separator", o.value])
     }, null, 2));
   }
-}), ct = ["aria-label", "placeholder", "value"], pt = ["aria-label"], vt = ["id"], qt = /* @__PURE__ */ h({
+}), ct = ["aria-label", "placeholder", "value"], pt = ["aria-label"], vt = ["id"], qt = /* @__PURE__ */ g({
   __name: "List",
   props: {
     model: {}
   },
   setup(l) {
-    const n = l, o = R(null), e = (a) => {
+    const n = l, o = T(null), e = (a) => {
       const d = n.model;
       d.filterString = a.target.value;
     }, s = (a) => {
@@ -3785,10 +3795,10 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     }, i = (a) => {
       n.model.onMouseMove(a);
     };
-    return B(() => n.model), A(() => {
+    return L(() => n.model), E(() => {
       n.model.initListContainerHtmlElement(o.value);
     }), (a, d) => {
-      const p = v("sv-svg-icon"), g = v("sv-list-item");
+      const v = q("sv-svg-icon"), p = q("sv-list-item");
       return t(), u("div", {
         class: r(a.model.cssClasses.root),
         ref_key: "listContainerElement",
@@ -3801,7 +3811,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           c("div", {
             class: r(a.model.cssClasses.filterIcon)
           }, [
-            C(p, {
+            C(v, {
               iconName: "icon-search",
               size: "auto"
             })
@@ -3817,18 +3827,18 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           }, null, 42, ct),
           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] = (b) => {
+              a.model.onClickSearchClearButton(b);
             }),
             class: r(a.model.cssClasses.searchClearButtonIcon)
           }, [
-            C(p, {
+            C(v, {
               iconName: "icon-searchclear",
               size: "auto"
             })
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
-        L(c("div", {
+        P(c("div", {
           class: r(a.model.cssClasses.emptyContainer)
         }, [
           c("div", {
@@ -3836,49 +3846,49 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
             "aria-label": a.model.emptyMessage
           }, I(a.model.emptyMessage), 11, pt)
         ], 2), [
-          [H, a.model.isEmpty]
+          [A, a.model.isEmpty]
         ]),
-        a.model.renderElements ? L((t(), u("ul", {
+        a.model.renderElements ? P((t(), u("ul", {
           key: 1,
           class: r(a.model.getListClass()),
           role: "listbox",
           id: a.model.elementId,
-          onMousedown: d[1] || (d[1] = (f) => {
-            f.preventDefault();
+          onMousedown: d[1] || (d[1] = (b) => {
+            b.preventDefault();
           }),
           onMousemove: i,
-          onKeydown: d[2] || (d[2] = (f) => {
-            a.model.onKeyDown(f);
+          onKeydown: d[2] || (d[2] = (b) => {
+            a.model.onKeyDown(b);
           })
         }, [
-          (t(!0), u(w, null, $(a.model.renderedActions, (f) => (t(), q(g, {
-            item: f,
+          (t(!0), u(w, null, B(a.model.renderedActions, (b) => (t(), y(p, {
+            item: b,
             model: a.model,
-            key: f.id
+            key: b.id
           }, null, 8, ["item", "model"]))), 128))
         ], 42, vt)), [
-          [H, !a.model.isEmpty]
+          [A, !a.model.isEmpty]
         ]) : m("", !0)
       ], 2);
     };
   }
-}), yt = ["aria-selected", "id"], gt = /* @__PURE__ */ h({
+}), yt = ["aria-selected", "id"], gt = /* @__PURE__ */ g({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(l) {
-    const n = l, o = T(() => n.item.elementId), e = (s) => {
+    const n = l, o = R(() => n.item.elementId), e = (s) => {
       n.model.onItemClick(n.item), s.stopPropagation();
     };
-    return B(() => n.item), A(() => {
+    return L(() => n.item), E(() => {
       setTimeout(() => {
         n.model.onLastItemRended(n.item);
       });
     }), (s, i) => {
-      const a = v("sv-svg-icon"), d = v("survey-string"), p = x("key2click");
-      return L((t(), u("li", {
+      const a = q("sv-svg-icon"), d = q("survey-string"), v = ee("key2click");
+      return P((t(), u("li", {
         tabindex: "0",
         role: "option",
         "aria-selected": s.model.isItemSelected(s.item),
@@ -3895,53 +3905,53 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           style: S({ paddingInlineStart: s.model.getItemIndent(s.item) }),
           class: r(s.model.cssClasses.itemBody)
         }, [
-          s.item.iconName && !s.item.component ? (t(), q(a, {
+          s.item.iconName && !s.item.component ? (t(), y(a, {
             key: 0,
             class: r(s.model.cssClasses.itemIcon),
             iconName: s.item.iconName,
             size: s.item.iconSize
           }, null, 8, ["class", "iconName", "size"])) : m("", !0),
-          s.item.component ? m("", !0) : (t(), q(d, {
+          s.item.component ? m("", !0) : (t(), y(d, {
             key: 1,
             locString: s.item.locTitle
           }, null, 8, ["locString"])),
-          s.item.component ? (t(), q(M(s.item.component), {
+          s.item.component ? (t(), y(N(s.item.component), {
             key: 2,
             item: s.item
           }, null, 8, ["item"])) : m("", !0)
         ], 6)
       ], 10, yt)), [
-        [H, s.model.isItemVisible(s.item)],
-        [p]
+        [A, s.model.isItemVisible(s.item)],
+        [v]
       ]);
     };
   }
-}), ht = /* @__PURE__ */ h({
+}), ht = /* @__PURE__ */ g({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
     model: {}
   },
   setup(l) {
-    const n = l, o = O(
+    const n = l, o = W(
       te(n.model, void 0)
-    ), e = R(null);
-    return Q(
+    ), e = T(null);
+    return G(
       () => n.model,
       (s) => {
         o.value.dispose(), o.value = te(s, void 0);
       },
       { immediate: !0 }
-    ), B(() => o.value), A(() => {
+    ), L(() => o.value), E(() => {
       const s = e.value;
       o.value.setComponentElement(
         s,
         n.getTarget ? n.getTarget(s) : void 0
       );
-    }), _(() => {
+    }), V(() => {
       o.value.dispose();
     }), (s, i) => {
-      const a = v("sv-popup-container");
+      const a = q("sv-popup-container");
       return t(), u("div", {
         ref_key: "root",
         ref: e
@@ -3956,7 +3966,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
 }, ft = { class: "sv-popup__scrolling-content" }, It = { class: "sv-popup__content" }, wt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, St = /* @__PURE__ */ h({
+}, St = /* @__PURE__ */ g({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -3967,12 +3977,12 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     const e = (s) => {
       s.stopPropagation();
     };
-    return B(() => n.model), Z(() => {
+    return L(() => n.model), X(() => {
       const s = n.model;
       !o && s.isVisible && n.model.updateOnShowing(), o = s.isVisible;
     }), (s, i) => {
-      const a = v("sv-action-bar");
-      return L((t(), u("div", {
+      const a = q("sv-action-bar");
+      return P((t(), u("div", {
         tabindex: "-1",
         class: r(["sv-popup", s.model.styleClass]),
         onKeydown: i[0] || (i[0] = (d) => {
@@ -3994,7 +4004,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           onClick: e
         }, [
           c("div", Ct, [
-            s.model.showHeader ? (t(), q(M(s.model.popupHeaderTemplate), {
+            s.model.showHeader ? (t(), y(N(s.model.popupHeaderTemplate), {
               key: 0,
               model: s.model
             }, null, 8, ["model"])) : m("", !0),
@@ -4002,7 +4012,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
               s.model.title ? (t(), u("div", kt, I(s.model.title), 1)) : m("", !0),
               c("div", ft, [
                 c("div", It, [
-                  (t(), q(M(s.model.contentComponentName), he(Ce(s.model.contentComponentData)), null, 16))
+                  (t(), y(N(s.model.contentComponentName), he(Ce(s.model.contentComponentData)), null, 16))
                 ])
               ]),
               s.model.showFooter ? (t(), u("div", wt, [
@@ -4014,11 +4024,11 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           ])
         ], 4)
       ], 34)), [
-        [H, s.model.isVisible]
+        [A, s.model.isVisible]
       ]);
     };
   }
-}), Rt = /* @__PURE__ */ h({
+}), Rt = /* @__PURE__ */ g({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4035,7 +4045,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
 }), Tt = {
   key: 0,
   class: "sv-components-column"
-}, $t = /* @__PURE__ */ h({
+}, $t = /* @__PURE__ */ g({
   __name: "Container",
   props: {
     survey: {},
@@ -4043,23 +4053,23 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     needRenderWrapper: {}
   },
   setup(l) {
-    const n = l, o = T(
+    const n = l, o = R(
       () => n.survey.getContainerContent(n.container)
     );
     return (e, s) => o.value.length > 0 ? (t(), u(w, { key: 0 }, [
       e.needRenderWrapper ? (t(), u("div", Tt, [
-        (t(!0), u(w, null, $(o.value, (i, a) => (t(), q(M(i.component), {
+        (t(!0), u(w, null, B(o.value, (i, a) => (t(), y(N(i.component), {
           survey: e.survey,
           container: e.container,
           model: i.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (t(!0), u(w, { key: 1 }, $(o.value, (i, a) => (t(), q(M(i.component), {
+      ])) : (t(!0), u(w, { key: 1 }, B(o.value, (i, a) => (t(), y(N(i.component), {
         survey: e.survey,
         model: i.data
       }, null, 8, ["survey", "model"]))), 256))
     ], 64)) : m("", !0);
   }
-}), j = /* @__PURE__ */ h({
+}), Z = /* @__PURE__ */ g({
   __name: "Progress",
   props: {
     survey: {},
@@ -4067,7 +4077,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     css: {}
   },
   setup(l) {
-    const n = l, o = T(() => n.survey.progressValue + "%"), e = (i) => ie.getProgressTextInBarCss(i), s = (i) => ie.getProgressTextUnderBarCss(i);
+    const n = l, o = R(() => n.survey.progressValue + "%"), e = (i) => ie.getProgressTextInBarCss(i), s = (i) => ie.getProgressTextUnderBarCss(i);
     return (i, a) => (t(), u("div", {
       class: r(i.survey.getProgressCssClasses(i.container))
     }, [
@@ -4087,36 +4097,36 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       }, I(i.survey.progressText), 3)
     ], 2));
   }
-}), Bt = ["onClick"], Lt = ["title"], Dt = ["title"], Pt = /* @__PURE__ */ h({
+}), Bt = ["onClick"], Lt = ["title"], Dt = ["title"], Pt = /* @__PURE__ */ g({
   __name: "ProgressButtons",
   props: {
     survey: {}
   },
   setup(l) {
-    const n = l, o = new Be(n.survey), e = R(!1), s = R(), i = T(() => n.survey.css);
+    const n = l, o = new Be(n.survey), e = T(!1), s = T(), i = R(() => n.survey.css);
     let a;
-    const d = (k) => o.isListElementClickable(k), p = (k) => o.getListElementCss(k), g = (k) => {
-      o.clickListElement(k);
-    }, f = (k, P) => o.getScrollButtonCss(k, P), y = (k) => {
-      let P = s.value;
-      P.scrollLeft += (k ? -1 : 1) * 70;
+    const d = ($) => o.isListElementClickable($), v = ($) => o.getListElementCss($), p = ($) => {
+      o.clickListElement($);
+    }, b = ($, M) => o.getScrollButtonCss($, M), f = ($) => {
+      let M = s.value;
+      M.scrollLeft += ($ ? -1 : 1) * 70;
     };
-    return A(() => {
-      const k = s.value;
+    return E(() => {
+      const $ = s.value;
       a = setInterval(() => {
-        e.value = k.scrollWidth > k.offsetWidth;
+        e.value = $.scrollWidth > $.offsetWidth;
       }, 100);
-    }), z(() => {
+    }), K(() => {
       typeof a < "u" && (clearInterval(a), a = void 0);
-    }), (k, P) => (t(), u("div", {
+    }), ($, M) => (t(), u("div", {
       class: r(i.value.progressButtonsContainerCenter)
     }, [
       c("div", {
         class: r(i.value.progressButtonsContainer)
       }, [
         c("div", {
-          class: r(f(e.value, !0)),
-          onClick: P[0] || (P[0] = (D) => y(!0)),
+          class: r(b(e.value, !0)),
+          onClick: M[0] || (M[0] = (h) => f(!0)),
           role: "button"
         }, null, 2),
         c("div", {
@@ -4127,31 +4137,31 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           c("ul", {
             class: r(i.value.progressButtonsList)
           }, [
-            (t(!0), u(w, null, $(k.survey.visiblePages, (D, E) => (t(), u("li", {
-              key: "listelement" + E,
-              class: r(p(E)),
-              onClick: (K) => d(E) ? g(E) : null
+            (t(!0), u(w, null, B($.survey.visiblePages, (h, D) => (t(), u("li", {
+              key: "listelement" + D,
+              class: r(v(D)),
+              onClick: (_) => d(D) ? p(D) : null
             }, [
               c("div", {
                 class: r(i.value.progressButtonsPageTitle),
-                title: D.renderedNavigationTitle
-              }, I(D.renderedNavigationTitle), 11, Lt),
+                title: h.renderedNavigationTitle
+              }, I(h.renderedNavigationTitle), 11, Lt),
               c("div", {
                 class: r(i.value.progressButtonsPageDescription),
-                title: D.locNavigationDescription.renderedHtml
-              }, I(D.locNavigationDescription.renderedHtml), 11, Dt)
+                title: h.locNavigationDescription.renderedHtml
+              }, I(h.locNavigationDescription.renderedHtml), 11, Dt)
             ], 10, Bt))), 128))
           ], 2)
         ], 2),
         c("div", {
-          class: r(f(e.value, !1)),
-          onClick: P[1] || (P[1] = (D) => y(!1)),
+          class: r(b(e.value, !1)),
+          onClick: M[1] || (M[1] = (h) => f(!1)),
           role: "button"
         }, null, 2)
       ], 2)
     ], 2));
   }
-}), Mt = /* @__PURE__ */ h({
+}), Mt = /* @__PURE__ */ g({
   __name: "ProgressToc",
   props: {
     survey: {}
@@ -4159,26 +4169,26 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
   setup(l) {
     const n = l, o = new Le(n.survey);
     return (e, s) => {
-      const i = v("sv-svg-icon"), a = v("sv-popup"), d = v("sv-list"), p = x("key2click");
+      const i = q("sv-svg-icon"), a = q("sv-popup"), d = q("sv-list"), v = ee("key2click");
       return t(), u("div", {
-        class: r(b(o).containerCss)
+        class: r(k(o).containerCss)
       }, [
-        b(o).isMobile ? L((t(), u("div", {
+        k(o).isMobile ? P((t(), u("div", {
           key: 0,
-          onClick: s[0] || (s[0] = (...g) => b(o).togglePopup && b(o).togglePopup(...g))
+          onClick: s[0] || (s[0] = (...p) => k(o).togglePopup && k(o).togglePopup(...p))
         }, [
           C(i, {
-            iconName: b(o).icon,
+            iconName: k(o).icon,
             size: 24
           }, null, 8, ["iconName"]),
           C(a, {
-            model: b(o).popupModel
+            model: k(o).popupModel
           }, null, 8, ["model"])
         ])), [
-          [p]
-        ]) : (t(), q(d, {
+          [v]
+        ]) : (t(), y(d, {
           key: 1,
-          model: b(o).listModel
+          model: k(o).listModel
         }, null, 8, ["model"]))
       ], 2);
     };
@@ -4186,147 +4196,151 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
 }), Nt = { onsubmit: "return false;" }, Ht = {
   key: 0,
   class: "sv_custom_header"
-}, At = ["id"], Et = { key: 2 }, _t = ["innerHTML"], Vt = ["innerHTML"], Ot = ["innerHTML"], re = /* @__PURE__ */ h({
+}, At = ["id"], Et = { key: 2 }, _t = ["innerHTML"], Vt = ["innerHTML"], Ot = ["innerHTML"], re = /* @__PURE__ */ g({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(l) {
-    const n = l, o = R(), e = R(""), s = R(1), i = T(() => {
-      const k = n.survey ? n.survey : n.model;
-      return be(k);
-    }), a = T(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
-      const k = a.value;
-      return !!i.value && k + s.value.toString();
-    }, p = T(
+    const n = l, o = T(), e = T(""), s = T(1), i = R(() => {
+      const $ = n.survey ? n.survey : n.model;
+      return be($);
+    }), a = R(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
+      const $ = a.value;
+      return !!i.value && $ + s.value.toString();
+    }, v = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
-    ), g = T(() => i.value.css), f = T(() => "page" + d()), y = () => p.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
-    return B(() => i.value), A(() => {
+    ), p = R(() => i.value.css), b = R(() => "page" + d()), f = () => v.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
+    return L(() => i.value), E(() => {
       if (!!i.value) {
         i.value.needRenderIcons && De.renderIcons();
-        var k = o.value;
-        k && i.value.afterRenderSurvey(k), i.value.renderCallback = () => {
-          var P, D;
-          s.value++, (D = (P = Y()) == null ? void 0 : P.proxy) == null || D.$forceUpdate();
+        var $ = o.value;
+        $ && i.value.afterRenderSurvey($), i.value.renderCallback = () => {
+          var M, h;
+          s.value++, (h = (M = x()) == null ? void 0 : M.proxy) == null || h.$forceUpdate();
         }, i.value.startTimerFromUI();
       }
-    }), _(() => {
+    }), V(() => {
       i.value.stopTimer(), i.value.renderCallback = void 0;
-    }), (k, P) => {
-      const D = v("survey-popup-modal"), E = v("survey-header"), K = v("survey-page"), X = v("sv-brand-info"), ne = v("sv-notifier");
+    }), ($, M) => {
+      const h = q("survey-popup-modal"), D = q("survey-header"), _ = q("survey-page"), O = q("sv-brand-info"), Q = q("sv-notifier");
       return t(), u("div", {
         class: r(i.value.getRootCss()),
         style: S(i.value.themeVariables),
         ref_key: "root",
         ref: o
       }, [
-        C(D),
-        i.value.renderBackgroundImage ? (t(), u("div", {
-          key: 0,
-          class: r(g.value.rootBackgroundImage),
-          style: S(i.value.backgroundImageStyle)
-        }, null, 6)) : m("", !0),
-        c("form", Nt, [
-          i.value.hasLogo ? m("", !0) : (t(), u("div", Ht)),
-          c("div", {
-            class: r(g.value.container)
-          }, [
-            i.value.titleView === "title" ? (t(), q(E, {
-              key: 0,
-              survey: i.value
-            }, null, 8, ["survey"])) : m("", !0),
-            (t(), q(M("sv-components-container"), {
-              survey: i.value,
-              container: "header",
-              needRenderWrapper: !1
-            }, null, 8, ["survey"])),
-            i.value.isShowingPage ? (t(), u("div", {
-              key: 1,
-              class: r(i.value.bodyContainerCss)
+        c("div", {
+          class: r(i.value.wrapperFormCss)
+        }, [
+          C(h),
+          i.value.renderBackgroundImage ? (t(), u("div", {
+            key: 0,
+            class: r(p.value.rootBackgroundImage),
+            style: S(i.value.backgroundImageStyle)
+          }, null, 6)) : m("", !0),
+          c("form", Nt, [
+            i.value.hasLogo ? m("", !0) : (t(), u("div", Ht)),
+            c("div", {
+              class: r(p.value.container)
             }, [
-              (t(), q(M("sv-components-container"), {
+              i.value.titleView === "title" ? (t(), y(D, {
+                key: 0,
+                survey: i.value
+              }, null, 8, ["survey"])) : m("", !0),
+              (t(), y(N("sv-components-container"), {
                 survey: i.value,
-                container: "left",
-                needRenderWrapper: !0
+                container: "header",
+                needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              c("div", {
-                class: r(i.value.bodyCss),
-                style: S({ maxWidth: i.value.renderedWidth }),
-                id: a.value
+              i.value.isShowingPage ? (t(), u("div", {
+                key: 1,
+                class: r(i.value.bodyContainerCss)
               }, [
-                (t(), q(M("sv-components-container"), {
+                (t(), y(N("sv-components-container"), {
                   survey: i.value,
-                  container: "contentTop",
+                  container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                (t(), q(K, {
-                  key: f.value,
-                  survey: i.value,
-                  page: i.value.activePage,
-                  css: g.value
-                }, null, 8, ["survey", "page", "css"])),
-                (t(), q(M("sv-components-container"), {
+                c("div", {
+                  class: r(i.value.bodyCss),
+                  style: S({ maxWidth: i.value.renderedWidth }),
+                  id: a.value
+                }, [
+                  (t(), y(N("sv-components-container"), {
+                    survey: i.value,
+                    container: "contentTop",
+                    needRenderWrapper: !0
+                  }, null, 8, ["survey"])),
+                  (t(), y(_, {
+                    key: b.value,
+                    survey: i.value,
+                    page: i.value.activePage,
+                    css: p.value
+                  }, null, 8, ["survey", "page", "css"])),
+                  (t(), y(N("sv-components-container"), {
+                    survey: i.value,
+                    container: "contentBottom",
+                    needRenderWrapper: !0
+                  }, null, 8, ["survey"]))
+                ], 14, At),
+                (t(), y(N("sv-components-container"), {
                   survey: i.value,
-                  container: "contentBottom",
+                  container: "right",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"]))
-              ], 14, At),
-              (t(), q(M("sv-components-container"), {
-                survey: i.value,
-                container: "right",
-                needRenderWrapper: !0
-              }, null, 8, ["survey"]))
-            ], 2)) : m("", !0),
-            (t(), q(M("sv-components-container"), {
-              survey: i.value,
-              container: "footer",
-              needRenderWrapper: !1
-            }, null, 8, ["survey"])),
-            p.value ? (t(), u("div", Et, [
-              c("div", {
-                innerHTML: y(),
-                class: r(i.value.completedCss)
-              }, null, 10, _t),
-              (t(), q(M("sv-components-container"), {
+              ], 2)) : m("", !0),
+              (t(), y(N("sv-components-container"), {
                 survey: i.value,
-                container: "completePage",
-                needRenderWrapper: !0
-              }, null, 8, ["survey"]))
-            ])) : m("", !0),
-            i.value.state === "completedbefore" ? (t(), u("div", {
-              key: 3,
-              class: r(i.value.completedBeforeCss),
-              innerHTML: i.value.processedCompletedBeforeHtml
-            }, null, 10, Vt)) : m("", !0),
-            i.value.state === "loading" ? (t(), u("div", {
-              key: 4,
-              class: r(i.value.loadingBodyCss),
-              innerHTML: i.value.processedLoadingHtml
-            }, null, 10, Ot)) : m("", !0),
-            i.value.state === "empty" ? (t(), u("div", {
-              key: 5,
-              class: r(g.value.bodyEmpty)
-            }, I(i.value.emptySurveyText), 3)) : m("", !0)
-          ], 2)
-        ]),
-        i.value.showBrandInfo ? (t(), q(X, { key: 1 })) : m("", !0),
-        C(ne, {
-          model: i.value.notifier
-        }, null, 8, ["model"])
+                container: "footer",
+                needRenderWrapper: !1
+              }, null, 8, ["survey"])),
+              v.value ? (t(), u("div", Et, [
+                c("div", {
+                  innerHTML: f(),
+                  class: r(i.value.completedCss)
+                }, null, 10, _t),
+                (t(), y(N("sv-components-container"), {
+                  survey: i.value,
+                  container: "completePage",
+                  needRenderWrapper: !0
+                }, null, 8, ["survey"]))
+              ])) : m("", !0),
+              i.value.state === "completedbefore" ? (t(), u("div", {
+                key: 3,
+                class: r(i.value.completedBeforeCss),
+                innerHTML: i.value.processedCompletedBeforeHtml
+              }, null, 10, Vt)) : m("", !0),
+              i.value.state === "loading" ? (t(), u("div", {
+                key: 4,
+                class: r(i.value.loadingBodyCss),
+                innerHTML: i.value.processedLoadingHtml
+              }, null, 10, Ot)) : m("", !0),
+              i.value.state === "empty" ? (t(), u("div", {
+                key: 5,
+                class: r(p.value.bodyEmpty)
+              }, I(i.value.emptySurveyText), 3)) : m("", !0)
+            ], 2)
+          ]),
+          i.value.showBrandInfo ? (t(), y(O, { key: 1 })) : m("", !0),
+          C(Q, {
+            model: i.value.notifier
+          }, null, 8, ["model"])
+        ], 2)
       ], 6);
     };
   }
-}), Ft = /* @__PURE__ */ h({
+}), Ft = /* @__PURE__ */ g({
   __name: "Notifier",
   props: {
     model: {}
   },
   setup(l) {
     const n = l;
-    return B(() => n.model), (o, e) => {
-      const s = v("sv-action-bar");
-      return L((t(), u("div", {
+    return L(() => n.model), (o, e) => {
+      const s = q("sv-action-bar");
+      return P((t(), u("div", {
         class: r(o.model.css),
         style: S({ visibility: o.model.active ? "visible" : "hidden" }),
         role: "alert",
@@ -4337,11 +4351,11 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           model: o.model.actionBar
         }, null, 8, ["model"])
       ], 6)), [
-        [H, o.model.isDisplayed]
+        [A, o.model.isDisplayed]
       ]);
     };
   }
-}), Wt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], zt = { key: 1 }, Ut = /* @__PURE__ */ h({
+}), Wt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], zt = { key: 1 }, Ut = /* @__PURE__ */ g({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4373,14 +4387,14 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       n.question.isReadOnlyRenderDiv() ? (t(), u("div", zt, I(n.question.otherValue), 1)) : m("", !0)
     ], 2));
   }
-}), Kt = ["disabled", "value", "title"], jt = /* @__PURE__ */ h({
+}), Kt = ["disabled", "value", "title"], jt = /* @__PURE__ */ g({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
   },
   setup(l) {
     const n = l, o = () => n.item.data && n.item.data.mouseDown();
-    return B(() => n.item), (e, s) => e.item.visible ? (t(), u("input", {
+    return L(() => n.item), (e, s) => e.item.visible ? (t(), u("input", {
       key: 0,
       type: "button",
       disabled: e.item.disabled,
@@ -4391,7 +4405,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       onClick: s[0] || (s[0] = (...i) => e.item.action && e.item.action(...i))
     }, null, 42, Kt)) : m("", !0);
   }
-}), ae = /* @__PURE__ */ h({
+}), ae = /* @__PURE__ */ g({
   __name: "PopupSurvey",
   props: {
     survey: {},
@@ -4399,34 +4413,34 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     closeOnCompleteTimeout: {}
   },
   setup(l) {
-    const n = l, o = O(), e = T(() => n.survey ? n.survey.getCss() : {}), s = T(() => {
-      var y;
-      return (y = o.value) != null && y.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), i = T(() => {
-      var y;
-      return (y = o.value) == null ? void 0 : y.isExpanded;
+    const n = l, o = W(), e = R(() => n.survey ? n.survey.getCss() : {}), s = R(() => {
+      var f;
+      return (f = o.value) != null && f.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
+    }), i = R(() => {
+      var f;
+      return (f = o.value) == null ? void 0 : f.isExpanded;
     }), a = () => {
       o.value.changeExpandCollapse();
     }, d = () => {
       o.value.hide();
-    }, p = () => "SurveyComponent", g = () => {
+    }, v = () => "SurveyComponent", p = () => {
       o.value.onScroll();
     };
-    B(() => o.value);
-    const f = Q(
+    L(() => o.value);
+    const b = G(
       () => n.survey,
-      (y) => {
-        const k = new Pe(null, y);
-        n.isExpanded !== void 0 && (k.isExpanded = n.isExpanded), n.closeOnCompleteTimeout !== void 0 && (k.closeOnCompleteTimeout = n.closeOnCompleteTimeout), k.isShowing = !0, o.value = k;
+      (f) => {
+        const $ = new Pe(null, f);
+        n.isExpanded !== void 0 && ($.isExpanded = n.isExpanded), n.closeOnCompleteTimeout !== void 0 && ($.closeOnCompleteTimeout = n.closeOnCompleteTimeout), $.isShowing = !0, o.value = $;
       },
       {
         immediate: !0
       }
     );
-    return _(() => {
-      f();
-    }), (y, k) => {
-      const P = v("survey-string"), D = v("sv-svg-icon");
+    return V(() => {
+      b();
+    }), (f, $) => {
+      const M = q("survey-string"), h = q("sv-svg-icon");
       return o.value.isShowing ? (t(), u("div", {
         key: 0,
         style: S([{ position: "fixed", bottom: "3px", right: "10px" }, {
@@ -4446,8 +4460,8 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
               style: { "padding-right": "10px" },
               class: r(o.value.cssHeaderTitle)
             }, [
-              C(P, {
-                locString: y.survey.locTitle
+              C(M, {
+                locString: f.survey.locTitle
               }, null, 8, ["locString"])
             ], 2),
             c("span", {
@@ -4461,7 +4475,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
             onClick: d,
             style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            C(D, {
+            C(h, {
               iconName: "icon-expanddetail",
               size: 16
             })
@@ -4472,7 +4486,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
             onClick: a,
             style: { float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
           }, [
-            C(D, {
+            C(h, {
               iconName: "icon-collapsedetail",
               size: 16
             })
@@ -4481,30 +4495,30 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         i.value ? (t(), u("div", {
           key: 0,
           class: r(o.value.cssBody),
-          onScroll: g
+          onScroll: p
         }, [
-          (t(), q(M(p()), { survey: y.survey }, null, 8, ["survey"]))
+          (t(), y(N(v()), { survey: f.survey }, null, 8, ["survey"]))
         ], 34)) : m("", !0)
       ], 6)) : m("", !0);
     };
   }
-}), Qt = ["innerHTML"], Zt = /* @__PURE__ */ h({
+}), Qt = ["innerHTML"], Zt = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(), e = T(
+    const n = l, o = T(), e = R(
       () => n.question.customWidget.isDefaultRender
-    ), s = T(
+    ), s = R(
       () => !!n.question.customWidget.htmlTemplate
-    ), i = T(() => n.question.customWidget.htmlTemplate), a = T(() => "survey-" + n.question.getTemplate());
-    return A(() => {
+    ), i = R(() => n.question.customWidget.htmlTemplate), a = R(() => "survey-" + n.question.getTemplate());
+    return E(() => {
       n.question.customWidget.afterRender(n.question, o.value);
-    }), z(() => {
+    }), K(() => {
       n.question.customWidget.willUnmount(n.question, o.value);
-    }), (d, p) => (t(), u("div", {
+    }), (d, v) => (t(), u("div", {
       ref_key: "root",
       ref: o
     }, [
@@ -4512,30 +4526,30 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         key: 0,
         innerHTML: i.value
       }, null, 8, Qt)) : m("", !0),
-      e.value ? (t(), q(M(a.value), {
+      e.value ? (t(), y(N(a.value), {
         key: 1,
         question: d.question,
         css: d.css
       }, null, 8, ["question", "css"])) : m("", !0)
     ], 512));
   }
-}), Gt = /* @__PURE__ */ h({
+}), Gt = /* @__PURE__ */ g({
   __name: "PopupModal",
   setup(l) {
-    const n = O();
-    function o(s, i, a, d, p, g, f = "popup") {
-      const y = Me(
+    const n = W();
+    function o(s, i, a, d, v, p, b = "popup") {
+      const f = Me(
         s,
         i,
         a,
         d,
         void 0,
         void 0,
+        v,
         p,
-        g,
-        f
+        b
       );
-      return e(y);
+      return e(f);
     }
     function e(s, i) {
       s.onHide = () => {
@@ -4547,13 +4561,13 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       );
       return a.model.isVisible = !0, n.value = a, a;
     }
-    return V.showModal || (V.showModal = o, _(() => {
-      V.showModal = void 0;
-    })), V.showDialog || (V.showDialog = e, _(() => {
-      V.showDialog = void 0;
+    return F.showModal || (F.showModal = o, V(() => {
+      F.showModal = void 0;
+    })), F.showDialog || (F.showDialog = e, V(() => {
+      F.showDialog = void 0;
     })), (s, i) => {
-      const a = v("sv-popup-container");
-      return n.value ? (t(), q(ke, {
+      const a = q("sv-popup-container");
+      return n.value ? (t(), y(ke, {
         key: 0,
         to: n.value.container
       }, [
@@ -4561,7 +4575,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       ], 8, ["to"])) : m("", !0);
     };
   }
-}), Xt = /* @__PURE__ */ h({
+}), Xt = /* @__PURE__ */ g({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4569,23 +4583,23 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
   },
   setup(l) {
     const n = l;
-    return B(() => n.counter), (o, e) => (t(), u("div", {
+    return L(() => n.counter), (o, e) => (t(), u("div", {
       class: r(o.remainingCharacterCounter)
     }, I(o.counter.remainingCharacterCounter), 3));
   }
-}), Jt = /* @__PURE__ */ h({
+}), Jt = /* @__PURE__ */ g({
   __name: "Composite",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
-    const e = T(() => n.question.contentPanel);
+    const n = l, o = T(null);
+    H(n, o);
+    const e = R(() => n.question.contentPanel);
     return (s, i) => {
-      const a = v("survey-panel");
-      return t(), q(a, {
+      const a = q("survey-panel");
+      return t(), y(a, {
         ref_key: "root",
         ref: o,
         question: e.value,
@@ -4593,17 +4607,17 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       }, null, 8, ["question", "css"]);
     };
   }
-}), Yt = /* @__PURE__ */ h({
+}), Yt = /* @__PURE__ */ g({
   __name: "Custom",
   props: {
     question: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = R(null);
-    N(n, o);
-    const e = T(() => n.question.contentQuestion), s = (i) => ee(i);
-    return (i, a) => (t(), q(M(s(e.value)), {
+    const n = l, o = T(null);
+    H(n, o);
+    const e = R(() => n.question.contentQuestion), s = (i) => se(i);
+    return (i, a) => (t(), y(N(s(e.value)), {
       ref: o.value,
       question: e.value,
       css: i.css
@@ -4611,15 +4625,15 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
   }
 }), xt = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), ei = [
   xt
-], ue = 440, si = /* @__PURE__ */ h({
+], ue = 440, si = /* @__PURE__ */ g({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(l) {
-    const n = l, o = T(() => ue * n.model.progress), e = T(() => n.model.text);
-    return B(() => n.model), (s, i) => s.model.isRunning && s.model.showTimerAsClock ? (t(), u("div", {
+    const n = l, o = R(() => ue * n.model.progress), e = R(() => n.model.text);
+    return L(() => n.model), (s, i) => s.model.isRunning && s.model.showTimerAsClock ? (t(), u("div", {
       key: 0,
       class: r(s.model.rootCss)
     }, [
@@ -4639,16 +4653,16 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
           class: r(s.model.minorTextCss)
         }, I(s.model.clockMinorText), 3)) : m("", !0)
       ], 2)
-    ], 2)) : L((t(), u("div", {
+    ], 2)) : P((t(), u("div", {
       key: 1,
       class: r(s.model.survey.getCss().timerRoot)
     }, I(e.value), 3)), [
-      [H, s.model.isRunning && !s.model.showTimerAsClock]
+      [A, s.model.isRunning && !s.model.showTimerAsClock]
     ]);
   }
 }), ni = {}, oi = { class: "sd-loading-indicator" };
 function ti(l, n) {
-  const o = v("sv-svg-icon");
+  const o = q("sv-svg-icon");
   return t(), u("div", oi, [
     C(o, {
       iconName: "icon-loading",
@@ -4656,7 +4670,7 @@ function ti(l, n) {
     })
   ]);
 }
-const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
+const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ g({
   __name: "Cover",
   props: {
     model: {},
@@ -4664,11 +4678,11 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
   },
   setup(l) {
     const n = l;
-    return B(() => (n.model.survey = n.survey, n.model)), (o, e) => {
-      const s = v("sv-cover-cell");
+    return L(() => (n.model.survey = n.survey, n.model)), (o, e) => {
+      const s = q("sv-cover-cell");
       return t(), u("div", {
         class: r(o.model.coverClasses),
-        style: S({ height: o.model.renderedHeight, backgroundColor: o.model.backgroundColor })
+        style: S({ height: o.model.renderedHeight })
       }, [
         o.model.backgroundImage ? (t(), u("div", {
           key: 0,
@@ -4678,7 +4692,7 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
         c("div", {
           class: r(o.model.contentClasses)
         }, [
-          (t(!0), u(w, null, $(o.model.cells, (i) => (t(), q(s, { model: i }, null, 8, ["model"]))), 256))
+          (t(!0), u(w, null, B(o.model.cells, (i) => (t(), y(s, { model: i }, null, 8, ["model"]))), 256))
         ], 2)
       ], 6);
     };
@@ -4686,14 +4700,14 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
 }), ri = {
   key: 0,
   class: "sv-cover__logo"
-}, ai = ["src", "width", "height", "alt"], ui = /* @__PURE__ */ h({
+}, ai = ["src", "width", "height", "alt"], ui = /* @__PURE__ */ g({
   __name: "CoverCell",
   props: {
     model: {}
   },
   setup(l) {
     return (n, o) => {
-      const e = v("survey-element-title"), s = v("survey-string");
+      const e = q("survey-element-title"), s = q("survey-string");
       return t(), u("div", {
         class: r(n.model.css),
         style: S(n.model.style)
@@ -4744,7 +4758,7 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), di = /* @__PURE__ */ h({
+}), di = /* @__PURE__ */ g({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -4752,14 +4766,14 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
   },
   setup(l) {
     return (n, o) => {
-      const e = v("sv-svg-icon");
+      const e = q("sv-svg-icon");
       return t(), u("button", {
         type: "button",
         class: r(n.css),
         onClick: o[0] || (o[0] = (...s) => n.question.doClean && n.question.doClean(...s))
       }, [
         c("span", null, I(n.question.clearButtonCaption), 1),
-        n.question.cssClasses.removeButtonIconId ? (t(), q(e, {
+        n.question.cssClasses.removeButtonIconId ? (t(), y(e, {
           key: 0,
           iconName: n.question.cssClasses.removeButtonIconId,
           size: "auto",
@@ -4768,18 +4782,83 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), mi = ["onClick", "href", "title", "download"], ci = ["src"], pi = ["onClick"], vi = ["onClick", "href", "title", "download"], qi = /* @__PURE__ */ h({
-  __name: "FilePreview",
+}), mi = ["id"], ci = /* @__PURE__ */ g({
+  __name: "FileVideo",
   props: {
     question: {}
   },
   setup(l) {
     return (n, o) => {
-      const e = v("sv-svg-icon");
+      const e = q("sv-action");
       return t(), u("div", {
+        class: r(n.question.cssClasses.videoContainer)
+      }, [
+        C(e, {
+          item: n.question.changeCameraAction
+        }, null, 8, ["item"]),
+        C(e, {
+          item: n.question.closeCameraAction
+        }, null, 8, ["item"]),
+        c("video", {
+          autoplay: "",
+          playsinline: "",
+          id: n.question.videoId,
+          class: r(n.question.cssClasses.video)
+        }, null, 10, mi),
+        C(e, {
+          item: n.question.takePictureAction
+        }, null, 8, ["item"])
+      ], 2);
+    };
+  }
+}), pi = ["for", "aria-label"], vi = /* @__PURE__ */ g({
+  __name: "FileChooseButton",
+  props: {
+    data: {},
+    item: {}
+  },
+  setup(l) {
+    const n = l, o = R(
+      () => {
+        var e;
+        return ((e = n.data) == null ? void 0 : e.question) || n.item.data.question;
+      }
+    );
+    return (e, s) => {
+      const i = q("sv-svg-icon"), a = ee("key2click");
+      return o.value.isReadOnly ? m("", !0) : P((t(), u("label", {
+        key: 0,
+        role: "button",
+        tabindex: "0",
+        class: r(o.value.getChooseFileCss()),
+        for: o.value.inputId,
+        "aria-label": o.value.chooseButtonText
+      }, [
+        o.value.cssClasses.chooseFileIconId ? (t(), y(i, {
+          key: 0,
+          title: o.value.chooseButtonText,
+          iconName: o.value.cssClasses.chooseFileIconId,
+          size: "auto"
+        }, null, 8, ["title", "iconName"])) : m("", !0),
+        c("span", null, I(o.value.chooseButtonText), 1)
+      ], 10, pi)), [
+        [a]
+      ]);
+    };
+  }
+}), qi = ["onClick", "href", "title", "download"], yi = ["src"], gi = ["onClick"], hi = ["onClick", "href", "title", "download"], Ci = /* @__PURE__ */ g({
+  __name: "FilePreview",
+  props: {
+    question: {}
+  },
+  setup(l) {
+    return (n, o) => {
+      const e = q("sv-svg-icon");
+      return n.question.showPreviewContainer ? (t(), u("div", {
+        key: 0,
         class: r(n.question.cssClasses.fileList || void 0)
       }, [
-        (t(!0), u(w, null, $(n.question.previewValue, (s, i) => L((t(), u("span", {
+        (t(!0), u(w, null, B(n.question.previewValue, (s, i) => P((t(), u("span", {
           key: n.question.inputId + "_" + i,
           class: r(n.question.cssClasses.preview)
         }, [
@@ -4793,7 +4872,7 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
               title: s.name,
               download: s.name,
               style: S({ width: n.question.imageWidth })
-            }, I(s.name), 13, mi)
+            }, I(s.name), 13, qi)
           ], 2)) : m("", !0),
           c("div", {
             class: r(n.question.cssClasses.imageWrapper)
@@ -4806,8 +4885,8 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
                 width: n.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, ci)) : m("", !0),
-            n.question.defaultImage(s) ? (t(), q(e, {
+            }, null, 12, yi)) : m("", !0),
+            n.question.defaultImage(s) ? (t(), y(e, {
               key: 1,
               iconName: n.question.cssClasses.defaultImageIconId,
               class: r(n.question.cssClasses.defaultImage),
@@ -4821,14 +4900,14 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
               c("span", {
                 class: r(n.question.cssClasses.removeFile)
               }, I(n.question.removeFileCaption), 3),
-              n.question.cssClasses.removeFileSvgIconId ? (t(), q(e, {
+              n.question.cssClasses.removeFileSvgIconId ? (t(), y(e, {
                 key: 0,
                 title: n.question.removeFileCaption,
                 class: r(n.question.cssClasses.removeFileSvg),
                 iconName: n.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : m("", !0)
-            ], 10, pi)) : m("", !0)
+            ], 10, gi)) : m("", !0)
           ], 2),
           s.name && n.question.cssClasses.fileSignBottom ? (t(), u("div", {
             key: 1,
@@ -4840,82 +4919,18 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ h({
               title: s.name,
               download: s.name,
               style: S({ width: n.question.imageWidth })
-            }, I(s.name), 13, vi)
+            }, I(s.name), 13, hi)
           ], 2)) : m("", !0)
         ], 2)), [
-          [H, s && n.question.isPreviewVisible(i)]
+          [A, s && n.question.isPreviewVisible(i)]
         ])), 128))
-      ], 2);
-    };
-  }
-}), yi = ["id"], gi = /* @__PURE__ */ h({
-  __name: "FileVideo",
-  props: {
-    question: {}
-  },
-  setup(l) {
-    return (n, o) => {
-      const e = v("sv-action");
-      return t(), u("div", {
-        class: r(n.question.cssClasses.videoContainer)
-      }, [
-        C(e, {
-          item: n.question.changeCameraAction
-        }, null, 8, ["item"]),
-        C(e, {
-          item: n.question.closeCameraAction
-        }, null, 8, ["item"]),
-        c("video", {
-          autoplay: "",
-          playsinline: "",
-          id: n.question.videoId,
-          class: r(n.question.cssClasses.video)
-        }, null, 10, yi),
-        C(e, {
-          item: n.question.takePictureAction
-        }, null, 8, ["item"])
-      ], 2);
-    };
-  }
-}), hi = ["for", "aria-label"], Ci = /* @__PURE__ */ h({
-  __name: "FileChooseButton",
-  props: {
-    data: {},
-    item: {}
-  },
-  setup(l) {
-    const n = l, o = T(
-      () => {
-        var e;
-        return ((e = n.data) == null ? void 0 : e.question) || n.item.data.question;
-      }
-    );
-    return (e, s) => {
-      const i = v("sv-svg-icon"), a = x("key2click");
-      return o.value.isReadOnly ? m("", !0) : L((t(), u("label", {
-        key: 0,
-        role: "button",
-        tabindex: "0",
-        class: r(o.value.getChooseFileCss()),
-        for: o.value.inputId,
-        "aria-label": o.value.chooseButtonText
-      }, [
-        o.value.cssClasses.chooseFileIconId ? (t(), q(i, {
-          key: 0,
-          title: o.value.chooseButtonText,
-          iconName: o.value.cssClasses.chooseFileIconId,
-          size: "auto"
-        }, null, 8, ["title", "iconName"])) : m("", !0),
-        c("span", null, I(o.value.chooseButtonText), 1)
-      ], 10, hi)), [
-        [a]
-      ]);
+      ], 2)) : m("", !0);
     };
   }
 });
 He.platform = "vue3";
 function bi(l) {
-  l.component("SurveyComponent", re), l.component("PopupSurveyComponent", ae), l.component("survey", re), l.component("popup-survey", ae), l.component("survey-header", We), l.component("survey-page", Ve), l.component("survey-row", ze), l.component("survey-element", Ke), l.component("survey-panel", Ze), l.component("survey-element-header", Ge), l.component("survey-string", Xe), l.component("sv-string-viewer", xe), l.component("sv-string-editor", ss), l.component("sv-skeleton", os), l.component("survey-text", ls), l.component("survey-text-input", ds), l.component("survey-checkbox", ps), l.component("survey-checkbox-item", hs), l.component("survey-radiogroup", fs), l.component("survey-radiogroup-item", Rs), l.component("survey-signaturepad", Ls), l.component("survey-html", Ps), l.component("survey-image", As), l.component("survey-expression", Es), l.component("survey-file", Os), l.component("sv-file-choose-btn", Ci), l.component("sv-file-clean-btn", di), l.component("sv-file-preview", qi), l.component("sv-file-video", gi), l.component("survey-imagepicker", Ws), l.component("survey-imagepicker-item", Qs), l.component("survey-comment", Xs), l.component("survey-dropdown", Js), l.component("sv-dropdown-select", sn), l.component("sv-dropdown-option-item", on), l.component("sv-dropdown", un), l.component("survey-tagbox", dn), l.component("sv-tagbox", pn), l.component("sv-tagbox-item", hn), l.component("sv-tagbox-filter", yn), l.component("survey-ranking", Cn), l.component("survey-ranking-item", Tn), l.component("survey-rating", Ln), l.component("sv-rating-item", Pn), l.component("sv-rating-item-smiley", Nn), l.component("sv-rating-item-star", An), l.component("sv-rating-dropdown", En), l.component("survey-boolean", Vn), l.component("sv-boolean-radio", On), l.component("sv-boolean-radio-item", zn), l.component("sv-boolean-checkbox", Zn), l.component("survey-multipletext", Gn), l.component("survey-multipletext-item", Jn), l.component("survey-matrix", io), l.component("survey-matrixdropdown", lo), l.component("survey-matrixtable", mo), l.component("survey-matrixheaderrequired", po), l.component("survey-matrixcell", qo), l.component("survey-matrixdynamic", yo), l.component("sv-matrix-remove-button", ho), l.component("sv-matrix-drag-drop-icon", bo), l.component("sv-matrix-detail-button", fo), l.component("survey-paneldynamic", Io), l.component("survey-paneldynamicprogress", wo), l.component("survey-paneldynamicprogress-v2", So), l.component("sv-paneldynamic-add-btn", Ro), l.component("sv-paneldynamic-next-btn", $o), l.component("sv-paneldynamic-prev-btn", Lo), l.component("sv-paneldynamic-remove-btn", Do), l.component("sv-paneldynamic-progress-text", Po), l.component("sv-components-container", $t), l.component("sv-progress-buttons", Pt), l.component("sv-progress-toc", Mt), l.component("sv-progress-pages", j), l.component("sv-progress-questions", j), l.component("sv-progress-correctquestions", j), l.component("sv-progress-requiredquestions", j), l.component("survey-errors", No), l.component("survey-question-comment", Eo), l.component("survey-element-title", _o), l.component("survey-element-title-content", zo), l.component("sv-title-actions", jo), l.component("sv-brand-info", Yo), l.component("sv-svg-icon", nt), l.component("sv-action-bar", ot), l.component("sv-action", lt), l.component("sv-action-bar-item", at), l.component("sv-action-bar-item-dropdown", dt), l.component("sv-action-bar-separator", mt), l.component("sv-list", qt), l.component("sv-list-item", gt), l.component("sv-popup", ht), l.component("sv-popup-container", St), l.component("popup-pointer", Rt), l.component("sv-notifier", Ft), l.component("survey-other-choice", Ut), l.component("sv-nav-btn", jt), l.component("survey-customwidget", Zt), l.component("survey-popup-modal", Gt), l.component("sv-character-counter", Xt), l.component("survey-composite", Jt), l.component("survey-custom", Yt), l.component("sv-timerpanel", si), l.component("sv-loading-indicator", ii), l.component("sv-cover", li), l.component("sv-cover-cell", ui), l.directive("key2click", {
+  l.component("SurveyComponent", re), l.component("PopupSurveyComponent", ae), l.component("survey", re), l.component("popup-survey", ae), l.component("survey-header", We), l.component("survey-page", Ve), l.component("survey-row", ze), l.component("survey-element", Ke), l.component("survey-panel", Ze), l.component("survey-element-header", Ge), l.component("survey-string", Xe), l.component("sv-string-viewer", xe), l.component("sv-string-editor", ss), l.component("sv-skeleton", os), l.component("survey-text", ls), l.component("survey-text-input", ds), l.component("survey-checkbox", ps), l.component("survey-checkbox-item", hs), l.component("survey-radiogroup", fs), l.component("survey-radiogroup-item", Rs), l.component("survey-signaturepad", Ls), l.component("survey-html", Ps), l.component("survey-image", As), l.component("survey-expression", Es), l.component("survey-file", Os), l.component("sv-file-choose-btn", vi), l.component("sv-file-clean-btn", di), l.component("sv-file-preview", Ci), l.component("sv-file-video", ci), l.component("survey-imagepicker", Ws), l.component("survey-imagepicker-item", Qs), l.component("survey-comment", Xs), l.component("survey-dropdown", Js), l.component("sv-dropdown-select", sn), l.component("sv-dropdown-option-item", on), l.component("sv-dropdown", un), l.component("survey-tagbox", dn), l.component("sv-tagbox", pn), l.component("sv-tagbox-item", hn), l.component("sv-tagbox-filter", yn), l.component("survey-ranking", Cn), l.component("survey-ranking-item", Tn), l.component("survey-rating", Ln), l.component("sv-rating-item", Pn), l.component("sv-rating-item-smiley", Nn), l.component("sv-rating-item-star", An), l.component("sv-rating-dropdown", En), l.component("survey-boolean", Vn), l.component("sv-boolean-radio", On), l.component("sv-boolean-radio-item", zn), l.component("sv-boolean-checkbox", Zn), l.component("survey-multipletext", Gn), l.component("survey-multipletext-item", Jn), l.component("survey-matrix", io), l.component("survey-matrixdropdown", lo), l.component("survey-matrixtable", mo), l.component("survey-matrixheaderrequired", po), l.component("survey-matrixcell", qo), l.component("survey-matrixdynamic", yo), l.component("sv-matrix-remove-button", ho), l.component("sv-matrix-drag-drop-icon", bo), l.component("sv-matrix-detail-button", fo), l.component("survey-paneldynamic", Io), l.component("survey-paneldynamicprogress", wo), l.component("survey-paneldynamicprogress-v2", So), l.component("sv-paneldynamic-add-btn", Ro), l.component("sv-paneldynamic-next-btn", $o), l.component("sv-paneldynamic-prev-btn", Lo), l.component("sv-paneldynamic-remove-btn", Do), l.component("sv-paneldynamic-progress-text", Po), l.component("sv-components-container", $t), l.component("sv-progress-buttons", Pt), l.component("sv-progress-toc", Mt), l.component("sv-progress-pages", Z), l.component("sv-progress-questions", Z), l.component("sv-progress-correctquestions", Z), l.component("sv-progress-requiredquestions", Z), l.component("survey-errors", No), l.component("survey-question-comment", Eo), l.component("survey-element-title", _o), l.component("survey-element-title-content", zo), l.component("sv-title-actions", jo), l.component("sv-brand-info", Yo), l.component("sv-svg-icon", nt), l.component("sv-action-bar", ot), l.component("sv-action", lt), l.component("sv-action-bar-item", at), l.component("sv-action-bar-item-dropdown", dt), l.component("sv-action-bar-separator", mt), l.component("sv-list", qt), l.component("sv-list-item", gt), l.component("sv-popup", ht), l.component("sv-popup-container", St), l.component("popup-pointer", Rt), l.component("sv-notifier", Ft), l.component("survey-other-choice", Ut), l.component("sv-nav-btn", jt), l.component("survey-customwidget", Zt), l.component("survey-popup-modal", Gt), l.component("sv-character-counter", Xt), l.component("survey-composite", Jt), l.component("survey-custom", Yt), l.component("sv-timerpanel", si), l.component("sv-loading-indicator", ii), l.component("sv-cover", li), l.component("sv-cover-cell", ui), l.directive("key2click", {
     mounted: function(n, o) {
       const e = { ...o.value };
       e.disableTabStop || (n.tabIndex = 0), n.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), de(s, e), !1)), n.addEventListener("keydown", (s) => {
@@ -4933,7 +4948,7 @@ const Ii = {
 };
 export {
   Ii as surveyPlugin,
-  B as useBase,
-  F as useLocString,
-  N as useQuestion
+  L as useBase,
+  z as useLocString,
+  H as useQuestion
 };